feat(player): improve wallet activity and session handling

fix(player): harden realtime auth and refactor hall betting
fix(iframe): validate trusted parent messages
2026-07-22 20:53:43 +08:00 · 2026-07-22 01:40:37 +08:00 · 2026-07-21 23:41:18 +08:00 · 2026-07-21 23:41:18 +08:00 · 2026-07-21 23:41:18 +08:00 · 2026-07-21 21:11:07 +08:00
61 changed files with 4082 additions and 1959 deletions
--- a/design-qa.md
+++ b/design-qa.md
@@ -0,0 +1,148 @@
+# 玩家端 PC 桌面化 Design QA
+
+final result: passed
+
+## 基准与实现证据
+
+- 视觉基准（方案 3）：`/Users/wchino/.codex/generated_images/019f8441-2864-75d2-a2a9-69bc25a3bc7a/exec-3297a599-f1a3-40a2-8845-e4d38b19bc52.png`
+- 1728×907 最终实现：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/final-1728x907-populated.jpg`
+- 同画布左右对比：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/design-comparison-option3-vs-implementation.jpg`
+- 1024×768 最终实现：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/final-1024x768.jpg`
+- 390×844 移动回归：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/full-390x844.jpg`
+- 480×844 移动回归：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/viewport-480x844-full.jpg`
+- 浏览器批注修正后 1567×899：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/followup-audit/hall-after-1567x899.jpg`
+
+## 验收状态
+
+- 桌面基准状态：已登录、信用模式、开放期号；大厅使用 4D、四条有效草稿、一家开注商，用于检验工具区、表格密度和复核栏。
+- 1024×768：复核摘要位于表格下方，宽度 743px；表格宽度 741px。页面 `scrollWidth === clientWidth === 1024`，横向滚动仅在表格内部。
+- 1280×800、1440×900：复核摘要位于表格下方；1500px 以上复核栏位于表格右侧，避免中等桌面宽度压缩输入区。页面无全局横向滚动。
+- 390×844、480×844：继续使用原移动布局和底部提交栏；页面无全局横向滚动。
+- 主导航、玩法切换、号码和金额输入、预览、提交、注单展开、信用流水筛选均可操作。
+- Chrome 控制台没有新增 error；只有开发模式 HMR、TokenRefresh 和 React DevTools 提示。
+
+## 真实数据闭环
+
+- 测试订单号：`TO20260721111116994982`
+- 票号：`TK20260721111116970261`
+- 期号：`20260721-1039`
+- 测试内容：号码 `3147`、玩法 `大`、Singapore、`NPR 1.00`
+- 我的注单：总记录从 8 增至 9，订单立即出现并可展开查看票号、玩法、号码、开注商和金额。
+- 信用流水：新增“下注占用 −NPR 1.00”；提交时可用信用从 `NPR 95,891.00` 变为 `NPR 95,890.00`，已用信用从 `NPR 3,098.00` 变为 `NPR 3,099.00`，与授信 `NPR 98,989.00` 一致。
+
+## 差异检查与迭代
+
+1. 初版将三步工具区和复核区按方案 3 重组，保留真实表格列、开注商与提交预览。
+2. 1024px 首轮发现状态卡金额和第三步操作被压缩，调整状态区为 16rem 信用卡、隐藏窄屏次要授信摘要，并收窄玩法按钮。
+3. 复查 1024px 后期号、倒计时和信用金额完整显示，第三步操作不再裁切，复核区在表格后保持全宽。
+4. 1728px 同画布对比确认层级、三步工具区、投注台账、右侧复核栏、主操作位置与方案 3 一致；保留现有产品的真实列和业务文案。
+5. 最终 P0：0，P1：0，P2：0。
+
+## 浏览器批注复查
+
+- 大厅汇总条由单行滚动表改为自适应网格：1567、1440、1280、1024、480、390px 均为 `scrollWidth === clientWidth`；本轮进一步扩展为稳定的全玩法换行网格，移动端不显示横向滚动条。
+- 投注表格收窄桌面列宽并调整复核栏断点：1567、1440、1280px 表格内部无横向滚动；1024px 与 480/390px 只在投注表格内部保留必要横向滚动，页面本身无横向滚动。
+- 桌面复核区的可用信用、下注后可用和预计扣款已移除 `NPR` 前缀；“提交前仍会显示最终预览”提示已移除。
+- 开奖结果、我的注单、信用页复查后未发现新的 P0/P1/P2；规则页空数据状态改为有界居中提示，减少空白拉伸感。
+- 规则页 1567×899：`scrollWidth === clientWidth === 1567`；Chrome 控制台无新增 error。
+
+## 浏览器批注复查 2
+
+- 源视觉真值：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/followup-audit/hall-after-1567x899.jpg`，对应本轮三个浏览器批注前的 1567×899 大厅状态。
+- 实现截图：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-2/hall-after-open-1567x899.jpg`；状态为已登录、开放期号、4D、20 条空白行。
+- 全视图同画布对比：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-2/comparison-before-after-open.jpg`。
+- 汇总区聚焦对比：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-2/comparison-summary-focused.jpg`；密集表头和金额状态在原始尺寸下可读，因此无需更多局部裁切。
+- 非零高亮证据：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-2/hall-highlight-1567x899.jpg`。
+- 移动换行证据：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-2/hall-after-390x844.jpg`；31 个汇总单元固定六列换行，汇总区 `scrollWidth === clientWidth === 354`，页面 `scrollWidth === clientWidth === 390`。
+
+### 比较历史与修复
+
+1. P1：汇总区只显示当前玩法列，切换 4D/3D/2D 时内容变化。修复为稳定的 D4、D3、D2 全玩法集合；实测三个 Tab 的 31 个单元内容和顺序完全一致。
+2. P1：列同步复选框仅切换状态，关闭时不会清列。修复为开启后把该列输入同步到所有号码有效的行，关闭后清空该列；实测两行号码的 4C 金额同步为 `7`，取消后两行 4C 均为空。
+3. P1：批量清空会把 20 行缩减为 1 行。修复为只清号码和金额，保留行 ID、开注商和选择类型；实测清空前后均为 20 行，号码和金额为空，20 行默认开注商选择保留。
+4. P2：零值与非零值缺少视觉区分。零值使用灰色表头/数值，非零值使用蓝色表头与浅蓝底；实测 `4A 8.00` 与总计高亮，其他 `0.00` 保持灰态。
+
+### 忠实度检查
+
+- 字体与排版：沿用现有字体、字号和表格字重；长标签在单元格内保持清晰，不截断。
+- 间距与布局：1567px 使用两行自适应汇总网格，390px 使用六列换行；无新增全局或汇总区横向滚动。
+- 颜色与状态：灰态和蓝色高亮继续使用现有 slate/品牌蓝色 token，金额状态对比明确。
+- 图片与资产：本轮没有新增或替换图片、Logo、图标或装饰资产。
+- 文案与内容：保留全部现有玩法名称、金额格式和业务文案，只调整显示集合与交互行为。
+- Chrome 控制台无 error；本轮最终 P0：0，P1：0，P2：0，`final result` 保持 `passed`。
+
+## 浏览器批注复查 3
+
+- 源视觉真值：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-3/hall-before-1221x899.jpg`，对应汇总区仍位于三步工具栏下方的 1221px 大厅状态。
+- 桌面实现：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-3/hall-after-desktop-final-1221x899-cdp.jpg`；视口 1221×899、已登录、开放期号、4D。
+- 移动实现：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-3/hall-after-mobile-final-390x844-cdp.jpg`；视口 390×844。
+- 全视图同画布对比：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-3/comparison-before-after-1221.jpg`。
+- 汇总位置聚焦对比：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-3/comparison-summary-position-focused.jpg`。
+
+### 比较历史与修复
+
+1. P1：汇总区位于三步工具栏和投注表格之间，不符合“位于选择玩法上方”的信息顺序。修复为桌面端在三步工具栏之前渲染汇总区。
+2. P2：第一次移动后，移动端快捷填单位于汇总区和玩法 Tab 之间，汇总区与玩法 Tab 相距 84px。修复为移动端按“快捷填单、汇总区、玩法 Tab”排列，并统一使用 12px 垂直间距。
+3. Post-fix：1221px 下汇总区到三步工具栏为 12px，工具栏到投注表格为 13px；390px 下快捷填单到汇总区、汇总区到玩法 Tab 均为 12px。
+4. Post-fix：1221px 页面 `scrollWidth === clientWidth === 1221`；390px 页面 `scrollWidth === clientWidth === 390`，汇总区 `scrollWidth === clientWidth === 341`。
+
+### 忠实度检查
+
+- 字体与排版：玩法标签、金额字号、字重和换行规则保持不变。
+- 间距与布局：只改变汇总模块顺序并统一相邻模块 12px 节奏，没有改变状态区、工具栏或表格尺寸。
+- 颜色与状态：零值灰态和非零蓝色高亮保持不变。
+- 图片与资产：没有新增或替换 Logo、图标及图片资产。
+- 文案与内容：全部玩法名称、金额、快捷填单和工具栏文案保持不变。
+- Chrome 控制台无 error；本轮最终 P0：0，P1：0，P2：0，`final result` 保持 `passed`。
+
+## 浏览器批注复查 4
+
+- 源视觉真值：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-4/hall-before-390x844.png`，对应移动端快捷填单、汇总区和玩法 Tab 尚未形成独立上下间距的状态。
+- 移动实现：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-4/hall-after-390x844.png`；视口 390×844、已登录、开放期号、4D。
+- 桌面回归：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-4/hall-after-1221x899.png`；视口 1221×899。
+- 全视图同画布对比：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-4/mobile-before-after.png`。
+- 标注区域聚焦对比：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-4/mobile-before-after-focus.png`；快捷填单、玩法 Tab 与相邻模块的边界在原始尺寸下清晰可读，无需继续裁切。
+
+### 比较历史与修复
+
+1. P2：移动端快捷填单、汇总区和玩法 Tab 被放在同一垂直组内，快捷填单区域没有形成用户标注所需的独立上、下边界。修复为把全玩法汇总区移出快捷填单组，移动端顺序调整为“汇总区、快捷填单、玩法 Tab、投注表格”。
+2. Post-fix：390px 下汇总区到快捷填单组为 12px、快捷填单到玩法 Tab 为 12px、玩法组到投注表格为 12px；页面 `scrollWidth === clientWidth === 390`。
+3. Post-fix：1221px 页面 `scrollWidth === clientWidth === 1221`，桌面汇总区、三步工具栏和投注表格结构不变。
+
+### 忠实度检查
+
+- 字体与排版：快捷填单、玩法 Tab、汇总金额和表格字号、字重均未改变。
+- 间距与布局：只拆分移动端模块分组并统一 12px 垂直节奏，标注区域上下都有可见留白。
+- 颜色与状态：灰态汇总、品牌蓝和表格状态色保持不变。
+- 图片与资产：没有新增或替换 Logo、钱包背景、图标及图片资产。
+- 文案与内容：玩法、金额、快捷填单和业务文案保持不变。
+- Chrome 控制台无 error；本轮最终 P0：0，P1：0，P2：0，`final result` 保持 `passed`。
+
+## 浏览器批注复查 5
+
+- 源视觉真值：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-5/hall-before-390x844.png`，对应移动端期号状态卡和可用信用卡直接相贴的状态。
+- 移动实现：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-5/hall-after-390x844.png`；视口 390×844、已登录、开放期号、4D。
+- 桌面回归：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-5/hall-after-1221x899.png`；视口 1221×899。
+- 全视图同画布对比：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-5/mobile-before-after.png`。
+- 顶部模块聚焦对比：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-5/mobile-before-after-focus.png`；状态卡和信用卡的边界与留白在原始尺寸下清晰可读。
+
+### 比较历史与修复
+
+1. P2：移动端期号状态卡与可用信用卡之间为 0px，两个独立信息模块视觉上粘连。修复为移动端容器使用 12px 垂直间距，并在桌面断点归零以继续使用并排网格。
+2. Post-fix：390px 下状态卡到信用卡为 12px，信用卡到全玩法汇总区为 12px；页面 `scrollWidth === clientWidth === 390`。
+3. Post-fix：1221px 下状态卡和信用卡顶部差为 0px，继续保持并排等高布局；页面 `scrollWidth === clientWidth === 1221`。
+
+### 忠实度检查
+
+- 字体与排版：期号、时间、倒计时、信用金额及辅助文案均未改变。
+- 间距与布局：只增加移动端两个顶部模块之间的 12px 间距，桌面网格保持原位。
+- 颜色与状态：状态色、红色信用卡和页面背景 token 保持不变。
+- 图片与资产：钱包背景、Logo 和现有图标均未新增或替换。
+- 文案与内容：期号状态、信用金额和导航文案保持不变。
+- Chrome 控制台无 error；本轮最终 P0：0，P1：0，P2：0，`final result` 保持 `passed`。
+
+## 工程验证
+
+- `npm run lint`：passed
+- `npm run build`：passed
+- `git diff --check`：passed
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,17 +9,19 @@
      "version": "0.1.0",
      "dependencies": {
        "@base-ui/react": "^1.4.1",
-        "axios": "^1.16.0",
+        "@fontsource-variable/noto-sans-devanagari": "^5.3.0",
+        "axios": "^1.18.1",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "date-fns": "^4.1.0",
-        "dompurify": "^3.4.7",
+        "dompurify": "^3.4.12",
+        "geist": "^1.7.2",
        "i18next": "^26.1.0",
        "i18next-browser-languagedetector": "^8.2.1",
        "i18next-http-backend": "^4.0.0",
-        "laravel-echo": "^2.3.4",
+        "laravel-echo": "^2.4.0",
        "lucide-react": "^1.14.0",
-        "next": "16.2.6",
+        "next": "16.2.10",
        "next-themes": "^0.4.6",
        "pusher-js": "^8.5.0",
        "react": "19.2.4",
@@ -34,12 +36,13 @@
      },
      "devDependencies": {
        "@tailwindcss/postcss": "^4",
+        "@types/dompurify": "^3.2.0",
        "@types/node": "^20",
        "@types/react": "^19",
        "@types/react-dom": "^19",
        "babel-plugin-react-compiler": "1.0.0",
        "eslint": "^9",
-        "eslint-config-next": "16.2.6",
+        "eslint-config-next": "16.2.10",
        "shadcn": "^4.7.0",
        "tailwindcss": "^4",
        "typescript": "^5"
@@ -59,13 +62,13 @@
      }
    },
    "node_modules/@babel/code-frame": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.29.0.tgz",
-      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.28.5",
+        "@babel/helper-validator-identifier": "^7.29.7",
        "js-tokens": "^4.0.0",
        "picocolors": "^1.1.1"
      },
@@ -74,9 +77,9 @@
      }
    },
    "node_modules/@babel/compat-data": {
-      "version": "7.29.3",
-      "resolved": "https://registry.npmmirror.com/@babel/compat-data/-/compat-data-7.29.3.tgz",
-      "integrity": "sha512-LIVqM46zQWZhj17qA8wb4nW/ixr2y1Nw+r1etiAWgRM6U1IqP+LNhL1yg440jYZR72jCWcWbLWzIosH+uP1fqg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
      "dev": true,
      "license": "MIT",
      "engines": {
@@ -84,21 +87,21 @@
      }
    },
    "node_modules/@babel/core": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.29.0.tgz",
-      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@babel/code-frame": "^7.29.0",
-        "@babel/generator": "^7.29.0",
-        "@babel/helper-compilation-targets": "^7.28.6",
-        "@babel/helper-module-transforms": "^7.28.6",
-        "@babel/helpers": "^7.28.6",
-        "@babel/parser": "^7.29.0",
-        "@babel/template": "^7.28.6",
-        "@babel/traverse": "^7.29.0",
-        "@babel/types": "^7.29.0",
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
        "@jridgewell/remapping": "^2.3.5",
        "convert-source-map": "^2.0.0",
        "debug": "^4.1.0",
@@ -115,14 +118,14 @@
      }
    },
    "node_modules/@babel/generator": {
-      "version": "7.29.1",
-      "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.29.1.tgz",
-      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz",
+      "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@babel/parser": "^7.29.0",
-        "@babel/types": "^7.29.0",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7",
        "@jridgewell/gen-mapping": "^0.3.12",
        "@jridgewell/trace-mapping": "^0.3.28",
        "jsesc": "^3.0.2"
@@ -145,14 +148,14 @@
      }
    },
    "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz",
-      "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@babel/compat-data": "^7.28.6",
-        "@babel/helper-validator-option": "^7.27.1",
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
        "browserslist": "^4.24.0",
        "lru-cache": "^5.1.1",
        "semver": "^6.3.1"
@@ -184,9 +187,9 @@
      }
    },
    "node_modules/@babel/helper-globals": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
-      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
      "dev": true,
      "license": "MIT",
      "engines": {
@@ -208,29 +211,29 @@
      }
    },
    "node_modules/@babel/helper-module-imports": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
-      "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@babel/traverse": "^7.28.6",
-        "@babel/types": "^7.28.6"
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
      },
      "engines": {
        "node": ">=6.9.0"
      }
    },
    "node_modules/@babel/helper-module-transforms": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz",
-      "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@babel/helper-module-imports": "^7.28.6",
-        "@babel/helper-validator-identifier": "^7.28.5",
-        "@babel/traverse": "^7.28.6"
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
      },
      "engines": {
        "node": ">=6.9.0"
@@ -295,9 +298,9 @@
      }
    },
    "node_modules/@babel/helper-string-parser": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
-      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
      "devOptional": true,
      "license": "MIT",
      "engines": {
@@ -305,9 +308,9 @@
      }
    },
    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
-      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
      "devOptional": true,
      "license": "MIT",
      "engines": {
@@ -315,9 +318,9 @@
      }
    },
    "node_modules/@babel/helper-validator-option": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
-      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
      "dev": true,
      "license": "MIT",
      "engines": {
@@ -325,27 +328,27 @@
      }
    },
    "node_modules/@babel/helpers": {
-      "version": "7.29.2",
-      "resolved": "https://registry.npmmirror.com/@babel/helpers/-/helpers-7.29.2.tgz",
-      "integrity": "sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@babel/template": "^7.28.6",
-        "@babel/types": "^7.29.0"
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
      },
      "engines": {
        "node": ">=6.9.0"
      }
    },
    "node_modules/@babel/parser": {
-      "version": "7.29.3",
-      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.29.3.tgz",
-      "integrity": "sha512-b3ctpQwp+PROvU/cttc4OYl4MzfJUWy6FZg+PMXfzmt/+39iHVF0sDfqay8TQM3JA2EUOyKcFZt75jWriQijsA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
+      "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@babel/types": "^7.29.0"
+        "@babel/types": "^7.29.7"
      },
      "bin": {
        "parser": "bin/babel-parser.js"
@@ -453,33 +456,33 @@
      }
    },
    "node_modules/@babel/template": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.28.6.tgz",
-      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@babel/code-frame": "^7.28.6",
-        "@babel/parser": "^7.28.6",
-        "@babel/types": "^7.28.6"
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
      },
      "engines": {
        "node": ">=6.9.0"
      }
    },
    "node_modules/@babel/traverse": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.29.0.tgz",
-      "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz",
+      "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@babel/code-frame": "^7.29.0",
-        "@babel/generator": "^7.29.0",
-        "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.29.0",
-        "@babel/template": "^7.28.6",
-        "@babel/types": "^7.29.0",
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7",
        "debug": "^4.3.1"
      },
      "engines": {
@@ -487,14 +490,14 @@
      }
    },
    "node_modules/@babel/types": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.29.0.tgz",
-      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
+      "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
      "devOptional": true,
      "license": "MIT",
      "dependencies": {
-        "@babel/helper-string-parser": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.28.5"
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
      },
      "engines": {
        "node": ">=6.9.0"
@@ -994,6 +997,15 @@
      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
      "license": "MIT"
    },
+    "node_modules/@fontsource-variable/noto-sans-devanagari": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/noto-sans-devanagari/-/noto-sans-devanagari-5.3.0.tgz",
+      "integrity": "sha512-52XBcJS3jRvZ5ugFXJvdKgffXPYnN08LeodXkgCbepOdMKVRVTQu1yj071cq8S3zmUwT6w6XKKXRSQlQkwwNNg==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
    "node_modules/@hono/node-server": {
      "version": "1.19.14",
      "resolved": "https://registry.npmmirror.com/@hono/node-server/-/node-server-1.19.14.tgz",
@@ -1828,15 +1840,15 @@
      }
    },
    "node_modules/@next/env": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmmirror.com/@next/env/-/env-16.2.6.tgz",
-      "integrity": "sha512-gd8HoHN4ufj73WmR3JmVolrpJR47ILK6LouP5xElPglaVxir6e1a7VzvTvDWkOoPXT9rkkTzyCxBu4yeZfZwcw==",
+      "version": "16.2.10",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.2.10.tgz",
+      "integrity": "sha512-zLPxg9M0MEHmygpj5OuxjQ+vHMiy/K7cSp74G8ecYolmgUWw0RwN02tF56npup/+qaI8JB97hQgS/r2Hb6QwVA==",
      "license": "MIT"
    },
    "node_modules/@next/eslint-plugin-next": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmmirror.com/@next/eslint-plugin-next/-/eslint-plugin-next-16.2.6.tgz",
-      "integrity": "sha512-Z8l6o4JWKUl755x4R+wogD86KPeU+Ckw4K+SYG4kHeOJtRenDeK+OSbGcqZpDtbwn9DsJVdir2UxmwXuinUbUw==",
+      "version": "16.2.10",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.2.10.tgz",
+      "integrity": "sha512-Gs8D2m21VnJeFo9qvYIIqJH94frWerWYu41BprU1pLtRVF7PCQNLiFZZ3fG+iPuj3K83Cwv/rt+msLOy8Qgu3Q==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -1844,9 +1856,9 @@
      }
    },
    "node_modules/@next/swc-darwin-arm64": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmmirror.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.2.6.tgz",
-      "integrity": "sha512-ZJGkkcNfYgrrMkqOdZ7zoLa1TOy0qpcMfk/z4Mh/FKUz40gVO+HNQWqmLxf67Z5WB64DRp0dhEbyHfel+6sJUg==",
+      "version": "16.2.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.2.10.tgz",
+      "integrity": "sha512-v9IdJCa0H0mbo+8z5zwUpOk1Vj7RjkcI5uNYf5Ws1y6szf/p3Mzl9hLaST8SCt6L9h8NGnruZcd2+o0NTNwDhA==",
      "cpu": [
        "arm64"
      ],
@@ -1860,9 +1872,9 @@
      }
    },
    "node_modules/@next/swc-darwin-x64": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmmirror.com/@next/swc-darwin-x64/-/swc-darwin-x64-16.2.6.tgz",
-      "integrity": "sha512-v/YLBHIY132Ced3puBJ7YJKw1lqsCrgcNo2aRJlCEyQrrCeRJlvGlnmxhPxNQI3KE3N1DN5r9TPNPvka3nq5RQ==",
+      "version": "16.2.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.2.10.tgz",
+      "integrity": "sha512-17IS0jJRViROGmA9uGdNR8VPJpfbnaVG7E9qhso5jDLkmyd0lSDORWxbcKINzcFqzZqGwGtMSnrFRxBpuUYjLQ==",
      "cpu": [
        "x64"
      ],
@@ -1876,9 +1888,9 @@
      }
    },
    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmmirror.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.2.6.tgz",
-      "integrity": "sha512-RPOvqlYBbcQjkz9VQQDZ2T2bARIjXZV1KFlt+V2Mr6SW/e4I9fcKsaA0hdyf2FHoTlsV2xnBd5Y912rP/1Ce6w==",
+      "version": "16.2.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.2.10.tgz",
+      "integrity": "sha512-GRQRsRtuciNJvB54AvvuQTiq0oZtFwa1owQqtZD8wwnGpM2L39MV22kpI72YSXLKIyY40LC66EiLFv4PiicXxg==",
      "cpu": [
        "arm64"
      ],
@@ -1895,9 +1907,9 @@
      }
    },
    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmmirror.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.2.6.tgz",
-      "integrity": "sha512-URUTu1+dMkxJsPFgm+OeEvq9wf5sujw0EvgYy80TDGHTSLTnIHeqb0Eu8A3sC95IRgjejQL+kC4mw+4yPxiAXA==",
+      "version": "16.2.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.2.10.tgz",
+      "integrity": "sha512-zkN9MQYS7UQBro+FnISUq1itaQjXI9xqISzuQ+2bc921NcJ1x4yPCqrn77tVN6/dOOXaaWVX3k6/bR07pPwK+A==",
      "cpu": [
        "arm64"
      ],
@@ -1914,9 +1926,9 @@
      }
    },
    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmmirror.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.2.6.tgz",
-      "integrity": "sha512-DOj182mPV8G3UkrayLoREM5YEYI+Dk5wv7Ox9xl1fFibAELEsFD0lDPfHIeILlutMMfdyhlzYPELG3peuKaurw==",
+      "version": "16.2.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.2.10.tgz",
+      "integrity": "sha512-iCVJnwvrPYECvA6WM/7+oo+OiTvedIKLxtCLAZP4xZR3nXa1zmzZyLPbYCmWvpd4CvMYF1EMTafd0ii3DygLvA==",
      "cpu": [
        "x64"
      ],
@@ -1933,9 +1945,9 @@
      }
    },
    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmmirror.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.2.6.tgz",
-      "integrity": "sha512-HKQ5SP/V/ub73UvF7n/zeJlxk2kLmtL7Wzrg4WfmkjmNos5onJ2tKu7yZOPdL18A6Svfn3max29ym+ry7NkK4g==",
+      "version": "16.2.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.2.10.tgz",
+      "integrity": "sha512-ov2g4H0dHY9bPoOU83m91hWT7Iq5qy13bUnyyshLU3HGR1Ownn0X9QpmDPc5iIUaahTp7f7LeGAhV4DSFtackw==",
      "cpu": [
        "x64"
      ],
@@ -1952,9 +1964,9 @@
      }
    },
    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmmirror.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.2.6.tgz",
-      "integrity": "sha512-LZXpTlPyS5v7HhSmnvsLGP3iIYgYOBnc8r8ArlT55sGHV89bR2HlDdBjWQ+PY6SJMmk8TuVGFuxalnP3k/0Dwg==",
+      "version": "16.2.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.2.10.tgz",
+      "integrity": "sha512-DwAnhLX76HQiFFQNgWlcK+JzlnD1rZ+UK/WY0ZMI/deXpvgnesjNYrqcfo1JzBuz4Kf7o3brIBL0glI1junatA==",
      "cpu": [
        "arm64"
      ],
@@ -1968,9 +1980,9 @@
      }
    },
    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmmirror.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.2.6.tgz",
-      "integrity": "sha512-F0+4i0h9J6C4eE3EAPWsoCk7UW/dbzOjyzxY0qnDUOYFu6FFmdZ6l97/XdV3/Nz3VYyO7UWjyEJUXkGqcoXfMA==",
+      "version": "16.2.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.2.10.tgz",
+      "integrity": "sha512-0JXq3b85Jk9Jg4ntLUbXSPvoDw3gpZou7twuKdoFG2jOw635v7+IiXfTaa0TxVMyx78pUjnrVYwLgjKfX4e6/A==",
      "cpu": [
        "x64"
      ],
@@ -2125,13 +2137,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/@socket.io/component-emitter": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmmirror.com/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
-      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
-      "license": "MIT",
-      "peer": true
-    },
    "node_modules/@swc/helpers": {
      "version": "0.5.15",
      "resolved": "https://registry.npmmirror.com/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -2436,29 +2441,6 @@
        "path-browserify": "^1.0.1"
      }
    },
-    "node_modules/@ts-morph/common/node_modules/balanced-match": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-4.0.4.tgz",
-      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "18 || 20 || >=22"
-      }
-    },
-    "node_modules/@ts-morph/common/node_modules/brace-expansion": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-5.0.6.tgz",
-      "integrity": "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^4.0.2"
-      },
-      "engines": {
-        "node": "18 || 20 || >=22"
-      }
-    },
    "node_modules/@ts-morph/common/node_modules/fast-glob": {
      "version": "3.3.3",
      "resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.3.tgz",
@@ -2516,6 +2498,17 @@
        "tslib": "^2.4.0"
      }
    },
+    "node_modules/@types/dompurify": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/@types/dompurify/-/dompurify-3.2.0.tgz",
+      "integrity": "sha512-Fgg31wv9QbLDA0SpTOXO3MaxySc4DKGLi8sna4/Utjo4r3ZRPdCt4UQee8BWr+Q5z21yifghREPJGYaEOEIACg==",
+      "deprecated": "This is a stub types definition. dompurify provides its own type definitions, so you do not need this installed.",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dompurify": "*"
+      }
+    },
    "node_modules/@types/estree": {
      "version": "1.0.9",
      "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.9.tgz",
@@ -2786,29 +2779,6 @@
        "typescript": ">=4.8.4 <6.1.0"
      }
    },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/balanced-match": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-4.0.4.tgz",
-      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "18 || 20 || >=22"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-5.0.5.tgz",
-      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^4.0.2"
-      },
-      "engines": {
-        "node": "18 || 20 || >=22"
-      }
-    },
    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
      "version": "10.2.5",
      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-10.2.5.tgz",
@@ -3588,16 +3558,42 @@
      }
    },
    "node_modules/axios": {
-      "version": "1.16.0",
-      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.16.0.tgz",
-      "integrity": "sha512-6hp5CwvTPlN2A31g5dxnwAX0orzM7pmCRDLnZSX772mv8WDqICwFjowHuPs04Mc8deIld1+ejhtaMn5vp6b+1w==",
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.18.1.tgz",
+      "integrity": "sha512-3nTvFlvpn9Zu/RkHUqtc7/+al4UpRW5az71ap5zccp6e8RAYEzhMTecX8Dz1wWDYrPpUoB1HAQEGEAEvUr7S9g==",
      "license": "MIT",
      "dependencies": {
        "follow-redirects": "^1.16.0",
        "form-data": "^4.0.5",
+        "https-proxy-agent": "^5.0.1",
        "proxy-from-env": "^2.1.0"
      }
    },
+    "node_modules/axios/node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/axios/node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/axobject-query": {
      "version": "4.1.0",
      "resolved": "https://registry.npmmirror.com/axobject-query/-/axobject-query-4.1.0.tgz",
@@ -3619,11 +3615,14 @@
      }
    },
    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
      "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
    },
    "node_modules/baseline-browser-mapping": {
      "version": "2.10.27",
@@ -3638,21 +3637,21 @@
      }
    },
    "node_modules/body-parser": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmmirror.com/body-parser/-/body-parser-2.2.2.tgz",
-      "integrity": "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.3.0.tgz",
+      "integrity": "sha512-2cGmJupaNgg+QUwVLAucDuWuoMZ6EX9iHDRswZ5lsNYEmwPaRknMPCLZz07yTzVq/83p4o/wzbDZbBrTvGGTIw==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "bytes": "^3.1.2",
-        "content-type": "^1.0.5",
+        "content-type": "^2.0.0",
        "debug": "^4.4.3",
-        "http-errors": "^2.0.0",
-        "iconv-lite": "^0.7.0",
+        "http-errors": "^2.0.1",
+        "iconv-lite": "^0.7.2",
        "on-finished": "^2.4.1",
-        "qs": "^6.14.1",
-        "raw-body": "^3.0.1",
-        "type-is": "^2.0.1"
+        "qs": "^6.15.2",
+        "raw-body": "^3.0.2",
+        "type-is": "^2.1.0"
      },
      "engines": {
        "node": ">=18"
@@ -3662,15 +3661,31 @@
        "url": "https://opencollective.com/express"
      }
    },
+    "node_modules/body-parser/node_modules/content-type": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.0.0.tgz",
+      "integrity": "sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
    "node_modules/brace-expansion": {
-      "version": "1.1.14",
-      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.14.tgz",
-      "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.7.tgz",
+      "integrity": "sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
      }
    },
    "node_modules/braces": {
@@ -4019,7 +4034,7 @@
    },
    "node_modules/concat-map": {
      "version": "0.0.1",
-      "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
      "dev": true,
      "license": "MIT"
@@ -4425,9 +4440,10 @@
      }
    },
    "node_modules/dompurify": {
-      "version": "3.4.7",
-      "resolved": "https://mirrors.cloud.tencent.com/npm/dompurify/-/dompurify-3.4.7.tgz",
-      "integrity": "sha512-2jBxDJY4RR06tQNy4w5FlFH7kfxsQZlufd0sbv+chfHCxeJwrFw2baUDsSwvBISD4K4RDbd0PTfy3uNXsR6siA==",
+      "version": "3.4.12",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.12.tgz",
+      "integrity": "sha512-zQvGet8Z2sWbQhCmfFz/T5QWH2oBmjnqK3qvOjaqaNLrLEF912WamU+ohnTp0TCep/MFVHpdJuCZEdFOdTnEFg==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
      "optionalDependencies": {
        "@types/trusted-types": "^2.0.7"
      }
@@ -4508,30 +4524,6 @@
        "node": ">= 0.8"
      }
    },
-    "node_modules/engine.io-client": {
-      "version": "6.6.4",
-      "resolved": "https://registry.npmmirror.com/engine.io-client/-/engine.io-client-6.6.4.tgz",
-      "integrity": "sha512-+kjUJnZGwzewFDw951CDWcwj35vMNf2fcj7xQWOctq1F2i1jkDdVvdFG9kM/BEChymCH36KgjnW0NsL58JYRxw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@socket.io/component-emitter": "~3.1.0",
-        "debug": "~4.4.1",
-        "engine.io-parser": "~5.2.1",
-        "ws": "~8.18.3",
-        "xmlhttprequest-ssl": "~2.1.1"
-      }
-    },
-    "node_modules/engine.io-parser": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmmirror.com/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
-      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
    "node_modules/enhanced-resolve": {
      "version": "5.21.1",
      "resolved": "https://registry.npmmirror.com/enhanced-resolve/-/enhanced-resolve-5.21.1.tgz",
@@ -4830,13 +4822,13 @@
      }
    },
    "node_modules/eslint-config-next": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmmirror.com/eslint-config-next/-/eslint-config-next-16.2.6.tgz",
-      "integrity": "sha512-z2ELYSkyrrJ6cuunTU8vhsT/RpouPkjaSah06nVW6Rg2Hpg0Vs8s497/e5s8G8qtdp4ccsiovz5P1rv+5VSW2Q==",
+      "version": "16.2.10",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-16.2.10.tgz",
+      "integrity": "sha512-HSybLOY0QKf39i4FWUqPN0xWiNDi6A6UqJmZtgDkS3zMqjXTqULvj/sueXx3cdCG0mVG+qH6k5/qdegklH1d1w==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@next/eslint-plugin-next": "16.2.6",
+        "@next/eslint-plugin-next": "16.2.10",
        "eslint-import-resolver-node": "^0.3.6",
        "eslint-import-resolver-typescript": "^3.5.2",
        "eslint-plugin-import": "^2.32.0",
@@ -5348,7 +5340,7 @@
    },
    "node_modules/fast-glob": {
      "version": "3.3.1",
-      "resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
      "dev": true,
      "license": "MIT",
@@ -5365,7 +5357,7 @@
    },
    "node_modules/fast-glob/node_modules/glob-parent": {
      "version": "5.1.2",
-      "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
      "dev": true,
      "license": "ISC",
@@ -5607,16 +5599,16 @@
      }
    },
    "node_modules/form-data": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.5.tgz",
-      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.6.tgz",
+      "integrity": "sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==",
      "license": "MIT",
      "dependencies": {
        "asynckit": "^0.4.0",
        "combined-stream": "^1.0.8",
        "es-set-tostringtag": "^2.1.0",
-        "hasown": "^2.0.2",
-        "mime-types": "^2.1.12"
+        "hasown": "^2.0.4",
+        "mime-types": "^2.1.35"
      },
      "engines": {
        "node": ">= 6"
@@ -5717,6 +5709,15 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/geist": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/geist/-/geist-1.7.2.tgz",
+      "integrity": "sha512-Gu5lDFa3pLRyoBlBPf0QIFHVdWAnpco7fS1bJm41jyLPFoguBgiubseUN2oLXMgqZ7uxAxDoXcHMhCY/fOTTgg==",
+      "license": "SIL OPEN FONT LICENSE",
+      "peerDependencies": {
+        "next": ">=13.2.0"
+      }
+    },
    "node_modules/generator-function": {
      "version": "2.0.1",
      "resolved": "https://registry.npmmirror.com/generator-function/-/generator-function-2.0.1.tgz",
@@ -6010,9 +6011,9 @@
      }
    },
    "node_modules/hasown": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.3.tgz",
-      "integrity": "sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
      "license": "MIT",
      "dependencies": {
        "function-bind": "^1.1.2"
@@ -6050,9 +6051,9 @@
      }
    },
    "node_modules/hono": {
-      "version": "4.12.18",
-      "resolved": "https://registry.npmmirror.com/hono/-/hono-4.12.18.tgz",
-      "integrity": "sha512-RWzP96k/yv0PQfyXnWjs6zot20TqfpfsNXhOnev8d1InAxubW93L11/oNUc3tQqn2G0bSdAOBpX+2uDFHV7kdQ==",
+      "version": "4.12.31",
+      "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.31.tgz",
+      "integrity": "sha512-zJIHFrl6bq3RDd2YusFNCDlM8qUprxKswyi/OPzPyzKDdyBXDqWx8bZlZ7R+saTdSTatUmb3O7K4SspGPaEOQg==",
      "dev": true,
      "license": "MIT",
      "engines": {
@@ -6903,10 +6904,20 @@
      "license": "MIT"
    },
    "node_modules/js-yaml": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmmirror.com/js-yaml/-/js-yaml-4.1.1.tgz",
-      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.0.tgz",
+      "integrity": "sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==",
      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
      "license": "MIT",
      "dependencies": {
        "argparse": "^2.0.1"
@@ -7046,9 +7057,9 @@
      }
    },
    "node_modules/laravel-echo": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmmirror.com/laravel-echo/-/laravel-echo-2.3.4.tgz",
-      "integrity": "sha512-rpALCIK1uw2SrttcK9P5JzItt5I85RcfXQKUNnkcorzhtKeXi5GS0PVFFBH8ppNo8wnbdBKuD1EtIHgTbXo9FQ==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/laravel-echo/-/laravel-echo-2.4.0.tgz",
+      "integrity": "sha512-8w0fAGSNt6THfbNyqdKc29bhfeNpJg13CGx2fcLgoX0/f0mTJm/AIkYTTakmcr9pc42ZB68cSoE00j4/xNaFGQ==",
      "license": "MIT",
      "engines": {
        "node": ">=20"
@@ -7056,6 +7067,14 @@
      "peerDependencies": {
        "pusher-js": "*",
        "socket.io-client": "*"
+      },
+      "peerDependenciesMeta": {
+        "pusher-js": {
+          "optional": true
+        },
+        "socket.io-client": {
+          "optional": true
+        }
      }
    },
    "node_modules/levn": {
@@ -7433,7 +7452,7 @@
    },
    "node_modules/lru-cache": {
      "version": "5.1.1",
-      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-5.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
      "dev": true,
      "license": "ISC",
@@ -7580,6 +7599,24 @@
        "node": "*"
      }
    },
+    "node_modules/minimatch/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/minimatch/node_modules/brace-expansion": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.16.tgz",
+      "integrity": "sha512-IDw48K2/2kRkg9LdJxurvq3lV3aBgq0REY89duEqFRthjlPdXHKMj7EnQOXVckxzgisinf3nHfrcE2FufFLXMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
    "node_modules/minimist": {
      "version": "1.2.8",
      "resolved": "https://registry.npmmirror.com/minimist/-/minimist-1.2.8.tgz",
@@ -7666,9 +7703,9 @@
      }
    },
    "node_modules/nanoid": {
-      "version": "3.3.12",
-      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.12.tgz",
-      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
+      "version": "3.3.16",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz",
+      "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==",
      "funding": [
        {
          "type": "github",
@@ -7717,12 +7754,12 @@
      }
    },
    "node_modules/next": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmmirror.com/next/-/next-16.2.6.tgz",
-      "integrity": "sha512-qOVgKJg1+At15NpeUP+eJgCHvTCgXsogweq87Ri/Ix7PkqQHg4sdaXmSFqKlgaIXE4kW0g25LE68W87UANlHtw==",
+      "version": "16.2.10",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.2.10.tgz",
+      "integrity": "sha512-2som5AVXb3kE6Yjine3/mNbBayYF58eguBWIVVUdr1y/L426xyVEgYxgBG+1QC34P2x5E+tcDup6XkuOAX3dCA==",
      "license": "MIT",
      "dependencies": {
-        "@next/env": "16.2.6",
+        "@next/env": "16.2.10",
        "@swc/helpers": "0.5.15",
        "baseline-browser-mapping": "^2.9.19",
        "caniuse-lite": "^1.0.30001579",
@@ -7736,14 +7773,14 @@
        "node": ">=20.9.0"
      },
      "optionalDependencies": {
-        "@next/swc-darwin-arm64": "16.2.6",
-        "@next/swc-darwin-x64": "16.2.6",
-        "@next/swc-linux-arm64-gnu": "16.2.6",
-        "@next/swc-linux-arm64-musl": "16.2.6",
-        "@next/swc-linux-x64-gnu": "16.2.6",
-        "@next/swc-linux-x64-musl": "16.2.6",
-        "@next/swc-win32-arm64-msvc": "16.2.6",
-        "@next/swc-win32-x64-msvc": "16.2.6",
+        "@next/swc-darwin-arm64": "16.2.10",
+        "@next/swc-darwin-x64": "16.2.10",
+        "@next/swc-linux-arm64-gnu": "16.2.10",
+        "@next/swc-linux-arm64-musl": "16.2.10",
+        "@next/swc-linux-x64-gnu": "16.2.10",
+        "@next/swc-linux-x64-musl": "16.2.10",
+        "@next/swc-win32-arm64-msvc": "16.2.10",
+        "@next/swc-win32-x64-msvc": "16.2.10",
        "sharp": "^0.34.5"
      },
      "peerDependencies": {
@@ -7779,34 +7816,6 @@
        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
      }
    },
-    "node_modules/next/node_modules/postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "nanoid": "^3.3.6",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
    "node_modules/node-domexception": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/node-domexception/-/node-domexception-1.0.0.tgz",
@@ -8344,10 +8353,9 @@
      }
    },
    "node_modules/postcss": {
-      "version": "8.5.14",
-      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.14.tgz",
-      "integrity": "sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==",
-      "dev": true,
+      "version": "8.5.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.21.tgz",
+      "integrity": "sha512-v4sDNP3fdNiWMfabO7OwOQdOX8TiQSztKyT1Wj0w+j7LDallJThJRBBBmzVGyYj0crMh7jlV4zepPkiNu9UwDQ==",
      "funding": [
        {
          "type": "opencollective",
@@ -8364,7 +8372,7 @@
      ],
      "license": "MIT",
      "dependencies": {
-        "nanoid": "^3.3.11",
+        "nanoid": "^3.3.16",
        "picocolors": "^1.1.1",
        "source-map-js": "^1.2.1"
      },
@@ -8504,13 +8512,14 @@
      }
    },
    "node_modules/qs": {
-      "version": "6.15.1",
-      "resolved": "https://registry.npmmirror.com/qs/-/qs-6.15.1.tgz",
-      "integrity": "sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg==",
+      "version": "6.15.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.3.tgz",
+      "integrity": "sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==",
      "dev": true,
      "license": "BSD-3-Clause",
      "dependencies": {
-        "side-channel": "^1.1.0"
+        "es-define-property": "^1.0.1",
+        "side-channel": "^1.1.1"
      },
      "engines": {
        "node": ">=0.6"
@@ -9270,15 +9279,15 @@
      }
    },
    "node_modules/side-channel": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.1.0.tgz",
-      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz",
+      "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3",
-        "side-channel-list": "^1.0.0",
+        "object-inspect": "^1.13.4",
+        "side-channel-list": "^1.0.1",
        "side-channel-map": "^1.0.1",
        "side-channel-weakmap": "^1.0.2"
      },
@@ -9365,36 +9374,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/socket.io-client": {
-      "version": "4.8.3",
-      "resolved": "https://registry.npmmirror.com/socket.io-client/-/socket.io-client-4.8.3.tgz",
-      "integrity": "sha512-uP0bpjWrjQmUt5DTHq9RuoCBdFJF10cdX9X+a368j/Ft0wmaVgxlrjvK3kjvgCODOMMOz9lcaRzxmso0bTWZ/g==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@socket.io/component-emitter": "~3.1.0",
-        "debug": "~4.4.1",
-        "engine.io-client": "~6.6.1",
-        "socket.io-parser": "~4.2.4"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/socket.io-parser": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmmirror.com/socket.io-parser/-/socket.io-parser-4.2.6.tgz",
-      "integrity": "sha512-asJqbVBDsBCJx0pTqw3WfesSY0iRX+2xzWEWzrpcH7L6fLzrhyF8WPI8UaeM4YCuDfpwA/cgsdugMsmtz8EJeg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@socket.io/component-emitter": "~3.1.0",
-        "debug": "~4.4.1"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
    "node_modules/sonner": {
      "version": "2.0.7",
      "resolved": "https://registry.npmmirror.com/sonner/-/sonner-2.0.7.tgz",
@@ -10001,18 +9980,36 @@
      }
    },
    "node_modules/type-is": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/type-is/-/type-is-2.0.1.tgz",
-      "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.1.0.tgz",
+      "integrity": "sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "content-type": "^1.0.5",
+        "content-type": "^2.0.0",
        "media-typer": "^1.1.0",
        "mime-types": "^3.0.0"
      },
      "engines": {
-        "node": ">= 0.6"
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/type-is/node_modules/content-type": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.0.0.tgz",
+      "integrity": "sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
      }
    },
    "node_modules/type-is/node_modules/mime-db": {
@@ -10543,28 +10540,6 @@
      "dev": true,
      "license": "ISC"
    },
-    "node_modules/ws": {
-      "version": "8.18.3",
-      "resolved": "https://registry.npmmirror.com/ws/-/ws-8.18.3.tgz",
-      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/wsl-utils": {
      "version": "0.3.1",
      "resolved": "https://registry.npmmirror.com/wsl-utils/-/wsl-utils-0.3.1.tgz",
@@ -10582,15 +10557,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/xmlhttprequest-ssl": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmmirror.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
-      "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
-      "peer": true,
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
    "node_modules/y18n": {
      "version": "5.0.8",
      "resolved": "https://registry.npmmirror.com/y18n/-/y18n-5.0.8.tgz",
@@ -10603,7 +10569,7 @@
    },
    "node_modules/yallist": {
      "version": "3.1.1",
-      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-3.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
      "dev": true,
      "license": "ISC"
--- a/package.json
+++ b/package.json
@@ -10,17 +10,19 @@
  },
  "dependencies": {
    "@base-ui/react": "^1.4.1",
-    "axios": "^1.16.0",
+    "@fontsource-variable/noto-sans-devanagari": "^5.3.0",
+    "axios": "^1.18.1",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "date-fns": "^4.1.0",
-    "dompurify": "^3.4.7",
+    "dompurify": "^3.4.12",
+    "geist": "^1.7.2",
    "i18next": "^26.1.0",
    "i18next-browser-languagedetector": "^8.2.1",
    "i18next-http-backend": "^4.0.0",
-    "laravel-echo": "^2.3.4",
+    "laravel-echo": "^2.4.0",
    "lucide-react": "^1.14.0",
-    "next": "16.2.6",
+    "next": "16.2.10",
    "next-themes": "^0.4.6",
    "pusher-js": "^8.5.0",
    "react": "19.2.4",
@@ -41,9 +43,18 @@
    "@types/react-dom": "^19",
    "babel-plugin-react-compiler": "1.0.0",
    "eslint": "^9",
-    "eslint-config-next": "16.2.6",
+    "eslint-config-next": "16.2.10",
    "shadcn": "^4.7.0",
    "tailwindcss": "^4",
    "typescript": "^5"
+  },
+  "overrides": {
+    "@babel/core": "^7.29.1",
+    "body-parser": "^2.3.0",
+    "form-data": "^4.0.6",
+    "hono": "^4.12.25",
+    "js-yaml": "^4.3.0",
+    "postcss": "^8.5.10",
+    "qs": "^6.15.2"
  }
 }
--- a/src/api/player-auth.ts
+++ b/src/api/player-auth.ts
@@ -27,6 +27,12 @@ export type PlayerAuthLoginData = {
  };
 };

+export type PlayerPasswordUpdatePayload = {
+  current_password: string;
+  password: string;
+  password_confirmation: string;
+};
+
 /** `GET /api/v1/player/auth/captcha`（公开） */
 export function getPlayerAuthCaptcha(): Promise<PlayerAuthCaptchaResponse> {
  return lotteryRequest.get<PlayerAuthCaptchaResponse>(`/player/auth/captcha`, {
@@ -42,3 +48,10 @@ export function postPlayerAuthLogin(body: PlayerAuthLoginPayload): Promise<Playe
    ...body,
  });
 }
+
+/** `PUT /api/v1/player/password`（仅彩票端账号密码玩家） */
+export function putPlayerPassword(
+  body: PlayerPasswordUpdatePayload,
+): Promise<{ password_changed: boolean }> {
+  return lotteryRequest.put<{ password_changed: boolean }>(`/player/password`, body);
+}
--- a/src/api/ticket-items.ts
+++ b/src/api/ticket-items.ts
@@ -9,6 +9,7 @@ export type GetTicketItemsParams = {
  page?: number;
  per_page?: number;
  draw_no?: string;
+  ticket_no?: string;
  order_no?: string;
  number?: string;
  status?: string[];
@@ -27,6 +28,7 @@ export function getTicketItems(
        page: params?.page,
        per_page: params?.per_page,
        draw_no: params?.draw_no,
+        ticket_no: params?.ticket_no,
        order_no: params?.order_no,
        number: params?.number,
        status: params?.status,
--- a/src/app/(player)/(main)/layout.tsx
+++ b/src/app/(player)/(main)/layout.tsx
@@ -1,4 +1,8 @@
 import { PlayerAppShell } from "@/components/layout/player-app-shell";
+import { PlayEffectiveWsListener } from "@/components/play-effective-ws-listener";
+import { PlayerBalanceWsListener } from "@/components/player-balance-ws-listener";
+import { TokenSilentRefresh } from "@/components/token-silent-refresh";
+import { PlayerAuthGate } from "@/features/player/player-auth-gate";
 import { HydratePlayerAuth } from "@/features/player/hydrate-player-auth";

 export default function PlayerMainLayout({
@@ -7,9 +11,12 @@ export default function PlayerMainLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <>
+    <PlayerAuthGate>
      <HydratePlayerAuth />
+      <PlayerBalanceWsListener />
+      <PlayEffectiveWsListener />
+      <TokenSilentRefresh />
      <PlayerAppShell>{children}</PlayerAppShell>
-    </>
+    </PlayerAuthGate>
  );
 }
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -49,6 +49,7 @@
 }

 :root {
+  --font-noto-sans-devanagari: "Noto Sans Devanagari Variable";
  --player-viewport-max: 480px;
  --player-sidebar-width: 0px;
  --background: oklch(1 0 0);
@@ -170,6 +171,30 @@
  .player-desktop-shell {
    --player-sidebar-width: 15rem;
  }
+
+  .player-pc-page {
+    font-size: 0.9375rem;
+    line-height: 1.5;
+  }
+
+  .player-pc-empty {
+    min-height: 18rem;
+  }
+
+  .player-pc-table-head {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .hall-summary-grid {
+    grid-template-columns: repeat(var(--hall-summary-columns), minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1500px) {
+  .hall-summary-grid {
+    grid-template-columns: repeat(var(--hall-summary-columns-wide), minmax(0, 1fr));
+  }
 }

 /* 玩家端 Toast：顶部居中、紧凑尺寸（位置见 components/ui/sonner.tsx） */
@@ -320,3 +345,19 @@
    transform: rotate(360deg);
  }
 }
+
+@keyframes jackpot-strip-sweep {
+  0%,
+  20% {
+    transform: translateX(0) rotate(12deg);
+    opacity: 0;
+  }
+  35% {
+    opacity: 0.75;
+  }
+  70%,
+  100% {
+    transform: translateX(500%) rotate(12deg);
+    opacity: 0;
+  }
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,25 +1,12 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono, Noto_Sans_Devanagari } from "next/font/google";
+import { GeistSans } from "geist/font/sans";
+import { GeistMono } from "geist/font/mono";
+import "@fontsource-variable/noto-sans-devanagari";

 import { Providers } from "@/components/providers";
 import { DEFAULT_LANGUAGE } from "@/i18n/language";
 import "./globals.css";

-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-const notoSansDevanagari = Noto_Sans_Devanagari({
-  variable: "--font-noto-sans-devanagari",
-  subsets: ["devanagari", "latin"],
-});
-
 export const metadata: Metadata = {
  title: "Lottery",
  description: "Lottery player",
@@ -40,7 +27,7 @@ export default function RootLayout({
    <html
      lang={DEFAULT_LANGUAGE}
      suppressHydrationWarning
-      className={`${geistSans.variable} ${geistMono.variable} ${notoSansDevanagari.variable} min-h-full antialiased`}
+      className={`${GeistSans.variable} ${GeistMono.variable} min-h-full antialiased`}
    >
      <body className="min-h-full">
        <Providers>{children}</Providers>
--- a/src/components/i18n-hydration-provider.tsx
+++ b/src/components/i18n-hydration-provider.tsx
@@ -10,17 +10,29 @@ import {
 import { syncPreferredLanguage } from "@/i18n";

 const I18nHydrationContext = createContext(false);
+const hydrationListeners = new Set<() => void>();
+let hydrationReady = false;
+let hydrationSyncPromise: Promise<void> | null = null;
+
+function ensurePreferredLanguageSynced(): void {
+  if (hydrationSyncPromise) return;
+
+  hydrationSyncPromise = syncPreferredLanguage()
+    .catch(() => undefined)
+    .then(() => {
+      hydrationReady = true;
+      hydrationListeners.forEach((listener) => listener());
+    });
+}

 function subscribeI18nHydration(onStoreChange: () => void): () => void {
-  queueMicrotask(() => {
-    syncPreferredLanguage();
-    onStoreChange();
-  });
-  return () => {};
+  hydrationListeners.add(onStoreChange);
+  ensurePreferredLanguageSynced();
+  return () => hydrationListeners.delete(onStoreChange);
 }

 function getI18nHydratedSnapshot(): boolean {
-  return true;
+  return hydrationReady;
 }

 function getI18nHydratedServerSnapshot(): boolean {
@@ -42,4 +54,4 @@ export function I18nHydrationProvider({ children }: { children: ReactNode }) {

 export function useI18nHydrated(): boolean {
  return useContext(I18nHydrationContext);
-}
+}
--- a/src/components/iframe-bridge.tsx
+++ b/src/components/iframe-bridge.tsx
@@ -3,12 +3,13 @@
 import { useEffect, useCallback, type ReactNode } from "react";

 import { usePlayerSessionStore } from "@/stores/player-session-store";
-import { setPlayerBearerToken } from "@/lib/lottery-auth";
 import {
-  isIframeOriginAllowed,
  loadIframeAllowedOrigins,
+  messageToken,
  resolvePostMessageTargetOrigin,
+  resolveTrustedParentMessage,
 } from "@/lib/iframe-origins";
+import { publishIframeTokenRefresh } from "@/lib/iframe-token-refresh-events";

 function sanitizeUrlForParent(href: string): string {
  try {
@@ -123,39 +124,38 @@ export function IframeBridge({ children }: { children: ReactNode }): ReactNode {
    console.log("[IframeBridge] Setting up iframe communication");

    const handleMessage = async (event: MessageEvent): Promise<void> => {
-      if (!isIframeOriginAllowed(event.origin)) {
-        await loadIframeAllowedOrigins(true);
-        if (!isIframeOriginAllowed(event.origin)) {
-          console.warn("[IframeBridge] Rejected message from:", event.origin);
-          return;
-        }
+      const data = await resolveTrustedParentMessage(event);
+      if (data === null) {
+        console.warn("[IframeBridge] Rejected untrusted parent message from:", event.origin);
+        return;
      }

-      const { data } = event;
-      if (!data || typeof data !== "object") return;
-
      console.log("[IframeBridge] Received message:", data.type);

      switch (data.type) {
        // 主站发送初始化 Token
-        case "MAIN_INIT_TOKEN":
-          if (data.token) {
+        case "MAIN_INIT_TOKEN": {
+          const token = messageToken(data);
+          if (token !== null) {
            console.log("[IframeBridge] Received initial token");
-            setBearerToken(data.token);
-            setPlayerBearerToken(data.token);
+            setBearerToken(token);
            // 勿再 notifyReady()，否则主站会重复 MAIN_INIT_TOKEN 导致消息刷屏
          }
          break;
+        }

        // 主站刷新 Token
        case "MAIN_REFRESH_TOKEN":
-          if (data.token) {
+        case "LOTTERY_TOKEN_REFRESH_RESPONSE": {
+          const token = messageToken(data);
+          if (token !== null) {
            console.log("[IframeBridge] Received refreshed token");
-            setBearerToken(data.token);
-            setPlayerBearerToken(data.token);
+            setBearerToken(token);
+            publishIframeTokenRefresh(token);
            notifyTokenRefreshed();
          }
          break;
+        }

        // 主站通知 Token 即将过期
        case "MAIN_TOKEN_EXPIRING":
@@ -173,7 +173,7 @@ export function IframeBridge({ children }: { children: ReactNode }): ReactNode {

        // 主站导航请求
        case "MAIN_NAVIGATE":
-          if (data.path && typeof data.path === "string") {
+          if (typeof data.path === "string") {
            const nextPath = resolveSafeInAppPath(data.path);
            if (nextPath) {
              window.history.pushState({}, "", nextPath);
--- a/src/components/layout/player-bottom-nav.tsx
+++ b/src/components/layout/player-bottom-nav.tsx
@@ -37,7 +37,7 @@ const tabs = [
    labelKey: "nav.wallet",
    creditLabelKey: "nav.credit",
    labelDefault: "钱包",
-    creditLabelDefault: "信用",
+    creditLabelDefault: "额度",
    icon: Wallet,
    match: (p: string) => p === "/wallet" || p.startsWith("/wallet/"),
  },
--- a/src/components/layout/player-desktop-header.tsx
+++ b/src/components/layout/player-desktop-header.tsx
@@ -4,6 +4,7 @@ import Image from "next/image";
 import Link from "next/link";

 import { LanguageSwitcher } from "@/components/language-switcher";
+import { PlayerAccountDialog } from "@/features/player/player-account-dialog";
 import { cn } from "@/lib/utils";

 type PlayerDesktopHeaderProps = {
@@ -26,7 +27,7 @@ export function PlayerDesktopHeader({ className }: PlayerDesktopHeaderProps) {
          alt="N lotto"
          width={243}
          height={84}
-          className="h-7 w-auto max-w-[160px] object-contain object-left"
+          className="h-7 w-auto max-w-[112px] object-contain object-left sm:max-w-[160px]"
          priority
        />
      </Link>
@@ -54,6 +55,7 @@ export function PlayerDesktopHeader({ className }: PlayerDesktopHeaderProps) {
          showFlag={false}
          className="rounded-full border border-[#e4eaf4] bg-[#f8fafc] [&_button]:h-8 [&_button]:gap-1 [&_button]:px-2 [&_button]:text-xs lg:[&_button]:h-9 lg:[&_button]:gap-1.5 lg:[&_button]:px-3 lg:[&_button]:text-sm"
        />
+        <PlayerAccountDialog />
      </div>
    </header>
  );
--- a/src/components/layout/player-panel.tsx
+++ b/src/components/layout/player-panel.tsx
@@ -25,7 +25,7 @@ export function PlayerPanel({
    <div className={cn(playerContentColumnClass, containerClassName)}>
      <section
        className={cn(
-          "bg-white text-slate-900 lg:bg-transparent",
+          "player-pc-page bg-white text-slate-900 lg:bg-transparent",
          playerPageShellPadding,
          className,
        )}
--- a/src/components/layout/player-sidebar.tsx
+++ b/src/components/layout/player-sidebar.tsx
@@ -43,7 +43,7 @@ const navItems = [
    labelKey: "nav.wallet",
    creditLabelKey: "nav.credit",
    labelDefault: "钱包",
-    creditLabelDefault: "信用",
+    creditLabelDefault: "额度",
    icon: Wallet,
    match: (p: string) => p === "/wallet" || p.startsWith("/wallet/"),
  },
--- a/src/components/player-money-display.tsx
+++ b/src/components/player-money-display.tsx
@@ -1,12 +1,13 @@
 "use client";

-import { formatMinorAsCurrency } from "@/lib/money";
+import { formatMinorAmount, formatMinorAsCurrency } from "@/lib/money";
 import { cn } from "@/lib/utils";

 type PlayerMoneyDisplayProps = {
  amountMinor: number;
  currency: string;
  className?: string;
+  showCurrencyCode?: boolean;
 };

 /** 玩家端金额展示：自适应字号 + 防大额截断 */
@@ -14,6 +15,7 @@ export function PlayerMoneyDisplay({
  amountMinor,
  currency,
  className,
+  showCurrencyCode = true,
 }: PlayerMoneyDisplayProps) {
  return (
    <p
@@ -23,7 +25,9 @@ export function PlayerMoneyDisplay({
        className,
      )}
    >
-      {formatMinorAsCurrency(amountMinor, currency)}
+      {showCurrencyCode
+        ? formatMinorAsCurrency(amountMinor, currency)
+        : formatMinorAmount(amountMinor)}
    </p>
  );
 }
--- a/src/components/providers.tsx
+++ b/src/components/providers.tsx
@@ -6,9 +6,6 @@ import { I18nHydrationProvider } from "@/components/i18n-hydration-provider";
 import { Toaster } from "@/components/ui/sonner";
 import { ErrorProvider } from "@/components/error-provider";
 import { IframeBridge } from "@/components/iframe-bridge";
-import { PlayEffectiveWsListener } from "@/components/play-effective-ws-listener";
-import { PlayerBalanceWsListener } from "@/components/player-balance-ws-listener";
-import { TokenSilentRefresh } from "@/components/token-silent-refresh";
 import "@/i18n";

 type ProvidersProps = {
@@ -21,13 +18,7 @@ export function Providers({ children }: ProvidersProps): ReactNode {
      <I18nHydrationProvider>
      <ErrorProvider>
        {/* iframe 通信桥接 - 支持主站嵌入 */}
-        <IframeBridge>
-          {children}
-          <PlayerBalanceWsListener />
-          <PlayEffectiveWsListener />
-          {/* Token 静默续签（无 UI） */}
-          <TokenSilentRefresh />
-        </IframeBridge>
+        <IframeBridge>{children}</IframeBridge>
      </ErrorProvider>
      </I18nHydrationProvider>
      <Toaster />
--- a/src/components/ui/field.tsx
+++ b/src/components/ui/field.tsx
@@ -0,0 +1,238 @@
+"use client"
+
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}
--- a/src/features/hall/hall-bet-preview-dialog.tsx
+++ b/src/features/hall/hall-bet-preview-dialog.tsx
@@ -257,10 +257,9 @@ export function HallBetPreviewDialog({
                          </td>
                          <td className="border-r border-[#e8eef7] px-2 py-3 text-center">
                            <span className="block font-mono text-base font-black text-slate-950">{ln.number}</span>
-                            <span className="text-[11px] font-bold text-[#0755c7]">{playLabel(ln.play_code, t)}</span>
                          </td>
-                          <td className="border-r border-[#e8eef7] px-2 py-3 text-center font-semibold text-slate-700">
-                            {ln.play_code}
+                          <td className="border-r border-[#e8eef7] px-2 py-3 text-center font-semibold text-[#0755c7]">
+                            {playLabel(ln.play_code, t)}
                          </td>
                          <td className="border-r border-[#e8eef7] px-2 py-3 text-center">
                            <span className="inline-flex rounded-full bg-[#eef5ff] px-2 py-0.5 font-black text-[#0b56b7]">
--- a/src/features/hall/hall-betting-grid-model.ts
+++ b/src/features/hall/hall-betting-grid-model.ts
@@ -0,0 +1,183 @@
+import { draftLineIssueReason } from "@/features/hall/hall-bet-rules";
+import type { SelectionType } from "@/features/hall/selection-type";
+import { playLabel } from "@/lib/play-labels";
+import type { BetProviderRow } from "@/types/api/bet-provider";
+import type { DrawCurrentRiskPoolAlert } from "@/types/api/draw-current";
+import type { PlayEffectivePlayRow } from "@/types/api/play-effective";
+
+export type HallCategory = "D2" | "D3" | "D4" | "JACKPOT";
+export type PlayHallCategory = Exclude<HallCategory, "JACKPOT">;
+
+export type DraftRow = {
+  id: string;
+  number: string;
+  amounts: Record<string, string>;
+  providerCodes: string[];
+  selectionType: SelectionType;
+};
+
+export type PlayColumn = {
+  key: string;
+  play: PlayEffectivePlayRow;
+  digitSlot?: number;
+};
+
+export type HallTranslate = (key: string, options?: Record<string, unknown>) => string;
+export type CellRiskState = "open" | "warning" | "sold_out";
+
+export const FALLBACK_BET_PROVIDERS: BetProviderRow[] = [
+  { code: "SG", name: "Singapore", short_code: "S", sort_order: 10, is_default: true },
+  { code: "MY", name: "Malaysia", short_code: "M", sort_order: 20, is_default: false },
+  { code: "TH", name: "Thailand", short_code: "T", sort_order: 30, is_default: false },
+];
+
+const PROVIDER_COLUMN_TONES = [
+  "bg-[#fff875] text-slate-950",
+  "bg-[#b7d9ff] text-slate-950",
+  "bg-[#ffc7ca] text-slate-950",
+  "bg-[#d9d8ff] text-slate-950",
+  "bg-[#a8f8a4] text-slate-950",
+] as const;
+
+export function providerColumnTone(index: number): string {
+  return PROVIDER_COLUMN_TONES[index % PROVIDER_COLUMN_TONES.length] ?? "bg-slate-100 text-slate-950";
+}
+
+export function playCategory(playCode: string): PlayHallCategory {
+  if (playCode.startsWith("pos_3")) return "D3";
+  if (playCode.startsWith("pos_2")) return "D2";
+  return "D4";
+}
+
+export function digitSlotOptions(category: PlayHallCategory): number[] {
+  if (category === "D2") return [2, 3];
+  if (category === "D3") return [1, 2, 3];
+  return [0, 1, 2, 3];
+}
+
+function digitSlotLabel(
+  category: PlayHallCategory,
+  slot: number,
+  t: HallTranslate,
+): string {
+  if (!digitSlotOptions(category).includes(slot)) return String(slot + 1);
+
+  return t(`hall.table.digitPosition.${slot}`, {
+    defaultValue: String(10 ** (3 - slot)),
+  });
+}
+
+export function playColumnHeaderLabel(
+  play: PlayEffectivePlayRow,
+  category: PlayHallCategory,
+  digitSlot: number | undefined,
+  t: HallTranslate,
+): string {
+  if (digitSlot !== undefined) {
+    const kind = play.play_code === "digit_big" ? "big" : "small";
+    return `${t(`hall.table.digitShort.${kind}`)}·${digitSlotLabel(category, digitSlot, t)}`;
+  }
+  return playLabel(play.play_code, t);
+}
+
+export function numberMaxCharsForCategory(category: PlayHallCategory): number {
+  return category === "D2" ? 2 : category === "D3" ? 3 : 4;
+}
+
+export function sanitizeNumber(raw: string, category: PlayHallCategory): string {
+  const normalized =
+    category === "D4"
+      ? raw.replace(/[^0-9Rr]/g, "").toUpperCase()
+      : raw.replace(/\D/g, "");
+  const maxChars = numberMaxCharsForCategory(category);
+
+  return category === "D4" ? normalized.slice(0, maxChars) : normalized.slice(-maxChars);
+}
+
+function sortedDigits(value: string): string {
+  return value.split("").sort().join("");
+}
+
+function matchesRiskAlert(
+  alertNumber: string,
+  playCode: string,
+  rowNumber: string,
+  category: PlayHallCategory,
+  digitSlot?: number,
+): boolean {
+  const normalizedRow = rowNumber.toUpperCase();
+
+  if (playCode === "big" || playCode === "small" || playCode === "straight") {
+    return alertNumber === normalizedRow.slice(0, 4);
+  }
+
+  if (playCode === "box" || playCode === "ibox" || playCode === "mbox") {
+    return sortedDigits(alertNumber) === sortedDigits(normalizedRow.slice(0, 4));
+  }
+
+  if (playCode === "roll") {
+    const regex = new RegExp(`^${normalizedRow.replace(/R/g, "[0-9]")}$`);
+    return regex.test(alertNumber);
+  }
+
+  if (playCode.startsWith("pos_4")) return alertNumber === normalizedRow.slice(0, 4);
+  if (playCode.startsWith("pos_3")) return alertNumber.endsWith(normalizedRow.slice(-3));
+  if (playCode.startsWith("pos_2")) return alertNumber.endsWith(normalizedRow.slice(-2));
+
+  if (playCode === "head") {
+    return ["5", "6", "7", "8", "9"].includes(alertNumber[0] ?? "");
+  }
+  if (playCode === "tail") {
+    return ["0", "1", "2", "3", "4"].includes(alertNumber[0] ?? "");
+  }
+  if (playCode === "odd" || playCode === "even") {
+    const last = alertNumber[3] ?? "";
+    return playCode === "odd"
+      ? ["1", "3", "5", "7", "9"].includes(last)
+      : ["0", "2", "4", "6", "8"].includes(last);
+  }
+  if (playCode === "digit_big" || playCode === "digit_small") {
+    const slot = digitSlot ?? digitSlotOptions(category).at(-1) ?? 3;
+    const digit = alertNumber[slot] ?? "";
+    return playCode === "digit_big"
+      ? ["5", "6", "7", "8", "9"].includes(digit)
+      : ["0", "1", "2", "3", "4"].includes(digit);
+  }
+
+  return false;
+}
+
+export function cellRiskState(
+  play: PlayEffectivePlayRow,
+  rowNumber: string,
+  category: PlayHallCategory,
+  alertRows: DrawCurrentRiskPoolAlert[] | undefined,
+  liveSoldOutNumbers: ReadonlySet<string>,
+  liveWarningNumbers: ReadonlySet<string>,
+  digitSlot?: number,
+): CellRiskState {
+  const normalizedRow = rowNumber.trim().toUpperCase();
+  if (!normalizedRow) return "open";
+
+  if (liveSoldOutNumbers.has(normalizedRow)) return "sold_out";
+  if (liveWarningNumbers.has(normalizedRow)) return "warning";
+
+  const alerts = alertRows ?? [];
+  for (const alert of alerts) {
+    if (matchesRiskAlert(alert.normalized_number, play.play_code, normalizedRow, category, digitSlot)) {
+      return alert.status === "sold_out" ? "sold_out" : "warning";
+    }
+  }
+
+  return "open";
+}
+
+export function isDraftAmountInputValid(
+  row: DraftRow,
+  column: PlayColumn,
+): boolean {
+  return (
+    row.number.trim().length > 0 &&
+    draftLineIssueReason(column.play.play_code, row.number, column.digitSlot) === null
+  );
+}
--- a/src/features/hall/hall-betting-grid.tsx
+++ b/src/features/hall/hall-betting-grid.tsx
@@ -1,32 +1,43 @@
 "use client";

-import { ChevronDown, ChevronUp, CircleHelp, Lock, Ticket, Trash2, Star } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState, memo } from "react";
+import { Lock, Ticket, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import { Tooltip } from "@base-ui/react/tooltip";

 import { getBetProviders } from "@/api/bet-providers";
 import { getPlayEffective } from "@/api/play";
 import { getWalletBalance } from "@/api/wallet";
 import { postTicketPlace, postTicketPreview } from "@/api/ticket";
 import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
 import { isHallSealedCountdownUi } from "@/features/draw/draw-status-meta";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { HallBetPreviewDialog } from "@/features/hall/hall-bet-preview-dialog";
 import { HallBetResultDialog } from "@/features/hall/hall-bet-result-dialog";
 import { mapTicketBetError } from "@/features/hall/hall-bet-errors";
+import { HallBettingTable } from "@/features/hall/hall-betting-table";
+import { HallMobileQuickFill } from "@/features/hall/hall-mobile-quick-fill";
+import { HallPlaySummaryGrid } from "@/features/hall/hall-play-summary-grid";
+import { HallSelectionConfirmDialog } from "@/features/hall/hall-selection-confirm-dialog";
+import {
+  FALLBACK_BET_PROVIDERS,
+  cellRiskState,
+  digitSlotOptions,
+  numberMaxCharsForCategory,
+  playCategory,
+  playColumnHeaderLabel,
+  sanitizeNumber,
+  type DraftRow,
+  type HallCategory,
+  type PlayColumn,
+  type PlayHallCategory,
+} from "@/features/hall/hall-betting-grid-model";
+import {
+  HallDesktopReviewPanel,
+  HallDesktopWorkflowBar,
+  type HallDesktopReviewModel,
+} from "@/features/hall/hall-desktop-workspace";
 import {
  draftLineIssueReason,
  playNeedsDigitSlot,
@@ -44,6 +55,7 @@ import {
 } from "@/features/hall/selection-type";
 import type { HallDrawLiveSnapshot } from "@/features/hall/use-hall-draw-live";
 import { useActivePlayerCurrency } from "@/hooks/use-active-player-currency";
+import { useAsyncEffect } from "@/hooks/use-async-effect";
 import { triggerWalletPollingAfterBet } from "@/hooks/use-wallet-polling";
 import { usePlayerSessionStore } from "@/stores/player-session-store";
 import { getLotteryEcho } from "@/lib/lottery-echo";
@@ -64,26 +76,14 @@ import { cn } from "@/lib/utils";
 import { LotteryApiBizError } from "@/types/api/errors";
 import type { PlayEffectivePayload, PlayEffectivePlayRow } from "@/types/api/play-effective";
 import type { TicketLineInput, TicketPlaceData, TicketPreviewData } from "@/types/api/ticket";
-import type { DrawCurrentRiskPoolAlert } from "@/types/api/draw-current";
 import type { BetProviderRow } from "@/types/api/bet-provider";

-type HallCategory = "D2" | "D3" | "D4" | "JACKPOT";
-type PlayHallCategory = Exclude<HallCategory, "JACKPOT">;
-
 const TRADITIONAL_PLAY_CODES: Record<PlayHallCategory, readonly string[]> = {
  D4: ["big", "small", "pos_4a", "pos_4b", "pos_4c", "pos_4d", "pos_4e", "four_any", "four_top", "four_lower", "five_d", "six_d"],
  D3: ["pos_3a", "pos_3lower", "pos_3b", "pos_3c", "pos_3d", "pos_3e"],
  D2: ["pos_2a", "pos_2b", "pos_2c", "pos_2d", "pos_2e", "pos_2any"],
 };

-type DraftRow = {
-  id: string;
-  number: string;
-  amounts: Record<string, string>;
-  providerCodes: string[];
-  selectionType: SelectionType;
-};
-
 type PendingSelectionChange =
  | { mode: "row"; rowId: string; next: SelectionType; prev: SelectionType }
  | { mode: "all"; next: SelectionType };
@@ -105,23 +105,19 @@ type DraftLineIssue = {
  reason: DraftLineIssueReason;
 };

-type PlayColumn = {
-  key: string;
-  play: PlayEffectivePlayRow;
-  digitSlot?: number;
-};
-
-function playCategory(playCode: string): PlayHallCategory {
-  if (playCode.startsWith("pos_3")) return "D3";
-  if (playCode.startsWith("pos_2")) return "D2";
-  return "D4";
-}
-
 type ClosedPlayCleanupData = {
  cleanup_hint?: string;
  cleanup_lines?: Array<{ client_line_no?: number; play_code?: string }>;
 };

+type TicketPreviewSubmissionSnapshot = {
+  drawId: string;
+  currencyCode: string;
+  clientTraceId: string;
+  lines: TicketLineInput[];
+  expectedConfigVersions: TicketPreviewData["config_versions"];
+};
+
 type PlayToggleWsEvent = {
  play_code?: string;
  enabled?: boolean;
@@ -146,26 +142,8 @@ type RiskWarningWsEvent = {
  usage_percent?: number;
 };

-type CellRiskState = "open" | "warning" | "sold_out";
 type QuickFillState = Record<HallCategory, { favorites: string[]; history: string[] }>;
-
-const FALLBACK_BET_PROVIDERS: BetProviderRow[] = [
-  { code: "SG", name: "Singapore", short_code: "S", sort_order: 10, is_default: true },
-  { code: "MY", name: "Malaysia", short_code: "M", sort_order: 20, is_default: false },
-  { code: "TH", name: "Thailand", short_code: "T", sort_order: 30, is_default: false },
-];
 const DEFAULT_PROVIDER_CODE = "SG";
-const PROVIDER_COLUMN_TONES = [
-  "bg-[#fff875] text-slate-950",
-  "bg-[#b7d9ff] text-slate-950",
-  "bg-[#ffc7ca] text-slate-950",
-  "bg-[#d9d8ff] text-slate-950",
-  "bg-[#a8f8a4] text-slate-950",
-] as const;
-
-function providerColumnTone(index: number): string {
-  return PROVIDER_COLUMN_TONES[index % PROVIDER_COLUMN_TONES.length] ?? "bg-slate-100 text-slate-950";
-}

 const categoryTabs: { value: PlayHallCategory; label: string }[] = [
  { value: "D4", label: "4D" },
@@ -195,14 +173,16 @@ const D4_PLAY_ORDER = [
  "digit_big",
  "digit_small",
 ] as const;
-/** 按大厅 Tab 对应的玩法顺序；汇总条默认以当前 Tab 玩法开头 */
+/** 按大厅 Tab 对应的投注列顺序。 */
 const PLAY_ORDER_BY_CATEGORY: Record<PlayHallCategory, readonly string[]> = {
  D2: D2_PLAY_ORDER,
  D3: D3_PLAY_ORDER,
  D4: D4_PLAY_ORDER,
 };
 const CATEGORY_ORDER: readonly PlayHallCategory[] = ["D4", "D3", "D2"];
-const MOBILE_QUICK_AMOUNT_PRESETS = ["10", "50", "100"] as const;
+const SUMMARY_PLAY_ORDER = CATEGORY_ORDER.flatMap(
+  (category) => PLAY_ORDER_BY_CATEGORY[category],
+);
 const DEFAULT_DRAFT_ROW_COUNT = 20;

 function playOrderForActiveCategory(activeCategory: PlayHallCategory): readonly string[] {
@@ -229,37 +209,6 @@ function isPlayOpenForPlayer(row: PlayEffectivePlayRow): boolean {
  return Boolean(row.master_enabled && row.config?.is_enabled);
 }

-type HallTranslate = (key: string, options?: Record<string, unknown>) => string;
-
-/** 表头用短标签，避免 digit_big + 千/百/十/个 挤成一团。 */
-function playColumnHeaderLabel(
-  play: PlayEffectivePlayRow,
-  category: PlayHallCategory,
-  digitSlot: number | undefined,
-  t: HallTranslate,
-): string {
-  if (digitSlot !== undefined) {
-    const kind = play.play_code === "digit_big" ? "big" : "small";
-    return `${t(`hall.table.digitShort.${kind}`)}·${digitSlotLabel(category, digitSlot)}`;
-  }
-  return playLabel(play.play_code, t);
-}
-
-function digitSlotOptions(category: PlayHallCategory): number[] {
-  if (category === "D2") return [2, 3];
-  if (category === "D3") return [1, 2, 3];
-  return [0, 1, 2, 3];
-}
-
-function digitSlotLabel(category: PlayHallCategory, slot: number): string {
-  const labels: Record<PlayHallCategory, Record<number, string>> = {
-    D2: { 2: "十", 3: "个" },
-    D3: { 1: "百", 2: "十", 3: "个" },
-    D4: { 0: "千", 1: "百", 2: "十", 3: "个" },
-  };
-  return labels[category][slot] ?? String(slot + 1);
-}
-
 function amountKeyForPlay(playCode: string, digitSlot?: number): string {
  return digitSlot === undefined ? playCode : `${playCode}@${digitSlot}`;
 }
@@ -281,20 +230,6 @@ function playColumnsForCategory(
  });
 }

-function numberMaxCharsForCategory(category: PlayHallCategory): number {
-  return category === "D2" ? 2 : category === "D3" ? 3 : 4;
-}
-
-function sanitizeNumber(raw: string, category: PlayHallCategory): string {
-  const normalized =
-    category === "D4"
-      ? raw.replace(/[^0-9Rr]/g, "").toUpperCase()
-      : raw.replace(/\D/g, "");
-  const maxChars = numberMaxCharsForCategory(category);
-
-  return category === "D4" ? normalized.slice(0, maxChars) : normalized.slice(-maxChars);
-}
-
 function sanitizeAmount(raw: string): string {
  return raw.replace(/[^\d.]/g, "").replace(/(\..*)\./g, "$1").slice(0, 12);
 }
@@ -410,99 +345,6 @@ function appendUnique(values: string[], value: string, limit = 20): string[] {
  return next.slice(0, limit);
 }

-function sortedDigits(value: string): string {
-  return value.split("").sort().join("");
-}
-
-function matchesRiskAlert(
-  alertNumber: string,
-  playCode: string,
-  rowNumber: string,
-  category: Exclude<HallCategory, "JACKPOT">,
-  digitSlot?: number,
-): boolean {
-  const normalizedRow = rowNumber.toUpperCase();
-
-  if (playCode === "big" || playCode === "small" || playCode === "straight") {
-    return alertNumber === normalizedRow.slice(0, 4);
-  }
-
-  if (playCode === "box" || playCode === "ibox" || playCode === "mbox") {
-    return sortedDigits(alertNumber) === sortedDigits(normalizedRow.slice(0, 4));
-  }
-
-  if (playCode === "roll") {
-    const regex = new RegExp(`^${normalizedRow.replace(/R/g, "[0-9]")}$`);
-    return regex.test(alertNumber);
-  }
-
-  if (playCode.startsWith("pos_4")) {
-    return alertNumber === normalizedRow.slice(0, 4);
-  }
-
-  if (playCode.startsWith("pos_3")) {
-    return alertNumber.endsWith(normalizedRow.slice(-3));
-  }
-
-  if (playCode.startsWith("pos_2")) {
-    return alertNumber.endsWith(normalizedRow.slice(-2));
-  }
-
-  if (playCode === "head") {
-    return ["5", "6", "7", "8", "9"].includes(alertNumber[0] ?? "");
-  }
-  if (playCode === "tail") {
-    return ["0", "1", "2", "3", "4"].includes(alertNumber[0] ?? "");
-  }
-  if (playCode === "odd" || playCode === "even") {
-    const last = alertNumber[3] ?? "";
-    return playCode === "odd"
-      ? ["1", "3", "5", "7", "9"].includes(last)
-      : ["0", "2", "4", "6", "8"].includes(last);
-  }
-  if (playCode === "digit_big" || playCode === "digit_small") {
-    const slot = digitSlot ?? digitSlotOptions(category).at(-1) ?? 3;
-    const last = alertNumber[slot] ?? "";
-    return playCode === "digit_big"
-      ? ["5", "6", "7", "8", "9"].includes(last)
-      : ["0", "1", "2", "3", "4"].includes(last);
-  }
-
-  return false;
-}
-
-function cellRiskState(
-  play: PlayEffectivePlayRow,
-  rowNumber: string,
-  category: Exclude<HallCategory, "JACKPOT">,
-  alertRows: DrawCurrentRiskPoolAlert[] | undefined,
-  liveSoldOutNumbers: ReadonlySet<string>,
-  liveWarningNumbers: ReadonlySet<string>,
-  digitSlot?: number,
-): CellRiskState {
-  const normalizedRow = rowNumber.trim().toUpperCase();
-  if (!normalizedRow) return "open";
-
-  if (liveSoldOutNumbers.has(normalizedRow)) {
-    return "sold_out";
-  }
-
-  if (liveWarningNumbers.has(normalizedRow)) {
-    return "warning";
-  }
-
-  const alerts = alertRows ?? [];
-  if (alerts.length === 0) return "open";
-
-  for (const alert of alerts) {
-    if (matchesRiskAlert(alert.normalized_number, play.play_code, normalizedRow, category, digitSlot)) {
-      return alert.status === "sold_out" ? "sold_out" : "warning";
-    }
-  }
-
-  return "open";
-}
-
 function quickFillKeys(category: HallCategory): { favorites: string; history: string } {
  return {
    favorites: `lottery.hall.quickfill.favorites.${category}`,
@@ -536,23 +378,16 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
  const [syncAmountColumns, setSyncAmountColumns] = useState<Record<string, boolean>>({});
  const [quickFillState, setQuickFillState] = useState<QuickFillState>(() => loadQuickFillState());
  const [quickFillExpanded, setQuickFillExpanded] = useState(false);
-  const [riskStateDrawNo, setRiskStateDrawNo] = useState<string | null>(display?.draw_no ?? null);
  const [liveSoldOutNumbers, setLiveSoldOutNumbers] = useState<Set<string>>(() => new Set());
  const [liveWarningNumbers, setLiveWarningNumbers] = useState<Set<string>>(() => new Set());
  const [debouncedSummary, setDebouncedSummary] = useState({ bet: 0, rebate: 0, actual: 0 });
  const [pendingSelectionChange, setPendingSelectionChange] = useState<PendingSelectionChange | null>(
    null,
  );
-  const holdFavoriteRef = useRef<{ timer: number | null; number: string | null; longPress: boolean }>({
-    timer: null,
-    number: null,
-    longPress: false,
-  });
  /** 单次预览→确认共用，重试 place 复用，避免重复扣款 */
  const placeTraceIdRef = useRef<string | null>(null);
-  /** 玩法汇总条：切 Tab 后滚回左侧，保证当前维度玩法从开头可见 */
-  const playSummaryScrollRef = useRef<HTMLDivElement | null>(null);
-
+  const previewRequestSeqRef = useRef(0);
+  const previewSubmissionRef = useRef<TicketPreviewSubmissionSnapshot | null>(null);
  const newPlaceTraceId = (): string =>
    typeof crypto !== "undefined" && crypto.randomUUID
      ? crypto.randomUUID()
@@ -561,6 +396,13 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
  const clearPlaceTraceId = useCallback(() => {
    placeTraceIdRef.current = null;
  }, []);
+  const invalidatePreview = useCallback(() => {
+    previewRequestSeqRef.current += 1;
+    previewSubmissionRef.current = null;
+    setPreviewOpen(false);
+    setPreviewData(null);
+    clearPlaceTraceId();
+  }, [clearPlaceTraceId]);
  const catalogSeqRef = useRef(0);
  const walletSeqRef = useRef(0);
  const selectedCatalogProviderCode =
@@ -595,11 +437,9 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
    }
  }, [currencyParam]);

-  useEffect(() => {
-    queueMicrotask(() => {
-      void loadCatalog();
-      void refreshWallet();
-    });
+  useAsyncEffect(() => {
+    void loadCatalog();
+    void refreshWallet();
  }, [loadCatalog, refreshWallet]);

  useEffect(() => {
@@ -635,20 +475,18 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
      void loadCatalog();
      const source = (ev as CustomEvent<{ source?: PlayCatalogRefreshSource }>).detail
        ?.source;
-      if (source === "play_config" || source === "risk_cap") {
-        setPreviewOpen(false);
-        setPreviewData(null);
-        clearPlaceTraceId();
+      if (source !== undefined) {
+        invalidatePreview();
        toast.message(t("hall.playConfig.updated"));
      }
    };
    window.addEventListener(PLAY_CATALOG_REFRESH_EVENT, onCatalogRefresh);
    return () => window.removeEventListener(PLAY_CATALOG_REFRESH_EVENT, onCatalogRefresh);
-  }, [clearPlaceTraceId, loadCatalog, t]);
+  }, [invalidatePreview, loadCatalog, t]);

  const openPlays = useMemo(() => {
    if (catalogState.kind !== "ok") return [];
-    // 4D / 3D / 2D 汇总条与列顺序以当前 Tab 玩法为先，避免切到 4D 仍从 2A 起显示
+    // 投注表格列以当前 Tab 玩法为先；顶部汇总另用稳定的全玩法顺序。
    const order = playOrderForActiveCategory(activeCategory);
    const orderSet = new Set(order);
    return sortByPlayOrder(
@@ -659,15 +497,14 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
    );
  }, [activeCategory, catalogState]);

-  useEffect(() => {
-    const el = playSummaryScrollRef.current;
-    if (el) el.scrollLeft = 0;
-  }, [activeCategory]);
-
  const activeCategoryPlays = useMemo(
    () => openPlays.filter((play) => TRADITIONAL_PLAY_CODES[activeCategory].includes(play.play_code)),
    [activeCategory, openPlays],
  );
+  const availableCategories = useMemo(
+    () => new Set(openPlays.map((play) => playCategory(play.play_code))),
+    [openPlays],
+  );

  const currencyCode =
    catalogState.kind === "ok" ? catalogState.data.currency_code : currencyParam;
@@ -686,6 +523,20 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
    });
  }, [openPlays]);

+  const summaryPlayColumns = useMemo<PlayColumn[]>(() => {
+    return sortByPlayOrder(openPlays, SUMMARY_PLAY_ORDER).flatMap((play) => {
+      const category = playCategory(play.play_code);
+      if (!playNeedsDigitSlot(play.play_code)) {
+        return [{ key: amountKeyForPlay(play.play_code), play }];
+      }
+      return digitSlotOptions(category).map((digitSlot) => ({
+        key: amountKeyForPlay(play.play_code, digitSlot),
+        play,
+        digitSlot,
+      }));
+    });
+  }, [openPlays]);
+
  const playColumns = useMemo(() => {
    return playColumnsForCategory(activeCategoryPlays, activeCategory);
  }, [activeCategory, activeCategoryPlays]);
@@ -693,31 +544,31 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
  const mobileIndexColClass = "w-[1.75rem] min-w-[1.75rem]";
  const mobileNumberColClass = "w-[4.25rem] min-w-[4.25rem]";
  const mobileSelectionTypeColClass = "w-[4rem] min-w-[4rem]";
-  const desktopIndexColClass = "w-[2.15rem] min-w-[2.15rem]";
-  const desktopNumberColClass = "w-[5.5rem] min-w-[5.5rem]";
-  const desktopSelectionTypeColClass = "w-[4.75rem] min-w-[4.75rem]";
+  const desktopIndexColClass = "w-9 min-w-9";
+  const desktopNumberColClass = "w-[5.25rem] min-w-[5.25rem]";
+  const desktopSelectionTypeColClass = "w-[4.5rem] min-w-[4.5rem]";
  const indexColClass = isMobile ? mobileIndexColClass : desktopIndexColClass;
  const numberColClass = isMobile ? mobileNumberColClass : desktopNumberColClass;
  const selectionTypeColClass = isMobile ? mobileSelectionTypeColClass : desktopSelectionTypeColClass;
  const showSelectionTypeColumn = activeCategory !== "D2";
-  const stickyNumberLeftClass = isMobile ? "left-[1.75rem]" : "left-[2.15rem]";
+  const stickyNumberLeftClass = isMobile ? "left-[1.75rem]" : "left-9";
  const amountColClass = !isMobile
-    ? "w-[3.9rem] min-w-[3.9rem]"
+    ? "w-14 min-w-14"
    : "w-[4rem] min-w-[4rem]";
  const providerColClass = !isMobile
-    ? "w-[2.85rem] min-w-[2.85rem]"
+    ? "w-11 min-w-11"
    : "w-[2.7rem] min-w-[2.7rem]";
  const rowTotalColClass = !isMobile
-    ? "w-[5.5rem] min-w-[5.5rem]"
+    ? "w-20 min-w-20"
    : "w-[5rem] min-w-[5rem]";

  const tableWidthPx = useMemo(() => {
-    const indexCol = !isMobile ? 34 : 28;
-    const numberCol = !isMobile ? 88 : 68;
-    const selectionTypeCol = !isMobile ? 76 : 64;
-    const providerCol = !isMobile ? 46 : 43;
-    const rowTotalCol = !isMobile ? 88 : 80;
-    const amountCol = !isMobile ? 62 : 64;
+    const indexCol = !isMobile ? 36 : 28;
+    const numberCol = !isMobile ? 84 : 68;
+    const selectionTypeCol = !isMobile ? 72 : 64;
+    const providerCol = !isMobile ? 44 : 43;
+    const rowTotalCol = !isMobile ? 80 : 80;
+    const amountCol = !isMobile ? 56 : 64;
    return indexCol + numberCol + (showSelectionTypeColumn ? selectionTypeCol : 0) + betProviders.length * providerCol + rowTotalCol + playColumns.length * amountCol;
  }, [betProviders.length, isMobile, playColumns.length, showSelectionTypeColumn]);

@@ -730,11 +581,19 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }

  const drawNo = display?.draw_no ?? null;

-  if (riskStateDrawNo !== drawNo) {
-    setRiskStateDrawNo(drawNo);
-    setLiveSoldOutNumbers(new Set());
-    setLiveWarningNumbers(new Set());
-  }
+  useEffect(() => {
+    let cancelled = false;
+    queueMicrotask(() => {
+      if (cancelled) return;
+      setLiveSoldOutNumbers(new Set());
+      setLiveWarningNumbers(new Set());
+      invalidatePreview();
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [currencyCode, drawNo, invalidatePreview]);

  const alertRows = useMemo(
    () => display?.risk_pool_alerts ?? [],
@@ -841,11 +700,76 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
    setActiveRowId(rowId);
  }, [alertRows, allPlayColumns, liveSoldOutNumbers, liveWarningNumbers, syncAmountColumns]);

+  const toggleSyncAmountColumn = useCallback((column: PlayColumn, checked: boolean) => {
+    setSyncAmountColumns((current) => ({
+      ...current,
+      [column.key]: checked,
+    }));
+
+    setRows((current) => {
+      if (!checked) {
+        return current.map((row) => ({
+          ...row,
+          amounts: { ...row.amounts, [column.key]: "" },
+        }));
+      }
+
+      const sourceAmount = current.find((row) => {
+        const amount = row.amounts[column.key];
+        return Boolean(
+          amount &&
+            draftLineIssueReason(
+              column.play.play_code,
+              row.number,
+              column.digitSlot,
+            ) === null,
+        );
+      })?.amounts[column.key];
+
+      if (!sourceAmount) return current;
+
+      return current.map((row) => {
+        const validNumber =
+          draftLineIssueReason(
+            column.play.play_code,
+            row.number,
+            column.digitSlot,
+          ) === null;
+        const status = cellRiskState(
+          column.play,
+          row.number,
+          playCategory(column.play.play_code),
+          alertRows,
+          liveSoldOutNumbers,
+          liveWarningNumbers,
+          column.digitSlot,
+        );
+        if (
+          !validNumber ||
+          status === "sold_out" ||
+          (column.play.config !== null && !column.play.config.is_enabled)
+        ) {
+          return row;
+        }
+
+        return {
+          ...row,
+          amounts: { ...row.amounts, [column.key]: sourceAmount },
+        };
+      });
+    });
+  }, [alertRows, liveSoldOutNumbers, liveWarningNumbers]);
+
  const clearAllRows = () => {
    if (tableDisabled) return;
-    const next = [newDraftRow()];
-    setRows(next);
-    setActiveRowId(next[0].id);
+    setRows((current) =>
+      current.map((row) => ({
+        ...row,
+        number: "",
+        amounts: {},
+      })),
+    );
+    setActiveRowId((current) => current ?? rows[0]?.id ?? null);
  };

  const clearActiveRowAmounts = useCallback(() => {
@@ -1033,9 +957,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
      if (evt.enabled === false && typeof evt.play_code === "string") {
        const removed = hasAmountsForPlay(evt.play_code);
        clearAmountsForPlay(evt.play_code);
-        setPreviewOpen(false);
-        setPreviewData(null);
-        clearPlaceTraceId();
+        invalidatePreview();
        toast.warning(
          removed
            ? t("hall.playConfig.playClosedDraftCleared", {
@@ -1049,9 +971,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
    };

    const onOddsUpdate = (evt: OddsUpdateWsEvent) => {
-      setPreviewOpen(false);
-      setPreviewData(null);
-      clearPlaceTraceId();
+      invalidatePreview();
      toast.message(evt.message ?? t("hall.playConfig.oddsUpdated"));
    };

@@ -1071,6 +991,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
        next.delete(normalized);
        return next;
      });
+      invalidatePreview();
      void reloadDraw();
    };

@@ -1098,7 +1019,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
      channel.stopListening(".risk.sold_out");
      channel.stopListening(".risk.warning");
    };
-  }, [clearAmountsForPlay, clearPlaceTraceId, drawNo, hasAmountsForPlay, reloadDraw, t]);
+  }, [clearAmountsForPlay, drawNo, hasAmountsForPlay, invalidatePreview, reloadDraw, t]);

  const collectDraftLineIssues = useCallback((): DraftLineIssue[] => {
    const issues: DraftLineIssue[] = [];
@@ -1335,14 +1256,30 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
    }

    setPreviewLoading(true);
+    const requestSeq = ++previewRequestSeqRef.current;
+    const traceId = newPlaceTraceId();
+    const drawId = display.draw_no;
+    const previewCurrencyCode = currencyCode;
+    const frozenLines = lines.map((line) => ({
+      ...line,
+      provider_codes: line.provider_codes ? [...line.provider_codes] : undefined,
+    }));
+    placeTraceIdRef.current = traceId;
    try {
-      placeTraceIdRef.current = newPlaceTraceId();
      const data = await postTicketPreview({
-        draw_id: display.draw_no,
-        currency_code: currencyCode,
-        client_trace_id: placeTraceIdRef.current,
-        lines,
+        draw_id: drawId,
+        currency_code: previewCurrencyCode,
+        client_trace_id: traceId,
+        lines: frozenLines,
      });
+      if (requestSeq !== previewRequestSeqRef.current) return;
+      previewSubmissionRef.current = {
+        drawId: data.draw.draw_id.trim() || drawId,
+        currencyCode: previewCurrencyCode,
+        clientTraceId: traceId,
+        lines: frozenLines,
+        expectedConfigVersions: data.config_versions,
+      };
      setPreviewData(data);
      setPreviewOpen(true);
      rows.forEach((row) => {
@@ -1357,9 +1294,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
        return;
      }
      if (e instanceof LotteryApiBizError && code === 2008) {
-        setPreviewOpen(false);
-        setPreviewData(null);
-        clearPlaceTraceId();
+        invalidatePreview();
      }
      if (e instanceof LotteryApiBizError && (code === 2001 || code === 2006)) {
        void reloadDraw();
@@ -1371,7 +1306,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
  };

  const handlePlace = async () => {
-    if (!display || !previewData) return;
+    if (!previewData) return;
    if (placeLoading) {
      return;
    }
@@ -1380,29 +1315,13 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
      return;
    }

-    const lineIssues = collectDraftLineIssues();
-    const missingProviderAt = providerMissingRow();
-    if (missingProviderAt !== null) {
-      toast.error(t("hall.providers.rowRequired", { row: missingProviderAt, defaultValue: `第 ${missingProviderAt} 行请选择至少一个开注商` }));
-      return;
-    }
-    if (lineIssues.length > 0) {
-      toast.error(formatDraftLineIssue(lineIssues[0]));
-      return;
-    }
-
-    const lines = buildLines();
-    if (lines.length === 0) {
+    const snapshot = previewSubmissionRef.current;
+    if (snapshot === null) {
      toast.error(t("hall.changedBeforeSubmit"));
      return;
    }

-    const traceId = placeTraceIdRef.current ?? newPlaceTraceId();
-    placeTraceIdRef.current = traceId;
-
-    const drawIdForBet =
-      previewData.draw.draw_id.trim() || display.draw_no.trim();
-    if (drawIdForBet === "") {
+    if (snapshot.drawId === "") {
      toast.error(t("hall.notBettable"));
      return;
    }
@@ -1410,12 +1329,13 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
    setPlaceLoading(true);
    try {
      const data = await postTicketPlace({
-        draw_id: drawIdForBet,
-        currency_code: currencyCode,
-        client_trace_id: traceId,
-        lines,
-        expected_config_versions: previewData.config_versions,
+        draw_id: snapshot.drawId,
+        currency_code: snapshot.currencyCode,
+        client_trace_id: snapshot.clientTraceId,
+        lines: snapshot.lines,
+        expected_config_versions: snapshot.expectedConfigVersions,
      });
+      previewSubmissionRef.current = null;
      clearPlaceTraceId();
      setPreviewOpen(false);
      setPreviewData(null);
@@ -1455,15 +1375,11 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
      if (e instanceof LotteryApiBizError && code === 2002 && applyClosedPlayCleanup(e.data)) {
        const payload = e.data as ClosedPlayCleanupData;
        toast.error(payload.cleanup_hint ?? t("hall.ticketError.2002"));
-        setPreviewOpen(false);
-        setPreviewData(null);
-        clearPlaceTraceId();
+        invalidatePreview();
        return;
      }
      if (e instanceof LotteryApiBizError && (code === 2008 || code === 2009)) {
-        setPreviewOpen(false);
-        setPreviewData(null);
-        clearPlaceTraceId();
+        invalidatePreview();
      }
      if (e instanceof LotteryApiBizError && (code === 2001 || code === 2006)) {
        void reloadDraw();
@@ -1512,28 +1428,93 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }

  const submitActualMinor =
    previewData?.summary.total_actual_deduct ?? debouncedSummary.actual;
-  const selectedProviderCount = new Set(rows.flatMap((row) => row.providerCodes)).size;
+  const activeDraftRowIds = new Set(draftEntries.map((entry) => entry.rowId));
+  const selectedProviderCount = new Set(
+    rows
+      .filter((row) => activeDraftRowIds.has(row.id))
+      .flatMap((row) => row.providerCodes),
+  ).size;
+  const warningRowCount = rows.filter(
+    (row) =>
+      row.number.trim().length > 0 &&
+      playColumns.some(
+        (column) =>
+          cellRiskState(
+            column.play,
+            row.number,
+            playCategory(column.play.play_code),
+            alertRows,
+            liveSoldOutNumbers,
+            liveWarningNumbers,
+            column.digitSlot,
+          ) === "warning",
+      ),
+  ).length;
  const canSubmit =
    !tableDisabled && draftEntries.length > 0 && providerMissingRow() === null && availableMinor >= submitActualMinor;
  const favoriteChips = favorites.slice(0, 10);
  const historyChips = historyNumbers.slice(0, 20);
+  const summaryItems = [
+    {
+      key: "total",
+      label: t("hall.table.total", { defaultValue: "共" }),
+      totalMinor: submitActualMinor,
+    },
+    ...summaryPlayColumns.map((column) => ({
+      key: column.key,
+      label: playColumnHeaderLabel(
+        column.play,
+        playCategory(column.play.play_code),
+        column.digitSlot,
+        t,
+      ),
+      totalMinor: rows.reduce((sum, row) => {
+        const amount = row.amounts[column.key];
+        if (
+          !amount ||
+          row.number.trim().length === 0 ||
+          draftLineIssueReason(
+            column.play.play_code,
+            row.number,
+            column.digitSlot,
+          ) !== null
+        ) {
+          return sum;
+        }
+        return sum + (parseDecimalInputToMinor(amount, currencyCode) ?? 0);
+      }, 0),
+    })),
+  ];
+  const desktopReviewModel: HallDesktopReviewModel = {
+    lineCount: draftEntries.length,
+    providerCount: selectedProviderCount,
+    actualAmount: formatMinorAmount(submitActualMinor),
+    availableCredit: formatMinorAmount(availableMinor),
+    remainingCredit: formatMinorAmount(Math.max(0, availableMinor - submitActualMinor)),
+    warningCount: warningRowCount,
+    creditSufficient: availableMinor >= submitActualMinor,
+  };
  return (
    <>
      <section className="space-y-3" aria-label={t("hall.aria")}>

        {jackpot?.enabled ? (
-          <div className="rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 via-white to-[#f8fbff] px-3 py-2.5">
-            <div className="flex flex-wrap items-center justify-between gap-2">
-              <div>
-                <p className="text-[11px] font-black uppercase tracking-normal text-amber-700">
+          <div className="relative overflow-hidden rounded-xl border border-[#d6b74e]/70 bg-[linear-gradient(115deg,#06183c_0%,#0a3a89_50%,#071f50_100%)] px-3 py-3 text-white shadow-[0_10px_28px_rgba(7,46,112,0.2)] sm:px-4">
+            <div className="pointer-events-none absolute -left-10 top-1/2 size-28 -translate-y-1/2 rounded-full bg-[#2d79ff]/25 blur-2xl motion-safe:animate-[jackpot-amount-row-glow_2.8s_ease-in-out_infinite]" />
+            <div className="pointer-events-none absolute -right-5 -top-16 size-36 rounded-full bg-[#f4ca54]/20 blur-2xl motion-safe:animate-[jackpot-amount-row-glow_3.2s_ease-in-out_infinite]" />
+            <div className="pointer-events-none absolute -inset-y-10 -left-1/3 w-1/3 rotate-12 bg-gradient-to-r from-transparent via-white/20 to-transparent blur-sm motion-safe:animate-[jackpot-strip-sweep_4s_ease-in-out_infinite]" />
+
+            <div className="relative flex flex-wrap items-center justify-between gap-3">
+              <div className="min-w-0">
+                <p className="w-fit bg-gradient-to-r from-[#fff1ad] via-white to-[#e2bd45] bg-[length:200%_auto] bg-clip-text text-[11px] font-black uppercase tracking-[0.16em] text-transparent motion-safe:animate-[jackpot-shimmer_3s_linear_infinite]">
                  {t("results.jackpotLabel", { defaultValue: "Jackpot" })}
                </p>
-                <p className="font-mono text-xl font-black tabular-nums text-[#07459f]">
-                  {formatMinorAsCurrency(jackpot.current_amount_minor, jackpot.currency_code)}
+                <p className="mt-0.5 truncate font-mono text-xl font-black tabular-nums text-white drop-shadow-[0_0_12px_rgba(245,216,122,0.35)] sm:text-2xl motion-safe:animate-[jackpot-amount-glow_2.4s_ease-in-out_infinite]">
+                  {formatMinorAmount(jackpot.current_amount_minor)}
                </p>
              </div>
              {jackpot.draws_since_last_burst !== null ? (
-                <p className="rounded-full bg-amber-100 px-3 py-1 text-xs font-bold text-amber-800">
+                <p className="ml-auto rounded-full border border-[#f4d66f]/35 bg-white/10 px-3 py-1.5 text-xs font-bold text-[#ffe8a0] shadow-[inset_0_1px_0_rgba(255,255,255,0.12)] backdrop-blur-sm">
                  {t("results.jackpotGap", {
                    count: jackpot.draws_since_last_burst,
                  })}
@@ -1543,301 +1524,14 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
          </div>
        ) : null}

-        <div
-          className={cn(
-            !isMobile &&
-              "flex items-center gap-2 rounded-xl border border-[#e3ebf7] bg-white px-2 py-2 shadow-[0_6px_18px_rgba(15,23,42,0.04)]",
-          )}
-        >
-          <div
-            className={cn(
-              "bg-white",
-              isMobile
-                ? "rounded-lg border border-[#e8eef7] px-3 py-2.5"
-                : "min-w-0 flex-1 px-2 py-0.5",
-            )}
-          >
-          <div className={cn("flex gap-3", isMobile ? "items-start justify-between" : "items-center justify-between")}>
-            <div className={cn("min-w-0", !isMobile && "flex flex-1 items-center gap-4")}>
-              <div className={cn("shrink-0", !isMobile && "min-w-[5.5rem]")}>
-                <p className="text-sm font-bold leading-5 text-slate-950">
-                  {t("hall.quickFill.title")}
-                </p>
-                {isMobile ? (
-                  <p className="mt-0.5 text-[11px] leading-5 text-slate-500">
-                    {t("hall.mobile.quickFillSummary", {
-                      defaultValue: "收藏 {{favorites}} 个，历史 {{history}} 个",
-                      favorites: favorites.length,
-                      history: historyNumbers.length,
-                    })}
-                  </p>
-                ) : null}
-              </div>
+        <HallPlaySummaryGrid items={summaryItems} className="hidden lg:grid" />

-              {!isMobile ? (
-                <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-4 gap-y-1.5">
-                  {favoriteChips.length > 0 ? (
-                    <div className="flex flex-wrap items-center gap-1.5">
-                      <span className="mr-0.5 text-[11px] font-semibold text-[#d81435]">
-                        {t("hall.quickFill.favorites")}
-                      </span>
-                      {favoriteChips.map((number) => (
-                        <button
-                          key={`fav-${number}`}
-                          type="button"
-                          className="inline-flex h-7 touch-manipulation items-center gap-1 rounded-full border border-[#ffd7db] bg-[#fff3f5] px-2.5 text-xs font-semibold text-[#d81435] transition-colors hover:bg-[#ffe9ed]"
-                          onPointerDown={() => {
-                            const current = holdFavoriteRef.current;
-                            current.number = number;
-                            current.longPress = false;
-                            if (current.timer) window.clearTimeout(current.timer);
-                            current.timer = window.setTimeout(() => {
-                              current.longPress = true;
-                              toggleFavoriteNumber(number);
-                            }, 500);
-                          }}
-                          onPointerUp={() => {
-                            const current = holdFavoriteRef.current;
-                            if (current.timer) {
-                              window.clearTimeout(current.timer);
-                              current.timer = null;
-                            }
-                            if (!current.longPress) {
-                              fillCurrentRow(number);
-                            }
-                            current.longPress = false;
-                          }}
-                          onPointerLeave={() => {
-                            const current = holdFavoriteRef.current;
-                            if (current.timer) {
-                              window.clearTimeout(current.timer);
-                              current.timer = null;
-                            }
-                            current.longPress = false;
-                          }}
-                        >
-                          {number}
-                        </button>
-                      ))}
-                    </div>
-                  ) : null}
-                  <div className="flex min-w-0 flex-wrap items-center gap-1.5">
-                    <span className="mr-0.5 text-[11px] font-semibold text-slate-400">
-                      {t("hall.quickFill.history")}
-                    </span>
-                    {historyChips.length > 0 ? (
-                      historyChips.map((number) => (
-                        <button
-                          key={`his-${number}`}
-                          type="button"
-                          className="inline-flex h-7 min-w-9 items-center justify-center rounded-full border border-[#d7e5f8] bg-[#f8fbff] px-2.5 text-xs font-bold text-[#07459f] transition-colors hover:border-[#b9d0f3] hover:bg-[#eef6ff]"
-                          onClick={() => fillCurrentRow(number)}
-                        >
-                          {number}
-                        </button>
-                      ))
-                    ) : (
-                      <span className="inline-flex h-7 items-center rounded-full border border-dashed border-slate-200 bg-slate-50 px-2.5 text-xs text-slate-400">
-                        {t("hall.quickFill.emptyHistory")}
-                      </span>
-                    )}
-                  </div>
-                </div>
-              ) : null}
-            </div>
-            <div className="flex shrink-0 items-center gap-1.5">
-              {isMobile ? (
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  aria-label={
-                    quickFillExpanded
-                      ? t("hall.mobile.collapseQuickFill", { defaultValue: "收起快捷填单" })
-                      : t("hall.mobile.expandQuickFill", { defaultValue: "展开快捷填单" })
-                  }
-                  aria-pressed={quickFillExpanded}
-                  className="size-8 rounded-full border border-[#dfe6f0] bg-[#f8fafc] text-slate-500 hover:bg-slate-100 hover:text-slate-900"
-                  onClick={() => setQuickFillExpanded((current) => !current)}
-                >
-                  {quickFillExpanded ? (
-                    <ChevronUp className="size-4" aria-hidden />
-                  ) : (
-                    <ChevronDown className="size-4" aria-hidden />
-                  )}
-                </Button>
-              ) : null}
-              {activeRow?.number ? (
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  aria-label={
-                    favorites.includes(activeRow.number)
-                      ? t("hall.quickFill.unfavorite")
-                      : t("hall.quickFill.favorite")
-                  }
-                  aria-pressed={favorites.includes(activeRow.number)}
-                  title={
-                    favorites.includes(activeRow.number)
-                      ? t("hall.quickFill.unfavorite")
-                      : t("hall.quickFill.favorite")
-                  }
-                  className={cn(
-                    "size-8 rounded-full border border-[#ffd7db] bg-[#fff7f8] text-[#d81435] hover:bg-[#fff1f3] hover:text-[#b80f2b]",
-                    favorites.includes(activeRow.number) &&
-                      "border-[#d81435] bg-[#d81435] text-white hover:bg-[#c51230] hover:text-white",
-                  )}
-                  onClick={() => toggleFavoriteNumber(activeRow.number)}
-                >
-                  <Star
-                    className={cn(
-                      "size-4",
-                      favorites.includes(activeRow.number) && "fill-current",
-                    )}
-                    aria-hidden
-                  />
-                </Button>
-              ) : null}
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon"
-                aria-label={t("hall.quickFill.clearAll")}
-                title={t("hall.quickFill.clearAll")}
-                className="size-8 rounded-full border border-[#dfe6f0] bg-[#f8fafc] text-slate-500 hover:bg-slate-100 hover:text-slate-900"
-                onClick={clearAllRows}
-              >
-                <Trash2 className="size-4" aria-hidden />
-              </Button>
-            </div>
-          </div>
-
-          {isMobile ? (
-            <div className="mt-2 space-y-2">
-              {quickFillExpanded ? (
-                <div className="rounded-xl border border-[#e7eef8] bg-[#f8fbff] px-3 py-2.5">
-                  <div className="flex flex-wrap items-center gap-2">
-                    <span className="text-[11px] font-semibold text-[#5b6f95]">
-                      {t("hall.quickFill.batchTitle", { defaultValue: "Quick amount" })}
-                    </span>
-                    {MOBILE_QUICK_AMOUNT_PRESETS.map((preset) => (
-                      <button
-                        key={preset}
-                        type="button"
-                        disabled={tableDisabled}
-                        onClick={() => applyQuickAmountToActiveRow(preset)}
-                        className="inline-flex h-8 min-w-12 items-center justify-center rounded-full border border-[#cfe0fb] bg-white px-3 text-xs font-bold text-[#0b4ab3] transition-colors hover:border-[#aac7f5] hover:bg-[#edf5ff] disabled:opacity-40"
-                      >
-                        {preset}
-                      </button>
-                    ))}
-                    <button
-                      type="button"
-                      disabled={tableDisabled || !activeRow?.number}
-                      onClick={copyPreviousRowToActiveRow}
-                      className="inline-flex h-8 items-center justify-center rounded-full border border-[#dfe6f0] bg-white px-3 text-xs font-semibold text-slate-600 transition-colors hover:bg-slate-50 disabled:opacity-40"
-                    >
-                      {t("hall.quickFill.copyPrev", { defaultValue: "Copy prev row" })}
-                    </button>
-                    <button
-                      type="button"
-                      disabled={tableDisabled}
-                      onClick={clearActiveRowAmounts}
-                      className="inline-flex h-8 items-center justify-center rounded-full border border-[#ffe0e5] bg-white px-3 text-xs font-semibold text-[#d81435] transition-colors hover:bg-[#fff4f6] disabled:opacity-40"
-                    >
-                      {t("hall.quickFill.clearRow", { defaultValue: "Clear row amounts" })}
-                    </button>
-                  </div>
-                </div>
-              ) : null}
-
-              {quickFillExpanded ? (
-                <>
-                  {favoriteChips.length > 0 ? (
-                    <div className="flex flex-wrap items-center gap-1.5">
-                      <span className="mr-0.5 text-[11px] font-semibold text-[#d81435]">
-                        {t("hall.quickFill.favorites")}
-                      </span>
-                      {favoriteChips.map((number) => (
-                        <button
-                          key={`fav-${number}`}
-                          type="button"
-                          className="inline-flex h-8 touch-manipulation items-center gap-1 rounded-full border border-[#ffd7db] bg-[#fff3f5] px-2.5 text-xs font-semibold text-[#d81435] transition-colors hover:bg-[#ffe9ed]"
-                          onPointerDown={() => {
-                            const current = holdFavoriteRef.current;
-                            current.number = number;
-                            current.longPress = false;
-                            if (current.timer) window.clearTimeout(current.timer);
-                            current.timer = window.setTimeout(() => {
-                              current.longPress = true;
-                              toggleFavoriteNumber(number);
-                            }, 500);
-                          }}
-                          onPointerUp={() => {
-                            const current = holdFavoriteRef.current;
-                            if (current.timer) {
-                              window.clearTimeout(current.timer);
-                              current.timer = null;
-                            }
-                            if (!current.longPress) {
-                              fillCurrentRow(number);
-                            }
-                            current.longPress = false;
-                          }}
-                          onPointerLeave={() => {
-                            const current = holdFavoriteRef.current;
-                            if (current.timer) {
-                              window.clearTimeout(current.timer);
-                              current.timer = null;
-                            }
-                            current.longPress = false;
-                          }}
-                        >
-                          {number}
-                          <span className="text-[11px] font-medium opacity-70">
-                            {t("hall.quickFill.tapHold")}
-                          </span>
-                        </button>
-                      ))}
-                    </div>
-                  ) : null}
-
-                  <div className="flex flex-wrap items-center gap-1.5">
-                    <span className="mr-0.5 text-[11px] font-semibold text-slate-400">
-                      {t("hall.quickFill.history")}
-                    </span>
-                    {historyChips.length > 0 ? (
-                      historyChips.map((number) => (
-                        <button
-                          key={`his-${number}`}
-                          type="button"
-                          className="inline-flex h-8 min-w-10 items-center justify-center rounded-full border border-[#d7e5f8] bg-[#f8fbff] px-3 text-xs font-bold text-[#07459f] transition-colors hover:border-[#b9d0f3] hover:bg-[#eef6ff]"
-                          onClick={() => fillCurrentRow(number)}
-                        >
-                          {number}
-                        </button>
-                      ))
-                    ) : (
-                      <span className="inline-flex h-8 items-center rounded-full border border-dashed border-slate-200 bg-slate-50 px-3 text-xs text-slate-400">
-                        {t("hall.quickFill.emptyHistory")}
-                      </span>
-                    )}
-                  </div>
-                </>
-              ) : null}
-            </div>
-          ) : null}
-        </div>
-
-            <div
-              className={cn(
-                "overflow-x-auto",
-                isMobile
-                  ? "-mx-1 flex gap-1.5 px-1 pb-1"
-              : "order-first inline-flex w-fit max-w-full shrink-0 items-center gap-1 rounded-lg bg-[#f3f6fb] p-1",
-              )}
-            >
+        <HallDesktopWorkflowBar
+          stepGame={t("hall.desktop.stepGame", { defaultValue: "选择玩法" })}
+          stepFill={t("hall.desktop.stepFill", { defaultValue: "填写号码和金额" })}
+          stepReview={t("hall.desktop.stepReview", { defaultValue: "核对并提交" })}
+          gameControls={(
+            <div className="inline-flex max-w-full items-center gap-1 rounded-lg bg-[#f3f6fb] p-1">
              {categoryTabs.map((tab) => {
                const hasPlays = openPlays.some(
                  (play) => playCategory(play.play_code) === tab.value,
@@ -1846,35 +1540,102 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }

                return (
                  <button
-                    key={tab.value}
+                    key={`desktop-${tab.value}`}
                    type="button"
                    disabled={!hasPlays}
                    onClick={() => setActiveCategory(tab.value)}
                    className={cn(
-                      "inline-flex items-center justify-center font-bold transition-colors",
-                      isMobile
-                        ? "min-w-[5.25rem] rounded-t-xl border border-b-0 px-4 py-3 text-sm"
-                        : "min-w-[4.5rem] rounded-lg px-3.5 py-2 text-sm",
-                      isMobile
-                        ? active
-                          ? "border-[#d7e1f3] border-b-white bg-white text-[#21335b] shadow-[0_-1px_0_rgba(255,255,255,0.8)]"
-                          : "border-transparent bg-transparent text-[#6d8fd6] hover:text-[#2d63e2]"
-                        : active
-                          ? "bg-[#2d63e2] text-white shadow-[0_4px_12px_rgba(45,99,226,0.28)]"
-                          : "bg-transparent text-[#5b7fbf] hover:bg-[#f3f7ff] hover:text-[#2d63e2]",
+                      "inline-flex min-w-14 items-center justify-center rounded-lg px-2 py-2 text-sm font-bold transition-colors xl:min-w-[4.5rem] xl:px-3.5",
+                      active
+                        ? "bg-[#2d63e2] text-white shadow-[0_4px_12px_rgba(45,99,226,0.24)]"
+                        : "text-[#5b7fbf] hover:bg-white hover:text-[#2d63e2]",
                      !hasPlays && "cursor-not-allowed opacity-40",
                    )}
                    aria-pressed={active}
                  >
-                    <span className={cn("mr-2 text-[13px]", !isMobile && active && "text-white/90")} aria-hidden>
-                      ▦
-                    </span>
                    {tab.label}
                  </button>
                );
              })}
            </div>
-        </div>
+          )}
+          fillControls={(
+            <div className="flex min-h-9 min-w-0 flex-wrap items-center gap-1.5">
+              {favoriteChips.length > 0 ? (
+                <>
+                  <span className="mr-0.5 text-xs font-bold text-[#d81435]">
+                    {t("hall.quickFill.favorites")}
+                  </span>
+                  {favoriteChips.slice(0, 5).map((number) => (
+                    <button
+                      key={`desktop-fav-${number}`}
+                      type="button"
+                      className="inline-flex h-8 items-center rounded-full border border-[#ffd7db] bg-[#fff3f5] px-3 text-xs font-bold text-[#d81435] transition-colors hover:bg-[#ffe9ed]"
+                      onClick={() => fillCurrentRow(number)}
+                    >
+                      {number}
+                    </button>
+                  ))}
+                </>
+              ) : null}
+              <span className="ml-1 mr-0.5 text-xs font-bold text-slate-400">
+                {t("hall.quickFill.history")}
+              </span>
+              {historyChips.length > 0 ? (
+                historyChips.slice(0, 6).map((number) => (
+                  <button
+                    key={`desktop-his-${number}`}
+                    type="button"
+                    className="inline-flex h-8 min-w-10 items-center justify-center rounded-full border border-[#d7e5f8] bg-[#f8fbff] px-3 text-xs font-bold text-[#07459f] transition-colors hover:border-[#b9d0f3] hover:bg-[#eef6ff]"
+                    onClick={() => fillCurrentRow(number)}
+                  >
+                    {number}
+                  </button>
+                ))
+              ) : (
+                <span className="inline-flex h-8 items-center rounded-full border border-dashed border-slate-200 bg-slate-50 px-3 text-xs text-slate-400">
+                  {t("hall.quickFill.emptyHistory")}
+                </span>
+              )}
+            </div>
+          )}
+          reviewControls={(
+            <div className="flex items-center gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                className="h-9 flex-1 justify-center rounded-lg border-[#dfe6f0] bg-white text-sm font-bold text-slate-600"
+                onClick={clearAllRows}
+              >
+                <Trash2 className="size-4" aria-hidden />
+                {t("hall.quickFill.clearAll")}
+              </Button>
+            </div>
+          )}
+        />
+
+        <HallPlaySummaryGrid items={summaryItems} className="lg:hidden" />
+
+        {isMobile ? (
+          <HallMobileQuickFill
+            activeNumber={activeRow?.number ?? ""}
+            favorites={favoriteChips}
+            history={historyChips}
+            expanded={quickFillExpanded}
+            tableDisabled={tableDisabled}
+            activeCategory={activeCategory}
+            availableCategories={availableCategories}
+            onExpandedChange={setQuickFillExpanded}
+            onCategoryChange={setActiveCategory}
+            onFillNumber={fillCurrentRow}
+            onToggleFavorite={toggleFavoriteNumber}
+            onClearAll={clearAllRows}
+            onApplyQuickAmount={applyQuickAmountToActiveRow}
+            onCopyPreviousRow={copyPreviousRowToActiveRow}
+            onClearActiveRowAmounts={clearActiveRowAmounts}
+            t={t}
+          />
+        ) : null}

            {activeCategoryPlays.length === 0 ? (
              <div
@@ -1885,7 +1646,13 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
              </div>
            ) : null}

-            <div className={cn("min-w-0", !isMobile && "flex items-start gap-3")}>
+            <div
+              className={cn(
+                "min-w-0",
+                !isMobile &&
+                  "flex flex-col items-stretch gap-3 min-[1500px]:flex-row min-[1500px]:items-start",
+              )}
+            >
              <div
                className={cn(
                  "min-w-0 flex-1 overflow-hidden border border-[#e6edf8] bg-white transition-opacity",
@@ -1894,242 +1661,74 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
                  showWideTableHint && "player-table-scroll-wrap",
                )}
              >
-              <div
-                ref={playSummaryScrollRef}
-                className="mb-3 overflow-x-auto rounded border border-[#dae3f3] shadow-sm"
-              >
-                <table className="w-full border-collapse text-center text-[11px] tabular-nums">
-                  <thead>
-                    <tr className="bg-[#2d63e2] text-white">
-                      <th className="border-r border-[#4a7aeb] px-2 py-1.5 font-bold">
-                        {t("hall.table.total", { defaultValue: "共" })}
-                      </th>
-                      {allPlayColumns.map((column) => (
-                        <th key={column.key} className="border-r border-[#4a7aeb] px-1 py-1.5 font-bold last:border-0">
-                          {playColumnHeaderLabel(
-                            column.play,
-                            playCategory(column.play.play_code),
-                            column.digitSlot,
-                            t,
-                          )}
-                        </th>
-                      ))}
-                    </tr>
-                  </thead>
-                  <tbody className="bg-white text-[#17408d]">
-                    <tr>
-                      <td className="border-r border-[#edf2f8] px-2 py-1.5 font-bold text-[#e5002c]">
-                        {formatMinorAmount(submitActualMinor)}
-                      </td>
-                      {allPlayColumns.map((column) => {
-                        const colTotalMinor = rows.reduce((sum, row) => {
-                          const amtStr = row.amounts[column.key];
-                          if (!amtStr) return sum;
-                          if (
-                            row.number.trim().length === 0 ||
-                            draftLineIssueReason(column.play.play_code, row.number, column.digitSlot) !== null
-                          ) {
-                            return sum;
-                          }
-                          const minorAmt = parseDecimalInputToMinor(amtStr, currencyCode);
-                          return sum + (minorAmt ?? 0);
-                        }, 0);
-
-                        return (
-                          <td key={`val-${column.key}`} className="border-r border-[#edf2f8] px-1 py-1.5 font-bold last:border-0">
-                            {formatMinorAmount(colTotalMinor)}
-                          </td>
-                        );
-                      })}
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-
-              <div className="player-table-scroll overflow-x-auto overscroll-x-contain">
-                <table
-                  className="mx-auto w-max border-collapse text-[11px]"
-                  style={{ width: tableWidthPx }}
-                >
-                  <thead>
-                    <tr className="border-b border-[#edf2f8] bg-[#f8fafd] text-[#58709d]">
-                      <th className={cn("sticky left-0 z-30 bg-[#f8fafd] px-0.5 py-1.5 text-center font-bold shadow-[2px_0_6px_rgba(15,23,42,0.04)]", indexColClass)}>
-                        {t("hall.table.no", { defaultValue: "No." })}
-                      </th>
-                      <th
-                        className={cn(
-                          "sticky z-30 bg-[#f8fafd] px-1 py-1.5 text-center font-bold shadow-[2px_0_6px_rgba(15,23,42,0.04)]",
-                          stickyNumberLeftClass,
-                          numberColClass,
-                        )}
-                      >
-                        <span className="block text-xs">{t("hall.table.number", { defaultValue: "Number" })}</span>
-                        <span className="mt-0.5 block font-mono text-[10px] font-medium text-[#9aa8bd]">
-                          {numberPlaceholder}
-                        </span>
-                      </th>
-                      {playColumns.map((column) => (
-                        <th
-                          key={column.key}
-                          className={cn(amountColClass, "px-0.5 py-1.5 text-center font-bold")}
-                        >
-                          <span className="block whitespace-nowrap text-[10px] leading-tight">
-                            {playColumnHeaderLabel(
-                              column.play,
-                              playCategory(column.play.play_code),
-                              column.digitSlot,
-                              t,
-                            )}
-                          </span>
-                          <Checkbox
-                            checked={syncAmountColumns[column.key] === true}
-                            disabled={tableDisabled}
-                            onCheckedChange={(checked) => setSyncAmountColumns((current) => ({
-                              ...current,
-                              [column.key]: checked === true,
-                            }))}
-                            aria-label={t("hall.table.syncColumnAmount", {
-                              column: playColumnHeaderLabel(column.play, playCategory(column.play.play_code), column.digitSlot, t),
-                            })}
-                            title={t("hall.table.syncColumnAmount", {
-                              column: playColumnHeaderLabel(column.play, playCategory(column.play.play_code), column.digitSlot, t),
-                            })}
-                            className="mx-auto mt-1 size-3.5"
-                          />
-                        </th>
-                      ))}
-                      {showSelectionTypeColumn ? (
-                        <th className={cn(selectionTypeColClass, "px-1 py-1 text-center font-bold")}>
-                          <span className="block text-xs">{t("hall.table.selectionType", { defaultValue: "Type" })}</span>
-                          <select
-                            defaultValue=""
-                            disabled={tableDisabled}
-                            onChange={(event) => {
-                              const selectionType = event.target.value as SelectionType | "";
-                              if (selectionType) requestAllSelectionTypes(selectionType);
-                              event.currentTarget.value = "";
-                            }}
-                            className="mx-auto mt-1 h-5 w-full rounded border border-[#d7e1f3] bg-white px-0.5 text-[10px] font-semibold text-[#304f86]"
-                            aria-label={t("hall.table.selectAllTypes")}
-                            title={t("hall.table.setAllTypes")}
-                          >
-                            <option value="">{t("hall.table.selectAll")}</option>
-                            {selectionTypeOptions.map((type) => (
-                              <option key={type} value={type}>
-                                {t(`hall.table.selectionTypes.${type}`)}
-                              </option>
-                            ))}
-                          </select>
-                        </th>
-                      ) : null}
-                      {betProviders.map((provider, providerIndex) => {
-                        const checked = rows.length > 0 && rows.every((row) => row.providerCodes.includes(provider.code));
-                        return (
-                          <th
-                            key={provider.code}
-                            className={cn(providerColClass, providerColumnTone(providerIndex), "px-0.5 py-1 text-center font-black")}
-                            title={provider.name}
-                          >
-                            <span className="block text-sm leading-none">{provider.short_code}</span>
-                            <Checkbox
-                              checked={checked}
-                              disabled={tableDisabled}
-                              onCheckedChange={(next) => toggleProviderColumn(provider.code, next === true)}
-                              aria-label={t("hall.table.selectAllProvider", { provider: provider.name })}
-                              className="mx-auto mt-1 border-slate-500 bg-white data-checked:border-slate-800 data-checked:bg-slate-800"
-                            />
-                          </th>
-                        );
-                      })}
-                      <th className={cn(rowTotalColClass, "bg-[#eef5ff] px-1 py-1 text-center font-black text-[#17408d]")}>
-                        <span className="block text-xs">{t("hall.table.rowTotal", { defaultValue: "Total" })}</span>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {rows.map((row, index) => (
-                      <DraftRowItem
-                        key={row.id}
-                        row={row}
-                        index={index}
-                        rowActive={activeRowId === row.id}
-                        tableDisabled={tableDisabled}
-                        numberPlaceholder={numberPlaceholder}
-                        activeCategory={activeCategory}
-                        numberMaxChars={numberMaxChars}
-                        betProviders={betProviders}
-                        playColumns={playColumns}
-                        alertRows={alertRows}
-                        liveSoldOutNumbers={liveSoldOutNumbers}
-                        liveWarningNumbers={liveWarningNumbers}
-                        updateRowNumber={updateRowNumber}
-                        updateRowSelectionType={requestRowSelectionType}
-                        selectionTypeOptions={selectionTypeOptions}
-                        updateAmount={updateAmount}
-                        toggleRowProvider={toggleRowProvider}
-                        setActiveRowId={setActiveRowId}
-                        t={t}
-                        isMobile={isMobile}
-                        indexColClass={indexColClass}
-                        numberColClass={numberColClass}
-                        stickyNumberLeftClass={stickyNumberLeftClass}
-                        selectionTypeColClass={selectionTypeColClass}
-                        showSelectionTypeColumn={showSelectionTypeColumn}
-                        providerColClass={providerColClass}
-                        rowTotalColClass={rowTotalColClass}
-                        currencyCode={currencyCode}
-                      />
-                    ))}
-                  </tbody>
-                </table>
-              </div>
+                <HallBettingTable
+                  rows={rows}
+                  activeRowId={activeRowId}
+                  tableDisabled={tableDisabled}
+                  tableWidthPx={tableWidthPx}
+                  isMobile={isMobile}
+                  indexColClass={indexColClass}
+                  numberColClass={numberColClass}
+                  stickyNumberLeftClass={stickyNumberLeftClass}
+                  numberPlaceholder={numberPlaceholder}
+                  numberMaxChars={numberMaxChars}
+                  activeCategory={activeCategory}
+                  playColumns={playColumns}
+                  amountColClass={amountColClass}
+                  syncAmountColumns={syncAmountColumns}
+                  selectionTypeColClass={selectionTypeColClass}
+                  showSelectionTypeColumn={showSelectionTypeColumn}
+                  selectionTypeOptions={selectionTypeOptions}
+                  betProviders={betProviders}
+                  providerColClass={providerColClass}
+                  rowTotalColClass={rowTotalColClass}
+                  alertRows={alertRows}
+                  liveSoldOutNumbers={liveSoldOutNumbers}
+                  liveWarningNumbers={liveWarningNumbers}
+                  currencyCode={currencyCode}
+                  onToggleSyncAmountColumn={toggleSyncAmountColumn}
+                  onSetAllSelectionTypes={requestAllSelectionTypes}
+                  onToggleProviderColumn={toggleProviderColumn}
+                  onUpdateRowNumber={updateRowNumber}
+                  onUpdateRowSelectionType={requestRowSelectionType}
+                  onUpdateAmount={updateAmount}
+                  onToggleRowProvider={toggleRowProvider}
+                  onSetActiveRowId={setActiveRowId}
+                  t={t}
+                />

              </div>

              {!isMobile ? (
-                <aside className="sticky top-3 z-20 w-52 shrink-0 self-start rounded-xl border border-[#e6edf8] bg-[#f8fbff] px-3.5 py-3.5 text-[#304f86] shadow-[0_8px_24px_rgba(15,23,42,0.05)]">
-                  <p className="text-xs font-black">{t("hall.table.orderSummary", { defaultValue: "Order summary" })}</p>
-                  <dl className="mt-4 space-y-3">
-                    <div className="flex items-center justify-between gap-2">
-                      <dt className="text-xs text-slate-500">{t("hall.table.lineCount", { defaultValue: "Lines" })}</dt>
-                      <dd className="font-mono text-sm font-black tabular-nums">{draftEntries.length}</dd>
-                    </div>
-                    <div className="flex items-center justify-between gap-2">
-                      <dt className="text-xs text-slate-500">{t("hall.table.providerCount", { defaultValue: "Providers" })}</dt>
-                      <dd className="font-mono text-sm font-black tabular-nums">{selectedProviderCount}</dd>
-                    </div>
-                    <div className="border-t border-[#dce6f5] pt-3">
-                      <dt className="text-xs text-slate-500">{t("hall.table.actualTotal")}</dt>
-                      <dd className="mt-1 text-base font-black tabular-nums text-[#0b3f96]">
-                        {formatMinorAsCurrency(submitActualMinor, currencyCode)}
-                      </dd>
-                    </div>
-                  </dl>
-                  <Button
-                    type="button"
-                    disabled={!canSubmit || previewLoading}
-                    onClick={() => void handlePreview()}
-                    className={cn(
-                      "mt-4 h-10 w-full gap-2 rounded-lg border-0 text-sm font-bold text-white",
-                      !isBettable
-                        ? "bg-slate-500 shadow-none hover:bg-slate-500 disabled:opacity-100"
-                        : "bg-[#e5002c] shadow-[0_8px_20px_rgba(229,0,44,0.26)] hover:bg-[#d10028]",
-                    )}
-                  >
-                    {!isBettable ? (
-                      <Lock className="size-4 shrink-0" aria-hidden />
-                    ) : (
-                      <Ticket className="size-4 shrink-0" aria-hidden />
-                    )}
-                    {previewLoading
+                <HallDesktopReviewPanel
+                  model={desktopReviewModel}
+                  disabled={!canSubmit}
+                  loading={previewLoading}
+                  isBettable={isBettable}
+                  onSubmit={() => void handlePreview()}
+                  labels={{
+                    title: t("hall.desktop.reviewTitle", { defaultValue: "核对与提交" }),
+                    lineCount: t("hall.table.lineCount"),
+                    providerCount: t("hall.table.providerCount"),
+                    actualTotal: t("hall.table.actualTotal"),
+                    availableCredit: t("hall.desktop.availableCredit", { defaultValue: "可用信用" }),
+                    remainingCredit: t("hall.desktop.remainingCredit", { defaultValue: "下注后可用" }),
+                    noWarnings: t("hall.desktop.noWarnings", { defaultValue: "暂无风险提醒" }),
+                    warningCount: t("hall.desktop.warningCount", {
+                      defaultValue: "{{count}} 行接近售罄",
+                      count: warningRowCount,
+                    }),
+                    creditEnough: t("hall.desktop.creditEnough", { defaultValue: "可用信用充足" }),
+                    creditInsufficient: t("hall.desktop.creditInsufficient", { defaultValue: "可用信用不足" }),
+                    submit: previewLoading
                      ? t("hall.table.previewing")
                      : !isBettable
                        ? t("hall.closed.title")
                        : availableMinor < submitActualMinor
                          ? t("hall.table.insufficientBalance")
-                          : t("hall.table.submitBet")}
-                  </Button>
-                </aside>
+                          : t("hall.table.submitBet"),
+                  }}
+                />
              ) : null}
            </div>

@@ -2194,6 +1793,8 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
          if (!open) {
            setPreviewData(null);
            if (!placeLoading) {
+              previewRequestSeqRef.current += 1;
+              previewSubmissionRef.current = null;
              clearPlaceTraceId();
            }
          }
@@ -2218,324 +1819,14 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
        creditMode={creditMode}
      />

-      <Dialog
+      <HallSelectionConfirmDialog
        open={pendingSelectionChange !== null}
-        onOpenChange={(open) => {
-          if (!open) cancelPendingSelectionChange();
-        }}
-      >
-        <DialogContent className="max-w-[380px] rounded-2xl border border-[#dfe8f6] bg-white p-0 shadow-[0_24px_70px_rgba(15,23,42,0.18)]">
-          <DialogHeader className="gap-2 border-b border-[#eef2f8] px-5 py-4 text-left">
-            <DialogTitle className="text-base font-black text-[#0b3f96]">
-              {t("hall.table.selectionConfirm.title")}
-            </DialogTitle>
-            <DialogDescription className="text-sm leading-relaxed text-slate-600">
-              {pendingSelectionPreview
-                ? pendingSelectionPreview.next === "full_cover"
-                  ? t("hall.table.selectionConfirm.fullCoverBody", {
-                      type: t(`hall.table.selectionTypes.${pendingSelectionPreview.next}`),
-                      count: pendingSelectionPreview.comboCount,
-                      amount: formatMinorAsCurrency(pendingSelectionPreview.toMinor || pendingSelectionPreview.fromMinor, currencyCode),
-                    })
-                  : pendingSelectionPreview.fromMinor > 0 &&
-                      pendingSelectionPreview.toMinor > pendingSelectionPreview.fromMinor
-                    ? t("hall.table.selectionConfirm.increaseBody", {
-                        type: t(`hall.table.selectionTypes.${pendingSelectionPreview.next}`),
-                        count: pendingSelectionPreview.comboCount,
-                        from: formatMinorAsCurrency(pendingSelectionPreview.fromMinor, currencyCode),
-                        to: formatMinorAsCurrency(pendingSelectionPreview.toMinor, currencyCode),
-                      })
-                    : t("hall.table.selectionConfirm.genericBody", {
-                        type: t(`hall.table.selectionTypes.${pendingSelectionPreview.next}`),
-                        count: pendingSelectionPreview.comboCount,
-                      })
-                : t("hall.table.selectionConfirm.genericBody", {
-                    type: "",
-                    count: 1,
-                  })}
-            </DialogDescription>
-          </DialogHeader>
-          {pendingSelectionPreview && pendingSelectionPreview.comboCount > 1 ? (
-            <div className="space-y-1 px-5 py-3 text-xs text-slate-600">
-              <p className="font-bold text-[#304f86]">
-                {t("hall.table.selectionConfirm.comboHint", {
-                  count: pendingSelectionPreview.comboCount,
-                })}
-              </p>
-              {pendingSelectionPreview.number ? (
-                <p className="font-mono text-[11px] text-slate-500">
-                  {t("hall.table.selectionConfirm.numberHint", {
-                    number: pendingSelectionPreview.number,
-                  })}
-                </p>
-              ) : null}
-            </div>
-          ) : null}
-          <DialogFooter className="mx-0 mb-0 gap-2 rounded-b-2xl border-t border-[#eef2f8] bg-white px-5 py-4 sm:justify-end">
-            <Button
-              type="button"
-              variant="outline"
-              className="rounded-lg"
-              onClick={cancelPendingSelectionChange}
-            >
-              {t("hall.table.selectionConfirm.cancel")}
-            </Button>
-            <Button
-              type="button"
-              className="rounded-lg bg-[#e5002c] text-white hover:bg-[#d10028]"
-              onClick={confirmPendingSelectionChange}
-            >
-              {t("hall.table.selectionConfirm.confirm")}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+        preview={pendingSelectionPreview}
+        currencyCode={currencyCode}
+        onCancel={cancelPendingSelectionChange}
+        onConfirm={confirmPendingSelectionChange}
+        t={t}
+      />
    </>
  );
 }
-
-const DraftRowItem = memo(function DraftRowItem({
-  row,
-  index,
-  rowActive,
-  tableDisabled,
-  numberPlaceholder,
-  activeCategory,
-  numberMaxChars,
-  betProviders,
-  playColumns,
-  alertRows,
-  liveSoldOutNumbers,
-  liveWarningNumbers,
-  updateRowNumber,
-  updateRowSelectionType,
-  selectionTypeOptions,
-  updateAmount,
-  toggleRowProvider,
-  setActiveRowId,
-  t,
-  isMobile,
-  indexColClass,
-  numberColClass,
-  stickyNumberLeftClass,
-  selectionTypeColClass,
-  showSelectionTypeColumn,
-  providerColClass,
-  rowTotalColClass,
-  currencyCode,
-}: {
-  row: DraftRow;
-  index: number;
-  rowActive: boolean;
-  tableDisabled: boolean;
-  numberPlaceholder: string;
-  activeCategory: PlayHallCategory;
-  numberMaxChars: number;
-  betProviders: BetProviderRow[];
-  playColumns: PlayColumn[];
-  alertRows: DrawCurrentRiskPoolAlert[];
-  liveSoldOutNumbers: Set<string>;
-  liveWarningNumbers: Set<string>;
-  updateRowNumber: (id: string, value: string) => void;
-  updateRowSelectionType: (id: string, value: SelectionType) => void;
-  selectionTypeOptions: SelectionType[];
-  updateAmount: (rowId: string, playCode: string, value: string) => void;
-  toggleRowProvider: (rowId: string, code: string) => void;
-  setActiveRowId: (id: string) => void;
-  t: HallTranslate;
-  isMobile: boolean;
-  indexColClass: string;
-  numberColClass: string;
-  stickyNumberLeftClass: string;
-  selectionTypeColClass: string;
-  showSelectionTypeColumn: boolean;
-  providerColClass: string;
-  rowTotalColClass: string;
-  currencyCode: string;
-}) {
-  const displayNumber = sanitizeNumber(row.number, activeCategory);
-  const comboCount = selectionCombinationCount(displayNumber, row.selectionType);
-  const hasFullCoverAmountError = row.selectionType === "full_cover" && playColumns.some((column) => {
-    const amount = parseDecimalInputToMinor(row.amounts[column.key] ?? "", currencyCode);
-    return amount !== null && amount > 0 && !isFullCoverAmountDivisible(amount, comboCount);
-  });
-  const rowTotalMinor =
-    playColumns.reduce((total, column) => {
-      if (draftLineIssueReason(column.play.play_code, row.number, column.digitSlot) !== null) {
-        return total;
-      }
-      const amount = parseDecimalInputToMinor(row.amounts[column.key] ?? "", currencyCode) ?? 0;
-      return total + resolveSelectionTotalBet(amount, row.selectionType, comboCount);
-    }, 0) * row.providerCodes.length;
-
-	  return (
-    <tr
-      className={cn(
-        "border-b border-[#f0f3f8] last:border-b-0",
-        rowActive && "bg-[#f5f9ff]/80",
-      )}
-    >
-      <td
-        className={cn(
-          "sticky left-0 z-20 align-top px-0.5 py-1.5 text-center font-black text-[#17408d] shadow-[2px_0_6px_rgba(15,23,42,0.04)]",
-          indexColClass,
-          rowActive ? "bg-[#f5f9ff]" : "bg-white",
-        )}
-      >
-        {index + 1}
-      </td>
-      <td
-        className={cn(
-          "sticky z-20 align-top px-1 py-1.5 shadow-[2px_0_6px_rgba(15,23,42,0.04)]",
-          stickyNumberLeftClass,
-          numberColClass,
-          rowActive ? "bg-[#f5f9ff]" : "bg-white",
-        )}
-      >
-        <Input
-	          value={displayNumber}
-	          disabled={tableDisabled}
-	          inputMode="numeric"
-	          pattern="[0-9Rr]*"
-	          autoComplete="off"
-	          placeholder={numberPlaceholder}
-	          maxLength={numberMaxChars}
-          onFocus={() => setActiveRowId(row.id)}
-          onClick={() => setActiveRowId(row.id)}
-          onChange={(event) => updateRowNumber(row.id, event.target.value)}
-          className={cn(
-            "h-8 w-full rounded-md border-[#e1e8f3] bg-white px-1 text-center font-mono font-bold tabular-nums text-slate-950 shadow-sm focus-visible:ring-[#1d57b7]",
-            !isMobile ? "text-[13px]" : "text-sm",
-            "tracking-[0.12em]",
-          )}
-        />
-      </td>
-      {playColumns.map((column) => {
-        const { play } = column;
-        const amountText = row.amounts[column.key] ?? "";
-        const status = cellRiskState(
-          play,
-          row.number,
-          playCategory(play.play_code),
-          alertRows,
-          liveSoldOutNumbers,
-          liveWarningNumbers,
-          column.digitSlot,
-        );
-        const disabled = tableDisabled || status === "sold_out" || (play.config !== null && !play.config.is_enabled);
-        const hasAmount = amountText.trim().length > 0;
-        const isInputValidForPlay = row.number.trim().length > 0 && draftLineIssueReason(play.play_code, row.number, column.digitSlot) === null;
-        const cellDisabled = disabled || !isInputValidForPlay;
-
-        return (
-          <td
-            key={`${row.id}-${column.key}`}
-            className={cn(
-              "px-0.5 py-1.5 align-top",
-              status === "warning" && "bg-amber-50/70",
-              status === "sold_out" && "bg-slate-100 text-slate-400",
-            )}
-          >
-            {isInputValidForPlay ? (
-              <Input
-                value={amountText}
-                disabled={cellDisabled}
-                inputMode="decimal"
-                placeholder={
-                  status === "sold_out"
-                    ? t("hall.table.soldOut")
-                    : "-"
-                }
-                onFocus={() => setActiveRowId(row.id)}
-                onClick={() => setActiveRowId(row.id)}
-                onChange={(event) => updateAmount(row.id, column.key, event.target.value)}
-                className={cn(
-                  "h-8 w-full rounded-md border-[#e1e8f3] bg-white px-0.5 text-center font-bold tabular-nums shadow-sm focus-visible:ring-[#1d57b7]",
-                  !isMobile ? "text-[13px]" : "text-sm",
-                  hasAmount && "border-[#9bbcff] bg-[#f5f9ff] text-[#0b3f96]",
-                  status === "warning" && "border-amber-200 bg-amber-50 text-amber-800",
-                  status === "sold_out" && "border-slate-200 bg-slate-100 text-slate-400",
-                )}
-              />
-            ) : (
-              <div className="h-8 w-full rounded-md border border-slate-200 bg-slate-100/70" />
-            )}
-            {isInputValidForPlay && status === "sold_out" ? (
-              <p className="mt-0.5 text-center text-[10px] font-bold text-slate-500">
-                {t("hall.table.soldOut")}
-              </p>
-            ) : status === "warning" ? (
-              <p className="mt-0.5 text-center text-[10px] font-bold text-amber-700">
-                {t("hall.table.warning")}
-              </p>
-            ) : null}
-          </td>
-        );
-      })}
-      {showSelectionTypeColumn ? (
-        <td className={cn(selectionTypeColClass, "align-top px-1 py-1.5 text-center", rowActive && "bg-[#f5f9ff]")}>
-          <select
-            value={row.selectionType}
-            disabled={tableDisabled}
-            onChange={(event) => updateRowSelectionType(row.id, event.target.value as SelectionType)}
-            className="h-8 w-full rounded-md border border-[#e1e8f3] bg-white px-1 text-[10px] font-semibold text-[#304f86]"
-            aria-label={t("hall.table.selectionTypeForRow", { row: index + 1 })}
-          >
-            {selectionTypeOptions.map((type) => (
-              <option key={type} value={type}>
-                {t(`hall.table.selectionTypes.${type}`)}
-              </option>
-            ))}
-          </select>
-          {comboCount > 1 && displayNumber.length >= 2 ? (
-            <div className="mt-0.5 flex items-center justify-center gap-0.5 text-[9px] font-bold leading-none text-[#0b56b7]">
-              <span>{t("hall.table.comboCount", { count: comboCount })}</span>
-              {row.selectionType === "full_cover" || row.selectionType === "half_play" ? (
-                <Tooltip.Root>
-                  <Tooltip.Trigger
-                    className="inline-flex size-3 items-center justify-center rounded-full text-[#5378b5] outline-none hover:text-[#0b56b7] focus-visible:ring-1 focus-visible:ring-[#0b56b7]"
-                    aria-label={t("hall.table.selectionTypeRule")}
-                    title={t("hall.table.selectionTypeRule")}
-                  >
-                    <CircleHelp className="size-3" aria-hidden />
-                  </Tooltip.Trigger>
-                  <Tooltip.Portal>
-                    <Tooltip.Positioner side="bottom" sideOffset={6}>
-                      <Tooltip.Popup className="z-[70] max-w-52 rounded-md bg-slate-900 px-2 py-1.5 text-left text-[11px] font-medium leading-snug text-white shadow-lg">
-                        {row.selectionType === "full_cover"
-                          ? t("hall.table.fullCoverSplitHint", { count: comboCount })
-                          : t("hall.table.halfPlayHint")}
-                      </Tooltip.Popup>
-                    </Tooltip.Positioner>
-                  </Tooltip.Portal>
-                </Tooltip.Root>
-              ) : null}
-            </div>
-          ) : null}
-          {row.selectionType === "full_cover" && comboCount > 1 && hasFullCoverAmountError ? (
-            <p className="mt-0.5 text-[9px] font-medium leading-tight text-red-600">
-              {t("hall.table.fullCoverDivisibilityError", { count: comboCount })}
-            </p>
-          ) : null}
-        </td>
-      ) : null}
-      {betProviders.map((provider, providerIndex) => (
-        <td
-          key={provider.code}
-          className={cn(providerColClass, providerColumnTone(providerIndex), "px-0.5 py-1.5 text-center")}
-        >
-          <Checkbox
-            checked={row.providerCodes.includes(provider.code)}
-            disabled={tableDisabled}
-            onCheckedChange={() => toggleRowProvider(row.id, provider.code)}
-            aria-label={`${provider.name} ${index + 1}`}
-            className="mx-auto border-slate-500 bg-white data-checked:border-slate-800 data-checked:bg-slate-800"
-          />
-        </td>
-      ))}
-      <td className={cn(rowTotalColClass, "bg-[#f7fbff] px-1 py-1.5 text-center font-mono font-black tabular-nums text-[#0b3f96]", rowActive && "bg-[#edf5ff]")}>
-        {formatMinorAmount(rowTotalMinor)}
-      </td>
-    </tr>
-  );
-});
--- a/src/features/hall/hall-betting-table.tsx
+++ b/src/features/hall/hall-betting-table.tsx
@@ -0,0 +1,257 @@
+import { Checkbox } from "@/components/ui/checkbox";
+import { HallDraftRowItem } from "@/features/hall/hall-draft-row-item";
+import {
+  playCategory,
+  playColumnHeaderLabel,
+  providerColumnTone,
+  type DraftRow,
+  type HallTranslate,
+  type PlayColumn,
+  type PlayHallCategory,
+} from "@/features/hall/hall-betting-grid-model";
+import type { SelectionType } from "@/features/hall/selection-type";
+import { cn } from "@/lib/utils";
+import type { BetProviderRow } from "@/types/api/bet-provider";
+import type { DrawCurrentRiskPoolAlert } from "@/types/api/draw-current";
+
+type HallBettingTableProps = {
+  rows: DraftRow[];
+  activeRowId: string | null;
+  tableDisabled: boolean;
+  tableWidthPx: number;
+  isMobile: boolean;
+  indexColClass: string;
+  numberColClass: string;
+  stickyNumberLeftClass: string;
+  numberPlaceholder: string;
+  numberMaxChars: number;
+  activeCategory: PlayHallCategory;
+  playColumns: PlayColumn[];
+  amountColClass: string;
+  syncAmountColumns: Record<string, boolean>;
+  selectionTypeColClass: string;
+  showSelectionTypeColumn: boolean;
+  selectionTypeOptions: SelectionType[];
+  betProviders: BetProviderRow[];
+  providerColClass: string;
+  rowTotalColClass: string;
+  alertRows: DrawCurrentRiskPoolAlert[];
+  liveSoldOutNumbers: Set<string>;
+  liveWarningNumbers: Set<string>;
+  currencyCode: string;
+  onToggleSyncAmountColumn: (column: PlayColumn, checked: boolean) => void;
+  onSetAllSelectionTypes: (selectionType: SelectionType) => void;
+  onToggleProviderColumn: (code: string, checked: boolean) => void;
+  onUpdateRowNumber: (id: string, value: string) => void;
+  onUpdateRowSelectionType: (id: string, value: SelectionType) => void;
+  onUpdateAmount: (rowId: string, playCode: string, value: string) => void;
+  onToggleRowProvider: (rowId: string, code: string) => void;
+  onSetActiveRowId: (id: string) => void;
+  t: HallTranslate;
+};
+
+export function HallBettingTable({
+  rows,
+  activeRowId,
+  tableDisabled,
+  tableWidthPx,
+  isMobile,
+  indexColClass,
+  numberColClass,
+  stickyNumberLeftClass,
+  numberPlaceholder,
+  numberMaxChars,
+  activeCategory,
+  playColumns,
+  amountColClass,
+  syncAmountColumns,
+  selectionTypeColClass,
+  showSelectionTypeColumn,
+  selectionTypeOptions,
+  betProviders,
+  providerColClass,
+  rowTotalColClass,
+  alertRows,
+  liveSoldOutNumbers,
+  liveWarningNumbers,
+  currencyCode,
+  onToggleSyncAmountColumn,
+  onSetAllSelectionTypes,
+  onToggleProviderColumn,
+  onUpdateRowNumber,
+  onUpdateRowSelectionType,
+  onUpdateAmount,
+  onToggleRowProvider,
+  onSetActiveRowId,
+  t,
+}: HallBettingTableProps) {
+  return (
+    <div className="player-table-scroll overflow-x-auto overscroll-x-contain">
+      <table
+        className={cn("mx-auto w-max border-collapse", isMobile ? "text-[11px]" : "text-sm")}
+        style={{ width: tableWidthPx }}
+      >
+        <thead>
+          <tr className="border-b border-[#edf2f8] bg-[#f8fafd] text-[#58709d]">
+            <th
+              className={cn(
+                "sticky left-0 z-30 bg-[#f8fafd] px-0.5 text-center font-bold shadow-[2px_0_6px_rgba(15,23,42,0.04)]",
+                isMobile ? "py-1.5" : "py-2.5",
+                indexColClass,
+              )}
+            >
+              {t("hall.table.no", { defaultValue: "No." })}
+            </th>
+            <th
+              className={cn(
+                "sticky z-30 bg-[#f8fafd] px-1 text-center font-bold shadow-[2px_0_6px_rgba(15,23,42,0.04)]",
+                isMobile ? "py-1.5" : "py-2.5",
+                stickyNumberLeftClass,
+                numberColClass,
+              )}
+            >
+              <span className="block text-xs">
+                {t("hall.table.number", { defaultValue: "Number" })}
+              </span>
+              <span className="mt-0.5 block font-mono text-[10px] font-medium text-[#9aa8bd]">
+                {numberPlaceholder}
+              </span>
+            </th>
+            {playColumns.map((column) => {
+              const label = playColumnHeaderLabel(
+                column.play,
+                playCategory(column.play.play_code),
+                column.digitSlot,
+                t,
+              );
+              return (
+                <th
+                  key={column.key}
+                  className={cn(
+                    amountColClass,
+                    "px-0.5 text-center font-bold",
+                    isMobile ? "py-1.5" : "py-2.5",
+                  )}
+                >
+                  <span className="block whitespace-nowrap text-[10px] leading-tight">
+                    {label}
+                  </span>
+                  <Checkbox
+                    checked={syncAmountColumns[column.key] === true}
+                    disabled={tableDisabled}
+                    onCheckedChange={(checked) =>
+                      onToggleSyncAmountColumn(column, checked === true)
+                    }
+                    aria-label={t("hall.table.syncColumnAmount", { column: label })}
+                    title={t("hall.table.syncColumnAmount", { column: label })}
+                    className={cn("mx-auto mt-1", isMobile ? "size-3.5" : "size-4")}
+                  />
+                </th>
+              );
+            })}
+            {showSelectionTypeColumn ? (
+              <th className={cn(selectionTypeColClass, "px-1 py-1 text-center font-bold")}>
+                <span className="block text-xs">
+                  {t("hall.table.selectionType", { defaultValue: "Type" })}
+                </span>
+                <select
+                  defaultValue=""
+                  disabled={tableDisabled}
+                  onChange={(event) => {
+                    const selectionType = event.target.value as SelectionType | "";
+                    if (selectionType) onSetAllSelectionTypes(selectionType);
+                    event.currentTarget.value = "";
+                  }}
+                  className="mx-auto mt-1 h-5 w-full rounded border border-[#d7e1f3] bg-white px-0.5 text-[10px] font-semibold text-[#304f86]"
+                  aria-label={t("hall.table.selectAllTypes")}
+                  title={t("hall.table.setAllTypes")}
+                >
+                  <option value="">{t("hall.table.selectAll")}</option>
+                  {selectionTypeOptions.map((type) => (
+                    <option key={type} value={type}>
+                      {t(`hall.table.selectionTypes.${type}`)}
+                    </option>
+                  ))}
+                </select>
+              </th>
+            ) : null}
+            {betProviders.map((provider, providerIndex) => {
+              const checked =
+                rows.length > 0 &&
+                rows.every((row) => row.providerCodes.includes(provider.code));
+              return (
+                <th
+                  key={provider.code}
+                  className={cn(
+                    providerColClass,
+                    providerColumnTone(providerIndex),
+                    "px-0.5 py-1 text-center font-black",
+                  )}
+                  title={provider.name}
+                >
+                  <span className="block text-sm leading-none">{provider.short_code}</span>
+                  <Checkbox
+                    checked={checked}
+                    disabled={tableDisabled}
+                    onCheckedChange={(next) =>
+                      onToggleProviderColumn(provider.code, next === true)
+                    }
+                    aria-label={t("hall.table.selectAllProvider", {
+                      provider: provider.name,
+                    })}
+                    className="mx-auto mt-1 border-slate-500 bg-white data-checked:border-slate-800 data-checked:bg-slate-800"
+                  />
+                </th>
+              );
+            })}
+            <th
+              className={cn(
+                rowTotalColClass,
+                "bg-[#eef5ff] px-1 py-1 text-center font-black text-[#17408d]",
+              )}
+            >
+              <span className="block text-xs">
+                {t("hall.table.rowTotal", { defaultValue: "Total" })}
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, index) => (
+            <HallDraftRowItem
+              key={row.id}
+              row={row}
+              index={index}
+              rowActive={activeRowId === row.id}
+              tableDisabled={tableDisabled}
+              numberPlaceholder={numberPlaceholder}
+              activeCategory={activeCategory}
+              numberMaxChars={numberMaxChars}
+              betProviders={betProviders}
+              playColumns={playColumns}
+              alertRows={alertRows}
+              liveSoldOutNumbers={liveSoldOutNumbers}
+              liveWarningNumbers={liveWarningNumbers}
+              updateRowNumber={onUpdateRowNumber}
+              updateRowSelectionType={onUpdateRowSelectionType}
+              selectionTypeOptions={selectionTypeOptions}
+              updateAmount={onUpdateAmount}
+              toggleRowProvider={onToggleRowProvider}
+              setActiveRowId={onSetActiveRowId}
+              t={t}
+              isMobile={isMobile}
+              indexColClass={indexColClass}
+              numberColClass={numberColClass}
+              stickyNumberLeftClass={stickyNumberLeftClass}
+              selectionTypeColClass={selectionTypeColClass}
+              showSelectionTypeColumn={showSelectionTypeColumn}
+              providerColClass={providerColClass}
+              rowTotalColClass={rowTotalColClass}
+              currencyCode={currencyCode}
+            />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
--- a/src/features/hall/hall-desktop-workspace.tsx
+++ b/src/features/hall/hall-desktop-workspace.tsx
@@ -0,0 +1,184 @@
+import type { ReactNode } from "react";
+import { AlertTriangle, CheckCircle2, Lock, Ticket } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+type HallDesktopWorkflowBarProps = {
+  gameControls: ReactNode;
+  fillControls: ReactNode;
+  reviewControls: ReactNode;
+  stepGame: string;
+  stepFill: string;
+  stepReview: string;
+};
+
+export function HallDesktopWorkflowBar({
+  gameControls,
+  fillControls,
+  reviewControls,
+  stepGame,
+  stepFill,
+  stepReview,
+}: HallDesktopWorkflowBarProps) {
+  const steps = [
+    { label: stepGame, content: gameControls },
+    { label: stepFill, content: fillControls },
+    { label: stepReview, content: reviewControls },
+  ];
+
+  return (
+    <div className="hidden overflow-hidden rounded-xl border border-[#dfe8f5] bg-white shadow-[0_8px_24px_rgba(15,23,42,0.04)] lg:grid lg:grid-cols-[minmax(10rem,0.8fr)_minmax(16rem,1.5fr)_minmax(10rem,0.65fr)] xl:grid-cols-[minmax(15rem,0.8fr)_minmax(24rem,1.5fr)_minmax(13rem,0.65fr)]">
+      {steps.map((step, index) => (
+        <section
+          key={step.label}
+          className={cn(
+            "min-w-0 px-4 py-3",
+            index > 0 && "border-l border-[#e7edf6]",
+          )}
+        >
+          <div className="mb-2 flex items-center gap-2">
+            <span className="inline-flex size-6 shrink-0 items-center justify-center rounded-full bg-[#eaf2ff] text-xs font-black text-[#1658c4]">
+              {index + 1}
+            </span>
+            <h2 className="text-sm font-black text-[#23395f]">{step.label}</h2>
+          </div>
+          {step.content}
+        </section>
+      ))}
+    </div>
+  );
+}
+
+export type HallDesktopReviewModel = {
+  lineCount: number;
+  providerCount: number;
+  actualAmount: string;
+  availableCredit: string;
+  remainingCredit: string;
+  warningCount: number;
+  creditSufficient: boolean;
+};
+
+type HallDesktopReviewPanelProps = {
+  model: HallDesktopReviewModel;
+  labels: {
+    title: string;
+    lineCount: string;
+    providerCount: string;
+    actualTotal: string;
+    availableCredit: string;
+    remainingCredit: string;
+    noWarnings: string;
+    warningCount: string;
+    creditEnough: string;
+    creditInsufficient: string;
+    submit: string;
+  };
+  disabled: boolean;
+  loading: boolean;
+  isBettable: boolean;
+  onSubmit: () => void;
+};
+
+export function HallDesktopReviewPanel({
+  model,
+  labels,
+  disabled,
+  loading,
+  isBettable,
+  onSubmit,
+}: HallDesktopReviewPanelProps) {
+  return (
+    <aside className="w-full shrink-0 self-start overflow-hidden rounded-xl border border-[#dfe8f5] bg-white text-[#304f86] shadow-[0_8px_24px_rgba(15,23,42,0.05)] min-[1500px]:sticky min-[1500px]:top-3 min-[1500px]:w-80">
+      <div className="border-b border-[#e7edf6] bg-[#f7faff] px-4 py-3.5">
+        <p className="text-[15px] font-black text-[#20385f]">{labels.title}</p>
+      </div>
+
+      <div className="grid gap-3 p-4 lg:grid-cols-[repeat(4,minmax(0,1fr))_auto] lg:items-center min-[1500px]:block min-[1500px]:space-y-4">
+        <dl className="grid grid-cols-2 gap-x-5 gap-y-3 lg:contents min-[1500px]:grid">
+          <div>
+            <dt className="text-xs font-semibold text-slate-500">{labels.lineCount}</dt>
+            <dd className="mt-1 font-mono text-lg font-black tabular-nums text-[#143f86]">
+              {model.lineCount}
+            </dd>
+          </div>
+          <div>
+            <dt className="text-xs font-semibold text-slate-500">{labels.providerCount}</dt>
+            <dd className="mt-1 font-mono text-lg font-black tabular-nums text-[#143f86]">
+              {model.providerCount}
+            </dd>
+          </div>
+          <div>
+            <dt className="text-xs font-semibold text-slate-500">{labels.availableCredit}</dt>
+            <dd className="mt-1 text-sm font-black tabular-nums text-[#143f86]">
+              {model.availableCredit}
+            </dd>
+          </div>
+          <div>
+            <dt className="text-xs font-semibold text-slate-500">{labels.remainingCredit}</dt>
+            <dd className="mt-1 text-sm font-black tabular-nums text-[#143f86]">
+              {model.remainingCredit}
+            </dd>
+          </div>
+        </dl>
+
+        <div className="rounded-lg border border-[#d8e5f7] bg-[#f7fbff] px-3 py-2.5 lg:min-w-36 min-[1500px]:px-4 min-[1500px]:py-3.5">
+          <p className="text-xs font-semibold text-slate-500">{labels.actualTotal}</p>
+          <p className="mt-1 text-lg font-black tabular-nums text-[#0b3f96] min-[1500px]:text-2xl">
+            {model.actualAmount}
+          </p>
+        </div>
+
+        <div className="space-y-2 lg:min-w-48 min-[1500px]:border-t min-[1500px]:border-[#e7edf6] min-[1500px]:pt-4">
+          <div
+            className={cn(
+              "flex items-center gap-2 text-xs font-bold",
+              model.creditSufficient ? "text-emerald-700" : "text-red-600",
+            )}
+          >
+            {model.creditSufficient ? (
+              <CheckCircle2 className="size-4 shrink-0" aria-hidden />
+            ) : (
+              <AlertTriangle className="size-4 shrink-0" aria-hidden />
+            )}
+            <span>{model.creditSufficient ? labels.creditEnough : labels.creditInsufficient}</span>
+          </div>
+          <div className="flex items-center gap-2 text-xs font-semibold text-slate-500">
+            {model.warningCount > 0 ? (
+              <AlertTriangle className="size-4 shrink-0 text-amber-600" aria-hidden />
+            ) : (
+              <CheckCircle2 className="size-4 shrink-0 text-slate-400" aria-hidden />
+            )}
+            <span>
+              {model.warningCount > 0
+                ? labels.warningCount
+                : labels.noWarnings}
+            </span>
+          </div>
+        </div>
+
+        <div className="lg:min-w-52 min-[1500px]:border-t min-[1500px]:border-[#e7edf6] min-[1500px]:pt-4">
+          <Button
+            type="button"
+            disabled={disabled || loading}
+            onClick={onSubmit}
+            className={cn(
+              "h-11 w-full gap-2 rounded-lg border-0 text-sm font-black text-white",
+              !isBettable
+                ? "bg-slate-500 shadow-none hover:bg-slate-500 disabled:opacity-100"
+                : "bg-[#e5002c] shadow-[0_8px_20px_rgba(229,0,44,0.24)] hover:bg-[#d10028]",
+            )}
+          >
+            {!isBettable ? (
+              <Lock className="size-4 shrink-0" aria-hidden />
+            ) : (
+              <Ticket className="size-4 shrink-0" aria-hidden />
+            )}
+            {labels.submit}
+          </Button>
+        </div>
+      </div>
+    </aside>
+  );
+}
--- a/src/features/hall/hall-draft-row-item.tsx
+++ b/src/features/hall/hall-draft-row-item.tsx
@@ -0,0 +1,312 @@
+import { Tooltip } from "@base-ui/react/tooltip";
+import { CircleHelp } from "lucide-react";
+import { memo } from "react";
+
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { draftLineIssueReason } from "@/features/hall/hall-bet-rules";
+import {
+  cellRiskState,
+  isDraftAmountInputValid,
+  playCategory,
+  providerColumnTone,
+  sanitizeNumber,
+  type DraftRow,
+  type HallTranslate,
+  type PlayColumn,
+  type PlayHallCategory,
+} from "@/features/hall/hall-betting-grid-model";
+import {
+  isFullCoverAmountDivisible,
+  resolveSelectionTotalBet,
+  selectionCombinationCount,
+  type SelectionType,
+} from "@/features/hall/selection-type";
+import { formatMinorAmount, parseDecimalInputToMinor } from "@/lib/money";
+import { cn } from "@/lib/utils";
+import type { BetProviderRow } from "@/types/api/bet-provider";
+import type { DrawCurrentRiskPoolAlert } from "@/types/api/draw-current";
+
+type HallDraftRowItemProps = {
+  row: DraftRow;
+  index: number;
+  rowActive: boolean;
+  tableDisabled: boolean;
+  numberPlaceholder: string;
+  activeCategory: PlayHallCategory;
+  numberMaxChars: number;
+  betProviders: BetProviderRow[];
+  playColumns: PlayColumn[];
+  alertRows: DrawCurrentRiskPoolAlert[];
+  liveSoldOutNumbers: Set<string>;
+  liveWarningNumbers: Set<string>;
+  updateRowNumber: (id: string, value: string) => void;
+  updateRowSelectionType: (id: string, value: SelectionType) => void;
+  selectionTypeOptions: SelectionType[];
+  updateAmount: (rowId: string, playCode: string, value: string) => void;
+  toggleRowProvider: (rowId: string, code: string) => void;
+  setActiveRowId: (id: string) => void;
+  t: HallTranslate;
+  isMobile: boolean;
+  indexColClass: string;
+  numberColClass: string;
+  stickyNumberLeftClass: string;
+  selectionTypeColClass: string;
+  showSelectionTypeColumn: boolean;
+  providerColClass: string;
+  rowTotalColClass: string;
+  currencyCode: string;
+};
+
+export const HallDraftRowItem = memo(function HallDraftRowItem({
+  row,
+  index,
+  rowActive,
+  tableDisabled,
+  numberPlaceholder,
+  activeCategory,
+  numberMaxChars,
+  betProviders,
+  playColumns,
+  alertRows,
+  liveSoldOutNumbers,
+  liveWarningNumbers,
+  updateRowNumber,
+  updateRowSelectionType,
+  selectionTypeOptions,
+  updateAmount,
+  toggleRowProvider,
+  setActiveRowId,
+  t,
+  isMobile,
+  indexColClass,
+  numberColClass,
+  stickyNumberLeftClass,
+  selectionTypeColClass,
+  showSelectionTypeColumn,
+  providerColClass,
+  rowTotalColClass,
+  currencyCode,
+}: HallDraftRowItemProps) {
+  const displayNumber = sanitizeNumber(row.number, activeCategory);
+  const comboCount = selectionCombinationCount(displayNumber, row.selectionType);
+  const hasFullCoverAmountError =
+    row.selectionType === "full_cover" &&
+    playColumns.some((column) => {
+      const amount = parseDecimalInputToMinor(row.amounts[column.key] ?? "", currencyCode);
+      return amount !== null && amount > 0 && !isFullCoverAmountDivisible(amount, comboCount);
+    });
+  const rowTotalMinor =
+    playColumns.reduce((total, column) => {
+      if (draftLineIssueReason(column.play.play_code, row.number, column.digitSlot) !== null) {
+        return total;
+      }
+      const amount = parseDecimalInputToMinor(row.amounts[column.key] ?? "", currencyCode) ?? 0;
+      return total + resolveSelectionTotalBet(amount, row.selectionType, comboCount);
+    }, 0) * row.providerCodes.length;
+
+  return (
+    <tr
+      className={cn(
+        "border-b border-[#f0f3f8] last:border-b-0",
+        rowActive && "bg-[#f5f9ff]/80",
+      )}
+    >
+      <td
+        className={cn(
+          "sticky left-0 z-20 align-top px-0.5 text-center font-black text-[#17408d] shadow-[2px_0_6px_rgba(15,23,42,0.04)]",
+          isMobile ? "py-1.5" : "py-2",
+          indexColClass,
+          rowActive ? "bg-[#f5f9ff]" : "bg-white",
+        )}
+      >
+        {index + 1}
+      </td>
+      <td
+        className={cn(
+          "sticky z-20 align-top px-1 shadow-[2px_0_6px_rgba(15,23,42,0.04)]",
+          isMobile ? "py-1.5" : "py-2",
+          stickyNumberLeftClass,
+          numberColClass,
+          rowActive ? "bg-[#f5f9ff]" : "bg-white",
+        )}
+      >
+        <Input
+          value={displayNumber}
+          disabled={tableDisabled}
+          inputMode="numeric"
+          pattern="[0-9Rr]*"
+          autoComplete="off"
+          placeholder={numberPlaceholder}
+          maxLength={numberMaxChars}
+          onFocus={() => setActiveRowId(row.id)}
+          onClick={() => setActiveRowId(row.id)}
+          onChange={(event) => updateRowNumber(row.id, event.target.value)}
+          className={cn(
+            "w-full rounded-md border-[#e1e8f3] bg-white px-1 text-center font-mono font-bold tracking-[0.12em] tabular-nums text-slate-950 shadow-sm focus-visible:ring-[#1d57b7]",
+            isMobile ? "h-8 text-sm" : "h-9 text-sm",
+          )}
+        />
+      </td>
+      {playColumns.map((column) => {
+        const { play } = column;
+        const amountText = row.amounts[column.key] ?? "";
+        const status = cellRiskState(
+          play,
+          row.number,
+          playCategory(play.play_code),
+          alertRows,
+          liveSoldOutNumbers,
+          liveWarningNumbers,
+          column.digitSlot,
+        );
+        const disabled =
+          tableDisabled ||
+          status === "sold_out" ||
+          (play.config !== null && !play.config.is_enabled);
+        const hasAmount = amountText.trim().length > 0;
+        const inputValid = isDraftAmountInputValid(row, column);
+
+        return (
+          <td
+            key={`${row.id}-${column.key}`}
+            className={cn(
+              "px-0.5 align-top",
+              isMobile ? "py-1.5" : "py-2",
+              status === "warning" && "bg-amber-50/70",
+              status === "sold_out" && "bg-slate-100 text-slate-400",
+            )}
+          >
+            {inputValid ? (
+              <Input
+                value={amountText}
+                disabled={disabled}
+                inputMode="decimal"
+                placeholder={status === "sold_out" ? t("hall.table.soldOut") : "-"}
+                onFocus={() => setActiveRowId(row.id)}
+                onClick={() => setActiveRowId(row.id)}
+                onChange={(event) => updateAmount(row.id, column.key, event.target.value)}
+                className={cn(
+                  "w-full rounded-md border-[#e1e8f3] bg-white px-0.5 text-center font-bold tabular-nums shadow-sm focus-visible:ring-[#1d57b7]",
+                  isMobile ? "h-8 text-sm" : "h-9 text-sm",
+                  hasAmount && "border-[#9bbcff] bg-[#f5f9ff] text-[#0b3f96]",
+                  status === "warning" && "border-amber-200 bg-amber-50 text-amber-800",
+                  status === "sold_out" && "border-slate-200 bg-slate-100 text-slate-400",
+                )}
+              />
+            ) : (
+              <div
+                className={cn(
+                  "w-full rounded-md border border-slate-200 bg-slate-100/70",
+                  isMobile ? "h-8" : "h-9",
+                )}
+              />
+            )}
+            {inputValid && status === "sold_out" ? (
+              <p className="mt-0.5 text-center text-[10px] font-bold text-slate-500">
+                {t("hall.table.soldOut")}
+              </p>
+            ) : status === "warning" ? (
+              <p className="mt-0.5 text-center text-[10px] font-bold text-amber-700">
+                {t("hall.table.warning")}
+              </p>
+            ) : null}
+          </td>
+        );
+      })}
+      {showSelectionTypeColumn ? (
+        <td
+          className={cn(
+            selectionTypeColClass,
+            "align-top px-1 text-center",
+            isMobile ? "py-1.5" : "py-2",
+            rowActive && "bg-[#f5f9ff]",
+          )}
+        >
+          <select
+            value={row.selectionType}
+            disabled={tableDisabled}
+            onChange={(event) =>
+              updateRowSelectionType(row.id, event.target.value as SelectionType)
+            }
+            className={cn(
+              "w-full rounded-md border border-[#e1e8f3] bg-white px-1 font-semibold text-[#304f86]",
+              isMobile ? "h-8 text-[10px]" : "h-9 text-xs",
+            )}
+            aria-label={t("hall.table.selectionTypeForRow", { row: index + 1 })}
+          >
+            {selectionTypeOptions.map((type) => (
+              <option key={type} value={type}>
+                {t(`hall.table.selectionTypes.${type}`)}
+              </option>
+            ))}
+          </select>
+          {comboCount > 1 && displayNumber.length >= 2 ? (
+            <div className="mt-0.5 flex items-center justify-center gap-0.5 text-[9px] font-bold leading-none text-[#0b56b7]">
+              <span>{t("hall.table.comboCount", { count: comboCount })}</span>
+              {row.selectionType === "full_cover" || row.selectionType === "half_play" ? (
+                <Tooltip.Root>
+                  <Tooltip.Trigger
+                    className="inline-flex size-3 items-center justify-center rounded-full text-[#5378b5] outline-none hover:text-[#0b56b7] focus-visible:ring-1 focus-visible:ring-[#0b56b7]"
+                    aria-label={t("hall.table.selectionTypeRule")}
+                    title={t("hall.table.selectionTypeRule")}
+                  >
+                    <CircleHelp className="size-3" aria-hidden />
+                  </Tooltip.Trigger>
+                  <Tooltip.Portal>
+                    <Tooltip.Positioner side="bottom" sideOffset={6}>
+                      <Tooltip.Popup className="z-[70] max-w-52 rounded-md bg-slate-900 px-2 py-1.5 text-left text-[11px] font-medium leading-snug text-white shadow-lg">
+                        {row.selectionType === "full_cover"
+                          ? t("hall.table.fullCoverSplitHint", { count: comboCount })
+                          : t("hall.table.halfPlayHint")}
+                      </Tooltip.Popup>
+                    </Tooltip.Positioner>
+                  </Tooltip.Portal>
+                </Tooltip.Root>
+              ) : null}
+            </div>
+          ) : null}
+          {row.selectionType === "full_cover" &&
+          comboCount > 1 &&
+          hasFullCoverAmountError ? (
+            <p className="mt-0.5 text-[9px] font-medium leading-tight text-red-600">
+              {t("hall.table.fullCoverDivisibilityError", { count: comboCount })}
+            </p>
+          ) : null}
+        </td>
+      ) : null}
+      {betProviders.map((provider, providerIndex) => (
+        <td
+          key={provider.code}
+          className={cn(
+            providerColClass,
+            providerColumnTone(providerIndex),
+            "px-0.5 text-center",
+            isMobile ? "py-1.5" : "py-2",
+          )}
+        >
+          <Checkbox
+            checked={row.providerCodes.includes(provider.code)}
+            disabled={tableDisabled}
+            onCheckedChange={() => toggleRowProvider(row.id, provider.code)}
+            aria-label={`${provider.name} ${index + 1}`}
+            className={cn(
+              "mx-auto border-slate-500 bg-white data-checked:border-slate-800 data-checked:bg-slate-800",
+              !isMobile && "size-4",
+            )}
+          />
+        </td>
+      ))}
+      <td
+        className={cn(
+          rowTotalColClass,
+          "bg-[#f7fbff] px-1 text-center font-mono font-black tabular-nums text-[#0b3f96]",
+          isMobile ? "py-1.5" : "py-2",
+          rowActive && "bg-[#edf5ff]",
+        )}
+      >
+        {formatMinorAmount(rowTotalMinor)}
+      </td>
+    </tr>
+  );
+});
--- a/src/features/hall/hall-draw-panel.tsx
+++ b/src/features/hall/hall-draw-panel.tsx
@@ -54,7 +54,7 @@ function ScheduleAnchorTime({
        <span className="font-mono text-base font-black tabular-nums tracking-tight text-[#0b3f96]">
          {time}
        </span>
-        {date ? <span className="text-sm text-slate-400">{date}</span> : null}
+        {date ? <span className="hidden text-sm text-slate-400 2xl:inline">{date}</span> : null}
      </div>
    );
  }
@@ -268,11 +268,11 @@ export function HallDrawPanel({ drawLive }: { drawLive: HallDrawLiveSnapshot })
      </div>

      {/* Desktop: 单行工具条 — 左期号状态，右时间/倒计时，与右侧钱包卡同高 */}
-      <div className="hidden h-full items-center justify-between gap-6 px-4 py-2.5 lg:flex">
+      <div className="hidden h-full items-center justify-between gap-3 px-4 py-2.5 lg:flex xl:gap-6">
        <div className="flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1">
          <div className="flex items-center gap-2">
-            <span className="text-sm text-slate-500">{t("draw.issueNo")}</span>
-            <span className="inline-flex items-center rounded-md bg-[#eef3ff] px-2 py-0.5 font-mono text-sm font-black tabular-nums text-[#0b4ab3]">
+            <span className="whitespace-nowrap text-sm text-slate-500">{t("draw.issueNo")}</span>
+            <span className="inline-flex items-center whitespace-nowrap rounded-md bg-[#eef3ff] px-2 py-0.5 font-mono text-sm font-black tabular-nums text-[#0b4ab3]">
              {display.draw_no}
            </span>
          </div>
@@ -281,7 +281,7 @@ export function HallDrawPanel({ drawLive }: { drawLive: HallDrawLiveSnapshot })
            {t(hud.labelKey, { defaultValue: hud.labelKey })}
          </span>
        </div>
-        <div className="flex shrink-0 flex-wrap items-center justify-end gap-x-5 gap-y-1">
+        <div className="flex shrink-0 flex-wrap items-center justify-end gap-x-3 gap-y-1 xl:gap-x-5">
          <ScheduleAnchorTime payload={display} layout="desktop" />
          <CloseTime
            key={`desk-${display.draw_no}-${display.status}-${display.seconds_to_draw ?? ""}-${display.seconds_remaining_in_cooldown ?? ""}`}
--- a/src/features/hall/hall-mobile-quick-fill.tsx
+++ b/src/features/hall/hall-mobile-quick-fill.tsx
@@ -0,0 +1,280 @@
+import { ChevronDown, ChevronUp, Star, Trash2 } from "lucide-react";
+import { useRef } from "react";
+
+import { Button } from "@/components/ui/button";
+import type {
+  HallTranslate,
+  PlayHallCategory,
+} from "@/features/hall/hall-betting-grid-model";
+import { cn } from "@/lib/utils";
+
+const QUICK_AMOUNT_PRESETS = ["10", "50", "100"] as const;
+const CATEGORY_TABS: Array<{ value: PlayHallCategory; label: string }> = [
+  { value: "D4", label: "4D" },
+  { value: "D3", label: "3D" },
+  { value: "D2", label: "2D" },
+];
+
+type HallMobileQuickFillProps = {
+  activeNumber: string;
+  favorites: string[];
+  history: string[];
+  expanded: boolean;
+  tableDisabled: boolean;
+  activeCategory: PlayHallCategory;
+  availableCategories: ReadonlySet<PlayHallCategory>;
+  onExpandedChange: (expanded: boolean) => void;
+  onCategoryChange: (category: PlayHallCategory) => void;
+  onFillNumber: (number: string) => void;
+  onToggleFavorite: (number: string) => void;
+  onClearAll: () => void;
+  onApplyQuickAmount: (amount: string) => void;
+  onCopyPreviousRow: () => void;
+  onClearActiveRowAmounts: () => void;
+  t: HallTranslate;
+};
+
+export function HallMobileQuickFill({
+  activeNumber,
+  favorites,
+  history,
+  expanded,
+  tableDisabled,
+  activeCategory,
+  availableCategories,
+  onExpandedChange,
+  onCategoryChange,
+  onFillNumber,
+  onToggleFavorite,
+  onClearAll,
+  onApplyQuickAmount,
+  onCopyPreviousRow,
+  onClearActiveRowAmounts,
+  t,
+}: HallMobileQuickFillProps) {
+  const holdFavoriteRef = useRef<{
+    timer: number | null;
+    longPress: boolean;
+  }>({ timer: null, longPress: false });
+
+  const cancelFavoriteHold = (): void => {
+    const current = holdFavoriteRef.current;
+    if (current.timer !== null) {
+      window.clearTimeout(current.timer);
+      current.timer = null;
+    }
+  };
+
+  const activeIsFavorite = favorites.includes(activeNumber);
+
+  return (
+    <div className="space-y-3">
+      <div className="rounded-lg border border-[#e8eef7] bg-white px-3 py-2.5">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <p className="text-sm font-bold leading-5 text-slate-950">
+              {t("hall.quickFill.title")}
+            </p>
+            <p className="mt-0.5 text-[11px] leading-5 text-slate-500">
+              {t("hall.mobile.quickFillSummary", {
+                defaultValue: "收藏 {{favorites}} 个，历史 {{history}} 个",
+                favorites: favorites.length,
+                history: history.length,
+              })}
+            </p>
+          </div>
+          <div className="flex shrink-0 items-center gap-1.5">
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              aria-label={
+                expanded
+                  ? t("hall.mobile.collapseQuickFill", { defaultValue: "收起快捷填单" })
+                  : t("hall.mobile.expandQuickFill", { defaultValue: "展开快捷填单" })
+              }
+              aria-pressed={expanded}
+              className="size-8 rounded-full border border-[#dfe6f0] bg-[#f8fafc] text-slate-500 hover:bg-slate-100 hover:text-slate-900"
+              onClick={() => onExpandedChange(!expanded)}
+            >
+              {expanded ? (
+                <ChevronUp className="size-4" aria-hidden />
+              ) : (
+                <ChevronDown className="size-4" aria-hidden />
+              )}
+            </Button>
+            {activeNumber ? (
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                aria-label={
+                  activeIsFavorite
+                    ? t("hall.quickFill.unfavorite")
+                    : t("hall.quickFill.favorite")
+                }
+                aria-pressed={activeIsFavorite}
+                title={
+                  activeIsFavorite
+                    ? t("hall.quickFill.unfavorite")
+                    : t("hall.quickFill.favorite")
+                }
+                className={cn(
+                  "size-8 rounded-full border border-[#ffd7db] bg-[#fff7f8] text-[#d81435] hover:bg-[#fff1f3] hover:text-[#b80f2b]",
+                  activeIsFavorite &&
+                    "border-[#d81435] bg-[#d81435] text-white hover:bg-[#c51230] hover:text-white",
+                )}
+                onClick={() => onToggleFavorite(activeNumber)}
+              >
+                <Star
+                  className={cn("size-4", activeIsFavorite && "fill-current")}
+                  aria-hidden
+                />
+              </Button>
+            ) : null}
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              aria-label={t("hall.quickFill.clearAll")}
+              title={t("hall.quickFill.clearAll")}
+              className="size-8 rounded-full border border-[#dfe6f0] bg-[#f8fafc] text-slate-500 hover:bg-slate-100 hover:text-slate-900"
+              onClick={onClearAll}
+            >
+              <Trash2 className="size-4" aria-hidden />
+            </Button>
+          </div>
+        </div>
+
+        {expanded ? (
+          <div className="mt-2 space-y-2">
+            <div className="rounded-xl border border-[#e7eef8] bg-[#f8fbff] px-3 py-2.5">
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="text-[11px] font-semibold text-[#5b6f95]">
+                  {t("hall.quickFill.batchTitle", { defaultValue: "Quick amount" })}
+                </span>
+                {QUICK_AMOUNT_PRESETS.map((preset) => (
+                  <button
+                    key={preset}
+                    type="button"
+                    disabled={tableDisabled}
+                    onClick={() => onApplyQuickAmount(preset)}
+                    className="inline-flex h-8 min-w-12 items-center justify-center rounded-full border border-[#cfe0fb] bg-white px-3 text-xs font-bold text-[#0b4ab3] transition-colors hover:border-[#aac7f5] hover:bg-[#edf5ff] disabled:opacity-40"
+                  >
+                    {preset}
+                  </button>
+                ))}
+                <button
+                  type="button"
+                  disabled={tableDisabled || !activeNumber}
+                  onClick={onCopyPreviousRow}
+                  className="inline-flex h-8 items-center justify-center rounded-full border border-[#dfe6f0] bg-white px-3 text-xs font-semibold text-slate-600 transition-colors hover:bg-slate-50 disabled:opacity-40"
+                >
+                  {t("hall.quickFill.copyPrev", { defaultValue: "Copy prev row" })}
+                </button>
+                <button
+                  type="button"
+                  disabled={tableDisabled}
+                  onClick={onClearActiveRowAmounts}
+                  className="inline-flex h-8 items-center justify-center rounded-full border border-[#ffe0e5] bg-white px-3 text-xs font-semibold text-[#d81435] transition-colors hover:bg-[#fff4f6] disabled:opacity-40"
+                >
+                  {t("hall.quickFill.clearRow", { defaultValue: "Clear row amounts" })}
+                </button>
+              </div>
+            </div>
+
+            {favorites.length > 0 ? (
+              <div className="flex flex-wrap items-center gap-1.5">
+                <span className="mr-0.5 text-[11px] font-semibold text-[#d81435]">
+                  {t("hall.quickFill.favorites")}
+                </span>
+                {favorites.map((number) => (
+                  <button
+                    key={`fav-${number}`}
+                    type="button"
+                    className="inline-flex h-8 touch-manipulation items-center gap-1 rounded-full border border-[#ffd7db] bg-[#fff3f5] px-2.5 text-xs font-semibold text-[#d81435] transition-colors hover:bg-[#ffe9ed]"
+                    onPointerDown={() => {
+                      const current = holdFavoriteRef.current;
+                      current.longPress = false;
+                      cancelFavoriteHold();
+                      current.timer = window.setTimeout(() => {
+                        current.longPress = true;
+                        onToggleFavorite(number);
+                      }, 500);
+                    }}
+                    onPointerUp={() => {
+                      const current = holdFavoriteRef.current;
+                      cancelFavoriteHold();
+                      if (!current.longPress) onFillNumber(number);
+                      current.longPress = false;
+                    }}
+                    onPointerLeave={() => {
+                      cancelFavoriteHold();
+                      holdFavoriteRef.current.longPress = false;
+                    }}
+                  >
+                    {number}
+                    <span className="text-[11px] font-medium opacity-70">
+                      {t("hall.quickFill.tapHold")}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            ) : null}
+
+            <div className="flex flex-wrap items-center gap-1.5">
+              <span className="mr-0.5 text-[11px] font-semibold text-slate-400">
+                {t("hall.quickFill.history")}
+              </span>
+              {history.length > 0 ? (
+                history.map((number) => (
+                  <button
+                    key={`his-${number}`}
+                    type="button"
+                    className="inline-flex h-8 min-w-10 items-center justify-center rounded-full border border-[#d7e5f8] bg-[#f8fbff] px-3 text-xs font-bold text-[#07459f] transition-colors hover:border-[#b9d0f3] hover:bg-[#eef6ff]"
+                    onClick={() => onFillNumber(number)}
+                  >
+                    {number}
+                  </button>
+                ))
+              ) : (
+                <span className="inline-flex h-8 items-center rounded-full border border-dashed border-slate-200 bg-slate-50 px-3 text-xs text-slate-400">
+                  {t("hall.quickFill.emptyHistory")}
+                </span>
+              )}
+            </div>
+          </div>
+        ) : null}
+      </div>
+
+      <div className="-mx-1 flex gap-1.5 overflow-x-auto px-1 pb-1">
+        {CATEGORY_TABS.map((tab) => {
+          const enabled = availableCategories.has(tab.value);
+          const active = activeCategory === tab.value;
+
+          return (
+            <button
+              key={tab.value}
+              type="button"
+              disabled={!enabled}
+              onClick={() => onCategoryChange(tab.value)}
+              className={cn(
+                "inline-flex min-w-[5.25rem] items-center justify-center rounded-t-xl border border-b-0 px-4 py-3 text-sm font-bold transition-colors",
+                active
+                  ? "border-[#d7e1f3] border-b-white bg-white text-[#21335b] shadow-[0_-1px_0_rgba(255,255,255,0.8)]"
+                  : "border-transparent bg-transparent text-[#6d8fd6] hover:text-[#2d63e2]",
+                !enabled && "cursor-not-allowed opacity-40",
+              )}
+              aria-pressed={active}
+            >
+              <span className="mr-2 text-[13px]" aria-hidden>
+                ▦
+              </span>
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
--- a/src/features/hall/hall-play-catalog-panel.tsx
+++ b/src/features/hall/hall-play-catalog-panel.tsx
@@ -2,6 +2,7 @@

 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useAsyncEffect } from "@/hooks/use-async-effect";

 import { getPlayEffective } from "@/api/play";
 import { Badge } from "@/components/ui/badge";
@@ -99,10 +100,8 @@ export function HallPlayCatalogPanel() {
    }
  }, [currencyParam, t]);

-  useEffect(() => {
-    queueMicrotask(() => {
-      void load();
-    });
+  useAsyncEffect(() => {
+    void load();
  }, [load]);

  useEffect(() => {
--- a/src/features/hall/hall-play-summary-grid.tsx
+++ b/src/features/hall/hall-play-summary-grid.tsx
@@ -0,0 +1,68 @@
+import type { CSSProperties } from "react";
+
+import { formatMinorAmount } from "@/lib/money";
+import { cn } from "@/lib/utils";
+
+export type HallSummaryItem = {
+  key: string;
+  label: string;
+  totalMinor: number;
+};
+
+function balancedColumnCount(itemCount: number, maxColumns: number) {
+  const rowCount = Math.max(1, Math.ceil(itemCount / maxColumns));
+  return Math.max(1, Math.ceil(itemCount / rowCount));
+}
+
+export function HallPlaySummaryGrid({
+  items,
+  className,
+}: {
+  items: HallSummaryItem[];
+  className?: string;
+}) {
+  const gridStyle = {
+    "--hall-summary-columns": balancedColumnCount(items.length, 10),
+    "--hall-summary-columns-wide": balancedColumnCount(items.length, 16),
+  } as CSSProperties;
+
+  return (
+    <div
+      className={cn(
+        "hall-summary-grid grid grid-cols-6 overflow-hidden rounded-lg border border-[#dfe6f0] bg-[#f8fafc] text-center tabular-nums shadow-sm sm:grid-cols-8 md:grid-cols-10",
+        className,
+      )}
+      style={gridStyle}
+    >
+      {items.map((item) => {
+        const hasValue = item.totalMinor > 0;
+        return (
+          <div
+            key={`summary-${item.key}`}
+            className={cn(
+              "min-w-0 border-b border-r transition-colors",
+              hasValue ? "border-[#cbdcf7] bg-[#eef5ff]" : "border-slate-200 bg-slate-50",
+            )}
+          >
+            <p
+              className={cn(
+                "flex min-h-7 items-center justify-center px-1 text-[10px] font-bold leading-tight transition-colors lg:min-h-8 lg:text-[11px]",
+                hasValue ? "bg-[#2d63e2] text-white" : "bg-slate-200 text-slate-500",
+              )}
+            >
+              {item.label}
+            </p>
+            <p
+              className={cn(
+                "px-1 py-1 text-[11px] font-black transition-colors lg:py-1.5 lg:text-xs",
+                hasValue ? "text-[#0b3f96]" : "text-slate-400",
+              )}
+            >
+              {formatMinorAmount(item.totalMinor)}
+            </p>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
--- a/src/features/hall/hall-screen.tsx
+++ b/src/features/hall/hall-screen.tsx
@@ -52,7 +52,7 @@ export function HallScreen() {
              <span>{blockedNotice}</span>
            </div>
          ) : null}
-          <div className="lg:grid lg:grid-cols-[minmax(0,1fr)_20rem] lg:items-stretch lg:gap-4 xl:grid-cols-[minmax(0,1fr)_22rem]">
+          <div className="space-y-3 lg:grid lg:grid-cols-[minmax(0,1fr)_16rem] lg:items-stretch lg:gap-3 lg:space-y-0 xl:grid-cols-[minmax(0,1fr)_20rem] xl:gap-4">
            <HallDrawPanel drawLive={drawLive} />
            <aside className="min-w-0">
              <HallWalletStrip />
--- a/src/features/hall/hall-selection-confirm-dialog.tsx
+++ b/src/features/hall/hall-selection-confirm-dialog.tsx
@@ -0,0 +1,105 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import type { HallTranslate } from "@/features/hall/hall-betting-grid-model";
+import type { SelectionType } from "@/features/hall/selection-type";
+import { formatMinorAsCurrency } from "@/lib/money";
+
+export type HallSelectionPreview = {
+  next: SelectionType;
+  comboCount: number;
+  number: string;
+  fromMinor: number;
+  toMinor: number;
+};
+
+type HallSelectionConfirmDialogProps = {
+  open: boolean;
+  preview: HallSelectionPreview | null;
+  currencyCode: string;
+  onCancel: () => void;
+  onConfirm: () => void;
+  t: HallTranslate;
+};
+
+export function HallSelectionConfirmDialog({
+  open,
+  preview,
+  currencyCode,
+  onCancel,
+  onConfirm,
+  t,
+}: HallSelectionConfirmDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={(nextOpen) => !nextOpen && onCancel()}>
+      <DialogContent className="max-w-[380px] rounded-2xl border border-[#dfe8f6] bg-white p-0 shadow-[0_24px_70px_rgba(15,23,42,0.18)]">
+        <DialogHeader className="gap-2 border-b border-[#eef2f8] px-5 py-4 text-left">
+          <DialogTitle className="text-base font-black text-[#0b3f96]">
+            {t("hall.table.selectionConfirm.title")}
+          </DialogTitle>
+          <DialogDescription className="text-sm leading-relaxed text-slate-600">
+            {preview
+              ? preview.next === "full_cover"
+                ? t("hall.table.selectionConfirm.fullCoverBody", {
+                    type: t(`hall.table.selectionTypes.${preview.next}`),
+                    count: preview.comboCount,
+                    amount: formatMinorAsCurrency(
+                      preview.toMinor || preview.fromMinor,
+                      currencyCode,
+                    ),
+                  })
+                : preview.fromMinor > 0 && preview.toMinor > preview.fromMinor
+                  ? t("hall.table.selectionConfirm.increaseBody", {
+                      type: t(`hall.table.selectionTypes.${preview.next}`),
+                      count: preview.comboCount,
+                      from: formatMinorAsCurrency(preview.fromMinor, currencyCode),
+                      to: formatMinorAsCurrency(preview.toMinor, currencyCode),
+                    })
+                  : t("hall.table.selectionConfirm.genericBody", {
+                      type: t(`hall.table.selectionTypes.${preview.next}`),
+                      count: preview.comboCount,
+                    })
+              : t("hall.table.selectionConfirm.genericBody", {
+                  type: "",
+                  count: 1,
+                })}
+          </DialogDescription>
+        </DialogHeader>
+        {preview && preview.comboCount > 1 ? (
+          <div className="space-y-1 px-5 py-3 text-xs text-slate-600">
+            <p className="font-bold text-[#304f86]">
+              {t("hall.table.selectionConfirm.comboHint", {
+                count: preview.comboCount,
+              })}
+            </p>
+            {preview.number ? (
+              <p className="font-mono text-[11px] text-slate-500">
+                {t("hall.table.selectionConfirm.numberHint", {
+                  number: preview.number,
+                })}
+              </p>
+            ) : null}
+          </div>
+        ) : null}
+        <DialogFooter className="mx-0 mb-0 gap-2 rounded-b-2xl border-t border-[#eef2f8] bg-white px-5 py-4 sm:justify-end">
+          <Button type="button" variant="outline" className="rounded-lg" onClick={onCancel}>
+            {t("hall.table.selectionConfirm.cancel")}
+          </Button>
+          <Button
+            type="button"
+            className="rounded-lg bg-[#e5002c] text-white hover:bg-[#d10028]"
+            onClick={onConfirm}
+          >
+            {t("hall.table.selectionConfirm.confirm")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/src/features/hall/hall-wallet-strip.tsx
+++ b/src/features/hall/hall-wallet-strip.tsx
@@ -16,7 +16,6 @@ import {
 import { useActivePlayerCurrency } from "@/hooks/use-active-player-currency";
 import { useApiQuery } from "@/hooks/use-api-query";
 import { useIsMobile } from "@/hooks/use-mobile";
-import { formatMinorAsCurrency } from "@/lib/money";
 import { isCreditFundingPlayer } from "@/lib/player-funding-mode";
 import { PLAYER_CURRENCY_CHANGE_EVENT } from "@/lib/player-currency-preference";
 import { cn } from "@/lib/utils";
@@ -84,7 +83,12 @@ export function HallWalletStrip() {
      <div
        className={cn(
          "relative overflow-hidden rounded-xl bg-[#e5002c] text-white shadow-[0_8px_24px_rgba(229,0,44,0.22)]",
-          isMobile ? "px-3 py-2.5" : "px-5 py-3 lg:h-[5.5rem] lg:px-4 lg:pr-14",
+          isMobile
+            ? "px-3 py-2.5"
+            : cn(
+                "px-5 py-3 lg:h-[5.5rem]",
+                isCreditPlayer ? "lg:px-3 xl:px-4" : "lg:px-4 lg:pr-14",
+              ),
        )}
      >
        <Image
@@ -92,10 +96,11 @@ export function HallWalletStrip() {
          alt=""
          fill
          sizes="(max-width: 1023px) 100vw, 1400px"
+          loading="eager"
          className="pointer-events-none object-cover object-center"
          aria-hidden
        />
-        <div className={cn("relative flex items-center", isMobile ? "gap-2.5" : "h-full gap-4")}>
+        <div className={cn("relative flex items-center", isMobile ? "gap-2.5" : "h-full gap-3 xl:gap-4")}>
          <div
            className={cn(
              "shrink-0 rounded-full bg-white text-[#d81435] shadow-sm",
@@ -106,14 +111,9 @@ export function HallWalletStrip() {
          >
            <Wallet className={cn(isMobile ? "size-5.5" : "size-5.5")} aria-hidden />
          </div>
-          <div
-            className={cn(
-              "min-w-0 flex-1",
-              !isMobile && "flex items-center gap-3 overflow-hidden",
-            )}
-          >
-            <div className={cn("min-w-0", !isMobile && "flex shrink-0 items-baseline gap-2")}>
-              <p className={cn("font-semibold text-white/90", isMobile ? "text-[13px]" : "text-sm")}>
+          <div className="min-w-0 flex-1">
+            <div className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5">
+              <p className={cn("shrink-0 font-semibold text-white/90", isMobile ? "text-[13px]" : "text-xs xl:text-sm")}>
                {label}
              </p>
              {loading ? (
@@ -127,27 +127,14 @@ export function HallWalletStrip() {
                <PlayerMoneyDisplay
                  amountMinor={headlineMinor}
                  currency={currency}
+                  showCurrencyCode={false}
                  className={cn(
                    "text-white",
-                    isMobile ? "mt-0.5" : "text-xl",
+                    isMobile ? "text-lg" : "text-lg xl:text-xl",
                  )}
                />
              )}
            </div>
-            {isCreditPlayer && !loading && balance ? (
-              <p
-                className={cn(
-                  "text-white/80",
-                  isMobile ? "mt-1 text-[11px]" : "truncate text-xs",
-                )}
-              >
-                {t("wallet.creditSummary", {
-                  defaultValue: "授信 {{limit}} · 已用 {{used}}",
-                  limit: formatMinorAsCurrency(balance.credit_limit ?? 0, currency),
-                  used: formatMinorAsCurrency(balance.used_credit ?? 0, currency),
-                })}
-              </p>
-            ) : null}
          </div>
        </div>

--- a/src/features/orders/ticket-order-detail-screen.tsx
+++ b/src/features/orders/ticket-order-detail-screen.tsx
@@ -18,6 +18,7 @@ import {
 import { Skeleton } from "@/components/ui/skeleton";
 import { TwentyThreeResultsGrid } from "@/features/results/twenty-three-results-grid";
 import { useCurrencyCatalog } from "@/hooks/use-currency-catalog";
+import { useAsyncEffect } from "@/hooks/use-async-effect";
 import { ticketDetailHref } from "@/features/orders/group-ticket-items";
 import { StatusDot, ticketStatusDisplay } from "@/features/orders/ticket-item-status";
 import { formatPlayerInstant } from "@/lib/player-datetime";
@@ -118,10 +119,8 @@ export function TicketOrderDetailScreen({ ticketNo }: { ticketNo: string }) {
    }
  }, [ticketNo, t]);

-  useEffect(() => {
-    queueMicrotask(() => {
-      void load();
-    });
+  useAsyncEffect(() => {
+    void load();
  }, [load]);

  useEffect(() => {
--- a/src/features/orders/ticket-orders-list-screen.tsx
+++ b/src/features/orders/ticket-orders-list-screen.tsx
@@ -28,6 +28,7 @@ import { OrderMetaLine } from "@/features/orders/order-meta-line";
 import { StatusDot, ticketStatusDisplay } from "@/features/orders/ticket-item-status";
 import { useCurrencyCatalog } from "@/hooks/use-currency-catalog";
 import { useIsMobile } from "@/hooks/use-mobile";
+import { useAsyncEffect } from "@/hooks/use-async-effect";

 import { LOTTERY_SCHEDULE_TIMEZONE } from "@/lib/lottery-schedule-timezone";
 import { formatMinorAsCurrency } from "@/lib/money";
@@ -61,6 +62,12 @@ function providerLabel(providerName?: string | null, providerCode?: string | nul
  return providerName || providerCode || "-";
 }

+function groupProviderLabel(items: TicketItemListRow[]): string {
+  return Array.from(
+    new Set(items.map((item) => providerLabel(item.provider_name, item.provider_code))),
+  ).join(", ");
+}
+
 export function TicketOrdersListScreen() {
  const router = useRouter();
  const searchParams = useSearchParams();
@@ -170,7 +177,7 @@ export function TicketOrdersListScreen() {
    [fromDate, queryDrawNo, queryNumber, queryStatuses, t, toDate],
  );

-  useEffect(() => {
+  useAsyncEffect(() => {
    void getDrawCurrent()
      .then((res) => {
        const tz = res.data?.schedule_timezone?.trim();
@@ -186,7 +193,7 @@ export function TicketOrdersListScreen() {
    [scheduleTimezone],
  );

-  useEffect(() => {
+  useAsyncEffect(() => {
    if (!initialLoadDone.current) {
      initialLoadDone.current = true;
      void fetchPage(1, false);
@@ -480,7 +487,7 @@ export function TicketOrdersListScreen() {

        <div className="space-y-3 lg:overflow-hidden lg:rounded-xl lg:border lg:border-[#e5edf8] lg:bg-white">
          {/* PC 顶栏：统计 + 筛选 + 操作 */}
-          <div className="hidden lg:block lg:border-b lg:border-[#eef3fa] lg:bg-white lg:px-5 lg:py-3">
+          <div className="hidden lg:block lg:border-b lg:border-[#e5edf8] lg:bg-[#f8fbff] lg:px-5 lg:py-3.5">
            <div className="flex flex-wrap items-center gap-3">
              <div className="min-w-0 shrink-0">
                <p className="text-[11px] font-bold text-[#7890b8]">
@@ -533,7 +540,7 @@ export function TicketOrdersListScreen() {
              </Button>
            </div>
          ) : items.length === 0 ? (
-            <div className="rounded-xl border border-dashed border-[#dce7f7] bg-[#f8fbff] px-3 py-8 text-center lg:rounded-none lg:border-0 lg:bg-white lg:px-5 lg:py-12">
+            <div className="player-pc-empty flex flex-col items-center justify-center rounded-xl border border-dashed border-[#dce7f7] bg-[#f8fbff] px-3 py-8 text-center lg:rounded-none lg:border-0 lg:bg-white lg:px-5 lg:py-12">
              <p className="text-sm font-bold text-slate-700">{t("orders.empty")}</p>
              <Link
                href="/hall"
@@ -606,6 +613,8 @@ export function TicketOrdersListScreen() {
                        </div>
                        <p className="mt-2 text-xs font-semibold text-[#7890b8]">
                          {t("orders.betItems")} · {group.items.length}
+                          {" · "}
+                          {groupProviderLabel(group.items)}
                        </p>
                        {group.status === "partial_failed" ? (
                          <p className="mt-2 text-xs font-bold text-amber-700">
@@ -683,25 +692,25 @@ export function TicketOrdersListScreen() {
                <Table className="table-fixed">
                  <TableHeader>
                    <TableRow className="border-[#eef3fa] hover:bg-transparent">
-                      <TableHead className="h-11 w-[22%] bg-white px-5 text-xs font-bold text-[#59739f]">
+                      <TableHead className="player-pc-table-head h-12 w-[22%] bg-[#f8fbff] px-5 font-bold text-[#59739f]">
                        {t("orders.drawNo")}
                      </TableHead>
-                      <TableHead className="h-11 w-[24%] bg-white px-3 text-xs font-bold text-[#59739f]">
+                      <TableHead className="player-pc-table-head h-12 w-[24%] bg-[#f8fbff] px-3 font-bold text-[#59739f]">
                        {t("orders.betItems")}
                      </TableHead>
-                      <TableHead className="h-11 w-[12%] bg-white px-3 text-xs font-bold text-[#59739f]">
+                      <TableHead className="player-pc-table-head h-12 w-[12%] bg-[#f8fbff] px-3 font-bold text-[#59739f]">
                        {t("hall.providers.title")}
                      </TableHead>
-                      <TableHead className="h-11 w-[12%] bg-white px-3 text-right text-xs font-bold text-[#59739f]">
+                      <TableHead className="player-pc-table-head h-12 w-[12%] bg-[#f8fbff] px-3 text-right font-bold text-[#59739f]">
                        {t("orders.stake")}
                      </TableHead>
-                      <TableHead className="h-11 w-[12%] bg-white px-3 text-right text-xs font-bold text-[#59739f]">
+                      <TableHead className="player-pc-table-head h-12 w-[12%] bg-[#f8fbff] px-3 text-right font-bold text-[#59739f]">
                        {t("orders.deduction")}
                      </TableHead>
-                      <TableHead className="h-11 w-[14%] bg-white px-3 text-right text-xs font-bold text-[#59739f]">
+                      <TableHead className="player-pc-table-head h-12 w-[14%] bg-[#f8fbff] px-3 text-right font-bold text-[#59739f]">
                        {t("orders.status")}
                      </TableHead>
-                      <TableHead className="h-11 w-10 bg-white px-3" aria-hidden />
+                      <TableHead className="h-12 w-10 bg-[#f8fbff] px-3" aria-hidden />
                    </TableRow>
                  </TableHeader>
                  <TableBody>
@@ -750,7 +759,14 @@ export function TicketOrdersListScreen() {
                                ) : null}
                              </p>
                            </TableCell>
-                            <TableCell className="px-3 py-2.5" />
+                            <TableCell className="px-3 py-2.5 align-middle">
+                              <p
+                                className="truncate text-sm font-semibold text-[#0b56b7]"
+                                title={groupProviderLabel(group.items)}
+                              >
+                                {groupProviderLabel(group.items)}
+                              </p>
+                            </TableCell>
                            <TableCell className="px-3 py-2.5 text-right align-middle">
                              <p className="text-sm font-black tabular-nums text-slate-900">
                                {formatMinorAsCurrency(group.total_bet_amount, cur)}
@@ -900,4 +916,3 @@ export function TicketOrdersListScreen() {
    </PlayerPanel>
  );
 }
-
--- a/src/features/player/hydrate-player-auth.tsx
+++ b/src/features/player/hydrate-player-auth.tsx
@@ -1,9 +1,8 @@
 "use client";

-import { useEffect } from "react";
-
-import { getPublicCurrencies } from "@/api/currency";
 import { getPlayerMe } from "@/api/player";
+import { useAsyncEffect } from "@/hooks/use-async-effect";
+import { ensureCurrencyCatalogLoaded } from "@/hooks/use-currency-catalog";
 import { loadCurrencyDisplayFormat } from "@/lib/currency-display-settings";
 import { usePlayerSessionStore } from "@/stores/player-session-store";

@@ -16,9 +15,8 @@ export function HydratePlayerAuth(): null {
    (state) => state.restoreBearerToken,
  );
  const setProfile = usePlayerSessionStore((state) => state.setProfile);
-  const setCurrencies = usePlayerSessionStore((state) => state.setCurrencies);

-  useEffect(() => {
+  useAsyncEffect(() => {
    usePlayerSessionStore.getState().reconcileSelectedCurrency();
    void loadCurrencyDisplayFormat();
    const refreshFormat = setInterval(() => {
@@ -30,8 +28,7 @@ export function HydratePlayerAuth(): null {
      try {
        if (usePlayerSessionStore.getState().currencies.length === 0) {
          try {
-            const currencies = await getPublicCurrencies();
-            setCurrencies(currencies.items);
+            await ensureCurrencyCatalogLoaded();
          } catch {
            // 币种元数据失败时不影响登录态恢复。
          }
@@ -50,7 +47,7 @@ export function HydratePlayerAuth(): null {
    return () => {
      clearInterval(refreshFormat);
    };
-  }, [restoreBearerToken, setCurrencies, setProfile]);
+  }, [restoreBearerToken, setProfile]);

  return null;
 }
--- a/src/features/player/player-account-dialog.tsx
+++ b/src/features/player/player-account-dialog.tsx
@@ -0,0 +1,279 @@
+"use client";
+
+import { ChevronDown, KeyRound, Loader2, LogOut } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+
+import { putPlayerPassword } from "@/api/player-auth";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { validatePlayerLoginPassword } from "@/lib/player-input-validation";
+import { usePlayerSessionStore } from "@/stores/player-session-store";
+import { LotteryApiBizError } from "@/types/api/errors";
+
+type AccountView = "profile" | "password";
+
+function ProfileRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="grid grid-cols-[7.5rem_minmax(0,1fr)] items-start gap-3 py-2.5 text-sm">
+      <dt className="text-muted-foreground">{label}</dt>
+      <dd className="min-w-0 break-words text-right font-medium text-foreground">{value}</dd>
+    </div>
+  );
+}
+
+function accountInitial(value: string): string {
+  const trimmed = value.trim();
+  return trimmed === "" ? "P" : trimmed.slice(0, 1).toUpperCase();
+}
+
+export function PlayerAccountDialog() {
+  const { t } = useTranslation("player");
+  const router = useRouter();
+  const profile = usePlayerSessionStore((state) => state.profile);
+  const clearBearerToken = usePlayerSessionStore((state) => state.clearBearerToken);
+  const [open, setOpen] = useState(false);
+  const [view, setView] = useState<AccountView>("profile");
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  const displayName =
+    profile?.nickname?.trim() ||
+    profile?.username?.trim() ||
+    (profile?.id != null ? t("player.fallback", { id: profile.id }) : t("account.loading"));
+  const isNative = profile?.auth_source === "lottery_native";
+
+  function resetPasswordForm() {
+    setCurrentPassword("");
+    setNewPassword("");
+    setConfirmPassword("");
+  }
+
+  function handleOpenChange(nextOpen: boolean) {
+    setOpen(nextOpen);
+    if (!nextOpen) {
+      setView("profile");
+      resetPasswordForm();
+    }
+  }
+
+  function handleLogout() {
+    handleOpenChange(false);
+    clearBearerToken();
+    router.replace("/login");
+  }
+
+  async function handlePasswordSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    if (currentPassword === "" || newPassword === "" || confirmPassword === "") {
+      toast.error(t("account.password.required"));
+      return;
+    }
+    if (validatePlayerLoginPassword(newPassword) === "too_short") {
+      toast.error(t("account.password.tooShort"));
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      toast.error(t("account.password.mismatch"));
+      return;
+    }
+    if (newPassword === currentPassword) {
+      toast.error(t("account.password.mustDiffer"));
+      return;
+    }
+
+    setSaving(true);
+    try {
+      await putPlayerPassword({
+        current_password: currentPassword,
+        password: newPassword,
+        password_confirmation: confirmPassword,
+      });
+      handleOpenChange(false);
+      clearBearerToken();
+      router.replace("/login?password=changed");
+    } catch (error) {
+      toast.error(
+        error instanceof LotteryApiBizError ? error.message : t("account.password.failed"),
+      );
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        disabled={profile === null}
+        aria-label={t("account.open")}
+        onClick={() => setOpen(true)}
+        className="max-w-[8.5rem] justify-start rounded-full bg-muted/40 px-1.5 sm:max-w-[11rem]"
+      >
+        <Avatar size="sm">
+          <AvatarFallback>{accountInitial(displayName)}</AvatarFallback>
+        </Avatar>
+        <span className="min-w-0 flex-1 truncate text-left">{displayName}</span>
+        <ChevronDown data-icon="inline-end" className="hidden sm:block" />
+      </Button>
+
+      <Dialog open={open} onOpenChange={handleOpenChange}>
+        <DialogContent className="sm:max-w-md">
+          {view === "profile" ? (
+            <>
+              <DialogHeader>
+                <DialogTitle>{t("account.title")}</DialogTitle>
+                <DialogDescription>{t("account.description")}</DialogDescription>
+              </DialogHeader>
+
+              <Card>
+                <CardHeader>
+                  <div className="flex items-center gap-3">
+                    <Avatar size="lg">
+                      <AvatarFallback>{accountInitial(displayName)}</AvatarFallback>
+                    </Avatar>
+                    <div className="min-w-0 flex-1">
+                      <CardTitle className="truncate">{displayName}</CardTitle>
+                      <CardDescription className="truncate">
+                        {profile?.username || profile?.site_player_id || "—"}
+                      </CardDescription>
+                    </div>
+                  </div>
+                  <div className="flex flex-wrap gap-2 pt-1">
+                    <Badge variant="secondary">
+                      {isNative ? t("account.auth.native") : t("account.auth.sso")}
+                    </Badge>
+                    <Badge variant="outline">
+                      {profile?.funding_mode === "credit"
+                        ? t("account.funding.credit")
+                        : t("account.funding.wallet")}
+                    </Badge>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <dl>
+                    <ProfileRow label={t("account.fields.username")} value={profile?.username || "—"} />
+                    <Separator />
+                    <ProfileRow label={t("account.fields.site")} value={profile?.site_code || "—"} />
+                    <Separator />
+                    <ProfileRow
+                      label={t("account.fields.playerId")}
+                      value={profile?.site_player_id || "—"}
+                    />
+                    <Separator />
+                    <ProfileRow
+                      label={t("account.fields.currency")}
+                      value={profile?.default_currency || "—"}
+                    />
+                  </dl>
+                </CardContent>
+              </Card>
+
+              {!isNative ? (
+                <p className="text-sm leading-relaxed text-muted-foreground">
+                  {t("account.ssoManaged")}
+                </p>
+              ) : null}
+
+              {isNative ? (
+                <DialogFooter>
+                  <Button type="button" variant="destructive" onClick={handleLogout}>
+                    <LogOut data-icon="inline-start" />
+                    {t("account.logout")}
+                  </Button>
+                  <Button type="button" variant="outline" onClick={() => setView("password")}>
+                    <KeyRound data-icon="inline-start" />
+                    {t("account.password.action")}
+                  </Button>
+                </DialogFooter>
+              ) : null}
+            </>
+          ) : (
+            <form onSubmit={handlePasswordSubmit}>
+              <div className="flex flex-col gap-4">
+                <DialogHeader>
+                  <DialogTitle>{t("account.password.title")}</DialogTitle>
+                  <DialogDescription>{t("account.password.description")}</DialogDescription>
+                </DialogHeader>
+                <FieldGroup>
+                  <Field>
+                    <FieldLabel htmlFor="player-current-password">
+                      {t("account.password.current")}
+                    </FieldLabel>
+                    <Input
+                      id="player-current-password"
+                      type="password"
+                      autoComplete="current-password"
+                      value={currentPassword}
+                      onChange={(event) => setCurrentPassword(event.target.value)}
+                    />
+                  </Field>
+                  <Field>
+                    <FieldLabel htmlFor="player-new-password">
+                      {t("account.password.new")}
+                    </FieldLabel>
+                    <Input
+                      id="player-new-password"
+                      type="password"
+                      autoComplete="new-password"
+                      value={newPassword}
+                      onChange={(event) => setNewPassword(event.target.value)}
+                    />
+                    <FieldDescription>{t("account.password.hint")}</FieldDescription>
+                  </Field>
+                  <Field>
+                    <FieldLabel htmlFor="player-confirm-password">
+                      {t("account.password.confirm")}
+                    </FieldLabel>
+                    <Input
+                      id="player-confirm-password"
+                      type="password"
+                      autoComplete="new-password"
+                      value={confirmPassword}
+                      onChange={(event) => setConfirmPassword(event.target.value)}
+                    />
+                  </Field>
+                </FieldGroup>
+                <DialogFooter>
+                  <Button type="submit" disabled={saving}>
+                    {saving ? <Loader2 data-icon="inline-start" className="animate-spin" /> : null}
+                    {saving ? t("account.password.saving") : t("account.password.submit")}
+                  </Button>
+                  <Button type="button" variant="outline" disabled={saving} onClick={() => setView("profile")}>
+                    {t("actions.cancel")}
+                  </Button>
+                </DialogFooter>
+              </div>
+            </form>
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
--- a/src/features/player/player-auth-gate.tsx
+++ b/src/features/player/player-auth-gate.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect, useRef, useSyncExternalStore, type ReactNode } from "react";
+
+import { usePlayerSessionStore } from "@/stores/player-session-store";
+
+function subscribeHydration(onStoreChange: () => void): () => void {
+  let cancelled = false;
+  queueMicrotask(() => {
+    if (!cancelled) onStoreChange();
+  });
+  return () => {
+    cancelled = true;
+  };
+}
+
+function getHydratedSnapshot(): boolean {
+  return true;
+}
+
+function getServerHydratedSnapshot(): boolean {
+  return false;
+}
+
+export function PlayerAuthGate({ children }: { children: ReactNode }): ReactNode {
+  const router = useRouter();
+  const bearerToken = usePlayerSessionStore((state) => state.bearerToken);
+  const hasHydrated = useSyncExternalStore(
+    subscribeHydration,
+    getHydratedSnapshot,
+    getServerHydratedSnapshot,
+  );
+  const redirectStarted = useRef(false);
+
+  useEffect(() => {
+    if (!hasHydrated || bearerToken || redirectStarted.current) return;
+    redirectStarted.current = true;
+    router.replace("/login");
+  }, [bearerToken, hasHydrated, router]);
+
+  if (!hasHydrated || !bearerToken) {
+    return (
+      <div
+        className="flex min-h-0 flex-1 items-center justify-center bg-white"
+        aria-hidden
+      >
+        <Loader2 className="size-8 animate-spin text-red-600" />
+      </div>
+    );
+  }
+
+  return children;
+}
--- a/src/features/player/player-login-form.tsx
+++ b/src/features/player/player-login-form.tsx
@@ -42,6 +42,10 @@ export function PlayerLoginForm({
 }: PlayerLoginFormProps) {
  const [showPassword, setShowPassword] = useState(false);
  const isDesktop = variant === "desktop";
+  const fieldIdPrefix = isDesktop ? "login-desktop" : "login-mobile";
+  const usernameId = `${fieldIdPrefix}-user`;
+  const passwordId = `${fieldIdPrefix}-pass`;
+  const captchaId = `${fieldIdPrefix}-captcha`;

  const inputClass =
    "h-10 rounded-xl border-gray-200 bg-white text-base shadow-none";
@@ -55,7 +59,7 @@ export function PlayerLoginForm({
      onSubmit={onSubmit}
    >
      <div className="space-y-1.5">
-        <Label htmlFor="login-user" className="text-gray-700">
+        <Label htmlFor={usernameId} className="text-gray-700">
          {t("login.username")}
        </Label>
        <div className="relative">
@@ -64,7 +68,7 @@ export function PlayerLoginForm({
            aria-hidden
          />
          <Input
-            id="login-user"
+            id={usernameId}
            value={username}
            onChange={(e) => onUsernameChange(e.target.value)}
            autoComplete="username"
@@ -76,7 +80,7 @@ export function PlayerLoginForm({
      </div>

      <div className="space-y-1.5">
-        <Label htmlFor="login-pass" className="text-gray-700">
+        <Label htmlFor={passwordId} className="text-gray-700">
          {t("login.password")}
        </Label>
        <div className="relative">
@@ -85,7 +89,7 @@ export function PlayerLoginForm({
            aria-hidden
          />
          <Input
-            id="login-pass"
+            id={passwordId}
            type={showPassword ? "text" : "password"}
            value={password}
            onChange={(e) => onPasswordChange(e.target.value)}
@@ -110,7 +114,7 @@ export function PlayerLoginForm({
      </div>

      <div className="space-y-1.5">
-        <Label htmlFor="login-captcha" className="text-gray-700">
+        <Label htmlFor={captchaId} className="text-gray-700">
          {t("login.captcha")}
        </Label>
        <div className="flex items-stretch gap-3">
@@ -120,7 +124,7 @@ export function PlayerLoginForm({
              aria-hidden
            />
            <Input
-              id="login-captcha"
+              id={captchaId}
              name="captcha"
              autoComplete="off"
              value={captchaCode}
@@ -164,4 +168,4 @@ export function PlayerLoginForm({
      </Button>
    </form>
  );
-}
+}
--- a/src/features/player/player-login-screen.tsx
+++ b/src/features/player/player-login-screen.tsx
@@ -2,8 +2,8 @@

 import { useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";

+import { useI18nHydrated } from "@/components/i18n-hydration-provider";
 import { useHydrationSafeEntryT } from "@/i18n/hydration-t";
 import { toast } from "sonner";

@@ -32,7 +32,7 @@ function stripSearchParamFromBrowserUrl(name: string): void {
 }

 export function PlayerLoginScreen(): React.ReactElement {
-  const { t: tErrors } = useTranslation("entry");
+  const i18nHydrated = useI18nHydrated();
  const t = useHydrationSafeEntryT();
  const tRef = useRef(t);
  useEffect(() => {
@@ -43,7 +43,9 @@ export function PlayerLoginScreen(): React.ReactElement {
  const setBearerToken = usePlayerSessionStore((s) => s.setBearerToken);
  const setProfile = usePlayerSessionStore((s) => s.setProfile);
  const clearBearerToken = usePlayerSessionStore((s) => s.clearBearerToken);
-  const sessionExpiredHandled = useRef(false);
+  const sessionStatusHandled = useRef(false);
+  const passwordChangedHandled = useRef(false);
+  const captchaInitialized = useRef(false);

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
@@ -70,29 +72,37 @@ export function PlayerLoginScreen(): React.ReactElement {
  }, []);

  useEffect(() => {
-    let cancelled = false;
-
-    void (async () => {
-      if (cancelled) {
-        return;
-      }
-      await loadCaptcha();
-    })();
-
-    return () => {
-      cancelled = true;
-    };
+    if (captchaInitialized.current) return;
+    captchaInitialized.current = true;
+    void loadCaptcha();
  }, [loadCaptcha]);

  useEffect(() => {
-    if (sessionExpiredHandled.current) return;
-    if (searchParams.get("session") !== "expired") return;
+    if (!i18nHydrated) return;
+    if (sessionStatusHandled.current) return;
+    const sessionStatus = searchParams.get("session");
+    if (sessionStatus !== "expired" && sessionStatus !== "replaced") return;

-    sessionExpiredHandled.current = true;
+    sessionStatusHandled.current = true;
    clearBearerToken();
-    toast.error(tErrors("errors.sessionExpired"));
+    toast.error(
+      t(
+        sessionStatus === "replaced"
+          ? "errors.sessionReplaced"
+          : "errors.sessionExpired",
+      ),
+    );
    stripSearchParamFromBrowserUrl("session");
-  }, [clearBearerToken, searchParams, tErrors]);
+  }, [clearBearerToken, i18nHydrated, searchParams, t]);
+
+  useEffect(() => {
+    if (passwordChangedHandled.current) return;
+    if (searchParams.get("password") !== "changed") return;
+
+    passwordChangedHandled.current = true;
+    toast.success(t("login.passwordChanged"));
+    stripSearchParamFromBrowserUrl("password");
+  }, [searchParams, t]);

  async function handleSubmit(event: React.FormEvent): Promise<void> {
    event.preventDefault();
@@ -108,7 +118,7 @@ export function PlayerLoginScreen(): React.ReactElement {
    }

    if (!captchaCode.trim()) {
-      toast.error(t("login.captchaRequired"));
+      toast.error(t("login.captchaCodeRequired"));
      return;
    }

@@ -184,4 +194,4 @@ export function PlayerLoginScreen(): React.ReactElement {
      </div>
    </>
  );
-}
+}
--- a/src/features/results/draw-result-detail-screen.tsx
+++ b/src/features/results/draw-result-detail-screen.tsx
@@ -21,6 +21,7 @@ import { DrawWinningCheckPanel } from "@/features/results/draw-winning-check-pan
 import { JackpotResultsStrip } from "@/features/results/jackpot-results-strip";
 import { TwentyThreeResultsGrid } from "@/features/results/twenty-three-results-grid";
 import { useCurrencyCatalog } from "@/hooks/use-currency-catalog";
+import { useAsyncEffect } from "@/hooks/use-async-effect";
 import { getPlayerBearerTokenPayload } from "@/lib/lottery-auth";
 import { formatPlayerInstant } from "@/lib/player-datetime";
 import { formatMinorAsCurrency } from "@/lib/money";
@@ -69,10 +70,8 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
    }
  }, [activeCurrency, drawNo, t]);

-  useEffect(() => {
-    queueMicrotask(() => {
-      void load();
-    });
+  useAsyncEffect(() => {
+    void load();
  }, [load]);

  useEffect(() => {
--- a/src/features/results/draw-results-list-screen.tsx
+++ b/src/features/results/draw-results-list-screen.tsx
@@ -31,6 +31,7 @@ import { PlayerListPagination } from "@/components/layout/player-list-pagination
 import { JackpotResultsStrip } from "@/features/results/jackpot-results-strip";

 import { useCurrencyCatalog } from "@/hooks/use-currency-catalog";
+import { useAsyncEffect } from "@/hooks/use-async-effect";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { formatPlayerInstant } from "@/lib/player-datetime";
 import { useActivePlayerCurrency } from "@/hooks/use-active-player-currency";
@@ -100,10 +101,8 @@ export function DrawResultsListScreen() {
    }
  }, [activeCurrency, businessDate, t]);

-  useEffect(() => {
-    queueMicrotask(() => {
-      void fetchList(1, false);
-    });
+  useAsyncEffect(() => {
+    void fetchList(1, false);
  }, [fetchList]);

  useEffect(() => {
@@ -258,7 +257,7 @@ export function DrawResultsListScreen() {
              </Button>
            </div>
          ) : listRows.length === 0 ? (
-            <div className="rounded-xl border border-dashed border-[#dce7f7] bg-[#f8fbff] px-3 py-8 text-center text-sm text-slate-500 lg:rounded-none lg:border-0 lg:bg-white lg:py-12">
+            <div className="player-pc-empty flex items-center justify-center rounded-xl border border-dashed border-[#dce7f7] bg-[#f8fbff] px-3 py-8 text-center text-sm text-slate-500 lg:rounded-none lg:border-0 lg:bg-white lg:py-12">
              {t("results.empty")}
            </div>
          ) : (
@@ -358,18 +357,18 @@ export function DrawResultsListScreen() {
                <Table className="table-fixed">
                  <TableHeader>
                    <TableRow className="border-[#eef3fa] hover:bg-transparent">
-                      <TableHead className="h-11 w-[30%] bg-[#f8fbff] px-5 text-xs font-bold text-[#59739f]">
+                      <TableHead className="player-pc-table-head h-12 w-[30%] bg-[#f8fbff] px-5 font-bold text-[#59739f]">
                        {t("results.detailTitle")}
                      </TableHead>
                      {RESULTS_TOP_PRIZE_KEYS.map((tier) => (
                        <TableHead
                          key={tier}
-                          className="h-11 bg-[#f8fbff] px-3 text-center text-xs font-bold text-[#59739f]"
+                          className="player-pc-table-head h-12 bg-[#f8fbff] px-3 text-center font-bold text-[#59739f]"
                        >
                          {t(resultsPrizeLabelKey(tier))}
                        </TableHead>
                      ))}
-                      <TableHead className="h-11 w-12 bg-[#f8fbff] px-3" aria-hidden />
+                      <TableHead className="h-12 w-12 bg-[#f8fbff] px-3" aria-hidden />
                    </TableRow>
                  </TableHeader>
                  <TableBody>
@@ -391,7 +390,7 @@ export function DrawResultsListScreen() {
                            }
                          }}
                        >
-                          <TableCell className="px-5 py-3 align-middle">
+                          <TableCell className="px-5 py-3.5 align-middle">
                            <div className="block min-w-0">
                              <div className="flex min-w-0 items-center gap-2">
                                <p className="truncate font-mono text-sm font-bold text-[#0b3f96]">
@@ -417,13 +416,13 @@ export function DrawResultsListScreen() {
                            </div>
                          </TableCell>
                          {RESULTS_TOP_PRIZE_KEYS.map((tier) => (
-                            <TableCell key={tier} className="px-3 py-3 text-center align-middle">
+                            <TableCell key={tier} className="px-3 py-3.5 text-center align-middle">
                              <span className="font-mono text-base font-bold tabular-nums text-[#e5002c]">
                                {row.results[tier]}
                              </span>
                            </TableCell>
                          ))}
-                          <TableCell className="px-3 py-3 text-right align-middle">
+                          <TableCell className="px-3 py-3.5 text-right align-middle">
                            <span className="inline-flex size-8 items-center justify-center rounded-lg text-[#7890b8] transition-colors group-hover:bg-[#eaf2ff] group-hover:text-[#0b56b7]">
                              <ChevronRight className="size-4" aria-hidden />
                            </span>
--- a/src/features/results/draw-winning-check-panel.tsx
+++ b/src/features/results/draw-winning-check-panel.tsx
@@ -5,7 +5,7 @@ import { BriefcaseBusiness, CheckCircle2, ChevronDown, Clock3, RefreshCw, XIcon
 import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";

-import { getTicketDrawMyMatch, getTicketItems } from "@/api/ticket-items";
+import { getTicketItems } from "@/api/ticket-items";
 import { Button } from "@/components/ui/button";
 import {
  Dialog,
@@ -30,6 +30,27 @@ type WinningCheckResult = {
  tickets: TicketItemListRow[];
 };

+function matchForTickets(
+  drawNo: string,
+  tickets: TicketItemListRow[],
+): TicketDrawMyMatchPayload {
+  const winningTickets = tickets.filter(
+    (ticket) => ticket.win_amount > 0 || ticket.jackpot_win_amount > 0,
+  );
+
+  return {
+    draw_no: drawNo,
+    hit_numbers_4d: [],
+    total_win_minor: tickets.reduce((sum, ticket) => sum + ticket.win_amount, 0),
+    total_jackpot_win_minor: tickets.reduce(
+      (sum, ticket) => sum + ticket.jackpot_win_amount,
+      0,
+    ),
+    winning_ticket_count: winningTickets.length,
+    has_bets: tickets.length > 0,
+  };
+}
+
 export type DrawWinningCheckPanelProps = {
  drawNo: string;
  businessDate?: string | null;
@@ -66,15 +87,15 @@ export function DrawWinningCheckPanel({
    setLoading(true);
    setError(null);
    try {
-      const [match, tickets] = await Promise.all([
-        getTicketDrawMyMatch(drawNo),
-        getTicketItems({
-          draw_no: drawNo,
-          number: normalizedTicketNo,
-          per_page: 10,
-          page: 1,
-        }),
-      ]);
+      const isTicketNumber = /^TK\d+$/i.test(normalizedTicketNo);
+      const ticketResult = await getTicketItems({
+        draw_no: drawNo,
+        ticket_no: isTicketNumber ? normalizedTicketNo.toUpperCase() : undefined,
+        number: isTicketNumber ? undefined : normalizedTicketNo,
+        per_page: 50,
+        page: 1,
+      });
+      const match = matchForTickets(drawNo, ticketResult.items);
      const next = {
        draw: {
          draw_id: "",
@@ -88,7 +109,7 @@ export function DrawWinningCheckPanel({
          result_items: [],
        } satisfies DrawResultListItem,
        match,
-        tickets: tickets.items,
+        tickets: ticketResult.items,
      };
      setResult(next);
      setRecent((current) =>
@@ -331,7 +352,11 @@ function WinningResultDialog({
              className="h-12 rounded-xl bg-[#07459f] text-base font-black text-white hover:bg-[#063b88]"
              render={
                <Link
-                  href={`/orders?draw_no=${encodeURIComponent(data.draw.draw_no)}&number=${encodeURIComponent(query)}`}
+                  href={
+                    /^TK\d+$/i.test(query) && firstTicket
+                      ? `/orders/${encodeURIComponent(firstTicket.ticket_no)}`
+                      : `/orders?draw_no=${encodeURIComponent(data.draw.draw_no)}&number=${encodeURIComponent(query)}`
+                  }
                />
              }
            >
@@ -351,4 +376,4 @@ function WinningResultDialog({
      </DialogContent>
    </Dialog>
  );
-}
+}
--- a/src/features/rules/play-rules-screen.tsx
+++ b/src/features/rules/play-rules-screen.tsx
@@ -1,36 +1,56 @@
 "use client";

-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Loader2 } from "lucide-react";
+import { BookOpenText, Loader2, TriangleAlert } from "lucide-react";

 import { getPublicSettings } from "@/api";
 import { PlayerPanel } from "@/components/layout/player-panel";
 import { resolvePlayRulesHtml } from "@/lib/play-rules-html";
 import { Card, CardContent } from "@/components/ui/card";
+import { useAsyncEffect } from "@/hooks/use-async-effect";
+
+const DEFAULT_RULE_SECTIONS = [
+  ["dimensions", ["d4", "d3", "d2"]],
+  ["bigSmall", ["big", "small"]],
+  ["positions", ["d4", "d3", "d2"]],
+  ["box", ["straight", "box", "ibox", "mbox", "roll", "half"]],
+  ["attributes", ["headTail", "oddEven", "digitSize"]],
+  ["wallet", ["rebate", "jackpot", "close", "soldOut"]],
+] as const;

 export function PlayRulesScreen() {
  const { t, i18n } = useTranslation("player");
  const [htmlContent, setHtmlContent] = useState<string | null>(null);
+  const [contentState, setContentState] = useState<"html" | "empty" | "error">("empty");
  const [loading, setLoading] = useState(true);

-  useEffect(() => {
-    async function loadRules() {
+  useAsyncEffect(() => {
+    let cancelled = false;
+    void (async () => {
      try {
        const res = await getPublicSettings("frontend");
        const html = resolvePlayRulesHtml(res.items, i18n.language);
+        if (cancelled) return;
        if (html) {
          setHtmlContent(html);
+          setContentState("html");
        } else {
-          setHtmlContent(`<div style="text-align:center;padding:2rem;color:#64748b;">${t("rules.empty", { defaultValue: "暂无玩法规则说明" })}</div>`);
+          setHtmlContent(null);
+          setContentState("empty");
        }
      } catch {
-        setHtmlContent(`<div style="text-align:center;padding:2rem;color:#64748b;">${t("rules.loadFailed", { defaultValue: "规则加载失败" })}</div>`);
+        if (cancelled) return;
+        setHtmlContent(null);
+        setContentState("error");
      } finally {
-        setLoading(false);
+        if (!cancelled) setLoading(false);
      }
-    }
-    void loadRules();
+    })();
+
+    return () => {
+      cancelled = true;
+    };
  }, [i18n.language, t]);

  return (
@@ -39,18 +59,69 @@ export function PlayRulesScreen() {
      backHref="/hall"
      className="bg-[#f7f9fd]"
    >
-      <div className="space-y-3">
-        <Card className="border-[#dbe7fb] bg-white shadow-sm overflow-hidden min-h-[300px]">
-          <CardContent className="p-4">
+      <div className="mx-auto w-full max-w-5xl space-y-3">
+        <Card className="min-h-[300px] overflow-hidden border-[#dbe7fb] bg-white shadow-[0_8px_24px_rgba(15,23,42,0.05)] lg:min-h-[24rem]">
+          <CardContent className="p-4 lg:p-8">
            {loading ? (
-              <div className="flex h-[200px] items-center justify-center">
+              <div className="flex min-h-[18rem] items-center justify-center">
                <Loader2 className="size-6 animate-spin text-slate-400" />
              </div>
-            ) : (
+            ) : contentState === "html" ? (
              <div
-                className="prose prose-sm max-w-none text-slate-700"
+                className="prose prose-sm max-w-none text-slate-700 lg:prose-base lg:leading-7"
                dangerouslySetInnerHTML={{ __html: htmlContent || "" }}
              />
+            ) : (
+              <div className="space-y-5">
+                {contentState === "error" ? (
+                  <div className="flex items-center gap-2 rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm font-semibold text-amber-800">
+                    <TriangleAlert className="size-4 shrink-0" aria-hidden />
+                    {t("rules.loadFailed", { defaultValue: "规则加载失败" })}
+                  </div>
+                ) : null}
+
+                <div className="rounded-2xl border border-[#dbe7fb] bg-[#f6f9ff] p-4 lg:p-5">
+                  <div className="flex items-start gap-3">
+                    <span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-white text-[#2d63e2] shadow-sm">
+                      <BookOpenText className="size-5" aria-hidden />
+                    </span>
+                    <div>
+                      <h2 className="font-black text-[#0b3f96]">
+                        {t("rules.quick.title")}
+                      </h2>
+                      <p className="mt-1 text-sm leading-6 text-slate-600">
+                        {t("rules.quick.description")}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="grid gap-4 lg:grid-cols-2">
+                  {DEFAULT_RULE_SECTIONS.map(([section, items]) => (
+                    <section
+                      key={section}
+                      className="rounded-2xl border border-[#e5edf8] bg-white p-4 shadow-[0_6px_20px_rgba(15,23,42,0.04)] lg:p-5"
+                    >
+                      <h2 className="font-black text-[#0b3f96]">
+                        {t(`rules.sections.${section}.title`)}
+                      </h2>
+                      <ul className="mt-3 space-y-2.5 text-sm leading-6 text-slate-600">
+                        {items.map((item) => (
+                          <li key={item} className="flex gap-2">
+                            <span className="mt-2 size-1.5 shrink-0 rounded-full bg-[#e5002c]" aria-hidden />
+                            <span>{t(`rules.sections.${section}.${item}`)}</span>
+                          </li>
+                        ))}
+                      </ul>
+                    </section>
+                  ))}
+                </div>
+
+                <div className="space-y-1 rounded-2xl border border-[#e5edf8] bg-[#f8fbff] p-4 text-xs leading-5 text-slate-500 lg:p-5">
+                  <p>{t("rules.footer.config")}</p>
+                  <p>{t("rules.footer.phaseTwo")}</p>
+                </div>
+              </div>
            )}
          </CardContent>
        </Card>
--- a/src/features/wallet/wallet-logs-block.tsx
+++ b/src/features/wallet/wallet-logs-block.tsx
@@ -1,5 +1,7 @@
 "use client";

+import { ChevronDown } from "lucide-react";
+import Link from "next/link";
 import { useMemo, type Ref } from "react";
 import { useTranslation } from "react-i18next";

@@ -27,7 +29,6 @@ export const CREDIT_FLOW_FILTERS: { value: string; labelKey: string }[] = [
  { value: "", labelKey: "wallet.creditFlow.all" },
  { value: "bet", labelKey: "wallet.creditFlow.bet" },
  { value: "game_settlement", labelKey: "wallet.creditFlow.game_settlement" },
-  { value: "rebate", labelKey: "wallet.creditFlow.rebate" },
  { value: "bill_settlement", labelKey: "wallet.creditFlow.bill_settlement" },
 ];

@@ -40,8 +41,8 @@ const FLOW_LABEL_FALLBACKS: Record<string, string> = {
  "wallet.flow.refund": "退款",
  "wallet.flow.reversal": "冲正",
  "wallet.creditFlow.all": "全部",
-  "wallet.creditFlow.bet": "下注冻结",
-  "wallet.creditFlow.game_settlement": "开奖结算",
+  "wallet.creditFlow.bet": "下注",
+  "wallet.creditFlow.game_settlement": "开奖结果",
  "wallet.creditFlow.rebate": "账期回水",
  "wallet.creditFlow.credit_release": "释额",
  "wallet.creditFlow.bill_settlement": "账期收付",
@@ -135,7 +136,7 @@ export function WalletLogsBlock({
  const resolvedTitle =
    title
    ?? (creditMode
-      ? t("wallet.creditFlowsTitle", { defaultValue: "信用流水" })
+      ? t("wallet.creditFlowsTitle", { defaultValue: "额度与结算记录" })
      : t("wallet.flowsTitle", { defaultValue: "钱包流水" }));
  const filters = useMemo(() => {
    const source = creditMode ? CREDIT_FLOW_FILTERS : WALLET_FLOW_FILTERS;
@@ -189,7 +190,7 @@ export function WalletLogsBlock({
            </p>
            <div className={logsLoading ? "opacity-60" : undefined}>
              {logs.items.length === 0 ? (
-                <div className="rounded-lg border border-dashed py-8 text-center text-sm text-muted-foreground lg:py-12">
+                <div className="player-pc-empty flex items-center justify-center rounded-lg border border-dashed py-8 text-center text-sm text-muted-foreground lg:py-12">
                  {t(creditMode ? "wallet.emptyCreditLogs" : "wallet.emptyLogs", {
                    defaultValue: creditMode ? "暂无信用流水" : "暂无流水",
                  })}
@@ -197,35 +198,46 @@ export function WalletLogsBlock({
              ) : (
                <>
                  <div className="lg:overflow-hidden lg:rounded-xl lg:border lg:border-[#e5edf8] lg:bg-white lg:shadow-[0_8px_24px_rgba(15,23,42,0.05)]">
-                    <div className="hidden lg:grid lg:grid-cols-[minmax(10rem,1.2fr)_minmax(9rem,1fr)_minmax(8rem,0.9fr)_minmax(7rem,0.8fr)_minmax(7rem,0.8fr)_minmax(6rem,0.7fr)] lg:items-center lg:gap-3 lg:border-b lg:border-[#e9eff8] lg:bg-[#f8fbff] lg:px-5 lg:py-3">
-                      <p className="text-xs font-bold text-[#59739f]">
+                    <div className={creditMode
+                      ? "hidden lg:grid lg:grid-cols-[minmax(10rem,1.2fr)_minmax(9rem,1fr)_minmax(10rem,1fr)_minmax(8rem,0.8fr)_minmax(8rem,0.8fr)] lg:items-center lg:gap-3 lg:border-b lg:border-[#e9eff8] lg:bg-[#f8fbff] lg:px-5 lg:py-3"
+                      : "hidden lg:grid lg:grid-cols-[minmax(10rem,1.2fr)_minmax(9rem,1fr)_minmax(8rem,0.9fr)_minmax(7rem,0.8fr)_minmax(7rem,0.8fr)_minmax(6rem,0.7fr)] lg:items-center lg:gap-3 lg:border-b lg:border-[#e9eff8] lg:bg-[#f8fbff] lg:px-5 lg:py-3"}
+                    >
+                      <p className="player-pc-table-head font-bold text-[#59739f]">
                        {t("wallet.logType", { defaultValue: "类型" })}
                      </p>
-                      <p className="text-xs font-bold text-[#59739f]">
+                      <p className="player-pc-table-head font-bold text-[#59739f]">
                        {t("wallet.logTime", { defaultValue: "时间" })}
                      </p>
-                      <p className="text-xs font-bold text-[#59739f]">
+                      <p className="player-pc-table-head font-bold text-[#59739f]">
                        {t("wallet.logRef", { defaultValue: "关联单号" })}
                      </p>
-                      <p className="text-right text-xs font-bold text-[#59739f]">
+                      <p className="player-pc-table-head text-right font-bold text-[#59739f]">
                        {t("wallet.logAmount", { defaultValue: "金额" })}
                      </p>
-                      <p className="text-right text-xs font-bold text-[#59739f]">
+                      <p className="player-pc-table-head text-right font-bold text-[#59739f]">
                        {creditMode
                          ? t("wallet.creditAvailableAfter")
                          : t("wallet.balanceAfter")}
                      </p>
-                      <p className="text-right text-xs font-bold text-[#59739f]">
-                        {t("orders.status")}
-                      </p>
+                      {!creditMode ? (
+                        <p className="player-pc-table-head text-right font-bold text-[#59739f]">
+                          {t("orders.status")}
+                        </p>
+                      ) : null}
                    </div>
                    <ul className="space-y-2 lg:space-y-0">
-                      {logs.items.map((row) => (
+                      {logs.items.map((row) => creditMode ? (
+                        <CreditActivityRow
+                          key={row.log_id}
+                          item={row}
+                          currency={currency}
+                          settlementTimeZone={settlementTimeZone}
+                        />
+                      ) : (
                        <LogRow
                          key={row.log_id}
                          item={row}
                          currency={currency}
-                          creditMode={creditMode}
                          settlementTimeZone={settlementTimeZone}
                        />
                      ))}
@@ -272,6 +284,158 @@ export function WalletLogsBlock({
  );
 }

+function creditActivityLabel(
+  item: WalletLogItem,
+  t: (key: string, options?: { defaultValue?: string }) => string,
+): string {
+  const labels: Record<string, { key: string; fallback: string }> = {
+    bet_pending: { key: "wallet.activity.bet", fallback: "下注" },
+    settled_loss: { key: "wallet.activity.settledLoss", fallback: "未中奖" },
+    settled_win: { key: "wallet.activity.settledWin", fallback: "中奖" },
+    settled_even: { key: "wallet.activity.result", fallback: "开奖结果" },
+    bet_refund: { key: "wallet.activity.refunded", fallback: "已退款" },
+    period_paid: { key: "wallet.activity.periodPaid", fallback: "已付款" },
+    period_received: { key: "wallet.activity.periodReceived", fallback: "已收款" },
+  };
+  const resolved = labels[item.biz_type];
+  if (!resolved) {
+    return t("wallet.activity.result", { defaultValue: "开奖结果" });
+  }
+
+  return t(resolved.key, { defaultValue: resolved.fallback });
+}
+
+function CreditActivityRow({
+  item,
+  currency,
+  settlementTimeZone,
+}: {
+  item: WalletLogItem;
+  currency: string;
+  settlementTimeZone?: string;
+}) {
+  const { t } = useTranslation("player");
+  const ccy = item.currency_code || currency;
+  const amount = Number(item.net_amount ?? item.amount ?? 0);
+  const amountTone = amount > 0
+    ? "text-emerald-700"
+    : amount < 0
+      ? "text-[#e5002c]"
+      : "text-[#32518d]";
+  const amountLabel = amount === 0
+    ? formatMinorAsCurrency(0, ccy)
+    : `${amount > 0 ? "+" : "−"}${formatMinorAsCurrency(Math.abs(amount), ccy)}`;
+  const timeLabel = settlementTimeZone
+    ? formatLotteryInstantInTimeZone(item.created_at, settlementTimeZone)
+    : formatPlayerInstant(item.created_at);
+  const balanceLabel = item.balance_after == null
+    ? "—"
+    : formatMinorAsCurrency(item.balance_after, ccy);
+  const refLabel = item.draw_no
+    ? `${item.draw_no}${item.order_no ? ` · ${item.order_no}` : ""}`
+    : item.order_no ?? (item.settlement_bill_id ? `#${item.settlement_bill_id}` : "—");
+  const detailHref = item.ticket_no
+    ? `/orders/${encodeURIComponent(item.ticket_no)}`
+    : item.draw_no
+      ? `/orders?draw_no=${encodeURIComponent(item.draw_no)}`
+      : null;
+  const showStatus = item.activity_status === "pending" || item.activity_status === "reversed";
+  const statusLabel = item.activity_status === "reversed"
+    ? t("wallet.activity.reversed", { defaultValue: "已冲正" })
+    : item.activity_kind === "bet"
+      ? t("wallet.activity.awaitingDraw", { defaultValue: "待开奖" })
+      : t("wallet.activity.processing", { defaultValue: "处理中" });
+
+  return (
+    <li className="rounded-2xl border border-[#e1eaf6] bg-white px-3 py-3 text-sm shadow-[0_10px_28px_rgba(15,23,42,0.06)] lg:grid lg:grid-cols-[minmax(10rem,1.2fr)_minmax(9rem,1fr)_minmax(10rem,1fr)_minmax(8rem,0.8fr)_minmax(8rem,0.8fr)] lg:items-center lg:gap-3 lg:rounded-none lg:border-x-0 lg:border-t-0 lg:border-b-[#edf2f8] lg:px-5 lg:py-4 lg:shadow-none lg:last:border-b-0 lg:hover:bg-[#fbfdff]">
+      <div className="flex items-start justify-between gap-3 lg:contents">
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <p className="text-base font-black leading-tight text-[#101a33] lg:text-sm">
+              {creditActivityLabel(item, t)}
+            </p>
+            {showStatus ? (
+              <span className={item.activity_status === "reversed"
+                ? "inline-flex rounded-full border border-slate-200 bg-slate-50 px-2 py-0.5 text-[10px] font-black text-slate-600"
+                : "inline-flex rounded-full border border-blue-200 bg-blue-50 px-2 py-0.5 text-[10px] font-black text-blue-700"}
+              >
+                {statusLabel}
+              </span>
+            ) : null}
+          </div>
+          <p className="mt-1.5 text-xs font-medium text-slate-500 lg:hidden">{timeLabel}</p>
+          <p className="mt-1 truncate font-mono text-[11px] text-slate-400 lg:hidden">{refLabel}</p>
+        </div>
+
+        <p className={`shrink-0 text-right text-lg font-black tabular-nums lg:hidden ${amountTone}`}>
+          {amountLabel}
+        </p>
+      </div>
+
+      <p className="hidden text-sm text-slate-600 lg:block">{timeLabel}</p>
+      <div className="hidden min-w-0 lg:block">
+        {detailHref ? (
+          <Link className="block truncate font-mono text-xs text-[#32518d] hover:underline" href={detailHref}>
+            {refLabel}
+          </Link>
+        ) : (
+          <p className="truncate font-mono text-xs text-slate-400">{refLabel}</p>
+        )}
+      </div>
+      <p className={`hidden text-right text-sm font-black tabular-nums lg:block ${amountTone}`}>
+        {amountLabel}
+      </p>
+      <p className="hidden text-right font-mono text-sm font-black tabular-nums text-[#32518d] lg:block">
+        {balanceLabel}
+      </p>
+
+      <details className="group mt-3 rounded-xl bg-[#f8fbff] lg:col-span-5 lg:mt-0">
+        <summary className="flex min-h-9 cursor-pointer list-none items-center justify-between gap-2 px-3 py-2 text-xs font-bold text-[#32518d] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2d63e2] [&::-webkit-details-marker]:hidden">
+          {t("wallet.activity.details", { defaultValue: "查看明细" })}
+          <ChevronDown className="size-4 transition-transform group-open:rotate-180" aria-hidden />
+        </summary>
+        <div className="grid grid-cols-2 gap-x-4 gap-y-2 border-t border-[#e1eaf6] px-3 py-3 text-xs lg:grid-cols-4">
+          {Number(item.stake_amount ?? 0) > 0 ? (
+            <div>
+              <p className="font-semibold text-slate-500">{t("wallet.activity.stake", { defaultValue: "下注金额" })}</p>
+              <p className="mt-1 font-mono font-black text-[#101a33]">{formatMinorAsCurrency(item.stake_amount ?? 0, ccy)}</p>
+            </div>
+          ) : null}
+          {Number(item.win_amount ?? 0) > 0 ? (
+            <div>
+              <p className="font-semibold text-slate-500">{t("wallet.activity.win", { defaultValue: "中奖金额" })}</p>
+              <p className="mt-1 font-mono font-black text-emerald-700">+{formatMinorAsCurrency(item.win_amount ?? 0, ccy)}</p>
+            </div>
+          ) : null}
+          {Number(item.rebate_amount ?? 0) > 0 ? (
+            <div>
+              <p className="font-semibold text-slate-500">{t("wallet.activity.rebate", { defaultValue: "回水" })}</p>
+              <p className="mt-1 font-mono font-black text-emerald-700">+{formatMinorAsCurrency(item.rebate_amount ?? 0, ccy)}</p>
+            </div>
+          ) : null}
+          <div>
+            <p className="font-semibold text-slate-500">{t("wallet.creditAvailableAfter", { defaultValue: "变更后可用额度" })}</p>
+            <p className="mt-1 font-mono font-black text-[#32518d]">{balanceLabel}</p>
+          </div>
+          {Number(item.ticket_count ?? 0) > 0 ? (
+            <div>
+              <p className="font-semibold text-slate-500">{t("wallet.activity.ticketCount", { defaultValue: "注单数量" })}</p>
+              <p className="mt-1 font-black text-[#101a33]">{t("wallet.activity.ticketCountValue", { defaultValue: "{{count}}项", count: item.ticket_count })}</p>
+            </div>
+          ) : null}
+          {detailHref ? (
+            <div className="col-span-2 flex items-end justify-end lg:col-span-1">
+              <Link className="font-bold text-[#2d63e2] hover:underline" href={detailHref}>
+                {t("wallet.activity.viewOrder", { defaultValue: "查看注单" })}
+              </Link>
+            </div>
+          ) : null}
+        </div>
+      </details>
+    </li>
+  );
+}
+
 export function LogRow({
  item,
  currency,
--- a/src/features/wallet/wallet-screen.tsx
+++ b/src/features/wallet/wallet-screen.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { ArrowDownLeft, ArrowUpRight, Wallet } from "lucide-react";
+import { ArrowDownLeft, ArrowUpRight, ChevronDown, Wallet } from "lucide-react";
 import Image from "next/image";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -18,8 +18,9 @@ import { PlayerMoneyDisplay } from "@/components/player-money-display";
 import { WalletLogsBlock } from "@/features/wallet/wallet-logs-block";
 import { useActivePlayerCurrency } from "@/hooks/use-active-player-currency";
 import { useIsMobile } from "@/hooks/use-mobile";
+import { useAsyncEffect } from "@/hooks/use-async-effect";
 import { isCreditFundingPlayer } from "@/lib/player-funding-mode";
-import { formatMinorAsCurrency } from "@/lib/money";
+import { formatMinorAmount, formatMinorAsCurrency } from "@/lib/money";
 import { formatLotteryInstantInTimeZone, formatPlayerInstant } from "@/lib/player-datetime";
 import { PLAYER_CURRENCY_CHANGE_EVENT } from "@/lib/player-currency-preference";
 import { formatWalletClientError } from "@/lib/wallet-api-error";
@@ -101,91 +102,86 @@ function CreditSettlementBillsBlock({
  const netPending = Number(summary?.net_pending ?? 0);
  const pendingCount = Number(summary?.pending_count ?? 0);
  const netDirection = netPending >= 0 ? "receivable" : "payable";
+  const hasBills = (data?.items.length ?? 0) > 0;

  return (
    <section className="flex h-full flex-col rounded-2xl border border-[#dce7f7] bg-white px-3 py-3 shadow-[0_10px_28px_rgba(15,23,42,0.06)] lg:px-4 lg:py-4">
      <div className="flex shrink-0 items-start justify-between gap-3">
        <div className="min-w-0">
          <h2 className="text-sm font-black text-[#0b3f96] lg:text-base">
-            {t("wallet.settlementTitle", { defaultValue: "我的账期账单" })}
+            {t("wallet.settlementTitle", { defaultValue: "账期结算" })}
          </h2>
          <p className="mt-1 text-xs text-slate-500 lg:line-clamp-2">
-            {t("wallet.settlementHint", { defaultValue: "只显示未结清账单，中奖超出授信的部分在这里结算。" })}
+            {t("wallet.settlementHint", { defaultValue: "查看当前需要收取或支付的金额。" })}
          </p>
        </div>
-        <span className="shrink-0 rounded-full bg-[#f1f6ff] px-2.5 py-1 text-xs font-black text-[#32518d]">
-          {t("wallet.settlementPendingCount", { defaultValue: "{{count}}笔", count: pendingCount })}
-        </span>
-      </div>
-
-      <div className="mt-3 grid shrink-0 grid-cols-2 gap-2">
-        <div className="rounded-xl bg-emerald-50 px-3 py-2">
-          <p className="text-xs font-bold text-emerald-700">
-            {t("wallet.pendingReceivable", { defaultValue: "待收" })}
-          </p>
-          <p className="mt-1 font-mono text-sm font-black tabular-nums text-emerald-700">
-            {formatMinorAsCurrency(summary?.pending_receivable ?? 0, currency)}
-          </p>
-        </div>
-        <div className="rounded-xl bg-red-50 px-3 py-2">
-          <p className="text-xs font-bold text-red-700">
-            {t("wallet.pendingPayable", { defaultValue: "待付" })}
-          </p>
-          <p className="mt-1 font-mono text-sm font-black tabular-nums text-red-700">
-            {formatMinorAsCurrency(summary?.pending_payable ?? 0, currency)}
-          </p>
-        </div>
-        <div className="col-span-2 rounded-xl bg-[#f8fbff] px-3 py-2 text-xs">
-          <span className="font-semibold text-slate-500">
-            {netDirection === "receivable"
-              ? t("wallet.netReceivable", { defaultValue: "净待收" })
-              : t("wallet.netPayable", { defaultValue: "净待付" })}
+        {pendingCount > 0 ? (
+          <span className="shrink-0 rounded-full bg-[#f1f6ff] px-2.5 py-1 text-xs font-black text-[#32518d]">
+            {t("wallet.settlementPendingCount", { defaultValue: "{{count}}笔", count: pendingCount })}
          </span>
-          <span className={netDirection === "receivable" ? "ml-2 font-mono font-black text-emerald-700" : "ml-2 font-mono font-black text-red-700"}>
-            {formatMinorAsCurrency(Math.abs(netPending), currency)}
-          </span>
-        </div>
+        ) : null}
      </div>

      {data === null ? (
        <Skeleton className="mt-3 min-h-20 w-full flex-1 rounded-xl" />
-      ) : data.items.length === 0 ? (
-        <p className="mt-3 flex min-h-20 flex-1 items-center justify-center rounded-xl border border-dashed border-[#dce7f7] px-3 text-center text-sm text-slate-500">
-          {t("wallet.noSettlementBills", { defaultValue: "暂无待结算账单" })}
+      ) : !hasBills ? (
+        <p className="mt-3 flex min-h-24 flex-1 items-center justify-center rounded-xl bg-emerald-50 px-3 text-center text-sm font-bold text-emerald-700">
+          {t("wallet.settlementClear", { defaultValue: "当前无需结算" })}
        </p>
      ) : (
-        <ul className="mt-3 min-h-0 max-h-[16rem] flex-1 space-y-2 overflow-y-auto lg:max-h-none">
-          {data.items.map((item) => {
-            const receivable = item.direction === "receivable";
-            return (
-              <li key={item.id} className="rounded-xl border border-[#e1eaf6] px-3 py-2">
-                <div className="flex items-center justify-between gap-2">
-                  <div className="flex min-w-0 items-center gap-2">
-                    <span className={receivable ? "rounded-full bg-emerald-100 p-1 text-emerald-700" : "rounded-full bg-red-100 p-1 text-red-700"}>
-                      {receivable ? <ArrowDownLeft className="size-3.5" /> : <ArrowUpRight className="size-3.5" />}
-                    </span>
-                    <div className="min-w-0">
-                      <p className="truncate text-sm font-black text-[#101a33]">
-                        {receivable
-                          ? t("wallet.agentPaysPlayer", { defaultValue: "代理应付玩家" })
-                          : t("wallet.playerPaysAgent", { defaultValue: "玩家应付代理" })}
-                      </p>
-                      <p className="mt-0.5 text-[11px] text-slate-500">
-                        {formatPeriodRange(item, settlementTimeZone)}
-                      </p>
+        <>
+          <div className={netDirection === "receivable"
+            ? "mt-3 rounded-xl bg-emerald-50 px-3 py-3 text-emerald-700"
+            : "mt-3 rounded-xl bg-red-50 px-3 py-3 text-red-700"}
+          >
+            <p className="text-xs font-bold">
+              {netDirection === "receivable"
+                ? t("wallet.netReceivable", { defaultValue: "净待收" })
+                : t("wallet.netPayable", { defaultValue: "净待付" })}
+            </p>
+            <p className="mt-1 font-mono text-lg font-black tabular-nums">
+              {formatMinorAsCurrency(Math.abs(netPending), currency)}
+            </p>
+          </div>
+          <details className="group mt-3 rounded-xl border border-[#e1eaf6] bg-[#f8fbff]">
+            <summary className="flex min-h-10 cursor-pointer list-none items-center justify-between gap-2 px-3 py-2 text-sm font-bold text-[#32518d] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2d63e2] [&::-webkit-details-marker]:hidden">
+              {t("wallet.settlementDetails", { defaultValue: "查看账期明细" })}
+              <ChevronDown className="size-4 transition-transform group-open:rotate-180" aria-hidden />
+            </summary>
+            <ul className="max-h-[16rem] space-y-2 overflow-y-auto border-t border-[#e1eaf6] p-2">
+              {data.items.map((item) => {
+                const receivable = item.direction === "receivable";
+                return (
+                  <li key={item.id} className="rounded-lg bg-white px-3 py-2">
+                    <div className="flex items-center justify-between gap-2">
+                      <div className="flex min-w-0 items-center gap-2">
+                        <span className={receivable ? "rounded-full bg-emerald-100 p-1 text-emerald-700" : "rounded-full bg-red-100 p-1 text-red-700"}>
+                          {receivable ? <ArrowDownLeft className="size-3.5" aria-hidden /> : <ArrowUpRight className="size-3.5" aria-hidden />}
+                        </span>
+                        <div className="min-w-0">
+                          <p className="truncate text-sm font-black text-[#101a33]">
+                            {receivable
+                              ? t("wallet.agentPaysPlayer", { defaultValue: "代理应付玩家" })
+                              : t("wallet.playerPaysAgent", { defaultValue: "玩家应付代理" })}
+                          </p>
+                          <p className="mt-0.5 text-[11px] text-slate-500">
+                            {formatPeriodRange(item, settlementTimeZone)}
+                          </p>
+                        </div>
+                      </div>
+                      <div className="shrink-0 text-right">
+                        <p className={receivable ? "font-mono text-sm font-black text-emerald-700" : "font-mono text-sm font-black text-red-700"}>
+                          {formatMinorAsCurrency(item.unpaid_amount, currency)}
+                        </p>
+                        <p className="mt-0.5 text-[11px] text-slate-500">{settlementStatusLabel(item.status, t)}</p>
+                      </div>
                    </div>
-                  </div>
-                  <div className="shrink-0 text-right">
-                    <p className={receivable ? "font-mono text-sm font-black text-emerald-700" : "font-mono text-sm font-black text-red-700"}>
-                      {formatMinorAsCurrency(item.unpaid_amount, currency)}
-                    </p>
-                    <p className="mt-0.5 text-[11px] text-slate-500">{settlementStatusLabel(item.status, t)}</p>
-                  </div>
-                </div>
-              </li>
-            );
-          })}
-        </ul>
+                  </li>
+                );
+              })}
+            </ul>
+          </details>
+        </>
      )}
    </section>
  );
@@ -267,7 +263,7 @@ export function WalletScreen() {
    return nextLogs;
  }, [currency, filter]);

-  useEffect(() => {
+  useAsyncEffect(() => {
    let cancelled = false;

    void (async () => {
@@ -307,7 +303,7 @@ export function WalletScreen() {
    return () => {
      cancelled = true;
    };
-  }, [currency, t]); // eslint-disable-line react-hooks/exhaustive-deps -- 币种切换整页刷新；流水筛选见下方 effect
+  }, [currency, t]);

  useEffect(() => {
    if (!filterInitializedRef.current) {
@@ -395,10 +391,12 @@ export function WalletScreen() {
  const displayMinor = isCreditPlayer
    ? Number(balance?.available_balance ?? 0)
    : Number(balance?.balance ?? 0);
+  const creditLimitMinor = Number(balance?.credit_limit ?? 0);
+  const creditInUseMinor = Math.max(0, creditLimitMinor - displayMinor);
  const panelTitle = !fundingModeKnown
    ? t("wallet.loadingTitle", { defaultValue: "账户资金" })
    : isCreditPlayer
-      ? t("wallet.creditTitle", { defaultValue: "信用" })
+      ? t("wallet.creditTitle", { defaultValue: "额度" })
      : t("wallet.title");

  const loadMore = useCallback(() => {
@@ -470,6 +468,7 @@ export function WalletScreen() {
                src="/entry/image5.png"
                alt=""
                fill
+                loading="eager"
                className="pointer-events-none object-cover object-center"
                aria-hidden
              />
@@ -535,6 +534,7 @@ export function WalletScreen() {
                src="/entry/image5.png"
                alt=""
                fill
+                loading="eager"
                className="pointer-events-none object-cover object-center"
                aria-hidden
              />
@@ -545,7 +545,7 @@ export function WalletScreen() {
                <div className="min-w-0 flex-1">
                  <p className="text-sm font-semibold text-white/90 lg:text-base">
                    {fundingModeKnown
-                      ? t("wallet.creditAvailable", { defaultValue: "可用信用" })
+                      ? t("wallet.creditAvailable", { defaultValue: "可用额度" })
                      : t("wallet.loadingBalance", { defaultValue: "正在加载" })}
                  </p>
                  {loading || !fundingModeKnown ? (
@@ -554,40 +554,43 @@ export function WalletScreen() {
                    <PlayerMoneyDisplay
                      amountMinor={displayMinor}
                      currency={currency}
+                      showCurrencyCode={false}
                      className="mt-1 text-white lg:text-[1.75rem]"
                    />
                  )}
                  <p className="mt-2 text-xs text-white/75 lg:text-sm">
                    {!fundingModeKnown
                      ? t("wallet.loadingAccountMode", { defaultValue: "正在确认资金模式…" })
-                      : t("wallet.creditSummary", {
-                          defaultValue: "授信 {{limit}} · 已用 {{used}}",
-                          limit: formatMinorAsCurrency(balance?.credit_limit ?? 0, currency),
-                          used: formatMinorAsCurrency(balance?.used_credit ?? 0, currency),
-                        })}
+                      : t("wallet.creditAvailableHint", { defaultValue: "当前可用于下注" })}
                  </p>
                </div>
              </div>

              {fundingModeKnown ? (
-                <div className="relative mt-4 grid shrink-0 grid-cols-2 gap-2 lg:mt-auto lg:gap-3">
-                  <div className="rounded-xl bg-white/15 px-3 py-2.5 backdrop-blur-[2px]">
-                    <p className="text-[11px] font-bold uppercase tracking-wide text-white/75">
-                      {t("wallet.creditLimit", { defaultValue: "授信额度" })}
-                    </p>
-                    <p className="mt-1 font-mono text-sm font-black tabular-nums text-white">
-                      {formatMinorAsCurrency(balance?.credit_limit ?? 0, currency)}
-                    </p>
+                <details className="group relative mt-4 shrink-0 rounded-xl bg-white/15 backdrop-blur-[2px] lg:mt-auto">
+                  <summary className="flex min-h-10 cursor-pointer list-none items-center justify-between gap-2 px-3 py-2 text-sm font-bold text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white [&::-webkit-details-marker]:hidden">
+                    {t("wallet.creditDetails", { defaultValue: "额度详情" })}
+                    <ChevronDown className="size-4 transition-transform group-open:rotate-180" aria-hidden />
+                  </summary>
+                  <div className="grid grid-cols-2 gap-2 border-t border-white/15 p-2">
+                    <div className="rounded-lg bg-white/10 px-3 py-2">
+                      <p className="text-[11px] font-bold text-white/75">
+                        {t("wallet.creditLimit", { defaultValue: "总额度" })}
+                      </p>
+                      <p className="mt-1 font-mono text-sm font-black tabular-nums text-white">
+                        {formatMinorAmount(creditLimitMinor)}
+                      </p>
+                    </div>
+                    <div className="rounded-lg bg-white/10 px-3 py-2">
+                      <p className="text-[11px] font-bold text-white/75">
+                        {t("wallet.usedCredit", { defaultValue: "使用中" })}
+                      </p>
+                      <p className="mt-1 font-mono text-sm font-black tabular-nums text-white">
+                        {formatMinorAmount(creditInUseMinor)}
+                      </p>
+                    </div>
                  </div>
-                  <div className="rounded-xl bg-white/15 px-3 py-2.5 backdrop-blur-[2px]">
-                    <p className="text-[11px] font-bold uppercase tracking-wide text-white/75">
-                      {t("wallet.usedCredit", { defaultValue: "已用信用" })}
-                    </p>
-                    <p className="mt-1 font-mono text-sm font-black tabular-nums text-white">
-                      {formatMinorAsCurrency(balance?.used_credit ?? 0, currency)}
-                    </p>
-                  </div>
-                </div>
+                </details>
              ) : null}
            </section>

--- a/src/hooks/use-async-effect.ts
+++ b/src/hooks/use-async-effect.ts
@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect, useRef, type DependencyList } from "react";
+
+/**
+ * Defer asynchronous side effects until the current effect instance survives
+ * React Strict Mode's development-only setup/cleanup probe.
+ */
+export function useAsyncEffect(
+  factory: () => void | (() => void) | Promise<void>,
+  deps: DependencyList,
+): void {
+  const factoryRef = useRef(factory);
+  useEffect(() => {
+    factoryRef.current = factory;
+  }, [factory]);
+
+  useEffect(() => {
+    let cleanup: void | (() => void);
+    let cancelled = false;
+
+    queueMicrotask(() => {
+      if (cancelled) return;
+
+      void Promise.resolve(factoryRef.current()).then((result) => {
+        if (cancelled) {
+          result?.();
+          return;
+        }
+        cleanup = result;
+      });
+    });
+
+    return () => {
+      cancelled = true;
+      cleanup?.();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+}
--- a/src/hooks/use-currency-catalog.ts
+++ b/src/hooks/use-currency-catalog.ts
@@ -10,9 +10,31 @@ const RETRY_DELAY_MS = 2_000;

 let inflightCurrencyLoad: Promise<void> | null = null;

+export function ensureCurrencyCatalogLoaded(): Promise<void> {
+  if (usePlayerSessionStore.getState().currencies.length > 0) {
+    return Promise.resolve();
+  }
+
+  if (inflightCurrencyLoad !== null) {
+    return inflightCurrencyLoad;
+  }
+
+  inflightCurrencyLoad = getPublicCurrencies()
+    .then((data) => {
+      if (data.items.length === 0) {
+        throw new Error("empty_currency_catalog");
+      }
+      usePlayerSessionStore.getState().setCurrencies(data.items);
+    })
+    .finally(() => {
+      inflightCurrencyLoad = null;
+    });
+
+  return inflightCurrencyLoad;
+}
+
 export function useCurrencyCatalog() {
  const currencies = usePlayerSessionStore((state) => state.currencies);
-  const setCurrencies = usePlayerSessionStore((state) => state.setCurrencies);
  const [loadGeneration, setLoadGeneration] = useState(0);

  useEffect(() => {
@@ -20,27 +42,13 @@ export function useCurrencyCatalog() {
      return;
    }

-    if (inflightCurrencyLoad !== null) {
-      return;
-    }
-
-    inflightCurrencyLoad = getPublicCurrencies()
-      .then((data) => {
-        if (data.items.length > 0) {
-          setCurrencies(data.items);
-          return;
-        }
-        throw new Error("empty_currency_catalog");
-      })
+    void ensureCurrencyCatalogLoaded()
      .catch(() => {
        window.setTimeout(() => {
          setLoadGeneration((current) => current + 1);
        }, RETRY_DELAY_MS);
-      })
-      .finally(() => {
-        inflightCurrencyLoad = null;
      });
-  }, [currencies.length, setCurrencies, loadGeneration]);
+  }, [currencies.length, loadGeneration]);

  return currencies;
-}
+}
--- a/src/hooks/use-player-balance-ws.ts
+++ b/src/hooks/use-player-balance-ws.ts
@@ -4,7 +4,11 @@ import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";

-import { getLotteryEcho } from "@/lib/lottery-echo";
+import {
+  disconnectLotteryEcho,
+  getLotteryEcho,
+} from "@/lib/lottery-echo";
+import { parseJwtSessionVersion } from "@/lib/jwt-payload";
 import { useActivePlayerCurrency } from "@/hooks/use-active-player-currency";
 import { usePlayerSessionStore } from "@/stores/player-session-store";

@@ -17,6 +21,11 @@ type BalanceUpdateWsEvent = {
  reason?: string;
 };

+type SessionReplacedWsEvent = {
+  player_id?: number;
+  session_version?: number;
+};
+
 const REASON_I18N_KEY: Record<string, string> = {
  transfer_in: "wallet.wsReason.transferIn",
  transfer_out: "wallet.wsReason.transferOut",
@@ -45,7 +54,7 @@ export function usePlayerBalanceWs(): void {
    }

    const channelName = `player.${playerId}`;
-    const channel = echo.channel(channelName);
+    const channel = echo.private(channelName);

    const onBalanceUpdate = (evt: BalanceUpdateWsEvent): void => {
      const currency = evt.currency_code?.trim().toUpperCase();
@@ -71,10 +80,34 @@ export function usePlayerBalanceWs(): void {
      toast.message(t("wallet.wsBalanceUpdated", { change: changeLabel, reason: reasonLabel }));
    };

+    const onSessionReplaced = (evt: SessionReplacedWsEvent): void => {
+      const nextVersion = evt.session_version;
+      if (
+        evt.player_id !== playerId ||
+        typeof nextVersion !== "number" ||
+        !Number.isInteger(nextVersion)
+      ) {
+        return;
+      }
+
+      const state = usePlayerSessionStore.getState();
+      const currentVersion = parseJwtSessionVersion(state.bearerToken) ?? 0;
+      if (nextVersion <= currentVersion) {
+        return;
+      }
+
+      disconnectLotteryEcho();
+      state.clearBearerToken();
+      window.location.replace("/login?session=replaced");
+    };
+
    channel.listen(".balance.update", onBalanceUpdate);
+    channel.listen(".session.replaced", onSessionReplaced);

    return () => {
      channel.stopListening(".balance.update");
+      channel.stopListening(".session.replaced");
+      echo.leave(channelName);
    };
  }, [activeCurrency, bearerToken, playerId, t]);
 }
--- a/src/hooks/use-token-refresh.ts
+++ b/src/hooks/use-token-refresh.ts
@@ -1,14 +1,12 @@
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useRef } from "react";
 import { useTranslation } from "react-i18next";

 import { parseJwtExp } from "@/lib/jwt-payload";
-import { usePlayerSessionStore } from "@/stores/player-session-store";
 import { useErrorStore } from "@/stores/error-store";
-import {
-  isIframeOriginAllowed,
-  loadIframeAllowedOrigins,
-  resolvePostMessageTargetOrigin,
-} from "@/lib/iframe-origins";
+import { resolvePostMessageTargetOrigin } from "@/lib/iframe-origins";
+import { subscribeIframeTokenRefresh } from "@/lib/iframe-token-refresh-events";
+import { usePlayerSessionStore } from "@/stores/player-session-store";
+import { useAsyncEffect } from "@/hooks/use-async-effect";

 /** Token 过期前警告阈值（毫秒） */
 const TOKEN_WARNING_THRESHOLD = 60 * 1000; // 1 分钟
@@ -37,7 +35,6 @@ export function useTokenRefresh(): {
  isTokenExpiringSoon: () => boolean;
 } {
  const bearerToken = usePlayerSessionStore((state) => state.bearerToken);
-  const setBearerToken = usePlayerSessionStore((state) => state.setBearerToken);
  const setServerError = useErrorStore((state) => state.setServerError);
  const clearServerError = useErrorStore((state) => state.clearServerError);
  const { t } = useTranslation("player");
@@ -109,52 +106,18 @@ export function useTokenRefresh(): {
    }, REFRESH_RESPONSE_TIMEOUT_MS);
  }, [clearServerError, requestParentRefresh, setServerError, t]);

-  /**
-   * 监听主站 postMessage 发送的新 Token
-   */
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-
-    void loadIframeAllowedOrigins();
-
-    const handleMessage = async (event: MessageEvent): Promise<void> => {
-      if (!isIframeOriginAllowed(event.origin)) {
-        await loadIframeAllowedOrigins(true);
-        if (!isIframeOriginAllowed(event.origin)) {
-          console.warn("[TokenRefresh] Ignored message from unknown origin:", event.origin);
-          return;
-        }
-      }
-
-      const { data } = event;
-      if (!data || typeof data !== "object") return;
-
-      // 处理主站发送的新 Token（兼容 MAIN_REFRESH_TOKEN 与 LOTTERY_TOKEN_REFRESH_RESPONSE）
-      if (
-        (data.type === "LOTTERY_TOKEN_REFRESH_RESPONSE" || data.type === "MAIN_REFRESH_TOKEN") &&
-        data.token
-      ) {
-        console.log("[TokenRefresh] Received new token from parent");
-        pendingRefreshRef.current = 0;
-        setBearerToken(data.token);
-        retryCountRef.current = 0;
-      }
-
-      // 处理主站通知 Token 即将过期
-      if (data.type === "LOTTERY_TOKEN_EXPIRING_WARNING") {
-        console.log("[TokenRefresh] Token expiring warning from parent");
-        // 可以在这里显示提示或自动刷新
-      }
-    };
-
-    window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
-  }, [setBearerToken]);
+  /** IframeBridge 统一校验父窗口消息；这里只接收已验证的续签结果。 */
+  useAsyncEffect(() => {
+    return subscribeIframeTokenRefresh(() => {
+      pendingRefreshRef.current = 0;
+      retryCountRef.current = 0;
+    });
+  }, []);

  /**
   * 自动刷新逻辑
   */
-  useEffect(() => {
+  useAsyncEffect(() => {
    if (!bearerToken) {
      if (refreshTimerRef.current) {
        clearTimeout(refreshTimerRef.current);
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -59,7 +59,7 @@ export function syncDocumentLanguage(lang: AppLanguage): void {
  document.documentElement.lang = lang;
 }

-export function syncPreferredLanguage(): void {
+export async function syncPreferredLanguage(): Promise<void> {
  if (typeof window === "undefined") return;

  const stored = window.localStorage.getItem("i18nextLng");
@@ -67,7 +67,7 @@ export function syncPreferredLanguage(): void {
  const current = normalizeLanguage(i18n.resolvedLanguage ?? i18n.language);

  if (preferred !== current) {
-    void i18n.changeLanguage(preferred);
+    await i18n.changeLanguage(preferred);
  }
 }

--- a/src/i18n/locales/en/entry.json
+++ b/src/i18n/locales/en/entry.json
@@ -65,18 +65,21 @@
    "captcha": "Captcha",
    "captchaPlaceholder": "Enter captcha",
    "captchaRequired": "Please load the captcha first",
+    "captchaCodeRequired": "Please enter the captcha",
    "captchaLoadFailed": "Failed to load captcha. Try again.",
    "captchaLoading": "Loading…",
    "captchaRefresh": "Refresh captcha",
    "captchaFetch": "Tap to load",
    "usernameInvalidCharset": "Username may only contain letters, numbers, dots (.), underscores, and hyphens",
-    "passwordMinLength": "Password must be at least 6 characters"
+    "passwordMinLength": "Password must be at least 6 characters",
+    "passwordChanged": "Password changed. Sign in again with your new password."
  },
  "errors": {
    "noToken": "No authorization token found",
    "noTokenDetail": "Please return to the main site and try again.",
    "sessionExpired": "Session expired",
    "sessionExpiredDetail": "Please return to the main site and open the lottery hall again.",
+    "sessionReplaced": "This account was signed in on another device. Please sign in again.",
    "authFailed": "Authorization failed",
    "unknown": "Unknown error",
    "network": "Network error occurred",
--- a/src/i18n/locales/en/player.json
+++ b/src/i18n/locales/en/player.json
@@ -26,7 +26,7 @@
    "orders": "My Bets",
    "rules": "Rules",
    "wallet": "Wallet",
-    "credit": "Credit"
+    "credit": "Limit"
  },
  "notifications": {
    "title": "Pending reconciliation",
@@ -113,6 +113,44 @@
  "player": {
    "fallback": "Player #{{id}}"
  },
+  "account": {
+    "open": "View player profile",
+    "loading": "Player",
+    "title": "My account",
+    "description": "View the signed-in player profile and account security settings.",
+    "auth": {
+      "native": "Lottery account",
+      "sso": "Main-site API"
+    },
+    "funding": {
+      "credit": "Credit mode",
+      "wallet": "Wallet mode"
+    },
+    "fields": {
+      "username": "Username",
+      "site": "Site",
+      "playerId": "Player ID",
+      "currency": "Default currency"
+    },
+    "ssoManaged": "This sign-in is managed by the main site. Return to the main site to sign out or change your credentials.",
+    "logout": "Sign out",
+    "password": {
+      "action": "Change password",
+      "title": "Change login password",
+      "description": "After the password is changed, all lottery sessions for this account will be signed out.",
+      "current": "Current password",
+      "new": "New password",
+      "confirm": "Confirm new password",
+      "hint": "Use at least 6 characters.",
+      "required": "Complete the current, new, and confirmation password fields",
+      "tooShort": "The new password must be at least 6 characters",
+      "mismatch": "The new passwords do not match",
+      "mustDiffer": "The new password must differ from the current password",
+      "submit": "Change password",
+      "saving": "Changing...",
+      "failed": "Failed to change password. Try again later."
+    }
+  },
  "draw": {
    "currentIssue": "Current issue",
    "currentTime": "Current Time",
@@ -124,7 +162,7 @@
    "closesIn": "Closes In",
    "drawsIn": "Draws In",
    "drawProcessing": "Drawing…",
-    "coolDown": "Cool Down",
+    "coolDown": "Until automatic settlement",
    "loadFailedRefresh": "Failed to load. Pull down to refresh.",
    "issueNo": "Issue No.",
    "hall": "Betting Hall",
@@ -139,7 +177,7 @@
      "closed": "Awaiting draw",
      "drawing": "Drawing",
      "review": "Under review",
-      "cooldown": "Cool down",
+      "cooldown": "Result confirmation",
      "settling": "Settling",
      "settled": "Settled",
      "cancelled": "Cancelled"
@@ -164,6 +202,20 @@
    "placeFailed": "Submission failed",
    "placeSuccess": "Bet submitted. Order {{orderNo}}, deducted {{amount}}.",
    "placePartialFailed": "{{success}} succeeded, {{failed}} failed",
+    "desktop": {
+      "stepGame": "Choose game",
+      "stepFill": "Enter number and stake",
+      "stepReview": "Review and submit",
+      "reviewTitle": "Review and submit",
+      "availableCredit": "Available credit",
+      "remainingCredit": "Available after bet",
+      "warnings": "Risk alerts",
+      "noWarnings": "No risk alerts",
+      "warningCount": "{{count}} rows near sold out",
+      "creditEnough": "Sufficient available credit",
+      "creditInsufficient": "Insufficient available credit",
+      "secureHint": "A final preview appears before submission"
+    },
    "placeAllFailed": "All {{failed}} lines failed",
    "playConfig": {
      "playClosedDraftCleared": "{{playCode}} is closed. Related draft amounts have been cleared.",
@@ -236,6 +288,7 @@
      "no": "No.",
      "number": "Number",
      "selectionType": "Type",
+      "total": "Total",
      "rowTotal": "Row Total",
      "selectAllTypes": "Select all types",
      "setAllTypes": "Set the type for every row",
@@ -286,6 +339,12 @@
        "big": "B",
        "small": "S"
      },
+      "digitPosition": {
+        "0": "1000s",
+        "1": "100s",
+        "2": "10s",
+        "3": "1s"
+      },
      "filledPlayCount": "{{count}} plays filled",
      "tapToFill": "Tap to enter amounts",
      "rowActual": "Actual",
@@ -431,11 +490,15 @@
  "wallet": {
    "title": "Wallet",
    "subtitle": "Balance and transfer records",
-    "creditTitle": "Credit",
-    "creditSubtitle": "Credit usage and billing-period activity",
+    "creditTitle": "Limit",
+    "creditSubtitle": "Available limit and period settlement",
    "balance": "Wallet Balance",
-    "creditAvailable": "Available credit",
+    "creditAvailable": "Available limit",
+    "creditAvailableHint": "Available to bet now",
+    "creditDetails": "Limit details",
    "creditSummary": "Limit {{limit}} · Used {{used}}",
+    "creditLimit": "Total limit",
+    "usedCredit": "In use",
    "creditNoTransferHint": "Credit accounts are funded by your agent; no main-site transfers. Wins are not paid out instantly—profit and loss are settled in billing periods. Contact your agent to change your limit.",
    "available": "Available {{amount}}",
    "transferIn": "Transfer In",
@@ -445,9 +508,13 @@
    "logs": "Logs",
    "logsTitle": "Wallet Logs",
    "logsSubtitle": "Transfer and betting records",
-    "creditLogsTitle": "Credit activity",
-    "creditLogsSubtitle": "Holds, releases, and billing-period payments",
+    "creditLogsTitle": "Limit and settlement activity",
+    "creditLogsSubtitle": "Bets, draw results, and period settlement",
    "typeFilter": "Type Filter",
+    "logType": "Type",
+    "logTime": "Time",
+    "logRef": "Reference",
+    "logAmount": "Amount",
    "transferInTitle": "Transfer In",
    "transferOutTitle": "Transfer Out",
    "transferInSubtitle": "Add funds to lottery wallet ({{currency}})",
@@ -480,17 +547,17 @@
    "viewPendingReconcile": "View pending reconciliation ({{count}})",
    "pendingStatus": "Processing",
    "flowsTitle": "Wallet logs",
-    "creditFlowsTitle": "Credit activity",
+    "creditFlowsTitle": "Limit and settlement activity",
    "playerChannel": {
      "credit": "Credit line: bet holds, draw settlement, and period payments (not wallet payouts)",
      "wallet": "Main-site wallet player (transfers & wallet ledger)"
    },
-    "creditAvailableAfter": "Available credit after",
+    "creditAvailableAfter": "Available limit after",
    "creditReleasedAmount": "Released credit {{amount}}",
    "creditPaymentRecordOnly": "Billing payment record only; not counted in available credit",
    "totalRecords": "{{total}} records",
    "emptyLogs": "No wallet logs",
-    "emptyCreditLogs": "No credit activity",
+    "emptyCreditLogs": "No limit or settlement activity",
    "noMoreLogs": "No more transactions",
    "balanceAfter": "Balance after",
    "wsBalanceUpdated": "Balance {{change}} ({{reason}})",
@@ -513,11 +580,11 @@
    },
    "creditFlow": {
      "all": "All",
-      "bet": "Bet hold",
-      "game_settlement": "Draw settlement",
+      "bet": "Bet",
+      "game_settlement": "Draw results",
      "rebate": "Period rebate",
      "credit_release": "Credit release",
-      "bill_settlement": "Period payment",
+      "bill_settlement": "Period settlement",
      "win_credit": "Win release",
      "refund": "Period confirm release",
      "reversal": "Refund release"
@@ -560,8 +627,29 @@
      "1009": "The main site could not complete this transfer. Please try again later.",
      "1010": "Do not use the same idempotency key for transfers with different amounts."
    },
-    "settlementTitle": "My Billing Period Bills",
-    "settlementHint": "Showing only unsettled bills. Winnings exceeding your credit limit are settled here.",
+    "activity": {
+      "bet": "Bet",
+      "settledLoss": "Not a winner",
+      "settledWin": "Winner",
+      "result": "Draw result",
+      "refunded": "Refunded",
+      "periodPaid": "Paid",
+      "periodReceived": "Received",
+      "awaitingDraw": "Awaiting draw",
+      "processing": "Processing",
+      "reversed": "Reversed",
+      "details": "View details",
+      "stake": "Bet amount",
+      "win": "Win amount",
+      "rebate": "Rebate",
+      "ticketCount": "Bet lines",
+      "ticketCountValue": "{{count}} item(s)",
+      "viewOrder": "View bet"
+    },
+    "settlementTitle": "Period settlement",
+    "settlementHint": "See the amount currently due to you or from you.",
+    "settlementClear": "Nothing to settle right now",
+    "settlementDetails": "View period details",
    "settlementPendingCount": "{{count}} bill(s)",
    "pendingReceivable": "Receivable",
    "pendingPayable": "Payable",
--- a/src/i18n/locales/ne/entry.json
+++ b/src/i18n/locales/ne/entry.json
@@ -65,18 +65,21 @@
    "captcha": "क्याप्चा",
    "captchaPlaceholder": "क्याप्चा प्रविष्ट गर्नुहोस्",
    "captchaRequired": "कृपया पहिले क्याप्चा लोड गर्नुहोस्",
+    "captchaCodeRequired": "कृपया क्याप्चा प्रविष्ट गर्नुहोस्",
    "captchaLoadFailed": "क्याप्चा लोड असफल। फेरि प्रयास गर्नुहोस्।",
    "captchaLoading": "लोड हुँदै…",
    "captchaRefresh": "क्याप्चा रिफ्रेस",
    "captchaFetch": "लोड गर्न ट्याप गर्नुहोस्",
    "usernameInvalidCharset": "प्रयोगकर्ता नाममा अक्षर, अंक, डट (.), अन्डरस्कोर र हाइफन मात्र हुन सक्छ",
-    "passwordMinLength": "पासवर्ड कम्तीमा ६ वर्ण हुनुपर्छ"
+    "passwordMinLength": "पासवर्ड कम्तीमा ६ वर्ण हुनुपर्छ",
+    "passwordChanged": "पासवर्ड बदलियो। नयाँ पासवर्डले फेरि लगइन गर्नुहोस्।"
  },
  "errors": {
    "noToken": "कुनै प्राधिकरण टोकन फेला परेन",
    "noTokenDetail": "कृपया मुख्य साइटमा फर्कनुहोस् र फेरि प्रयास गर्नुहोस्।",
    "sessionExpired": "लगइन म्याद सकियो",
    "sessionExpiredDetail": "कृपया मुख्य साइटमा फर्केर लटरी हल फेरि खोल्नुहोस्।",
+    "sessionReplaced": "यो खाता अर्को उपकरणमा लगइन गरिएको छ। कृपया फेरि लगइन गर्नुहोस्।",
    "authFailed": "प्राधिकरण असफल",
    "unknown": "अज्ञात त्रुटि",
    "network": "नेटवर्क त्रुटि भयो",
--- a/src/i18n/locales/ne/player.json
+++ b/src/i18n/locales/ne/player.json
@@ -26,7 +26,7 @@
    "orders": "मेरा बेट",
    "rules": "नियम",
    "wallet": "वालेट",
-    "credit": "क्रेडिट"
+    "credit": "सीमा"
  },
  "notifications": {
    "title": "मिलान बाँकी सूचना",
@@ -113,6 +113,44 @@
  "player": {
    "fallback": "खेलाडी #{{id}}"
  },
+  "account": {
+    "open": "खेलाडी प्रोफाइल हेर्नुहोस्",
+    "loading": "खेलाडी",
+    "title": "मेरो खाता",
+    "description": "हाल लगइन भएको खेलाडी प्रोफाइल र खाता सुरक्षा सेटिङ हेर्नुहोस्।",
+    "auth": {
+      "native": "लटरी खाता",
+      "sso": "मुख्य साइट API"
+    },
+    "funding": {
+      "credit": "क्रेडिट मोड",
+      "wallet": "वालेट मोड"
+    },
+    "fields": {
+      "username": "प्रयोगकर्ता नाम",
+      "site": "साइट",
+      "playerId": "खेलाडी ID",
+      "currency": "पूर्वनिर्धारित मुद्रा"
+    },
+    "ssoManaged": "यो लगइन मुख्य साइटले व्यवस्थापन गर्छ। लगआउट गर्न वा लगइन विवरण बदल्न मुख्य साइटमा फर्कनुहोस्।",
+    "logout": "लगआउट",
+    "password": {
+      "action": "पासवर्ड बदल्नुहोस्",
+      "title": "लगइन पासवर्ड बदल्नुहोस्",
+      "description": "पासवर्ड बदलेपछि यस खाताका सबै लटरी सत्रबाट लगआउट हुनेछ।",
+      "current": "हालको पासवर्ड",
+      "new": "नयाँ पासवर्ड",
+      "confirm": "नयाँ पासवर्ड पुष्टि",
+      "hint": "कम्तीमा ६ वर्ण प्रयोग गर्नुहोस्।",
+      "required": "हालको, नयाँ र पुष्टि पासवर्ड पूरा भर्नुहोस्",
+      "tooShort": "नयाँ पासवर्ड कम्तीमा ६ वर्ण हुनुपर्छ",
+      "mismatch": "नयाँ पासवर्डहरू मिलेनन्",
+      "mustDiffer": "नयाँ पासवर्ड हालको पासवर्डभन्दा फरक हुनुपर्छ",
+      "submit": "पासवर्ड बदल्नुहोस्",
+      "saving": "बदल्दै...",
+      "failed": "पासवर्ड बदल्न असफल भयो। पछि फेरि प्रयास गर्नुहोस्।"
+    }
+  },
  "draw": {
    "currentIssue": "हालको इश्यू",
    "currentTime": "हालको समय",
@@ -124,7 +162,7 @@
    "closesIn": "बन्द हुन बाँकी",
    "drawsIn": "ड्र हुन बाँकी",
    "drawProcessing": "ड्रअ प्रक्रियामा",
-    "coolDown": "कुल डाउन",
+    "coolDown": "स्वचालित सेटलमेन्टसम्म",
    "loadFailedRefresh": "लोड असफल भयो। तल तानेर रिफ्रेस गर्नुहोस्।",
    "issueNo": "इश्यू नं.",
    "hall": "बेटिङ हल",
@@ -139,7 +177,7 @@
      "closed": "ड्र पर्खँदै",
      "drawing": "ड्र हुँदैछ",
      "review": "समीक्षामा",
-      "cooldown": "कुल डाउन",
+      "cooldown": "नतिजा पुष्टि हुँदैछ",
      "settling": "सेटल हुँदैछ",
      "settled": "सेटल भयो",
      "cancelled": "रद्द"
@@ -164,6 +202,20 @@
    "placeFailed": "पेश गर्न असफल",
    "placeSuccess": "बेट पेश भयो। अर्डर {{orderNo}}, कट्टा {{amount}}।",
    "placePartialFailed": "{{success}} सफल, {{failed}} असफल",
+    "desktop": {
+      "stepGame": "खेल छान्नुहोस्",
+      "stepFill": "नम्बर र रकम भर्नुहोस्",
+      "stepReview": "जाँच गरी पेश गर्नुहोस्",
+      "reviewTitle": "जाँच र पेश",
+      "availableCredit": "उपलब्ध क्रेडिट",
+      "remainingCredit": "बेटपछि उपलब्ध",
+      "warnings": "जोखिम सूचना",
+      "noWarnings": "जोखिम सूचना छैन",
+      "warningCount": "{{count}} पङ्क्ति बिक्री सकिन नजिक",
+      "creditEnough": "पर्याप्त क्रेडिट उपलब्ध छ",
+      "creditInsufficient": "उपलब्ध क्रेडिट पर्याप्त छैन",
+      "secureHint": "पेश गर्नुअघि अन्तिम पूर्वावलोकन देखाइनेछ"
+    },
    "placeAllFailed": "सबै {{failed}} लाइन असफल",
    "playConfig": {
      "playClosedDraftCleared": "{{playCode}} बन्द छ। सम्बन्धित ड्राफ्ट रकम हटाइएको छ।",
@@ -236,6 +288,7 @@
      "no": "नं.",
      "number": "नम्बर",
      "selectionType": "प्रकार",
+      "total": "जम्मा",
      "rowTotal": "पंक्ति जम्मा",
      "selectAllTypes": "सबै प्रकार छान्नुहोस्",
      "setAllTypes": "सबै पंक्तिको प्रकार सेट गर्नुहोस्",
@@ -286,6 +339,12 @@
        "big": "ठू",
        "small": "सा"
      },
+      "digitPosition": {
+        "0": "हजार",
+        "1": "सय",
+        "2": "दश",
+        "3": "एकाइ"
+      },
      "filledPlayCount": "{{count}} प्ले भरियो",
      "tapToFill": "रकम लेख्न ट्याप गर्नुहोस्",
      "rowActual": "वास्तविक",
@@ -441,6 +500,10 @@
    "logsTitle": "वालेट लग",
    "logsSubtitle": "ट्रान्सफर र बेट रेकर्ड",
    "typeFilter": "प्रकार फिल्टर",
+    "logType": "प्रकार",
+    "logTime": "समय",
+    "logRef": "सम्बन्धित नम्बर",
+    "logAmount": "रकम",
    "transferInTitle": "फन्ड ट्रान्सफर इन",
    "transferOutTitle": "फन्ड ट्रान्सफर आउट",
    "transferInSubtitle": "लटरी वालेटमा रकम थप्नुहोस् ({{currency}})",
@@ -473,29 +536,33 @@
    "viewPendingReconcile": "मिलान बाँकी हेर्नुहोस् ({{count}})",
    "pendingStatus": "प्रक्रिया हुँदैछ",
    "flowsTitle": "वालेट लग",
-    "creditTitle": "क्रेडिट",
-    "creditSubtitle": "क्रेडिट प्रयोग र बिलिङ अवधि लेनदेन",
-    "creditAvailable": "उपलब्ध क्रेडिट",
+    "creditTitle": "सीमा",
+    "creditSubtitle": "उपलब्ध सीमा र अवधि सेटलमेन्ट",
+    "creditAvailable": "उपलब्ध सीमा",
+    "creditAvailableHint": "अहिले बेट गर्न उपलब्ध",
+    "creditDetails": "सीमा विवरण",
    "creditSummary": "सीमा {{limit}} · प्रयोग {{used}}",
+    "creditLimit": "कुल सीमा",
+    "usedCredit": "प्रयोगमा",
    "creditNoTransferHint": "क्रेडिट खाता एजेन्टले दिन्छ; मुख्य साइट ट्रान्सफर छैन। जित तुरुन्त भुक्तानी हुँदैन—नाफा/नोक्सान बिलिङ अवधिमा मिल्छ।",
-    "creditFlowsTitle": "क्रेडिट लेनदेन",
-    "creditLogsTitle": "क्रेडिट लेनदेन",
-    "creditLogsSubtitle": "ओगट, मुक्ति र बिलिङ भुक्तानी",
+    "creditFlowsTitle": "सीमा र सेटलमेन्ट रेकर्ड",
+    "creditLogsTitle": "सीमा र सेटलमेन्ट रेकर्ड",
+    "creditLogsSubtitle": "बेट, ड्र नतिजा र अवधि सेटलमेन्ट",
    "playerChannel": {
      "credit": "क्रेडिट लाइन: बेट होल्ड, ड्र सेटलमेन्ट र अवधि भुक्तानी (वालेट भुक्तानी होइन)",
      "wallet": "मुख्य साइट वालेट खेलाडी"
    },
-    "creditAvailableAfter": "पछि उपलब्ध क्रेडिट",
+    "creditAvailableAfter": "परिवर्तनपछि उपलब्ध सीमा",
    "creditReleasedAmount": "मुक्त क्रेडिट {{amount}}",
    "creditPaymentRecordOnly": "बिलिङ भुक्तानी रेकर्ड मात्र; उपलब्ध क्रेडिटमा गणना हुँदैन",
-    "emptyCreditLogs": "क्रेडिट लेनदेन छैन",
+    "emptyCreditLogs": "सीमा वा सेटलमेन्ट रेकर्ड छैन",
    "creditFlow": {
      "all": "सबै",
-      "bet": "बेट होल्ड",
-      "game_settlement": "ड्र सेटलमेन्ट",
+      "bet": "बेट",
+      "game_settlement": "ड्र नतिजा",
      "rebate": "अवधि रिबेट",
      "credit_release": "मुक्ति",
-      "bill_settlement": "अवधि भुक्तानी",
+      "bill_settlement": "अवधि सेटलमेन्ट",
      "win_credit": "जित मुक्ति",
      "refund": "अवधि पुष्टि मुक्ति",
      "reversal": "फिर्ता मुक्ति"
@@ -560,8 +627,29 @@
      "timeout": "अनुरोध timeout भयो। कृपया पछि प्रयास गर्नुहोस्।",
      "fallback": "अनुरोध असफल। कृपया पछि प्रयास गर्नुहोस्।"
    },
-    "settlementTitle": "मेरो बिलिङ अवधि बिलहरू",
-    "settlementHint": "केवल बाँकी बिलहरू देखाउँदै। क्रेडिट सीमाभन्दा बढी जित रकम यहाँ सेटल हुन्छ।",
+    "activity": {
+      "bet": "बेट",
+      "settledLoss": "जितेन",
+      "settledWin": "जित",
+      "result": "ड्र नतिजा",
+      "refunded": "फिर्ता भयो",
+      "periodPaid": "भुक्तानी भयो",
+      "periodReceived": "प्राप्त भयो",
+      "awaitingDraw": "ड्र पर्खँदै",
+      "processing": "प्रक्रियामा",
+      "reversed": "रिभर्स भयो",
+      "details": "विवरण हेर्नुहोस्",
+      "stake": "बेट रकम",
+      "win": "जित रकम",
+      "rebate": "रिबेट",
+      "ticketCount": "बेट संख्या",
+      "ticketCountValue": "{{count}} आइटम",
+      "viewOrder": "बेट हेर्नुहोस्"
+    },
+    "settlementTitle": "अवधि सेटलमेन्ट",
+    "settlementHint": "अहिले प्राप्त वा भुक्तानी गर्नुपर्ने रकम हेर्नुहोस्।",
+    "settlementClear": "अहिले सेटल गर्नुपर्ने केही छैन",
+    "settlementDetails": "अवधि विवरण हेर्नुहोस्",
    "settlementPendingCount": "{{count}} बिल(हरू)",
    "pendingReceivable": "प्राप्त हुन बाँकी",
    "pendingPayable": "भुक्तानी हुन बाँकी",
--- a/src/i18n/locales/zh/entry.json
+++ b/src/i18n/locales/zh/entry.json
@@ -65,18 +65,21 @@
    "captcha": "验证码",
    "captchaPlaceholder": "请输入验证码",
    "captchaRequired": "请先加载验证码",
+    "captchaCodeRequired": "请输入验证码",
    "captchaLoadFailed": "验证码加载失败，请重试",
    "captchaLoading": "加载中…",
    "captchaRefresh": "刷新验证码",
    "captchaFetch": "点击获取",
    "usernameInvalidCharset": "账号只能使用字母、数字、点（.）、下划线和连字符",
-    "passwordMinLength": "密码至少需要 6 个字符"
+    "passwordMinLength": "密码至少需要 6 个字符",
+    "passwordChanged": "密码已修改，请使用新密码重新登录"
  },
  "errors": {
    "noToken": "未发现授权令牌",
    "noTokenDetail": "请返回主站后重试。",
    "sessionExpired": "登录已过期",
    "sessionExpiredDetail": "请返回主站重新进入彩票大厅。",
+    "sessionReplaced": "该账号已在其他设备登录，请重新登录",
    "authFailed": "授权失败",
    "unknown": "未知错误",
    "network": "网络异常",
--- a/src/i18n/locales/zh/player.json
+++ b/src/i18n/locales/zh/player.json
@@ -26,7 +26,7 @@
    "orders": "我的注单",
    "rules": "规则",
    "wallet": "钱包",
-    "credit": "信用"
+    "credit": "额度"
  },
  "notifications": {
    "title": "待对账提醒",
@@ -113,6 +113,44 @@
  "player": {
    "fallback": "玩家 #{{id}}"
  },
+  "account": {
+    "open": "查看玩家资料",
+    "loading": "玩家",
+    "title": "我的账号",
+    "description": "查看当前登录的玩家资料与账号安全设置。",
+    "auth": {
+      "native": "彩票账号登录",
+      "sso": "主站 API 接入"
+    },
+    "funding": {
+      "credit": "信用模式",
+      "wallet": "钱包模式"
+    },
+    "fields": {
+      "username": "登录账号",
+      "site": "所属站点",
+      "playerId": "玩家编号",
+      "currency": "默认币种"
+    },
+    "ssoManaged": "当前登录由主站管理。如需退出或修改登录凭证，请返回主站操作。",
+    "logout": "退出登录",
+    "password": {
+      "action": "修改密码",
+      "title": "修改登录密码",
+      "description": "修改成功后，当前账号的所有彩票端会话都会退出。",
+      "current": "当前密码",
+      "new": "新密码",
+      "confirm": "确认新密码",
+      "hint": "密码至少需要 6 个字符。",
+      "required": "请完整填写当前密码、新密码和确认密码",
+      "tooShort": "新密码至少需要 6 个字符",
+      "mismatch": "两次输入的新密码不一致",
+      "mustDiffer": "新密码不能与当前密码相同",
+      "submit": "确认修改",
+      "saving": "正在修改...",
+      "failed": "修改密码失败，请稍后重试"
+    }
+  },
  "draw": {
    "currentIssue": "当前期号",
    "currentTime": "当前时间",
@@ -124,7 +162,7 @@
    "closesIn": "距封盘",
    "drawsIn": "距开奖",
    "drawProcessing": "开奖处理中",
-    "coolDown": "冷静期",
+    "coolDown": "距自动结算",
    "loadFailedRefresh": "加载失败，请下拉刷新",
    "issueNo": "期号",
    "hall": "下注大厅",
@@ -139,7 +177,7 @@
      "closed": "待开奖",
      "drawing": "开奖中",
      "review": "待审核",
-      "cooldown": "冷静期",
+      "cooldown": "开奖结果确认中",
      "settling": "结算中",
      "settled": "已结算",
      "cancelled": "已取消"
@@ -164,6 +202,20 @@
    "placeFailed": "提交失败",
    "placeSuccess": "下注成功，订单号 {{orderNo}}，实扣 {{amount}}。",
    "placePartialFailed": "{{success}} 个成功，{{failed}} 个失败",
+    "desktop": {
+      "stepGame": "选择玩法",
+      "stepFill": "填写号码和金额",
+      "stepReview": "核对并提交",
+      "reviewTitle": "核对与提交",
+      "availableCredit": "可用信用",
+      "remainingCredit": "下注后可用",
+      "warnings": "风险提醒",
+      "noWarnings": "暂无风险提醒",
+      "warningCount": "{{count}} 行接近售罄",
+      "creditEnough": "可用信用充足",
+      "creditInsufficient": "可用信用不足",
+      "secureHint": "提交前仍会显示最终预览"
+    },
    "playConfig": {
      "playClosedDraftCleared": "{{playCode}} 已关闭，相关草稿金额已清除。",
      "playClosed": "{{playCode}} 已关闭。",
@@ -235,6 +287,7 @@
      "no": "序号",
      "number": "号码",
      "selectionType": "种类",
+      "total": "合计",
      "rowTotal": "本行合计",
      "selectAllTypes": "全选种类",
      "setAllTypes": "统一设置所有行的种类",
@@ -285,6 +338,12 @@
        "big": "大",
        "small": "小"
      },
+      "digitPosition": {
+        "0": "千",
+        "1": "百",
+        "2": "十",
+        "3": "个"
+      },
      "filledPlayCount": "已填写 {{count}} 个玩法",
      "tapToFill": "点击填写玩法金额",
      "rowActual": "实扣",
@@ -431,11 +490,15 @@
  "wallet": {
    "title": "钱包",
    "subtitle": "余额与划转记录",
-    "creditTitle": "信用",
-    "creditSubtitle": "额度占用与账期流水",
+    "creditTitle": "额度",
+    "creditSubtitle": "可用额度与账期结算",
    "balance": "钱包余额",
-    "creditAvailable": "可用信用",
+    "creditAvailable": "可用额度",
+    "creditAvailableHint": "当前可用于下注",
+    "creditDetails": "额度详情",
    "creditSummary": "授信 {{limit}} · 已用 {{used}}",
+    "creditLimit": "总额度",
+    "usedCredit": "使用中",
    "creditNoTransferHint": "由代理授信，无需主站转入转出；中奖不即时派彩，盈亏在账期统一结算，额度调整请联系代理。",
    "available": "可用 {{amount}}",
    "transferIn": "转入",
@@ -445,9 +508,13 @@
    "logs": "流水",
    "logsTitle": "钱包流水",
    "logsSubtitle": "划转与下注记录",
-    "creditLogsTitle": "信用流水",
-    "creditLogsSubtitle": "占用、释额与账期收付",
+    "creditLogsTitle": "额度与结算记录",
+    "creditLogsSubtitle": "下注、开奖结果与账期结算",
    "typeFilter": "类型筛选",
+    "logType": "类型",
+    "logTime": "时间",
+    "logRef": "关联单号",
+    "logAmount": "金额",
    "transferInTitle": "转入资金",
    "transferOutTitle": "转出资金",
    "transferInSubtitle": "转入彩票钱包（{{currency}}）",
@@ -480,17 +547,17 @@
    "viewPendingReconcile": "查看待对账详情（{{count}}）",
    "pendingStatus": "处理中",
    "flowsTitle": "资金流水",
-    "creditFlowsTitle": "信用流水",
+    "creditFlowsTitle": "额度与结算记录",
    "playerChannel": {
      "credit": "信用盘：展示下注冻结、开奖结算与账期收付（非钱包派彩）",
      "wallet": "主站钱包玩家（划转与钱包余额流水）"
    },
-    "creditAvailableAfter": "变更后可用信用",
+    "creditAvailableAfter": "变更后可用额度",
    "creditReleasedAmount": "释额 {{amount}}",
    "creditPaymentRecordOnly": "账期收付记账，不计入可用信用",
    "totalRecords": "共 {{total}} 条记录",
    "emptyLogs": "暂无流水",
-    "emptyCreditLogs": "暂无信用流水",
+    "emptyCreditLogs": "暂无额度与结算记录",
    "noMoreLogs": "没有更多流水",
    "balanceAfter": "变更后余额",
    "wsBalanceUpdated": "余额 {{change}}（{{reason}}）",
@@ -513,11 +580,11 @@
    },
    "creditFlow": {
      "all": "全部",
-      "bet": "下注冻结",
-      "game_settlement": "开奖结算",
+      "bet": "下注",
+      "game_settlement": "开奖结果",
      "rebate": "账期回水",
      "credit_release": "释额",
-      "bill_settlement": "账期收付",
+      "bill_settlement": "账期结算",
      "win_credit": "中奖释额",
      "refund": "账期确认释额",
      "reversal": "退本释额"
@@ -560,8 +627,29 @@
      "1009": "主站未能完成本次划转，请稍后重试。",
      "1010": "请勿用同一幂等键发起不同金额的转账。"
    },
-    "settlementTitle": "我的账期账单",
-    "settlementHint": "只显示未结清账单，中奖超出授信的部分在这里结算。",
+    "activity": {
+      "bet": "下注",
+      "settledLoss": "未中奖",
+      "settledWin": "中奖",
+      "result": "开奖结果",
+      "refunded": "已退款",
+      "periodPaid": "已付款",
+      "periodReceived": "已收款",
+      "awaitingDraw": "待开奖",
+      "processing": "处理中",
+      "reversed": "已冲正",
+      "details": "查看明细",
+      "stake": "下注金额",
+      "win": "中奖金额",
+      "rebate": "回水",
+      "ticketCount": "注单数量",
+      "ticketCountValue": "{{count}}项",
+      "viewOrder": "查看注单"
+    },
+    "settlementTitle": "账期结算",
+    "settlementHint": "查看当前需要收取或支付的金额。",
+    "settlementClear": "当前无需结算",
+    "settlementDetails": "查看账期明细",
    "settlementPendingCount": "{{count}}笔",
    "pendingReceivable": "待收",
    "pendingPayable": "待付",
--- a/src/lib/iframe-origins.ts
+++ b/src/lib/iframe-origins.ts
@@ -111,6 +111,42 @@ export function isIframeOriginAllowed(origin: string): boolean {
  return allowedOrigins.includes(normalized);
 }

+function isPlainMessageObject(value: unknown): value is Record<string, unknown> {
+  if (Object.prototype.toString.call(value) !== "[object Object]") return false;
+
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+}
+
+/** 仅接收当前 iframe 的真实父窗口发来的白名单消息。 */
+export async function resolveTrustedParentMessage(
+  event: MessageEvent,
+): Promise<Record<string, unknown> | null> {
+  if (typeof window === "undefined" || window.parent === window) {
+    return null;
+  }
+  if (event.source !== window.parent) {
+    return null;
+  }
+
+  if (!isIframeOriginAllowed(event.origin)) {
+    await loadIframeAllowedOrigins(true);
+    if (!isIframeOriginAllowed(event.origin)) {
+      return null;
+    }
+  }
+
+  return isPlainMessageObject(event.data) ? event.data : null;
+}
+
+export function messageToken(data: Record<string, unknown>): string | null {
+  const token = data.token;
+  if (typeof token !== "string") return null;
+
+  const trimmed = token.trim();
+  return trimmed === "" ? null : trimmed;
+}
+
 /** postMessage 目标：优先 referrer 对应白名单，否则取首个白名单 origin；无白名单时拒绝发送 */
 export function resolvePostMessageTargetOrigin(): string | null {
  const allowedOrigins = getKnownIframeAllowedOrigins();
--- a/src/lib/iframe-token-refresh-events.ts
+++ b/src/lib/iframe-token-refresh-events.ts
@@ -0,0 +1,17 @@
+type TokenRefreshListener = (token: string) => void;
+
+const listeners = new Set<TokenRefreshListener>();
+
+/**
+ * iframe bridge 是唯一的 window.message 消费者；续签 Hook 通过此内部通道接收结果，
+ * 避免多个全局监听器重复校验、重复写入同一 Token。
+ */
+export function publishIframeTokenRefresh(token: string): void {
+  listeners.forEach((listener) => listener(token));
+}
+
+export function subscribeIframeTokenRefresh(listener: TokenRefreshListener): () => void {
+  listeners.add(listener);
+
+  return () => listeners.delete(listener);
+}
--- a/src/lib/jwt-payload.ts
+++ b/src/lib/jwt-payload.ts
@@ -20,4 +20,14 @@ export function parseJwtExp(token: string | null): number | null {
  const payload = parseJwtPayload(token);
  const exp = payload?.exp;
  return typeof exp === "number" ? exp : null;
-}
+}
+
+/** 返回原生玩家 JWT 的单设备会话版本；非原生或解析失败返回 null。 */
+export function parseJwtSessionVersion(token: string | null): number | null {
+  if (!token) return null;
+  const payload = parseJwtPayload(token);
+  const sessionVersion = payload?.session_version;
+  return typeof sessionVersion === "number" && Number.isInteger(sessionVersion)
+    ? sessionVersion
+    : null;
+}
--- a/src/lib/lottery-echo.ts
+++ b/src/lib/lottery-echo.ts
@@ -1,6 +1,8 @@
 import Echo from "laravel-echo";
 import Pusher from "pusher-js";

+import { getPlayerBearerTokenPayload } from "@/lib/lottery-auth";
+
 /** 需在浏览器挂载 Pusher（Reverb 走 pusher-js 协议） */
 function ensurePusherOnWindow(): void {
  if (typeof window === "undefined") return;
@@ -106,6 +108,17 @@ export function getLotteryEcho(): Echo<"reverb"> | null {
      forceTLS,
      enabledTransports: forceTLS ? ["ws", "wss"] : ["ws"],
      disableStats: true,
+      channelAuthorization: {
+        endpoint: "/api/broadcasting/auth",
+        transport: "ajax",
+        headersProvider: () => {
+          const bearerToken = getPlayerBearerTokenPayload();
+
+          return bearerToken
+            ? { Authorization: `Bearer ${bearerToken}` }
+            : {};
+        },
+      },
    });
  }

--- a/src/lib/lottery-http.ts
+++ b/src/lib/lottery-http.ts
@@ -32,6 +32,7 @@ export const lotteryHttp = axios.create({

 /** 凭据类 401（非 token 失效），不应触发「会话过期」跳转 */
 const PLAYER_CREDENTIAL_BIZ_CODES = new Set([8006]);
+const PLAYER_SESSION_REPLACED_BIZ_CODE = 8010;

 function isPlayerAuthLoginRequest(config: AxiosRequestConfig | undefined): boolean {
  if (!config || (config.method ?? "get").toLowerCase() !== "post") {
@@ -73,16 +74,26 @@ lotteryHttp.interceptors.response.use(

      // 401: 已登录态 token 失效 → 清会话并回入口；登录凭据错误等由页面自行提示
      if (status === 401) {
+        const body = error.response?.data;
+        const sessionReplaced =
+          isApiEnvelope(body) && body.code === PLAYER_SESSION_REPLACED_BIZ_CODE;
        const redirectSessionExpired = shouldRedirectPlayerSessionExpired(error);
        if (redirectSessionExpired || window.location.pathname === "/login") {
          usePlayerSessionStore.getState().clearBearerToken();
        }
        if (redirectSessionExpired) {
          const pathname = window.location.pathname;
-          const alreadyExpired = window.location.search.includes("session=expired");
-          const expiredTarget = isInIframe() ? "/?session=expired" : "/login?session=expired";
+          const sessionStatus = sessionReplaced ? "replaced" : "expired";
+          const alreadyOnTarget = window.location.search.includes(
+            `session=${sessionStatus}`,
+          );
+          const expiredTarget = sessionReplaced
+            ? "/login?session=replaced"
+            : isInIframe()
+              ? "/?session=expired"
+              : "/login?session=expired";
          const onExpiredPage =
-            (pathname === "/" || pathname === "/login") && alreadyExpired;
+            (pathname === "/" || pathname === "/login") && alreadyOnTarget;
          if (!onExpiredPage) {
            window.location.replace(expiredTarget);
          }
@@ -185,4 +196,4 @@ export const lotteryRequest = {
    data?: unknown,
    config?: Omit<AxiosRequestConfig, "url" | "method" | "data">,
  ) => request<T>({ ...config, url, method: "PATCH", data }),
-};
+};
--- a/src/lib/player-spacing.ts
+++ b/src/lib/player-spacing.ts
@@ -1,8 +1,8 @@
 /** 主滚动区外边距（灰底区域与顶栏/底栏留白） */
-export const playerMainInset = "px-2 pt-2 pb-2 lg:px-5 lg:pt-5 lg:pb-5";
+export const playerMainInset = "px-2 pt-2 pb-2 lg:px-4 lg:pt-4 lg:pb-4";

 /** 页内白卡片内边距（桌面主内容已是白卡片，减少二次 padding） */
-export const playerPageShellPadding = "px-2 pt-2 pb-4 lg:px-1 lg:pt-1 lg:pb-2";
+export const playerPageShellPadding = "px-2 pt-2 pb-4 lg:px-0 lg:pt-0 lg:pb-1";

 /** 大厅等直接写在 section 上的内边距 */
 export const playerPageInset = playerPageShellPadding;
--- a/src/types/api/wallet-logs.ts
+++ b/src/types/api/wallet-logs.ts
@@ -15,6 +15,18 @@ export type WalletLogItem = {
  balance_after: number | null;
  /** 信用盘：false 表示账期收付/账期回水展示记录，不改变可用信用 */
  affects_available_credit?: boolean;
+  /** 信用盘玩家视图：按业务事件聚合后的活动类型 */
+  activity_kind?: "bet" | "draw_result" | "period_settlement" | "refund";
+  activity_status?: "pending" | "completed" | "reversed";
+  order_no?: string | null;
+  draw_no?: string | null;
+  ticket_no?: string | null;
+  ticket_count?: number;
+  settlement_bill_id?: number | null;
+  stake_amount?: number;
+  win_amount?: number;
+  rebate_amount?: number;
+  net_amount?: number;
  ref_id: string | null;
  idempotent_key: string | null;
  external_ref_no: string | null;
Author	SHA1	Message	Date
wchino	827f369eb6	feat(player): improve wallet activity and session handling Some checks failed lotteryfront CI / build (push) Has been cancelled Details	2026-07-22 20:53:43 +08:00
wchino	508b28df22	fix(player): harden realtime auth and refactor hall betting	2026-07-22 01:40:37 +08:00
wchino	5ef2e09b04	fix(iframe): validate trusted parent messages	2026-07-21 23:41:18 +08:00
wchino	9b3eae1896	fix(hall): freeze ticket preview submissions	2026-07-21 23:41:18 +08:00
wchino	912cd01383	chore(deps): secure local frontend build	2026-07-21 23:41:18 +08:00
wchino	8307cc3f88	feat(player): 优化桌面投注布局与账号功能	2026-07-21 21:11:07 +08:00