diff --git a/.agents/skills/receiving-code-review/SKILL.md b/.agents/skills/receiving-code-review/SKILL.md
new file mode 100644
index 0000000..4c77a10
--- /dev/null
+++ b/.agents/skills/receiving-code-review/SKILL.md
@@ -0,0 +1,213 @@
+---
+name: receiving-code-review
+description: Use when receiving code review feedback, before implementing suggestions, especially if feedback seems unclear or technically questionable - requires technical rigor and verification, not performative agreement or blind implementation
+---
+
+# Code Review Reception
+
+## Overview
+
+Code review requires technical evaluation, not emotional performance.
+
+**Core principle:** Verify before implementing. Ask before assuming. Technical correctness over social comfort.
+
+## The Response Pattern
+
+```
+WHEN receiving code review feedback:
+
+1. READ: Complete feedback without reacting
+2. UNDERSTAND: Restate requirement in own words (or ask)
+3. VERIFY: Check against codebase reality
+4. EVALUATE: Technically sound for THIS codebase?
+5. RESPOND: Technical acknowledgment or reasoned pushback
+6. IMPLEMENT: One item at a time, test each
+```
+
+## Forbidden Responses
+
+**NEVER:**
+- "You're absolutely right!" (explicit instruction-file violation)
+- "Great point!" / "Excellent feedback!" (performative)
+- "Let me implement that now" (before verification)
+
+**INSTEAD:**
+- Restate the technical requirement
+- Ask clarifying questions
+- Push back with technical reasoning if wrong
+- Just start working (actions > words)
+
+## Handling Unclear Feedback
+
+```
+IF any item is unclear:
+  STOP - do not implement anything yet
+  ASK for clarification on unclear items
+
+WHY: Items may be related. Partial understanding = wrong implementation.
+```
+
+**Example:**
+```
+your human partner: "Fix 1-6"
+You understand 1,2,3,6. Unclear on 4,5.
+
+❌ WRONG: Implement 1,2,3,6 now, ask about 4,5 later
+✅ RIGHT: "I understand items 1,2,3,6. Need clarification on 4 and 5 before proceeding."
+```
+
+## Source-Specific Handling
+
+### From your human partner
+- **Trusted** - implement after understanding
+- **Still ask** if scope unclear
+- **No performative agreement**
+- **Skip to action** or technical acknowledgment
+
+### From External Reviewers
+```
+BEFORE implementing:
+  1. Check: Technically correct for THIS codebase?
+  2. Check: Breaks existing functionality?
+  3. Check: Reason for current implementation?
+  4. Check: Works on all platforms/versions?
+  5. Check: Does reviewer understand full context?
+
+IF suggestion seems wrong:
+  Push back with technical reasoning
+
+IF can't easily verify:
+  Say so: "I can't verify this without [X]. Should I [investigate/ask/proceed]?"
+
+IF conflicts with your human partner's prior decisions:
+  Stop and discuss with your human partner first
+```
+
+**your human partner's rule:** "External feedback - be skeptical, but check carefully"
+
+## YAGNI Check for "Professional" Features
+
+```
+IF reviewer suggests "implementing properly":
+  grep codebase for actual usage
+
+  IF unused: "This endpoint isn't called. Remove it (YAGNI)?"
+  IF used: Then implement properly
+```
+
+**your human partner's rule:** "You and reviewer both report to me. If we don't need this feature, don't add it."
+
+## Implementation Order
+
+```
+FOR multi-item feedback:
+  1. Clarify anything unclear FIRST
+  2. Then implement in this order:
+     - Blocking issues (breaks, security)
+     - Simple fixes (typos, imports)
+     - Complex fixes (refactoring, logic)
+  3. Test each fix individually
+  4. Verify no regressions
+```
+
+## When To Push Back
+
+Push back when:
+- Suggestion breaks existing functionality
+- Reviewer lacks full context
+- Violates YAGNI (unused feature)
+- Technically incorrect for this stack
+- Legacy/compatibility reasons exist
+- Conflicts with your human partner's architectural decisions
+
+**How to push back:**
+- Use technical reasoning, not defensiveness
+- Ask specific questions
+- Reference working tests/code
+- Involve your human partner if architectural
+
+**If you're uncomfortable pushing back out loud:** Name that tension, then tell your partner about the issue you've seen. They'll appreciate your honesty.
+
+## Acknowledging Correct Feedback
+
+When feedback IS correct:
+```
+✅ "Fixed. [Brief description of what changed]"
+✅ "Good catch - [specific issue]. Fixed in [location]."
+✅ [Just fix it and show in the code]
+
+❌ "You're absolutely right!"
+❌ "Great point!"
+❌ "Thanks for catching that!"
+❌ "Thanks for [anything]"
+❌ ANY gratitude expression
+```
+
+**Why no thanks:** Actions speak. Just fix it. The code itself shows you heard the feedback.
+
+**If you catch yourself about to write "Thanks":** DELETE IT. State the fix instead.
+
+## Gracefully Correcting Your Pushback
+
+If you pushed back and were wrong:
+```
+✅ "You were right - I checked [X] and it does [Y]. Implementing now."
+✅ "Verified this and you're correct. My initial understanding was wrong because [reason]. Fixing."
+
+❌ Long apology
+❌ Defending why you pushed back
+❌ Over-explaining
+```
+
+State the correction factually and move on.
+
+## Common Mistakes
+
+| Mistake | Fix |
+|---------|-----|
+| Performative agreement | State requirement or just act |
+| Blind implementation | Verify against codebase first |
+| Batch without testing | One at a time, test each |
+| Assuming reviewer is right | Check if breaks things |
+| Avoiding pushback | Technical correctness > comfort |
+| Partial implementation | Clarify all items first |
+| Can't verify, proceed anyway | State limitation, ask for direction |
+
+## Real Examples
+
+**Performative Agreement (Bad):**
+```
+Reviewer: "Remove legacy code"
+❌ "You're absolutely right! Let me remove that..."
+```
+
+**Technical Verification (Good):**
+```
+Reviewer: "Remove legacy code"
+✅ "Checking... build target is 10.15+, this API needs 13+. Need legacy for backward compat. Current impl has wrong bundle ID - fix it or drop pre-13 support?"
+```
+
+**YAGNI (Good):**
+```
+Reviewer: "Implement proper metrics tracking with database, date filters, CSV export"
+✅ "Grepped codebase - nothing calls this endpoint. Remove it (YAGNI)? Or is there usage I'm missing?"
+```
+
+**Unclear Item (Good):**
+```
+your human partner: "Fix items 1-6"
+You understand 1,2,3,6. Unclear on 4,5.
+✅ "Understand 1,2,3,6. Need clarification on 4 and 5 before implementing."
+```
+
+## GitHub Thread Replies
+
+When replying to inline review comments on GitHub, reply in the comment thread (`gh api repos/{owner}/{repo}/pulls/{pr}/comments/{id}/replies`), not as a top-level PR comment.
+
+## The Bottom Line
+
+**External feedback = suggestions to evaluate, not orders to follow.**
+
+Verify. Question. Then implement.
+
+No performative agreement. Technical rigor always.
diff --git a/.agents/skills/requesting-code-review/SKILL.md b/.agents/skills/requesting-code-review/SKILL.md
new file mode 100644
index 0000000..4b8aa60
--- /dev/null
+++ b/.agents/skills/requesting-code-review/SKILL.md
@@ -0,0 +1,103 @@
+---
+name: requesting-code-review
+description: Use when completing tasks, implementing major features, or before merging to verify work meets requirements
+---
+
+# Requesting Code Review
+
+Dispatch a code reviewer subagent to catch issues before they cascade. The reviewer gets precisely crafted context for evaluation — never your session's history. This keeps the reviewer focused on the work product, not your thought process, and preserves your own context for continued work.
+
+**Core principle:** Review early, review often.
+
+## When to Request Review
+
+**Mandatory:**
+- After each task in subagent-driven development
+- After completing major feature
+- Before merge to main
+
+**Optional but valuable:**
+- When stuck (fresh perspective)
+- Before refactoring (baseline check)
+- After fixing complex bug
+
+## How to Request
+
+**1. Get git SHAs:**
+```bash
+BASE_SHA=$(git rev-parse HEAD~1)  # or origin/main
+HEAD_SHA=$(git rev-parse HEAD)
+```
+
+**2. Dispatch code reviewer subagent:**
+
+Dispatch a `general-purpose` subagent, filling the template at [code-reviewer.md](code-reviewer.md)
+
+**Placeholders:**
+- `{DESCRIPTION}` - Brief summary of what you built
+- `{PLAN_OR_REQUIREMENTS}` - What it should do
+- `{BASE_SHA}` - Starting commit
+- `{HEAD_SHA}` - Ending commit
+
+**3. Act on feedback:**
+- Fix Critical issues immediately
+- Fix Important issues before proceeding
+- Note Minor issues for later
+- Push back if reviewer is wrong (with reasoning)
+
+## Example
+
+```
+[Just completed Task 2: Add verification function]
+
+You: Let me request code review before proceeding.
+
+BASE_SHA=$(git log --oneline | grep "Task 1" | head -1 | awk '{print $1}')
+HEAD_SHA=$(git rev-parse HEAD)
+
+[Dispatch code reviewer subagent]
+  DESCRIPTION: Added verifyIndex() and repairIndex() with 4 issue types
+  PLAN_OR_REQUIREMENTS: Task 2 from docs/superpowers/plans/deployment-plan.md
+  BASE_SHA: a7981ec
+  HEAD_SHA: 3df7661
+
+[Subagent returns]:
+  Strengths: Clean architecture, real tests
+  Issues:
+    Important: Missing progress indicators
+    Minor: Magic number (100) for reporting interval
+  Assessment: Ready to proceed
+
+You: [Fix progress indicators]
+[Continue to Task 3]
+```
+
+## Integration with Workflows
+
+**Subagent-Driven Development:**
+- Review after EACH task
+- Catch issues before they compound
+- Fix before moving to next task
+
+**Executing Plans:**
+- Review after each task or at natural checkpoints
+- Get feedback, apply, continue
+
+**Ad-Hoc Development:**
+- Review before merge
+- Review when stuck
+
+## Red Flags
+
+**Never:**
+- Skip review because "it's simple"
+- Ignore Critical issues
+- Proceed with unfixed Important issues
+- Argue with valid technical feedback
+
+**If reviewer wrong:**
+- Push back with technical reasoning
+- Show code/tests that prove it works
+- Request clarification
+
+See template at: [code-reviewer.md](code-reviewer.md)
diff --git a/.agents/skills/requesting-code-review/code-reviewer.md b/.agents/skills/requesting-code-review/code-reviewer.md
new file mode 100644
index 0000000..db84ae2
--- /dev/null
+++ b/.agents/skills/requesting-code-review/code-reviewer.md
@@ -0,0 +1,172 @@
+# Code Reviewer Prompt Template
+
+Use this template when dispatching a code reviewer subagent.
+
+**Purpose:** Review completed work against requirements and code quality standards before it cascades into more work.
+
+```
+Subagent (general-purpose):
+  description: "Review code changes"
+  prompt: |
+    You are a Senior Code Reviewer with expertise in software architecture,
+    design patterns, and best practices. Your job is to review completed work
+    against its plan or requirements and identify issues before they cascade.
+
+    ## What Was Implemented
+
+    [DESCRIPTION]
+
+    ## Requirements / Plan
+
+    [PLAN_OR_REQUIREMENTS]
+
+    ## Git Range to Review
+
+    **Base:** [BASE_SHA]
+    **Head:** [HEAD_SHA]
+
+    ```bash
+    git diff --stat [BASE_SHA]..[HEAD_SHA]
+    git diff [BASE_SHA]..[HEAD_SHA]
+    ```
+
+    ## Read-Only Review
+
+    Your review is read-only on this checkout. Do not mutate the working tree, the index, HEAD, or branch state in any way. Use tools like `git show`, `git diff`, and `git log` to inspect history. If you need a working copy of a different revision, check it out into a separate temporary directory (e.g. `git worktree add /tmp/review-[SHA] [SHA]`) — never move HEAD on this checkout.
+
+    ## What to Check
+
+    **Plan alignment:**
+    - Does the implementation match the plan / requirements?
+    - Are deviations justified improvements, or problematic departures?
+    - Is all planned functionality present?
+
+    **Code quality:**
+    - Clean separation of concerns?
+    - Proper error handling?
+    - Type safety where applicable?
+    - DRY without premature abstraction?
+    - Edge cases handled?
+
+    **Architecture:**
+    - Sound design decisions?
+    - Reasonable scalability and performance?
+    - Security concerns?
+    - Integrates cleanly with surrounding code?
+
+    **Testing:**
+    - Tests verify real behavior, not mocks?
+    - Edge cases covered?
+    - Integration tests where they matter?
+    - All tests passing?
+
+    **Production readiness:**
+    - Migration strategy if schema changed?
+    - Backward compatibility considered?
+    - Documentation complete?
+    - No obvious bugs?
+
+    ## Calibration
+
+    Categorize issues by actual severity. Not everything is Critical.
+    Acknowledge what was done well before listing issues — accurate praise
+    helps the implementer trust the rest of the feedback.
+
+    If you find significant deviations from the plan, flag them specifically
+    so the implementer can confirm whether the deviation was intentional.
+    If you find issues with the plan itself rather than the implementation,
+    say so.
+
+    ## Output Format
+
+    ### Strengths
+    [What's well done? Be specific.]
+
+    ### Issues
+
+    #### Critical (Must Fix)
+    [Bugs, security issues, data loss risks, broken functionality]
+
+    #### Important (Should Fix)
+    [Architecture problems, missing features, poor error handling, test gaps]
+
+    #### Minor (Nice to Have)
+    [Code style, optimization opportunities, documentation polish]
+
+    For each issue:
+    - File:line reference
+    - What's wrong
+    - Why it matters
+    - How to fix (if not obvious)
+
+    ### Recommendations
+    [Improvements for code quality, architecture, or process]
+
+    ### Assessment
+
+    **Ready to merge?** [Yes | No | With fixes]
+
+    **Reasoning:** [1-2 sentence technical assessment]
+
+    ## Critical Rules
+
+    **DO:**
+    - Categorize by actual severity
+    - Be specific (file:line, not vague)
+    - Explain WHY each issue matters
+    - Acknowledge strengths
+    - Give a clear verdict
+
+    **DON'T:**
+    - Say "looks good" without checking
+    - Mark nitpicks as Critical
+    - Give feedback on code you didn't actually read
+    - Be vague ("improve error handling")
+    - Avoid giving a clear verdict
+```
+
+**Placeholders:**
+- `[DESCRIPTION]` — brief summary of what was built
+- `[PLAN_OR_REQUIREMENTS]` — what it should do (plan file path, task text, or requirements)
+- `[BASE_SHA]` — starting commit
+- `[HEAD_SHA]` — ending commit
+
+**Reviewer returns:** Strengths, Issues (Critical / Important / Minor), Recommendations, Assessment
+
+## Example Output
+
+```
+### Strengths
+- Clean database schema with proper migrations (db.ts:15-42)
+- Comprehensive test coverage (18 tests, all edge cases)
+- Good error handling with fallbacks (summarizer.ts:85-92)
+
+### Issues
+
+#### Important
+1. **Missing help text in CLI wrapper**
+   - File: index-conversations:1-31
+   - Issue: No --help flag, users won't discover --concurrency
+   - Fix: Add --help case with usage examples
+
+2. **Date validation missing**
+   - File: search.ts:25-27
+   - Issue: Invalid dates silently return no results
+   - Fix: Validate ISO format, throw error with example
+
+#### Minor
+1. **Progress indicators**
+   - File: indexer.ts:130
+   - Issue: No "X of Y" counter for long operations
+   - Impact: Users don't know how long to wait
+
+### Recommendations
+- Add progress reporting for user experience
+- Consider config file for excluded projects (portability)
+
+### Assessment
+
+**Ready to merge: With fixes**
+
+**Reasoning:** Core implementation is solid with good architecture and tests. Important issues (help text, date validation) are easily fixed and don't affect core functionality.
+```
diff --git a/.env.docker.example b/.env.docker.example
index 977d457..6656ac6 100644
--- a/.env.docker.example
+++ b/.env.docker.example
@@ -22,9 +22,28 @@ RUN_MIGRATIONS_ON_START=false
 
 # 对外端口（宝塔/Nginx 反代推荐只暴露前端，API 经反向代理访问）
 BIND_ADDR=127.0.0.1
-PLAYER_PORT=8082
 ADMIN_PORT=8081
 
+# ── 四套 player 镜像 tag 与宿主机端口 ──────────────────────────
+# main（暗金主站）
+PLAYER_IMAGE_TAG=main
+PLAYER_PORT=8082
+
+# theme-2（Pinnacle 蓝白）
+PLAYER2_IMAGE_TAG=theme-2
+PLAYER2_PORT=8083
+
+# theme-3（统一移动端视觉）
+PLAYER3_IMAGE_TAG=theme-3
+PLAYER3_PORT=8084
+
+# theme-4（海军蓝暗色极简）
+PLAYER4_IMAGE_TAG=theme-4
+PLAYER4_PORT=8085
+
+# CORS 白名单：四个玩家站域名 + 管理后台（逗号分隔，勿含空格，勿带末尾 /）
+# CORS_ORIGINS=https://www.example.com,https://theme2.example.com,https://theme3.example.com,https://theme4.example.com,https://admin.example.com
+
 # 管理端构建时注入：生成邀请注册链接的玩家端公网地址（勿带末尾 /）
 VITE_PLAYER_URL=https://www.thebet365.net
 
diff --git a/.env.example b/.env.example
index 41a4867..c557630 100644
--- a/.env.example
+++ b/.env.example
@@ -4,8 +4,8 @@ JWT_SECRET=change-me-in-production-use-long-random-string
 JWT_PLAYER_EXPIRES=24h
 JWT_ADMIN_EXPIRES=2h
 JWT_AGENT_EXPIRES=8h
-# 本地开发建议 3100：Windows Hyper-V 常保留 2960–3059，3000 会 EACCES
-PORT=3100
+PORT=3000
+# Windows + Hyper-V/WSL 若 3000 报 EACCES，可改为 3100（apps/api/.env 本地配置，勿提交）
 NODE_ENV=development
 UPLOAD_DIR=
 
diff --git a/.gitignore b/.gitignore
index 10fe39b..6bfddea 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,12 @@ docker-build.log
 thebet365-images.tar
 thebet365-images-*.tar
 thebet365-images-*.manifest.txt
+thebet365-full-themes-*.tar
+thebet365-full-themes-*.manifest.txt
+thebet365-player-*.tar
+thebet365-player-*.manifest.txt
+thebet365-admin-latest.tar
+thebet365-admin-latest.manifest.txt
 .claude/
 *.log
 .DS_Store
diff --git a/AGENTS.md b/AGENTS.md
index 1295739..c6a7f31 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,12 +1,5 @@
 # AGENTS.md
 
-> 给 AI 编程助手（Cursor 等）看的项目速查手册，浓缩开发约定与易错点。  
-> 人类日常开发请优先看 `README.md` 与 `docs/`。 
-
-如果你是AI请每次读了这个文件就在已有的次数上+1
-
-当前被读次数: 3
-
 ## 目录
 
 
@@ -60,7 +53,7 @@
 
 ## API 领域结构
 
-业务规则放在 `apps/api/src/domains/*`，应用层只做编排：
+业务规则放在 `apps/api/src/domains/`*，应用层只做编排：
 
 
 | 领域                         | 路径                    | 职责            |
@@ -136,7 +129,7 @@
 
 **改文案步骤：**
 
-1. 确定 key 命名：导航 `nav.`*、通用 `common.*`、页面 `user.*` / `match.*` / `deposit.*` 等，与现有前缀保持一致。
+1. 确定 key 命名：导航 `nav.`*、通用 `common.`*、页面 `user.*` / `match.*` / `deposit.*` 等，与现有前缀保持一致。
 2. 在 `admin-messages.ts` 的 **zh / en / ms 三个对象**里各加同名 key（核心短文案）。
 3. 若属于某列表页/弹窗长文案，优先加到 `admin-pages.ts`（中/英）与 `admin-pages-ms.ts`（马来）的对应 export，它们会 spread 进 `admin-messages`。
 4. 表单校验错误：throw `FormValidationError('err.xxx')` 并在三语里定义 `err.xxx`。
@@ -197,15 +190,9 @@
 | `docs/短信调试与日志说明.md`                         | 创蓝短信排错              |
 | `docs/UAT_CHECKLIST.md`                     | 上线前回归清单             |
 | `docs/player-mobile-performance.md`         | 玩家端性能验收             |
-| `docs/admin-page-switch-performance.md`     | 管理端切页优化任务           |
+|                                             |                     |
 
 
-## 测试与冒烟
-
-- Jest 用例在 `apps/api/src/**/*.spec.ts`，`rootDir: src`；文档中的单元/规则测试一般不依赖真实数据库。
-- 管理端「冒烟测试」页调用 DB 相关检查；`SmokeTestService` 非生产默认可用，生产需 `ALLOW_SMOKE_TESTS=true`。
-- UAT 回归流程见 `docs/UAT_CHECKLIST.md`（含管理端 UI 冒烟与钱包/代理额度手工检查）。
-
 ## 部署注意
 
 - 生产 compose 使用 `.env.docker`：`docker compose -f docker-compose.prod.yml --env-file .env.docker up -d --build`，或配置好后 `pnpm docker:up`。
diff --git a/apps/admin/index.html b/apps/admin/index.html
index 5df508f..6ca70e8 100644
--- a/apps/admin/index.html
+++ b/apps/admin/index.html
@@ -2,7 +2,7 @@
 <html lang="zh-CN">
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
   <link rel="icon" type="image/png" href="/logo.png" />
   <link rel="apple-touch-icon" href="/logo.png" />
   <link rel="manifest" href="/site.webmanifest" />
diff --git a/apps/admin/src/App.vue b/apps/admin/src/App.vue
index 2d0df54..d805102 100644
--- a/apps/admin/src/App.vue
+++ b/apps/admin/src/App.vue
@@ -50,6 +50,22 @@ button { cursor: pointer; font-family: inherit; }
 html, body {
   scrollbar-width: none;
   -ms-overflow-style: none;
+  touch-action: manipulation;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+@media (max-width: 1023px) {
+  input,
+  select,
+  textarea,
+  .el-input__inner,
+  .el-textarea__inner {
+    font-size: 16px !important;
+  }
 }
 html::-webkit-scrollbar,
 body::-webkit-scrollbar {
diff --git a/apps/admin/src/views/AgentManager.vue b/apps/admin/src/views/AgentManager.vue
index b8d2c38..18e4944 100644
--- a/apps/admin/src/views/AgentManager.vue
+++ b/apps/admin/src/views/AgentManager.vue
@@ -112,7 +112,11 @@ type SubAgentLevelState = {
 
 const subAgentLevelState = reactive<Record<number, SubAgentLevelState>>({});
 const agentLevelCounts = ref<Record<number, number>>({});
-const hierarchySettings = ref({ maxAgentLevel: 0 });
+const hierarchySettings = ref({ maxAgentLevel: 0, defaultSubAgentCreditRatio: 50 });
+const agentSuspendDefaults = ref({
+  suspendFreezeDirectPlayers: false,
+  suspendBlockPlayerLogin: false,
+});
 
 function ensureSubAgentState(level: number): SubAgentLevelState {
   if (!subAgentLevelState[level]) {
@@ -220,7 +224,9 @@ const creditContextLoading = ref(false);
 /* ─── Init ─── */
 let pageInitPromise: Promise<void> | null = null;
 const pageInitLoaded = ref(false);
-const DEFAULT_SUB_AGENT_CREDIT_RATIO = 50;
+const DEFAULT_SUB_AGENT_CREDIT_RATIO = computed(
+  () => hierarchySettings.value.defaultSubAgentCreditRatio || 50,
+);
 const freezeAgentVisible = ref(false);
 const freezeAgentLoading = ref(false);
 const freezeAgentTarget = ref<AgentRow | null>(null);
@@ -323,7 +329,7 @@ function computeSubAgentCreditByRatio(available: number, ratioPercent: number):
 const creditQuickRatios = [10, 15, 20, 30] as const;
 
 function computeDefaultSubAgentCreditLimit(available: number): number {
-  return computeSubAgentCreditByRatio(available, DEFAULT_SUB_AGENT_CREDIT_RATIO);
+  return computeSubAgentCreditByRatio(available, DEFAULT_SUB_AGENT_CREDIT_RATIO.value);
 }
 
 function applyCreateSubAgentCreditRatio(ratioPercent: number) {
@@ -439,16 +445,33 @@ onActivated(() => {
   }
 });
 
+async function loadAgentSuspendDefaults() {
+  try {
+    const { data } = await api.get('/admin/agents/settings/suspend');
+    agentSuspendDefaults.value = {
+      suspendFreezeDirectPlayers: Boolean(data.data?.suspendFreezeDirectPlayers),
+      suspendBlockPlayerLogin: Boolean(data.data?.suspendBlockPlayerLogin),
+    };
+  } catch {
+    /* keep defaults */
+  }
+}
+
 async function loadUsersPageInit() {
   try {
-    const { data } = await api.get('/admin/users/page-init');
+    const [pageInitRes] = await Promise.all([
+      api.get('/admin/users/page-init'),
+      loadAgentSuspendDefaults(),
+    ]);
+    const { data } = pageInitRes;
     const payload = data.data as {
-      hierarchySettings?: { maxAgentLevel: number };
+      hierarchySettings?: { maxAgentLevel: number; defaultSubAgentCreditRatio?: number };
       agentLevelCounts?: Record<number, number>;
     };
     if (payload.hierarchySettings) {
       hierarchySettings.value = {
         maxAgentLevel: payload.hierarchySettings.maxAgentLevel ?? 0,
+        defaultSubAgentCreditRatio: payload.hierarchySettings.defaultSubAgentCreditRatio ?? 50,
       };
     }
     if (payload.agentLevelCounts) {
@@ -1108,8 +1131,8 @@ const freezeAgentIsSuspend = computed(() => {
 function toggleFreezeAgent(row: AgentRow) {
   freezeAgentTarget.value = row;
   freezeAgentForm.value = {
-    freezeDirectPlayers: false,
-    blockDirectPlayerLogin: false,
+    freezeDirectPlayers: agentSuspendDefaults.value.suspendFreezeDirectPlayers,
+    blockDirectPlayerLogin: agentSuspendDefaults.value.suspendBlockPlayerLogin,
     unfreezeDirectPlayers: false,
   };
   freezeAgentVisible.value = true;
diff --git a/apps/admin/src/views/Contents.vue b/apps/admin/src/views/Contents.vue
index 6dd1a14..8ba97aa 100644
--- a/apps/admin/src/views/Contents.vue
+++ b/apps/admin/src/views/Contents.vue
@@ -75,6 +75,8 @@ const notifyInbox = ref(false);
 interface InboxNotifySettings {
   inboxEnabled: boolean;
   deposit: boolean;
+  banner: boolean;
+  announcement: boolean;
 }
 
 interface MessageBroadcastItem {
@@ -100,6 +102,8 @@ interface BroadcastTranslationForm {
 const inboxNotifySettings = ref<InboxNotifySettings>({
   inboxEnabled: true,
   deposit: true,
+  banner: true,
+  announcement: true,
 });
 const inboxNotifySaving = ref(false);
 
@@ -218,6 +222,8 @@ async function loadInboxNotifySettings() {
     inboxNotifySettings.value = {
       inboxEnabled: data.data?.inboxEnabled !== false,
       deposit: Boolean(data.data?.deposit),
+      banner: data.data?.banner !== false,
+      announcement: data.data?.announcement !== false,
     };
   } catch (e: unknown) {
     const err = e as { response?: { data?: { error?: string } } };
@@ -232,10 +238,14 @@ async function saveInboxNotifySettings() {
     const { data } = await api.put('/admin/contents/inbox-notify-settings', {
       inboxEnabled: inboxNotifySettings.value.inboxEnabled,
       deposit: inboxNotifySettings.value.deposit,
+      banner: inboxNotifySettings.value.banner,
+      announcement: inboxNotifySettings.value.announcement,
     });
     inboxNotifySettings.value = {
       inboxEnabled: data.data?.inboxEnabled !== false,
       deposit: Boolean(data.data?.deposit),
+      banner: data.data?.banner !== false,
+      announcement: data.data?.announcement !== false,
     };
     ElMessage.success(t('msg.saved'));
   } catch (e: unknown) {
@@ -785,6 +795,30 @@ void load();
             />
           </div>
 
+          <div v-show="inboxNotifySettings.inboxEnabled" class="inbox-notify-row">
+            <div class="inbox-notify-row-text">
+              <span class="inbox-notify-label">{{ t('content.inbox_notify.banner') }}</span>
+              <span class="inbox-notify-hint">{{ t('content.inbox_notify.banner_hint') }}</span>
+            </div>
+            <el-switch
+              v-model="inboxNotifySettings.banner"
+              :disabled="!canManageContent || inboxNotifySaving"
+              @change="saveInboxNotifySettings"
+            />
+          </div>
+
+          <div v-show="inboxNotifySettings.inboxEnabled" class="inbox-notify-row">
+            <div class="inbox-notify-row-text">
+              <span class="inbox-notify-label">{{ t('content.inbox_notify.announcement') }}</span>
+              <span class="inbox-notify-hint">{{ t('content.inbox_notify.announcement_hint') }}</span>
+            </div>
+            <el-switch
+              v-model="inboxNotifySettings.announcement"
+              :disabled="!canManageContent || inboxNotifySaving"
+              @change="saveInboxNotifySettings"
+            />
+          </div>
+
           <p v-show="inboxNotifySettings.inboxEnabled" class="inbox-notify-notes-title">{{ t('content.inbox_notify.manual_title') }}</p>
           <ul v-show="inboxNotifySettings.inboxEnabled" class="inbox-notify-notes">
             <li>{{ t('content.inbox_notify.banner_note') }}</li>
diff --git a/apps/admin/src/views/agent/GlobalSettingsView.vue b/apps/admin/src/views/agent/GlobalSettingsView.vue
index a9ec386..ac7e0d8 100644
--- a/apps/admin/src/views/agent/GlobalSettingsView.vue
+++ b/apps/admin/src/views/agent/GlobalSettingsView.vue
@@ -27,7 +27,11 @@ const bettingLimits = ref({
   maxPayoutParlay: 1000000,
   dailyStakeLimit: 200000,
 });
-const hierarchySettings = ref({ maxAgentLevel: 0 });
+const hierarchySettings = ref({ maxAgentLevel: 0, defaultSubAgentCreditRatio: 50 });
+const agentSuspendSettings = ref({
+  suspendFreezeDirectPlayers: false,
+  suspendBlockPlayerLogin: false,
+});
 const platformDirectRate = ref(0);
 const adminInviteRate = ref(0);
 const resetAllowed = ref(false);
@@ -36,6 +40,7 @@ const resetConfirmPhrase = ref('');
 const settingsSaving = ref(false);
 const limitsSaving = ref(false);
 const hierarchySaving = ref(false);
+const suspendSaving = ref(false);
 const platformDirectSaving = ref(false);
 const resetLoading = ref(false);
 const loading = ref(false);
@@ -47,7 +52,7 @@ async function loadSettings() {
     const payload = data.data as {
       playerSettings?: typeof playerSettings.value;
       bettingLimits?: typeof bettingLimits.value;
-      hierarchySettings?: { maxAgentLevel: number };
+      hierarchySettings?: { maxAgentLevel: number; defaultSubAgentCreditRatio?: number };
       platformDirect?: { platformDirectRate?: number | string; adminInviteRate?: number | string };
     };
     if (payload.playerSettings) playerSettings.value = payload.playerSettings;
@@ -55,6 +60,7 @@ async function loadSettings() {
     if (payload.hierarchySettings) {
       hierarchySettings.value = {
         maxAgentLevel: payload.hierarchySettings.maxAgentLevel ?? 0,
+        defaultSubAgentCreditRatio: payload.hierarchySettings.defaultSubAgentCreditRatio ?? 50,
       };
     }
     if (payload.platformDirect) {
@@ -93,11 +99,27 @@ async function savePlayerSettings() {
   }
 }
 
+async function loadAgentSuspendSettings() {
+  try {
+    const { data } = await api.get('/admin/agents/settings/suspend');
+    agentSuspendSettings.value = {
+      suspendFreezeDirectPlayers: Boolean(data.data?.suspendFreezeDirectPlayers),
+      suspendBlockPlayerLogin: Boolean(data.data?.suspendBlockPlayerLogin),
+    };
+  } catch {
+    /* keep defaults */
+  }
+}
+
 async function saveHierarchySettings() {
   hierarchySaving.value = true;
   try {
     const { data } = await api.put('/admin/agents/settings/hierarchy', hierarchySettings.value);
-    hierarchySettings.value = { maxAgentLevel: data.data?.maxAgentLevel ?? hierarchySettings.value.maxAgentLevel };
+    hierarchySettings.value = {
+      maxAgentLevel: data.data?.maxAgentLevel ?? hierarchySettings.value.maxAgentLevel,
+      defaultSubAgentCreditRatio:
+        data.data?.defaultSubAgentCreditRatio ?? hierarchySettings.value.defaultSubAgentCreditRatio,
+    };
     ElMessage.success(t('msg.saved'));
   } catch (e: unknown) {
     const err = e as { response?: { data?: { error?: string } } };
@@ -107,6 +129,23 @@ async function saveHierarchySettings() {
   }
 }
 
+async function saveAgentSuspendSettings() {
+  suspendSaving.value = true;
+  try {
+    const { data } = await api.put('/admin/agents/settings/suspend', agentSuspendSettings.value);
+    agentSuspendSettings.value = {
+      suspendFreezeDirectPlayers: Boolean(data.data?.suspendFreezeDirectPlayers),
+      suspendBlockPlayerLogin: Boolean(data.data?.suspendBlockPlayerLogin),
+    };
+    ElMessage.success(t('msg.saved'));
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
+  } finally {
+    suspendSaving.value = false;
+  }
+}
+
 async function savePlatformDirectSettings() {
   platformDirectSaving.value = true;
   try {
@@ -177,7 +216,7 @@ onMounted(() => {
     void router.replace('/users');
     return;
   }
-  void Promise.all([loadSettings(), loadResetDatabaseStatus()]);
+  void Promise.all([loadSettings(), loadAgentSuspendSettings(), loadResetDatabaseStatus()]);
 });
 </script>
 
@@ -211,6 +250,17 @@ onMounted(() => {
               :disabled="hierarchySaving"
             />
           </el-form-item>
+          <el-form-item :label="t('agent.hierarchy.default_sub_credit_ratio')">
+            <el-input-number
+              v-model="hierarchySettings.defaultSubAgentCreditRatio"
+              :min="1"
+              :max="100"
+              :step="1"
+              controls-position="right"
+              :disabled="hierarchySaving"
+            />
+          </el-form-item>
+          <p class="list-settings-hint block-hint">{{ t('agent.hierarchy.default_sub_credit_ratio_hint') }}</p>
           <el-form-item>
             <el-button type="primary" :loading="hierarchySaving" @click="saveHierarchySettings">
               {{ t('common.save') }}
@@ -219,6 +269,27 @@ onMounted(() => {
         </el-form>
       </div>
 
+      <div class="list-settings-block">
+        <p class="list-settings-title">{{ t('agent.suspend.settings_title') }}</p>
+        <p class="list-settings-hint">{{ t('agent.suspend.settings_hint') }}</p>
+        <el-form inline size="small" class="settings-form">
+          <el-form-item :label="t('agent.freeze.opt_freeze_direct_players')">
+            <el-switch
+              v-model="agentSuspendSettings.suspendFreezeDirectPlayers"
+              :loading="suspendSaving"
+              @change="saveAgentSuspendSettings"
+            />
+          </el-form-item>
+          <el-form-item :label="t('agent.freeze.opt_block_player_login')">
+            <el-switch
+              v-model="agentSuspendSettings.suspendBlockPlayerLogin"
+              :loading="suspendSaving"
+              @change="saveAgentSuspendSettings"
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+
       <div class="list-settings-block">
         <p class="list-settings-title">{{ t('cashback.settings_title') }}</p>
         <el-form inline size="small" class="settings-form">
diff --git a/apps/admin/vite.config.ts b/apps/admin/vite.config.ts
index 3118525..db42949 100644
--- a/apps/admin/vite.config.ts
+++ b/apps/admin/vite.config.ts
@@ -1,15 +1,16 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import { resolve } from 'path';
-import { resolveApiDevTarget } from '../../scripts/dev-api-target.mjs';
 import { visualizer } from 'rollup-plugin-visualizer';
 import AutoImport from 'unplugin-auto-import/vite';
 import Components from 'unplugin-vue-components/vite';
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
+import { resolveDevApiTarget } from '../../scripts/resolve-dev-api-target.mjs';
+
+const devApiTarget = resolveDevApiTarget();
 
 export default defineConfig(({ mode }) => {
   const analyze = process.env.ANALYZE === '1' || mode === 'analyze';
-  const apiTarget = resolveApiDevTarget();
 
   return {
   plugins: [
@@ -75,10 +76,11 @@ export default defineConfig(({ mode }) => {
   },
   publicDir: resolve(__dirname, '../../packages/shared/public'),
   server: {
+    host: true,
     port: 5174,
     proxy: {
-      '/api': { target: apiTarget, changeOrigin: true },
-      '/uploads': { target: apiTarget, changeOrigin: true },
+      '/api': { target: devApiTarget, changeOrigin: true },
+      '/uploads': { target: devApiTarget, changeOrigin: true },
     },
   },
 };
diff --git a/apps/api/src/applications/admin/admin-rbac.spec.ts b/apps/api/src/applications/admin/admin-rbac.spec.ts
index c403daf..0a3b5f1 100644
--- a/apps/api/src/applications/admin/admin-rbac.spec.ts
+++ b/apps/api/src/applications/admin/admin-rbac.spec.ts
@@ -85,6 +85,28 @@ describe('Admin RBAC (SEC010–SEC012)', () => {
     expect(guardAllows(user, 'settlement.resettle')).toBe(false);
   });
 
+  it('FINANCE_ADMIN has deposit and cashback permissions but not reset database', () => {
+    const user = userWithRole('FINANCE_ADMIN');
+    expect(guardAllows(user, 'deposit.manage')).toBe(true);
+    expect(guardAllows(user, 'deposit.review')).toBe(true);
+    expect(guardAllows(user, 'cashback.confirm')).toBe(true);
+    expect(guardAllows(user, 'settings.reset_database')).toBe(false);
+  });
+
+  it('MATCH_ADMIN cannot manage deposits or confirm cashback', () => {
+    const user = userWithRole('MATCH_ADMIN');
+    expect(guardAllows(user, 'deposit.manage')).toBe(false);
+    expect(guardAllows(user, 'deposit.review')).toBe(false);
+    expect(guardAllows(user, 'cashback.confirm')).toBe(false);
+  });
+
+  it('SUPPORT cannot confirm cashback or manage deposits', () => {
+    const user = userWithRole('SUPPORT');
+    expect(guardAllows(user, 'cashback.confirm')).toBe(false);
+    expect(guardAllows(user, 'deposit.manage')).toBe(false);
+    expect(guardAllows(user, 'deposit.review')).toBe(false);
+  });
+
   it('SUPER_ADMIN bypasses permission checks', () => {
     const user = userWithRole('SUPER_ADMIN');
     expect(guardAllows(user, 'wallet.deposit')).toBe(true);
diff --git a/apps/api/src/applications/admin/admin.controller.spec.ts b/apps/api/src/applications/admin/admin.controller.spec.ts
new file mode 100644
index 0000000..0cf03f5
--- /dev/null
+++ b/apps/api/src/applications/admin/admin.controller.spec.ts
@@ -0,0 +1,255 @@
+import { Decimal } from '@prisma/client/runtime/library';
+import { AdminController } from './admin.controller';
+import { AgentsService } from '../../domains/agent/agents.service';
+import { createPrismaMock } from '../../testing/prisma-mock';
+
+function stubDeps() {
+  return {
+    users: {},
+    agents: { updateAgentAdmin: jest.fn() } as AgentsService | { updateAgentAdmin: jest.Mock },
+    wallet: {},
+    matches: {},
+    catalogArchive: {},
+    outright: {},
+    markets: {},
+    settlement: {},
+    cashback: {},
+    content: { create: jest.fn() },
+    i18n: {},
+    audit: { log: jest.fn().mockResolvedValue(undefined) },
+    bets: {},
+    prisma: {},
+    dashboardService: {},
+    systemConfig: { getInboxNotifySettings: jest.fn() },
+    bettingLimits: {},
+    databaseReset: {},
+    smokeTests: {},
+    depositService: {},
+    playerMessages: {
+      broadcastBannerPromotion: jest.fn(),
+      broadcastAnnouncementPromotion: jest.fn(),
+    },
+    staff: {},
+    presence: {},
+    depositCleanup: {},
+  };
+}
+
+function buildController(deps: ReturnType<typeof stubDeps>) {
+  return new AdminController(
+    deps.users as never,
+    deps.agents as never,
+    deps.wallet as never,
+    deps.matches as never,
+    deps.catalogArchive as never,
+    deps.outright as never,
+    deps.markets as never,
+    deps.settlement as never,
+    deps.cashback as never,
+    deps.content as never,
+    deps.i18n as never,
+    deps.audit as never,
+    deps.bets as never,
+    deps.prisma as never,
+    deps.dashboardService as never,
+    deps.systemConfig as never,
+    deps.bettingLimits as never,
+    deps.databaseReset as never,
+    deps.smokeTests as never,
+    deps.depositService as never,
+    deps.playerMessages as never,
+    deps.staff as never,
+    deps.presence as never,
+    deps.depositCleanup as never,
+  );
+}
+
+describe('AdminController createContent inbox notify gating', () => {
+  const deps = stubDeps();
+  const controller = buildController(deps);
+
+  const baseDto = {
+    contentType: 'BANNER' as const,
+    status: 'ACTIVE' as const,
+    notifyInbox: true,
+    translations: [{ locale: 'zh-CN', title: 'Promo', body: 'Body' }],
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    deps.content.create.mockResolvedValue({ id: '88' });
+    deps.playerMessages.broadcastBannerPromotion.mockResolvedValue(3);
+    deps.playerMessages.broadcastAnnouncementPromotion.mockResolvedValue(5);
+  });
+
+  it('does not broadcast banner when inbox.notify.banner is false', async () => {
+    deps.systemConfig.getInboxNotifySettings.mockResolvedValue({
+      inboxEnabled: true,
+      deposit: true,
+      banner: false,
+      announcement: true,
+    });
+
+    const res = await controller.createContent(baseDto);
+
+    expect(deps.playerMessages.broadcastBannerPromotion).not.toHaveBeenCalled();
+    expect((res.data as { notifiedCount?: number }).notifiedCount).toBeUndefined();
+  });
+
+  it('broadcasts banner when inbox.notify.banner is true', async () => {
+    deps.systemConfig.getInboxNotifySettings.mockResolvedValue({
+      inboxEnabled: true,
+      deposit: true,
+      banner: true,
+      announcement: false,
+    });
+
+    const res = await controller.createContent(baseDto);
+
+    expect(deps.playerMessages.broadcastBannerPromotion).toHaveBeenCalledWith({
+      contentId: 88n,
+      translations: [{ locale: 'zh-CN', title: 'Promo', body: 'Body' }],
+    });
+    expect((res.data as { notifiedCount?: number }).notifiedCount).toBe(3);
+  });
+
+  it('does not broadcast announcement when inbox.notify.announcement is false', async () => {
+    deps.systemConfig.getInboxNotifySettings.mockResolvedValue({
+      inboxEnabled: true,
+      deposit: true,
+      banner: true,
+      announcement: false,
+    });
+
+    await controller.createContent({
+      ...baseDto,
+      contentType: 'NOTICE',
+    });
+
+    expect(deps.playerMessages.broadcastAnnouncementPromotion).not.toHaveBeenCalled();
+  });
+
+  it('skips notify when inbox feature is disabled even if notifyInbox is checked', async () => {
+    deps.systemConfig.getInboxNotifySettings.mockResolvedValue({
+      inboxEnabled: false,
+      deposit: true,
+      banner: true,
+      announcement: true,
+    });
+
+    await controller.createContent(baseDto);
+
+    expect(deps.playerMessages.broadcastBannerPromotion).not.toHaveBeenCalled();
+  });
+});
+
+describe('AdminController updateAgent suspend wiring', () => {
+  const agentId = 10n;
+  const operatorId = 1n;
+
+  const tx = {
+    user: {
+      create: jest.fn(),
+      findUnique: jest.fn(),
+      update: jest.fn(),
+    },
+    userAuth: { create: jest.fn() },
+    userPreference: { create: jest.fn() },
+    userInvite: { create: jest.fn(), findUnique: jest.fn() },
+    agentProfile: { create: jest.fn(), findUnique: jest.fn() },
+    agentClosure: { create: jest.fn(), findMany: jest.fn() },
+  };
+
+  const prismaBase = {
+    ...tx,
+    agentProfile: { ...tx.agentProfile, update: jest.fn() },
+    user: { ...tx.user, updateMany: jest.fn() },
+  };
+  const prisma = createPrismaMock(prismaBase) as typeof prismaBase & { $transaction: jest.Mock };
+
+  const systemConfig = {
+    getAgentHierarchySettings: jest.fn(),
+    getAgentSuspendSettings: jest.fn(),
+  };
+  const audit = { log: jest.fn().mockResolvedValue(undefined) };
+
+  let agentsService: AgentsService;
+  let controller: AdminController;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    prisma.$transaction.mockImplementation(async (arg: unknown) => {
+      if (Array.isArray(arg)) return Promise.all(arg);
+      return (arg as (client: typeof tx) => Promise<unknown>)(tx);
+    });
+
+    systemConfig.getAgentSuspendSettings.mockResolvedValue({
+      suspendFreezeDirectPlayers: true,
+      suspendBlockPlayerLogin: true,
+    });
+
+    agentsService = new AgentsService(
+      prisma as never,
+      { hashPassword: jest.fn() } as never,
+      systemConfig as never,
+      {} as never,
+      { recalculateUsedCredit: jest.fn() } as never,
+    );
+    jest.spyOn(agentsService, 'getAgentAdminDetail').mockResolvedValue({ userId: '10' } as never);
+
+    prisma.agentProfile.findUnique.mockResolvedValue({
+      userId: agentId,
+      user: { username: 'agent-a', locale: 'zh-CN' },
+      parentAgentId: null,
+    });
+    prisma.user.updateMany.mockResolvedValue({ count: 2 });
+    prisma.agentProfile.update.mockResolvedValue({});
+    prisma.user.update.mockResolvedValue({});
+
+    const deps = stubDeps();
+    deps.agents = agentsService as never;
+    deps.audit = audit;
+    controller = buildController(deps);
+  });
+
+  it('forwards bare SUSPENDED body to AgentsService and applies global defaults', async () => {
+    await controller.updateAgent(operatorId, agentId.toString(), { status: 'SUSPENDED' });
+
+    expect(systemConfig.getAgentSuspendSettings).toHaveBeenCalled();
+    expect(prisma.user.updateMany).toHaveBeenCalledWith(
+      expect.objectContaining({
+        where: expect.objectContaining({ parentId: agentId, userType: 'PLAYER' }),
+        data: { status: 'SUSPENDED' },
+      }),
+    );
+    expect(prisma.agentProfile.update).toHaveBeenCalledWith(
+      expect.objectContaining({
+        data: expect.objectContaining({ blockDirectPlayerLogin: true }),
+      }),
+    );
+    expect(audit.log).toHaveBeenCalledWith(
+      expect.objectContaining({
+        operatorId,
+        action: 'UPDATE_AGENT',
+        module: 'AGENTS',
+        targetId: agentId.toString(),
+      }),
+    );
+  });
+
+  it('does not freeze players when global default is false and body omits flag', async () => {
+    systemConfig.getAgentSuspendSettings.mockResolvedValue({
+      suspendFreezeDirectPlayers: false,
+      suspendBlockPlayerLogin: false,
+    });
+
+    await controller.updateAgent(operatorId, agentId.toString(), { status: 'SUSPENDED' });
+
+    expect(prisma.user.updateMany).not.toHaveBeenCalled();
+    expect(prisma.agentProfile.update).toHaveBeenCalledWith(
+      expect.objectContaining({
+        data: expect.objectContaining({ blockDirectPlayerLogin: false }),
+      }),
+    );
+  });
+});
diff --git a/apps/api/src/applications/admin/admin.controller.ts b/apps/api/src/applications/admin/admin.controller.ts
index 4897d78..a0a4128 100644
--- a/apps/api/src/applications/admin/admin.controller.ts
+++ b/apps/api/src/applications/admin/admin.controller.ts
@@ -1110,6 +1110,14 @@ class InboxNotifySettingsDto {
   @IsOptional()
   @IsBoolean()
   deposit?: boolean;
+
+  @IsOptional()
+  @IsBoolean()
+  banner?: boolean;
+
+  @IsOptional()
+  @IsBoolean()
+  announcement?: boolean;
 }
 
 class BroadcastTranslationDto {
@@ -3444,21 +3452,21 @@ export class AdminController {
     const item = await this.content.create(createDto);
     let notifiedCount: number | undefined;
     if (notifyInbox && (createDto.status ?? 'DRAFT') === 'ACTIVE') {
-      const inboxEnabled = await this.systemConfig.getInboxFeatureEnabled();
-      if (inboxEnabled) {
+      const inboxNotify = await this.systemConfig.getInboxNotifySettings();
+      if (inboxNotify.inboxEnabled) {
         const translations = createDto.translations.map((tr) => ({
           locale: tr.locale,
           title: tr.title,
           body: tr.body,
         }));
-        if (createDto.contentType === 'BANNER') {
+        if (createDto.contentType === 'BANNER' && inboxNotify.banner) {
           notifiedCount = await this.playerMessages.broadcastBannerPromotion({
             contentId: BigInt(item.id),
             translations,
           });
         } else if (
-          createDto.contentType === 'NOTICE' ||
-          createDto.contentType === 'TICKER'
+          (createDto.contentType === 'NOTICE' || createDto.contentType === 'TICKER') &&
+          inboxNotify.announcement
         ) {
           notifiedCount = await this.playerMessages.broadcastAnnouncementPromotion({
             contentId: BigInt(item.id),
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/api/src/domains/agent/agents.service.spec.ts b/apps/api/src/domains/agent/agents.service.spec.ts
index a32a949..9141b06 100644
--- a/apps/api/src/domains/agent/agents.service.spec.ts
+++ b/apps/api/src/domains/agent/agents.service.spec.ts
@@ -32,12 +32,30 @@ describe('AgentsService', () => {
     },
   };
 
-  const prisma = createPrismaMock(tx);
+  const prismaBase = {
+    ...tx,
+    agentProfile: {
+      ...tx.agentProfile,
+      update: jest.fn(),
+    },
+    user: {
+      ...tx.user,
+      updateMany: jest.fn(),
+    },
+  };
+  const prisma = createPrismaMock(prismaBase) as typeof prismaBase & { $transaction: jest.Mock };
+  prisma.$transaction.mockImplementation(async (arg: unknown) => {
+    if (Array.isArray(arg)) {
+      return Promise.all(arg);
+    }
+    return (arg as (client: typeof tx) => Promise<unknown>)(tx);
+  });
   const auth = {
     hashPassword: jest.fn(),
   };
   const systemConfig = {
     getAgentHierarchySettings: jest.fn(),
+    getAgentSuspendSettings: jest.fn(),
   };
   const network = {};
   const credit = {
@@ -56,13 +74,20 @@ describe('AgentsService', () => {
       credit as never,
     );
 
-    systemConfig.getAgentHierarchySettings.mockResolvedValue({ maxAgentLevel: 3 });
+    systemConfig.getAgentHierarchySettings.mockResolvedValue({
+      maxAgentLevel: 3,
+      defaultSubAgentCreditRatio: 50,
+    });
+    systemConfig.getAgentSuspendSettings.mockResolvedValue({
+      suspendFreezeDirectPlayers: true,
+      suspendBlockPlayerLogin: true,
+    });
     auth.hashPassword.mockResolvedValue('hashed-password');
-    tx.agentProfile.findUnique.mockResolvedValue({
+    prisma.agentProfile.findUnique.mockResolvedValue({
       userId: parentAgentId,
       level: 1,
-      creditLimit: new Decimal(1000),
-      usedCredit: new Decimal(0),
+      creditLimit: new Decimal(10000),
+      usedCredit: new Decimal(2000),
       cashbackRate: new Decimal(10),
       maxSingleDeposit: null,
       maxDailyDeposit: null,
@@ -91,10 +116,41 @@ describe('AgentsService', () => {
       password: 'secret',
       level: 2,
       parentAgentId,
-      creditLimit: 300,
     });
 
+    expect(tx.agentProfile.create).toHaveBeenCalledWith(
+      expect.objectContaining({
+        data: expect.objectContaining({ creditLimit: 4000 }),
+      }),
+    );
     expect(credit.recalculateUsedCredit).toHaveBeenCalledWith(parentAgentId);
     expect(credit.recalculateUsedCredit).not.toHaveBeenCalledWith(createdAgentId);
   });
+
+  it('applies global suspend defaults when suspending without explicit flags', async () => {
+    jest.spyOn(service, 'getAgentAdminDetail').mockResolvedValue({ userId: '10' } as never);
+    prisma.agentProfile.findUnique.mockResolvedValue({
+      userId: 10n,
+      user: { username: 'agent-a', locale: 'zh-CN' },
+      parentAgentId: null,
+    });
+    prisma.user.updateMany.mockResolvedValue({ count: 2 });
+    prisma.agentProfile.update.mockResolvedValue({});
+    prisma.user.update.mockResolvedValue({});
+
+    await service.updateAgentAdmin(10n, { status: 'SUSPENDED' });
+
+    expect(systemConfig.getAgentSuspendSettings).toHaveBeenCalled();
+    expect(prisma.user.updateMany).toHaveBeenCalledWith(
+      expect.objectContaining({
+        where: expect.objectContaining({ parentId: 10n, userType: 'PLAYER' }),
+        data: { status: 'SUSPENDED' },
+      }),
+    );
+    expect(prisma.agentProfile.update).toHaveBeenCalledWith(
+      expect.objectContaining({
+        data: expect.objectContaining({ blockDirectPlayerLogin: true }),
+      }),
+    );
+  });
 });
diff --git a/apps/api/src/domains/agent/agents.service.ts b/apps/api/src/domains/agent/agents.service.ts
index 225407a..98d93bb 100644
--- a/apps/api/src/domains/agent/agents.service.ts
+++ b/apps/api/src/domains/agent/agents.service.ts
@@ -40,6 +40,15 @@ export class AgentsService {
     return agentLevel < maxLevel;
   }
 
+  /** 与 Admin 创建下级代理预填逻辑一致：可用授信 × 比例（%），非 100% 时向下取整到百位 */
+  computeDefaultSubAgentCredit(availableCredit: number, ratioPercent: number): number {
+    if (availableCredit <= 0) return 0;
+    const pct = Math.min(100, Math.max(1, ratioPercent)) / 100;
+    const raw = availableCredit * pct;
+    const rounded = pct >= 1 ? availableCredit : Math.floor(raw / 100) * 100;
+    return Math.min(availableCredit, Math.max(0, rounded));
+  }
+
   private async buildAgentAncestorChainMap(parentAgentIds: (bigint | null | undefined)[]) {
     return this.network.buildAgentAncestorChainMap(parentAgentIds);
   }
@@ -923,11 +932,17 @@ export class AgentsService {
       });
     }
 
-    // Handle status change (per-action cascade freeze / login block)
+    // Handle status change (per-action cascade freeze / login block; 未传参时用全局默认)
     if (data.status) {
       const profilePatch: Prisma.AgentProfileUpdateInput = { status: data.status };
+      let freezeDirectPlayers = false;
       if (data.status === 'SUSPENDED') {
-        profilePatch.blockDirectPlayerLogin = data.blockDirectPlayerLogin === true;
+        const suspendDefaults = await this.systemConfig.getAgentSuspendSettings();
+        const blockDirectPlayerLogin =
+          data.blockDirectPlayerLogin ?? suspendDefaults.suspendBlockPlayerLogin;
+        freezeDirectPlayers =
+          data.freezeDirectPlayers ?? suspendDefaults.suspendFreezeDirectPlayers;
+        profilePatch.blockDirectPlayerLogin = blockDirectPlayerLogin === true;
       } else if (data.status === 'ACTIVE') {
         profilePatch.blockDirectPlayerLogin = false;
       }
@@ -943,7 +958,7 @@ export class AgentsService {
         }),
       ]);
 
-      if (data.status === 'SUSPENDED' && data.freezeDirectPlayers) {
+      if (data.status === 'SUSPENDED' && freezeDirectPlayers) {
         await this.prisma.user.updateMany({
           where: { parentId: agentId, userType: 'PLAYER', deletedAt: null },
           data: { status: 'SUSPENDED' },
@@ -1156,20 +1171,31 @@ export class AgentsService {
   ) {
     await this.validateAgentLevel(data.level, data.parentAgentId);
 
+    let resolvedCreditLimit = data.creditLimit;
     let resolvedCashbackRate = data.cashbackRate ?? 0;
     if (data.parentAgentId) {
       const parentProfile = await this.prisma.agentProfile.findUnique({
         where: { userId: data.parentAgentId },
-        select: { cashbackRate: true },
+        select: { cashbackRate: true, creditLimit: true, usedCredit: true },
       });
       resolvedCashbackRate =
         data.cashbackRate ?? (parentProfile ? Number(parentProfile.cashbackRate) : 0);
+      if (resolvedCreditLimit === undefined && parentProfile) {
+        const hierarchy = await this.systemConfig.getAgentHierarchySettings();
+        const available = new Decimal(parentProfile.creditLimit).sub(parentProfile.usedCredit);
+        resolvedCreditLimit = this.computeDefaultSubAgentCredit(
+          available.toNumber(),
+          hierarchy.defaultSubAgentCreditRatio,
+        );
+      }
       await this.assertChildAgentWithinParent(data.parentAgentId, {
-        creditLimit: data.creditLimit ?? 0,
+        creditLimit: resolvedCreditLimit ?? 0,
         cashbackRate: resolvedCashbackRate,
         maxSingleDeposit: data.maxSingleDeposit,
         maxDailyDeposit: data.maxDailyDeposit,
       });
+    } else if (resolvedCreditLimit === undefined) {
+      resolvedCreditLimit = 0;
     }
 
     const maxSingleDeposit = this.normalizeOptionalLimit(data.maxSingleDeposit);
@@ -1208,7 +1234,7 @@ export class AgentsService {
           userId: user.id,
           level: data.level,
           parentAgentId: data.parentAgentId,
-          creditLimit: data.creditLimit ?? 0,
+          creditLimit: resolvedCreditLimit ?? 0,
           cashbackRate: resolvedCashbackRate,
           maxSingleDeposit,
           maxDailyDeposit,
diff --git a/apps/api/src/domains/deposit/deposit.service.spec.ts b/apps/api/src/domains/deposit/deposit.service.spec.ts
index f498280..7f6e5fb 100644
--- a/apps/api/src/domains/deposit/deposit.service.spec.ts
+++ b/apps/api/src/domains/deposit/deposit.service.spec.ts
@@ -47,6 +47,8 @@ describe('DepositService', () => {
     getInboxNotifySettings: jest.fn().mockResolvedValue({
       inboxEnabled: true,
       deposit: true,
+      banner: true,
+      announcement: true,
     }),
   };
 
diff --git a/apps/api/src/domains/identity/auth.service.spec.ts b/apps/api/src/domains/identity/auth.service.spec.ts
new file mode 100644
index 0000000..3bb1ce9
--- /dev/null
+++ b/apps/api/src/domains/identity/auth.service.spec.ts
@@ -0,0 +1,83 @@
+import * as bcrypt from 'bcryptjs';
+import { AuthService } from './auth.service';
+import { expectAppError } from '../../testing/prisma-mock';
+
+describe('AuthService player login', () => {
+  const prisma = {
+    user: {
+      findUnique: jest.fn(),
+    },
+    userAuth: {
+      update: jest.fn(),
+    },
+  };
+  const jwt = { sign: jest.fn().mockReturnValue('token') };
+  const config = { get: jest.fn().mockReturnValue('1h') };
+  const systemConfig = {};
+  const invites = {};
+  const sms = {};
+  const audit = { log: jest.fn() };
+
+  let service: AuthService;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    service = new AuthService(
+      prisma as never,
+      jwt as never,
+      config as never,
+      systemConfig as never,
+      invites as never,
+      sms as never,
+      audit as never,
+    );
+  });
+
+  it('blocks player login when parent agent is suspended with blockDirectPlayerLogin', async () => {
+    const passwordHash = await bcrypt.hash('Player@123', 4);
+    prisma.user.findUnique
+      .mockResolvedValueOnce({
+        id: 10n,
+        username: 'player1',
+        userType: 'PLAYER',
+        status: 'ACTIVE',
+        parentId: 20n,
+        auth: { passwordHash, loginFailCount: 0, lockedUntil: null },
+        adminRole: null,
+      })
+      .mockResolvedValueOnce({
+        userType: 'AGENT',
+        status: 'SUSPENDED',
+        agentProfile: { blockDirectPlayerLogin: true },
+      });
+
+    await expect(service.login('player1', 'Player@123', 'player')).rejects.toMatchObject(
+      expectAppError('PARENT_AGENT_SUSPENDED'),
+    );
+    expect(jwt.sign).not.toHaveBeenCalled();
+  });
+
+  it('allows player login when parent agent suspended without blockDirectPlayerLogin', async () => {
+    const passwordHash = await bcrypt.hash('Player@123', 4);
+    prisma.user.findUnique
+      .mockResolvedValueOnce({
+        id: 10n,
+        username: 'player1',
+        userType: 'PLAYER',
+        status: 'ACTIVE',
+        parentId: 20n,
+        locale: 'zh-CN',
+        auth: { passwordHash, loginFailCount: 0, lockedUntil: null },
+        adminRole: null,
+      })
+      .mockResolvedValueOnce({
+        userType: 'AGENT',
+        status: 'SUSPENDED',
+        agentProfile: { blockDirectPlayerLogin: false },
+      });
+    prisma.userAuth.update.mockResolvedValue({});
+
+    const result = await service.login('player1', 'Player@123', 'player');
+    expect(result.token).toBe('token');
+  });
+});
diff --git a/apps/api/src/domains/operations/cashback/cashback.service.spec.ts b/apps/api/src/domains/operations/cashback/cashback.service.spec.ts
new file mode 100644
index 0000000..583de91
--- /dev/null
+++ b/apps/api/src/domains/operations/cashback/cashback.service.spec.ts
@@ -0,0 +1,126 @@
+import { Decimal } from '@prisma/client/runtime/library';
+import { CashbackService } from './cashback.service';
+
+describe('CashbackService previewBatch', () => {
+  const tx = {
+    cashbackBatch: {
+      findMany: jest.fn(),
+      create: jest.fn(),
+    },
+    cashbackItem: {
+      create: jest.fn(),
+    },
+    cashbackBet: {
+      create: jest.fn(),
+    },
+  };
+  const prisma = {
+    cashbackBatch: {
+      findFirst: jest.fn(),
+    },
+    cashbackBet: {
+      findMany: jest.fn(),
+    },
+    bet: {
+      findMany: jest.fn(),
+    },
+    cashbackRule: {
+      findMany: jest.fn(),
+    },
+    agentProfile: {
+      findMany: jest.fn(),
+    },
+    user: {
+      findMany: jest.fn(),
+    },
+    wallet: {
+      findMany: jest.fn(),
+    },
+    $transaction: jest.fn(async (fn: (client: typeof tx) => Promise<unknown>) => fn(tx)),
+  };
+  const funds = {};
+  const systemConfig = {
+    getPlatformDirectCashbackSettings: jest.fn(),
+  };
+
+  let service: CashbackService;
+
+  const platformPlayerId = 100n;
+  const adminInvitePlayerId = 101n;
+  const adminSponsorId = 200n;
+  const periodStart = new Date('2026-06-01T00:00:00.000Z');
+  const periodEnd = new Date('2026-06-01T23:59:59.999Z');
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    service = new CashbackService(prisma as never, funds as never, systemConfig as never);
+    systemConfig.getPlatformDirectCashbackSettings.mockResolvedValue({
+      platformDirectRate: 0.02,
+      adminInviteRate: 0.05,
+    });
+    prisma.cashbackBatch.findFirst.mockResolvedValue(null);
+    prisma.cashbackBet.findMany.mockResolvedValue([]);
+    prisma.cashbackRule.findMany.mockResolvedValue([]);
+    prisma.agentProfile.findMany.mockResolvedValue([]);
+    tx.cashbackBatch.findMany.mockResolvedValue([]);
+    tx.cashbackItem.create.mockResolvedValue({});
+    tx.cashbackBet.create.mockResolvedValue({});
+    tx.cashbackBatch.create.mockImplementation(({ data }: { data: Record<string, unknown> }) =>
+      Promise.resolve({ id: 1n, batchNo: 'CB-TEST', ...data }),
+    );
+  });
+
+  it('uses platformDirectRate for platform-direct players', async () => {
+    prisma.bet.findMany.mockResolvedValue([
+      {
+        id: 1n,
+        userId: platformPlayerId,
+        stake: new Decimal(1000),
+        status: 'WON',
+        settledAt: new Date('2026-06-01T12:00:00.000Z'),
+        user: { id: platformPlayerId, parentId: null, inviteSponsorId: null },
+        selections: [{ marketType: 'FT_1X2' }],
+      },
+    ]);
+    prisma.user.findMany.mockResolvedValue([
+      { id: platformPlayerId, username: 'pd1', parent: null },
+    ]);
+    prisma.wallet.findMany.mockResolvedValue([
+      { userId: platformPlayerId, availableBalance: new Decimal(0) },
+    ]);
+
+    const result = await service.previewBatch(periodStart, periodEnd);
+    expect(result.items).toHaveLength(1);
+    expect(result.items[0].amount.toString()).toBe('20');
+    expect(result.totalAmount.toString()).toBe('20');
+  });
+
+  it('uses adminInviteRate for admin-invited platform-direct players', async () => {
+    prisma.bet.findMany.mockResolvedValue([
+      {
+        id: 2n,
+        userId: adminInvitePlayerId,
+        stake: new Decimal(1000),
+        status: 'LOST',
+        settledAt: new Date('2026-06-01T12:00:00.000Z'),
+        user: {
+          id: adminInvitePlayerId,
+          parentId: null,
+          inviteSponsorId: adminSponsorId,
+        },
+        selections: [{ marketType: 'FT_1X2' }],
+      },
+    ]);
+    prisma.user.findMany
+      .mockResolvedValueOnce([{ id: adminSponsorId, userType: 'ADMIN' }])
+      .mockResolvedValueOnce([{ id: adminInvitePlayerId, username: 'inv1', parent: null }]);
+    prisma.wallet.findMany.mockResolvedValue([
+      { userId: adminInvitePlayerId, availableBalance: new Decimal(0) },
+    ]);
+
+    const result = await service.previewBatch(periodStart, periodEnd);
+    expect(result.items).toHaveLength(1);
+    expect(result.items[0].amount.toString()).toBe('50');
+    expect(result.totalAmount.toString()).toBe('50');
+  });
+});
diff --git a/apps/api/src/domains/operations/smoke-tests/smoke-test.bet-flow-probes.ts b/apps/api/src/domains/operations/smoke-tests/smoke-test.bet-flow-probes.ts
index 6b9bb43..cabc9e0 100644
--- a/apps/api/src/domains/operations/smoke-tests/smoke-test.bet-flow-probes.ts
+++ b/apps/api/src/domains/operations/smoke-tests/smoke-test.bet-flow-probes.ts
@@ -1,4 +1,5 @@
 import { Decimal } from '@prisma/client/runtime/library';
+import { BET_LIMIT_KEYS } from '../../betting/betting-limits.service';
 import type { AgentsService } from '../../agent/agents.service';
 import type { BetsService } from '../../betting/bets.service';
 import type { SettlementService } from '../../settlement/settlement.service';
@@ -12,7 +13,7 @@ import {
   teardownBetFlowFixture,
 } from './smoke-test.bet-flow.fixture';
 
-export const BET_FLOW_PROBE_COUNT = 5;
+export const BET_FLOW_PROBE_COUNT = 13;
 
 export type BetFlowProbeDeps = {
   prisma: PrismaService;
@@ -22,6 +23,38 @@ export type BetFlowProbeDeps = {
   agents: AgentsService;
 };
 
+async function upsertSystemConfig(
+  prisma: PrismaService,
+  key: string,
+  value: string,
+  snapshots: Array<{ key: string; value: string | null }>,
+) {
+  const row = await prisma.systemConfig.findUnique({ where: { configKey: key } });
+  snapshots.push({ key, value: row?.configValue ?? null });
+  await prisma.systemConfig.upsert({
+    where: { configKey: key },
+    create: { configKey: key, configValue: value, description: 'smoke test' },
+    update: { configValue: value },
+  });
+}
+
+async function restoreSystemConfigs(
+  prisma: PrismaService,
+  snapshots: Array<{ key: string; value: string | null }>,
+) {
+  for (const snap of snapshots) {
+    if (snap.value === null) {
+      await prisma.systemConfig.deleteMany({ where: { configKey: snap.key } });
+    } else {
+      await prisma.systemConfig.upsert({
+        where: { configKey: snap.key },
+        create: { configKey: snap.key, configValue: snap.value, description: 'smoke test restore' },
+        update: { configValue: snap.value },
+      });
+    }
+  }
+}
+
 async function confirmMatchSettlement(
   deps: BetFlowProbeDeps,
   fx: BetFlowFixtureIds,
@@ -201,6 +234,401 @@ export function createBetFlowProbes(deps: BetFlowProbeDeps): SmokeTestCaseDef[]
         }
       },
     },
+    {
+      id: 'BF006',
+      suite: 'bet-flow',
+      name: '录分校验：半场比分不能大于全场',
+      description: 'HT>FT 时 recordScore 返回 SETTLEMENT_SCORE_INVALID',
+      run: async () => {
+        const fx = await createBetFlowFixture(deps.prisma, deps.wallet);
+        try {
+          await deps.prisma.match.update({
+            where: { id: fx.matchId },
+            data: { status: 'CLOSED', closeTime: new Date() },
+          });
+          await expectAppErrorThrows(
+            'recordScore invalid HT>FT',
+            async () => {
+              await deps.settlement.recordScore(fx.matchId, 2, 0, 1, 0, fx.operatorId);
+            },
+            'SETTLEMENT_SCORE_INVALID',
+          );
+        } finally {
+          await teardownBetFlowFixture(deps.prisma, fx);
+        }
+      },
+    },
+    {
+      id: 'BF007',
+      suite: 'bet-flow',
+      name: '确认结算：拒绝已作废的旧 PREVIEW 批次',
+      description: '新 preview 后旧 batch 变为 CANCELLED，confirm 旧 batchId 失败',
+      run: async () => {
+        const fx = await createBetFlowFixture(deps.prisma, deps.wallet);
+        try {
+          await deps.prisma.match.update({
+            where: { id: fx.matchId },
+            data: { status: 'CLOSED', closeTime: new Date() },
+          });
+          const previewA = await deps.settlement.previewSettlement(fx.matchId, fx.operatorId, {
+            htHome: 0,
+            htAway: 0,
+            ftHome: 1,
+            ftAway: 0,
+          });
+          await deps.settlement.previewSettlement(fx.matchId, fx.operatorId, {
+            htHome: 0,
+            htAway: 0,
+            ftHome: 2,
+            ftAway: 1,
+          });
+          const stale = await deps.prisma.settlementBatch.findUnique({
+            where: { id: previewA.batch.id },
+          });
+          expectEqual('old batch cancelled', stale?.status, 'CANCELLED');
+          await expectAppErrorThrows(
+            'confirm cancelled batch',
+            async () => {
+              await deps.settlement.confirmSettlement(previewA.batch.id, fx.operatorId);
+            },
+            'SETTLEMENT_BATCH_ALREADY_CONFIRMED',
+          );
+        } finally {
+          await teardownBetFlowFixture(deps.prisma, fx);
+        }
+      },
+    },
+    {
+      id: 'BF008',
+      suite: 'bet-flow',
+      name: '串动作废：VOID 腿续算，已有 LOSE 腿不退本',
+      description: '跨场串关一场 LOSE 后另一场取消，payout=0 而非退 stake',
+      run: async () => {
+        const fx = await createBetFlowFixture(deps.prisma, deps.wallet, { initialBalance: 1000 });
+        const matchB = await deps.prisma.match.create({
+          data: {
+            sportType: 'FOOTBALL',
+            leagueId: fx.leagueId,
+            homeTeamId: fx.homeTeamId,
+            awayTeamId: fx.awayTeamId,
+            startTime: new Date(Date.now() + 48 * 60 * 60 * 1000),
+            status: 'PUBLISHED',
+            publishTime: new Date(),
+          },
+        });
+        const marketB = await deps.prisma.market.create({
+          data: {
+            matchId: matchB.id,
+            marketType: 'FT_1X2',
+            period: 'FT',
+            status: 'OPEN',
+            selections: {
+              create: [
+                {
+                  selectionCode: 'HOME',
+                  selectionName: 'Home B',
+                  odds: new Decimal('2.00'),
+                  oddsVersion: BigInt(1),
+                  status: 'OPEN',
+                  sortOrder: 0,
+                },
+                {
+                  selectionCode: 'AWAY',
+                  selectionName: 'Away B',
+                  odds: new Decimal('2.00'),
+                  oddsVersion: BigInt(1),
+                  status: 'OPEN',
+                  sortOrder: 1,
+                },
+              ],
+            },
+          },
+          include: { selections: true },
+        });
+        const awayB = marketB.selections.find((s) => s.selectionCode === 'AWAY')!;
+
+        try {
+          const parlay = await deps.bets.placeParlayBet(
+            fx.playerId,
+            null,
+            [
+              { selectionId: fx.homeSelectionId, oddsVersion: fx.homeOddsVersion },
+              { selectionId: awayB.id, oddsVersion: awayB.oddsVersion },
+            ],
+            100,
+            `smoke-parlay-void-${fx.runId}`,
+          );
+
+          await deps.prisma.match.update({
+            where: { id: matchB.id },
+            data: { status: 'CLOSED', closeTime: new Date() },
+          });
+          const previewB = await deps.settlement.previewSettlement(matchB.id, fx.operatorId, {
+            htHome: 1,
+            htAway: 0,
+            ftHome: 2,
+            ftAway: 1,
+          });
+          await deps.settlement.confirmSettlement(previewB.batch.id, fx.operatorId);
+
+          let w = await deps.wallet.getWallet(fx.playerId);
+          expectEqual('frozen while pending', w.frozenBalance.toString(), '100');
+
+          await deps.settlement.voidMatchBets(fx.matchId);
+
+          const settled = await deps.prisma.bet.findUnique({ where: { id: parlay.id } });
+          expectEqual('settled status', settled?.status, 'LOST');
+          expectEqual('actualReturn', settled?.actualReturn.toString(), '0');
+
+          w = await deps.wallet.getWallet(fx.playerId);
+          expectEqual('available after void parlay', w.availableBalance.toString(), '900');
+          expectEqual('frozen after void parlay', w.frozenBalance.toString(), '0');
+        } finally {
+          const bets = await deps.prisma.bet.findMany({
+            where: { userId: fx.playerId },
+            select: { id: true },
+          });
+          const betIds = bets.map((b) => b.id);
+          if (betIds.length) {
+            await deps.prisma.betSelection.deleteMany({ where: { betId: { in: betIds } } });
+            await deps.prisma.bet.deleteMany({ where: { id: { in: betIds } } });
+          }
+          const batchIds = (
+            await deps.prisma.settlementBatch.findMany({
+              where: { matchId: { in: [fx.matchId, matchB.id] } },
+              select: { id: true },
+            })
+          ).map((b) => b.id);
+          if (batchIds.length) {
+            await deps.prisma.settlementItem.deleteMany({ where: { batchId: { in: batchIds } } });
+            await deps.prisma.settlementBatch.deleteMany({ where: { id: { in: batchIds } } });
+          }
+          await deps.prisma.matchScore.deleteMany({
+            where: { matchId: { in: [fx.matchId, matchB.id] } },
+          });
+          const marketIds = (
+            await deps.prisma.market.findMany({
+              where: { matchId: matchB.id },
+              select: { id: true },
+            })
+          ).map((m) => m.id);
+          if (marketIds.length) {
+            await deps.prisma.marketSelection.deleteMany({ where: { marketId: { in: marketIds } } });
+            await deps.prisma.market.deleteMany({ where: { id: { in: marketIds } } });
+          }
+          await deps.prisma.match.deleteMany({ where: { id: matchB.id } });
+          await teardownBetFlowFixture(deps.prisma, fx);
+        }
+      },
+    },
+    {
+      id: 'BF009',
+      suite: 'bet-flow',
+      name: '赔率版本不一致：BetsService 拒绝下注',
+      uatRef: 'B003',
+      description: '提交旧 oddsVersion 应返回 ODDS_CHANGED',
+      run: async () => {
+        const fx = await createBetFlowFixture(deps.prisma, deps.wallet, { initialBalance: 500 });
+        try {
+          await deps.prisma.marketSelection.update({
+            where: { id: fx.homeSelectionId },
+            data: { oddsVersion: { increment: 1 } },
+          });
+          await expectAppErrorThrows(
+            'placeSingleBet odds changed',
+            async () => {
+              await deps.bets.placeSingleBet(
+                fx.playerId,
+                null,
+                fx.homeSelectionId,
+                fx.homeOddsVersion,
+                50,
+                `smoke-odds-${fx.runId}`,
+              );
+            },
+            'ODDS_CHANGED',
+          );
+          const count = await deps.prisma.bet.count({ where: { userId: fx.playerId } });
+          expectEqual('bet count', count, 0);
+        } finally {
+          await teardownBetFlowFixture(deps.prisma, fx);
+        }
+      },
+    },
+    {
+      id: 'BF010',
+      suite: 'bet-flow',
+      name: '赛前限制：开赛后拒绝下注',
+      description: 'startTime 已过后 placeSingleBet 返回 PRE_MATCH_ONLY',
+      run: async () => {
+        const fx = await createBetFlowFixture(deps.prisma, deps.wallet, { initialBalance: 500 });
+        try {
+          await deps.prisma.match.update({
+            where: { id: fx.matchId },
+            data: { startTime: new Date(Date.now() - 60_000) },
+          });
+          await expectAppErrorThrows(
+            'placeSingleBet after kickoff',
+            async () => {
+              await deps.bets.placeSingleBet(
+                fx.playerId,
+                null,
+                fx.homeSelectionId,
+                fx.homeOddsVersion,
+                50,
+                `smoke-prematch-${fx.runId}`,
+              );
+            },
+            'PRE_MATCH_ONLY',
+          );
+        } finally {
+          await teardownBetFlowFixture(deps.prisma, fx);
+        }
+      },
+    },
+    {
+      id: 'BF011',
+      suite: 'bet-flow',
+      name: '每日投注上限：超额拒单',
+      description: 'dailyStakeLimit=150 时第二笔 100 注单失败',
+      run: async () => {
+        const fx = await createBetFlowFixture(deps.prisma, deps.wallet, { initialBalance: 1000 });
+        const snapshots: Array<{ key: string; value: string | null }> = [];
+        try {
+          await upsertSystemConfig(deps.prisma, BET_LIMIT_KEYS.dailyStakeLimit, '150', snapshots);
+          await deps.bets.placeSingleBet(
+            fx.playerId,
+            null,
+            fx.homeSelectionId,
+            fx.homeOddsVersion,
+            100,
+            `smoke-daily-1-${fx.runId}`,
+          );
+          await expectAppErrorThrows(
+            'placeSingleBet daily limit',
+            async () => {
+              await deps.bets.placeSingleBet(
+                fx.playerId,
+                null,
+                fx.drawSelectionId,
+                fx.drawOddsVersion,
+                100,
+                `smoke-daily-2-${fx.runId}`,
+              );
+            },
+            'DAILY_STAKE_LIMIT',
+          );
+        } finally {
+          await restoreSystemConfigs(deps.prisma, snapshots);
+          await teardownBetFlowFixture(deps.prisma, fx);
+        }
+      },
+    },
+    {
+      id: 'BF012',
+      suite: 'bet-flow',
+      name: '串关限额：超 maxStakeParlay 拒单',
+      description: 'maxStakeParlay=80 时下 100 串关失败',
+      run: async () => {
+        const fx = await createBetFlowFixture(deps.prisma, deps.wallet, { initialBalance: 1000 });
+        const matchB = await deps.prisma.match.create({
+          data: {
+            sportType: 'FOOTBALL',
+            leagueId: fx.leagueId,
+            homeTeamId: fx.homeTeamId,
+            awayTeamId: fx.awayTeamId,
+            startTime: new Date(Date.now() + 48 * 60 * 60 * 1000),
+            status: 'PUBLISHED',
+            publishTime: new Date(),
+          },
+        });
+        const marketB = await deps.prisma.market.create({
+          data: {
+            matchId: matchB.id,
+            marketType: 'FT_1X2',
+            period: 'FT',
+            status: 'OPEN',
+            selections: {
+              create: [
+                {
+                  selectionCode: 'AWAY',
+                  selectionName: 'Away B',
+                  odds: new Decimal('2.00'),
+                  oddsVersion: BigInt(1),
+                  status: 'OPEN',
+                  sortOrder: 0,
+                },
+              ],
+            },
+          },
+          include: { selections: true },
+        });
+        const awayB = marketB.selections[0]!;
+        const snapshots: Array<{ key: string; value: string | null }> = [];
+        try {
+          await upsertSystemConfig(deps.prisma, BET_LIMIT_KEYS.maxStakeParlay, '80', snapshots);
+          await expectAppErrorThrows(
+            'placeParlayBet max stake',
+            async () => {
+              await deps.bets.placeParlayBet(
+                fx.playerId,
+                null,
+                [
+                  { selectionId: fx.homeSelectionId, oddsVersion: fx.homeOddsVersion },
+                  { selectionId: awayB.id, oddsVersion: awayB.oddsVersion },
+                ],
+                100,
+                `smoke-parlay-max-${fx.runId}`,
+              );
+            },
+            'MAX_STAKE',
+          );
+        } finally {
+          await restoreSystemConfigs(deps.prisma, snapshots);
+          const markets = await deps.prisma.market.findMany({
+            where: { matchId: matchB.id },
+            select: { id: true },
+          });
+          const marketIds = markets.map((m) => m.id);
+          if (marketIds.length) {
+            await deps.prisma.marketSelection.deleteMany({ where: { marketId: { in: marketIds } } });
+            await deps.prisma.market.deleteMany({ where: { id: { in: marketIds } } });
+          }
+          await deps.prisma.match.deleteMany({ where: { id: matchB.id } });
+          await teardownBetFlowFixture(deps.prisma, fx);
+        }
+      },
+    },
+    {
+      id: 'BF013',
+      suite: 'bet-flow',
+      name: '改 SystemConfig 后拒单：minStake',
+      description: 'minStake=200 时下 100 单关返回 MIN_STAKE',
+      run: async () => {
+        const fx = await createBetFlowFixture(deps.prisma, deps.wallet, { initialBalance: 1000 });
+        const snapshots: Array<{ key: string; value: string | null }> = [];
+        try {
+          await upsertSystemConfig(deps.prisma, BET_LIMIT_KEYS.minStake, '200', snapshots);
+          await expectAppErrorThrows(
+            'placeSingleBet min stake',
+            async () => {
+              await deps.bets.placeSingleBet(
+                fx.playerId,
+                null,
+                fx.homeSelectionId,
+                fx.homeOddsVersion,
+                100,
+                `smoke-min-${fx.runId}`,
+              );
+            },
+            'MIN_STAKE',
+          );
+        } finally {
+          await restoreSystemConfigs(deps.prisma, snapshots);
+          await teardownBetFlowFixture(deps.prisma, fx);
+        }
+      },
+    },
     {
       id: 'BF005',
       suite: 'bet-flow',
diff --git a/apps/api/src/domains/operations/smoke-tests/smoke-test.cases.ts b/apps/api/src/domains/operations/smoke-tests/smoke-test.cases.ts
index 5f87e29..3c9ee34 100644
--- a/apps/api/src/domains/operations/smoke-tests/smoke-test.cases.ts
+++ b/apps/api/src/domains/operations/smoke-tests/smoke-test.cases.ts
@@ -380,6 +380,36 @@ export const SMOKE_TEST_CASES: SmokeTestCaseDef[] = [
       expectEqual('payout', payout.toNumber(), 100, { stake: 100, legs });
     },
   },
+  {
+    id: 'S020',
+    suite: 'settlement',
+    name: '串关 VOID 腿 + LOSE 腿：整单全输',
+    description: '比赛取消腿按 odds=1.0 续算，已有 LOSE 腿时 payout=0',
+    run: () => {
+      const legs = [
+        { odds: 2.0, result: 'VOID' as const },
+        { odds: 2.0, result: 'LOSE' as const },
+      ];
+      const { betResult, payout } = calculateParlayPayout(100, legs);
+      expectEqual('betResult', betResult, 'LOST', { stake: 100, legs });
+      expectEqual('payout', payout.toNumber(), 0, { stake: 100, legs });
+    },
+  },
+  {
+    id: 'S021',
+    suite: 'settlement',
+    name: '串关 VOID 腿 + WIN 腿：按 WIN 腿赔率结算',
+    description: '作废腿不参与升赔，其余 WIN 腿正常连乘',
+    run: () => {
+      const legs = [
+        { odds: 2.0, result: 'VOID' as const },
+        { odds: 1.5, result: 'WIN' as const },
+      ];
+      const { betResult, payout } = calculateParlayPayout(100, legs);
+      expectEqual('betResult', betResult, 'WON', { stake: 100, legs });
+      expectEqual('payout', payout.toNumber(), 150, { stake: 100, legs });
+    },
+  },
   {
     id: 'OUT001',
     suite: 'settlement',
@@ -431,17 +461,6 @@ export const SMOKE_TEST_CASES: SmokeTestCaseDef[] = [
   },
 
   // —— Betting rules ——
-  {
-    id: 'B003',
-    suite: 'betting',
-    name: '赔率版本不一致应拒绝',
-    uatRef: 'B003',
-    run: () => {
-      const submitted = BigInt(1);
-      const current = BigInt(2);
-      expectTrue('version mismatch', submitted !== current, { submitted: '1', current: '2' });
-    },
-  },
   {
     id: 'B006',
     suite: 'betting',
@@ -760,7 +779,10 @@ export const SMOKE_TEST_CASES: SmokeTestCaseDef[] = [
 ];
 
 export const SMOKE_SUITE_META: Record<string, { name: string; description: string }> = {
-  settlement: { name: '结算引擎', description: '独赢、波胆、让球、大小、串关、冠军盘' },
+  settlement: {
+    name: '结算引擎',
+    description: '独赢、波胆、让球、大小、串关、冠军盘、作废腿续算',
+  },
   settlement_helpers: { name: '结算辅助', description: '选项代码与中文快照名映射' },
   betting: { name: '下注规则', description: '串关限制、赔率版本、四分之一盘' },
   betting_limits: { name: '投注限额', description: '最小/最大投注与派彩上限校验' },
@@ -771,4 +793,8 @@ export const SMOKE_SUITE_META: Record<string, { name: string; description: strin
     name: '下注结算链路',
     description: '真实 DB：下注→冻结→录分→结算→钱包/代理额度（临时数据自动清理）',
   },
+  config: {
+    name: '系统配置',
+    description: '真实 DB：SystemConfig 接线后 AgentsService 行为（临时数据自动清理）',
+  },
 };
diff --git a/apps/api/src/domains/operations/smoke-tests/smoke-test.config-probes.ts b/apps/api/src/domains/operations/smoke-tests/smoke-test.config-probes.ts
new file mode 100644
index 0000000..ca2c2f4
--- /dev/null
+++ b/apps/api/src/domains/operations/smoke-tests/smoke-test.config-probes.ts
@@ -0,0 +1,197 @@
+import { Decimal } from '@prisma/client/runtime/library';
+import {
+  AGENT_SUSPEND_BLOCK_PLAYER_LOGIN,
+  AGENT_SUSPEND_FREEZE_DIRECT_PLAYERS,
+} from '../../../shared/config/system-config.service';
+import type { AgentsService } from '../../agent/agents.service';
+import type { PrismaService } from '../../../shared/prisma/prisma.service';
+import { expectEqual, expectTrue } from './smoke-test.helpers';
+import type { SmokeTestCaseDef } from './smoke-test.cases';
+
+export const CONFIG_PROBE_COUNT = 2;
+
+export type ConfigProbeDeps = {
+  prisma: PrismaService;
+  agents: AgentsService;
+};
+
+async function upsertBooleanConfig(
+  prisma: PrismaService,
+  key: string,
+  value: boolean,
+  snapshots: Array<{ key: string; value: string | null }>,
+) {
+  const row = await prisma.systemConfig.findUnique({ where: { configKey: key } });
+  snapshots.push({ key, value: row?.configValue ?? null });
+  await prisma.systemConfig.upsert({
+    where: { configKey: key },
+    create: {
+      configKey: key,
+      configValue: value ? 'true' : 'false',
+      description: 'smoke config probe',
+    },
+    update: { configValue: value ? 'true' : 'false' },
+  });
+}
+
+async function restoreConfigs(
+  prisma: PrismaService,
+  snapshots: Array<{ key: string; value: string | null }>,
+) {
+  for (const snap of snapshots) {
+    if (snap.value === null) {
+      await prisma.systemConfig.deleteMany({ where: { configKey: snap.key } });
+    } else {
+      await prisma.systemConfig.upsert({
+        where: { configKey: snap.key },
+        create: {
+          configKey: snap.key,
+          configValue: snap.value,
+          description: 'smoke config restore',
+        },
+        update: { configValue: snap.value },
+      });
+    }
+  }
+}
+
+export function createConfigProbes(deps: ConfigProbeDeps): SmokeTestCaseDef[] {
+  return [
+    {
+      id: 'CFG001',
+      suite: 'config',
+      name: '代理停用默认：全局 freeze 级联冻结直属玩家',
+      description: 'AgentsService.updateAgentAdmin 未传 flag 时读取 agent.suspend_freeze_direct_players',
+      run: async () => {
+        const runId = `${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+        const snapshots: Array<{ key: string; value: string | null }> = [];
+        let agentId: bigint | undefined;
+        let playerId: bigint | undefined;
+
+        try {
+          await upsertBooleanConfig(
+            deps.prisma,
+            AGENT_SUSPEND_FREEZE_DIRECT_PLAYERS,
+            true,
+            snapshots,
+          );
+          await upsertBooleanConfig(
+            deps.prisma,
+            AGENT_SUSPEND_BLOCK_PLAYER_LOGIN,
+            false,
+            snapshots,
+          );
+
+          const agent = await deps.prisma.user.create({
+            data: {
+              username: `smoke_cfg_ag_${runId}`,
+              userType: 'AGENT',
+              status: 'ACTIVE',
+              auth: { create: { passwordHash: 'smoke' } },
+              agentProfile: {
+                create: { level: 1, creditLimit: new Decimal(10000) },
+              },
+            },
+          });
+          agentId = agent.id;
+          await deps.prisma.agentClosure.create({
+            data: { ancestorId: agent.id, descendantId: agent.id, depth: 0 },
+          });
+
+          const player = await deps.prisma.user.create({
+            data: {
+              username: `smoke_cfg_pl_${runId}`,
+              userType: 'PLAYER',
+              status: 'ACTIVE',
+              parentId: agent.id,
+              auth: { create: { passwordHash: 'smoke' } },
+            },
+          });
+          playerId = player.id;
+
+          await deps.agents.updateAgentAdmin(agent.id, { status: 'SUSPENDED' });
+
+          const frozen = await deps.prisma.user.findUnique({ where: { id: player.id } });
+          expectEqual('player status after suspend', frozen?.status, 'SUSPENDED');
+        } finally {
+          if (playerId) {
+            await deps.prisma.userAuth.deleteMany({ where: { userId: playerId } });
+            await deps.prisma.user.deleteMany({ where: { id: playerId } });
+          }
+          if (agentId) {
+            await deps.prisma.agentClosure.deleteMany({
+              where: { OR: [{ ancestorId: agentId }, { descendantId: agentId }] },
+            });
+            await deps.prisma.agentProfile.deleteMany({ where: { userId: agentId } });
+            await deps.prisma.userAuth.deleteMany({ where: { userId: agentId } });
+            await deps.prisma.user.deleteMany({ where: { id: agentId } });
+          }
+          await restoreConfigs(deps.prisma, snapshots);
+        }
+      },
+    },
+    {
+      id: 'CFG002',
+      suite: 'config',
+      name: '代理停用默认：全局 block 禁止直属玩家登录',
+      description: 'AgentsService.updateAgentAdmin 未传 flag 时写入 blockDirectPlayerLogin',
+      run: async () => {
+        const runId = `${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+        const snapshots: Array<{ key: string; value: string | null }> = [];
+        let agentId: bigint | undefined;
+
+        try {
+          await upsertBooleanConfig(
+            deps.prisma,
+            AGENT_SUSPEND_FREEZE_DIRECT_PLAYERS,
+            false,
+            snapshots,
+          );
+          await upsertBooleanConfig(
+            deps.prisma,
+            AGENT_SUSPEND_BLOCK_PLAYER_LOGIN,
+            true,
+            snapshots,
+          );
+
+          const agent = await deps.prisma.user.create({
+            data: {
+              username: `smoke_cfg2_ag_${runId}`,
+              userType: 'AGENT',
+              status: 'ACTIVE',
+              auth: { create: { passwordHash: 'smoke' } },
+              agentProfile: {
+                create: { level: 1, creditLimit: new Decimal(10000) },
+              },
+            },
+          });
+          agentId = agent.id;
+          await deps.prisma.agentClosure.create({
+            data: { ancestorId: agent.id, descendantId: agent.id, depth: 0 },
+          });
+
+          await deps.agents.updateAgentAdmin(agent.id, { status: 'SUSPENDED' });
+
+          const profile = await deps.prisma.agentProfile.findUnique({
+            where: { userId: agent.id },
+          });
+          expectTrue(
+            'blockDirectPlayerLogin persisted',
+            profile?.blockDirectPlayerLogin === true,
+            { value: profile?.blockDirectPlayerLogin },
+          );
+        } finally {
+          if (agentId) {
+            await deps.prisma.agentClosure.deleteMany({
+              where: { OR: [{ ancestorId: agentId }, { descendantId: agentId }] },
+            });
+            await deps.prisma.agentProfile.deleteMany({ where: { userId: agentId } });
+            await deps.prisma.userAuth.deleteMany({ where: { userId: agentId } });
+            await deps.prisma.user.deleteMany({ where: { id: agentId } });
+          }
+          await restoreConfigs(deps.prisma, snapshots);
+        }
+      },
+    },
+  ];
+}
diff --git a/apps/api/src/domains/operations/smoke-tests/smoke-test.service.ts b/apps/api/src/domains/operations/smoke-tests/smoke-test.service.ts
index 721173c..8097b37 100644
--- a/apps/api/src/domains/operations/smoke-tests/smoke-test.service.ts
+++ b/apps/api/src/domains/operations/smoke-tests/smoke-test.service.ts
@@ -7,6 +7,7 @@ import { SettlementService } from '../../settlement/settlement.service';
 import { WalletService } from '../../ledger/wallet.service';
 import { SMOKE_SUITE_META, SMOKE_TEST_CASES, type SmokeTestCaseDef } from './smoke-test.cases';
 import { BET_FLOW_PROBE_COUNT, createBetFlowProbes } from './smoke-test.bet-flow-probes';
+import { CONFIG_PROBE_COUNT, createConfigProbes } from './smoke-test.config-probes';
 import { createDatabaseProbes, DATABASE_PROBE_COUNT } from './smoke-test.db-probes';
 import {
   beginSmokeSteps,
@@ -49,6 +50,7 @@ export class SmokeTestService {
     }
     counts.set('database', DATABASE_PROBE_COUNT);
     counts.set('bet-flow', BET_FLOW_PROBE_COUNT);
+    counts.set('config', CONFIG_PROBE_COUNT);
 
     return [...counts.entries()].map(([id, caseCount]) => ({
       id,
@@ -77,6 +79,7 @@ export class SmokeTestService {
     const staticCases = SMOKE_TEST_CASES.filter((c) => !allow || allow.has(c.suite));
     const runDb = !allow || allow.has('database');
     const runBetFlow = !allow || allow.has('bet-flow');
+    const runConfig = !allow || allow.has('config');
 
     const results: SmokeTestCaseResult[] = [];
 
@@ -102,6 +105,15 @@ export class SmokeTestService {
       }
     }
 
+    if (runConfig) {
+      for (const probe of createConfigProbes({
+        prisma: this.prisma,
+        agents: this.agents,
+      })) {
+        results.push(await this.executeCase(probe));
+      }
+    }
+
     const finished = Date.now();
     const passed = results.filter((r) => r.status === 'PASS').length;
     const failed = results.filter((r) => r.status === 'FAIL').length;
diff --git a/apps/api/src/domains/settlement/domain/settlement-calculator.ts b/apps/api/src/domains/settlement/domain/settlement-calculator.ts
index 37a9543..83fc45e 100644
--- a/apps/api/src/domains/settlement/domain/settlement-calculator.ts
+++ b/apps/api/src/domains/settlement/domain/settlement-calculator.ts
@@ -118,8 +118,8 @@ function settleOverUnder(
 
   if (winCount === 2) return 'WIN';
   if (loseCount === 2) return 'LOSE';
-  if (winCount === 1) return 'HALF_WIN';
-  if (loseCount === 1) return 'HALF_LOSE';
+  if (winCount === 1 && loseCount === 0) return 'HALF_WIN';
+  if (loseCount === 1 && winCount === 0) return 'HALF_LOSE';
   return 'PUSH';
 }
 
diff --git a/apps/api/src/domains/settlement/settlement.service.spec.ts b/apps/api/src/domains/settlement/settlement.service.spec.ts
index d7322c4..f9b3281 100644
--- a/apps/api/src/domains/settlement/settlement.service.spec.ts
+++ b/apps/api/src/domains/settlement/settlement.service.spec.ts
@@ -148,7 +148,9 @@ describe('SettlementService outright winner flow', () => {
       settlementBatch: {
         create: settlementBatchCreate,
         findUnique: settlementBatchFindUnique,
+        findFirst: jest.fn().mockResolvedValue(null),
         update: jest.fn().mockResolvedValue({}),
+        updateMany: jest.fn().mockResolvedValue({ count: 0 }),
       },
       bet: { findMany: betFindMany },
       $transaction: transaction,
@@ -247,7 +249,7 @@ describe('SettlementService outright winner flow', () => {
     );
   });
 
-  it('keeps a parlay pending until every match in the ticket is settled', async () => {
+  it('shows parlay as lost when this match leg loses even if other legs are pending', async () => {
     matchFindFirst.mockResolvedValue({
       id: matchId,
       isOutright: false,
@@ -304,14 +306,13 @@ describe('SettlementService outright winner flow', () => {
       ftAway: 1,
     });
 
-    expect(preview.pendingOtherMatches).toBe(1);
-    expect(preview.lostOnThisMatch).toBe(0);
+    expect(preview.pendingOtherMatches).toBe(0);
+    expect(preview.lostOnThisMatch).toBe(1);
     expect(preview.items.items).toEqual([
       expect.objectContaining({
         betNo: 'PARLAY-PENDING',
-        result: 'PENDING_OTHER_MATCHES',
+        result: 'LOST',
         payout: '0',
-        note: '本场腿已出结果，待其他场次结算后统一结算',
       }),
     ]);
   });
@@ -404,6 +405,7 @@ describe('SettlementService outright winner flow', () => {
           findUnique: settlementBatchFindUnique,
           update: jest.fn().mockResolvedValue({}),
           updateMany: jest.fn().mockResolvedValue({ count: 1 }),
+          findFirst: jest.fn().mockResolvedValue({ id: batchId }),
         },
         match: { update: txMatchUpdate },
       });
@@ -474,3 +476,442 @@ describe('SettlementService outright winner flow', () => {
     expect(result).toEqual({ success: true, batchId: batchId.toString() });
   });
 });
+
+describe('SettlementService hardening', () => {
+  const matchId = BigInt(200);
+  const operatorId = BigInt(1);
+  const batchId = BigInt(900);
+  const otherBatchId = BigInt(901);
+
+  const fixtureMatch = {
+    id: matchId,
+    isOutright: false,
+    status: 'PENDING_SETTLEMENT',
+    deletedAt: null,
+  };
+
+  const pendingSingleBet = {
+    id: BigInt(3001),
+    betNo: 'BET-SINGLE',
+    betType: 'SINGLE',
+    status: 'PENDING',
+    stake: new Decimal(100),
+    agentId: null,
+    userId: BigInt(70),
+    user: { id: BigInt(70) },
+    selections: [
+      {
+        id: BigInt(4001),
+        matchId,
+        marketType: 'FT_1X2',
+        selectionId: BigInt(501),
+        selectionNameSnapshot: 'Home',
+        handicapLine: null,
+        totalLine: null,
+        odds: new Decimal(2),
+        resultStatus: null,
+        sortOrder: 0,
+      },
+    ],
+  };
+
+  function buildService(overrides: {
+    prisma?: Record<string, unknown>;
+    wallet?: Record<string, jest.Mock>;
+    transactionClient?: Record<string, unknown>;
+  } = {}) {
+    const wallet = {
+      settleBet: jest.fn().mockResolvedValue(undefined),
+      voidBet: jest.fn().mockResolvedValue(undefined),
+      ...(overrides.wallet ?? {}),
+    };
+    const agents = { recalculateUsedCredit: jest.fn().mockResolvedValue(undefined) };
+    const transaction = jest.fn(async (fn: (client: unknown) => Promise<void>) => {
+      const defaultClient = {
+        team: { findUnique: jest.fn().mockResolvedValue(null) },
+        market: { findMany: jest.fn().mockResolvedValue([]) },
+        marketSelection: { findMany: jest.fn().mockResolvedValue([{ id: BigInt(501), selectionCode: 'HOME' }]) },
+        matchScore: {
+          upsert: jest.fn().mockResolvedValue({}),
+          findUnique: jest.fn().mockResolvedValue({
+            matchId,
+            htHomeScore: 0,
+            htAwayScore: 0,
+            ftHomeScore: 1,
+            ftAwayScore: 0,
+            winnerTeamId: null,
+          }),
+        },
+        bet: {
+          findMany: jest.fn().mockResolvedValue([pendingSingleBet]),
+          updateMany: jest.fn().mockResolvedValue({ count: 1 }),
+        },
+        betSelection: { update: jest.fn().mockResolvedValue({}), findMany: jest.fn().mockResolvedValue([]) },
+        settlementItem: { create: jest.fn().mockResolvedValue({}) },
+        settlementBatch: {
+          findUnique: jest.fn().mockResolvedValue({
+            id: batchId,
+            batchNo: 'STL-001',
+            matchId,
+            status: 'PREVIEW',
+            htHomeScore: 0,
+            htAwayScore: 0,
+            ftHomeScore: 1,
+            ftAwayScore: 0,
+            match: fixtureMatch,
+          }),
+          update: jest.fn().mockResolvedValue({}),
+          updateMany: jest.fn().mockResolvedValue({ count: 1 }),
+          findFirst: jest.fn().mockResolvedValue({ id: batchId }),
+        },
+        match: { update: jest.fn().mockResolvedValue({}) },
+        ...(overrides.transactionClient ?? {}),
+      };
+      await fn(defaultClient);
+    });
+
+    const prisma = {
+      match: {
+        count: jest.fn().mockResolvedValue(0),
+        findFirst: jest.fn().mockResolvedValue({ ...fixtureMatch, status: 'CLOSED' }),
+        update: jest.fn().mockResolvedValue({}),
+      },
+      team: { findUnique: jest.fn().mockResolvedValue(null) },
+      market: { findMany: jest.fn().mockResolvedValue([]) },
+      marketSelection: {
+        findFirst: jest.fn().mockResolvedValue(null),
+        findMany: jest.fn().mockResolvedValue([{ id: BigInt(501), selectionCode: 'HOME' }]),
+      },
+      matchScore: {
+        findUnique: jest.fn().mockResolvedValue(null),
+        upsert: jest.fn().mockResolvedValue({}),
+      },
+      settlementBatch: {
+        create: jest.fn().mockResolvedValue({ id: batchId, matchId, status: 'PREVIEW' }),
+        findUnique: jest.fn(),
+        findFirst: jest.fn().mockResolvedValue(null),
+        updateMany: jest.fn().mockResolvedValue({ count: 0 }),
+      },
+      bet: { findMany: jest.fn().mockResolvedValue([]) },
+      $transaction: transaction,
+      ...(overrides.prisma ?? {}),
+    };
+
+    return {
+      service: new SettlementService(prisma as never, wallet as never, agents as never),
+      prisma,
+      wallet,
+      transaction,
+    };
+  }
+
+  it('recordScore rejects half-time scores greater than full-time', async () => {
+    const { service } = buildService();
+    try {
+      await service.recordScore(matchId, 2, 0, 1, 0, operatorId);
+      throw new Error('Expected recordScore to reject');
+    } catch (err) {
+      const response = (err as { getResponse?: () => unknown }).getResponse?.();
+      expect(response).toEqual(
+        expect.objectContaining({ code: 'SETTLEMENT_SCORE_INVALID' }),
+      );
+    }
+  });
+
+  it('previewSettlement cancels older preview batches before creating a new one', async () => {
+    const updateMany = jest.fn().mockResolvedValue({ count: 1 });
+    const { service } = buildService({
+      prisma: {
+        bet: { findMany: jest.fn().mockResolvedValue([]) },
+        settlementBatch: {
+          create: jest.fn().mockResolvedValue({ id: batchId, matchId, status: 'PREVIEW' }),
+          updateMany,
+        },
+      },
+    });
+
+    await service.previewSettlement(matchId, operatorId, {
+      htHome: 0,
+      htAway: 0,
+      ftHome: 1,
+      ftAway: 0,
+    });
+
+    expect(updateMany).toHaveBeenCalledWith(
+      expect.objectContaining({
+        where: { matchId, status: 'PREVIEW', isResettle: false },
+        data: { status: 'CANCELLED' },
+      }),
+    );
+  });
+
+  it('confirmSettlement rejects stale preview batches', async () => {
+    const staleBatch = {
+      id: otherBatchId,
+      batchNo: 'STL-OLD',
+      matchId,
+      status: 'PREVIEW',
+      htHomeScore: 0,
+      htAwayScore: 0,
+      ftHomeScore: 1,
+      ftAwayScore: 0,
+      match: fixtureMatch,
+    };
+    const { service } = buildService({
+      prisma: {
+        settlementBatch: {
+          findUnique: jest.fn().mockResolvedValue(staleBatch),
+        },
+      },
+      transactionClient: {
+        settlementBatch: {
+          findUnique: jest.fn().mockResolvedValue(staleBatch),
+          update: jest.fn().mockResolvedValue({}),
+          updateMany: jest.fn().mockResolvedValue({ count: 1 }),
+          findFirst: jest.fn().mockResolvedValue({ id: batchId }),
+        },
+      },
+    });
+
+    try {
+      await service.confirmSettlement(otherBatchId, operatorId);
+      throw new Error('Expected confirmSettlement to reject');
+    } catch (err) {
+      const response = (err as { getResponse?: () => unknown }).getResponse?.();
+      expect(response).toEqual(
+        expect.objectContaining({ code: 'SETTLEMENT_BATCH_STALE' }),
+      );
+    }
+  });
+
+  it('confirmSettlement throws when bet status update fails', async () => {
+    const { service } = buildService({
+      prisma: {
+        settlementBatch: {
+          findUnique: jest.fn().mockResolvedValue({
+            id: batchId,
+            batchNo: 'STL-001',
+            matchId,
+            status: 'PREVIEW',
+            htHomeScore: 0,
+            htAwayScore: 0,
+            ftHomeScore: 1,
+            ftAwayScore: 0,
+            match: fixtureMatch,
+          }),
+        },
+      },
+      transactionClient: {
+        bet: {
+          findMany: jest.fn().mockResolvedValue([pendingSingleBet]),
+          updateMany: jest.fn().mockResolvedValue({ count: 0 }),
+        },
+      },
+    });
+
+    try {
+      await service.confirmSettlement(batchId, operatorId);
+      throw new Error('Expected confirmSettlement to reject');
+    } catch (err) {
+      const response = (err as { getResponse?: () => unknown }).getResponse?.();
+      expect(response).toEqual(
+        expect.objectContaining({
+          code: 'SETTLEMENT_BET_UPDATE_FAILED',
+          params: expect.objectContaining({ betNo: 'BET-SINGLE' }),
+        }),
+      );
+    }
+  });
+
+  it('voidMatchBets settles cross-match parlay as lost when voided leg joins an existing losing leg', async () => {
+    const parlayBet = {
+      id: BigInt(5001),
+      betNo: 'PARLAY-VOID',
+      betType: 'PARLAY',
+      status: 'PENDING',
+      stake: new Decimal(100),
+      agentId: null,
+      userId: BigInt(80),
+      selections: [
+        {
+          id: BigInt(6001),
+          matchId,
+          marketType: 'FT_1X2',
+          selectionId: BigInt(501),
+          selectionNameSnapshot: 'Home',
+          handicapLine: null,
+          totalLine: null,
+          odds: new Decimal(2),
+          resultStatus: null,
+          sortOrder: 0,
+        },
+        {
+          id: BigInt(6002),
+          matchId: BigInt(201),
+          marketType: 'FT_1X2',
+          selectionId: BigInt(502),
+          selectionNameSnapshot: 'Away',
+          handicapLine: null,
+          totalLine: null,
+          odds: new Decimal(2),
+          resultStatus: 'LOSE',
+          sortOrder: 1,
+        },
+      ],
+    };
+
+    const betSelectionUpdate = jest.fn().mockResolvedValue({});
+    const betSelectionFindMany = jest
+      .fn()
+      .mockResolvedValue([
+        { ...parlayBet.selections[0], resultStatus: 'VOID', odds: new Decimal(2) },
+        { ...parlayBet.selections[1], resultStatus: 'LOSE', odds: new Decimal(2) },
+      ]);
+    const betUpdateMany = jest.fn().mockResolvedValue({ count: 1 });
+    const funds = { settleBet: jest.fn().mockResolvedValue(undefined), voidBet: jest.fn() };
+
+    const transaction = jest.fn(async (fn: (client: unknown) => Promise<unknown>) =>
+      fn({
+        match: { update: jest.fn().mockResolvedValue({}) },
+        bet: {
+          findMany: jest.fn().mockResolvedValue([parlayBet]),
+          updateMany: betUpdateMany,
+        },
+        betSelection: {
+          update: betSelectionUpdate,
+          findMany: betSelectionFindMany,
+        },
+      }),
+    );
+
+    const service = new SettlementService(
+      { $transaction: transaction } as never,
+      funds as never,
+      { recalculateUsedCredit: jest.fn() } as never,
+    );
+
+    const result = await service.voidMatchBets(matchId);
+
+    expect(result.voidedCount).toBe(1);
+    expect(funds.voidBet).not.toHaveBeenCalled();
+    expect(funds.settleBet).toHaveBeenCalledWith(
+      expect.objectContaining({
+        betNo: 'PARLAY-VOID',
+        result: 'LOSE',
+        batchNo: `void:${matchId}`,
+      }),
+    );
+    expect(funds.settleBet.mock.calls[0][0].payout.toString()).toBe('0');
+  });
+
+  it('previewResettlement treats single multi-leg tickets like parlays', async () => {
+    const multiLegSingle = {
+      id: BigInt(7001),
+      betNo: 'SINGLE-MULTI',
+      betType: 'SINGLE',
+      status: 'WON',
+      stake: new Decimal(100),
+      actualReturn: new Decimal(360),
+      agentId: null,
+      userId: BigInt(90),
+      selections: [
+        {
+          id: BigInt(8001),
+          matchId,
+          marketType: 'FT_1X2',
+          selectionId: BigInt(501),
+          selectionNameSnapshot: 'Home',
+          handicapLine: null,
+          totalLine: null,
+          odds: new Decimal(2),
+          resultStatus: 'WIN',
+          sortOrder: 0,
+        },
+        {
+          id: BigInt(8002),
+          matchId,
+          marketType: 'FT_1X2',
+          selectionId: BigInt(502),
+          selectionNameSnapshot: 'Away',
+          handicapLine: null,
+          totalLine: null,
+          odds: new Decimal(2),
+          resultStatus: 'WIN',
+          sortOrder: 1,
+        },
+      ],
+    };
+
+    const { service } = buildService({
+      prisma: {
+        match: {
+          count: jest.fn().mockResolvedValue(0),
+          findFirst: jest.fn().mockResolvedValue({ ...fixtureMatch, status: 'SETTLED' }),
+          update: jest.fn().mockResolvedValue({}),
+        },
+        bet: { findMany: jest.fn().mockResolvedValue([multiLegSingle]) },
+        settlementBatch: {
+          create: jest.fn().mockImplementation(({ data }) =>
+            Promise.resolve({ id: batchId, ...data }),
+          ),
+        },
+      },
+    });
+
+    const preview = await service.previewResettlement(
+      matchId,
+      {
+        htHome: 0,
+        htAway: 0,
+        ftHome: 0,
+        ftAway: 1,
+      },
+      operatorId,
+    );
+
+    expect(preview.items).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          betNo: 'SINGLE-MULTI',
+          newStatus: 'LOST',
+        }),
+      ]),
+    );
+    expect(preview.items[0].newPayout.toString()).toBe('0');
+  });
+
+  it('previewSettlement rejects unsupported market types on pending bets', async () => {
+    const { service } = buildService({
+      prisma: {
+        bet: {
+          findMany: jest.fn().mockResolvedValue([
+            {
+              ...pendingSingleBet,
+              selections: [
+                {
+                  ...pendingSingleBet.selections[0],
+                  marketType: 'UNKNOWN_MARKET',
+                },
+              ],
+            },
+          ]),
+        },
+      },
+    });
+
+    try {
+      await service.previewSettlement(matchId, operatorId, {
+        htHome: 0,
+        htAway: 0,
+        ftHome: 1,
+        ftAway: 0,
+      });
+      throw new Error('Expected previewSettlement to reject');
+    } catch (err) {
+      const response = (err as { getResponse?: () => unknown }).getResponse?.();
+      expect(response).toEqual(
+        expect.objectContaining({ code: 'SETTLEMENT_MARKET_UNSUPPORTED' }),
+      );
+    }
+  });
+});
diff --git a/apps/api/src/domains/settlement/settlement.service.ts b/apps/api/src/domains/settlement/settlement.service.ts
index 571da2a..c62c651 100644
--- a/apps/api/src/domains/settlement/settlement.service.ts
+++ b/apps/api/src/domains/settlement/settlement.service.ts
@@ -18,6 +18,7 @@ import {
   resolveSelectionCode,
   templateScoresForMarket,
 } from './domain/settlement-helpers';
+import { isSettlementSupportedMarketType } from '@thebet365/shared';
 
 const SETTLEMENT_ENTRY_STATUSES = new Set(['CLOSED', 'PENDING_SETTLEMENT', 'SETTLED']);
 const STAT_MARKET_REQUIREMENTS = {
@@ -189,6 +190,95 @@ export class SettlementService {
     }
   }
 
+  private assertScoreConsistency(score: ScoreInput, isOutright: boolean) {
+    if (isOutright) return;
+    if (
+      score.htHome < 0 ||
+      score.htAway < 0 ||
+      score.ftHome < 0 ||
+      score.ftAway < 0 ||
+      score.htHome > score.ftHome ||
+      score.htAway > score.ftAway
+    ) {
+      throw appBadRequest('SETTLEMENT_SCORE_INVALID');
+    }
+  }
+
+  private assertSupportedMarketTypes(
+    bets: Array<{ selections: Array<{ marketType: string }> }>,
+  ) {
+    for (const bet of bets) {
+      for (const sel of bet.selections) {
+        if (!isSettlementSupportedMarketType(sel.marketType)) {
+          throw appBadRequest('SETTLEMENT_MARKET_UNSUPPORTED', {
+            marketType: sel.marketType,
+          });
+        }
+      }
+    }
+  }
+
+  private assertOutrightWinnerForBets(
+    bets: Array<{ selections: Array<{ marketType: string }> }>,
+    winnerTeamCode: string | null,
+    isOutright: boolean,
+  ) {
+    const hasOutrightLeg =
+      isOutright ||
+      bets.some((bet) =>
+        bet.selections.some((sel) => sel.marketType === 'OUTRIGHT_WINNER'),
+      );
+    if (hasOutrightLeg && !winnerTeamCode) {
+      throw appBadRequest('SETTLEMENT_WINNER_REQUIRED');
+    }
+  }
+
+  private requireBetUpdate(updated: { count: number }, betNo: string) {
+    if (updated.count !== 1) {
+      throw appBadRequest('SETTLEMENT_BET_UPDATE_FAILED', { betNo });
+    }
+  }
+
+  private async assertLatestPreviewBatch(
+    batchId: bigint,
+    matchId: bigint,
+    tx?: TxClient,
+  ) {
+    const client: PrismaClientLike = tx ?? this.prisma;
+    const latest = await client.settlementBatch.findFirst({
+      where: { matchId, status: 'PREVIEW', isResettle: false },
+      orderBy: { createdAt: 'desc' },
+      select: { id: true },
+    });
+    if (latest && latest.id !== batchId) {
+      throw appBadRequest('SETTLEMENT_BATCH_STALE', { batchId: batchId.toString() });
+    }
+  }
+
+  private async cancelStalePreviewBatches(matchId: bigint, tx?: TxClient) {
+    const client: PrismaClientLike = tx ?? this.prisma;
+    await client.settlementBatch.updateMany({
+      where: { matchId, status: 'PREVIEW', isResettle: false },
+      data: { status: 'CANCELLED' },
+    });
+  }
+
+  private parlayBetStatusFromResult(
+    parlayResult: ReturnType<typeof calculateParlayPayout>,
+  ): 'LOST' | 'PUSH' | 'WON' {
+    if (parlayResult.betResult === 'LOST') return 'LOST';
+    if (parlayResult.betResult === 'PUSH') return 'PUSH';
+    return 'WON';
+  }
+
+  private walletResultFromParlayBetResult(
+    betResult: 'WON' | 'LOST' | 'PUSH',
+  ): 'WIN' | 'LOSE' | 'PUSH' {
+    if (betResult === 'LOST') return 'LOSE';
+    if (betResult === 'PUSH') return 'PUSH';
+    return 'WIN';
+  }
+
   async recordScore(
     matchId: bigint,
     htHome: number,
@@ -226,6 +316,13 @@ export class SettlementService {
       }
     }
 
+    if (!match.isOutright) {
+      this.assertScoreConsistency(
+        { htHome, htAway, ftHome, ftAway },
+        match.isOutright,
+      );
+    }
+
     const stats = this.statsInputFromSource(statsInput);
     await this.prisma.matchScore.upsert({
       where: { matchId },
@@ -312,7 +409,19 @@ export class SettlementService {
     }
 
     const scoreSource = await this.resolvePreviewScoreSource(matchId, match.isOutright, opts);
+    if (!match.isOutright) {
+      this.assertScoreConsistency(
+        {
+          htHome: scoreSource.htHome,
+          htAway: scoreSource.htAway,
+          ftHome: scoreSource.ftHome,
+          ftAway: scoreSource.ftAway,
+        },
+        match.isOutright,
+      );
+    }
     const computation = await this.computePreviewComputation(matchId, scoreSource);
+    await this.cancelStalePreviewBatches(matchId);
     const batch = await this.prisma.settlementBatch.create({
       data: {
         matchId,
@@ -733,6 +842,8 @@ export class SettlementService {
       statsInput,
       pendingBets.flatMap((bet) => bet.selections.map((sel) => sel.marketType)),
     );
+    this.assertSupportedMarketTypes(pendingBets);
+    this.assertOutrightWinnerForBets(pendingBets, winnerTeamCode, false);
 
     let totalPayout = new Decimal(0);
     let totalRefund = new Decimal(0);
@@ -758,6 +869,7 @@ export class SettlementService {
         const result = this.settleLegResult(sel, code, scoreInput, statsInput, winnerTeamCode);
         const payout = calculatePayout(bet.stake, sel.odds, result);
         if (result === 'WIN' || result === 'HALF_WIN') wonLegsOnMatch += 1;
+        if (result === 'LOSE') lostOnThisMatch += 1;
         items.push({ betId: bet.id, betNo: bet.betNo, betType: 'SINGLE', result, payout });
         if (result === 'PUSH' || result === 'VOID') {
           totalRefund = totalRefund.add(bet.stake);
@@ -776,6 +888,7 @@ export class SettlementService {
           };
         });
         const parlay = calculateParlayPayout(bet.stake, legResults);
+        if (parlay.betResult === 'LOST') lostOnThisMatch += 1;
         items.push({
           betId: bet.id,
           betNo: bet.betNo,
@@ -809,6 +922,7 @@ export class SettlementService {
           selectionCodes,
         );
         if (preview.kind === 'SETTLED') {
+          if (preview.betResult === 'LOST') lostOnThisMatch += 1;
           items.push({
             betId: bet.id,
             betNo: bet.betNo,
@@ -865,11 +979,18 @@ export class SettlementService {
           selectionCodes.get(sel.selectionId.toString()),
           sel.selectionNameSnapshot,
         );
+        const legResult = this.settleLegResult(sel, code, scoreInput, statsInput, winnerTeamCode);
+        if (legResult === 'LOSE') {
+          return { kind: 'SETTLED', betResult: 'LOST', payout: new Decimal(0) };
+        }
         legResults.push({
           odds: sel.odds,
-          result: this.settleLegResult(sel, code, scoreInput, statsInput, winnerTeamCode),
+          result: legResult,
         });
       } else if (sel.resultStatus) {
+        if (sel.resultStatus === 'LOSE') {
+          return { kind: 'SETTLED', betResult: 'LOST', payout: new Decimal(0) };
+        }
         legResults.push({
           odds: sel.odds,
           result: sel.resultStatus as SelectionResult,
@@ -966,6 +1087,13 @@ export class SettlementService {
         pendingBets.flatMap((bet) => bet.selections.map((sel) => sel.marketType)),
         tx,
       );
+      this.assertSupportedMarketTypes(pendingBets);
+      this.assertOutrightWinnerForBets(
+        pendingBets,
+        winnerTeamCode,
+        currentBatch.match.isOutright,
+      );
+      await this.assertLatestPreviewBatch(batchId, currentBatch.matchId, tx);
       let settledCount = 0;
 
       await this.upsertMatchScoreRecord(
@@ -1001,7 +1129,7 @@ export class SettlementService {
               settledAt: new Date(),
             },
           });
-          if (updatedBet.count !== 1) continue;
+          this.requireBetUpdate(updatedBet, bet.betNo);
 
           await tx.betSelection.update({
             where: { id: sel.id },
@@ -1045,12 +1173,7 @@ export class SettlementService {
             });
           }
           const parlayResult = calculateParlayPayout(bet.stake, legResults);
-          const betStatus =
-            parlayResult.betResult === 'LOST'
-              ? 'LOST'
-              : parlayResult.betResult === 'PUSH'
-                ? 'PUSH'
-                : 'WON';
+          const betStatus = this.parlayBetStatusFromResult(parlayResult);
 
           const updatedBet = await tx.bet.updateMany({
             where: { id: bet.id, status: 'PENDING' },
@@ -1060,7 +1183,7 @@ export class SettlementService {
               settledAt: new Date(),
             },
           });
-          if (updatedBet.count !== 1) continue;
+          this.requireBetUpdate(updatedBet, bet.betNo);
 
           await this.funds.settleBet({
             userId: bet.userId,
@@ -1068,12 +1191,7 @@ export class SettlementService {
             payout: parlayResult.payout,
             betNo: bet.betNo,
             batchNo: batch.batchNo,
-            result:
-              parlayResult.betResult === 'LOST'
-                ? 'LOSE'
-                : parlayResult.betResult === 'PUSH'
-                  ? 'PUSH'
-                  : 'WIN',
+            result: this.walletResultFromParlayBetResult(parlayResult.betResult),
             tx,
           });
 
@@ -1116,12 +1234,7 @@ export class SettlementService {
               result: s.resultStatus as SelectionResult,
             }));
             const parlayResult = calculateParlayPayout(bet.stake, legResults);
-            const betStatus =
-              parlayResult.betResult === 'LOST'
-                ? 'LOST'
-                : parlayResult.betResult === 'PUSH'
-                  ? 'PUSH'
-                  : 'WON';
+            const betStatus = this.parlayBetStatusFromResult(parlayResult);
 
             const updatedBet = await tx.bet.updateMany({
               where: { id: bet.id, status: 'PENDING' },
@@ -1131,7 +1244,7 @@ export class SettlementService {
                 settledAt: new Date(),
               },
             });
-            if (updatedBet.count !== 1) continue;
+            this.requireBetUpdate(updatedBet, bet.betNo);
 
             await this.funds.settleBet({
               userId: bet.userId,
@@ -1139,12 +1252,7 @@ export class SettlementService {
               payout: parlayResult.payout,
               betNo: bet.betNo,
               batchNo: batch.batchNo,
-              result:
-                parlayResult.betResult === 'LOST'
-                  ? 'LOSE'
-                  : parlayResult.betResult === 'PUSH'
-                    ? 'PUSH'
-                    : 'WIN',
+              result: this.walletResultFromParlayBetResult(parlayResult.betResult),
               tx,
             });
 
@@ -1386,7 +1494,7 @@ export class SettlementService {
     winnerTeamCode: string | null,
     selectionCodes: Map<string, string | null>,
   ) {
-    if (bet.betType === 'SINGLE') {
+    if (bet.betType === 'SINGLE' && bet.selections.length === 1) {
       const sel = bet.selections[0];
       const code = resolveSelectionCode(
         selectionCodes.get(sel.selectionId.toString()),
@@ -1401,6 +1509,26 @@ export class SettlementService {
       };
     }
 
+    if (bet.betType === 'SINGLE' && bet.selections.length > 1) {
+      const legResults: Array<{ odds: Decimal; result: SelectionResult }> = [];
+      const legUpdates = new Map<string, SelectionResult>();
+      for (const sel of bet.selections) {
+        const code = resolveSelectionCode(
+          selectionCodes.get(sel.selectionId.toString()),
+          sel.selectionNameSnapshot,
+        );
+        const result = this.settleLegResult(sel, code, scoreInput, statsInput, winnerTeamCode);
+        legResults.push({ odds: sel.odds, result });
+        legUpdates.set(sel.id.toString(), result);
+      }
+      const parlayResult = calculateParlayPayout(bet.stake, legResults);
+      return {
+        payout: parlayResult.payout,
+        betStatus: this.parlayBetStatusFromResult(parlayResult),
+        legUpdates,
+      };
+    }
+
     const legResults: Array<{ odds: Decimal; result: SelectionResult }> = [];
     const legUpdates = new Map<string, SelectionResult>();
 
@@ -1423,14 +1551,11 @@ export class SettlementService {
     }
 
     const parlayResult = calculateParlayPayout(bet.stake, legResults);
-    const betStatus =
-      parlayResult.betResult === 'LOST'
-        ? 'LOST'
-        : parlayResult.betResult === 'PUSH'
-          ? 'PUSH'
-          : 'WON';
-
-    return { payout: parlayResult.payout, betStatus, legUpdates };
+    return {
+      payout: parlayResult.payout,
+      betStatus: this.parlayBetStatusFromResult(parlayResult),
+      legUpdates,
+    };
   }
 
   async previewResettlement(
@@ -1448,6 +1573,18 @@ export class SettlementService {
       throw appBadRequest('RESETTLE_SETTLED_ONLY');
     }
 
+    if (!match.isOutright) {
+      this.assertScoreConsistency(
+        {
+          htHome: scoreInput.htHome,
+          htAway: scoreInput.htAway,
+          ftHome: scoreInput.ftHome,
+          ftAway: scoreInput.ftAway,
+        },
+        match.isOutright,
+      );
+    }
+
     const winnerTeamCode = winnerTeamId
       ? await this.resolveWinnerTeamCode(winnerTeamId)
       : null;
@@ -1467,6 +1604,8 @@ export class SettlementService {
       statsInput,
       settledBets.flatMap((bet) => bet.selections.map((sel) => sel.marketType)),
     );
+    this.assertSupportedMarketTypes(settledBets);
+    this.assertOutrightWinnerForBets(settledBets, winnerTeamCode, match.isOutright);
     const items: Array<{
       betId: bigint;
       betNo: string;
@@ -1612,6 +1751,12 @@ export class SettlementService {
         settledBets.flatMap((bet) => bet.selections.map((sel) => sel.marketType)),
         tx,
       );
+      this.assertSupportedMarketTypes(settledBets);
+      this.assertOutrightWinnerForBets(
+        settledBets,
+        winnerTeamCode,
+        currentBatch.match.isOutright,
+      );
       let affectedCount = 0;
 
       await this.upsertMatchScoreRecord(
@@ -1715,6 +1860,7 @@ export class SettlementService {
     options: { cancelMatch?: boolean } = {},
   ) {
     const agentIds = new Set<bigint>();
+    const voidBatchNo = `void:${matchId}`;
 
     const voidedCount = await this.prisma.$transaction(async (tx) => {
       if (options.cancelMatch) {
@@ -1726,21 +1872,82 @@ export class SettlementService {
 
       const bets = await tx.bet.findMany({
         where: { status: 'PENDING', selections: { some: { matchId } } },
+        include: { selections: { orderBy: { sortOrder: 'asc' } } },
       });
 
       let count = 0;
       for (const bet of bets) {
-        const updated = await tx.bet.updateMany({
-          where: { id: bet.id, status: 'PENDING' },
-          data: { status: 'VOID', actualReturn: bet.stake, settledAt: new Date() },
-        });
-        if (updated.count !== 1) continue;
+        const isSingleOneLeg = bet.betType === 'SINGLE' && bet.selections.length === 1;
 
-        await this.funds.voidBet({
+        if (isSingleOneLeg) {
+          const sel = bet.selections[0];
+          const updated = await tx.bet.updateMany({
+            where: { id: bet.id, status: 'PENDING' },
+            data: { status: 'VOID', actualReturn: bet.stake, settledAt: new Date() },
+          });
+          if (updated.count !== 1) continue;
+
+          await tx.betSelection.update({
+            where: { id: sel.id },
+            data: { resultStatus: 'VOID' },
+          });
+
+          await this.funds.voidBet({
+            userId: bet.userId,
+            stake: bet.stake,
+            betNo: bet.betNo,
+            businessKey: `void:${matchId}:${bet.betNo}`,
+            tx,
+          });
+          if (bet.agentId) agentIds.add(bet.agentId);
+          count += 1;
+          continue;
+        }
+
+        const legsOnMatch = bet.selections.filter(
+          (sel) => sel.matchId?.toString() === matchId.toString(),
+        );
+        if (!legsOnMatch.length) continue;
+
+        for (const sel of legsOnMatch) {
+          await tx.betSelection.update({
+            where: { id: sel.id },
+            data: { resultStatus: 'VOID' },
+          });
+        }
+
+        const updatedLegs = await tx.betSelection.findMany({
+          where: { betId: bet.id },
+          orderBy: { sortOrder: 'asc' },
+        });
+        if (!updatedLegs.every((sel) => sel.resultStatus != null)) {
+          continue;
+        }
+
+        const legResults = updatedLegs.map((sel) => ({
+          odds: sel.odds,
+          result: sel.resultStatus as SelectionResult,
+        }));
+        const parlayResult = calculateParlayPayout(bet.stake, legResults);
+        const betStatus = this.parlayBetStatusFromResult(parlayResult);
+
+        const updatedBet = await tx.bet.updateMany({
+          where: { id: bet.id, status: 'PENDING' },
+          data: {
+            status: betStatus,
+            actualReturn: parlayResult.payout,
+            settledAt: new Date(),
+          },
+        });
+        if (updatedBet.count !== 1) continue;
+
+        await this.funds.settleBet({
           userId: bet.userId,
           stake: bet.stake,
+          payout: parlayResult.payout,
           betNo: bet.betNo,
-          businessKey: `void:${matchId}:${bet.betNo}`,
+          batchNo: voidBatchNo,
+          result: this.walletResultFromParlayBetResult(parlayResult.betResult),
           tx,
         });
         if (bet.agentId) agentIds.add(bet.agentId);
diff --git a/apps/api/src/shared/config/system-config.service.ts b/apps/api/src/shared/config/system-config.service.ts
index 1e2f251..c2f3d94 100644
--- a/apps/api/src/shared/config/system-config.service.ts
+++ b/apps/api/src/shared/config/system-config.service.ts
@@ -19,6 +19,10 @@ export type InboxNotifySettings = {
   inboxEnabled: boolean;
   /** 充值审核通过/拒绝时发送站内信 */
   deposit: boolean;
+  /** 发布 Banner 内容时发送站内信推广 */
+  banner: boolean;
+  /** 发布公告/滚动条内容时发送站内信推广 */
+  announcement: boolean;
 };
 
 export type PlatformDirectCashbackSettings = {
@@ -41,9 +45,9 @@ export type PlayerAccountSettings = {
 };
 
 export type AgentSuspendSettings = {
-  /** 停用代理时是否允许级联冻结其直属玩家（需管理员显式勾选） */
+  /** 停用代理时默认级联冻结直属玩家（单次操作仍可覆盖） */
   suspendFreezeDirectPlayers: boolean;
-  /** 上级代理停用时是否禁止其直属玩家登录 */
+  /** 停用代理时默认禁止直属玩家登录（单次操作仍可覆盖） */
   suspendBlockPlayerLogin: boolean;
 };
 
@@ -239,11 +243,13 @@ export class SystemConfigService {
   }
 
   async getInboxNotifySettings(): Promise<InboxNotifySettings> {
-    const [inboxEnabled, deposit] = await Promise.all([
+    const [inboxEnabled, deposit, banner, announcement] = await Promise.all([
       this.getBoolean(INBOX_FEATURE_ENABLED, true),
       this.getBoolean(INBOX_NOTIFY_DEPOSIT, true),
+      this.getBoolean(INBOX_NOTIFY_BANNER, true),
+      this.getBoolean(INBOX_NOTIFY_ANNOUNCEMENT, true),
     ]);
-    return { inboxEnabled, deposit };
+    return { inboxEnabled, deposit, banner, announcement };
   }
 
   async updateInboxNotifySettings(data: Partial<InboxNotifySettings>) {
@@ -261,6 +267,20 @@ export class SystemConfigService {
         '充值审核结果是否通过站内邮箱通知玩家',
       );
     }
+    if (data.banner !== undefined) {
+      await this.setBoolean(
+        INBOX_NOTIFY_BANNER,
+        data.banner,
+        '发布 Banner 内容时是否发送站内信推广',
+      );
+    }
+    if (data.announcement !== undefined) {
+      await this.setBoolean(
+        INBOX_NOTIFY_ANNOUNCEMENT,
+        data.announcement,
+        '发布公告/滚动条内容时是否发送站内信推广',
+      );
+    }
     return this.getInboxNotifySettings();
   }
 
diff --git a/apps/player/index.html b/apps/player/index.html
index bb878d9..237a9f2 100644
--- a/apps/player/index.html
+++ b/apps/player/index.html
@@ -2,8 +2,12 @@
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
     <meta name="theme-color" content="#003D6B" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-title" content="TheBet365" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <link rel="icon" type="image/png" href="/logo.png" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="apple-touch-icon" href="/logo.png" />
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/BackToTopButton.vue b/apps/player/src/components/BackToTopButton.vue
index 77ff460..f647a8b 100644
--- a/apps/player/src/components/BackToTopButton.vue
+++ b/apps/player/src/components/BackToTopButton.vue
@@ -53,7 +53,7 @@ const { visible, scrollToTop } = useBackToTop(toRef(props, 'scrollEl'));
 }
 
 .back-top-btn.above-nav {
-  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
+  bottom: calc(var(--player-bottom-nav-h, 54px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 12px);
 }
 
 .back-top-btn:active {
diff --git a/apps/player/src/components/BannerCarousel.vue b/apps/player/src/components/BannerCarousel.vue
index 30bc943..5a9edaa 100644
--- a/apps/player/src/components/BannerCarousel.vue
+++ b/apps/player/src/components/BannerCarousel.vue
@@ -201,6 +201,8 @@ onUnmounted(stopAutoPlay);
   overflow: hidden;
   background: linear-gradient(135deg, #F5F7FA, #E8EDF2);
   cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .slide::after {
diff --git a/apps/player/src/components/BetSlipDrawer.vue b/apps/player/src/components/BetSlipDrawer.vue
index 1f866a2..11d295d 100644
--- a/apps/player/src/components/BetSlipDrawer.vue
+++ b/apps/player/src/components/BetSlipDrawer.vue
@@ -14,6 +14,7 @@ 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] }>();
@@ -34,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('');
@@ -59,7 +62,6 @@ interface SelectionOddsRow {
 
 const oddsDeltas = ref<Record<string, OddsDelta>>({});
 let oddsPollTimer: ReturnType<typeof setInterval> | null = null;
-const clearConfirmVisible = ref(false);
 
 const activeItems = computed<SlipItem[]>(() => {
   if (activeTab.value === 'parlay') return slip.parlayItems;
@@ -347,46 +349,54 @@ function oddsTrendClass(delta: OddsDelta) {
   return delta.newOdds >= delta.oldOdds ? 'odds-up' : 'odds-down';
 }
 
-function onClearSlip() {
-  if (!activeItems.value.length) return;
-  clearConfirmVisible.value = true;
-}
-
-function confirmClearSlip() {
-  if (activeTab.value === 'parlay') slip.clearParlay();
-  else slip.clearSingle();
-  clearConfirmVisible.value = false;
-  error.value = '';
-}
-
-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 = '';
@@ -428,6 +438,11 @@ async function placeBet() {
   }
 }
 
+async function confirmPlaceBet() {
+  showPlaceConfirm.value = false;
+  await executePlaceBet();
+}
+
 watch(
   () => props.modelValue,
   (open) => {
@@ -636,7 +651,7 @@ watch(
           type="button"
           class="btn-primary"
           :disabled="loading || !canSubmitWithOdds"
-          @click="placeBet"
+          @click="onPlaceBetClick"
         >
           {{ submitButtonLabel }}
         </button>
@@ -644,23 +659,24 @@ watch(
     </div>
   </div>
 
-  <BetSuccessOverlay :show="showSuccess" @done="onSuccessDone" />
-
   <ConfirmDialog
-    v-model:visible="clearConfirmVisible"
-    :title="t('bet.slip_clear_title', '清空投注单')"
-    :message="t('bet.slip_clear_confirm', '确认清空投注单？')"
-    :confirm-text="t('bet.slip_clear_confirm_btn', '清空')"
-    danger
-    @confirm="confirmClearSlip"
+    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>
 
 <style scoped>
 .overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.35);
+  background: rgba(0, 0, 0, 0.75);
   z-index: 200;
   display: flex;
   align-items: flex-end;
@@ -669,13 +685,13 @@ watch(
 .drawer {
   width: 100%;
   max-height: 88vh;
-  background: #FFFFFF;
+  background: #101010;
   border-radius: 16px 16px 0 0;
-  border-top: 1px solid #E5E7EB;
+  border-top: 1px solid var(--border-gold-soft);
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 -20px 44px rgba(0, 0, 0, 0.48);
 }
 
 .drawer-head {
@@ -687,14 +703,14 @@ watch(
   align-items: flex-start;
   gap: 12px;
   padding: 14px 14px 10px;
-  background: #FFFFFF;
-  border-bottom: 1px solid #E5E7EB;
+  background: linear-gradient(180deg, #1d1d1d 0%, #111 100%);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }
 
 .drawer-kicker {
   margin: 0 0 3px;
   font-size: 11px;
-  color: #003D6B;
+  color: var(--primary-light);
   font-weight: 800;
 }
 
@@ -702,7 +718,7 @@ watch(
   margin: 0;
   font-size: 17px;
   font-weight: 900;
-  color: #1A1A2E;
+  color: var(--text);
 }
 
 .close-btn {
@@ -712,8 +728,8 @@ watch(
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: #F5F7FA;
-  color: #6B7280;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-muted);
   font-size: 18px;
   padding: 0;
   pointer-events: auto;
@@ -726,15 +742,15 @@ watch(
   align-items: center;
   gap: 8px;
   padding: 10px 14px;
-  background: rgba(0, 61, 107, 0.04);
-  border-bottom: 1px solid #E5E7EB;
-  color: #6B7280;
+  background: rgba(212, 175, 55, 0.08);
+  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
+  color: var(--text-muted);
   font-size: 12px;
 }
 
 .balance-bar strong {
   justify-self: end;
-  color: #003D6B;
+  color: var(--primary-light);
   font-size: 16px;
   font-weight: 900;
 }
@@ -743,8 +759,8 @@ watch(
   width: 28px;
   height: 28px;
   border-radius: 50%;
-  background: #F5F7FA;
-  color: #6B7280;
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text-muted);
   padding: 0;
 }
 
@@ -753,23 +769,23 @@ watch(
   grid-template-columns: repeat(2, 1fr);
   padding: 8px 12px 0;
   gap: 6px;
-  background: #FFFFFF;
+  background: #101010;
 }
 
 .slip-tab {
   min-height: 38px;
   border-radius: 6px 6px 0 0;
-  border: 1px solid #E5E7EB;
-  background: #F5F7FA;
-  color: #6B7280;
+  border: 1px solid var(--border);
+  background: #171717;
+  color: var(--text-muted);
   font-size: 13px;
   font-weight: 800;
 }
 
 .slip-tab.active {
-  border-color: #003D6B;
-  background: rgba(0, 61, 107, 0.06);
-  color: #003D6B;
+  border-color: var(--border-gold-soft);
+  background: rgba(212, 175, 55, 0.13);
+  color: var(--primary-light);
 }
 
 .tab-count {
@@ -780,8 +796,8 @@ watch(
   height: 18px;
   margin-left: 6px;
   border-radius: 9px;
-  background: #003D6B;
-  color: #FFFFFF;
+  background: var(--primary);
+  color: #111;
   font-size: 11px;
   font-weight: 900;
 }
@@ -795,7 +811,7 @@ watch(
 
 .empty {
   text-align: center;
-  color: #6B7280;
+  color: var(--text-muted);
   padding: 26px 12px;
   font-size: 13px;
 }
@@ -806,15 +822,15 @@ watch(
   gap: 10px;
   align-items: center;
   padding: 11px 12px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
-  border-radius: 8px;
+  background: #151515;
+  border: 1px solid #292929;
+  border-radius: 7px;
   margin-bottom: 8px;
 }
 
 .slip-item--single {
-  border-color: #003D6B;
-  background: rgba(0, 61, 107, 0.03);
+  border-color: var(--border-gold-soft);
+  background: linear-gradient(180deg, rgba(212, 175, 55, 0.12), rgba(18, 18, 18, 0.94));
 }
 
 .item-main {
@@ -824,7 +840,7 @@ watch(
 .item-title {
   font-size: 13px;
   font-weight: 900;
-  color: #1A1A2E;
+  color: var(--text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -834,19 +850,19 @@ watch(
   margin-top: 4px;
   font-size: 12px;
   font-weight: 800;
-  color: #003D6B;
+  color: var(--primary-light);
 }
 
 .item-pick {
   margin-top: 3px;
   font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
   line-height: 1.35;
 }
 
 .item-odds,
 .item-side strong {
-  color: #003D6B;
+  color: var(--primary-light);
   font-size: 22px;
   font-weight: 900;
 }
@@ -860,7 +876,7 @@ watch(
 
 .remove {
   background: none;
-  color: #DC2626;
+  color: var(--danger);
   font-size: 12px;
   font-weight: 800;
   padding: 0;
@@ -875,12 +891,14 @@ watch(
   min-height: 48px;
   padding: 0 14px;
   border-radius: 8px;
-  background: #FFFFFF;
-  border: 1px solid #003D6B;
-  color: #003D6B;
+  background: linear-gradient(180deg, #4b370d 0%, #241905 100%);
+  border: 1px solid var(--primary-light);
+  color: #ffe892;
   font-size: 14px;
   font-weight: 900;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow:
+    0 0 0 1px rgba(255, 232, 146, 0.18) inset,
+    0 6px 18px rgba(212, 175, 55, 0.18);
 }
 
 .btn-add-parlay span {
@@ -890,27 +908,54 @@ watch(
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background: #003D6B;
-  color: #FFFFFF;
+  background: var(--primary-light);
+  color: #191100;
   font-size: 14px;
   line-height: 1;
 }
 
+.odds-warning {
+  margin: 0 16px 10px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: rgba(244, 162, 97, 0.12);
+  border: 1px solid rgba(244, 162, 97, 0.28);
+  color: var(--primary-light);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.odds-change {
+  font-weight: 700;
+}
+
+.odds-change.odds-up {
+  color: #6ee7a0;
+}
+
+.odds-change.odds-down {
+  color: #ff8b8b;
+}
+
+.odds-change.odds-suspended {
+  color: #ffb84d;
+}
+
 .warning,
 .error {
   margin: 0 0 10px;
   padding: 10px 11px;
   border-radius: 6px;
-  background: rgba(220, 38, 38, 0.06);
-  border: 1px solid rgba(220, 38, 38, 0.18);
-  color: #DC2626;
+  background: rgba(255, 77, 79, 0.12);
+  border: 1px solid rgba(255, 77, 79, 0.25);
+  color: #ff8b8b;
   font-size: 12px;
   line-height: 1.45;
 }
 
 .parlay-meta {
   margin: 8px 2px 10px;
-  color: #003D6B;
+  color: var(--primary-light);
   font-size: 12px;
   font-weight: 800;
 }
@@ -918,8 +963,8 @@ watch(
 .stake-area {
   margin: 12px 0 12px;
   padding: 12px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: #151515;
+  border: 1px solid #292929;
   border-radius: 8px;
 }
 
@@ -930,12 +975,12 @@ watch(
   justify-content: space-between;
   gap: 8px;
   font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
 }
 
 .stake-head strong,
 .return strong {
-  color: #003D6B;
+  color: var(--primary-light);
   font-size: 16px;
   font-weight: 900;
 }
@@ -945,17 +990,17 @@ watch(
   grid-template-columns: auto 1fr auto;
   align-items: center;
   margin-top: 10px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border-gold-soft);
   border-radius: 6px;
   overflow: hidden;
-  background: #F5F7FA;
+  background: #0c0c0c;
 }
 
 .currency {
   padding: 0 10px;
-  color: #6B7280;
+  color: var(--text-muted);
   font-size: 13px;
-  border-right: 1px solid #E5E7EB;
+  border-right: 1px solid #2d2d2d;
 }
 
 .stake-input-row input {
@@ -963,7 +1008,7 @@ watch(
   height: 42px;
   border: none;
   background: transparent;
-  color: #1A1A2E;
+  color: var(--text);
   font-size: 17px;
   font-weight: 800;
   padding: 0 10px;
@@ -982,7 +1027,7 @@ watch(
   width: 38px;
   height: 42px;
   background: transparent;
-  color: #6B7280;
+  color: var(--text-muted);
   padding: 0;
   font-size: 15px;
 }
@@ -1005,10 +1050,10 @@ watch(
 .number-key,
 .quick-stakes button {
   min-height: 52px;
-  border-radius: 6px;
-  background: #F5F7FA;
-  color: #1A1A2E;
-  border: 1px solid #E5E7EB;
+  border-radius: 5px;
+  background: #f4f1f6;
+  color: #221f26;
+  border: 1px solid rgba(255, 255, 255, 0.16);
   font-size: 26px;
   font-weight: 500;
 }
@@ -1020,11 +1065,10 @@ watch(
 
 .quick-stakes button {
   min-height: 50px;
-  background: #FFFFFF;
-  color: #1A1A2E;
+  background: #7b787d;
+  color: var(--text);
   font-size: 20px;
   font-weight: 800;
-  border: 1px solid #E5E7EB;
 }
 
 .return {
@@ -1032,7 +1076,7 @@ watch(
 }
 
 .success {
-  color: #059669;
+  color: var(--primary-light);
   font-size: 13px;
   margin: 0 0 8px;
 }
@@ -1043,9 +1087,9 @@ watch(
   grid-template-columns: 1fr;
   gap: 10px;
   padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
-  background: #FFFFFF;
-  border-top: 1px solid #E5E7EB;
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
+  background: rgba(14, 14, 14, 0.98);
+  border-top: 1px solid var(--border-gold-soft);
+  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
 }
 
 .drawer-foot--split {
@@ -1055,9 +1099,9 @@ watch(
 .btn-primary {
   width: 100%;
   min-height: 48px;
-  border-radius: 8px;
-  background: #003D6B;
-  color: #FFFFFF;
+  border-radius: 7px;
+  background: linear-gradient(180deg, var(--primary-light), var(--primary));
+  color: #111;
   font-size: 16px;
   font-weight: 900;
 }
@@ -1065,34 +1109,4 @@ watch(
 .btn-primary:disabled {
   opacity: 0.45;
 }
-
-.odds-warning {
-  margin: 0;
-  padding: 8px 14px;
-  font-size: 12px;
-  font-weight: 600;
-  background: rgba(234, 179, 8, 0.08);
-  color: #92400e;
-  border-bottom: 1px solid rgba(234, 179, 8, 0.2);
-}
-
-.odds-change {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-weight: 700;
-}
-
-.odds-up {
-  color: #16a34a;
-}
-
-.odds-down {
-  color: #dc2626;
-}
-
-.odds-suspended {
-  color: #6b7280;
-  text-decoration: line-through;
-}
 </style>
diff --git a/apps/player/src/components/CashBalanceChip.vue b/apps/player/src/components/CashBalanceChip.vue
index 916d31e..fe7dbea 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 60dc142..e2422ba 100644
--- a/apps/player/src/components/ConfirmDialog.vue
+++ b/apps/player/src/components/ConfirmDialog.vue
@@ -89,13 +89,13 @@ function onConfirm() {
 .confirm-overlay {
   position: fixed;
   inset: 0;
-  z-index: 1000;
+  z-index: 1100;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
-  background: rgba(0, 0, 0, 0.48);
+  background: rgba(0, 0, 0, 0.72);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
 }
@@ -103,18 +103,18 @@ function onConfirm() {
 .confirm-modal {
   width: 100%;
   max-width: 340px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
+  background: linear-gradient(165deg, #1a1810 0%, #121212 45%, #0a0a0a 100%);
+  border: 1px solid var(--border-gold-soft, rgba(200, 168, 78, 0.25));
   border-radius: 12px;
   padding: 22px 18px 16px;
-  box-shadow: 0 8px 32px rgba(0, 61, 107, 0.12);
+  box-shadow: 0 0 24px rgba(212, 175, 55, 0.08);
 }
 
 .confirm-title {
   margin: 0 0 10px;
   font-size: 17px;
   font-weight: 800;
-  color: var(--primary);
+  color: var(--gold, #c8a84e);
   text-align: center;
   line-height: 1.35;
 }
@@ -123,8 +123,9 @@ function onConfirm() {
   margin: 0 0 20px;
   font-size: 14px;
   line-height: 1.6;
-  color: var(--text-muted);
+  color: #c8c8c8;
   text-align: center;
+  white-space: pre-line;
 }
 
 .confirm-actions {
@@ -148,19 +149,19 @@ function onConfirm() {
 }
 
 .confirm-btn.cancel {
-  border: 1px solid var(--border);
+  border: 1px solid #333;
   background: transparent;
-  color: var(--text-muted);
+  color: #888;
 }
 
 .confirm-btn.confirm {
   border: none;
-  background: var(--primary);
-  color: #fff;
+  background: linear-gradient(135deg, #d4a017, #e8c84a);
+  color: #1a1a1a;
 }
 
 .confirm-btn.confirm.danger {
-  background: #dc2626;
+  background: linear-gradient(135deg, #c0392b, #e74c3c);
   color: #fff;
 }
 
diff --git a/apps/player/src/components/CustomerServicePanel.vue b/apps/player/src/components/CustomerServicePanel.vue
index 93404df..8a8a0a9 100644
--- a/apps/player/src/components/CustomerServicePanel.vue
+++ b/apps/player/src/components/CustomerServicePanel.vue
@@ -47,7 +47,7 @@ const iframeSrc = computed(() => {
   display: flex;
   flex-direction: column;
   margin: 0 -16px;
-  background: var(--bg-body);
+  background: #0d0d0d;
 }
 
 .cs-frame {
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/LocaleSwitcher.vue b/apps/player/src/components/LocaleSwitcher.vue
index ca97273..649fffe 100644
--- a/apps/player/src/components/LocaleSwitcher.vue
+++ b/apps/player/src/components/LocaleSwitcher.vue
@@ -68,6 +68,7 @@ onUnmounted(() => {
 <style scoped>
 .locale-switch {
   position: relative;
+  z-index: 120;
   display: inline-flex;
   flex-shrink: 0;
 }
@@ -101,7 +102,7 @@ onUnmounted(() => {
   position: absolute;
   top: calc(100% + 4px);
   right: 0;
-  z-index: 50;
+  z-index: 130;
   min-width: 100%;
   margin: 0;
   padding: 4px;
diff --git a/apps/player/src/components/MessageListPanel.vue b/apps/player/src/components/MessageListPanel.vue
index 756baa6..5c65d25 100644
--- a/apps/player/src/components/MessageListPanel.vue
+++ b/apps/player/src/components/MessageListPanel.vue
@@ -6,12 +6,15 @@ import { formatLocalMatchDateTime } from '@thebet365/shared';
 import GoldSpinner from './GoldSpinner.vue';
 import ConfirmDialog from './ConfirmDialog.vue';
 import { useAuthStore } from '../stores/auth';
-import { stripHtml } from '../utils/html';
 import { usePlayerMessages, type DepositMessagePayload, type PlayerMessage } from '../composables/usePlayerMessages';
+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,
@@ -194,11 +195,11 @@ onActivated(tryLoad);
 }
 
 .login-link {
-  border: 1px solid var(--border-active);
+  border: 1px solid var(--border-gold-soft);
   border-radius: 8px;
   padding: 8px 14px;
-  background: rgba(0, 61, 107, 0.06);
-  color: var(--primary);
+  background: rgba(212, 175, 55, 0.1);
+  color: var(--gold);
   font-size: 13px;
   font-weight: 600;
 }
@@ -229,7 +230,7 @@ onActivated(tryLoad);
 }
 
 .list-row.unread .title {
-  color: var(--primary-dark, #002847);
+  color: #fff;
   font-weight: 700;
 }
 
@@ -242,8 +243,8 @@ onActivated(tryLoad);
 }
 
 .list-row.unread .row-dot {
-  background: var(--primary);
-  box-shadow: 0 0 6px rgba(0, 61, 107, 0.35);
+  background: var(--gold);
+  box-shadow: 0 0 8px rgba(212, 175, 55, 0.45);
 }
 
 .row-main {
@@ -265,7 +266,7 @@ onActivated(tryLoad);
   flex: 1;
   min-width: 0;
   font-size: 15px;
-  color: #374151;
+  color: #d8d8d8;
   line-height: 1.35;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -278,13 +279,13 @@ onActivated(tryLoad);
   border-radius: 4px;
   font-size: 10px;
   font-weight: 600;
-  color: var(--text-muted);
-  background: rgba(0, 0, 0, 0.05);
+  color: #888;
+  background: rgba(255, 255, 255, 0.06);
 }
 
 .status-badge.unread {
-  color: var(--primary);
-  background: rgba(0, 61, 107, 0.08);
+  color: var(--gold);
+  background: rgba(212, 175, 55, 0.12);
 }
 
 .preview {
@@ -297,7 +298,7 @@ onActivated(tryLoad);
 
 .date {
   font-size: 12px;
-  color: var(--text-muted);
+  color: #777;
 }
 
 .chevron {
@@ -315,13 +316,13 @@ onActivated(tryLoad);
   border: none;
   border-radius: 8px;
   background: transparent;
-  color: #9ca3af;
+  color: #666;
   cursor: pointer;
 }
 
 .delete-btn:active:not(:disabled) {
-  background: rgba(220, 38, 38, 0.08);
-  color: #dc2626;
+  background: rgba(255, 80, 80, 0.12);
+  color: #f66;
 }
 
 .delete-btn svg {
@@ -340,8 +341,8 @@ onActivated(tryLoad);
   padding: 10px;
   border: 1px solid var(--border);
   border-radius: 8px;
-  background: var(--bg-card);
-  color: var(--primary);
+  background: #141414;
+  color: var(--gold);
   font-size: 13px;
 }
 </style>
diff --git a/apps/player/src/components/TeamEmblem.vue b/apps/player/src/components/TeamEmblem.vue
index 937a7b3..f7dee21 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/WalletStatsPanel.vue b/apps/player/src/components/WalletStatsPanel.vue
index a4edba0..666d432 100644
--- a/apps/player/src/components/WalletStatsPanel.vue
+++ b/apps/player/src/components/WalletStatsPanel.vue
@@ -1,264 +1,128 @@
 <script setup lang="ts">
-
 import { computed } from 'vue';
-
 import { useI18n } from 'vue-i18n';
-
-import { formatMoneyCompact, parseAmount } from '../utils/localeDisplay';
-
-
+import { parseAmount, formatMoneyCompact } from '../utils/localeDisplay';
 
 interface Transaction {
-
   transactionType: string;
-
   amount: string;
-
   frozenBefore?: string;
-
   frozenAfter?: string;
-
   createdAt: string;
-
   transactionId?: string;
-
 }
 
-
-
 const props = withDefaults(defineProps<{
-
   items: Transaction[];
-
   cashbackTotal?: string;
-
 }>(), {
-
   cashbackTotal: '0',
-
 });
-
 const { t, locale } = useI18n();
 
-
-
 const CASHBACK_TYPES = new Set(['CASHBACK', 'CASHBACK_DEPOSIT']);
 
-
-
 const stats = computed(() => {
-
   let income = 0;
-
   let expense = 0;
-
   let cashback = 0;
 
-
-
   for (const tx of props.items) {
-
     const amt = parseAmount(tx.amount);
-
     const isCb = CASHBACK_TYPES.has(tx.transactionType.toUpperCase());
-
     if (isCb) {
-
       cashback += Math.abs(amt);
-
     }
-
     if (amt >= 0) income += amt;
-
     else expense += Math.abs(amt);
-
   }
 
-
-
+  // Use server-side cashback total if provided (more accurate across all pages)
   if (props.cashbackTotal !== '0') {
-
     cashback = Math.abs(parseAmount(props.cashbackTotal));
-
   }
 
-
-
   const net = income - expense;
 
-
-
   return { income, expense, net, cashback };
-
 });
-
 </script>
 
-
-
 <template>
-
   <div class="wallet-stats-panel">
-
-    <div class="stats-grid">
-
-      <div class="stat-cell">
-
+    <div class="stats-row">
+      <div class="stat-item">
         <span class="stat-label">{{ t('wallet.stats_income') }}</span>
-
         <span class="stat-val income">{{ formatMoneyCompact(stats.income, locale) }}</span>
-
       </div>
-
-      <div class="stat-cell">
-
+      <div class="stat-item">
         <span class="stat-label">{{ t('wallet.stats_expense') }}</span>
-
         <span class="stat-val expense">{{ formatMoneyCompact(stats.expense, locale) }}</span>
-
       </div>
-
-      <div class="stat-cell">
-
-        <span class="stat-label">{{ t('wallet.stats_net') }}</span>
-
-        <span class="stat-val" :class="stats.net >= 0 ? 'income' : 'muted'">
-
-          {{ formatMoneyCompact(stats.net, locale) }}
-
-        </span>
-
-      </div>
-
-      <div class="stat-cell">
-
-        <span class="stat-label">{{ t('wallet.stats_cashback') }}</span>
-
-        <span class="stat-val">{{ formatMoneyCompact(stats.cashback, locale) }}</span>
-
-      </div>
-
     </div>
-
+    <div class="stats-divider" />
+    <div class="stats-row">
+      <div class="stat-item">
+        <span class="stat-label">{{ t('wallet.stats_net') }}</span>
+        <span class="stat-val" :class="stats.net >= 0 ? 'income' : 'expense'">
+          {{ formatMoneyCompact(stats.net, locale) }}
+        </span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-label">{{ t('wallet.stats_cashback') }}</span>
+        <span class="stat-val cashback">{{ formatMoneyCompact(stats.cashback, locale) }}</span>
+      </div>
+    </div>
   </div>
-
 </template>
 
-
-
 <style scoped>
-
 .wallet-stats-panel {
-
-  position: relative;
-
-  background: var(--gradient-card);
-
-  border: 1px solid rgba(255, 255, 255, 0.11);
-
+  background: var(--bg-card);
+  border: 1px solid var(--border);
   border-radius: var(--radius);
-
-  padding: 14px 16px;
-
-  margin-bottom: var(--space-section);
-
-  box-shadow: var(--shadow-card-sm);
-
-  overflow: hidden;
-
+  padding: 12px;
+  margin-bottom: 12px;
 }
 
-
-
-.wallet-stats-panel::before {
-
-  content: '';
-
-  position: absolute;
-
-  top: 0;
-
-  left: 10%;
-
-  right: 10%;
-
-  height: 1px;
-
-  background: var(--gradient-card-shine);
-
-  pointer-events: none;
-
-}
-
-
-
-.stats-grid {
-
-  display: grid;
-
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-
-  gap: 12px 16px;
-
-}
-
-
-
-.stat-cell {
-
+.stats-row {
   display: flex;
-
-  flex-direction: column;
-
-  gap: 4px;
-
-  min-width: 0;
-
+  align-items: center;
 }
 
-
+.stat-item {
+  flex: 1;
+  text-align: center;
+  min-width: 0;
+  padding: 4px 8px;
+}
 
 .stat-label {
-
-  font-size: 12px;
-
-  font-weight: 500;
-
-  color: var(--text-dim);
-
-  letter-spacing: 0;
-
+  display: block;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  letter-spacing: 0.03em;
+  margin-bottom: 2px;
 }
 
-
-
 .stat-val {
-
-  font-size: 15px;
-
-  font-weight: 600;
-
+  display: block;
+  font-size: 14px;
+  font-weight: 800;
   font-variant-numeric: tabular-nums;
-
   white-space: nowrap;
-
   overflow: hidden;
-
   text-overflow: ellipsis;
-
-  color: var(--text);
-
-  letter-spacing: -0.02em;
-
 }
 
+.stat-val.income { color: #3db865; }
+.stat-val.expense { color: #e05050; }
+.stat-val.cashback { color: #f0b90b; }
 
-
-.stat-val.income { color: var(--success); }
-
-.stat-val.expense { color: var(--text-muted); }
-
-.stat-val.muted { color: var(--text-muted); }
-
+.stats-divider {
+  height: 1px;
+  margin: 6px 8px;
+  background: linear-gradient(90deg, transparent, var(--border), transparent);
+}
 </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 9b47bb5..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>
@@ -75,8 +78,6 @@ function formatOdds(odds: string) {
 <style scoped>
 .cs-panel {
   padding: 6px 8px 0;
-  background: #EDF0F4;
-  border-top: 1px solid #D1D5DB;
 }
 
 .cs-panel--locked {
@@ -95,19 +96,21 @@ function formatOdds(odds: string) {
   text-align: center;
   font-size: 10px;
   font-weight: 700;
-  color: #4B5563;
+  color: var(--text-muted);
 }
 
 .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 {
@@ -118,38 +121,76 @@ function formatOdds(odds: string) {
   gap: 3px;
   min-height: 42px;
   padding: 6px 3px;
-  background: #FFFFFF;
-  border: 1px solid #CBD5E1;
-  border-radius: 8px;
+  background: #161616;
+  border: 1px solid #282828;
+  border-radius: 3px;
   text-align: center;
-  transition: border-color 0.15s ease, background 0.15s ease;
 }
 
 .score-card.selected {
-  border-color: #003D6B;
-  border-width: 2px;
-  background: rgba(0, 61, 107, 0.08);
+  border-color: var(--primary);
+  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 {
-  background: #E8EDF2;
-  border-color: #E5E7EB;
+  background: #111;
+  border-color: #333;
 }
 
 .score-card--locked .score-line,
 .score-card--locked .odds {
-  color: #6B7280;
+  color: #666;
 }
 
 .score-line {
   font-size: 11px;
   font-weight: 800;
-  color: #1A1A2E;
+  color: var(--text);
 }
 
 .odds {
   font-size: 10px;
   font-weight: 700;
-  color: #E8870A;
+  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 be697bf..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>
@@ -57,8 +79,91 @@ function onPick(id: string) {
 <style scoped>
 .wrap {
   padding: 6px 8px 8px;
-  background: #EDF0F4;
-  border-top: 1px solid #D1D5DB;
+  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 {
@@ -79,40 +184,46 @@ function onPick(id: string) {
   gap: 2px;
   min-height: 44px;
   padding: 6px 4px;
-  border-radius: 8px;
-  background: #FFFFFF;
-  border: 1px solid #CBD5E1;
+  border-radius: 4px;
+  background: #141414;
+  border: 1px solid #262626;
   text-align: center;
-  transition: border-color 0.15s ease, background 0.15s ease;
 }
 
 .odds-btn.selected {
-  border-color: #003D6B;
-  border-width: 2px;
-  background: rgba(0, 61, 107, 0.08);
+  border-color: var(--primary);
+  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 {
-  background: #E8EDF2;
-  border-color: #E5E7EB;
+  background: #111;
+  border-color: #333;
   cursor: not-allowed;
 }
 
 .odds-btn--locked .label,
 .odds-btn--locked .odds {
-  color: #6B7280;
+  color: #666;
 }
 
 .label {
-  font-size: 10px;
-  color: #4B5563;
+  font-size: 9px;
+  color: var(--text-muted);
   line-height: 1.15;
-  font-weight: 600;
 }
 
 .odds {
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 800;
-  color: #E8870A;
+  color: var(--primary-light);
 }
 </style>
diff --git a/apps/player/src/components/match-detail/MarketTypeTile.vue b/apps/player/src/components/match-detail/MarketTypeTile.vue
index 16d4088..640047c 100644
--- a/apps/player/src/components/match-detail/MarketTypeTile.vue
+++ b/apps/player/src/components/match-detail/MarketTypeTile.vue
@@ -98,6 +98,17 @@ const { t } = useI18n();
   border: 1px solid rgba(240, 180, 41, 0.35);
 }
 
+.row-status {
+  flex-shrink: 0;
+  font-size: 9px;
+  font-weight: 700;
+  color: #f0b429;
+  padding: 2px 6px;
+  border-radius: 3px;
+  background: rgba(240, 180, 41, 0.12);
+  border: 1px solid rgba(240, 180, 41, 0.35);
+}
+
 .row.expanded .row-label {
   color: #003D6B;
 }
diff --git a/apps/player/src/components/outright/OutrightBetModal.vue b/apps/player/src/components/outright/OutrightBetModal.vue
index f40151d..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>
@@ -371,7 +425,7 @@ function formatOdds(odds: string) {
   position: fixed;
   inset: 0;
   z-index: 200;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.72);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -383,12 +437,12 @@ function formatOdds(odds: string) {
   position: relative;
   width: 100%;
   max-width: 300px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
-  border-radius: 8px;
+  background: linear-gradient(165deg, #1a1810 0%, #121212 45%, #0a0a0a 100%);
+  border: 1px solid var(--border-gold-soft);
+  border-radius: var(--radius);
   padding: 18px 16px 16px;
   text-align: center;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow), 0 0 24px rgba(212, 175, 55, 0.08);
 }
 
 .close-x {
@@ -398,8 +452,8 @@ function formatOdds(odds: string) {
   width: 28px;
   height: 28px;
   border-radius: 50%;
-  background: #F5F7FA;
-  color: #6B7280;
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text-muted);
   font-size: 14px;
   line-height: 1;
 }
@@ -407,7 +461,7 @@ function formatOdds(odds: string) {
 .hint {
   font-size: 12px;
   font-weight: 600;
-  color: #6B7280;
+  color: var(--text-muted);
   margin-bottom: 12px;
   letter-spacing: 0.04em;
 }
@@ -430,22 +484,22 @@ function formatOdds(odds: string) {
   height: 32px;
   object-fit: cover;
   border-radius: 4px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
 }
 
 .team {
   font-size: 20px;
   font-weight: 900;
-  color: #1A1A2E;
+  color: var(--primary-light);
   letter-spacing: 0.02em;
 }
 
 .odds-badge {
   display: inline-block;
   padding: 3px 10px;
-  background: #F8971F;
-  border: 1px solid rgba(248, 151, 31, 0.3);
-  color: #FFFFFF;
+  background: rgba(198, 40, 40, 0.85);
+  border: 1px solid rgba(255, 120, 120, 0.35);
+  color: #fff;
   font-size: 13px;
   font-weight: 800;
   border-radius: 4px;
@@ -479,7 +533,7 @@ function formatOdds(odds: string) {
 
 .event-title {
   font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
   margin-bottom: 12px;
   line-height: 1.4;
   padding: 0 4px;
@@ -491,28 +545,28 @@ function formatOdds(odds: string) {
   align-items: center;
   padding: 8px 10px;
   margin-bottom: 12px;
-  background: #F5F7FA;
-  border: 1px solid #E5E7EB;
-  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.35);
+  border: 1px solid var(--border);
+  border-radius: 6px;
 }
 
 .balance-label {
   font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
   font-weight: 600;
 }
 
 .balance-value {
   font-size: 14px;
   font-weight: 800;
-  color: #003D6B;
+  color: var(--primary-light);
 }
 
 .stake-label {
   display: block;
   text-align: left;
   font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
   font-weight: 600;
   margin-bottom: 6px;
 }
@@ -521,10 +575,10 @@ function formatOdds(odds: string) {
   width: 100%;
   padding: 11px 12px;
   margin-bottom: 8px;
-  border-radius: 8px;
-  border: 1px solid #E5E7EB;
-  background: #F5F7FA;
-  color: #1A1A2E;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: #0a0a0a;
+  color: var(--text);
   font-size: 18px;
   font-weight: 800;
   text-align: center;
@@ -532,12 +586,12 @@ function formatOdds(odds: string) {
 }
 
 .stake-input:focus {
-  border-color: #003D6B;
-  box-shadow: 0 0 0 1px rgba(0, 61, 107, 0.15);
+  border-color: var(--border-gold-soft);
+  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.15);
 }
 
 .stake-input::placeholder {
-  color: #6B7280;
+  color: #555;
   font-weight: 500;
   font-size: 14px;
 }
@@ -551,34 +605,33 @@ function formatOdds(odds: string) {
 .chip {
   flex: 1;
   padding: 6px 4px;
-  border-radius: 8px;
-  border: 1px solid #E5E7EB;
-  background: #FFFFFF;
-  color: #6B7280;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: #141414;
+  color: var(--text-muted);
   font-size: 11px;
   font-weight: 700;
-  transition: border-color 0.15s ease, background 0.15s ease;
 }
 
 .chip:active {
-  border-color: #003D6B;
-  color: #003D6B;
-  background: rgba(0, 61, 107, 0.06);
+  border-color: var(--border-gold-soft);
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.08);
 }
 
 .est-return {
   font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
   margin-bottom: 12px;
 }
 
 .est-value {
-  color: #003D6B;
+  color: var(--primary-light);
   font-weight: 800;
 }
 
 .error {
-  color: #DC2626;
+  color: var(--danger);
   font-size: 12px;
   font-weight: 600;
   margin-bottom: 10px;
@@ -592,22 +645,19 @@ function formatOdds(odds: string) {
 
 .btn-cancel {
   padding: 10px;
-  border-radius: 8px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
-  color: #6B7280;
+  border-radius: 6px;
+  background: #1a1a1a;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
   font-size: 14px;
   font-weight: 700;
 }
 
 .btn-confirm {
   padding: 10px;
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 14px;
   font-weight: 800;
-  background: #003D6B;
-  color: #FFFFFF;
-  border: none;
 }
 
 .btn-confirm:disabled {
@@ -619,9 +669,9 @@ function formatOdds(odds: string) {
   height: 44px;
   margin: 0 auto 8px;
   border-radius: 50%;
-  border: 2px solid #059669;
-  background: rgba(5, 150, 105, 0.1);
-  color: #059669;
+  border: 2px solid rgba(46, 158, 94, 0.8);
+  background: rgba(46, 158, 94, 0.12);
+  color: #4ade80;
   font-size: 24px;
   font-weight: 900;
   line-height: 40px;
@@ -630,40 +680,37 @@ function formatOdds(odds: string) {
 .success-title {
   font-size: 16px;
   font-weight: 800;
-  color: #1A1A2E;
+  color: var(--primary-light);
   margin-bottom: 10px;
 }
 
 .summary {
   margin: 12px 0 14px;
   padding: 10px;
-  background: #F5F7FA;
-  border: 1px solid #E5E7EB;
-  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.35);
+  border: 1px solid var(--border);
+  border-radius: 6px;
 }
 
 .summary-row {
   display: flex;
   justify-content: space-between;
   font-size: 13px;
-  color: #6B7280;
+  color: var(--text-muted);
   padding: 4px 0;
 }
 
 .summary-row + .summary-row {
   margin-top: 4px;
   padding-top: 8px;
-  border-top: 1px solid #E5E7EB;
+  border-top: 1px solid var(--border);
 }
 
 .btn-done {
   width: 100%;
   padding: 11px;
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 14px;
   font-weight: 800;
-  background: #003D6B;
-  color: #FFFFFF;
-  border: none;
 }
 </style>
diff --git a/apps/player/src/components/outright/OutrightEventSection.vue b/apps/player/src/components/outright/OutrightEventSection.vue
index 49058ee..dfb646a 100644
--- a/apps/player/src/components/outright/OutrightEventSection.vue
+++ b/apps/player/src/components/outright/OutrightEventSection.vue
@@ -96,11 +96,10 @@ const isSettled = computed(() => props.event.bettingOpen === false || props.even
   position: relative;
   isolation: isolate;
   margin-bottom: 12px;
-  border: 1px solid #E5E7EB;
-  border-radius: 8px;
-  background: #FFFFFF;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-card);
   overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 }
 
 .event-head {
@@ -123,7 +122,7 @@ const isSettled = computed(() => props.event.bettingOpen === false || props.even
   position: absolute;
   inset: 0;
   background: v-bind(matchCardBg) center / 100% 100% no-repeat;
-  opacity: 0.08;
+  opacity: 0.25;
   z-index: -1;
   pointer-events: none;
 }
@@ -133,8 +132,8 @@ const isSettled = computed(() => props.event.bettingOpen === false || props.even
   width: 26px;
   height: 26px;
   border-radius: 50%;
-  background: #F5F7FA;
-  border: 1px solid #E5E7EB;
+  background: #141414;
+  border: 1px solid var(--border-gold-soft);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -142,11 +141,11 @@ const isSettled = computed(() => props.event.bettingOpen === false || props.even
 }
 
 .toggle-icon.open {
-  border-color: #003D6B;
+  border-color: var(--primary-light);
 }
 
 .toggle-mark {
-  color: #003D6B;
+  color: var(--primary-light);
   font-size: 17px;
   font-weight: 900;
   line-height: 1;
@@ -171,8 +170,8 @@ const isSettled = computed(() => props.event.bettingOpen === false || props.even
   flex-shrink: 0;
   font-size: 10px;
   font-weight: 800;
-  color: #F8971F;
-  border: 1px solid rgba(248, 151, 31, 0.45);
+  color: #c9a227;
+  border: 1px solid rgba(201, 162, 39, 0.45);
   border-radius: 999px;
   padding: 1px 7px;
   line-height: 1.4;
@@ -181,21 +180,21 @@ const isSettled = computed(() => props.event.bettingOpen === false || props.even
 .event-title {
   font-size: 13px;
   font-weight: 800;
-  color: #003D6B;
+  color: var(--primary-light);
   line-height: 1.35;
 }
 
 .event-league {
   font-size: 11px;
   font-weight: 600;
-  color: #6B7280;
+  color: #888;
   line-height: 1.3;
 }
 
 .event-meta {
   font-size: 11px;
   font-weight: 600;
-  color: #6B7280;
+  color: #666;
 }
 
 .event-saishi {
@@ -205,7 +204,7 @@ const isSettled = computed(() => props.event.bettingOpen === false || props.even
   max-width: 40px;
   object-fit: contain;
   padding-left: 8px;
-  border-left: 1px solid #E5E7EB;
+  border-left: 1px solid #2a2a2a;
 }
 
 .options-scroll {
@@ -214,7 +213,7 @@ const isSettled = computed(() => props.event.bettingOpen === false || props.even
   -webkit-overflow-scrolling: touch;
   padding: 8px 2px 2px;
   scrollbar-width: thin;
-  scrollbar-color: #E5E7EB transparent;
+  scrollbar-color: #333 transparent;
 }
 
 .options-grid {
diff --git a/apps/player/src/components/outright/OutrightOptionCard.vue b/apps/player/src/components/outright/OutrightOptionCard.vue
index 6a3f736..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')"
   >
@@ -85,21 +87,27 @@ onUnmounted(() => {
   width: 100%;
   min-width: 0;
   padding: 8px 4px 6px;
-  border-radius: 8px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  border-radius: 6px;
+  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
+  border: 1px solid rgba(140, 140, 140, 0.35);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
   text-align: center;
   overflow: hidden;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.option-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(100, 100, 100, 0.08) 0%, transparent 50%, rgba(80, 80, 80, 0.05) 100%);
+  pointer-events: none;
 }
 
 .option-card:active {
-  border-color: #003D6B;
-  box-shadow: 0 0 0 1px rgba(0, 61, 107, 0.12);
+  border-color: var(--border-gold-soft);
 }
 
 .option-card--disabled {
@@ -108,13 +116,12 @@ onUnmounted(() => {
 }
 
 .option-card--disabled:active {
-  border-color: #E5E7EB;
-  box-shadow: none;
+  border-color: rgba(140, 140, 140, 0.35);
 }
 
 .option-card--winner {
-  border-color: rgba(248, 151, 31, 0.75);
-  box-shadow: 0 0 0 1px rgba(248, 151, 31, 0.25);
+  border-color: rgba(201, 162, 39, 0.75);
+  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.25);
 }
 
 .flag {
@@ -137,7 +144,7 @@ onUnmounted(() => {
 .name {
   font-size: 11px;
   font-weight: 800;
-  color: #1A1A2E;
+  color: var(--primary-light);
   line-height: 1.2;
   width: 100%;
   overflow: hidden;
@@ -148,6 +155,6 @@ onUnmounted(() => {
 .odds {
   font-size: 11px;
   font-weight: 800;
-  color: #F8971F;
+  color: var(--primary-light);
 }
 </style>
diff --git a/apps/player/src/components/outright/OutrightPanel.vue b/apps/player/src/components/outright/OutrightPanel.vue
index ca66d6a..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 });
   },
 );
 
@@ -182,7 +137,7 @@ function closeModal() {
   padding: 0 4px;
   font-size: 12px;
   font-weight: 600;
-  color: #6B7280;
+  color: var(--text-muted);
   line-height: 1.4;
 }
 
@@ -190,11 +145,11 @@ function closeModal() {
   margin: 0 0 12px;
   padding: 8px 10px;
   border-radius: 8px;
-  background: rgba(248, 151, 31, 0.08);
-  border: 1px solid rgba(248, 151, 31, 0.22);
+  background: rgba(201, 162, 39, 0.08);
+  border: 1px solid rgba(201, 162, 39, 0.22);
   font-size: 12px;
   font-weight: 600;
-  color: #F8971F;
+  color: #c9a227;
   line-height: 1.45;
 }
 
@@ -205,7 +160,7 @@ function closeModal() {
 .state,
 .empty {
   text-align: center;
-  color: #6B7280;
+  color: var(--text-muted);
   padding: 48px 20px;
   font-weight: 600;
 }
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 8a5ca22..bea3d41 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',
@@ -35,6 +53,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',
@@ -42,6 +61,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',
@@ -63,6 +85,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',
@@ -82,6 +105,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',
@@ -119,6 +144,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',
@@ -259,6 +287,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',
@@ -315,6 +357,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',
@@ -327,6 +378,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',
@@ -336,8 +391,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',
@@ -449,24 +526,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}',
@@ -475,11 +565,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 9f0b541..f81d0d5 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',
@@ -41,6 +65,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',
@@ -48,6 +73,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',
@@ -69,6 +97,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',
@@ -88,6 +117,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',
@@ -125,6 +156,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',
@@ -265,6 +299,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',
@@ -321,6 +369,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',
@@ -333,6 +390,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',
@@ -342,8 +403,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',
@@ -455,24 +538,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}',
@@ -481,11 +577,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 df1be32..bb39f77 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: '热门',
@@ -35,6 +53,7 @@ export default {
     empty: '暂无公告',
     not_found: '公告不存在或已下线',
     view_all: '查看全部公告',
+    select_hint: '请选择一条公告查看详情',
     type_notice: '公告',
     type_ticker: '跑马灯',
     type_banner: 'Banner',
@@ -42,6 +61,9 @@ export default {
     go_link: '前往页面',
     open_link: '打开链接',
     back: '返回',
+    center_desc: '平台公告、活动与维护通知一览',
+    total_count: '共 {count} 条',
+    read_more: '查看详情',
   },
   search: {
     placeholder: '搜索球队或联赛',
@@ -63,6 +85,7 @@ export default {
     not_found: '消息不存在',
     view_all: '返回消息列表',
     back: '返回',
+    select_hint: '请选择一条消息查看详情',
     mark_all_read: '全部已读',
     load_more: '加载更多',
     delete: '删除',
@@ -82,6 +105,8 @@ export default {
     view_recharge_history: '查看充值记录',
     unread_badge: '{count} 条未读',
     open_inbox: '打开消息中心',
+    tab_inbox: '收件箱',
+    tab_support: '客服',
   },
   inbox_hub: {
     title: '消息与客服',
@@ -118,7 +143,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: '输',
@@ -259,6 +287,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: '充值',
@@ -315,6 +357,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: '返水明细',
@@ -327,6 +378,10 @@ export default {
     empty: '暂无返水记录',
     empty_hint: '返水由后台按周期统计并发放，到账后可在此查看。',
     ledger_hint: '每笔返水确认后，账单中会有对应的「返水入账」流水，金额一致。',
+    match: '赛事',
+    amount: '返水金额',
+    rate: '返水比例',
+    batch_no: '批次号',
   },
   bet: {
     bet_slip: '投注单',
@@ -336,8 +391,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: '已结束',
@@ -449,24 +526,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}',
@@ -475,11 +565,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 31e3270..0ae8a4e 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, ref, watch } from '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();
@@ -40,6 +42,7 @@ const isDetailPage = computed(() => {
   );
 });
 
+const showHeader = computed(() => !isDetailPage.value);
 const showHeader = computed(() => !isDetailPage.value);
 const showAnnouncement = computed(
   () => !isDetailPage.value && !route.path.startsWith('/profile') && !route.path.startsWith('/announcements'),
@@ -68,14 +71,36 @@ const { unreadCount, refreshUnreadCount, resetMessagesState } = usePlayerMessage
 const mainRef = ref<HTMLElement | null>(null);
 const tabScrollTops = new Map<string, number>();
 const primaryAnnouncementId = computed(() => announcementItems.value[0]?.id ?? '');
+const bottomNavHidden = ref(false);
+let lastMainScrollTop = 0;
 
-watch(locale, (next, prev) => {
-  if (prev && next !== prev) void loadPlayerHome(true);
+function onMainScroll() {
+  const el = mainRef.value;
+  if (!el || !showBottomNav.value) return;
+
+  const scrollTop = el.scrollTop;
+  const delta = scrollTop - lastMainScrollTop;
+
+  if (scrollTop <= 8) {
+    bottomNavHidden.value = false;
+  } else if (delta > 10) {
+    bottomNavHidden.value = true;
+  } else if (delta < -10) {
+    bottomNavHidden.value = false;
+  }
+
+  lastMainScrollTop = scrollTop;
+}
+
+watch(showBottomNav, (visible) => {
+  if (!visible) bottomNavHidden.value = false;
 });
 
 watch(
   () => route.fullPath,
   (_path, oldPath) => {
+    lastMainScrollTop = 0;
+    bottomNavHidden.value = false;
     const el = mainRef.value;
     if (!el) return;
     if (oldPath) tabScrollTops.set(oldPath, el.scrollTop);
@@ -84,10 +109,22 @@ watch(
 );
 
 const balanceRefreshPaths = ['/profile', '/wallet', '/bets'];
+let mainScrollEl: HTMLElement | null = null;
+
+watch(locale, (next, prev) => {
+  if (prev && next !== prev) void loadPlayerHome(true);
+});
 
 onMounted(() => {
   if (auth.user?.locale) void initFromUser(auth.user.locale);
   bindProfileVisibilityRefresh();
+  mainScrollEl = mainRef.value;
+  mainScrollEl?.addEventListener('scroll', onMainScroll, { passive: true });
+});
+
+onUnmounted(() => {
+  mainScrollEl?.removeEventListener('scroll', onMainScroll);
+  mainScrollEl = null;
 });
 
 watch(
@@ -125,7 +162,8 @@ watch(
 </script>
 
 <template>
-  <div class="layout">
+  <DesktopShell v-if="isDesktop" />
+  <div v-else class="layout">
     <header v-if="showHeader" class="header">
       <svg class="logo" viewBox="0 0 130 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="TheBet365">
         <text x="0" y="18" font-family="'Inter','SF Pro Display',system-ui,sans-serif" font-size="11" font-weight="800" fill="#6B7280" letter-spacing="0.14em">THE</text>
@@ -138,7 +176,7 @@ watch(
           class="support-btn"
           :aria-label="inboxEnabled && unreadCount ? t('messages.unread_badge', { count: unreadCount }) : t(hubOpenLabelKey)"
         >
-          <svg class="support-icon" viewBox="0 0 24 24" aria-hidden="true">
+          <svg class="hub-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"
@@ -181,7 +219,12 @@ watch(
       </RouterView>
     </main>
 
-    <nav v-if="showBottomNav" class="bottom-nav" aria-label="Main">
+    <nav
+      v-if="showBottomNav"
+      class="bottom-nav"
+      :class="{ 'bottom-nav--hidden': bottomNavHidden }"
+      aria-label="Main"
+    >
       <RouterLink to="/" class="nav-item" :class="{ active: route.path === '/' }">
         <BottomNavIcon name="home" />
         <span class="nav-label">{{ t('nav.home') }}</span>
@@ -208,7 +251,10 @@ watch(
       </RouterLink>
     </nav>
 
-    <BackToTopButton :scroll-el="mainRef" :above-nav="showBottomNav" />
+    <BackToTopButton
+      :scroll-el="mainRef"
+      :above-nav="showBottomNav && !bottomNavHidden"
+    />
 
     <BetSlipDrawer v-model="slip.drawerOpen" />
   </div>
@@ -216,23 +262,26 @@ watch(
 
 <style scoped>
 .layout {
+  position: fixed;
+  inset: 0;
   display: flex;
   flex-direction: column;
-  height: 100%;
-  min-height: 100dvh;
   overflow: hidden;
   background: var(--bg-body);
+  box-sizing: border-box;
+  padding-top: var(--safe-top);
 }
 .header {
   flex-shrink: 0;
+  position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 12px;
-  height: 48px;
+  padding: 8px 12px;
+  min-height: var(--player-header-h, 48px);
   background: #FFFFFF;
   border-bottom: 1px solid var(--border);
-  z-index: 110;
+  z-index: 120;
 }
 .logo {
   height: 22px;
@@ -290,7 +339,7 @@ watch(
   border-color: var(--border-active);
 }
 
-.support-icon {
+.support-icon, .hub-icon {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
@@ -335,6 +384,7 @@ watch(
   flex-shrink: 0;
   z-index: 105;
   background: #FFFFFF;
+  position: relative;
   border-bottom: 1px solid var(--border);
 }
 
@@ -347,18 +397,32 @@ watch(
   padding: 10px 14px 0;
 }
 .main.has-nav {
-  padding-bottom: 16px;
+  padding-bottom: calc(var(--player-bottom-nav-h) + var(--safe-bottom));
 }
 .main.main--detail {
   padding-top: 0;
 }
 
 .bottom-nav {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
   display: flex;
   background: #FFFFFF;
+  box-sizing: border-box;
+  min-height: calc(var(--player-bottom-nav-h) + var(--safe-bottom));
+  padding-bottom: var(--safe-bottom);
   border-top: 1px solid var(--border);
   z-index: 100;
-  padding-bottom: env(safe-area-inset-bottom, 0);
+  transition: transform 0.28s ease, opacity 0.28s ease;
+  will-change: transform;
+}
+
+.bottom-nav--hidden {
+  transform: translateY(100%);
+  opacity: 0;
+  pointer-events: none;
 }
 .nav-item {
   flex: 1;
diff --git a/apps/player/src/main.ts b/apps/player/src/main.ts
index a34e5e3..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,
@@ -11,6 +12,11 @@ import {
   type PlayerLocale,
 } from './i18n/index.ts';
 
+/** iOS Safari：阻止双指捏合缩放，配合 viewport 保持页面比例稳定 */
+if (typeof window !== 'undefined') {
+  document.addEventListener('gesturestart', (event) => event.preventDefault());
+}
+
 async function bootstrap() {
   const initialLocale = readStoredLocale();
   const initialMessages = await loadLocaleMessages(initialLocale);
diff --git a/apps/player/src/router/index.ts b/apps/player/src/router/index.ts
index f4be67c..e685cbb 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: '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 82ce948..df8371a 100644
--- a/apps/player/src/styles.css
+++ b/apps/player/src/styles.css
@@ -26,6 +26,15 @@
   --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
+  --shadow-gold: 0 2px 12px rgba(0, 61, 107, 0.12);
+  --glow-gold: 0 0 8px rgba(0, 61, 107, 0.12);
+  --gradient-gold: linear-gradient(180deg, #F0F4F8 0%, #FFFFFF 100%);
+  --gradient-gold-border: linear-gradient(180deg, #E5E7EB 0%, #FFFFFF 100%);
+  --gradient-card: linear-gradient(160deg, #FFFFFF 0%, #F5F7FA 100%);
+  --player-header-h: 48px;
+  --player-bottom-nav-h: 54px;
+  --safe-top: env(safe-area-inset-top, 0px);
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
 }
 
 /* Gold kept only for odds/betting accent as orange-amber */
@@ -50,6 +59,22 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+@media (min-width: 1024px) {
+  body {
+    background-color: var(--bg-body);
+    background-image: url('./assets/images/pcbg-light.webp');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+    background-attachment: fixed;
+  }
+}
+
+#app {
+  min-height: 100%;
+  min-height: -webkit-fill-available;
+}
+
 a { color: inherit; text-decoration: none; }
 button { cursor: pointer; border: none; font-family: inherit; }
 
@@ -62,7 +87,7 @@ input {
   padding: 12px 14px;
   border-radius: var(--radius-sm);
   width: 100%;
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 500;
   transition: border-color 0.2s, box-shadow 0.2s;
 }
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 9e12397..da846fb 100644
--- a/apps/player/src/views/AnnouncementDetailView.vue
+++ b/apps/player/src/views/AnnouncementDetailView.vue
@@ -1,323 +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: var(--bg-card);
-  color: var(--primary);
-  font-size: 22px;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.page-header h1 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 700;
-  color: var(--primary-dark, #002847);
-}
-
-.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-active);
-  border-radius: 8px;
-  padding: 8px 14px;
-  background: rgba(0, 61, 107, 0.06);
-  color: var(--primary);
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.detail-article {
-  margin: 0;
-  padding: 0;
-}
-
-.detail-hero {
-  margin: 16px -16px 0;
-  padding: 0;
-  background: var(--bg-body);
-  line-height: 0;
-  border-radius: 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: var(--primary-dark, #002847);
-}
-
-.detail-body {
-  margin: 0;
-  font-size: 15px;
-  line-height: 1.75;
-  color: #374151;
-}
-
-.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(--primary);
-  color: #fff;
-  font-size: 14px;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.link-action--outline {
-  background: transparent;
-  border: 1px solid var(--border-active);
-  color: var(--primary);
-}
-</style>
diff --git a/apps/player/src/views/AnnouncementListView.vue b/apps/player/src/views/AnnouncementListView.vue
index 84f7c58..26fa6db 100644
--- a/apps/player/src/views/AnnouncementListView.vue
+++ b/apps/player/src/views/AnnouncementListView.vue
@@ -1,179 +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: var(--bg-card);
-  color: var(--primary);
-  font-size: 22px;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.page-header h1 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 700;
-  color: var(--primary-dark, #002847);
-}
-
-.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: var(--primary-dark, #002847);
-  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 53e0b16..436662d 100644
--- a/apps/player/src/views/BetDetailView.vue
+++ b/apps/player/src/views/BetDetailView.vue
@@ -1,629 +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 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 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(-parseFloat(String(bet.value.stake ?? 0)), locale.value);
-  return formatMoney(bet.value.actualReturn ?? bet.value.potentialReturn, locale.value);
-});
-
-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 myPick = computed(() => {
-  if (!bet.value || bet.value.isParlay) return '';
-  const raw = bet.value.pickLabel ?? '';
-  if (locale.value === 'zh-CN' || !raw) return raw;
-  const ci = raw.indexOf(': ');
-  if (ci < 0) return raw;
-  return raw.slice(0, ci + 2) + translateSel(raw.slice(ci + 2));
-});
-
-const matchPhase = computed(
-  (): MatchPhase | null => bet.value?.matchPhase ?? null,
-);
-
-const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
+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>
-
-    <!-- back bar -->
-    <div class="top-bar">
-      <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>
-
-    <template v-else>
-      <!-- status hero -->
-      <div class="hero" :class="statusKey">
-        <span class="hero-status">{{ statusLabel }}</span>
-        <span class="hero-return">{{ returnAmount }}</span>
-        <span class="hero-return-label">
-          {{ statusKey === 'pending' ? t('history.est_return') : t('history.return') }}
-        </span>
-      </div>
-
-      <!-- match / parlay title -->
-      <section class="section">
-        <div class="section-head">
-          <span class="league-tag">
-            {{ bet.isParlay ? t('history.parlay_league') : (bet.leagueName || t('history.league_default')) }}
-          </span>
-          <span class="placed-time">{{ placedDateTime }}</span>
-        </div>
-        <div class="match-name">{{ matchTitle }}</div>
-
-        <!-- single bet: score comparison -->
-        <div v-if="!bet.isParlay" class="score-block" :class="{ 'score-block--phase': matchPhase && matchPhase !== 'open' }">
-          <StatusWatermark
-            v-if="matchPhase && matchPhase !== 'open'"
-            :label="matchPhaseText"
-            :variant="matchPhaseVariant(matchPhase)"
-            size="md"
-          />
-          <!-- my pick row -->
-          <div class="row-label-val">
-            <span class="row-label">{{ t('history.my_pick') }}</span>
-            <span class="row-val pick">{{ myPick }}</span>
-          </div>
-          <!-- scores -->
-          <div v-if="bet.matchScore?.ft || bet.matchScore?.ht" class="score-chips">
-            <div v-if="bet.matchScore.ft" class="score-item">
-              <span class="score-period">{{ t('history.ft') }}</span>
-              <span class="score-value">{{ bet.matchScore.ft }}</span>
-            </div>
-            <div v-if="bet.matchScore.ht" class="score-item">
-              <span class="score-period">{{ t('history.ht') }}</span>
-              <span class="score-value muted">{{ bet.matchScore.ht }}</span>
-            </div>
-          </div>
-          <div v-else-if="statusKey === 'pending'" class="no-score">{{ t('history.awaiting_result') }}</div>
-        </div>
-      </section>
-
-      <!-- parlay legs -->
-      <section v-if="bet.isParlay && bet.legs?.length" class="section">
-        <div class="section-title">{{ t('history.legs') }}</div>
-        <div class="legs-list">
-          <div v-for="(leg, i) in bet.legs" :key="i" class="leg-row" :class="legStatusKey(leg.resultStatus)">
-            <div class="leg-left">
-              <span class="leg-num" :class="legStatusKey(leg.resultStatus)">{{ i + 1 }}</span>
-              <div class="leg-body">
-                <span class="leg-match">{{ leg.matchTitle }}</span>
-                <span class="leg-pick-line">
-                  {{ leg.marketLabel }}: {{ translateSel(leg.selectionName) }}
-                </span>
-                <div v-if="leg.score?.ft || leg.score?.ht" class="leg-scores">
-                  <span v-if="leg.score.ft">{{ t('history.ft') }} {{ leg.score.ft }}</span>
-                  <span v-if="leg.score.ht" class="muted-score">{{ t('history.ht') }} {{ leg.score.ht }}</span>
-                </div>
-              </div>
-            </div>
-            <div class="leg-right">
-              <span class="leg-odds-val">{{ formatOdds(leg.odds) }}</span>
-              <span v-if="leg.resultStatus" class="leg-result-badge" :class="legStatusKey(leg.resultStatus)">
-                {{ t(`history.status_${legStatusKey(leg.resultStatus)}`) }}
-              </span>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- bet summary -->
-      <section class="section">
-        <div class="section-title">{{ t('history.summary') }}</div>
-        <div class="summary-rows">
-          <div class="sum-row">
-            <span>{{ t('history.stake') }}</span>
-            <span>{{ formatMoney(bet.stake, locale) }}</span>
-          </div>
-          <div v-if="bet.totalOdds" class="sum-row">
-            <span>{{ t('history.odds') }}</span>
-            <span class="odds-val">{{ formatOdds(bet.totalOdds) }}</span>
-          </div>
-          <div class="sum-row">
-            <span>{{ statusKey === 'pending' ? t('history.est_return') : t('history.return') }}</span>
-            <span :class="{ 'amt-won': statusKey === 'won', 'amt-pending': statusKey === 'pending', 'amt-lost': statusKey === 'lost' }">
-              {{ returnAmount }}
-            </span>
-          </div>
-          <div class="sum-row muted">
-            <span>{{ t('history.bet_no') }}</span>
-            <span class="bet-no-val">{{ bet.betNo }}</span>
-          </div>
-        </div>
-      </section>
-    </template>
-  </div>
+  <DesktopBetDetailView v-if="isDesktop" />
+  <MobileBetDetailView 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: #003D6B;
-  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: #6B7280;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-/* ── hero ── */
-.hero {
-  border-radius: 12px;
-  padding: 20px 20px 18px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  margin-bottom: 12px;
-  text-align: center;
-}
-
-.hero.won    { background: rgba(5, 150, 105, 0.08); border: 1px solid rgba(5, 150, 105, 0.2); }
-.hero.lost   { background: rgba(220, 38, 38, 0.06); border: 1px solid rgba(220, 38, 38, 0.15); }
-.hero.pending { background: rgba(248, 151, 31, 0.06); border: 1px solid rgba(248, 151, 31, 0.18); }
-.hero.push   { background: #FFFFFF; border: 1px solid #E5E7EB; }
-
-.hero-status {
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  opacity: 0.85;
-}
-.hero.won    .hero-status  { color: #059669; }
-.hero.lost   .hero-status  { color: #DC2626; }
-.hero.pending .hero-status { color: #F8971F; }
-.hero.push   .hero-status  { color: #6B7280; }
-
-.hero-return {
-  font-size: 36px;
-  font-weight: 900;
-  letter-spacing: -0.01em;
-  line-height: 1.1;
-}
-.hero.won    .hero-return  { color: #059669; }
-.hero.lost   .hero-return  { color: #DC2626; }
-.hero.pending .hero-return { color: #F8971F; }
-.hero.push   .hero-return  { color: #6B7280; }
-
-.hero-return-label {
-  font-size: 10.5px;
-  color: #6B7280;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-}
-
-/* ── sections ── */
-.section {
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
-  border-radius: 8px;
-  padding: 14px 16px;
-  margin-bottom: 10px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-}
-
-.section-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 6px;
-}
-
-.league-tag {
-  font-size: 11px;
-  color: #6B7280;
-  font-weight: 700;
-}
-
-.placed-time {
-  font-size: 11px;
-  color: #6B7280;
-  font-weight: 600;
-}
-
-.match-name {
-  font-size: 17px;
-  font-weight: 900;
-  color: #1A1A2E;
-  line-height: 1.3;
-  margin-bottom: 10px;
-}
-
-/* score block */
-.score-block {
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.score-block--phase {
-  padding: 8px 0 4px;
-}
-
-.row-label-val {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-}
-
-.row-label {
-  font-size: 11px;
-  color: #6B7280;
-  font-weight: 600;
-}
-
-.row-val {
-  font-size: 13px;
-  font-weight: 700;
-  color: #1A1A2E;
-}
-
-.row-val.pick {
-  color: #003D6B;
-}
-
-.score-chips {
-  display: flex;
-  gap: 8px;
-}
-
-.score-item {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  background: #F5F7FA;
-  border: 1px solid #E5E7EB;
-  border-radius: 7px;
-  padding: 5px 10px;
-}
-
-.score-period {
-  font-size: 10px;
-  color: #6B7280;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-}
-
-.score-value {
-  font-size: 16px;
-  font-weight: 900;
-  color: #1A1A2E;
-}
-
-.score-value.muted {
-  color: #6B7280;
-  font-size: 13px;
-}
-
-.no-score {
-  font-size: 11.5px;
-  color: #6B7280;
-  font-style: italic;
-}
-
-/* section title */
-.section-title {
-  font-size: 10.5px;
-  color: #6B7280;
-  font-weight: 800;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin-bottom: 10px;
-}
-
-/* parlay legs */
-.legs-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.leg-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 10px;
-  background: #F5F7FA;
-  border: 1px solid #E5E7EB;
-  border-radius: 8px;
-  padding: 10px 12px;
-}
-
-.leg-row.won  { border-color: rgba(5, 150, 105, 0.25); }
-.leg-row.lost { border-color: rgba(220, 38, 38, 0.2); }
-
-.leg-left {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  flex: 1;
-  min-width: 0;
-}
-
-.leg-num {
-  flex-shrink: 0;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: #E8EDF2;
-  color: #6B7280;
-  font-size: 10px;
-  font-weight: 800;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 1px;
-}
-
-.leg-num.won  { background: rgba(5, 150, 105, 0.12); color: #059669; }
-.leg-num.lost { background: rgba(220, 38, 38, 0.1); color: #DC2626; }
-
-.leg-body {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  min-width: 0;
-}
-
-.leg-match {
-  font-size: 12.5px;
-  font-weight: 800;
-  color: #1A1A2E;
-}
-
-.leg-pick-line {
-  font-size: 11.5px;
-  color: #6B7280;
-  font-weight: 600;
-}
-
-.leg-scores {
-  display: flex;
-  gap: 8px;
-  margin-top: 2px;
-}
-
-.leg-scores span {
-  font-size: 11px;
-  font-weight: 700;
-  color: #1A1A2E;
-}
-
-.leg-scores .muted-score {
-  color: #6B7280;
-}
-
-.leg-right {
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 4px;
-}
-
-.leg-odds-val {
-  font-size: 15px;
-  font-weight: 900;
-  color: #003D6B;
-}
-
-.leg-result-badge {
-  font-size: 9px;
-  font-weight: 800;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  padding: 2px 6px;
-  border-radius: 10px;
-}
-
-.leg-result-badge.won   { color: #059669; background: rgba(5, 150, 105, 0.1); }
-.leg-result-badge.lost  { color: #DC2626; background: rgba(220, 38, 38, 0.08); }
-.leg-result-badge.push  { color: #6B7280; background: #E8EDF2; }
-.leg-result-badge.pending { color: #6B7280; background: #F5F7FA; }
-
-/* summary */
-.summary-rows {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
-.sum-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 0;
-  border-bottom: 1px solid #E5E7EB;
-  font-size: 13px;
-  color: #1A1A2E;
-  font-weight: 600;
-}
-
-.sum-row:last-child {
-  border-bottom: none;
-}
-
-.sum-row.muted {
-  color: #6B7280;
-  font-size: 11px;
-}
-
-.odds-val {
-  color: #F8971F;
-  font-weight: 800;
-}
-
-.amt-won {
-  color: #059669;
-  font-weight: 900;
-  font-size: 15px;
-}
-
-.amt-pending {
-  color: #F8971F;
-  font-weight: 900;
-}
-
-.amt-lost {
-  color: #DC2626;
-  font-weight: 900;
-  font-size: 15px;
-}
-
-.bet-no-val {
-  font-family: monospace;
-  letter-spacing: 0.04em;
-}
-</style>
diff --git a/apps/player/src/views/CashbackRecordsView.vue b/apps/player/src/views/CashbackRecordsView.vue
index 17d67fa..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: #003D6B;
-  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: #6B7280;
-  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: 12px;
-  background: linear-gradient(135deg, rgba(0, 61, 107, 0.06), #FFFFFF);
-  border: 1px solid #E5E7EB;
-  text-align: center;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-}
-
-.hero-amount {
-  font-size: 28px;
-  font-weight: 800;
-  color: #003D6B;
-  line-height: 1.2;
-}
-
-.hero-sub {
-  font-size: 12px;
-  color: #6B7280;
-  line-height: 1.4;
-}
-
-.section-title {
-  font-size: 10.5px;
-  color: #6B7280;
-  font-weight: 800;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0 0 10px;
-}
-
-.list-card {
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-}
-
-.record-row {
-  padding: 12px 16px;
-  border-bottom: 1px solid #E5E7EB;
-}
-
-.record-row:last-child {
-  border-bottom: none;
-}
-
-.record-row--highlight {
-  background: rgba(0, 61, 107, 0.04);
-  box-shadow: inset 3px 0 0 #003D6B;
-}
-
-.ledger-hint {
-  margin: 0 0 12px;
-  font-size: 12px;
-  line-height: 1.5;
-  color: #6B7280;
-}
-
-.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: #003D6B;
-}
-
-.row-period {
-  font-size: 12px;
-  color: #6B7280;
-  font-weight: 600;
-}
-
-.row-rate {
-  flex-shrink: 0;
-  font-size: 12px;
-  font-weight: 700;
-  color: #F8971F;
-  background: rgba(248, 151, 31, 0.08);
-  border: 1px solid rgba(248, 151, 31, 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: #6B7280;
-}
-
-.row-foot {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 1px dashed #E5E7EB;
-  font-size: 11px;
-  color: #6B7280;
-}
-
-.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: #6B7280;
-}
-
-.empty-hint {
-  margin: 0;
-  font-size: 13px;
-  line-height: 1.5;
-  color: #6B7280;
-}
-
-.sentinel {
-  height: 1px;
-}
-
-.load-more-spinner {
-  display: flex;
-  justify-content: center;
-  padding: 20px 0 8px;
-}
-
-.end-hint {
-  text-align: center;
-  font-size: 12px;
-  color: #6B7280;
-  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 442ec24..ed3cc1f 100644
--- a/apps/player/src/views/FootballView.vue
+++ b/apps/player/src/views/FootballView.vue
@@ -1,769 +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;
-}
-
-.filters-bar {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 12px;
-  padding: 0 16px 12px;
-}
-
-.phase-filter {
-  padding: 0;
-  display: flex;
-  align-items: center;
-}
-
-.right-filters {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.time-tabs {
-  display: flex;
-  align-items: center;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 2px 3px;
-  height: 26px;
-  box-sizing: border-box;
-}
-
-.time-tab {
-  padding: 0 10px;
-  height: 100%;
-  font-size: 12px;
-  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;
-}
-
-.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 10px;
-  height: 26px;
-  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;
-}
-
-.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;
-}
-
-.dropdown-trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0 12px;
-  font-size: 12px;
-  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;
-  max-width: 150px;
-}
-
-.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: #FFFFFF;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.35);
-  padding: 6px 0;
-}
-
-.dropdown-item {
-  padding: 8px 14px;
-  font-size: 13px;
-  color: var(--text);
-  cursor: pointer;
-  transition: background 0.2s;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.dropdown-item:hover,
-.dropdown-item:active {
-  background: var(--bg-body);
-}
-
-.dropdown-item.active {
-  color: var(--primary-light);
-  background: rgba(244, 162, 97, 0.1);
-  font-weight: 700;
-}
-
-.league-list {
-  padding: 4px 12px 0;
-}
-
-.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;
-}
-
-.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(--primary-light);
-  font-size: 14px;
-  line-height: 1;
-  flex-shrink: 0;
-}
-
-.search-bar input {
-  flex: 1;
-  min-width: 0;
-  height: 100%;
-  border: none;
-  background: transparent;
-  color: var(--text);
-  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);
-}
-
-.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;
-}
-</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 6b907ab..95fe20b 100644
--- a/apps/player/src/views/HomeView.vue
+++ b/apps/player/src/views/HomeView.vue
@@ -1,940 +1,12 @@
 <script setup lang="ts">
-import { onActivated, computed, ref, watch, onDeactivated } 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 bentoBetBg from '../assets/images/bento-bet-bg.png';
-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 bentoBetCardBg = `url(${bentoBetBg})`;
-const { t, locale } = useI18n();
-const router = useRouter();
-const { banners, hotMatches, upcomingMatches, loading, load, announcementItems } = usePlayerHome();
-const activeFeaturedIndex = ref(0);
-const touchStartX = ref(0);
-const touchDeltaX = ref(0);
-
-let rotateInterval: number | undefined;
-
-function startFeaturedRotation() {
-  stopFeaturedRotation();
-  if (hotMatches.value.length > 1) {
-    rotateInterval = window.setInterval(() => {
-      activeFeaturedIndex.value = (activeFeaturedIndex.value + 1) % hotMatches.value.length;
-    }, 4500);
-  }
-}
-
-function stopFeaturedRotation() {
-  if (rotateInterval) {
-    window.clearInterval(rotateInterval);
-    rotateInterval = undefined;
-  }
-}
-
-watch(() => hotMatches.value.length, () => {
-  activeFeaturedIndex.value = 0;
-  startFeaturedRotation();
-});
-
-function onFeaturedTouchStart(e: TouchEvent) {
-  touchStartX.value = e.touches[0].clientX;
-  touchDeltaX.value = 0;
-  stopFeaturedRotation();
-}
-
-function onFeaturedTouchMove(e: TouchEvent) {
-  touchDeltaX.value = e.touches[0].clientX - touchStartX.value;
-}
-
-function onFeaturedTouchEnd() {
-  const threshold = 40;
-  if (hotMatches.value.length > 1) {
-    if (touchDeltaX.value > threshold) {
-      activeFeaturedIndex.value = (activeFeaturedIndex.value - 1 + hotMatches.value.length) % hotMatches.value.length;
-    } else if (touchDeltaX.value < -threshold) {
-      activeFeaturedIndex.value = (activeFeaturedIndex.value + 1) % hotMatches.value.length;
-    }
-  }
-  touchDeltaX.value = 0;
-  startFeaturedRotation();
-}
-
-const bannerFallbackTo = computed(() => {
-  const id = announcementItems.value[0]?.id;
-  return id ? `/announcements/${id}` : '/announcements';
-});
-
-const displayedMatches = computed<PlayerHomeMatch[]>(() => upcomingMatches.value);
-const limitedMatches = computed(() => displayedMatches.value.slice(0, 6));
-
-const emptyMessage = computed(() => t('home.upcoming_empty'));
-
-const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
-  onRefresh: async () => { await load(true); },
-});
-
-onActivated(() => {
-  void load(true);
-  startFeaturedRotation();
-});
-
-onDeactivated(() => {
-  stopFeaturedRotation();
-});
-
-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="quick-bento">
-      <div
-        class="bento-item bento-item--large bento-item--featured-carousel"
-        @touchstart.passive="onFeaturedTouchStart"
-        @touchmove.passive="onFeaturedTouchMove"
-        @touchend="onFeaturedTouchEnd"
-      >
-        <!-- Fixed header, does not swipe/scroll -->
-        <div v-if="hotMatches.length" class="bento-header-row fixed-header">
-          <span class="featured-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" width="12" height="12" class="tag-icon"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
-            {{ t('home.hot_matches') }}
-          </span>
-          <span class="bento-badge">HOT</span>
-        </div>
-
-        <div class="carousel-viewport">
-          <div
-            class="carousel-track"
-            :style="{ transform: `translateX(-${activeFeaturedIndex * 100}%)` }"
-          >
-            <template v-if="hotMatches.length">
-              <div
-                v-for="match in hotMatches"
-                :key="match.id"
-                class="carousel-slide"
-                @click="goMatch(match.id)"
-              >
-                <div class="bento-content--vertical">
-                  <div class="bento-header-row placeholder-header" aria-hidden="true">
-                    <span class="featured-tag">
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" width="12" height="12" class="tag-icon"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
-                      {{ t('home.hot_matches') }}
-                    </span>
-                    <span class="bento-badge">HOT</span>
-                  </div>
-                  
-                  <div class="featured-vs-area">
-                    <div class="featured-team">
-                      <TeamEmblem
-                        size="sm"
-                        :team-code="match.homeTeamCode"
-                        :team-name="match.homeTeamName"
-                        :logo-url="match.homeTeamLogoUrl"
-                      />
-                      <span class="featured-team-name">{{ match.homeTeamName }}</span>
-                    </div>
-                    
-                    <span class="featured-vs">VS</span>
-                    
-                    <div class="featured-team">
-                      <TeamEmblem
-                        size="sm"
-                        :team-code="match.awayTeamCode"
-                        :team-name="match.awayTeamName"
-                        :logo-url="match.awayTeamLogoUrl"
-                      />
-                      <span class="featured-team-name">{{ match.awayTeamName }}</span>
-                    </div>
-                  </div>
-                  
-                  <div class="featured-footer">
-                    <span class="featured-time">{{ formatKickoff(match.startTime) }}</span>
-                    <span class="featured-action-btn">{{ t('announcements.go_link') }} ›</span>
-                  </div>
-                </div>
-              </div>
-            </template>
-            
-            <div v-else class="carousel-slide" @click="router.push('/bet')">
-              <div class="bento-content--vertical">
-                <div class="bento-header-row">
-                  <span class="bento-icon bento-icon--bet">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" width="22" height="22"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 000 20 14.5 14.5 0 000-20M2 12h20"/></svg>
-                  </span>
-                  <span class="bento-badge">HOT</span>
-                </div>
-                <div class="bento-text">
-                  <span class="bento-title bento-title--lg">{{ t('nav.bet') }}</span>
-                  <span class="bento-desc">{{ t('home.bento_desc') }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        
-        <div v-if="hotMatches.length > 1" class="carousel-dots">
-          <span
-            v-for="(_, i) in hotMatches"
-            :key="i"
-            class="carousel-dot"
-            :class="{ active: i === activeFeaturedIndex }"
-          />
-        </div>
-      </div>
-
-      <button type="button" class="bento-item bento-item--small" @click="router.push('/wallet/recharge')">
-        <span class="bento-icon bento-icon--recharge">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20M12 15h4"/></svg>
-        </span>
-        <span class="bento-title bento-title--sm">{{ t('recharge.title') }}</span>
-      </button>
-
-      <button type="button" class="bento-item bento-item--small" @click="router.push('/bets')">
-        <span class="bento-icon bento-icon--history">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
-            <path d="M6 4h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z" stroke-linejoin="round"/>
-            <path d="M8 9h8M8 12.5h8M8 16h5" stroke-linecap="round"/>
-          </svg>
-        </span>
-        <span class="bento-title bento-title--sm">{{ t('home.view_bet_history') }}</span>
-      </button>
-    </div>
-
-    <div class="section-header">
-      <div class="section-title">{{ t('home.upcoming_tab') }}</div>
-    </div>
-
-    <div
-      v-for="(match, index) in limitedMatches"
-      :key="match.id"
-      class="match-card"
-      :class="{ 'match-card--live-anim': 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="displayedMatches.length > 6" class="view-all-container">
-      <button type="button" class="view-all-link" @click="router.push('/bet')">
-        {{ t('home.view_all_matches') }} ›
-      </button>
-    </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;
-}
-
-.section-header {
-  margin-top: 14px;
-  margin-bottom: 10px;
-}
-
-.quick-bento {
-  display: grid;
-  grid-template-columns: 1.2fr 1fr;
-  grid-template-rows: 54px 54px;
-  gap: 8px;
-  margin-bottom: 16px;
-  padding: 0 2px;
-}
-
-.bento-item {
-  display: flex;
-  align-items: center;
-  border-radius: 12px;
-  border: 1px solid #E5E7EB;
-  background: #FFFFFF;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  cursor: pointer;
-  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
-  padding: 10px 12px;
-  text-decoration: none;
-  box-sizing: border-box;
-}
-
-.bento-item:active {
-  transform: scale(0.97);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
-}
-
-.bento-item--large {
-  grid-row: 1 / 3;
-  height: 100%;
-  background: linear-gradient(135deg, #F3F8FC 0%, #FFFFFF 100%);
-  border-color: rgba(0, 61, 107, 0.15);
-  position: relative;
-  overflow: hidden;
-  padding: 0;
-}
-
-.bento-item--featured-carousel {
-  /* Carousel container styles */
-}
-
-.carousel-viewport {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-}
-
-.carousel-track {
-  display: flex;
-  height: 100%;
-  width: 100%;
-  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
-}
-
-.carousel-slide {
-  flex: 0 0 100%;
-  min-width: 100%;
-  height: 100%;
-  padding: 10px 10px 8px 12px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.carousel-dots {
-  position: absolute;
-  bottom: 4px;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  gap: 4px;
-  z-index: 10;
-  pointer-events: none;
-}
-
-.carousel-dot {
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background: rgba(0, 61, 107, 0.15);
-  transition: background 0.25s, width 0.25s;
-}
-
-.carousel-dot.active {
-  width: 12px;
-  border-radius: 2px;
-  background: #003D6B;
-}
-
-.featured-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  font-size: 9px;
-  font-weight: 700;
-  color: #003D6B;
-  background: rgba(0, 61, 107, 0.06);
-  padding: 3px 6px;
-  border-radius: 6px;
-  line-height: 1;
-}
-
-.tag-icon {
-  color: #F97316;
-}
-
-.featured-vs-area {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  width: 100%;
-  margin: 6px 0;
-  gap: 4px;
-}
-
-.featured-team {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-  flex: 1;
-  min-width: 0;
-}
-
-.featured-team-name {
-  font-size: 9px;
-  font-weight: 800;
-  color: #1A1A2E;
-  text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
-}
-
-.featured-vs {
-  font-size: 11px;
-  font-weight: 800;
-  color: #F97316;
-  font-style: italic;
-  opacity: 0.95;
-  flex-shrink: 0;
-}
-
-.featured-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  border-top: 1px dashed rgba(0, 61, 107, 0.1);
-  padding-top: 5px;
-  margin-top: 2px;
-}
-
-.featured-time {
-  font-size: 8px;
-  color: #6B7280;
-  font-weight: 600;
-}
-
-.featured-action-btn {
-  font-size: 8.5px;
-  font-weight: 800;
-  color: #003D6B;
-  background: rgba(0, 61, 107, 0.05);
-  padding: 2px 6px;
-  border-radius: 4px;
-  transition: background 0.15s;
-}
-
-.bento-item--featured:active .featured-action-btn {
-  background: rgba(0, 61, 107, 0.12);
-}
-
-.bento-item--large .bento-title {
-  color: #003D6B;
-}
-
-.bento-item--large .bento-desc {
-  color: #6B7280;
-}
-
-.bento-item--large .bento-badge {
-  background: #F97316;
-  color: #FFFFFF;
-}
-
-.bento-content--vertical {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100%;
-  width: 100%;
-}
-
-.bento-header-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  width: 100%;
-}
-
-.fixed-header {
-  position: absolute;
-  top: 10px;
-  left: 12px;
-  right: 10px;
-  width: auto;
-  z-index: 20;
-  pointer-events: none;
-}
-
-.placeholder-header {
-  visibility: hidden;
-  pointer-events: none;
-}
-
-.bento-badge {
-  font-size: 8px;
-  font-weight: 800;
-  color: #FFFFFF;
-  background: #003D6B;
-  padding: 2px 5px;
-  border-radius: 4px;
-  letter-spacing: 0.05em;
-  line-height: 1;
-  transform: translateY(2px);
-}
-
-.bento-item--large:active {
-  border-color: rgba(0, 61, 107, 0.3);
-}
-
-.bento-item--small {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  justify-content: flex-start;
-  height: 100%;
-}
-
-.bento-content {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.bento-icon {
-  width: 34px;
-  height: 34px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.bento-item--large .bento-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 10px;
-}
-
-.bento-icon--bet {
-  background: rgba(0, 61, 107, 0.08);
-  color: #003D6B;
-}
-
-.bento-icon--recharge {
-  background: rgba(5, 150, 105, 0.08);
-  color: #059669;
-}
-
-.bento-icon--history {
-  background: rgba(248, 151, 31, 0.08);
-  color: #E8870A;
-}
-
-.bento-text {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 1px;
-}
-
-.bento-title {
-  font-size: 13px;
-  font-weight: 800;
-  color: #1A1A2E;
-  text-align: left;
-}
-
-.bento-title--sm {
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.bento-title--lg {
-  font-size: 14.5px;
-  font-weight: 800;
-  margin-bottom: 2px;
-}
-
-.bento-desc {
-  font-size: 9.5px;
-  color: #6B7280;
-  font-weight: 500;
-  text-align: left;
-}
-
-.section-title {
-  font-size: 15px;
-  font-weight: 700;
-  color: #1A1A2E;
-  margin: 0 0 8px;
-  padding-left: 10px;
-  border-left: 3px solid #003D6B;
-  line-height: 1.3;
-}
-
-.match-card {
-  position: relative;
-  isolation: isolate;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  margin-bottom: 8px;
-  padding: 10px 12px;
-  min-height: 60px;
-  border: 1px solid #E5E7EB;
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-  background: #FFFFFF;
-  cursor: pointer;
-  transition: transform 0.2s, box-shadow 0.2s;
-  overflow: hidden;
-}
-
-.match-card::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(135deg, rgba(0, 61, 107, 0.02) 0%, transparent 60%);
-  z-index: 0;
-  pointer-events: none;
-}
-
-.match-card:active {
-  transform: scale(0.995);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
-}
-
-.match-info,
-.match-flags {
-  position: relative;
-  z-index: 1;
-}
-
-.match-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.match-teams {
-  font-weight: 700;
-  margin-bottom: 4px;
-  font-size: 14px;
-  line-height: 1.3;
-  color: #1A1A2E;
-}
-
-.match-time {
-  font-size: 12px;
-  color: #6B7280;
-  font-weight: 500;
-}
-
-.match-flags {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  gap: 3px;
-  max-width: 46%;
-}
-
-.vs-arena {
-  position: relative;
-  flex-shrink: 0;
-  width: 52px;
-  height: 42px;
-  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(0, 102, 204, 0.6)) drop-shadow(0 0 8px rgba(0, 91, 159, 0.35));
-  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(0, 91, 159, 0) 0%,
-    rgba(0, 102, 204, 0.7) 28%,
-    #0066CC 50%,
-    rgba(0, 91, 159, 0.7) 72%,
-    rgba(0, 61, 107, 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: 40px;
-  height: auto;
-  object-fit: contain;
-  filter: drop-shadow(0 0 3px rgba(0, 61, 107, 0.25));
-}
-
-.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(0, 61, 107, 0.2));
-  }
-
-  50% {
-    opacity: 1;
-    filter:
-      drop-shadow(0 0 3px rgba(0, 102, 204, 0.5))
-      drop-shadow(0 0 6px rgba(0, 61, 107, 0.25));
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .vs-img {
-    animation: none;
-    filter: drop-shadow(0 0 3px rgba(0, 61, 107, 0.25));
-  }
-
-  .hz-path,
-  .hz-beam {
-    animation: none;
-    opacity: 0;
-  }
-}
-
-.empty {
-  text-align: center;
-  color: #6B7280;
-  padding: 28px 16px;
-  font-weight: 600;
-}
-
-.empty-icon {
-  width: 72px;
-  height: 72px;
-  margin-bottom: 10px;
-}
-
-.view-all-container {
-  display: flex;
-  justify-content: center;
-  margin-top: 12px;
-  margin-bottom: 24px;
-  padding: 0 2px;
-}
-
-.view-all-link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  font-family: inherit;
-  font-size: 13px;
-  font-weight: 700;
-  color: #003D6B;
-  cursor: pointer;
-  padding: 6px 12px;
-  outline: none;
-  transition: all 0.2s ease;
-}
-
-.view-all-link:hover {
-  opacity: 0.85;
-  text-decoration: underline;
-}
-
-.view-all-link:active {
-  transform: scale(0.97);
-  opacity: 0.7;
-}
-</style>
diff --git a/apps/player/src/views/InboxHubView.vue b/apps/player/src/views/InboxHubView.vue
index 52600d5..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: var(--bg-card);
-  color: var(--primary);
-  font-size: 22px;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.page-header h1 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 700;
-  color: var(--primary-dark, #002847);
-}
-
-.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(--primary);
-  border-bottom-color: var(--primary);
-}
-
-.hub-tab-label {
-  line-height: 1.2;
-}
-
-.hub-tab-badge {
-  min-width: 18px;
-  padding: 0 5px;
-  border-radius: 9px;
-  background: var(--primary);
-  color: #fff;
-  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-active);
-  border-radius: 8px;
-  background: rgba(0, 61, 107, 0.06);
-  color: var(--primary);
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.action-btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.action-btn.danger {
-  border-color: rgba(220, 38, 38, 0.35);
-  background: rgba(220, 38, 38, 0.06);
-  color: #dc2626;
-}
-</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 752a301..25530f9 100644
--- a/apps/player/src/views/MatchDetailView.vue
+++ b/apps/player/src/views/MatchDetailView.vue
@@ -1,993 +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-top: 0;
-  padding-bottom: 16px;
-  background: #E8EDF2;
-}
-
-.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: 0;
-  z-index: 50;
-  margin-bottom: 8px;
-  background: #FFFFFF;
-  border-bottom: 1px solid #CBD5E1;
-}
-
-.toolbar-title {
-  flex: 1;
-  text-align: center;
-  font-size: 13px;
-  font-weight: 700;
-  color: #003D6B;
-  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 #E5E7EB;
-  background: #F5F7FA;
-  color: #003D6B;
-  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 12px 10px;
-  padding: 14px 12px 16px;
-  overflow: hidden;
-  background: #FFFFFF;
-  border: 1px solid #CBD5E1;
-  border-radius: 8px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-}
-
-.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: 700;
-  padding: 4px 14px;
-  border-radius: 0 6px 0 10px;
-  line-height: 1.3;
-  white-space: nowrap;
-}
-
-.status-tag--settled {
-  background: #E8EDF2;
-  color: #4B5563;
-  border-bottom: 1px solid #D1D5DB;
-  border-left: 1px solid #D1D5DB;
-}
-
-.status-tag--pending {
-  background: #FEF3C7;
-  color: #92400E;
-  border-bottom: 1px solid #FDE68A;
-  border-left: 1px solid #FDE68A;
-}
-
-/* -- market panel smaller status tag -- */
-.market-status-tag {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 5;
-  font-size: 10px;
-  font-weight: 700;
-  padding: 3px 10px;
-  border-radius: 0 4px 0 8px;
-  line-height: 1.3;
-  white-space: nowrap;
-}
-
-.market-status-tag--settled {
-  background: #E8EDF2;
-  color: #4B5563;
-  border-bottom: 1px solid #D1D5DB;
-  border-left: 1px solid #D1D5DB;
-}
-
-.market-status-tag--pending {
-  background: #FEF3C7;
-  color: #92400E;
-  border-bottom: 1px solid #FDE68A;
-  border-left: 1px solid #FDE68A;
-}
-
-.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: #6B7280;
-  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: #003D6B;
-  text-align: center;
-}
-
-.result-stats-section {
-  margin: 0 10px 12px;
-  padding: 12px;
-  border: 1px solid #CBD5E1;
-  border-radius: 8px;
-  background: #FFFFFF;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-}
-
-.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: 700;
-  color: #003D6B;
-}
-
-.result-stats-head span {
-  min-width: 0;
-  max-width: 58%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 11px;
-  color: #6B7280;
-}
-
-.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: #F5F7FA;
-  border: 1px solid #E5E7EB;
-}
-
-.result-stat-label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 11px;
-  color: #6B7280;
-}
-
-.result-stat-value {
-  flex-shrink: 0;
-  font-size: 14px;
-  line-height: 1;
-  font-weight: 700;
-  color: #1A1A2E;
-}
-
-.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: 700;
-  color: #1A1A2E;
-  text-align: center;
-  line-height: 1.25;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-}
-
-/* VS arena -- blue themed */
-.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(0, 102, 204, 0.6)) drop-shadow(0 0 8px rgba(0, 91, 159, 0.35));
-  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(0, 91, 159, 0) 0%,
-    rgba(0, 102, 204, 0.7) 28%,
-    #0066CC 50%,
-    rgba(0, 91, 159, 0.7) 72%,
-    rgba(0, 61, 107, 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(0, 61, 107, 0.2));
-  }
-  50% {
-    opacity: 1;
-    filter: drop-shadow(0 0 3px rgba(0, 102, 204, 0.5)) drop-shadow(0 0 6px rgba(0, 61, 107, 0.25));
-  }
-}
-
-@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: 8px;
-  padding: 4px 0;
-}
-
-.market-group {
-  border-radius: 8px;
-  border: 1px solid #CBD5E1;
-  background: #FFFFFF;
-  overflow: hidden;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-
-.market-group.open {
-  border-color: #9CA3AF;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
-}
-
-.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: 6px;
-  border: 1px solid #E5E7EB;
-  background: #F5F7FA;
-  color: #003D6B;
-  font-size: 13px;
-  font-weight: 700;
-}
-
-.state {
-  text-align: center;
-  padding: 48px;
-  color: #6B7280;
-}
-
-.cs-toast {
-  text-align: center;
-  font-size: 12px;
-  color: #003D6B;
-  padding: 2px 0 6px;
-}
-
-/* -- my bets -- */
-.my-bets-section {
-  padding: 0 12px;
-  margin-bottom: 12px;
-}
-
-.my-bets-title {
-  font-size: 14px;
-  font-weight: 700;
-  color: #1A1A2E;
-  margin: 0 0 8px;
-}
-
-.my-bets-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.my-bet-card {
-  background: #FFFFFF;
-  border: 1px solid #CBD5E1;
-  border-radius: 8px;
-  padding: 10px 12px;
-  cursor: pointer;
-  transition: background 0.15s;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-}
-
-.my-bet-card:active {
-  background: #F5F7FA;
-}
-
-.bet-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 6px;
-}
-
-.bet-type {
-  font-size: 12px;
-  font-weight: 700;
-  color: #1A1A2E;
-  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: #E6F4EA;
-  color: #059669;
-}
-
-.bet-status-lost {
-  background: #FDE8E8;
-  color: #DC2626;
-}
-
-.bet-status-pending {
-  background: #FEF3C7;
-  color: #D97706;
-}
-
-.bet-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.bet-stake {
-  font-size: 11px;
-  color: #6B7280;
-}
-
-.bet-return {
-  font-size: 13px;
-  font-weight: 700;
-}
-
-</style>
diff --git a/apps/player/src/views/MessageDetailView.vue b/apps/player/src/views/MessageDetailView.vue
index 44eea2a..ef59a90 100644
--- a/apps/player/src/views/MessageDetailView.vue
+++ b/apps/player/src/views/MessageDetailView.vue
@@ -1,396 +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 { formatMoney } from '../utils/localeDisplay';
-import GoldSpinner from '../components/GoldSpinner.vue';
-import ConfirmDialog from '../components/ConfirmDialog.vue';
-import { sanitizeAnnouncementHtml } from '../utils/html';
-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: var(--bg-card);
-  color: var(--primary);
-  font-size: 22px;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.page-header h1 {
-  margin: 0;
-  flex: 1;
-  font-size: 18px;
-  font-weight: 700;
-  color: var(--primary-dark, #002847);
-}
-
-.delete-header-btn {
-  border: 1px solid rgba(220, 38, 38, 0.35);
-  border-radius: 8px;
-  padding: 6px 10px;
-  background: rgba(220, 38, 38, 0.06);
-  color: #dc2626;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.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: var(--text-muted);
-  background: rgba(0, 0, 0, 0.05);
-}
-
-.status-badge.unread {
-  color: var(--primary);
-  background: rgba(0, 61, 107, 0.08);
-}
-
-.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-active);
-  border-radius: 8px;
-  padding: 8px 14px;
-  background: rgba(0, 61, 107, 0.06);
-  color: var(--primary);
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.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: var(--primary-dark, #002847);
-}
-
-.detail-body {
-  margin: 0;
-  font-size: 15px;
-  line-height: 1.75;
-  color: #374151;
-}
-
-.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(--primary);
-}
-
-.reason-box {
-  margin-top: 18px;
-  padding: 14px;
-  border-radius: 10px;
-  border: 1px solid rgba(220, 38, 38, 0.2);
-  background: rgba(220, 38, 38, 0.05);
-}
-
-.reason-label {
-  margin: 0 0 8px;
-  font-size: 12px;
-  color: #dc2626;
-  font-weight: 700;
-}
-
-.reason-text {
-  margin: 0;
-  font-size: 14px;
-  line-height: 1.55;
-  color: #b91c1c;
-}
-
-.action-btn {
-  margin-top: 24px;
-  width: 100%;
-  padding: 11px 14px;
-  border: 1px solid var(--border-active);
-  border-radius: 8px;
-  background: rgba(0, 61, 107, 0.06);
-  color: var(--primary);
-  font-size: 14px;
-  font-weight: 700;
-  cursor: pointer;
-  display: block;
-}
-</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..9e12397
--- /dev/null
+++ b/apps/player/src/views/MobileAnnouncementDetailView.vue
@@ -0,0 +1,323 @@
+<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';
+
+const FALLBACK_IMG = '/uploads/banners/welcome.svg';
+
+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();
+});
+</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>
+</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: var(--bg-card);
+  color: var(--primary);
+  font-size: 22px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.page-header h1 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--primary-dark, #002847);
+}
+
+.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-active);
+  border-radius: 8px;
+  padding: 8px 14px;
+  background: rgba(0, 61, 107, 0.06);
+  color: var(--primary);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.detail-article {
+  margin: 0;
+  padding: 0;
+}
+
+.detail-hero {
+  margin: 16px -16px 0;
+  padding: 0;
+  background: var(--bg-body);
+  line-height: 0;
+  border-radius: 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: var(--primary-dark, #002847);
+}
+
+.detail-body {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.75;
+  color: #374151;
+}
+
+.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(--primary);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.link-action--outline {
+  background: transparent;
+  border: 1px solid var(--border-active);
+  color: var(--primary);
+}
+</style>
diff --git a/apps/player/src/views/MobileAnnouncementListView.vue b/apps/player/src/views/MobileAnnouncementListView.vue
new file mode 100644
index 0000000..84f7c58
--- /dev/null
+++ b/apps/player/src/views/MobileAnnouncementListView.vue
@@ -0,0 +1,179 @@
+<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';
+
+const router = useRouter();
+const { t, locale } = useI18n();
+const { announcementItems, loading, load } = usePlayerHome();
+
+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);
+});
+</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>
+</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: var(--bg-card);
+  color: var(--primary);
+  font-size: 22px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.page-header h1 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--primary-dark, #002847);
+}
+
+.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: var(--primary-dark, #002847);
+  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/MobileBetDetailView.vue b/apps/player/src/views/MobileBetDetailView.vue
new file mode 100644
index 0000000..53e0b16
--- /dev/null
+++ b/apps/player/src/views/MobileBetDetailView.vue
@@ -0,0 +1,629 @@
+<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 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 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(-parseFloat(String(bet.value.stake ?? 0)), locale.value);
+  return formatMoney(bet.value.actualReturn ?? bet.value.potentialReturn, locale.value);
+});
+
+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 myPick = computed(() => {
+  if (!bet.value || bet.value.isParlay) return '';
+  const raw = bet.value.pickLabel ?? '';
+  if (locale.value === 'zh-CN' || !raw) return raw;
+  const ci = raw.indexOf(': ');
+  if (ci < 0) return raw;
+  return raw.slice(0, ci + 2) + translateSel(raw.slice(ci + 2));
+});
+
+const matchPhase = computed(
+  (): MatchPhase | null => bet.value?.matchPhase ?? null,
+);
+
+const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
+</script>
+
+<template>
+  <div class="detail-page">
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
+    <!-- back bar -->
+    <div class="top-bar">
+      <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>
+
+    <template v-else>
+      <!-- status hero -->
+      <div class="hero" :class="statusKey">
+        <span class="hero-status">{{ statusLabel }}</span>
+        <span class="hero-return">{{ returnAmount }}</span>
+        <span class="hero-return-label">
+          {{ statusKey === 'pending' ? t('history.est_return') : t('history.return') }}
+        </span>
+      </div>
+
+      <!-- match / parlay title -->
+      <section class="section">
+        <div class="section-head">
+          <span class="league-tag">
+            {{ bet.isParlay ? t('history.parlay_league') : (bet.leagueName || t('history.league_default')) }}
+          </span>
+          <span class="placed-time">{{ placedDateTime }}</span>
+        </div>
+        <div class="match-name">{{ matchTitle }}</div>
+
+        <!-- single bet: score comparison -->
+        <div v-if="!bet.isParlay" class="score-block" :class="{ 'score-block--phase': matchPhase && matchPhase !== 'open' }">
+          <StatusWatermark
+            v-if="matchPhase && matchPhase !== 'open'"
+            :label="matchPhaseText"
+            :variant="matchPhaseVariant(matchPhase)"
+            size="md"
+          />
+          <!-- my pick row -->
+          <div class="row-label-val">
+            <span class="row-label">{{ t('history.my_pick') }}</span>
+            <span class="row-val pick">{{ myPick }}</span>
+          </div>
+          <!-- scores -->
+          <div v-if="bet.matchScore?.ft || bet.matchScore?.ht" class="score-chips">
+            <div v-if="bet.matchScore.ft" class="score-item">
+              <span class="score-period">{{ t('history.ft') }}</span>
+              <span class="score-value">{{ bet.matchScore.ft }}</span>
+            </div>
+            <div v-if="bet.matchScore.ht" class="score-item">
+              <span class="score-period">{{ t('history.ht') }}</span>
+              <span class="score-value muted">{{ bet.matchScore.ht }}</span>
+            </div>
+          </div>
+          <div v-else-if="statusKey === 'pending'" class="no-score">{{ t('history.awaiting_result') }}</div>
+        </div>
+      </section>
+
+      <!-- parlay legs -->
+      <section v-if="bet.isParlay && bet.legs?.length" class="section">
+        <div class="section-title">{{ t('history.legs') }}</div>
+        <div class="legs-list">
+          <div v-for="(leg, i) in bet.legs" :key="i" class="leg-row" :class="legStatusKey(leg.resultStatus)">
+            <div class="leg-left">
+              <span class="leg-num" :class="legStatusKey(leg.resultStatus)">{{ i + 1 }}</span>
+              <div class="leg-body">
+                <span class="leg-match">{{ leg.matchTitle }}</span>
+                <span class="leg-pick-line">
+                  {{ leg.marketLabel }}: {{ translateSel(leg.selectionName) }}
+                </span>
+                <div v-if="leg.score?.ft || leg.score?.ht" class="leg-scores">
+                  <span v-if="leg.score.ft">{{ t('history.ft') }} {{ leg.score.ft }}</span>
+                  <span v-if="leg.score.ht" class="muted-score">{{ t('history.ht') }} {{ leg.score.ht }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="leg-right">
+              <span class="leg-odds-val">{{ formatOdds(leg.odds) }}</span>
+              <span v-if="leg.resultStatus" class="leg-result-badge" :class="legStatusKey(leg.resultStatus)">
+                {{ t(`history.status_${legStatusKey(leg.resultStatus)}`) }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- bet summary -->
+      <section class="section">
+        <div class="section-title">{{ t('history.summary') }}</div>
+        <div class="summary-rows">
+          <div class="sum-row">
+            <span>{{ t('history.stake') }}</span>
+            <span>{{ formatMoney(bet.stake, locale) }}</span>
+          </div>
+          <div v-if="bet.totalOdds" class="sum-row">
+            <span>{{ t('history.odds') }}</span>
+            <span class="odds-val">{{ formatOdds(bet.totalOdds) }}</span>
+          </div>
+          <div class="sum-row">
+            <span>{{ statusKey === 'pending' ? t('history.est_return') : t('history.return') }}</span>
+            <span :class="{ 'amt-won': statusKey === 'won', 'amt-pending': statusKey === 'pending', 'amt-lost': statusKey === 'lost' }">
+              {{ returnAmount }}
+            </span>
+          </div>
+          <div class="sum-row muted">
+            <span>{{ t('history.bet_no') }}</span>
+            <span class="bet-no-val">{{ bet.betNo }}</span>
+          </div>
+        </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: #003D6B;
+  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: #6B7280;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+/* ── hero ── */
+.hero {
+  border-radius: 12px;
+  padding: 20px 20px 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 12px;
+  text-align: center;
+}
+
+.hero.won    { background: rgba(5, 150, 105, 0.08); border: 1px solid rgba(5, 150, 105, 0.2); }
+.hero.lost   { background: rgba(220, 38, 38, 0.06); border: 1px solid rgba(220, 38, 38, 0.15); }
+.hero.pending { background: rgba(248, 151, 31, 0.06); border: 1px solid rgba(248, 151, 31, 0.18); }
+.hero.push   { background: #FFFFFF; border: 1px solid #E5E7EB; }
+
+.hero-status {
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  opacity: 0.85;
+}
+.hero.won    .hero-status  { color: #059669; }
+.hero.lost   .hero-status  { color: #DC2626; }
+.hero.pending .hero-status { color: #F8971F; }
+.hero.push   .hero-status  { color: #6B7280; }
+
+.hero-return {
+  font-size: 36px;
+  font-weight: 900;
+  letter-spacing: -0.01em;
+  line-height: 1.1;
+}
+.hero.won    .hero-return  { color: #059669; }
+.hero.lost   .hero-return  { color: #DC2626; }
+.hero.pending .hero-return { color: #F8971F; }
+.hero.push   .hero-return  { color: #6B7280; }
+
+.hero-return-label {
+  font-size: 10.5px;
+  color: #6B7280;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+/* ── sections ── */
+.section {
+  background: #FFFFFF;
+  border: 1px solid #E5E7EB;
+  border-radius: 8px;
+  padding: 14px 16px;
+  margin-bottom: 10px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.section-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.league-tag {
+  font-size: 11px;
+  color: #6B7280;
+  font-weight: 700;
+}
+
+.placed-time {
+  font-size: 11px;
+  color: #6B7280;
+  font-weight: 600;
+}
+
+.match-name {
+  font-size: 17px;
+  font-weight: 900;
+  color: #1A1A2E;
+  line-height: 1.3;
+  margin-bottom: 10px;
+}
+
+/* score block */
+.score-block {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.score-block--phase {
+  padding: 8px 0 4px;
+}
+
+.row-label-val {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.row-label {
+  font-size: 11px;
+  color: #6B7280;
+  font-weight: 600;
+}
+
+.row-val {
+  font-size: 13px;
+  font-weight: 700;
+  color: #1A1A2E;
+}
+
+.row-val.pick {
+  color: #003D6B;
+}
+
+.score-chips {
+  display: flex;
+  gap: 8px;
+}
+
+.score-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  background: #F5F7FA;
+  border: 1px solid #E5E7EB;
+  border-radius: 7px;
+  padding: 5px 10px;
+}
+
+.score-period {
+  font-size: 10px;
+  color: #6B7280;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.score-value {
+  font-size: 16px;
+  font-weight: 900;
+  color: #1A1A2E;
+}
+
+.score-value.muted {
+  color: #6B7280;
+  font-size: 13px;
+}
+
+.no-score {
+  font-size: 11.5px;
+  color: #6B7280;
+  font-style: italic;
+}
+
+/* section title */
+.section-title {
+  font-size: 10.5px;
+  color: #6B7280;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-bottom: 10px;
+}
+
+/* parlay legs */
+.legs-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.leg-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 10px;
+  background: #F5F7FA;
+  border: 1px solid #E5E7EB;
+  border-radius: 8px;
+  padding: 10px 12px;
+}
+
+.leg-row.won  { border-color: rgba(5, 150, 105, 0.25); }
+.leg-row.lost { border-color: rgba(220, 38, 38, 0.2); }
+
+.leg-left {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.leg-num {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #E8EDF2;
+  color: #6B7280;
+  font-size: 10px;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 1px;
+}
+
+.leg-num.won  { background: rgba(5, 150, 105, 0.12); color: #059669; }
+.leg-num.lost { background: rgba(220, 38, 38, 0.1); color: #DC2626; }
+
+.leg-body {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.leg-match {
+  font-size: 12.5px;
+  font-weight: 800;
+  color: #1A1A2E;
+}
+
+.leg-pick-line {
+  font-size: 11.5px;
+  color: #6B7280;
+  font-weight: 600;
+}
+
+.leg-scores {
+  display: flex;
+  gap: 8px;
+  margin-top: 2px;
+}
+
+.leg-scores span {
+  font-size: 11px;
+  font-weight: 700;
+  color: #1A1A2E;
+}
+
+.leg-scores .muted-score {
+  color: #6B7280;
+}
+
+.leg-right {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+
+.leg-odds-val {
+  font-size: 15px;
+  font-weight: 900;
+  color: #003D6B;
+}
+
+.leg-result-badge {
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 2px 6px;
+  border-radius: 10px;
+}
+
+.leg-result-badge.won   { color: #059669; background: rgba(5, 150, 105, 0.1); }
+.leg-result-badge.lost  { color: #DC2626; background: rgba(220, 38, 38, 0.08); }
+.leg-result-badge.push  { color: #6B7280; background: #E8EDF2; }
+.leg-result-badge.pending { color: #6B7280; background: #F5F7FA; }
+
+/* summary */
+.summary-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.sum-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #E5E7EB;
+  font-size: 13px;
+  color: #1A1A2E;
+  font-weight: 600;
+}
+
+.sum-row:last-child {
+  border-bottom: none;
+}
+
+.sum-row.muted {
+  color: #6B7280;
+  font-size: 11px;
+}
+
+.odds-val {
+  color: #F8971F;
+  font-weight: 800;
+}
+
+.amt-won {
+  color: #059669;
+  font-weight: 900;
+  font-size: 15px;
+}
+
+.amt-pending {
+  color: #F8971F;
+  font-weight: 900;
+}
+
+.amt-lost {
+  color: #DC2626;
+  font-weight: 900;
+  font-size: 15px;
+}
+
+.bet-no-val {
+  font-family: monospace;
+  letter-spacing: 0.04em;
+}
+</style>
diff --git a/apps/player/src/views/MobileCashbackRecordsView.vue b/apps/player/src/views/MobileCashbackRecordsView.vue
new file mode 100644
index 0000000..17d67fa
--- /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: #003D6B;
+  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: #6B7280;
+  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: 12px;
+  background: linear-gradient(135deg, rgba(0, 61, 107, 0.06), #FFFFFF);
+  border: 1px solid #E5E7EB;
+  text-align: center;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.hero-amount {
+  font-size: 28px;
+  font-weight: 800;
+  color: #003D6B;
+  line-height: 1.2;
+}
+
+.hero-sub {
+  font-size: 12px;
+  color: #6B7280;
+  line-height: 1.4;
+}
+
+.section-title {
+  font-size: 10.5px;
+  color: #6B7280;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0 0 10px;
+}
+
+.list-card {
+  background: #FFFFFF;
+  border: 1px solid #E5E7EB;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.record-row {
+  padding: 12px 16px;
+  border-bottom: 1px solid #E5E7EB;
+}
+
+.record-row:last-child {
+  border-bottom: none;
+}
+
+.record-row--highlight {
+  background: rgba(0, 61, 107, 0.04);
+  box-shadow: inset 3px 0 0 #003D6B;
+}
+
+.ledger-hint {
+  margin: 0 0 12px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #6B7280;
+}
+
+.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: #003D6B;
+}
+
+.row-period {
+  font-size: 12px;
+  color: #6B7280;
+  font-weight: 600;
+}
+
+.row-rate {
+  flex-shrink: 0;
+  font-size: 12px;
+  font-weight: 700;
+  color: #F8971F;
+  background: rgba(248, 151, 31, 0.08);
+  border: 1px solid rgba(248, 151, 31, 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: #6B7280;
+}
+
+.row-foot {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px dashed #E5E7EB;
+  font-size: 11px;
+  color: #6B7280;
+}
+
+.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: #6B7280;
+}
+
+.empty-hint {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #6B7280;
+}
+
+.sentinel {
+  height: 1px;
+}
+
+.load-more-spinner {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0 8px;
+}
+
+.end-hint {
+  text-align: center;
+  font-size: 12px;
+  color: #6B7280;
+  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..442ec24
--- /dev/null
+++ b/apps/player/src/views/MobileFootballView.vue
@@ -0,0 +1,769 @@
+<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;
+    
+    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}`);
+}
+</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;
+}
+
+.filters-bar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  padding: 0 16px 12px;
+}
+
+.phase-filter {
+  padding: 0;
+  display: flex;
+  align-items: center;
+}
+
+.right-filters {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.time-tabs {
+  display: flex;
+  align-items: center;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 2px 3px;
+  height: 26px;
+  box-sizing: border-box;
+}
+
+.time-tab {
+  padding: 0 10px;
+  height: 100%;
+  font-size: 12px;
+  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;
+}
+
+.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 10px;
+  height: 26px;
+  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;
+}
+
+.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;
+}
+
+.dropdown-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 12px;
+  font-size: 12px;
+  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;
+  max-width: 150px;
+}
+
+.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: #FFFFFF;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.35);
+  padding: 6px 0;
+}
+
+.dropdown-item {
+  padding: 8px 14px;
+  font-size: 13px;
+  color: var(--text);
+  cursor: pointer;
+  transition: background 0.2s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dropdown-item:hover,
+.dropdown-item:active {
+  background: var(--bg-body);
+}
+
+.dropdown-item.active {
+  color: var(--primary-light);
+  background: rgba(244, 162, 97, 0.1);
+  font-weight: 700;
+}
+
+.league-list {
+  padding: 4px 12px 0;
+}
+
+.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;
+}
+
+.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(--primary-light);
+  font-size: 14px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.search-bar input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: none;
+  background: transparent;
+  color: var(--text);
+  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);
+}
+
+.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;
+}
+</style>
diff --git a/apps/player/src/views/MobileHomeView.vue b/apps/player/src/views/MobileHomeView.vue
new file mode 100644
index 0000000..6b907ab
--- /dev/null
+++ b/apps/player/src/views/MobileHomeView.vue
@@ -0,0 +1,940 @@
+<script setup lang="ts">
+import { onActivated, computed, ref, watch, onDeactivated } 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 bentoBetBg from '../assets/images/bento-bet-bg.png';
+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 bentoBetCardBg = `url(${bentoBetBg})`;
+const { t, locale } = useI18n();
+const router = useRouter();
+const { banners, hotMatches, upcomingMatches, loading, load, announcementItems } = usePlayerHome();
+const activeFeaturedIndex = ref(0);
+const touchStartX = ref(0);
+const touchDeltaX = ref(0);
+
+let rotateInterval: number | undefined;
+
+function startFeaturedRotation() {
+  stopFeaturedRotation();
+  if (hotMatches.value.length > 1) {
+    rotateInterval = window.setInterval(() => {
+      activeFeaturedIndex.value = (activeFeaturedIndex.value + 1) % hotMatches.value.length;
+    }, 4500);
+  }
+}
+
+function stopFeaturedRotation() {
+  if (rotateInterval) {
+    window.clearInterval(rotateInterval);
+    rotateInterval = undefined;
+  }
+}
+
+watch(() => hotMatches.value.length, () => {
+  activeFeaturedIndex.value = 0;
+  startFeaturedRotation();
+});
+
+function onFeaturedTouchStart(e: TouchEvent) {
+  touchStartX.value = e.touches[0].clientX;
+  touchDeltaX.value = 0;
+  stopFeaturedRotation();
+}
+
+function onFeaturedTouchMove(e: TouchEvent) {
+  touchDeltaX.value = e.touches[0].clientX - touchStartX.value;
+}
+
+function onFeaturedTouchEnd() {
+  const threshold = 40;
+  if (hotMatches.value.length > 1) {
+    if (touchDeltaX.value > threshold) {
+      activeFeaturedIndex.value = (activeFeaturedIndex.value - 1 + hotMatches.value.length) % hotMatches.value.length;
+    } else if (touchDeltaX.value < -threshold) {
+      activeFeaturedIndex.value = (activeFeaturedIndex.value + 1) % hotMatches.value.length;
+    }
+  }
+  touchDeltaX.value = 0;
+  startFeaturedRotation();
+}
+
+const bannerFallbackTo = computed(() => {
+  const id = announcementItems.value[0]?.id;
+  return id ? `/announcements/${id}` : '/announcements';
+});
+
+const displayedMatches = computed<PlayerHomeMatch[]>(() => upcomingMatches.value);
+const limitedMatches = computed(() => displayedMatches.value.slice(0, 6));
+
+const emptyMessage = computed(() => t('home.upcoming_empty'));
+
+const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
+  onRefresh: async () => { await load(true); },
+});
+
+onActivated(() => {
+  void load(true);
+  startFeaturedRotation();
+});
+
+onDeactivated(() => {
+  stopFeaturedRotation();
+});
+
+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="quick-bento">
+      <div
+        class="bento-item bento-item--large bento-item--featured-carousel"
+        @touchstart.passive="onFeaturedTouchStart"
+        @touchmove.passive="onFeaturedTouchMove"
+        @touchend="onFeaturedTouchEnd"
+      >
+        <!-- Fixed header, does not swipe/scroll -->
+        <div v-if="hotMatches.length" class="bento-header-row fixed-header">
+          <span class="featured-tag">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" width="12" height="12" class="tag-icon"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+            {{ t('home.hot_matches') }}
+          </span>
+          <span class="bento-badge">HOT</span>
+        </div>
+
+        <div class="carousel-viewport">
+          <div
+            class="carousel-track"
+            :style="{ transform: `translateX(-${activeFeaturedIndex * 100}%)` }"
+          >
+            <template v-if="hotMatches.length">
+              <div
+                v-for="match in hotMatches"
+                :key="match.id"
+                class="carousel-slide"
+                @click="goMatch(match.id)"
+              >
+                <div class="bento-content--vertical">
+                  <div class="bento-header-row placeholder-header" aria-hidden="true">
+                    <span class="featured-tag">
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" width="12" height="12" class="tag-icon"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+                      {{ t('home.hot_matches') }}
+                    </span>
+                    <span class="bento-badge">HOT</span>
+                  </div>
+                  
+                  <div class="featured-vs-area">
+                    <div class="featured-team">
+                      <TeamEmblem
+                        size="sm"
+                        :team-code="match.homeTeamCode"
+                        :team-name="match.homeTeamName"
+                        :logo-url="match.homeTeamLogoUrl"
+                      />
+                      <span class="featured-team-name">{{ match.homeTeamName }}</span>
+                    </div>
+                    
+                    <span class="featured-vs">VS</span>
+                    
+                    <div class="featured-team">
+                      <TeamEmblem
+                        size="sm"
+                        :team-code="match.awayTeamCode"
+                        :team-name="match.awayTeamName"
+                        :logo-url="match.awayTeamLogoUrl"
+                      />
+                      <span class="featured-team-name">{{ match.awayTeamName }}</span>
+                    </div>
+                  </div>
+                  
+                  <div class="featured-footer">
+                    <span class="featured-time">{{ formatKickoff(match.startTime) }}</span>
+                    <span class="featured-action-btn">{{ t('announcements.go_link') }} ›</span>
+                  </div>
+                </div>
+              </div>
+            </template>
+            
+            <div v-else class="carousel-slide" @click="router.push('/bet')">
+              <div class="bento-content--vertical">
+                <div class="bento-header-row">
+                  <span class="bento-icon bento-icon--bet">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" width="22" height="22"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 000 20 14.5 14.5 0 000-20M2 12h20"/></svg>
+                  </span>
+                  <span class="bento-badge">HOT</span>
+                </div>
+                <div class="bento-text">
+                  <span class="bento-title bento-title--lg">{{ t('nav.bet') }}</span>
+                  <span class="bento-desc">{{ t('home.bento_desc') }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <div v-if="hotMatches.length > 1" class="carousel-dots">
+          <span
+            v-for="(_, i) in hotMatches"
+            :key="i"
+            class="carousel-dot"
+            :class="{ active: i === activeFeaturedIndex }"
+          />
+        </div>
+      </div>
+
+      <button type="button" class="bento-item bento-item--small" @click="router.push('/wallet/recharge')">
+        <span class="bento-icon bento-icon--recharge">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20M12 15h4"/></svg>
+        </span>
+        <span class="bento-title bento-title--sm">{{ t('recharge.title') }}</span>
+      </button>
+
+      <button type="button" class="bento-item bento-item--small" @click="router.push('/bets')">
+        <span class="bento-icon bento-icon--history">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
+            <path d="M6 4h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z" stroke-linejoin="round"/>
+            <path d="M8 9h8M8 12.5h8M8 16h5" stroke-linecap="round"/>
+          </svg>
+        </span>
+        <span class="bento-title bento-title--sm">{{ t('home.view_bet_history') }}</span>
+      </button>
+    </div>
+
+    <div class="section-header">
+      <div class="section-title">{{ t('home.upcoming_tab') }}</div>
+    </div>
+
+    <div
+      v-for="(match, index) in limitedMatches"
+      :key="match.id"
+      class="match-card"
+      :class="{ 'match-card--live-anim': 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="displayedMatches.length > 6" class="view-all-container">
+      <button type="button" class="view-all-link" @click="router.push('/bet')">
+        {{ t('home.view_all_matches') }} ›
+      </button>
+    </div>
+
+    <div v-if="!loading && !displayedMatches.length" class="empty">
+      <img :src="emptyMatchesImg" alt="" class="empty-icon" />
+      <p>{{ emptyMessage }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
+.section-header {
+  margin-top: 14px;
+  margin-bottom: 10px;
+}
+
+.quick-bento {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  grid-template-rows: 54px 54px;
+  gap: 8px;
+  margin-bottom: 16px;
+  padding: 0 2px;
+}
+
+.bento-item {
+  display: flex;
+  align-items: center;
+  border-radius: 12px;
+  border: 1px solid #E5E7EB;
+  background: #FFFFFF;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
+  padding: 10px 12px;
+  text-decoration: none;
+  box-sizing: border-box;
+}
+
+.bento-item:active {
+  transform: scale(0.97);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+.bento-item--large {
+  grid-row: 1 / 3;
+  height: 100%;
+  background: linear-gradient(135deg, #F3F8FC 0%, #FFFFFF 100%);
+  border-color: rgba(0, 61, 107, 0.15);
+  position: relative;
+  overflow: hidden;
+  padding: 0;
+}
+
+.bento-item--featured-carousel {
+  /* Carousel container styles */
+}
+
+.carousel-viewport {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.carousel-track {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.carousel-slide {
+  flex: 0 0 100%;
+  min-width: 100%;
+  height: 100%;
+  padding: 10px 10px 8px 12px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.carousel-dots {
+  position: absolute;
+  bottom: 4px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  gap: 4px;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.carousel-dot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: rgba(0, 61, 107, 0.15);
+  transition: background 0.25s, width 0.25s;
+}
+
+.carousel-dot.active {
+  width: 12px;
+  border-radius: 2px;
+  background: #003D6B;
+}
+
+.featured-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 9px;
+  font-weight: 700;
+  color: #003D6B;
+  background: rgba(0, 61, 107, 0.06);
+  padding: 3px 6px;
+  border-radius: 6px;
+  line-height: 1;
+}
+
+.tag-icon {
+  color: #F97316;
+}
+
+.featured-vs-area {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+  margin: 6px 0;
+  gap: 4px;
+}
+
+.featured-team {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+
+.featured-team-name {
+  font-size: 9px;
+  font-weight: 800;
+  color: #1A1A2E;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.featured-vs {
+  font-size: 11px;
+  font-weight: 800;
+  color: #F97316;
+  font-style: italic;
+  opacity: 0.95;
+  flex-shrink: 0;
+}
+
+.featured-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  border-top: 1px dashed rgba(0, 61, 107, 0.1);
+  padding-top: 5px;
+  margin-top: 2px;
+}
+
+.featured-time {
+  font-size: 8px;
+  color: #6B7280;
+  font-weight: 600;
+}
+
+.featured-action-btn {
+  font-size: 8.5px;
+  font-weight: 800;
+  color: #003D6B;
+  background: rgba(0, 61, 107, 0.05);
+  padding: 2px 6px;
+  border-radius: 4px;
+  transition: background 0.15s;
+}
+
+.bento-item--featured:active .featured-action-btn {
+  background: rgba(0, 61, 107, 0.12);
+}
+
+.bento-item--large .bento-title {
+  color: #003D6B;
+}
+
+.bento-item--large .bento-desc {
+  color: #6B7280;
+}
+
+.bento-item--large .bento-badge {
+  background: #F97316;
+  color: #FFFFFF;
+}
+
+.bento-content--vertical {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  width: 100%;
+}
+
+.bento-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.fixed-header {
+  position: absolute;
+  top: 10px;
+  left: 12px;
+  right: 10px;
+  width: auto;
+  z-index: 20;
+  pointer-events: none;
+}
+
+.placeholder-header {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.bento-badge {
+  font-size: 8px;
+  font-weight: 800;
+  color: #FFFFFF;
+  background: #003D6B;
+  padding: 2px 5px;
+  border-radius: 4px;
+  letter-spacing: 0.05em;
+  line-height: 1;
+  transform: translateY(2px);
+}
+
+.bento-item--large:active {
+  border-color: rgba(0, 61, 107, 0.3);
+}
+
+.bento-item--small {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  justify-content: flex-start;
+  height: 100%;
+}
+
+.bento-content {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.bento-icon {
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.bento-item--large .bento-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+}
+
+.bento-icon--bet {
+  background: rgba(0, 61, 107, 0.08);
+  color: #003D6B;
+}
+
+.bento-icon--recharge {
+  background: rgba(5, 150, 105, 0.08);
+  color: #059669;
+}
+
+.bento-icon--history {
+  background: rgba(248, 151, 31, 0.08);
+  color: #E8870A;
+}
+
+.bento-text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+}
+
+.bento-title {
+  font-size: 13px;
+  font-weight: 800;
+  color: #1A1A2E;
+  text-align: left;
+}
+
+.bento-title--sm {
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.bento-title--lg {
+  font-size: 14.5px;
+  font-weight: 800;
+  margin-bottom: 2px;
+}
+
+.bento-desc {
+  font-size: 9.5px;
+  color: #6B7280;
+  font-weight: 500;
+  text-align: left;
+}
+
+.section-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: #1A1A2E;
+  margin: 0 0 8px;
+  padding-left: 10px;
+  border-left: 3px solid #003D6B;
+  line-height: 1.3;
+}
+
+.match-card {
+  position: relative;
+  isolation: isolate;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+  padding: 10px 12px;
+  min-height: 60px;
+  border: 1px solid #E5E7EB;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  background: #FFFFFF;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+  overflow: hidden;
+}
+
+.match-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(0, 61, 107, 0.02) 0%, transparent 60%);
+  z-index: 0;
+  pointer-events: none;
+}
+
+.match-card:active {
+  transform: scale(0.995);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+.match-info,
+.match-flags {
+  position: relative;
+  z-index: 1;
+}
+
+.match-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.match-teams {
+  font-weight: 700;
+  margin-bottom: 4px;
+  font-size: 14px;
+  line-height: 1.3;
+  color: #1A1A2E;
+}
+
+.match-time {
+  font-size: 12px;
+  color: #6B7280;
+  font-weight: 500;
+}
+
+.match-flags {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  max-width: 46%;
+}
+
+.vs-arena {
+  position: relative;
+  flex-shrink: 0;
+  width: 52px;
+  height: 42px;
+  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(0, 102, 204, 0.6)) drop-shadow(0 0 8px rgba(0, 91, 159, 0.35));
+  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(0, 91, 159, 0) 0%,
+    rgba(0, 102, 204, 0.7) 28%,
+    #0066CC 50%,
+    rgba(0, 91, 159, 0.7) 72%,
+    rgba(0, 61, 107, 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: 40px;
+  height: auto;
+  object-fit: contain;
+  filter: drop-shadow(0 0 3px rgba(0, 61, 107, 0.25));
+}
+
+.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(0, 61, 107, 0.2));
+  }
+
+  50% {
+    opacity: 1;
+    filter:
+      drop-shadow(0 0 3px rgba(0, 102, 204, 0.5))
+      drop-shadow(0 0 6px rgba(0, 61, 107, 0.25));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vs-img {
+    animation: none;
+    filter: drop-shadow(0 0 3px rgba(0, 61, 107, 0.25));
+  }
+
+  .hz-path,
+  .hz-beam {
+    animation: none;
+    opacity: 0;
+  }
+}
+
+.empty {
+  text-align: center;
+  color: #6B7280;
+  padding: 28px 16px;
+  font-weight: 600;
+}
+
+.empty-icon {
+  width: 72px;
+  height: 72px;
+  margin-bottom: 10px;
+}
+
+.view-all-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 12px;
+  margin-bottom: 24px;
+  padding: 0 2px;
+}
+
+.view-all-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 700;
+  color: #003D6B;
+  cursor: pointer;
+  padding: 6px 12px;
+  outline: none;
+  transition: all 0.2s ease;
+}
+
+.view-all-link:hover {
+  opacity: 0.85;
+  text-decoration: underline;
+}
+
+.view-all-link:active {
+  transform: scale(0.97);
+  opacity: 0.7;
+}
+</style>
diff --git a/apps/player/src/views/MobileInboxHubView.vue b/apps/player/src/views/MobileInboxHubView.vue
new file mode 100644
index 0000000..52600d5
--- /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'" />
+    <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: var(--bg-card);
+  color: var(--primary);
+  font-size: 22px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.page-header h1 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--primary-dark, #002847);
+}
+
+.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(--primary);
+  border-bottom-color: var(--primary);
+}
+
+.hub-tab-label {
+  line-height: 1.2;
+}
+
+.hub-tab-badge {
+  min-width: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background: var(--primary);
+  color: #fff;
+  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-active);
+  border-radius: 8px;
+  background: rgba(0, 61, 107, 0.06);
+  color: var(--primary);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.action-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.action-btn.danger {
+  border-color: rgba(220, 38, 38, 0.35);
+  background: rgba(220, 38, 38, 0.06);
+  color: #dc2626;
+}
+</style>
diff --git a/apps/player/src/views/MobileMatchDetailView.vue b/apps/player/src/views/MobileMatchDetailView.vue
new file mode 100644
index 0000000..752a301
--- /dev/null
+++ b/apps/player/src/views/MobileMatchDetailView.vue
@@ -0,0 +1,993 @@
+<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-top: 0;
+  padding-bottom: 16px;
+  background: #E8EDF2;
+}
+
+.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: 0;
+  z-index: 50;
+  margin-bottom: 8px;
+  background: #FFFFFF;
+  border-bottom: 1px solid #CBD5E1;
+}
+
+.toolbar-title {
+  flex: 1;
+  text-align: center;
+  font-size: 13px;
+  font-weight: 700;
+  color: #003D6B;
+  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 #E5E7EB;
+  background: #F5F7FA;
+  color: #003D6B;
+  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 12px 10px;
+  padding: 14px 12px 16px;
+  overflow: hidden;
+  background: #FFFFFF;
+  border: 1px solid #CBD5E1;
+  border-radius: 8px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+}
+
+.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: 700;
+  padding: 4px 14px;
+  border-radius: 0 6px 0 10px;
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
+.status-tag--settled {
+  background: #E8EDF2;
+  color: #4B5563;
+  border-bottom: 1px solid #D1D5DB;
+  border-left: 1px solid #D1D5DB;
+}
+
+.status-tag--pending {
+  background: #FEF3C7;
+  color: #92400E;
+  border-bottom: 1px solid #FDE68A;
+  border-left: 1px solid #FDE68A;
+}
+
+/* -- market panel smaller status tag -- */
+.market-status-tag {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 5;
+  font-size: 10px;
+  font-weight: 700;
+  padding: 3px 10px;
+  border-radius: 0 4px 0 8px;
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
+.market-status-tag--settled {
+  background: #E8EDF2;
+  color: #4B5563;
+  border-bottom: 1px solid #D1D5DB;
+  border-left: 1px solid #D1D5DB;
+}
+
+.market-status-tag--pending {
+  background: #FEF3C7;
+  color: #92400E;
+  border-bottom: 1px solid #FDE68A;
+  border-left: 1px solid #FDE68A;
+}
+
+.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: #6B7280;
+  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: #003D6B;
+  text-align: center;
+}
+
+.result-stats-section {
+  margin: 0 10px 12px;
+  padding: 12px;
+  border: 1px solid #CBD5E1;
+  border-radius: 8px;
+  background: #FFFFFF;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+}
+
+.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: 700;
+  color: #003D6B;
+}
+
+.result-stats-head span {
+  min-width: 0;
+  max-width: 58%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  color: #6B7280;
+}
+
+.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: #F5F7FA;
+  border: 1px solid #E5E7EB;
+}
+
+.result-stat-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  color: #6B7280;
+}
+
+.result-stat-value {
+  flex-shrink: 0;
+  font-size: 14px;
+  line-height: 1;
+  font-weight: 700;
+  color: #1A1A2E;
+}
+
+.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: 700;
+  color: #1A1A2E;
+  text-align: center;
+  line-height: 1.25;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+/* VS arena -- blue themed */
+.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(0, 102, 204, 0.6)) drop-shadow(0 0 8px rgba(0, 91, 159, 0.35));
+  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(0, 91, 159, 0) 0%,
+    rgba(0, 102, 204, 0.7) 28%,
+    #0066CC 50%,
+    rgba(0, 91, 159, 0.7) 72%,
+    rgba(0, 61, 107, 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(0, 61, 107, 0.2));
+  }
+  50% {
+    opacity: 1;
+    filter: drop-shadow(0 0 3px rgba(0, 102, 204, 0.5)) drop-shadow(0 0 6px rgba(0, 61, 107, 0.25));
+  }
+}
+
+@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: 8px;
+  padding: 4px 0;
+}
+
+.market-group {
+  border-radius: 8px;
+  border: 1px solid #CBD5E1;
+  background: #FFFFFF;
+  overflow: hidden;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.market-group.open {
+  border-color: #9CA3AF;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+
+.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: 6px;
+  border: 1px solid #E5E7EB;
+  background: #F5F7FA;
+  color: #003D6B;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.state {
+  text-align: center;
+  padding: 48px;
+  color: #6B7280;
+}
+
+.cs-toast {
+  text-align: center;
+  font-size: 12px;
+  color: #003D6B;
+  padding: 2px 0 6px;
+}
+
+/* -- my bets -- */
+.my-bets-section {
+  padding: 0 12px;
+  margin-bottom: 12px;
+}
+
+.my-bets-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: #1A1A2E;
+  margin: 0 0 8px;
+}
+
+.my-bets-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.my-bet-card {
+  background: #FFFFFF;
+  border: 1px solid #CBD5E1;
+  border-radius: 8px;
+  padding: 10px 12px;
+  cursor: pointer;
+  transition: background 0.15s;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+}
+
+.my-bet-card:active {
+  background: #F5F7FA;
+}
+
+.bet-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.bet-type {
+  font-size: 12px;
+  font-weight: 700;
+  color: #1A1A2E;
+  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: #E6F4EA;
+  color: #059669;
+}
+
+.bet-status-lost {
+  background: #FDE8E8;
+  color: #DC2626;
+}
+
+.bet-status-pending {
+  background: #FEF3C7;
+  color: #D97706;
+}
+
+.bet-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.bet-stake {
+  font-size: 11px;
+  color: #6B7280;
+}
+
+.bet-return {
+  font-size: 13px;
+  font-weight: 700;
+}
+
+</style>
diff --git a/apps/player/src/views/MobileMessageDetailView.vue b/apps/player/src/views/MobileMessageDetailView.vue
new file mode 100644
index 0000000..44eea2a
--- /dev/null
+++ b/apps/player/src/views/MobileMessageDetailView.vue
@@ -0,0 +1,396 @@
+<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 { formatMoney } from '../utils/localeDisplay';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import ConfirmDialog from '../components/ConfirmDialog.vue';
+import { sanitizeAnnouncementHtml } from '../utils/html';
+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 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();
+});
+</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>
+</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: var(--bg-card);
+  color: var(--primary);
+  font-size: 22px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.page-header h1 {
+  margin: 0;
+  flex: 1;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--primary-dark, #002847);
+}
+
+.delete-header-btn {
+  border: 1px solid rgba(220, 38, 38, 0.35);
+  border-radius: 8px;
+  padding: 6px 10px;
+  background: rgba(220, 38, 38, 0.06);
+  color: #dc2626;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.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: var(--text-muted);
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.status-badge.unread {
+  color: var(--primary);
+  background: rgba(0, 61, 107, 0.08);
+}
+
+.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-active);
+  border-radius: 8px;
+  padding: 8px 14px;
+  background: rgba(0, 61, 107, 0.06);
+  color: var(--primary);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.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: var(--primary-dark, #002847);
+}
+
+.detail-body {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.75;
+  color: #374151;
+}
+
+.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(--primary);
+}
+
+.reason-box {
+  margin-top: 18px;
+  padding: 14px;
+  border-radius: 10px;
+  border: 1px solid rgba(220, 38, 38, 0.2);
+  background: rgba(220, 38, 38, 0.05);
+}
+
+.reason-label {
+  margin: 0 0 8px;
+  font-size: 12px;
+  color: #dc2626;
+  font-weight: 700;
+}
+
+.reason-text {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.55;
+  color: #b91c1c;
+}
+
+.action-btn {
+  margin-top: 24px;
+  width: 100%;
+  padding: 11px 14px;
+  border: 1px solid var(--border-active);
+  border-radius: 8px;
+  background: rgba(0, 61, 107, 0.06);
+  color: var(--primary);
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+  display: block;
+}
+</style>
diff --git a/apps/player/src/views/MobileMyBetsView.vue b/apps/player/src/views/MobileMyBetsView.vue
new file mode 100644
index 0000000..f0930cc
--- /dev/null
+++ b/apps/player/src/views/MobileMyBetsView.vue
@@ -0,0 +1,225 @@
+<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),
+});
+</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>
+</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: #6B7280;
+  background: #FFFFFF;
+  border: 1px solid #E5E7EB;
+  transition: all 0.2s;
+}
+
+.filter-tab.active {
+  color: #003D6B;
+  background: rgba(0, 61, 107, 0.08);
+  border-color: #003D6B;
+}
+
+.state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+  color: #6B7280;
+  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: #6B7280;
+  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..895f55a
--- /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: #6B7280;
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 6px;
+  padding: 0;
+}
+
+.page-title {
+  font-size: 16px;
+  font-weight: 800;
+  color: #003D6B;
+  letter-spacing: 0.04em;
+}
+
+.avatar-card,
+.form-card {
+  background: #FFFFFF;
+  border: 1px solid #E5E7EB;
+  border-radius: 8px;
+}
+
+.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 #E5E7EB;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #E8EDF2;
+}
+
+.avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top;
+}
+
+.avatar-change-btn {
+  padding: 7px 18px;
+  border-radius: 999px;
+  border: 1px solid #003D6B;
+  background: rgba(0, 61, 107, 0.04);
+  color: #003D6B;
+  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: #6B7280;
+}
+
+.section-divider {
+  height: 1px;
+  background: #E5E7EB;
+  margin: 6px 0 12px;
+}
+
+.section-toggle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 0 12px;
+  background: none;
+  color: #1A1A2E;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.chevron {
+  color: #6B7280;
+  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: #6B7280;
+  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 #E5E7EB;
+  border-radius: 0 6px 6px 0;
+  background: #F5F7FA;
+  color: #003D6B;
+  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: #6B7280;
+  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 #E5E7EB;
+  background: #FFFFFF;
+  color: #1A1A2E;
+  transition: border-color 0.2s;
+}
+
+.field-input:focus {
+  outline: none;
+  border-color: #0066CC;
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
+}
+
+.field-input:-webkit-autofill,
+.field-input:-webkit-autofill:hover,
+.field-input:-webkit-autofill:focus {
+  -webkit-text-fill-color: #1A1A2E;
+  box-shadow: 0 0 0 1000px #FFFFFF inset;
+  border: 1px solid #E5E7EB;
+}
+
+.field-input::placeholder {
+  color: rgba(107, 114, 128, 0.6);
+}
+
+.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: #059669;
+}
+
+.msg.err {
+  color: #DC2626;
+}
+</style>
diff --git a/apps/player/src/views/MobileProfileView.vue b/apps/player/src/views/MobileProfileView.vue
new file mode 100644
index 0000000..8e4c194
--- /dev/null
+++ b/apps/player/src/views/MobileProfileView.vue
@@ -0,0 +1,745 @@
+<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 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 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">{{ t('wallet.balance') }}</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">{{ t('wallet.card_holder') }}</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('cashback.total_received') }}</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.unsettled') }}</span>
+            <span class="bank-card-stat">{{ formatMoney(profileRaw?.wallet?.frozenBalance, locale) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="quick-actions">
+      <RouterLink to="/wallet/detail" class="qa-item">
+        <span class="qa-icon qa-icon--wallet">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="24" height="24"><path d="M21 12V7H5a2 2 0 010-4h14v4"/><path d="M3 5v14a2 2 0 002 2h16v-5"/><path d="M18 12a2 2 0 100 4 2 2 0 000-4z"/></svg>
+        </span>
+        <span class="qa-label">{{ t('wallet.view_all') }}</span>
+      </RouterLink>
+      <RouterLink to="/wallet/recharge" class="qa-item">
+        <span class="qa-icon qa-icon--recharge">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="24" height="24"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
+        </span>
+        <span class="qa-label">{{ t('recharge.title') }}</span>
+      </RouterLink>
+      <RouterLink to="/profile/cashbacks" class="qa-item">
+        <span class="qa-icon qa-icon--cashback">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="24" height="24"><circle cx="12" cy="12" r="8"/><path d="M12 8v4l2.5 2.5"/></svg>
+        </span>
+        <span class="qa-label">{{ t('wallet.view_cashbacks') }}</span>
+      </RouterLink>
+      <RouterLink to="/wallet/recharge/history" class="qa-item">
+        <span class="qa-icon qa-icon--history">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="24" height="24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h4"/></svg>
+        </span>
+        <span class="qa-label">{{ t('recharge.history_title') }}</span>
+      </RouterLink>
+    </div>
+
+    <section class="settings-group">
+      <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: 6px 0 10px;
+}
+
+.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: #6B7280;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.retry-btn {
+  padding: 8px 24px;
+  border-radius: 6px;
+  border: 1px solid #003D6B;
+  background: transparent;
+  color: #005B9F;
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.retry-btn:active {
+  background: rgba(0, 61, 107, 0.08);
+}
+
+.wallet-banner {
+  position: relative;
+  width: 100%;
+  margin-bottom: 10px;
+  aspect-ratio: 1.75 / 1;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.wallet-banner::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.wallet-banner-img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  object-position: center center;
+  pointer-events: none;
+  user-select: none;
+}
+
+.wallet-banner-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+  background: linear-gradient(
+    135deg,
+    #003D6B 0%,
+    #005B9F 50%,
+    #003D6B 100%
+  );
+}
+
+.card-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  padding: 10px 14px 10px;
+  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: 18px;
+  height: 18px;
+  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: #FFFFFF;
+  letter-spacing: 0.14em;
+  line-height: 1;
+}
+
+.bank-card-type {
+  font-size: 8px;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  color: rgba(255, 255, 255, 0.6);
+  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.75);
+  line-height: 1.3;
+}
+
+.recharge-btn {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 5px 10px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: #FFFFFF;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  line-height: 1;
+  text-decoration: none;
+  transition: background 0.15s ease;
+}
+
+.recharge-btn:active {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.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: 1px 0;
+  gap: 3px;
+}
+
+.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: #FFFFFF;
+  line-height: 1.1;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.balance-amount {
+  margin: 0;
+}
+
+.balance-amount--xl { font-size: clamp(22px, 5.6vw, 27px); }
+.balance-amount--lg { font-size: clamp(19px, 5vw, 24px); }
+.balance-amount--md { font-size: clamp(16px, 4.4vw, 20px); }
+.balance-amount--sm { font-size: clamp(14px, 3.8vw, 17px); }
+.balance-amount--xs { font-size: clamp(12px, 3.2vw, 14px); }
+
+.bank-card-footer {
+  flex-shrink: 0;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+  padding-top: 6px;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.bank-card-field {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  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: #FFFFFF;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  line-height: 1.2;
+  word-break: break-all;
+}
+
+.bank-card-stat {
+  font-size: 12px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: #FFFFFF;
+  line-height: 1.2;
+}
+
+
+.quick-actions {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.qa-item {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 4px 10px;
+  border-radius: 10px;
+  background: #FFFFFF;
+  border: 1px solid #CBD5E1;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  text-decoration: none;
+  cursor: pointer;
+  transition: transform 0.15s, box-shadow 0.15s;
+}
+
+.qa-item:active {
+  transform: scale(0.96);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.qa-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.qa-icon--wallet {
+  background: rgba(0, 61, 107, 0.1);
+  color: #003D6B;
+}
+
+.qa-icon--recharge {
+  background: rgba(5, 150, 105, 0.1);
+  color: #059669;
+}
+
+.qa-icon--cashback {
+  background: rgba(248, 151, 31, 0.1);
+  color: #E8870A;
+}
+
+.qa-icon--history {
+  background: rgba(99, 102, 241, 0.1);
+  color: #6366F1;
+}
+
+.qa-icon--inbox {
+  background: rgba(14, 165, 233, 0.1);
+  color: #0EA5E9;
+}
+
+.qa-label {
+  font-size: 10px;
+  font-weight: 600;
+  color: #1A1A2E;
+  text-align: center;
+  line-height: 1.2;
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  min-height: 2.4em;
+  max-width: 100%;
+  word-break: break-word;
+}
+
+.settings-group {
+  background: #FFFFFF;
+  border: 1px solid #E5E7EB;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.settings-cell {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  width: 100%;
+  min-height: 42px;
+  padding: 0 14px;
+  background: none;
+  color: #1A1A2E;
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: none;
+  border-bottom: 1px solid #E5E7EB;
+}
+
+.settings-cell:last-child {
+  border-bottom: none;
+}
+
+.settings-cell:active {
+  background: #F5F7FA;
+}
+
+.settings-cell--stack {
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 14px 12px;
+  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: #6B7280;
+}
+
+.cell-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.cell-label {
+  color: #1A1A2E;
+}
+
+.cell-chevron {
+  color: #6B7280;
+  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 14px 12px;
+  border-bottom: 1px solid #E5E7EB;
+}
+
+.lang-segment {
+  display: flex;
+  gap: 6px;
+}
+
+.lang-opt {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-height: 30px;
+  padding: 0 5px;
+  border-radius: 6px;
+  border: 1px solid #E5E7EB;
+  background: #FFFFFF;
+  color: #6B7280;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.lang-opt.active {
+  border-color: #003D6B;
+  color: #003D6B;
+  background: rgba(0, 61, 107, 0.06);
+}
+
+.logout-btn {
+  width: 100%;
+  margin-top: 10px;
+  min-height: 40px;
+  padding: 0 14px;
+  border-radius: 8px;
+  border: 1px solid #DC2626;
+  background: #FFFFFF;
+  color: #DC2626;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.logout-btn:active {
+  background: rgba(220, 38, 38, 0.06);
+}
+
+.rules-body {
+  font-size: 12px;
+  line-height: 1.55;
+  color: #6B7280;
+}
+
+.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..085a779
--- /dev/null
+++ b/apps/player/src/views/MobileRechargeHistoryView.vue
@@ -0,0 +1,843 @@
+<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';
+
+const router = useRouter();
+const { t, locale } = useI18n();
+
+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;
+    } 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.order_detail')">
+          <button type="button" class="detail-close" :aria-label="t('common.close')" @click="closeDetail">✕</button>
+
+          <h3 class="detail-title">{{ t('recharge.order_detail') }}</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 16px 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; color: #1A1A2E; }
+.back-btn { background: none; border: none; color: #003D6B; font-size: 24px; cursor: pointer; padding: 0 8px; }
+.recharge-btn { background: none; border: none; color: #003D6B; font-size: 13px; cursor: pointer; font-weight: 600; }
+.state { display: flex; justify-content: center; padding: 48px; }
+.empty { text-align: center; color: #6B7280; 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: #FFFFFF;
+  border: 1px solid #E5E7EB;
+  border-radius: 12px;
+  padding: 16px;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+.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, #003D6B, transparent);
+}
+.order-card.rejected {
+  background: #FFFFFF;
+  border-color: rgba(220, 38, 38, 0.25);
+}
+.order-card.rejected::before {
+  background: linear-gradient(90deg, transparent, #DC2626, transparent);
+}
+.order-card.rejected .order-amount {
+  background: none;
+  -webkit-background-clip: unset;
+  background-clip: unset;
+  color: #6B7280;
+}
+.order-card.rejected .info-label {
+  color: #6B7280;
+}
+.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(0, 61, 107, 0.08); color: #005B9F; }
+.method-badge.usdt { background: rgba(5, 150, 105, 0.08); color: #059669; }
+.status-badge { font-size: 12px; font-weight: 700; }
+.status-pending { color: #F8971F; }
+.status-approved { color: #059669; }
+.status-rejected { color: #DC2626; }
+.order-body { }
+.order-amount {
+  font-size: 22px;
+  font-weight: 900;
+  margin-bottom: 4px;
+  color: #003D6B;
+}
+.approved-amount { font-size: 12px; color: #059669; margin-bottom: 6px; font-weight: 600; }
+.order-info-row { margin-bottom: 8px; }
+.info-label { font-size: 13px; color: #003D6B; 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: #6B7280; }
+.time-value { font-size: 11px; color: #1A1A2E; font-variant-numeric: tabular-nums; }
+.order-remark {
+  font-size: 12px;
+  color: #003D6B;
+  background: rgba(0, 61, 107, 0.04);
+  padding: 6px 10px;
+  border-radius: 6px;
+  margin-top: 6px;
+  border-left: 2px solid #003D6B;
+  line-height: 1.45;
+  word-break: break-word;
+}
+.reject-reason {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #DC2626;
+  background: transparent;
+  padding: 6px 0 0;
+  border-radius: 0;
+  border: none;
+  border-top: 1px solid rgba(220, 38, 38, 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 #E5E7EB;
+}
+.card-detail-summary {
+  font-size: 11px;
+  color: #6B7280;
+  font-weight: 600;
+}
+.card-detail-link {
+  font-size: 11px;
+  color: #003D6B;
+  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: #003D6B;
+  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: #6B7280;
+  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.3);
+  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: #FFFFFF;
+  border: 1px solid #E5E7EB;
+  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.12);
+}
+
+.detail-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: #6B7280;
+  font-size: 13px;
+  cursor: pointer;
+  line-height: 1;
+}
+
+.detail-title {
+  margin: 0 28px 12px 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: #1A1A2E;
+}
+
+.detail-summary {
+  margin-bottom: 14px;
+  padding: 12px;
+  border-radius: 10px;
+  background: #F5F7FA;
+  border: 1px solid #E5E7EB;
+}
+
+.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: #003D6B;
+  letter-spacing: -0.02em;
+}
+
+.detail-method-name {
+  font-size: 12px;
+  color: #6B7280;
+  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: #6B7280;
+  flex-shrink: 0;
+}
+
+.detail-value {
+  font-size: 12px;
+  color: #1A1A2E;
+  text-align: right;
+  word-break: break-word;
+}
+
+.detail-summary .order-remark {
+  margin-top: 8px;
+  font-size: 11px;
+  color: #6B7280;
+  background: transparent;
+  padding: 6px 0 0;
+  border-radius: 0;
+  border: none;
+  border-top: 1px solid #E5E7EB;
+  line-height: 1.45;
+  word-break: break-word;
+}
+
+.detail-summary .reject-reason {
+  margin-top: 8px;
+  font-size: 11px;
+  color: #DC2626;
+  background: transparent;
+  padding: 6px 0 0;
+  border-radius: 0;
+  border: none;
+  border-top: 1px solid rgba(220, 38, 38, 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 #E5E7EB;
+}
+
+.detail-audit-title {
+  margin: 0 0 10px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #6B7280;
+  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: #E5E7EB;
+  flex-shrink: 0;
+}
+
+.audit-line {
+  flex: 1;
+  width: 1px;
+  min-height: 10px;
+  margin: 3px 0;
+  background: #E5E7EB;
+}
+
+.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: #1A1A2E;
+  line-height: 1.35;
+}
+
+.audit-step-time {
+  font-size: 10px;
+  color: #6B7280;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.audit-step-actor {
+  margin: 2px 0 0;
+  font-size: 11px;
+  color: #6B7280;
+  line-height: 1.4;
+}
+
+.audit-step-credited {
+  margin: 3px 0 0;
+  font-size: 11px;
+  font-weight: 500;
+  color: #059669;
+  line-height: 1.4;
+}
+
+.audit-step-note {
+  margin: 4px 0 0;
+  font-size: 11px;
+  color: #6B7280;
+  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(220, 38, 38, 0.22);
+}
+
+.audit-step-box-label {
+  font-size: 10px;
+  font-weight: 500;
+  color: #DC2626;
+  letter-spacing: 0.01em;
+}
+
+.audit-step-box-text {
+  font-size: 11px;
+  color: #DC2626;
+}
+
+.audit-step--submitted .audit-dot {
+  background: #003D6B;
+}
+.audit-step--approved .audit-dot {
+  background: #059669;
+}
+.audit-step--rejected .audit-dot {
+  background: #DC2626;
+}
+.audit-step--revoked .audit-dot {
+  background: #6B7280;
+}
+.audit-step--reopened .audit-dot {
+  background: #003D6B;
+}
+
+.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..74e2b2a
--- /dev/null
+++ b/apps/player/src/views/MobileRechargeView.vue
@@ -0,0 +1,683 @@
+<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');
+  }
+
+  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 12px 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; color: #1A1A2E; }
+.back-btn { background: none; border: none; color: #003D6B; font-size: 22px; cursor: pointer; padding: 0 6px; }
+.history-btn { background: none; border: none; color: #003D6B; 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: #DC2626;
+  background: rgba(220, 38, 38, 0.06);
+  border: 1px solid rgba(220, 38, 38, 0.2);
+}
+
+.type-tabs {
+  display: flex; margin-bottom: 12px;
+  border-radius: 6px; overflow: hidden;
+  border: 1px solid #E5E7EB;
+}
+.tab {
+  flex: 1; padding: 8px; border: none;
+  background: #FFFFFF;
+  color: #6B7280; font-weight: 700; font-size: 13px;
+  cursor: pointer; transition: all 0.2s;
+}
+.tab.active {
+  background: #003D6B; color: #FFFFFF;
+}
+
+.methods-list {
+  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
+}
+.method-pill {
+  display: flex; flex-direction: column; gap: 1px;
+  background: #FFFFFF;
+  border: 1px solid #E5E7EB;
+  border-radius: 6px; padding: 6px 12px;
+  text-align: left; cursor: pointer;
+  transition: border-color 0.15s;
+}
+.method-pill.selected {
+  border-color: #0066CC;
+  background: rgba(0, 102, 204, 0.04);
+}
+.pill-name { font-weight: 700; font-size: 12px; color: #1A1A2E; }
+.pill-sub { font-size: 10px; color: #6B7280; }
+.empty-methods { text-align: center; color: #6B7280; 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: linear-gradient(135deg, #003D6B 0%, #005B9F 50%, #003D6B 100%);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.bank-card-shine {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    115deg,
+    transparent 30%,
+    rgba(255, 255, 255, 0.03) 45%,
+    rgba(255, 255, 255, 0.06) 50%,
+    rgba(255, 255, 255, 0.03) 55%,
+    transparent 70%
+  );
+  pointer-events: none;
+}
+
+.bank-card-deco {
+  position: absolute;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  pointer-events: none;
+}
+
+.bank-card-deco--1 {
+  width: 180px;
+  height: 180px;
+  right: -60px;
+  bottom: -80px;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 70%);
+}
+
+.bank-card-deco--2 {
+  width: 100px;
+  height: 100px;
+  right: 40px;
+  bottom: 20px;
+  border-color: rgba(255, 255, 255, 0.05);
+}
+
+.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: #FFFFFF;
+  text-align: right;
+  letter-spacing: 0.5px;
+  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: #FFFFFF;
+  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(255, 255, 255, 0.25);
+  background: rgba(255, 255, 255, 0.1);
+  color: #FFFFFF;
+  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(255, 255, 255, 0.2);
+}
+
+.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.6);
+}
+
+.bank-card-holder-name {
+  font-size: 14px;
+  font-weight: 700;
+  color: #FFFFFF;
+  letter-spacing: 0.04em;
+  word-break: break-all;
+}
+
+.bank-card-type {
+  flex-shrink: 0;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.18em;
+  color: rgba(255, 255, 255, 0.5);
+  font-style: italic;
+}
+
+.method-info {
+  background: #FFFFFF;
+  border-radius: 8px; padding: 10px 12px;
+  margin-bottom: 12px;
+  border: 1px solid #E5E7EB;
+}
+.info-row {
+  display: flex; justify-content: space-between; align-items: baseline;
+  padding: 6px 0;
+  border-bottom: 1px solid #E5E7EB;
+}
+.info-row:last-child { border-bottom: none; }
+.info-label { font-size: 11px; color: #6B7280; flex-shrink: 0; }
+.info-value {
+  font-size: 13px; font-weight: 600;
+  word-break: break-all; text-align: right;
+  max-width: 60%;
+  color: #1A1A2E;
+}
+.copyable {
+  cursor: pointer; color: #0066CC;
+  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; border: 1px solid #E5E7EB; }
+
+.form-section { margin-bottom: 12px; }
+.form-section label {
+  display: block; font-size: 11px; font-weight: 700;
+  color: #6B7280; margin-bottom: 4px;
+}
+.amount-input {
+  width: 100%; padding: 10px; background: #FFFFFF;
+  border: 1px solid #E5E7EB; border-radius: 6px;
+  color: #1A1A2E; font-size: 16px; font-weight: 700;
+  box-sizing: border-box;
+}
+.amount-input:focus { border-color: #0066CC; outline: none; box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15); }
+
+.upload-area {
+  border: 1px dashed #0066CC;
+  border-radius: 6px; padding: 16px;
+  text-align: center; position: relative;
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer;
+  background: rgba(0, 102, 204, 0.02);
+}
+.upload-area input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
+.upload-hint { font-size: 12px; color: #6B7280; }
+.compress-hint { font-size: 12px; color: #003D6B; }
+.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.6); border: none; color: #fff;
+  width: 20px; height: 20px; border-radius: 50%;
+  cursor: pointer; font-size: 11px;
+}
+
+.btn-submit {
+  width: 100%; padding: 12px;
+  background: #003D6B;
+  color: #FFFFFF; border: none; border-radius: 6px;
+  font-size: 14px; font-weight: 800;
+  cursor: pointer; margin-top: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+.btn-submit:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.success-state { text-align: center; padding: 40px 16px; }
+.success-icon { font-size: 40px; color: #059669; margin-bottom: 10px; }
+.success-state h3 { margin: 0 0 6px; font-size: 16px; color: #1A1A2E; }
+.order-no { font-family: monospace; color: #003D6B; font-size: 13px; margin: 4px 0; }
+.success-hint { font-size: 12px; color: #6B7280; margin-bottom: 20px; }
+.btn-primary {
+  background: #003D6B;
+  color: #FFFFFF; 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..a5f680b
--- /dev/null
+++ b/apps/player/src/views/MobileWalletDetailView.vue
@@ -0,0 +1,391 @@
+<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">
+    <header class="top-bar sub-toolbar">
+      <button class="back-btn" type="button" @click="router.back()">&#x2039; {{ t('history.back') }}</button>
+    </header>
+
+    <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 class="stats-panel" :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-col-left">
+            <span class="tx-type">{{ txLabel(tx) }}</span>
+            <span v-if="txSubtitle(tx)" class="tx-summary">{{ txSubtitle(tx) }}</span>
+            <span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
+          </div>
+          <div class="tx-col-right">
+            <span :class="txAmountClass(tx.amount)">
+              {{ formatMoney(tx.amount, locale) }}
+            </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;
+}
+
+.stats-panel {
+  margin-bottom: var(--space-section);
+}
+
+.top-bar {
+  margin-bottom: 4px;
+}
+
+.back-btn {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 15px;
+  font-weight: 500;
+  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: 8px;
+  margin-bottom: var(--space-section);
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.filter-tabs::-webkit-scrollbar { display: none; }
+
+.filter-tab {
+  flex-shrink: 0;
+  padding: 8px 16px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  transition: background 0.2s, border-color 0.2s, color 0.2s;
+}
+
+.filter-tab.active {
+  color: var(--text);
+  background: var(--bg-elevated);
+  border-color: var(--border-strong);
+  font-weight: 600;
+}
+
+.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;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.tx-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  text-align: left;
+  font-size: 14px;
+  padding: 12px 14px;
+  border: none;
+  border-bottom: 1px solid var(--border);
+  background: transparent;
+  cursor: pointer;
+}
+
+.tx-row:last-child {
+  border-bottom: none;
+}
+
+.tx-row:active {
+  background: var(--bg-hover);
+}
+
+.tx-col-left {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+  flex: 1;
+}
+
+.tx-col-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.tx-summary {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tx-type { font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
+.pos { color: var(--success); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
+.neg { color: var(--text); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
+.zero { color: var(--text-muted); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
+.tx-time { font-size: 11px; color: var(--text-dim); }
+.tx-arrow { font-size: 15px; color: var(--text-dim); font-weight: 400; 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: var(--text-muted);
+  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..c2c5eb1
--- /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>
+
+    <header class="top-bar sub-toolbar">
+      <button class="back-btn" type="button" @click="router.back()">‹ {{ t('history.back') }}</button>
+    </header>
+
+    <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);
+  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: var(--text-muted);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.hero {
+  border-radius: var(--radius);
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 12px;
+  text-align: center;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+}
+
+.hero.pos {
+  border-color: rgba(46, 204, 113, 0.35);
+  background: linear-gradient(135deg, rgba(46, 204, 113, 0.16), rgba(46, 204, 113, 0.05));
+}
+
+.hero.neg {
+  border-color: rgba(255, 255, 255, 0.35);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
+}
+
+.hero.zero {
+  border-color: var(--border);
+  background: var(--bg-elevated);
+}
+
+.hero-type {
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.hero-summary {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  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(--success); }
+.hero.neg .hero-amount { color: var(--primary); }
+.hero.zero .hero-amount { color: var(--text-muted); }
+
+.hero-time {
+  font-size: 11px;
+  color: var(--neutral);
+  font-weight: 600;
+}
+
+.section {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: var(--space-card) 16px;
+  margin-bottom: var(--space-section);
+}
+
+.section-title {
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--text-muted);
+  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: var(--text-muted);
+}
+
+.sum-row span:last-child {
+  color: var(--text);
+  font-weight: 700;
+  text-align: right;
+  word-break: break-all;
+}
+
+.pos { color: var(--success) !important; }
+.neg { color: var(--primary) !important; }
+.zero { color: var(--text-muted) !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);
+  background: var(--surface-accent);
+  color: var(--primary-light);
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.tx-id {
+  font-family: ui-monospace, monospace;
+  font-size: 12px;
+  color: var(--text-muted);
+  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..8df0075
--- /dev/null
+++ b/apps/player/src/views/MobileWalletView.vue
@@ -0,0 +1,588 @@
+<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 } from '../utils/localeDisplay';
+
+import { txTypeKey, txDisplayType, txAmountClass, txSummaryLabel } from '../utils/walletTx';
+
+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 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 { data } = await api.get('/player/wallet/transactions', { params: { page: 1 } });
+
+    const result = data.data ?? { items: [] };
+
+    items.value = (result.items ?? []).slice(0, PREVIEW_COUNT);
+
+  } 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="wallet-links">
+
+        <button type="button" class="wallet-link" @click="goCashbacks">
+
+          {{ t('wallet.view_cashbacks') }}
+
+        </button>
+
+        <button
+
+          v-if="items.length"
+
+          type="button"
+
+          class="wallet-link wallet-link--primary"
+
+          @click="router.push('/wallet/detail')"
+
+        >
+
+          {{ t('wallet.view_all') }}
+
+        </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-col-left">
+
+            <span class="tx-type">{{ txLabel(tx) }}</span>
+
+            <span v-if="txSubtitle(tx)" class="tx-summary">{{ txSubtitle(tx) }}</span>
+
+            <span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
+
+          </div>
+
+          <div class="tx-col-right">
+
+            <span :class="txAmountClass(tx.amount)">
+
+              {{ formatMoney(tx.amount, locale) }}
+
+            </span>
+
+            <span class="tx-arrow" aria-hidden="true">›</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: 500;
+
+  font-size: 14px;
+
+}
+
+
+
+.loading-text {
+
+  font-size: 13px;
+
+}
+
+
+
+.wallet-links {
+
+  display: flex;
+
+  align-items: center;
+
+  justify-content: space-between;
+
+  gap: 12px;
+
+  margin: 0 0 12px;
+
+}
+
+
+
+.wallet-link {
+
+  background: none;
+
+  border: none;
+
+  padding: 4px 0;
+
+  font-size: 13px;
+
+  font-weight: 500;
+
+  color: var(--text-muted);
+
+  cursor: pointer;
+
+}
+
+
+
+.wallet-link--primary {
+
+  color: var(--text);
+
+  font-weight: 600;
+
+}
+
+
+
+.wallet-link:active {
+
+  opacity: 0.72;
+
+}
+
+
+
+.tx-list {
+
+  margin-bottom: 0;
+
+  background: var(--gradient-card);
+
+  border: 1px solid rgba(255, 255, 255, 0.11);
+
+  border-radius: var(--radius);
+
+  overflow: hidden;
+
+  box-shadow: var(--shadow-card-sm);
+
+}
+
+
+
+.tx-row {
+
+  display: flex;
+
+  align-items: center;
+
+  justify-content: space-between;
+
+  gap: 12px;
+
+  width: 100%;
+
+  text-align: left;
+
+  font-size: 14px;
+
+  padding: 14px 16px;
+
+  border: none;
+
+  border-bottom: 1px solid var(--border);
+
+  background: transparent;
+
+  cursor: pointer;
+
+}
+
+
+
+.tx-row:last-child {
+
+  border-bottom: none;
+
+}
+
+
+
+.tx-row:active {
+
+  background: var(--bg-hover);
+
+}
+
+
+
+.tx-col-left {
+
+  display: flex;
+
+  flex-direction: column;
+
+  gap: 3px;
+
+  min-width: 0;
+
+  flex: 1;
+
+}
+
+
+
+.tx-col-right {
+
+  display: flex;
+
+  align-items: center;
+
+  gap: 6px;
+
+  flex-shrink: 0;
+
+}
+
+
+
+.tx-summary {
+
+  font-size: 12px;
+
+  color: var(--text-dim);
+
+  font-weight: 500;
+
+  white-space: nowrap;
+
+  overflow: hidden;
+
+  text-overflow: ellipsis;
+
+}
+
+
+
+.tx-type {
+
+  font-weight: 600;
+
+  color: var(--text);
+
+  letter-spacing: -0.01em;
+
+}
+
+
+
+.pos {
+
+  color: var(--success);
+
+  font-weight: 600;
+
+  font-size: 14px;
+
+  font-variant-numeric: tabular-nums;
+
+}
+
+
+
+.neg {
+
+  color: var(--text);
+
+  font-weight: 600;
+
+  font-size: 14px;
+
+  font-variant-numeric: tabular-nums;
+
+}
+
+
+
+.zero {
+
+  color: var(--text-muted);
+
+  font-weight: 600;
+
+  font-size: 14px;
+
+  font-variant-numeric: tabular-nums;
+
+}
+
+
+
+.tx-time {
+
+  font-size: 11px;
+
+  color: var(--text-dim);
+
+}
+
+
+
+.tx-arrow {
+
+  font-size: 15px;
+
+  color: var(--text-dim);
+
+  font-weight: 400;
+
+  line-height: 1;
+
+}
+
+
+
+.empty {
+
+  text-align: center;
+
+  color: var(--text-muted);
+
+  padding: 40px 16px;
+
+  font-weight: 500;
+
+}
+
+</style>
+
diff --git a/apps/player/src/views/MyBetsView.vue b/apps/player/src/views/MyBetsView.vue
index f0930cc..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: #6B7280;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
-  transition: all 0.2s;
-}
-
-.filter-tab.active {
-  color: #003D6B;
-  background: rgba(0, 61, 107, 0.08);
-  border-color: #003D6B;
-}
-
-.state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  text-align: center;
-  color: #6B7280;
-  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: #6B7280;
-  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 895f55a..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: #6B7280;
-  font-size: 13px;
-  font-weight: 600;
-  margin-bottom: 6px;
-  padding: 0;
-}
-
-.page-title {
-  font-size: 16px;
-  font-weight: 800;
-  color: #003D6B;
-  letter-spacing: 0.04em;
-}
-
-.avatar-card,
-.form-card {
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
-  border-radius: 8px;
-}
-
-.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 #E5E7EB;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #E8EDF2;
-}
-
-.avatar-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: top;
-}
-
-.avatar-change-btn {
-  padding: 7px 18px;
-  border-radius: 999px;
-  border: 1px solid #003D6B;
-  background: rgba(0, 61, 107, 0.04);
-  color: #003D6B;
-  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: #6B7280;
-}
-
-.section-divider {
-  height: 1px;
-  background: #E5E7EB;
-  margin: 6px 0 12px;
-}
-
-.section-toggle {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 4px 0 12px;
-  background: none;
-  color: #1A1A2E;
-  font-size: 14px;
-  font-weight: 700;
-}
-
-.chevron {
-  color: #6B7280;
-  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: #6B7280;
-  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 #E5E7EB;
-  border-radius: 0 6px 6px 0;
-  background: #F5F7FA;
-  color: #003D6B;
-  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: #6B7280;
-  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 #E5E7EB;
-  background: #FFFFFF;
-  color: #1A1A2E;
-  transition: border-color 0.2s;
-}
-
-.field-input:focus {
-  outline: none;
-  border-color: #0066CC;
-  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
-}
-
-.field-input:-webkit-autofill,
-.field-input:-webkit-autofill:hover,
-.field-input:-webkit-autofill:focus {
-  -webkit-text-fill-color: #1A1A2E;
-  box-shadow: 0 0 0 1000px #FFFFFF inset;
-  border: 1px solid #E5E7EB;
-}
-
-.field-input::placeholder {
-  color: rgba(107, 114, 128, 0.6);
-}
-
-.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: #059669;
-}
-
-.msg.err {
-  color: #DC2626;
-}
-</style>
diff --git a/apps/player/src/views/ProfileView.vue b/apps/player/src/views/ProfileView.vue
index 8e4c194..c738428 100644
--- a/apps/player/src/views/ProfileView.vue
+++ b/apps/player/src/views/ProfileView.vue
@@ -1,745 +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 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 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">{{ t('wallet.balance') }}</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">{{ t('wallet.card_holder') }}</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('cashback.total_received') }}</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.unsettled') }}</span>
-            <span class="bank-card-stat">{{ formatMoney(profileRaw?.wallet?.frozenBalance, locale) }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="quick-actions">
-      <RouterLink to="/wallet/detail" class="qa-item">
-        <span class="qa-icon qa-icon--wallet">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="24" height="24"><path d="M21 12V7H5a2 2 0 010-4h14v4"/><path d="M3 5v14a2 2 0 002 2h16v-5"/><path d="M18 12a2 2 0 100 4 2 2 0 000-4z"/></svg>
-        </span>
-        <span class="qa-label">{{ t('wallet.view_all') }}</span>
-      </RouterLink>
-      <RouterLink to="/wallet/recharge" class="qa-item">
-        <span class="qa-icon qa-icon--recharge">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="24" height="24"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
-        </span>
-        <span class="qa-label">{{ t('recharge.title') }}</span>
-      </RouterLink>
-      <RouterLink to="/profile/cashbacks" class="qa-item">
-        <span class="qa-icon qa-icon--cashback">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="24" height="24"><circle cx="12" cy="12" r="8"/><path d="M12 8v4l2.5 2.5"/></svg>
-        </span>
-        <span class="qa-label">{{ t('wallet.view_cashbacks') }}</span>
-      </RouterLink>
-      <RouterLink to="/wallet/recharge/history" class="qa-item">
-        <span class="qa-icon qa-icon--history">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="24" height="24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h4"/></svg>
-        </span>
-        <span class="qa-label">{{ t('recharge.history_title') }}</span>
-      </RouterLink>
-    </div>
-
-    <section class="settings-group">
-      <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: 6px 0 10px;
-}
-
-.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: #6B7280;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.retry-btn {
-  padding: 8px 24px;
-  border-radius: 6px;
-  border: 1px solid #003D6B;
-  background: transparent;
-  color: #005B9F;
-  font-size: 13px;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.retry-btn:active {
-  background: rgba(0, 61, 107, 0.08);
-}
-
-.wallet-banner {
-  position: relative;
-  width: 100%;
-  margin-bottom: 10px;
-  aspect-ratio: 1.75 / 1;
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-}
-
-.wallet-banner::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  border-radius: inherit;
-  pointer-events: none;
-}
-
-.wallet-banner-img {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-  object-position: center center;
-  pointer-events: none;
-  user-select: none;
-}
-
-.wallet-banner-scrim {
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-  pointer-events: none;
-  background: linear-gradient(
-    135deg,
-    #003D6B 0%,
-    #005B9F 50%,
-    #003D6B 100%
-  );
-}
-
-.card-overlay {
-  position: absolute;
-  inset: 0;
-  z-index: 3;
-  display: flex;
-  flex-direction: column;
-  padding: 10px 14px 10px;
-  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: 18px;
-  height: 18px;
-  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: #FFFFFF;
-  letter-spacing: 0.14em;
-  line-height: 1;
-}
-
-.bank-card-type {
-  font-size: 8px;
-  font-weight: 800;
-  letter-spacing: 0.14em;
-  color: rgba(255, 255, 255, 0.6);
-  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.75);
-  line-height: 1.3;
-}
-
-.recharge-btn {
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  padding: 5px 10px;
-  border-radius: 14px;
-  background: rgba(255, 255, 255, 0.15);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  color: #FFFFFF;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  line-height: 1;
-  text-decoration: none;
-  transition: background 0.15s ease;
-}
-
-.recharge-btn:active {
-  background: rgba(255, 255, 255, 0.25);
-}
-
-.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: 1px 0;
-  gap: 3px;
-}
-
-.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: #FFFFFF;
-  line-height: 1.1;
-  letter-spacing: 0.04em;
-  white-space: nowrap;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.balance-amount {
-  margin: 0;
-}
-
-.balance-amount--xl { font-size: clamp(22px, 5.6vw, 27px); }
-.balance-amount--lg { font-size: clamp(19px, 5vw, 24px); }
-.balance-amount--md { font-size: clamp(16px, 4.4vw, 20px); }
-.balance-amount--sm { font-size: clamp(14px, 3.8vw, 17px); }
-.balance-amount--xs { font-size: clamp(12px, 3.2vw, 14px); }
-
-.bank-card-footer {
-  flex-shrink: 0;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 6px;
-  padding-top: 6px;
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.bank-card-field {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  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: #FFFFFF;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  line-height: 1.2;
-  word-break: break-all;
-}
-
-.bank-card-stat {
-  font-size: 12px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  color: #FFFFFF;
-  line-height: 1.2;
-}
-
-
-.quick-actions {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 8px;
-  margin-bottom: 10px;
-}
-
-.qa-item {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  padding: 12px 4px 10px;
-  border-radius: 10px;
-  background: #FFFFFF;
-  border: 1px solid #CBD5E1;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
-  text-decoration: none;
-  cursor: pointer;
-  transition: transform 0.15s, box-shadow 0.15s;
-}
-
-.qa-item:active {
-  transform: scale(0.96);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.qa-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.qa-icon--wallet {
-  background: rgba(0, 61, 107, 0.1);
-  color: #003D6B;
-}
-
-.qa-icon--recharge {
-  background: rgba(5, 150, 105, 0.1);
-  color: #059669;
-}
-
-.qa-icon--cashback {
-  background: rgba(248, 151, 31, 0.1);
-  color: #E8870A;
-}
-
-.qa-icon--history {
-  background: rgba(99, 102, 241, 0.1);
-  color: #6366F1;
-}
-
-.qa-icon--inbox {
-  background: rgba(14, 165, 233, 0.1);
-  color: #0EA5E9;
-}
-
-.qa-label {
-  font-size: 10px;
-  font-weight: 600;
-  color: #1A1A2E;
-  text-align: center;
-  line-height: 1.2;
-  white-space: normal;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  min-height: 2.4em;
-  max-width: 100%;
-  word-break: break-word;
-}
-
-.settings-group {
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.settings-cell {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  width: 100%;
-  min-height: 42px;
-  padding: 0 14px;
-  background: none;
-  color: #1A1A2E;
-  font-size: 13px;
-  font-weight: 600;
-  text-decoration: none;
-  border-bottom: 1px solid #E5E7EB;
-}
-
-.settings-cell:last-child {
-  border-bottom: none;
-}
-
-.settings-cell:active {
-  background: #F5F7FA;
-}
-
-.settings-cell--stack {
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: center;
-  gap: 8px;
-  padding: 10px 14px 12px;
-  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: #6B7280;
-}
-
-.cell-head {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.cell-label {
-  color: #1A1A2E;
-}
-
-.cell-chevron {
-  color: #6B7280;
-  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 14px 12px;
-  border-bottom: 1px solid #E5E7EB;
-}
-
-.lang-segment {
-  display: flex;
-  gap: 6px;
-}
-
-.lang-opt {
-  flex: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  min-height: 30px;
-  padding: 0 5px;
-  border-radius: 6px;
-  border: 1px solid #E5E7EB;
-  background: #FFFFFF;
-  color: #6B7280;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.lang-opt.active {
-  border-color: #003D6B;
-  color: #003D6B;
-  background: rgba(0, 61, 107, 0.06);
-}
-
-.logout-btn {
-  width: 100%;
-  margin-top: 10px;
-  min-height: 40px;
-  padding: 0 14px;
-  border-radius: 8px;
-  border: 1px solid #DC2626;
-  background: #FFFFFF;
-  color: #DC2626;
-  font-size: 13px;
-  font-weight: 700;
-}
-
-.logout-btn:active {
-  background: rgba(220, 38, 38, 0.06);
-}
-
-.rules-body {
-  font-size: 12px;
-  line-height: 1.55;
-  color: #6B7280;
-}
-
-.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 085a779..a71b00c 100644
--- a/apps/player/src/views/RechargeHistoryView.vue
+++ b/apps/player/src/views/RechargeHistoryView.vue
@@ -1,843 +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';
-
-const router = useRouter();
-const { t, locale } = useI18n();
-
-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;
-    } 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.order_detail')">
-          <button type="button" class="detail-close" :aria-label="t('common.close')" @click="closeDetail">✕</button>
-
-          <h3 class="detail-title">{{ t('recharge.order_detail') }}</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 16px 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; color: #1A1A2E; }
-.back-btn { background: none; border: none; color: #003D6B; font-size: 24px; cursor: pointer; padding: 0 8px; }
-.recharge-btn { background: none; border: none; color: #003D6B; font-size: 13px; cursor: pointer; font-weight: 600; }
-.state { display: flex; justify-content: center; padding: 48px; }
-.empty { text-align: center; color: #6B7280; 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: #FFFFFF;
-  border: 1px solid #E5E7EB;
-  border-radius: 12px;
-  padding: 16px;
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-}
-.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, #003D6B, transparent);
-}
-.order-card.rejected {
-  background: #FFFFFF;
-  border-color: rgba(220, 38, 38, 0.25);
-}
-.order-card.rejected::before {
-  background: linear-gradient(90deg, transparent, #DC2626, transparent);
-}
-.order-card.rejected .order-amount {
-  background: none;
-  -webkit-background-clip: unset;
-  background-clip: unset;
-  color: #6B7280;
-}
-.order-card.rejected .info-label {
-  color: #6B7280;
-}
-.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(0, 61, 107, 0.08); color: #005B9F; }
-.method-badge.usdt { background: rgba(5, 150, 105, 0.08); color: #059669; }
-.status-badge { font-size: 12px; font-weight: 700; }
-.status-pending { color: #F8971F; }
-.status-approved { color: #059669; }
-.status-rejected { color: #DC2626; }
-.order-body { }
-.order-amount {
-  font-size: 22px;
-  font-weight: 900;
-  margin-bottom: 4px;
-  color: #003D6B;
-}
-.approved-amount { font-size: 12px; color: #059669; margin-bottom: 6px; font-weight: 600; }
-.order-info-row { margin-bottom: 8px; }
-.info-label { font-size: 13px; color: #003D6B; 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: #6B7280; }
-.time-value { font-size: 11px; color: #1A1A2E; font-variant-numeric: tabular-nums; }
-.order-remark {
-  font-size: 12px;
-  color: #003D6B;
-  background: rgba(0, 61, 107, 0.04);
-  padding: 6px 10px;
-  border-radius: 6px;
-  margin-top: 6px;
-  border-left: 2px solid #003D6B;
-  line-height: 1.45;
-  word-break: break-word;
-}
-.reject-reason {
-  margin-top: 8px;
-  font-size: 12px;
-  color: #DC2626;
-  background: transparent;
-  padding: 6px 0 0;
-  border-radius: 0;
-  border: none;
-  border-top: 1px solid rgba(220, 38, 38, 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 #E5E7EB;
-}
-.card-detail-summary {
-  font-size: 11px;
-  color: #6B7280;
-  font-weight: 600;
-}
-.card-detail-link {
-  font-size: 11px;
-  color: #003D6B;
-  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: #003D6B;
-  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: #6B7280;
-  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.3);
-  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: #FFFFFF;
-  border: 1px solid #E5E7EB;
-  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.12);
-}
-
-.detail-close {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: 50%;
-  background: transparent;
-  color: #6B7280;
-  font-size: 13px;
-  cursor: pointer;
-  line-height: 1;
-}
-
-.detail-title {
-  margin: 0 28px 12px 0;
-  font-size: 15px;
-  font-weight: 600;
-  color: #1A1A2E;
-}
-
-.detail-summary {
-  margin-bottom: 14px;
-  padding: 12px;
-  border-radius: 10px;
-  background: #F5F7FA;
-  border: 1px solid #E5E7EB;
-}
-
-.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: #003D6B;
-  letter-spacing: -0.02em;
-}
-
-.detail-method-name {
-  font-size: 12px;
-  color: #6B7280;
-  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: #6B7280;
-  flex-shrink: 0;
-}
-
-.detail-value {
-  font-size: 12px;
-  color: #1A1A2E;
-  text-align: right;
-  word-break: break-word;
-}
-
-.detail-summary .order-remark {
-  margin-top: 8px;
-  font-size: 11px;
-  color: #6B7280;
-  background: transparent;
-  padding: 6px 0 0;
-  border-radius: 0;
-  border: none;
-  border-top: 1px solid #E5E7EB;
-  line-height: 1.45;
-  word-break: break-word;
-}
-
-.detail-summary .reject-reason {
-  margin-top: 8px;
-  font-size: 11px;
-  color: #DC2626;
-  background: transparent;
-  padding: 6px 0 0;
-  border-radius: 0;
-  border: none;
-  border-top: 1px solid rgba(220, 38, 38, 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 #E5E7EB;
-}
-
-.detail-audit-title {
-  margin: 0 0 10px;
-  font-size: 12px;
-  font-weight: 600;
-  color: #6B7280;
-  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: #E5E7EB;
-  flex-shrink: 0;
-}
-
-.audit-line {
-  flex: 1;
-  width: 1px;
-  min-height: 10px;
-  margin: 3px 0;
-  background: #E5E7EB;
-}
-
-.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: #1A1A2E;
-  line-height: 1.35;
-}
-
-.audit-step-time {
-  font-size: 10px;
-  color: #6B7280;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.audit-step-actor {
-  margin: 2px 0 0;
-  font-size: 11px;
-  color: #6B7280;
-  line-height: 1.4;
-}
-
-.audit-step-credited {
-  margin: 3px 0 0;
-  font-size: 11px;
-  font-weight: 500;
-  color: #059669;
-  line-height: 1.4;
-}
-
-.audit-step-note {
-  margin: 4px 0 0;
-  font-size: 11px;
-  color: #6B7280;
-  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(220, 38, 38, 0.22);
-}
-
-.audit-step-box-label {
-  font-size: 10px;
-  font-weight: 500;
-  color: #DC2626;
-  letter-spacing: 0.01em;
-}
-
-.audit-step-box-text {
-  font-size: 11px;
-  color: #DC2626;
-}
-
-.audit-step--submitted .audit-dot {
-  background: #003D6B;
-}
-.audit-step--approved .audit-dot {
-  background: #059669;
-}
-.audit-step--rejected .audit-dot {
-  background: #DC2626;
-}
-.audit-step--revoked .audit-dot {
-  background: #6B7280;
-}
-.audit-step--reopened .audit-dot {
-  background: #003D6B;
-}
-
-.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 74e2b2a..8c97723 100644
--- a/apps/player/src/views/RechargeView.vue
+++ b/apps/player/src/views/RechargeView.vue
@@ -1,683 +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');
-  }
-
-  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 12px 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; color: #1A1A2E; }
-.back-btn { background: none; border: none; color: #003D6B; font-size: 22px; cursor: pointer; padding: 0 6px; }
-.history-btn { background: none; border: none; color: #003D6B; 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: #DC2626;
-  background: rgba(220, 38, 38, 0.06);
-  border: 1px solid rgba(220, 38, 38, 0.2);
-}
-
-.type-tabs {
-  display: flex; margin-bottom: 12px;
-  border-radius: 6px; overflow: hidden;
-  border: 1px solid #E5E7EB;
-}
-.tab {
-  flex: 1; padding: 8px; border: none;
-  background: #FFFFFF;
-  color: #6B7280; font-weight: 700; font-size: 13px;
-  cursor: pointer; transition: all 0.2s;
-}
-.tab.active {
-  background: #003D6B; color: #FFFFFF;
-}
-
-.methods-list {
-  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
-}
-.method-pill {
-  display: flex; flex-direction: column; gap: 1px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
-  border-radius: 6px; padding: 6px 12px;
-  text-align: left; cursor: pointer;
-  transition: border-color 0.15s;
-}
-.method-pill.selected {
-  border-color: #0066CC;
-  background: rgba(0, 102, 204, 0.04);
-}
-.pill-name { font-weight: 700; font-size: 12px; color: #1A1A2E; }
-.pill-sub { font-size: 10px; color: #6B7280; }
-.empty-methods { text-align: center; color: #6B7280; 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: linear-gradient(135deg, #003D6B 0%, #005B9F 50%, #003D6B 100%);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-}
-
-.bank-card-shine {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    115deg,
-    transparent 30%,
-    rgba(255, 255, 255, 0.03) 45%,
-    rgba(255, 255, 255, 0.06) 50%,
-    rgba(255, 255, 255, 0.03) 55%,
-    transparent 70%
-  );
-  pointer-events: none;
-}
-
-.bank-card-deco {
-  position: absolute;
-  border-radius: 50%;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  pointer-events: none;
-}
-
-.bank-card-deco--1 {
-  width: 180px;
-  height: 180px;
-  right: -60px;
-  bottom: -80px;
-  background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 70%);
-}
-
-.bank-card-deco--2 {
-  width: 100px;
-  height: 100px;
-  right: 40px;
-  bottom: 20px;
-  border-color: rgba(255, 255, 255, 0.05);
-}
-
-.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: #FFFFFF;
-  text-align: right;
-  letter-spacing: 0.5px;
-  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: #FFFFFF;
-  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(255, 255, 255, 0.25);
-  background: rgba(255, 255, 255, 0.1);
-  color: #FFFFFF;
-  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(255, 255, 255, 0.2);
-}
-
-.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.6);
-}
-
-.bank-card-holder-name {
-  font-size: 14px;
-  font-weight: 700;
-  color: #FFFFFF;
-  letter-spacing: 0.04em;
-  word-break: break-all;
-}
-
-.bank-card-type {
-  flex-shrink: 0;
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.18em;
-  color: rgba(255, 255, 255, 0.5);
-  font-style: italic;
-}
-
-.method-info {
-  background: #FFFFFF;
-  border-radius: 8px; padding: 10px 12px;
-  margin-bottom: 12px;
-  border: 1px solid #E5E7EB;
-}
-.info-row {
-  display: flex; justify-content: space-between; align-items: baseline;
-  padding: 6px 0;
-  border-bottom: 1px solid #E5E7EB;
-}
-.info-row:last-child { border-bottom: none; }
-.info-label { font-size: 11px; color: #6B7280; flex-shrink: 0; }
-.info-value {
-  font-size: 13px; font-weight: 600;
-  word-break: break-all; text-align: right;
-  max-width: 60%;
-  color: #1A1A2E;
-}
-.copyable {
-  cursor: pointer; color: #0066CC;
-  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; border: 1px solid #E5E7EB; }
-
-.form-section { margin-bottom: 12px; }
-.form-section label {
-  display: block; font-size: 11px; font-weight: 700;
-  color: #6B7280; margin-bottom: 4px;
-}
-.amount-input {
-  width: 100%; padding: 10px; background: #FFFFFF;
-  border: 1px solid #E5E7EB; border-radius: 6px;
-  color: #1A1A2E; font-size: 16px; font-weight: 700;
-  box-sizing: border-box;
-}
-.amount-input:focus { border-color: #0066CC; outline: none; box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15); }
-
-.upload-area {
-  border: 1px dashed #0066CC;
-  border-radius: 6px; padding: 16px;
-  text-align: center; position: relative;
-  display: flex; align-items: center; justify-content: center;
-  cursor: pointer;
-  background: rgba(0, 102, 204, 0.02);
-}
-.upload-area input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
-.upload-hint { font-size: 12px; color: #6B7280; }
-.compress-hint { font-size: 12px; color: #003D6B; }
-.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.6); border: none; color: #fff;
-  width: 20px; height: 20px; border-radius: 50%;
-  cursor: pointer; font-size: 11px;
-}
-
-.btn-submit {
-  width: 100%; padding: 12px;
-  background: #003D6B;
-  color: #FFFFFF; border: none; border-radius: 6px;
-  font-size: 14px; font-weight: 800;
-  cursor: pointer; margin-top: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-}
-.btn-submit:disabled { opacity: 0.4; cursor: not-allowed; }
-
-.success-state { text-align: center; padding: 40px 16px; }
-.success-icon { font-size: 40px; color: #059669; margin-bottom: 10px; }
-.success-state h3 { margin: 0 0 6px; font-size: 16px; color: #1A1A2E; }
-.order-no { font-family: monospace; color: #003D6B; font-size: 13px; margin: 4px 0; }
-.success-hint { font-size: 12px; color: #6B7280; margin-bottom: 20px; }
-.btn-primary {
-  background: #003D6B;
-  color: #FFFFFF; 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 a5f680b..81ef4a5 100644
--- a/apps/player/src/views/WalletDetailView.vue
+++ b/apps/player/src/views/WalletDetailView.vue
@@ -1,391 +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">
-    <header class="top-bar sub-toolbar">
-      <button class="back-btn" type="button" @click="router.back()">&#x2039; {{ t('history.back') }}</button>
-    </header>
-
-    <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 class="stats-panel" :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-col-left">
-            <span class="tx-type">{{ txLabel(tx) }}</span>
-            <span v-if="txSubtitle(tx)" class="tx-summary">{{ txSubtitle(tx) }}</span>
-            <span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
-          </div>
-          <div class="tx-col-right">
-            <span :class="txAmountClass(tx.amount)">
-              {{ formatMoney(tx.amount, locale) }}
-            </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;
-}
-
-.stats-panel {
-  margin-bottom: var(--space-section);
-}
-
-.top-bar {
-  margin-bottom: 4px;
-}
-
-.back-btn {
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  font-size: 15px;
-  font-weight: 500;
-  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: 8px;
-  margin-bottom: var(--space-section);
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-}
-
-.filter-tabs::-webkit-scrollbar { display: none; }
-
-.filter-tab {
-  flex-shrink: 0;
-  padding: 8px 16px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-muted);
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  transition: background 0.2s, border-color 0.2s, color 0.2s;
-}
-
-.filter-tab.active {
-  color: var(--text);
-  background: var(--bg-elevated);
-  border-color: var(--border-strong);
-  font-weight: 600;
-}
-
-.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;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  overflow: hidden;
-}
-
-.tx-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  width: 100%;
-  text-align: left;
-  font-size: 14px;
-  padding: 12px 14px;
-  border: none;
-  border-bottom: 1px solid var(--border);
-  background: transparent;
-  cursor: pointer;
-}
-
-.tx-row:last-child {
-  border-bottom: none;
-}
-
-.tx-row:active {
-  background: var(--bg-hover);
-}
-
-.tx-col-left {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  min-width: 0;
-  flex: 1;
-}
-
-.tx-col-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
-.tx-summary {
-  font-size: 11px;
-  color: var(--text-muted);
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.tx-type { font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
-.pos { color: var(--success); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
-.neg { color: var(--text); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
-.zero { color: var(--text-muted); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
-.tx-time { font-size: 11px; color: var(--text-dim); }
-.tx-arrow { font-size: 15px; color: var(--text-dim); font-weight: 400; 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: var(--text-muted);
-  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 c2c5eb1..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>
-
-    <header class="top-bar sub-toolbar">
-      <button class="back-btn" type="button" @click="router.back()">‹ {{ t('history.back') }}</button>
-    </header>
-
-    <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);
-  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: var(--text-muted);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.hero {
-  border-radius: var(--radius);
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 12px;
-  text-align: center;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-}
-
-.hero.pos {
-  border-color: rgba(46, 204, 113, 0.35);
-  background: linear-gradient(135deg, rgba(46, 204, 113, 0.16), rgba(46, 204, 113, 0.05));
-}
-
-.hero.neg {
-  border-color: rgba(255, 255, 255, 0.35);
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
-}
-
-.hero.zero {
-  border-color: var(--border);
-  background: var(--bg-elevated);
-}
-
-.hero-type {
-  font-size: 12px;
-  font-weight: 800;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--text-muted);
-}
-
-.hero-summary {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text);
-  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(--success); }
-.hero.neg .hero-amount { color: var(--primary); }
-.hero.zero .hero-amount { color: var(--text-muted); }
-
-.hero-time {
-  font-size: 11px;
-  color: var(--neutral);
-  font-weight: 600;
-}
-
-.section {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: var(--space-card) 16px;
-  margin-bottom: var(--space-section);
-}
-
-.section-title {
-  font-size: 12px;
-  font-weight: 800;
-  color: var(--text-muted);
-  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: var(--text-muted);
-}
-
-.sum-row span:last-child {
-  color: var(--text);
-  font-weight: 700;
-  text-align: right;
-  word-break: break-all;
-}
-
-.pos { color: var(--success) !important; }
-.neg { color: var(--primary) !important; }
-.zero { color: var(--text-muted) !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);
-  background: var(--surface-accent);
-  color: var(--primary-light);
-  font-size: 13px;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.tx-id {
-  font-family: ui-monospace, monospace;
-  font-size: 12px;
-  color: var(--text-muted);
-  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 8df0075..39a6ffc 100644
--- a/apps/player/src/views/WalletView.vue
+++ b/apps/player/src/views/WalletView.vue
@@ -1,588 +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 } from '../utils/localeDisplay';
-
-import { txTypeKey, txDisplayType, txAmountClass, txSummaryLabel } from '../utils/walletTx';
-
-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 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 { data } = await api.get('/player/wallet/transactions', { params: { page: 1 } });
-
-    const result = data.data ?? { items: [] };
-
-    items.value = (result.items ?? []).slice(0, PREVIEW_COUNT);
-
-  } 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="wallet-links">
-
-        <button type="button" class="wallet-link" @click="goCashbacks">
-
-          {{ t('wallet.view_cashbacks') }}
-
-        </button>
-
-        <button
-
-          v-if="items.length"
-
-          type="button"
-
-          class="wallet-link wallet-link--primary"
-
-          @click="router.push('/wallet/detail')"
-
-        >
-
-          {{ t('wallet.view_all') }}
-
-        </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-col-left">
-
-            <span class="tx-type">{{ txLabel(tx) }}</span>
-
-            <span v-if="txSubtitle(tx)" class="tx-summary">{{ txSubtitle(tx) }}</span>
-
-            <span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
-
-          </div>
-
-          <div class="tx-col-right">
-
-            <span :class="txAmountClass(tx.amount)">
-
-              {{ formatMoney(tx.amount, locale) }}
-
-            </span>
-
-            <span class="tx-arrow" aria-hidden="true">›</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: 500;
-
-  font-size: 14px;
-
-}
-
-
-
-.loading-text {
-
-  font-size: 13px;
-
-}
-
-
-
-.wallet-links {
-
-  display: flex;
-
-  align-items: center;
-
-  justify-content: space-between;
-
-  gap: 12px;
-
-  margin: 0 0 12px;
-
-}
-
-
-
-.wallet-link {
-
-  background: none;
-
-  border: none;
-
-  padding: 4px 0;
-
-  font-size: 13px;
-
-  font-weight: 500;
-
-  color: var(--text-muted);
-
-  cursor: pointer;
-
-}
-
-
-
-.wallet-link--primary {
-
-  color: var(--text);
-
-  font-weight: 600;
-
-}
-
-
-
-.wallet-link:active {
-
-  opacity: 0.72;
-
-}
-
-
-
-.tx-list {
-
-  margin-bottom: 0;
-
-  background: var(--gradient-card);
-
-  border: 1px solid rgba(255, 255, 255, 0.11);
-
-  border-radius: var(--radius);
-
-  overflow: hidden;
-
-  box-shadow: var(--shadow-card-sm);
-
-}
-
-
-
-.tx-row {
-
-  display: flex;
-
-  align-items: center;
-
-  justify-content: space-between;
-
-  gap: 12px;
-
-  width: 100%;
-
-  text-align: left;
-
-  font-size: 14px;
-
-  padding: 14px 16px;
-
-  border: none;
-
-  border-bottom: 1px solid var(--border);
-
-  background: transparent;
-
-  cursor: pointer;
-
-}
-
-
-
-.tx-row:last-child {
-
-  border-bottom: none;
-
-}
-
-
-
-.tx-row:active {
-
-  background: var(--bg-hover);
-
-}
-
-
-
-.tx-col-left {
-
-  display: flex;
-
-  flex-direction: column;
-
-  gap: 3px;
-
-  min-width: 0;
-
-  flex: 1;
-
-}
-
-
-
-.tx-col-right {
-
-  display: flex;
-
-  align-items: center;
-
-  gap: 6px;
-
-  flex-shrink: 0;
-
-}
-
-
-
-.tx-summary {
-
-  font-size: 12px;
-
-  color: var(--text-dim);
-
-  font-weight: 500;
-
-  white-space: nowrap;
-
-  overflow: hidden;
-
-  text-overflow: ellipsis;
-
-}
-
-
-
-.tx-type {
-
-  font-weight: 600;
-
-  color: var(--text);
-
-  letter-spacing: -0.01em;
-
-}
-
-
-
-.pos {
-
-  color: var(--success);
-
-  font-weight: 600;
-
-  font-size: 14px;
-
-  font-variant-numeric: tabular-nums;
-
-}
-
-
-
-.neg {
-
-  color: var(--text);
-
-  font-weight: 600;
-
-  font-size: 14px;
-
-  font-variant-numeric: tabular-nums;
-
-}
-
-
-
-.zero {
-
-  color: var(--text-muted);
-
-  font-weight: 600;
-
-  font-size: 14px;
-
-  font-variant-numeric: tabular-nums;
-
-}
-
-
-
-.tx-time {
-
-  font-size: 11px;
-
-  color: var(--text-dim);
-
-}
-
-
-
-.tx-arrow {
-
-  font-size: 15px;
-
-  color: var(--text-dim);
-
-  font-weight: 400;
-
-  line-height: 1;
-
-}
-
-
-
-.empty {
-
-  text-align: center;
-
-  color: var(--text-muted);
-
-  padding: 40px 16px;
-
-  font-weight: 500;
-
-}
-
-</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>
diff --git a/apps/player/vite.config.ts b/apps/player/vite.config.ts
index 1704b59..94b8af0 100644
--- a/apps/player/vite.config.ts
+++ b/apps/player/vite.config.ts
@@ -1,9 +1,9 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import { resolve } from 'path';
-import { resolveApiDevTarget } from '../../scripts/dev-api-target.mjs';
+import { resolveDevApiTarget } from '../../scripts/resolve-dev-api-target.mjs';
 
-const apiTarget = resolveApiDevTarget();
+const devApiTarget = resolveDevApiTarget();
 
 export default defineConfig({
   plugins: [vue()],
@@ -38,10 +38,11 @@ export default defineConfig({
   },
   publicDir: resolve(__dirname, '../../packages/shared/public'),
   server: {
+    host: true,
     port: 5173,
     proxy: {
-      '/api': { target: apiTarget, changeOrigin: true },
-      '/uploads': { target: apiTarget, changeOrigin: true },
+      '/api': { target: devApiTarget, changeOrigin: true },
+      '/uploads': { target: devApiTarget, changeOrigin: true },
     },
   },
 });
diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
index 7f71f6a..bcb5714 100644
--- a/docker-compose.prod.yml
+++ b/docker-compose.prod.yml
@@ -75,7 +75,7 @@ services:
       - thebet365
 
   player:
-    image: thebet365-player:${IMAGE_TAG:-latest}
+    image: thebet365-player:${PLAYER_IMAGE_TAG:-main}
     build:
       context: .
       dockerfile: docker/player/Dockerfile
diff --git a/docker-compose.themes.yml b/docker-compose.themes.yml
new file mode 100644
index 0000000..c0a6dc6
--- /dev/null
+++ b/docker-compose.themes.yml
@@ -0,0 +1,59 @@
+# 四套主题扩展 — 与 docker-compose.prod.yml 合并使用：
+# docker compose -f docker-compose.prod.yml -f docker-compose.themes.yml --env-file .env.docker up -d
+#
+# 关联文档：docs/四套主题Docker部署任务.md
+
+services:
+  player2:
+    image: thebet365-player:${PLAYER2_IMAGE_TAG:-theme-2}
+    container_name: thebet365-player2
+    depends_on:
+      api:
+        condition: service_healthy
+    ports:
+      - '${BIND_ADDR:-127.0.0.1}:${PLAYER2_PORT:-8083}:80'
+    healthcheck:
+      test: ['CMD-SHELL', 'wget -q -O /dev/null http://127.0.0.1/ || exit 1']
+      interval: 10s
+      timeout: 5s
+      retries: 6
+      start_period: 10s
+    restart: unless-stopped
+    networks:
+      - thebet365
+
+  player3:
+    image: thebet365-player:${PLAYER3_IMAGE_TAG:-theme-3}
+    container_name: thebet365-player3
+    depends_on:
+      api:
+        condition: service_healthy
+    ports:
+      - '${BIND_ADDR:-127.0.0.1}:${PLAYER3_PORT:-8084}:80'
+    healthcheck:
+      test: ['CMD-SHELL', 'wget -q -O /dev/null http://127.0.0.1/ || exit 1']
+      interval: 10s
+      timeout: 5s
+      retries: 6
+      start_period: 10s
+    restart: unless-stopped
+    networks:
+      - thebet365
+
+  player4:
+    image: thebet365-player:${PLAYER4_IMAGE_TAG:-theme-4}
+    container_name: thebet365-player4
+    depends_on:
+      api:
+        condition: service_healthy
+    ports:
+      - '${BIND_ADDR:-127.0.0.1}:${PLAYER4_PORT:-8085}:80'
+    healthcheck:
+      test: ['CMD-SHELL', 'wget -q -O /dev/null http://127.0.0.1/ || exit 1']
+      interval: 10s
+      timeout: 5s
+      retries: 6
+      start_period: 10s
+    restart: unless-stopped
+    networks:
+      - thebet365
diff --git a/docs/docker/build-and-export-all-themes.bat b/docs/docker/build-and-export-all-themes.bat
new file mode 100644
index 0000000..94a48d0
--- /dev/null
+++ b/docs/docker/build-and-export-all-themes.bat
@@ -0,0 +1,13 @@
+@echo off
+REM Thin launcher for build-and-export-all-themes.ps1
+REM CMD reads batch files line-by-line from disk; git checkout to theme-* removes
+REM this file from the working tree. PowerShell loads the script into memory first.
+REM
+REM Usage:
+REM   docs\docker\build-and-export-all-themes.bat
+REM   docs\docker\build-and-export-all-themes.bat --use-cache
+REM   docs\docker\build-and-export-all-themes.bat --export-only
+REM   docs\docker\build-and-export-all-themes.bat --skip-api-admin
+
+powershell -NoProfile -ExecutionPolicy Bypass -File "%~dp0build-and-export-all-themes.ps1" %*
+exit /b %ERRORLEVEL%
diff --git a/docs/docker/build-and-export-all-themes.ps1 b/docs/docker/build-and-export-all-themes.ps1
new file mode 100644
index 0000000..5460292
--- /dev/null
+++ b/docs/docker/build-and-export-all-themes.ps1
@@ -0,0 +1,285 @@
+# 四套主题 player 一键打包（自动切换 Git 分支）
+# PowerShell 会在启动时将整份脚本载入内存，git checkout 后仍可继续执行。
+# 用法（项目根目录或本目录均可）:
+#   .\docs\docker\build-and-export-all-themes.ps1
+#   .\docs\docker\build-and-export-all-themes.ps1 -UseCache
+#   .\docs\docker\build-and-export-all-themes.ps1 -ExportOnly
+#   .\docs\docker\build-and-export-all-themes.ps1 -SkipApiAdmin
+# 或通过 bat 启动（参数支持 --use-cache 等 CMD 风格）:
+#   docs\docker\build-and-export-all-themes.bat --use-cache
+
+param(
+  [switch]$UseCache,
+  [switch]$ExportOnly,
+  [switch]$SkipApiAdmin,
+  [switch]$SkipBundle,
+  [switch]$Help
+)
+
+$ErrorActionPreference = "Stop"
+
+foreach ($arg in $args) {
+  switch ($arg.ToLowerInvariant()) {
+    "--use-cache" { $UseCache = $true; continue }
+    "--export-only" { $ExportOnly = $true; continue }
+    "--skip-api-admin" { $SkipApiAdmin = $true; continue }
+    "--skip-bundle" { $SkipBundle = $true; continue }
+    "-h" { $Help = $true; continue }
+    "--help" { $Help = $true; continue }
+    "/?" { $Help = $true; continue }
+    default { throw "Unknown argument: $arg" }
+  }
+}
+
+function Show-Help {
+  Write-Host @"
+
+Usage: docs\docker\build-and-export-all-themes.ps1 [options]
+
+  -UseCache, --use-cache        Use Docker build cache (default: --no-cache)
+  -ExportOnly, --export-only    Skip build, export existing images only
+  -SkipApiAdmin, --skip-api-admin
+                                Only build 4 player themes, skip api/admin
+  -SkipBundle, --skip-bundle     Skip thebet365-full-themes-latest.tar (6-in-1 bundle)
+  -Help, -h, --help             Show this help
+
+Output (project root):
+  thebet365-player-main.tar
+  thebet365-player-theme-2.tar
+  thebet365-player-theme-3.tar
+  thebet365-player-theme-4.tar
+  thebet365-images-latest.tar        (api + admin, unless -SkipApiAdmin)
+  thebet365-full-themes-latest.tar   (api + admin + 4 player themes, unless -SkipBundle)
+
+"@
+}
+
+if ($Help) {
+  Show-Help
+  exit 0
+}
+
+$Root = (Resolve-Path (Join-Path $PSScriptRoot "../..")).Path
+
+$Themes = @(
+  @{ Branch = "main"; Tag = "main" },
+  @{ Branch = "theme-2"; Tag = "theme-2" },
+  @{ Branch = "theme-3"; Tag = "theme-3" },
+  @{ Branch = "theme-4"; Tag = "theme-4" }
+)
+
+if (-not (Get-Command docker -ErrorAction SilentlyContinue)) {
+  throw "docker not found. Please start Docker Desktop first."
+}
+
+if (-not (Test-Path (Join-Path $Root "docs\docker\build-and-export-images.bat"))) {
+  throw "Missing build script: docs\docker\build-and-export-images.bat"
+}
+
+function Invoke-Git {
+  param([Parameter(ValueFromRemainingArguments = $true)][string[]]$GitArgs)
+
+  $prevErrorAction = $ErrorActionPreference
+  $ErrorActionPreference = "SilentlyContinue"
+  try {
+    & git @GitArgs 2>$null | Out-Null
+    return $LASTEXITCODE
+  } finally {
+    $ErrorActionPreference = $prevErrorAction
+  }
+}
+
+function Get-GitOutput {
+  param([Parameter(ValueFromRemainingArguments = $true)][string[]]$GitArgs)
+
+  $prevErrorAction = $ErrorActionPreference
+  $ErrorActionPreference = "SilentlyContinue"
+  try {
+    return ((& git @GitArgs 2>$null | Out-String).Trim())
+  } finally {
+    $ErrorActionPreference = $prevErrorAction
+  }
+}
+
+Set-Location $Root
+
+$OriginalBranch = Get-GitOutput rev-parse --abbrev-ref HEAD
+if ([string]::IsNullOrWhiteSpace($OriginalBranch)) {
+  throw "Cannot determine current Git branch. Run this script from the repo root."
+}
+Write-Host "[INFO] Current branch: $OriginalBranch"
+
+$DidStash = $false
+$diffExit = Invoke-Git diff --quiet
+$cachedExit = Invoke-Git diff --cached --quiet
+if ($diffExit -ne 0 -or $cachedExit -ne 0) {
+  Write-Host "[INFO] Stashing local changes before branch switching..."
+  $stashExit = Invoke-Git stash push -m "build-all-themes auto-stash"
+  if ($stashExit -eq 0) {
+    $DidStash = $true
+    Write-Host "[INFO] Changes stashed."
+  } else {
+    Write-Warning "git stash failed. Branch switching may fail if there are conflicts."
+  }
+}
+
+$FailedThemes = [System.Collections.Generic.List[string]]::new()
+$SuccessCount = 0
+
+function Invoke-BuildExport {
+  param(
+    [string]$Service = "",
+    [string]$Tag
+  )
+
+  $argList = @()
+  if (-not [string]::IsNullOrWhiteSpace($Service)) {
+    $argList += "--service"
+    $argList += $Service
+  }
+  $argList += "--tag"
+  $argList += $Tag
+  if ($UseCache) { $argList += "--use-cache" }
+  if ($ExportOnly) { $argList += "--export-only" }
+
+  Set-Location $Root
+  $batPath = Join-Path $Root "docs\docker\build-and-export-images.bat"
+  $argText = ($argList | ForEach-Object {
+    if ($_ -match '\s') { "`"$_`"" } else { $_ }
+  }) -join ' '
+  & cmd.exe /c "`"$batPath`" $argText"
+  return $LASTEXITCODE
+}
+
+function Invoke-PlayerThemeBuild {
+  param(
+    [string]$Branch,
+    [string]$Tag
+  )
+
+  Write-Host ""
+  Write-Host "----------------------------------------------------------------"
+  Write-Host "[INFO] Theme: $Branch  (image tag: $Tag)"
+  Write-Host "----------------------------------------------------------------"
+
+  Set-Location $Root
+  $checkoutExit = Invoke-Git checkout $Branch
+  if ($checkoutExit -ne 0) {
+    Write-Host "[ERROR] Cannot switch to branch $Branch -- skipping"
+    $script:FailedThemes.Add($Branch) | Out-Null
+    return
+  }
+  Write-Host "[INFO] Switched to $Branch"
+
+  Set-Location $Root
+  if ((Invoke-BuildExport -Service "player" -Tag $Tag) -ne 0) {
+    Write-Host "[ERROR] Player build failed for $Branch"
+    $script:FailedThemes.Add($Branch) | Out-Null
+    return
+  }
+
+  Write-Host "[OK] thebet365-player:$Tag exported successfully"
+  $script:SuccessCount++
+}
+
+foreach ($theme in $Themes) {
+  Invoke-PlayerThemeBuild -Branch $theme.Branch -Tag $theme.Tag
+}
+
+Write-Host ""
+Write-Host "[INFO] Restoring original branch: $OriginalBranch"
+Set-Location $Root
+if ((Invoke-Git checkout $OriginalBranch) -eq 0) {
+  Write-Host "[INFO] Restored to $OriginalBranch"
+} else {
+  Write-Warning "Could not restore branch $OriginalBranch. Run: git checkout $OriginalBranch"
+}
+
+if ($DidStash) {
+  Write-Host "[INFO] Restoring stashed changes..."
+  if ((Invoke-Git stash pop) -eq 0) {
+    Write-Host "[INFO] Stash restored."
+  } else {
+    Write-Warning "git stash pop failed. Run: git stash pop"
+  }
+}
+
+if (-not $SkipApiAdmin) {
+  Write-Host ""
+  Write-Host "[INFO] Building api + admin (tag: latest) on branch main..."
+  Set-Location $Root
+  if ((Invoke-Git checkout main) -ne 0) {
+    Write-Host "[ERROR] Cannot switch to branch main for api/admin build"
+    $FailedThemes.Add("api/admin") | Out-Null
+  } else {
+    Set-Location $Root
+    if ((Invoke-BuildExport -Service "api-admin" -Tag "latest") -ne 0) {
+      Write-Host "[ERROR] api/admin build failed"
+      $FailedThemes.Add("api/admin") | Out-Null
+    } else {
+      $SuccessCount++
+    }
+  }
+
+  Write-Host ""
+  Write-Host "[INFO] Restoring original branch: $OriginalBranch"
+  Set-Location $Root
+  Invoke-Git checkout $OriginalBranch | Out-Null
+}
+
+if (-not $SkipBundle -and -not $SkipApiAdmin -and $FailedThemes.Count -eq 0) {
+  Write-Host ""
+  Write-Host "[INFO] Exporting full bundle (api + admin + 4 player themes)..."
+  Set-Location $Root
+  if ((Invoke-BuildExport -Service "full-themes" -Tag "latest") -ne 0) {
+    Write-Host "[ERROR] Full bundle export failed"
+    $FailedThemes.Add("full-bundle") | Out-Null
+  } else {
+    Write-Host "[OK] thebet365-full-themes-latest.tar exported successfully"
+    $SuccessCount++
+  }
+}
+
+Write-Host ""
+Write-Host "================================================================"
+Write-Host " BUILD SUMMARY"
+Write-Host "================================================================"
+Write-Host "  Succeeded: $SuccessCount task(s)"
+
+if ($FailedThemes.Count -gt 0) {
+  Write-Host "  Failed:   $($FailedThemes -join ' ')"
+  Write-Host ""
+  Write-Host "  Tip: Retry failed themes manually:"
+  Write-Host "    git checkout <branch>"
+  Write-Host "    docs\docker\build-and-export-images.bat --service player --tag <tag>"
+  Write-Host "================================================================"
+  exit 1
+}
+
+Write-Host ""
+Write-Host "  All done! Output files in project root:"
+Write-Host "    thebet365-player-main.tar"
+Write-Host "    thebet365-player-theme-2.tar"
+Write-Host "    thebet365-player-theme-3.tar"
+Write-Host "    thebet365-player-theme-4.tar"
+if (-not $SkipApiAdmin) {
+  Write-Host "    thebet365-images-latest.tar        (api + admin)"
+}
+if (-not $SkipBundle -and -not $SkipApiAdmin) {
+  Write-Host "    thebet365-full-themes-latest.tar   (api + admin + 4 themes, upload this only)"
+}
+Write-Host ""
+Write-Host "  Server import (single bundle):"
+Write-Host "    docker load -i thebet365-full-themes-latest.tar"
+Write-Host "    docker compose -f docker-compose.prod.yml -f docker-compose.themes.yml --env-file .env.docker up -d"
+Write-Host ""
+Write-Host "  Or import separate tars:"
+if (-not $SkipApiAdmin) {
+  Write-Host "    docker load -i thebet365-images-latest.tar"
+}
+Write-Host "    docker load -i thebet365-player-main.tar"
+Write-Host "    docker load -i thebet365-player-theme-2.tar"
+Write-Host "    docker load -i thebet365-player-theme-3.tar"
+Write-Host "    docker load -i thebet365-player-theme-4.tar"
+Write-Host "================================================================"
+exit 0
diff --git a/docs/docker/build-and-export-images.bat b/docs/docker/build-and-export-images.bat
index 2563057..ea6e690 100644
--- a/docs/docker/build-and-export-images.bat
+++ b/docs/docker/build-and-export-images.bat
@@ -8,6 +8,9 @@ REM   docs\docker\build-and-export-images.bat --service admin
 REM   docs\docker\build-and-export-images.bat --tag v1.2.3
 REM   docs\docker\build-and-export-images.bat --use-cache
 REM   docs\docker\build-and-export-images.bat --export-only
+REM
+REM 四套主题玩家端一键打包（自动切分支，推荐）：
+REM   docs\docker\build-and-export-all-themes.bat
 
 cd /d "%~dp0..\.."
 
@@ -66,7 +69,7 @@ goto parse_args
 echo.
 echo Usage: docs\docker\build-and-export-images.bat [options]
 echo.
-echo   --service SVC    api ^| player ^| admin ^| all (default: all)
+echo   --service SVC    api ^| player ^| admin ^| api-admin ^| full-themes ^| all (default: all)
 echo   --tag TAG        Image tag (default: latest)
 echo   --use-cache      Use Docker build cache
 echo   --export-only    Skip build, export existing images only
@@ -78,6 +81,9 @@ echo   docs\docker\build-and-export-images.bat --service admin
 echo   docs\docker\build-and-export-admin.bat
 echo   docs\docker\build-and-export-admin.bat --export-only
 echo.
+echo 四套主题玩家端批量打包（自动切分支，推荐）：
+echo   docs\docker\build-and-export-all-themes.bat
+echo.
 exit /b 0
 
 :args_done
@@ -111,8 +117,7 @@ if errorlevel 1 exit /b 1
 if not defined OUTPUT call :default_output
 
 set "OUTPUT_PATH=%OUTPUT%"
-echo %OUTPUT_PATH%| findstr /r "^[A-Za-z]:\\" >nul
-if errorlevel 1 set "OUTPUT_PATH=%CD%\%OUTPUT%"
+if /i not "%OUTPUT:~1,1%"==":" set "OUTPUT_PATH=%CD%\%OUTPUT%"
 
 where docker >nul 2>&1
 if errorlevel 1 (
@@ -120,7 +125,7 @@ if errorlevel 1 (
   exit /b 1
 )
 
-if "%EXPORT_ONLY%"=="0" goto do_build
+if "%EXPORT_ONLY%"=="0" if /i not "%SERVICE%"=="full-themes" goto do_build
 goto do_export
 
 :do_build
@@ -129,6 +134,8 @@ set "IMAGE_TAG=%TAG%"
 if "%NO_CACHE%"=="1" goto build_no_cache
 if /i "%SERVICE%"=="all" (
   docker compose -f "%COMPOSE_FILE%" --env-file "%ENV_FILE%" build api player admin
+) else if /i "%SERVICE%"=="api-admin" (
+  docker compose -f "%COMPOSE_FILE%" --env-file "%ENV_FILE%" build api admin
 ) else (
   docker compose -f "%COMPOSE_FILE%" --env-file "%ENV_FILE%" build %SERVICE%
 )
@@ -137,6 +144,8 @@ goto build_done
 :build_no_cache
 if /i "%SERVICE%"=="all" (
   docker compose -f "%COMPOSE_FILE%" --env-file "%ENV_FILE%" build --no-cache api player admin
+) else if /i "%SERVICE%"=="api-admin" (
+  docker compose -f "%COMPOSE_FILE%" --env-file "%ENV_FILE%" build --no-cache api admin
 ) else (
   docker compose -f "%COMPOSE_FILE%" --env-file "%ENV_FILE%" build --no-cache %SERVICE%
 )
@@ -151,6 +160,10 @@ if errorlevel 1 (
 echo ==^> Exporting %SERVICE% to %OUTPUT_PATH%
 if /i "%SERVICE%"=="all" (
   docker save thebet365-api:%TAG% thebet365-player:%TAG% thebet365-admin:%TAG% -o "%OUTPUT_PATH%"
+) else if /i "%SERVICE%"=="api-admin" (
+  docker save thebet365-api:%TAG% thebet365-admin:%TAG% -o "%OUTPUT_PATH%"
+) else if /i "%SERVICE%"=="full-themes" (
+  docker save thebet365-api:%TAG% thebet365-admin:%TAG% thebet365-player:main thebet365-player:theme-2 thebet365-player:theme-3 thebet365-player:theme-4 -o "%OUTPUT_PATH%"
 ) else (
   docker save thebet365-%SERVICE%:%TAG% -o "%OUTPUT_PATH%"
 )
@@ -181,16 +194,34 @@ for %%F in ("%OUTPUT_PATH%") do set /a SIZE_MB=%%~zF/1048576
   echo git_dirty=!GIT_DIRTY!
   echo tar=!TAR_NAME!
   echo tar_sha256=!TAR_SHA256!
-  if /i not "!SERVICE!"=="all" (
-    echo image=thebet365-!SERVICE!:%TAG%
-    echo image_id=!SVC_IMAGE_ID!
-  ) else (
+  if /i "!SERVICE!"=="all" (
     echo api_image=thebet365-api:%TAG%
     echo api_image_id=!API_IMAGE_ID!
     echo player_image=thebet365-player:%TAG%
     echo player_image_id=!PLAYER_IMAGE_ID!
     echo admin_image=thebet365-admin:%TAG%
     echo admin_image_id=!ADMIN_IMAGE_ID!
+  ) else if /i "!SERVICE!"=="api-admin" (
+    echo api_image=thebet365-api:%TAG%
+    echo api_image_id=!API_IMAGE_ID!
+    echo admin_image=thebet365-admin:%TAG%
+    echo admin_image_id=!ADMIN_IMAGE_ID!
+  ) else if /i "!SERVICE!"=="full-themes" (
+    echo api_image=thebet365-api:%TAG%
+    echo api_image_id=!API_IMAGE_ID!
+    echo admin_image=thebet365-admin:%TAG%
+    echo admin_image_id=!ADMIN_IMAGE_ID!
+    echo player_main_image=thebet365-player:main
+    echo player_main_image_id=!PLAYER_MAIN_IMAGE_ID!
+    echo player_theme_2_image=thebet365-player:theme-2
+    echo player_theme_2_image_id=!PLAYER_THEME2_IMAGE_ID!
+    echo player_theme_3_image=thebet365-player:theme-3
+    echo player_theme_3_image_id=!PLAYER_THEME3_IMAGE_ID!
+    echo player_theme_4_image=thebet365-player:theme-4
+    echo player_theme_4_image_id=!PLAYER_THEME4_IMAGE_ID!
+  ) else (
+    echo image=thebet365-!SERVICE!:%TAG%
+    echo image_id=!SVC_IMAGE_ID!
   )
 )
 
@@ -201,6 +232,12 @@ echo Server load and recreate:
 if /i "%SERVICE%"=="all" (
   echo   docker load -i !TAR_NAME!
   echo   docker compose -f docker-compose.prod.yml --env-file .env.docker up -d --force-recreate api player admin
+) else if /i "%SERVICE%"=="api-admin" (
+  echo   docker load -i !TAR_NAME!
+  echo   docker compose -f docker-compose.prod.yml --env-file .env.docker up -d --force-recreate api admin
+) else if /i "%SERVICE%"=="full-themes" (
+  echo   docker load -i !TAR_NAME!
+  echo   docker compose -f docker-compose.prod.yml -f docker-compose.themes.yml --env-file .env.docker up -d
 ) else (
   echo   docker load -i !TAR_NAME!
   echo   docker compose -f docker-compose.prod.yml --env-file .env.docker up -d --force-recreate %SERVICE%
@@ -217,6 +254,10 @@ exit /b 0
 :default_output
 if /i "%SERVICE%"=="all" (
   set "OUTPUT=thebet365-images-%TAG%.tar"
+) else if /i "%SERVICE%"=="api-admin" (
+  set "OUTPUT=thebet365-images-%TAG%.tar"
+) else if /i "%SERVICE%"=="full-themes" (
+  set "OUTPUT=thebet365-full-themes-%TAG%.tar"
 ) else (
   set "OUTPUT=thebet365-%SERVICE%-%TAG%.tar"
 )
@@ -224,10 +265,13 @@ exit /b 0
 
 :validate_service
 if /i "%SERVICE%"=="all" exit /b 0
+if /i "%SERVICE%"=="api-admin" exit /b 0
+if /i "%SERVICE%"=="full-themes" exit /b 0
 if /i "%SERVICE%"=="api" exit /b 0
 if /i "%SERVICE%"=="player" exit /b 0
 if /i "%SERVICE%"=="admin" exit /b 0
-echo ERROR: invalid --service: %SERVICE% (use api, player, admin, or all)
+echo ERROR: invalid --service: %SERVICE% (use api, player, admin, api-admin, full-themes, or all)
+echo TIP:   四套主题一键打包请使用 docs\docker\build-and-export-all-themes.bat
 exit /b 1
 
 :validate_tag
@@ -266,10 +310,19 @@ set "API_IMAGE_ID="
 set "PLAYER_IMAGE_ID="
 set "ADMIN_IMAGE_ID="
 set "SVC_IMAGE_ID="
+set "PLAYER_MAIN_IMAGE_ID="
+set "PLAYER_THEME2_IMAGE_ID="
+set "PLAYER_THEME3_IMAGE_ID="
+set "PLAYER_THEME4_IMAGE_ID="
 for /f "delims=" %%I in ('docker image inspect thebet365-api:%TAG% --format "{{.Id}}" 2^>nul') do set "API_IMAGE_ID=%%I"
 for /f "delims=" %%I in ('docker image inspect thebet365-player:%TAG% --format "{{.Id}}" 2^>nul') do set "PLAYER_IMAGE_ID=%%I"
 for /f "delims=" %%I in ('docker image inspect thebet365-admin:%TAG% --format "{{.Id}}" 2^>nul') do set "ADMIN_IMAGE_ID=%%I"
-if /i not "%SERVICE%"=="all" (
+if /i "%SERVICE%"=="full-themes" (
+  for /f "delims=" %%I in ('docker image inspect thebet365-player:main --format "{{.Id}}" 2^>nul') do set "PLAYER_MAIN_IMAGE_ID=%%I"
+  for /f "delims=" %%I in ('docker image inspect thebet365-player:theme-2 --format "{{.Id}}" 2^>nul') do set "PLAYER_THEME2_IMAGE_ID=%%I"
+  for /f "delims=" %%I in ('docker image inspect thebet365-player:theme-3 --format "{{.Id}}" 2^>nul') do set "PLAYER_THEME3_IMAGE_ID=%%I"
+  for /f "delims=" %%I in ('docker image inspect thebet365-player:theme-4 --format "{{.Id}}" 2^>nul') do set "PLAYER_THEME4_IMAGE_ID=%%I"
+) else if /i not "%SERVICE%"=="all" (
   for /f "delims=" %%I in ('docker image inspect thebet365-%SERVICE%:%TAG% --format "{{.Id}}" 2^>nul') do set "SVC_IMAGE_ID=%%I"
 )
 exit /b 0
diff --git a/docs/docker/build-and-export-images.ps1 b/docs/docker/build-and-export-images.ps1
index 02653cf..c8d00d9 100644
--- a/docs/docker/build-and-export-images.ps1
+++ b/docs/docker/build-and-export-images.ps1
@@ -1,13 +1,17 @@
-# 构建 api / player / admin 生产镜像并导出为 tar
-# 用法（在项目根目录或本目录执行均可）:
+# ?? api / player / admin ???????? tar
+# ??????????????????:
 #   .\docs\docker\build-and-export-images.ps1
 #   .\docs\docker\build-and-export-images.ps1 -Service admin
 #   .\docs\docker\build-and-export-images.ps1 -Tag v1.2.3
 #   .\docs\docker\build-and-export-images.ps1 -UseCache
 #   .\docs\docker\build-and-export-images.ps1 -ExportOnly
+#
+# ????????????????????????????????????
+#   docs\docker\build-and-export-all-themes.bat
+
 
 param(
-  [ValidateSet("all", "api", "player", "admin")]
+  [ValidateSet("all", "api", "player", "admin", "api-admin")]
   [string]$Service = "all",
   [string]$Tag = $env:IMAGE_TAG,
   [switch]$UseCache,
@@ -27,27 +31,27 @@ function Get-DefaultTag { "latest" }
 
 function Get-DefaultOutput {
   param([string]$Svc, [string]$ImageTag)
-  if ($Svc -eq "all") { return "thebet365-images-$ImageTag.tar" }
+  if ($Svc -eq "all" -or $Svc -eq "api-admin") { return "thebet365-images-$ImageTag.tar" }
   return "thebet365-$Svc-$ImageTag.tar"
 }
 
 function Assert-ImageTag {
   param([string]$Value)
   if ($Value -notmatch '^[A-Za-z0-9_][A-Za-z0-9_.-]{0,127}$') {
-    throw "镜像 tag 不合法: $Value"
+    throw "?? tag ???? $Value"
   }
 }
 
 if (-not (Test-Path $ComposeFile)) {
-  throw "未找到 $ComposeFile（当前目录: $Root）"
+  throw "????$ComposeFile?????? $Root??
 }
 
 if (-not (Test-Path $EnvFile)) {
   if (Test-Path ".env.docker.example") {
-    Write-Warning "未找到 .env.docker，使用 .env.docker.example（生产请复制并修改密钥）"
+    Write-Warning "????.env.docker????.env.docker.example????????????"
     $EnvFile = ".env.docker.example"
   } else {
-    throw "未找到 .env.docker 或 .env.docker.example"
+    throw "????.env.docker ??.env.docker.example"
   }
 }
 
@@ -56,7 +60,11 @@ if ([string]::IsNullOrWhiteSpace($Tag)) {
 }
 Assert-ImageTag $Tag
 
-$BuildServices = if ($Service -eq "all") { $AllServices } else { @($Service) }
+$BuildServices = switch ($Service) {
+  "all" { $AllServices }
+  "api-admin" { @("api", "admin") }
+  default { @($Service) }
+}
 $SaveImages = $BuildServices | ForEach-Object { "thebet365-${_}:${Tag}" }
 
 if ([string]::IsNullOrWhiteSpace($Output)) {
@@ -64,7 +72,7 @@ if ([string]::IsNullOrWhiteSpace($Output)) {
 }
 
 if (-not $ExportOnly) {
-  Write-Host "==> 构建镜像: $($BuildServices -join ', ') (tag: $Tag)"
+  Write-Host "==> ????: $($BuildServices -join ', ') (tag: $Tag)"
   $buildArgs = @(
     "compose", "-f", $ComposeFile, "--env-file", $EnvFile, "build"
   )
@@ -76,7 +84,7 @@ if (-not $ExportOnly) {
   try {
     $env:IMAGE_TAG = $Tag
     & docker @buildArgs
-    if ($LASTEXITCODE -ne 0) { throw "docker build 失败，退出码 $LASTEXITCODE" }
+    if ($LASTEXITCODE -ne 0) { throw "docker build ?????? $LASTEXITCODE" }
   } finally {
     $env:IMAGE_TAG = $oldImageTag
   }
@@ -84,9 +92,9 @@ if (-not $ExportOnly) {
 
 $OutputPath = if ([System.IO.Path]::IsPathRooted($Output)) { $Output } else { Join-Path $Root $Output }
 
-Write-Host "==> 导出镜像 ($Service) -> $OutputPath"
+Write-Host "==> ???? ($Service) -> $OutputPath"
 & docker save @SaveImages -o $OutputPath
-if ($LASTEXITCODE -ne 0) { throw "docker save 失败，退出码 $LASTEXITCODE" }
+if ($LASTEXITCODE -ne 0) { throw "docker save ?????? $LASTEXITCODE" }
 
 $manifestPath = if ($OutputPath.EndsWith(".tar")) {
   $OutputPath.Substring(0, $OutputPath.Length - 4) + ".manifest.txt"
@@ -117,7 +125,7 @@ $manifestLines = @(
 )
 foreach ($svc in $BuildServices) {
   $imageId = (& docker image inspect "thebet365-${svc}:${Tag}" --format "{{.Id}}").Trim()
-  if ($Service -eq "all") {
+  if ($Service -eq "all" -or $Service -eq "api-admin") {
     $manifestLines += "${svc}_image=thebet365-${svc}:${Tag}"
     $manifestLines += "${svc}_image_id=$imageId"
   } else {
@@ -128,13 +136,17 @@ foreach ($svc in $BuildServices) {
 $manifestLines | Set-Content -Encoding UTF8 $manifestPath
 
 $sizeMb = [math]::Round((Get-Item $OutputPath).Length / 1MB, 2)
-Write-Host "完成: $OutputPath (${sizeMb} MB)"
+Write-Host "??: $OutputPath (${sizeMb} MB)"
 Write-Host "Manifest: $manifestPath"
 
-$recreate = if ($Service -eq "all") { "api player admin" } else { $Service }
+$recreate = switch ($Service) {
+  "all" { "api player admin" }
+  "api-admin" { "api admin" }
+  default { $Service }
+}
 Write-Host @"
 
-服务器导入并重建:
+????????:
   docker load -i $([System.IO.Path]::GetFileName($OutputPath))
   docker compose -f docker-compose.prod.yml --env-file .env.docker up -d --force-recreate $recreate
 "@
diff --git a/docs/docker/build-and-export-images.sh b/docs/docker/build-and-export-images.sh
index 39c9d63..5b04613 100755
--- a/docs/docker/build-and-export-images.sh
+++ b/docs/docker/build-and-export-images.sh
@@ -25,7 +25,7 @@ default_tag() { echo "latest"; }
 
 default_output() {
   local svc="$1" image_tag="$2"
-  if [[ "$svc" == "all" ]]; then
+  if [[ "$svc" == "all" || "$svc" == "api-admin" ]]; then
     echo "thebet365-images-${image_tag}.tar"
   else
     echo "thebet365-${svc}-${image_tag}.tar"
@@ -39,8 +39,8 @@ validate_tag() {
 
 validate_service() {
   case "$1" in
-    all|api|player|admin) ;;
-    *) echo "错误: --service 无效: $1（可选 api / player / admin / all）" >&2; exit 1 ;;
+    all|api|player|admin|api-admin) ;;
+    *) echo "错误: --service 无效: $1（可选 api / player / admin / api-admin / all）" >&2; exit 1 ;;
   esac
 }
 
@@ -49,7 +49,7 @@ usage() {
 用法: docs/docker/build-and-export-images.sh [选项]
 
 选项:
-  --service SVC    api | player | admin | all（默认 all）
+  --service SVC    api | player | admin | api-admin | all（默认 all）
   --tag TAG        镜像 tag（默认 latest）
   --use-cache      构建时使用 Docker 缓存（默认 --no-cache）
   --export-only    跳过构建，仅导出已有指定 tag 镜像
@@ -105,6 +105,8 @@ OUTPUT="${OUTPUT:-$(default_output "$SERVICE" "$TAG")}"
 
 if [[ "$SERVICE" == "all" ]]; then
   BUILD_SERVICES=(api player admin)
+elif [[ "$SERVICE" == "api-admin" ]]; then
+  BUILD_SERVICES=(api admin)
 else
   BUILD_SERVICES=("$SERVICE")
 fi
@@ -161,7 +163,7 @@ fi
   echo "tar=$(basename "$OUTPUT_PATH")"
   echo "tar_sha256=$CHECKSUM"
   for svc in "${BUILD_SERVICES[@]}"; do
-    if [[ "$SERVICE" == "all" ]]; then
+    if [[ "$SERVICE" == "all" || "$SERVICE" == "api-admin" ]]; then
       echo "${svc}_image=thebet365-${svc}:$TAG"
       echo "${svc}_image_id=$(docker image inspect "thebet365-${svc}:$TAG" --format '{{.Id}}')"
     else
@@ -182,6 +184,8 @@ echo "Manifest: $MANIFEST_PATH"
 RECREATE="$SERVICE"
 if [[ "$SERVICE" == "all" ]]; then
   RECREATE="api player admin"
+elif [[ "$SERVICE" == "api-admin" ]]; then
+  RECREATE="api admin"
 fi
 
 cat <<EOF
diff --git a/docs/docker/build-and-export-player-main.bat b/docs/docker/build-and-export-player-main.bat
new file mode 100644
index 0000000..662d4f4
--- /dev/null
+++ b/docs/docker/build-and-export-player-main.bat
@@ -0,0 +1,30 @@
+@echo off
+REM Build and export main player theme only.
+REM Automatically switches to 'main' branch, builds, and restores original branch.
+REM Usage: docs\docker\build-and-export-player-main.bat [options]
+
+cd /d "%~dp0..\.."
+set "BRANCH=main"
+set "TAG=main"
+
+set "ORIGINAL_BRANCH="
+for /f "delims=" %%B in ('git rev-parse --abbrev-ref HEAD 2^>nul') do set "ORIGINAL_BRANCH=%%B"
+if not defined ORIGINAL_BRANCH (
+  echo ERROR: Cannot determine current Git branch.
+  exit /b 1
+)
+
+echo [INFO] Switching to branch %BRANCH%...
+git checkout %BRANCH% >nul 2>&1
+if errorlevel 1 (
+  echo [ERROR] Cannot switch to branch %BRANCH%
+  exit /b 1
+)
+
+call docs\docker\build-and-export-images.bat --service player --tag %TAG% %*
+set "BUILD_STATUS=%ERRORLEVEL%"
+
+echo [INFO] Restoring original branch: %ORIGINAL_BRANCH%
+git checkout %ORIGINAL_BRANCH% >nul 2>&1
+
+exit /b %BUILD_STATUS%
diff --git a/docs/docker/build-and-export-player-theme-2.bat b/docs/docker/build-and-export-player-theme-2.bat
new file mode 100644
index 0000000..acfa6fc
--- /dev/null
+++ b/docs/docker/build-and-export-player-theme-2.bat
@@ -0,0 +1,30 @@
+@echo off
+REM Build and export theme-2 player theme only.
+REM Automatically switches to 'theme-2' branch, builds, and restores original branch.
+REM Usage: docs\docker\build-and-export-player-theme-2.bat [options]
+
+cd /d "%~dp0..\.."
+set "BRANCH=theme-2"
+set "TAG=theme-2"
+
+set "ORIGINAL_BRANCH="
+for /f "delims=" %%B in ('git rev-parse --abbrev-ref HEAD 2^>nul') do set "ORIGINAL_BRANCH=%%B"
+if not defined ORIGINAL_BRANCH (
+  echo ERROR: Cannot determine current Git branch.
+  exit /b 1
+)
+
+echo [INFO] Switching to branch %BRANCH%...
+git checkout %BRANCH% >nul 2>&1
+if errorlevel 1 (
+  echo [ERROR] Cannot switch to branch %BRANCH%
+  exit /b 1
+)
+
+call docs\docker\build-and-export-images.bat --service player --tag %TAG% %*
+set "BUILD_STATUS=%ERRORLEVEL%"
+
+echo [INFO] Restoring original branch: %ORIGINAL_BRANCH%
+git checkout %ORIGINAL_BRANCH% >nul 2>&1
+
+exit /b %BUILD_STATUS%
diff --git a/docs/docker/build-and-export-player-theme-3.bat b/docs/docker/build-and-export-player-theme-3.bat
new file mode 100644
index 0000000..b17d4b2
--- /dev/null
+++ b/docs/docker/build-and-export-player-theme-3.bat
@@ -0,0 +1,30 @@
+@echo off
+REM Build and export theme-3 player theme only.
+REM Automatically switches to 'theme-3' branch, builds, and restores original branch.
+REM Usage: docs\docker\build-and-export-player-theme-3.bat [options]
+
+cd /d "%~dp0..\.."
+set "BRANCH=theme-3"
+set "TAG=theme-3"
+
+set "ORIGINAL_BRANCH="
+for /f "delims=" %%B in ('git rev-parse --abbrev-ref HEAD 2^>nul') do set "ORIGINAL_BRANCH=%%B"
+if not defined ORIGINAL_BRANCH (
+  echo ERROR: Cannot determine current Git branch.
+  exit /b 1
+)
+
+echo [INFO] Switching to branch %BRANCH%...
+git checkout %BRANCH% >nul 2>&1
+if errorlevel 1 (
+  echo [ERROR] Cannot switch to branch %BRANCH%
+  exit /b 1
+)
+
+call docs\docker\build-and-export-images.bat --service player --tag %TAG% %*
+set "BUILD_STATUS=%ERRORLEVEL%"
+
+echo [INFO] Restoring original branch: %ORIGINAL_BRANCH%
+git checkout %ORIGINAL_BRANCH% >nul 2>&1
+
+exit /b %BUILD_STATUS%
diff --git a/docs/docker/build-and-export-player-theme-4.bat b/docs/docker/build-and-export-player-theme-4.bat
new file mode 100644
index 0000000..2e20b6d
--- /dev/null
+++ b/docs/docker/build-and-export-player-theme-4.bat
@@ -0,0 +1,30 @@
+@echo off
+REM Build and export theme-4 player theme only.
+REM Automatically switches to 'theme-4' branch, builds, and restores original branch.
+REM Usage: docs\docker\build-and-export-player-theme-4.bat [options]
+
+cd /d "%~dp0..\.."
+set "BRANCH=theme-4"
+set "TAG=theme-4"
+
+set "ORIGINAL_BRANCH="
+for /f "delims=" %%B in ('git rev-parse --abbrev-ref HEAD 2^>nul') do set "ORIGINAL_BRANCH=%%B"
+if not defined ORIGINAL_BRANCH (
+  echo ERROR: Cannot determine current Git branch.
+  exit /b 1
+)
+
+echo [INFO] Switching to branch %BRANCH%...
+git checkout %BRANCH% >nul 2>&1
+if errorlevel 1 (
+  echo [ERROR] Cannot switch to branch %BRANCH%
+  exit /b 1
+)
+
+call docs\docker\build-and-export-images.bat --service player --tag %TAG% %*
+set "BUILD_STATUS=%ERRORLEVEL%"
+
+echo [INFO] Restoring original branch: %ORIGINAL_BRANCH%
+git checkout %ORIGINAL_BRANCH% >nul 2>&1
+
+exit /b %BUILD_STATUS%
diff --git a/docs/docker/镜像构建与导出.md b/docs/docker/镜像构建与导出.md
index 3717c7b..e709d50 100644
--- a/docs/docker/镜像构建与导出.md
+++ b/docs/docker/镜像构建与导出.md
@@ -14,8 +14,14 @@
 |------|----------|
 | `docs/docker/build-and-export-images.bat` | Windows（CMD，构建全部） |
 | `docs/docker/build-and-export-api.bat` | Windows（仅 api，可双击） |
-| `docs/docker/build-and-export-player.bat` | Windows（仅 player，可双击） |
+| `docs/docker/build-and-export-player.bat` | Windows（仅单分支 player，可双击） |
+| `docs/docker/build-and-export-player-main.bat` | Windows（仅主站/暗金主题，自动切分支） |
+| `docs/docker/build-and-export-player-theme-2.bat` | Windows（仅 theme-2 蓝白主题，自动切分支） |
+| `docs/docker/build-and-export-player-theme-3.bat` | Windows（仅 theme-3 移动主题，自动切分支） |
+| `docs/docker/build-and-export-player-theme-4.bat` | Windows（仅 theme-4 海军蓝极简，自动切分支） |
 | `docs/docker/build-and-export-admin.bat` | Windows（仅 admin，可双击） |
+| `docs/docker/build-and-export-all-themes.ps1` | Windows（**四套主题 player 一键打包**，自动切分支，推荐） |
+| `docs/docker/build-and-export-all-themes.bat` | Windows（同上，薄包装启动器，双击可用） |
 | `docs/docker/build-and-export-images.ps1` | Windows（PowerShell） |
 | `docs/docker/build-and-export-images.sh` | Linux / macOS / Git Bash |
 
@@ -118,6 +124,81 @@ docs\docker\build-and-export-images.bat --export-only
 
 ---
 
+## 三、四套主题玩家端打包
+
+> 关联文档：[四套主题Docker部署任务.md](../四套主题Docker部署任务.md)「阶段 C」
+
+### 一键打包（推荐）
+
+脚本会自动：切到各主题分支 → 构建 player 镜像 → 导出 tar → 切回原分支 → 构建 api/admin。
+
+> **为何用 PowerShell？** 本脚本仅存在于 `main` 分支；执行过程中会 `git checkout theme-*`，CMD 批处理会从磁盘逐行读取，切分支后脚本文件消失会导致中断。PowerShell 启动时已将整份脚本载入内存，可安全跨分支执行。`.bat` 仅为薄包装，内部转调 `.ps1`。
+
+```powershell
+cd C:\path\to\thebet365
+.\docs\docker\build-and-export-all-themes.ps1
+```
+
+或双击 / CMD：
+
+```bat
+docs\docker\build-and-export-all-themes.bat
+```
+
+可选参数（PowerShell 与 bat 均支持）：
+
+| 参数 | 说明 |
+|------|------|
+| `-UseCache` / `--use-cache` | 使用 Docker 层缓存，加快重复构建速度 |
+| `-ExportOnly` / `--export-only` | 跳过构建，仅导出本地已有镜像 |
+| `-SkipApiAdmin` / `--skip-api-admin` | 只打四套 player，跳过 api/admin |
+| `-SkipBundle` / `--skip-bundle` | 跳过六合一包，仅保留分散 tar |
+
+### 产物
+
+| tar 文件 | 加载后镜像名 |
+|----------|----------------|
+| `thebet365-player-main.tar` | `thebet365-player:main` |
+| `thebet365-player-theme-2.tar` | `thebet365-player:theme-2` |
+| `thebet365-player-theme-3.tar` | `thebet365-player:theme-3` |
+| `thebet365-player-theme-4.tar` | `thebet365-player:theme-4` |
+| `thebet365-images-latest.tar` | `thebet365-api:latest` + `thebet365-admin:latest` |
+| **`thebet365-full-themes-latest.tar`** | **上面全部 6 个镜像（上传这一个即可）** |
+
+也可单独导出六合一包（本地镜像已齐时）：
+
+```bat
+docs\docker\build-and-export-images.bat --service full-themes --export-only --tag latest
+```
+
+### 分支要求
+
+- 执行前确保 `main`、`theme-2`、`theme-3`、`theme-4` 四个分支在本地均已拉取
+- 工作区若有未提交变更，脚本会给出 WARN；建议先 `git stash` 后再运行
+- 若某一分支切换失败，该分支会被跳过并标记失败，其余分支仍继续构建
+
+### 手动逐一打包（有明确失败时）
+
+```bat
+git checkout main
+docs\docker\build-and-export-images.bat --service player --tag main
+
+git checkout theme-2
+docs\docker\build-and-export-images.bat --service player --tag theme-2
+
+git checkout theme-3
+docs\docker\build-and-export-images.bat --service player --tag theme-3
+
+git checkout theme-4
+docs\docker\build-and-export-images.bat --service player --tag theme-4
+
+REM 最后打 api + admin
+git checkout main
+docs\docker\build-and-export-images.bat --tag latest
+```
+
+---
+
 ## 四、构建产物
 
 | 镜像名 | 说明 |
diff --git a/docs/四套主题Docker部署任务.md b/docs/四套主题Docker部署任务.md
index 29bc27b..a1032e1 100644
--- a/docs/四套主题Docker部署任务.md
+++ b/docs/四套主题Docker部署任务.md
@@ -37,11 +37,11 @@
 
 ### 阶段 A — 仓库改动（一次性）
 
-- [ ] **A1** 新增 `docker-compose.themes.yml`（player2 / player3 / player4 服务定义）
-- [ ] **A2** 更新 `.env.docker.example`（`PLAYER2_*` ~ `PLAYER4_*`、`CORS_ORIGINS` 示例）
-- [ ] **A3** 更新 `docker-compose.prod.yml` 中 `player` 使用 `PLAYER_IMAGE_TAG`（与 `IMAGE_TAG` 解耦，见下文片段）
-- [ ] **A4**（可选）在 `docs/Docker部署指南.md` 增加「多主题」小节链接到本文
-- [ ] **A5**（可选）在 `AGENTS.md` 文档索引增加本文链接
+- [x] **A1** 新增 `docker-compose.themes.yml`（player2 / player3 / player4 服务定义）
+- [x] **A2** 更新 `.env.docker.example`（`PLAYER2_*` ~ `PLAYER4_*`、`CORS_ORIGINS` 示例）
+- [x] **A3** 更新 `docker-compose.prod.yml` 中 `player` 使用 `PLAYER_IMAGE_TAG`（与 `IMAGE_TAG` 解耦，见下文片段）
+- [x] **A4**（可选）在 `docs/Docker部署指南.md` 增加「多主题」小节链接到本文
+- [x] **A5**（可选）在 `AGENTS.md` 文档索引增加本文链接
 
 ### 阶段 B — 各主题分支同步 main 功能（发版前每个 theme 分支各做一遍）
 
@@ -276,7 +276,18 @@ pnpm dev:player           # http://localhost:5173 目视确认仍是本主题皮
 
 ## 六、构建与上传镜像
 
-### 6.1 四个 player 镜像（Windows CMD）
+### 6.1 四个 player 镜像
+
+**一键打包（推荐，仅 `main` 分支提供脚本）：**
+
+```powershell
+cd C:\path\to\thebet365
+.\docs\docker\build-and-export-all-themes.ps1 -SkipApiAdmin
+```
+
+或 `docs\docker\build-and-export-all-themes.bat --skip-api-admin`（内部转调 PowerShell，避免切分支后 bat 从磁盘消失）。
+
+**手动逐步（Windows CMD）：**
 
 ```bat
 cd C:\path\to\thebet365
diff --git a/scripts/ensure-port-free.mjs b/scripts/ensure-port-free.mjs
index fddbc29..fe84f38 100644
--- a/scripts/ensure-port-free.mjs
+++ b/scripts/ensure-port-free.mjs
@@ -1,7 +1,7 @@
 import { execSync } from 'node:child_process';
-import { resolveApiDevPort } from './dev-api-target.mjs';
+import { resolveDevApiPort } from './resolve-dev-api-target.mjs';
 
-const port = process.argv[2] ?? resolveApiDevPort();
+const port = process.argv[2] ?? resolveDevApiPort();
 
 function killWindows(portNum) {
   let out = '';
diff --git a/scripts/resolve-dev-api-target.mjs b/scripts/resolve-dev-api-target.mjs
new file mode 100644
index 0000000..8402062
--- /dev/null
+++ b/scripts/resolve-dev-api-target.mjs
@@ -0,0 +1,17 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const envPath = resolve(root, 'apps/api/.env');
+
+/** 读取 apps/api/.env 的 PORT，供 Vite 代理与 dev 脚本共用 */
+export function resolveDevApiPort(fallback = '3000') {
+  if (!existsSync(envPath)) return fallback;
+  const match = readFileSync(envPath, 'utf8').match(/^PORT=(\d+)/m);
+  return match?.[1] ?? fallback;
+}
+
+export function resolveDevApiTarget(fallbackPort = '3000') {
+  return `http://127.0.0.1:${resolveDevApiPort(fallbackPort)}`;
+}
diff --git a/skills-lock.json b/skills-lock.json
index e0caf0f..310fcb9 100644
--- a/skills-lock.json
+++ b/skills-lock.json
@@ -61,12 +61,24 @@
       "skillPath": "skills/minimalist-skill/SKILL.md",
       "computedHash": "08873a3131d3be27bef9bf3304b310b16b44ca6e3561aebe532797be3443f6bd"
     },
+    "receiving-code-review": {
+      "source": "obra/superpowers",
+      "sourceType": "github",
+      "skillPath": "skills/receiving-code-review/SKILL.md",
+      "computedHash": "3f56080356c62e4f74a183d7371686babc661e41a952dc67a97c2c76fe8a9329"
+    },
     "redesign-existing-projects": {
       "source": "leonxlnx/taste-skill",
       "sourceType": "github",
       "skillPath": "skills/redesign-skill/SKILL.md",
       "computedHash": "b405eee0e0e80fc243f731d9aa368bca307e356db7e6157d27101d369dac6726"
     },
+    "requesting-code-review": {
+      "source": "obra/superpowers",
+      "sourceType": "github",
+      "skillPath": "skills/requesting-code-review/SKILL.md",
+      "computedHash": "cde520e9118d7e6b74b5ab0123cff2f68d9c07bddb3f82c997753b6126600aed"
+    },
     "stitch-design-taste": {
       "source": "leonxlnx/taste-skill",
       "sourceType": "github",