diff --git a/apps/admin/src/App.vue b/apps/admin/src/App.vue
index 8cbaf7c..17202e8 100644
--- a/apps/admin/src/App.vue
+++ b/apps/admin/src/App.vue
@@ -92,16 +92,42 @@ html, body, #app {
   overflow: hidden;
 }
 
-/* 隐藏滚动条，表格区域仍可滚动 */
-* {
+/* 页面级隐藏滚动条；可滚动区域保留细滚动条便于发现溢出内容 */
+html, body {
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
-*::-webkit-scrollbar {
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
   width: 0;
   height: 0;
   display: none;
 }
+.admin-list-page .table-wrap,
+.dashboard-page,
+.page-scroll,
+.settlement-page,
+.nav {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
+}
+.admin-list-page .table-wrap::-webkit-scrollbar,
+.dashboard-page::-webkit-scrollbar,
+.page-scroll::-webkit-scrollbar,
+.settlement-page::-webkit-scrollbar,
+.nav::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  display: block;
+}
+.admin-list-page .table-wrap::-webkit-scrollbar-thumb,
+.dashboard-page::-webkit-scrollbar-thumb,
+.page-scroll::-webkit-scrollbar-thumb,
+.settlement-page::-webkit-scrollbar-thumb,
+.nav::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.16);
+  border-radius: 3px;
+}
 
 /* 管理端列表页：占满主区域，表头固定、表体滚动，底部分页 */
 .admin-list-page {
@@ -113,7 +139,9 @@ html, body, #app {
 }
 .admin-list-page > .page-toolbar,
 .admin-list-page > .filter-card,
-.admin-list-page > .tool-card {
+.admin-list-page > .tool-card,
+.admin-list-page > .list-chrome,
+.admin-list-page > .list-settings {
   flex-shrink: 0;
 }
 .admin-list-page > .page-toolbar {
@@ -121,27 +149,180 @@ html, body, #app {
   justify-content: flex-end;
   align-items: center;
   gap: 8px;
-  margin-bottom: 16px;
+  margin: 0 0 8px;
 }
 .admin-list-page > .tool-card {
-  margin-bottom: 16px;
+  margin-bottom: 8px;
 }
 .admin-list-page > .filter-card {
-  margin-bottom: 16px;
+  margin-bottom: 8px;
 }
-.admin-list-page > .data-card {
+.admin-list-page > .list-chrome {
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.list-chrome__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: nowrap;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  --list-chrome-control-h: 32px;
+  --el-component-size: 32px;
+}
+.list-chrome__left {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  gap: 12px;
+  flex-wrap: nowrap;
+}
+.list-chrome__filters {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  flex: 1;
+  min-width: 0;
+}
+.list-chrome__field {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.list-chrome__label {
+  flex-shrink: 0;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  letter-spacing: 0.04em;
+  line-height: 1;
+  white-space: nowrap;
+}
+.list-chrome__grow {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  row-gap: 8px;
+}
+.list-chrome__grow.el-form--inline {
+  display: flex !important;
+  align-items: center;
+}
+.list-chrome__left .matches-subnav--embedded {
+  align-self: center;
+  height: var(--list-chrome-control-h);
+}
+.list-chrome__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.list-chrome :deep(.el-form-item) {
+  margin-bottom: 0 !important;
+  margin-right: 12px;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+.list-chrome :deep(.el-form-item__label) {
+  display: inline-flex;
+  align-items: center;
+  height: var(--list-chrome-control-h);
+  line-height: 1;
+  padding: 0 8px 0 0;
+  margin-bottom: 0 !important;
+}
+.list-chrome :deep(.el-form-item__content) {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+}
+.list-chrome :deep(.el-input__wrapper),
+.list-chrome :deep(.el-select__wrapper) {
+  height: var(--list-chrome-control-h) !important;
+  min-height: var(--list-chrome-control-h) !important;
+  box-sizing: border-box;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.list-chrome :deep(.el-input__inner) {
+  height: calc(var(--list-chrome-control-h) - 2px);
+  line-height: calc(var(--list-chrome-control-h) - 2px);
+}
+.list-chrome :deep(.el-button:not(.is-link)) {
+  height: var(--list-chrome-control-h) !important;
+  min-height: var(--list-chrome-control-h) !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  line-height: 1;
+}
+.list-chrome :deep(.el-form-item:last-child) {
+  margin-right: 0;
+}
+.admin-list-page > .list-settings {
+  margin-bottom: 8px;
+}
+.list-settings :deep(.el-collapse-item__header) {
+  height: 36px;
+  line-height: 36px;
+  padding: 0 10px;
+  font-size: 13px;
+  font-weight: 600;
+  background: rgba(255, 255, 255, 0.02);
+  border-color: rgba(255, 255, 255, 0.05);
+}
+.list-settings :deep(.el-collapse-item__wrap) {
+  border-color: rgba(255, 255, 255, 0.05);
+}
+.list-settings :deep(.el-collapse-item__content) {
+  padding: 8px 10px 10px;
+}
+.list-settings-block + .list-settings-block {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+.list-settings-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #aaa;
+  margin-bottom: 6px;
+}
+.admin-list-page > .data-card,
+.admin-list-page > .list-panel {
   flex: 1;
   min-height: 0;
   display: flex;
   flex-direction: column;
-  border-radius: 12px;
+  border-radius: 10px;
+}
+.admin-list-page > .list-panel {
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(18, 18, 18, 0.85);
+  padding: 0 10px 10px;
 }
 .admin-list-page > .data-card .el-card__body {
   flex: 1;
   min-height: 0;
   display: flex;
   flex-direction: column;
-  padding-bottom: 16px;
+  padding: 0 12px 12px;
 }
 .admin-list-page .table-wrap {
   flex: 1;
@@ -154,11 +335,19 @@ html, body, #app {
 .admin-list-page .table-wrap .el-table th.el-table__cell .cell {
   white-space: nowrap;
 }
+.admin-list-page .list-hint {
+  flex-shrink: 0;
+  margin: 0;
+  padding: 6px 0 8px;
+  font-size: 11px;
+  color: #666;
+  line-height: 1.4;
+}
 .admin-list-page .pager {
   flex-shrink: 0;
   display: flex;
   justify-content: flex-end;
-  margin-top: 16px;
+  margin-top: 8px;
   padding-top: 0;
 }
 
@@ -259,6 +448,60 @@ body {
 }
 .el-button--warning  { background: rgba(251,191,36,0.1) !important; border-color: rgba(251,191,36,0.35) !important; color: #fbbf24 !important; }
 .el-button--danger   { background: rgba(255,69,58,0.1) !important;  border-color: rgba(255,69,58,0.35) !important;  color: #ff453a !important; }
+.el-button--primary.is-plain {
+  background: rgba(36, 143, 84, 0.12) !important;
+  border-color: var(--green-border) !important;
+  color: var(--green-text) !important;
+  box-shadow: none !important;
+}
+.el-button--primary.is-plain:hover {
+  background: rgba(36, 143, 84, 0.22) !important;
+  border-color: rgba(120, 230, 170, 0.45) !important;
+  color: #d4fde5 !important;
+}
+.el-button--danger.is-plain {
+  background: rgba(255, 69, 58, 0.08) !important;
+  border-color: rgba(255, 69, 58, 0.35) !important;
+  color: #ff6b62 !important;
+  box-shadow: none !important;
+}
+.el-button--danger.is-plain:hover {
+  background: rgba(255, 69, 58, 0.16) !important;
+  border-color: rgba(255, 120, 110, 0.5) !important;
+  color: #ff8a82 !important;
+}
+.el-button.is-text,
+.el-button.is-link.el-button--default {
+  color: var(--green-text) !important;
+  background: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+.el-button.is-text:hover,
+.el-button.is-link.el-button--default:hover {
+  color: #d4fde5 !important;
+  background: rgba(36, 143, 84, 0.1) !important;
+}
+.el-button--primary.is-plain {
+  background: rgba(36, 143, 84, 0.12) !important;
+  border-color: var(--green-border) !important;
+  color: var(--green-text) !important;
+}
+.el-button--primary.is-plain:hover {
+  background: rgba(36, 143, 84, 0.22) !important;
+  border-color: rgba(120, 230, 170, 0.45) !important;
+  color: #d4fde5 !important;
+}
+.el-button--danger.is-plain {
+  background: rgba(255, 69, 58, 0.08) !important;
+  border-color: rgba(255, 69, 58, 0.35) !important;
+  color: #ff6961 !important;
+}
+.el-button--danger.is-plain:hover {
+  background: rgba(255, 69, 58, 0.18) !important;
+  border-color: rgba(255, 120, 110, 0.5) !important;
+  color: #ff8a82 !important;
+}
 
 .el-tag { border-radius: 4px !important; font-size: 11px !important; font-weight: 600 !important; }
 .el-tag--success {
diff --git a/apps/admin/src/components/AdminSubNav.vue b/apps/admin/src/components/AdminSubNav.vue
new file mode 100644
index 0000000..a3f27bf
--- /dev/null
+++ b/apps/admin/src/components/AdminSubNav.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router';
+import type { AdminBreadcrumbItem } from '../utils/admin-breadcrumb';
+
+defineProps<{
+  crumbs?: AdminBreadcrumbItem[];
+  title: string;
+  subtitle?: string;
+}>();
+</script>
+
+<template>
+  <header class="admin-subnav">
+    <nav v-if="crumbs?.length" class="admin-subnav__crumbs" aria-label="Breadcrumb">
+      <template v-for="(item, i) in crumbs" :key="`${item.label}-${i}`">
+        <RouterLink
+          v-if="item.to && i < crumbs.length - 1"
+          :to="item.to"
+          class="admin-subnav__link"
+        >
+          {{ item.label }}
+        </RouterLink>
+        <span v-else class="admin-subnav__current">{{ item.label }}</span>
+        <span v-if="i < crumbs.length - 1" class="admin-subnav__sep" aria-hidden="true">/</span>
+      </template>
+    </nav>
+    <div class="admin-subnav__main">
+      <div class="admin-subnav__titles">
+        <h1 class="admin-subnav__title">{{ title }}</h1>
+        <span v-if="subtitle" class="admin-subnav__subtitle">{{ subtitle }}</span>
+      </div>
+      <div v-if="$slots.extra" class="admin-subnav__extra">
+        <slot name="extra" />
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.admin-subnav {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 16px;
+  flex-shrink: 0;
+}
+.admin-subnav__crumbs {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px 6px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+.admin-subnav__link {
+  color: var(--green-text);
+  font-weight: 600;
+  transition: color 0.15s;
+}
+.admin-subnav__link:hover {
+  color: #d4fde5;
+}
+.admin-subnav__current {
+  color: #888;
+}
+.admin-subnav__sep {
+  color: #444;
+  user-select: none;
+}
+.admin-subnav__main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.admin-subnav__titles {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  min-width: 0;
+}
+.admin-subnav__title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  color: #e8e8e8;
+  letter-spacing: 0.02em;
+}
+.admin-subnav__subtitle {
+  font-size: 13px;
+  color: #777;
+}
+.admin-subnav__extra {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+</style>
diff --git a/apps/admin/src/components/AdminTableEmpty.vue b/apps/admin/src/components/AdminTableEmpty.vue
new file mode 100644
index 0000000..d86b262
--- /dev/null
+++ b/apps/admin/src/components/AdminTableEmpty.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useAdminLocale } from '../composables/useAdminLocale';
+
+const { t } = useAdminLocale();
+
+defineProps<{
+  text?: string;
+  hint?: string;
+}>();
+</script>
+
+<template>
+  <div class="admin-table-empty">
+    <div class="admin-table-empty__icon" aria-hidden="true">
+      <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+        <rect x="6" y="10" width="28" height="22" rx="3" stroke="currentColor" stroke-width="1.5" opacity="0.35" />
+        <path d="M14 18h12M14 23h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.25" />
+      </svg>
+    </div>
+    <p class="admin-table-empty__text">{{ text ?? t('common.no_data') }}</p>
+    <p v-if="hint" class="admin-table-empty__hint">{{ hint }}</p>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.admin-table-empty {
+  padding: 28px 16px;
+  text-align: center;
+}
+.admin-table-empty__icon {
+  color: var(--green-text);
+  opacity: 0.45;
+  margin-bottom: 8px;
+  display: flex;
+  justify-content: center;
+}
+.admin-table-empty__text {
+  font-size: 13px;
+  color: var(--text-muted);
+}
+.admin-table-empty__hint {
+  font-size: 12px;
+  color: #555;
+  margin-top: 4px;
+}
+</style>
diff --git a/apps/admin/src/components/MatchesSubNav.vue b/apps/admin/src/components/MatchesSubNav.vue
new file mode 100644
index 0000000..4ca52d3
--- /dev/null
+++ b/apps/admin/src/components/MatchesSubNav.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { RouterLink, useRoute } from 'vue-router';
+import { useAdminLocale } from '../composables/useAdminLocale';
+
+const { t } = useAdminLocale();
+const route = useRoute();
+
+withDefaults(
+  defineProps<{
+    embedded?: boolean;
+  }>(),
+  { embedded: false },
+);
+
+const tabs = [
+  { path: '/matches', labelKey: 'nav.matches.fixtures' },
+  { path: '/matches/outrights', labelKey: 'nav.matches.outrights' },
+];
+
+function isActive(path: string) {
+  if (path === '/matches/outrights') {
+    return route.path === '/matches/outrights';
+  }
+  return (
+    route.path === '/matches' ||
+    (route.path.startsWith('/matches/') &&
+      !route.path.startsWith('/matches/outrights'))
+  );
+}
+</script>
+
+<template>
+  <nav
+    class="matches-subnav"
+    :class="{ 'matches-subnav--embedded': embedded }"
+    aria-label="Matches sections"
+  >
+    <RouterLink
+      v-for="tab in tabs"
+      :key="tab.path"
+      :to="tab.path"
+      class="matches-subnav__item"
+      :class="{ 'matches-subnav__item--active': isActive(tab.path) }"
+    >
+      {{ t(tab.labelKey) }}
+    </RouterLink>
+  </nav>
+</template>
+
+<style scoped>
+.matches-subnav {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 16px;
+  padding: 4px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  flex-shrink: 0;
+}
+.matches-subnav--embedded {
+  margin-bottom: 0;
+  padding: 0 12px 0 0;
+  border: none;
+  border-right: 1px solid rgba(255, 255, 255, 0.08);
+  background: transparent;
+  flex-shrink: 0;
+  height: 32px;
+  box-sizing: border-box;
+}
+.matches-subnav__item {
+  padding: 0 12px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #888;
+  transition: color 0.15s, background 0.15s;
+}
+.matches-subnav__item:hover {
+  color: #ccc;
+  background: rgba(255, 255, 255, 0.04);
+}
+.matches-subnav__item--active {
+  color: var(--green-text);
+  background: rgba(0, 200, 83, 0.1);
+}
+</style>
diff --git a/apps/admin/src/data/builtinCountries.ts b/apps/admin/src/data/builtinCountries.ts
index 2515a57..24e23e5 100644
--- a/apps/admin/src/data/builtinCountries.ts
+++ b/apps/admin/src/data/builtinCountries.ts
@@ -155,6 +155,20 @@ export function countryOptionLabel(c: BuiltinCountry, locale: string): string {
   return `${countryDisplayName(c, locale)} (${c.code})`;
 }
 
+/** 冠军盘队伍行：按后台语言只显示一种队名 */
+export function teamRowDisplayName(
+  row: { teamCode: string; teamZh: string; teamEn: string },
+  locale: string,
+): string {
+  const builtin = getBuiltinCountry(row.teamCode);
+  if (builtin) return countryDisplayName(builtin, locale);
+  if (locale === 'en-US') return row.teamEn || row.teamZh || row.teamCode;
+  if (locale === 'ms-MY') {
+    return NATIONAL_TEAM_MS[row.teamCode] ?? row.teamEn ?? row.teamZh ?? row.teamCode;
+  }
+  return row.teamZh || row.teamEn || row.teamCode;
+}
+
 function countryNameMs(c: BuiltinCountry): string {
   return NATIONAL_TEAM_MS[c.code] ?? c.nameEn;
 }
diff --git a/apps/admin/src/i18n/admin-messages.ts b/apps/admin/src/i18n/admin-messages.ts
index cfba5e8..5087abe 100644
--- a/apps/admin/src/i18n/admin-messages.ts
+++ b/apps/admin/src/i18n/admin-messages.ts
@@ -29,7 +29,7 @@ const zh: Record<string, string> = {
   'login.captcha_ph': '验证码',
   'login.captcha_refresh': '点击刷新',
 
-  'nav.dashboard': '控制台',
+  'nav.dashboard': '概览',
   'nav.users': '玩家管理',
   'nav.agents': '代理管理',
   'nav.matches': '赛事管理',
@@ -41,6 +41,12 @@ const zh: Record<string, string> = {
   'nav.players': '直属玩家',
   'nav.subAgents': '下级代理',
   'nav.myBets': '注单查询',
+  'nav.open_menu': '打开菜单',
+  'nav.close_menu': '关闭菜单',
+  'breadcrumb.settlement': '赛事结算',
+  'breadcrumb.match_edit': '编辑赛事',
+  'breadcrumb.match_markets': '盘口管理',
+  'breadcrumb.outright_edit': '编辑优胜冠军',
   'role.admin': '系统管理员',
   'role.agent': '代理账号',
   'logout': '退出',
@@ -57,10 +63,12 @@ const zh: Record<string, string> = {
   'common.delete': '删除',
   'common.cancel': '取消',
   'common.confirm': '确定',
+  'common.retry': '重试',
   'common.status': '状态',
   'common.type': '类型',
   'common.keyword': '关键词',
   'common.actions': '操作',
+  'common.more': '更多',
   'common.loading': '加载中…',
   'common.no_data': '暂无数据',
   'common.yesterday': '昨日',
@@ -73,7 +81,7 @@ const zh: Record<string, string> = {
   'common.platform_direct': '平台直属',
   'common.updated_at': '更新于',
 
-  'dash.title': '控制台',
+  'dash.title': '概览',
   'dash.desc': '平台整体运行概况',
   'dash.board_title': '整体概览',
   'dash.board_hint': '一屏查看经营趋势与平台分布',
@@ -85,6 +93,7 @@ const zh: Record<string, string> = {
   'dash.kpi_new_players': '今日新增 {n} 人',
   'dash.kpi_pending': '待结算',
   'dash.kpi_pending_sub': '{bets} 单 · {matches} 场赛事',
+  'dash.load_error_hint': '无法加载概览数据，请检查网络或稍后重试。',
   'dash.kpi_wallet': '玩家余额',
   'dash.kpi_credit': '代理授信',
   'dash.trend_caption': '近 7 日经营趋势（金额折线 + 注单柱）',
@@ -114,6 +123,8 @@ const zh: Record<string, string> = {
   'page.users.desc': '创建玩家、查看余额与投注概况，支持上分与状态管理',
   'page.agents.title': '代理管理',
   'page.agents.desc': '创建一级代理、调整授信额度、查看直属玩家与额度占用',
+  'nav.matches.fixtures': '赛事配置',
+  'nav.matches.outrights': '优胜赛配置（盘口）',
   'page.matches.title': '赛事管理',
   'page.matches.desc': '草稿可编辑、删除；已发布可改开赛时间与热门',
   'page.bets.title': '注单管理',
@@ -182,7 +193,7 @@ const en: Record<string, string> = {
   'login.captcha_ph': 'Captcha',
   'login.captcha_refresh': 'Click to refresh',
 
-  'nav.dashboard': 'Dashboard',
+  'nav.dashboard': 'Overview',
   'nav.users': 'Players',
   'nav.agents': 'Agents',
   'nav.matches': 'Matches',
@@ -194,6 +205,12 @@ const en: Record<string, string> = {
   'nav.players': 'My Players',
   'nav.subAgents': 'Sub-Agents',
   'nav.myBets': 'Bet Search',
+  'nav.open_menu': 'Open menu',
+  'nav.close_menu': 'Close menu',
+  'breadcrumb.settlement': 'Settlement',
+  'breadcrumb.match_edit': 'Edit match',
+  'breadcrumb.match_markets': 'Markets',
+  'breadcrumb.outright_edit': 'Edit outright',
   'role.admin': 'Administrator',
   'role.agent': 'Agent',
   'logout': 'Logout',
@@ -210,10 +227,12 @@ const en: Record<string, string> = {
   'common.delete': 'Delete',
   'common.cancel': 'Cancel',
   'common.confirm': 'OK',
+  'common.retry': 'Retry',
   'common.status': 'Status',
   'common.type': 'Type',
   'common.keyword': 'Keyword',
   'common.actions': 'Actions',
+  'common.more': 'More',
   'common.loading': 'Loading…',
   'common.no_data': 'No data',
   'common.yesterday': 'Yesterday',
@@ -226,7 +245,7 @@ const en: Record<string, string> = {
   'common.platform_direct': 'Platform direct',
   'common.updated_at': 'Updated',
 
-  'dash.title': 'Dashboard',
+  'dash.title': 'Overview',
   'dash.desc': 'Platform overview',
   'dash.board_title': 'Overview',
   'dash.board_hint': 'Trends and distribution at a glance',
@@ -238,6 +257,7 @@ const en: Record<string, string> = {
   'dash.kpi_new_players': '{n} new today',
   'dash.kpi_pending': 'Pending settlement',
   'dash.kpi_pending_sub': '{bets} bets · {matches} matches',
+  'dash.load_error_hint': 'Could not load overview data. Check your connection and try again.',
   'dash.kpi_wallet': 'Player balance',
   'dash.kpi_credit': 'Agent credit',
   'dash.trend_caption': 'Last 7 days (amount lines + bet bars)',
@@ -267,6 +287,8 @@ const en: Record<string, string> = {
   'page.users.desc': 'Create players, balances, stakes, top-ups, and status',
   'page.agents.title': 'Agents',
   'page.agents.desc': 'Tier-1 agents, credit limits, players, and usage',
+  'nav.matches.fixtures': 'Fixtures',
+  'nav.matches.outrights': 'Outright odds',
   'page.matches.title': 'Matches',
   'page.matches.desc': 'Edit/delete drafts; adjust kickoff and featured when published',
   'page.bets.title': 'Bets',
@@ -335,7 +357,7 @@ const ms: Record<string, string> = {
   'login.captcha_ph': 'Captcha',
   'login.captcha_refresh': 'Klik untuk muat semula',
 
-  'nav.dashboard': 'Papan pemuka',
+  'nav.dashboard': 'Gambaran',
   'nav.users': 'Pemain',
   'nav.agents': 'Ejen',
   'nav.matches': 'Perlawanan',
@@ -347,6 +369,12 @@ const ms: Record<string, string> = {
   'nav.players': 'Pemain saya',
   'nav.subAgents': 'Sub-ejen',
   'nav.myBets': 'Carian pertaruhan',
+  'nav.open_menu': 'Buka menu',
+  'nav.close_menu': 'Tutup menu',
+  'breadcrumb.settlement': 'Penyelesaian',
+  'breadcrumb.match_edit': 'Edit perlawanan',
+  'breadcrumb.match_markets': 'Pasaran',
+  'breadcrumb.outright_edit': 'Edit juara',
   'role.admin': 'Pentadbir',
   'role.agent': 'Ejen',
   'logout': 'Log keluar',
@@ -363,10 +391,12 @@ const ms: Record<string, string> = {
   'common.delete': 'Padam',
   'common.cancel': 'Batal',
   'common.confirm': 'OK',
+  'common.retry': 'Cuba lagi',
   'common.status': 'Status',
   'common.type': 'Jenis',
   'common.keyword': 'Kata kunci',
   'common.actions': 'Tindakan',
+  'common.more': 'Lagi',
   'common.loading': 'Memuatkan…',
   'common.no_data': 'Tiada data',
   'common.yesterday': 'Semalam',
@@ -379,7 +409,7 @@ const ms: Record<string, string> = {
   'common.platform_direct': 'Terus platform',
   'common.updated_at': 'Dikemas kini',
 
-  'dash.title': 'Papan pemuka',
+  'dash.title': 'Gambaran',
   'dash.desc': 'Gambaran keseluruhan platform',
   'dash.board_title': 'Gambaran',
   'dash.board_hint': 'Trend dan taburan sepintas lalu',
@@ -391,6 +421,7 @@ const ms: Record<string, string> = {
   'dash.kpi_new_players': '{n} baharu hari ini',
   'dash.kpi_pending': 'Menunggu penyelesaian',
   'dash.kpi_pending_sub': '{bets} pertaruhan · {matches} perlawanan',
+  'dash.load_error_hint': 'Tidak dapat memuatkan data gambaran. Semak sambungan dan cuba lagi.',
   'dash.kpi_wallet': 'Baki pemain',
   'dash.kpi_credit': 'Kredit ejen',
   'dash.trend_caption': '7 hari lepas (garis jumlah + palang pertaruhan)',
@@ -420,6 +451,8 @@ const ms: Record<string, string> = {
   'page.users.desc': 'Cipta pemain, baki, stake, tambah baki dan status',
   'page.agents.title': 'Ejen',
   'page.agents.desc': 'Ejen peringkat 1, had kredit, pemain dan penggunaan',
+  'nav.matches.fixtures': 'Konfigurasi perlawanan',
+  'nav.matches.outrights': 'Odds juara',
   'page.matches.title': 'Perlawanan',
   'page.matches.desc': 'Edit/padam draf; laraskan masa mula dan pilihan utama bila diterbitkan',
   'page.bets.title': 'Pertaruhan',
diff --git a/apps/admin/src/i18n/admin-pages-ms.ts b/apps/admin/src/i18n/admin-pages-ms.ts
index 25ec70d..fcead04 100644
--- a/apps/admin/src/i18n/admin-pages-ms.ts
+++ b/apps/admin/src/i18n/admin-pages-ms.ts
@@ -60,6 +60,7 @@ export const adminPagesMs: Record<string, string> = {
   'user.btn.hide_password': 'Sembunyi',
   'user.ph.reset_password': 'Biarkan kosong untuk kekalkan; nilai baharu boleh dilihat',
   'user.ph.reset_password_short': 'Biarkan kosong',
+  'user.page_settings': 'Tetapan global',
   'user.global_settings': 'Kata laluan & akaun (global)',
   'user.global_settings_hint': 'Kawal sama ada semua pemain boleh ubah kata laluan/nama akaun dalam app',
   'user.section.password_mgmt': 'Pengurusan kata laluan',
@@ -128,6 +129,7 @@ export const adminPagesMs: Record<string, string> = {
   'match.btn.markets': 'Pasaran',
   'match.filter.keyword_ph': 'Nama kejohanan / kod pasukan',
   'match.col.league': 'Kejohanan',
+  'match.col.league_en': 'Liga (EN)',
   'match.col.fixture_count': 'Perlawanan',
   'match.col.bet_count': 'Pertaruhan',
   'match.col.total_stake': 'Jumlah stake',
@@ -148,6 +150,8 @@ export const adminPagesMs: Record<string, string> = {
   'match.field.lang_en': 'EN',
   'match.field.lang_ms': 'MS',
   'match.field.kickoff': 'Masa mula',
+  'match.field.home_team': 'Pasukan tuan rumah',
+  'match.field.away_team': 'Pasukan pelawat',
   'match.field.home_en': 'Tuan rumah (EN)',
   'match.field.home_zh': 'Tuan rumah (ZH)',
   'match.field.home_ms': 'Tuan rumah (MS)',
@@ -158,7 +162,14 @@ export const adminPagesMs: Record<string, string> = {
   'match.hint.create_draft': 'Disimpan sebagai draf; kembangkan kejohanan dan terbitkan setiap perlawanan tunggal.',
   'match.hint.create_league': 'Cipta kejohanan dahulu, kemudian kembangkan untuk tambah perlawanan tunggal.',
   'match.hint.edit_published': 'Diterbitkan: edit masa mula, pilihan utama, nama paparan; tertutup/selesai dikunci.',
-  'match.expand_league_hint': 'Kembangkan kejohanan untuk senarai perlawanan; klik Pasaran untuk halaman tetapan odds (sama seperti aplikasi pemain).',
+  'match.expand_league_hint': 'Kembangkan liga untuk urus perlawanan; odds juara di tab Odds juara.',
+  'match.expand_outright_hint': 'Kembangkan liga untuk sunting odds juara; pasukan perlawanan disegerakkan auto, boleh tambah pasukan belum dijadualkan.',
+  'outright.odds_only_hint': 'Pasukan daripada perlawanan disegerakkan auto; boleh tambah pasukan manual dan sunting odds di sini.',
+  'outright.col.teams_from_fixtures': 'Pasukan (daripada perlawanan)',
+  'outright.col.teams_total': 'Pasukan odds juara',
+  'outright.empty_no_teams': 'Tiada pasukan — tambah perlawanan di Konfigurasi atau klik Tambah pasukan.',
+  'match.outright.setup': 'Sediakan',
+  'match.outright.section_hint': 'Pasaran juara untuk liga ini; perlawanan disenaraikan di bawah',
   'match.expand_markets_hint': 'Klik Pasaran pada perlawanan tunggal untuk halaman pasaran berasingan.',
   'match.no_fixtures': 'Tiada perlawanan tunggal di bawah kejohanan ini.',
   'match.ph.league_ms': 'Piala Dunia 2027',
@@ -173,6 +184,7 @@ export const adminPagesMs: Record<string, string> = {
   'bet.col.agent': 'Ejen',
   'bet.col.selection': 'Pilihan',
   'bet.col.content': 'Kandungan taruhan',
+  'bet.content.bet_counts': '{singles} tunggal · {parlays} parlay',
   'bet.col.match': 'Perlawanan',
   'bet.legs_more': '+{n} lagi…',
   'bet.col.selection_count': 'Bil. pilihan',
@@ -319,6 +331,8 @@ export const adminPagesMs: Record<string, string> = {
   'err.password_mismatch': 'Kata laluan tidak sepadan',
   'err.credit_negative': 'Had kredit tidak boleh negatif',
   'err.kickoff_required': 'Sila isi masa mula',
+  'err.team_country_required': 'Pilih pasukan tuan rumah dan pelawat',
+  'err.team_country_required': 'Pilih pasukan tuan rumah dan pelawat',
   'err.teams_required': 'Isi nama pasukan tuan rumah dan pelawat (ZH atau EN)',
   'err.teams_same': 'Pasukan tuan rumah dan pelawat mesti berbeza',
   'err.league_required': 'Sila isi nama liga',
@@ -485,6 +499,37 @@ export const adminPagesMs: Record<string, string> = {
   'outright.field.title_en': 'Tajuk (EN)',
   'outright.field.title_ms': 'Tajuk (MS)',
   'outright.btn.create_event': 'Acara juara baharu',
+  'outright.fixtures_sync_hint': 'Pasukan daripada perlawanan liga; hanya laraskan odds dan status terbit.',
+  'outright.empty_no_fixtures': 'Tiada perlawanan dalam liga ini — tambah di Konfigurasi perlawanan dahulu.',
+  'outright.btn.add_team': 'Tambah pasukan',
+  'outright.add.filter_fixture': 'Pasukan sedia ada',
+  'outright.add.filter_all': 'Semua terbina dalam',
+  'outright.add.select_all': 'Pilih semua',
+  'outright.add.clear_selection': 'Kosongkan pilihan',
+  'outright.add.selected_count': '{n} dipilih',
+  'outright.add.empty_fixture': 'Tiada pasukan perlawanan untuk ditambah (pasukan dalam perlawanan tetapi belum dalam pasaran juara)',
+  'outright.add.empty_all': 'Semua pasukan terbina dalam sudah dalam pasaran juara',
+  'outright.add.default_odds': 'Odds lalai',
+  'outright.add.search_ph': 'Cari nama atau kod',
+  'outright.add.err_none': 'Sila pilih sekurang-kurangnya satu pasukan',
+  'outright.batch.mode': 'Urus kelompok',
+  'outright.batch.exit': 'Keluar kelompok',
+  'outright.batch.apply_odds': 'Guna odds',
+  'outright.batch.remove': 'Buang terpilih',
+  'outright.batch.confirm_remove': 'Buang {n} pasukan terpilih?',
+  'outright.batch.err_none': 'Sila pilih pasukan dahulu',
+  'outright.batch.apply_ok': 'Odds {n} pasukan dikemas kini — simpan semua odds',
+  'outright.batch.remove_ok': '{n} pasukan dibuang',
+  'outright.batch.remove_partial': '{ok} berjaya, {fail} gagal',
+  'outright.sort.label': 'Susun',
+  'outright.sort.rank': 'Kedudukan',
+  'outright.sort.name': 'Nama pasukan',
+  'outright.sort.code': 'Kod',
+  'outright.sort.odds': 'Odds (semasa)',
+  'outright.sort.saved_odds': 'Odds (disimpan)',
+  'outright.sort.asc': 'Menaik',
+  'outright.sort.desc': 'Menurun',
+  'msg.outright_teams_added': '{n} pasukan ditambah ({skipped} dilangkau)',
   'msg.load_matches_failed': 'Gagal memuatkan perlawanan',
   'msg.cashback_issued': 'Rebat telah dikeluarkan',
   'msg.freeze_confirm_title': '{action} akaun',
diff --git a/apps/admin/src/i18n/admin-pages.ts b/apps/admin/src/i18n/admin-pages.ts
index 1bf6d83..95a42e4 100644
--- a/apps/admin/src/i18n/admin-pages.ts
+++ b/apps/admin/src/i18n/admin-pages.ts
@@ -60,6 +60,7 @@ export const adminPagesZh: Record<string, string> = {
   'user.btn.hide_password': '隐藏',
   'user.ph.reset_password': '留空则不修改；填写后将更新并可查看',
   'user.ph.reset_password_short': '留空不修改',
+  'user.page_settings': '全局设置',
   'user.global_settings': '密码与账号管理（全局）',
   'user.global_settings_hint': '控制所有玩家是否可在 App 内改密码、改账号名',
   'user.section.password_mgmt': '密码管理',
@@ -127,7 +128,9 @@ export const adminPagesZh: Record<string, string> = {
   'match.create_fixture_btn': '+ 新增单场',
   'match.btn.markets': '盘口',
   'match.filter.keyword_ph': '赛事名 / 球队代码',
+  'match.filter.status_hint': '仅筛选展开后的单场列表与「单场」列计数，不会隐藏新建的空联赛',
   'match.col.league': '赛事',
+  'match.col.league_en': '联赛（英文）',
   'match.col.fixture_count': '单场',
   'match.col.bet_count': '注单数',
   'match.col.total_stake': '总投注额',
@@ -148,6 +151,8 @@ export const adminPagesZh: Record<string, string> = {
   'match.field.lang_en': 'EN',
   'match.field.lang_ms': 'MS',
   'match.field.kickoff': '开赛时间',
+  'match.field.home_team': '主队',
+  'match.field.away_team': '客队',
   'match.field.home_en': '主队（英）',
   'match.field.home_zh': '主队（中）',
   'match.field.home_ms': '主队（马来）',
@@ -158,7 +163,14 @@ export const adminPagesZh: Record<string, string> = {
   'match.hint.create_draft': '创建后为草稿，请展开赛事后在单场行点击「发布」并生成盘口。',
   'match.hint.create_league': '创建赛事（联赛）后，展开该行可添加多场单场比赛。',
   'match.hint.edit_published': '已发布：可修改开赛时间、热门及显示名称；封盘/已结算后不可编辑。',
-  'match.expand_league_hint': '展开赛事查看单场列表；点击「盘口」进入单独页面设置盘口与赔率（与玩家端按联赛分组一致）。',
+  'match.expand_league_hint': '展开联赛可管理单场赛事；夺冠盘口请在「优胜赛配置（盘口）」中设置赔率。',
+  'match.expand_outright_hint': '展开联赛可编辑夺冠赔率；单场球队会自动同步，也可手动补充尚未赛程的球队。',
+  'outright.odds_only_hint': '单场赛程中的球队会自动加入；可手动添加尚未参赛的球队，并在此调整赔率。',
+  'outright.col.teams_from_fixtures': '参赛球队（来自单场）',
+  'outright.col.teams_total': '冠军盘球队',
+  'outright.empty_no_teams': '暂无球队，请先在「赛事配置」添加单场或点击「添加队伍」。',
+  'match.outright.setup': '配置',
+  'match.outright.section_hint': '按联赛配置冠军盘，与下方单场列表同属本联赛',
   'match.expand_markets_hint': '在单场列表点击「盘口」进入单独页面设置盘口与赔率。',
   'match.no_fixtures': '该赛事下暂无单场。',
   'match.ph.league_ms': '2027 世界杯',
@@ -173,6 +185,7 @@ export const adminPagesZh: Record<string, string> = {
   'bet.col.agent': '所属代理',
   'bet.col.selection': '选项',
   'bet.col.content': '投注内容',
+  'bet.content.bet_counts': '{singles}单 · {parlays}串',
   'bet.col.match': '赛事',
   'bet.legs_more': '还有 {n} 项…',
   'bet.col.selection_count': '投注项数',
@@ -319,6 +332,7 @@ export const adminPagesZh: Record<string, string> = {
   'err.password_mismatch': '两次密码不一致',
   'err.credit_negative': '授信额度不能为负',
   'err.kickoff_required': '请填写开赛时间',
+  'err.team_country_required': '请选择主客队',
   'err.teams_required': '请填写主客队名称（中文、英文或马来文至少一项）',
   'err.teams_same': '主客队不能相同，请填写不同的队名',
   'err.league_required': '请填写联赛名称（中文、英文或马来文至少一项）',
@@ -518,7 +532,37 @@ export const adminPagesZh: Record<string, string> = {
   'outright.col.player_visible': '玩家端',
   'outright.col.league_en': '联赛（英文）',
   'outright.expand_no_teams': '暂无队伍，请进入编辑页添加',
+  'outright.fixtures_sync_hint': '参赛队伍来自本联赛单场赛程，仅可调整赔率与发布状态。',
+  'outright.empty_no_fixtures': '该联赛暂无单场，请先在「赛事配置」中添加比赛。',
   'outright.btn.add_team': '添加队伍',
+  'outright.add.filter_fixture': '已有队伍',
+  'outright.add.filter_all': '全部内置',
+  'outright.add.select_all': '全选',
+  'outright.add.clear_selection': '取消全选',
+  'outright.add.selected_count': '已选 {n} 支',
+  'outright.add.empty_fixture': '暂无待添加的参赛球队（单场中已有且未在冠军盘的球队会显示在此）',
+  'outright.add.empty_all': '所有内置球队均已加入冠军盘',
+  'outright.add.default_odds': '默认赔率',
+  'outright.add.search_ph': '搜索队名或代码',
+  'outright.add.err_none': '请至少选择一支球队',
+  'outright.batch.mode': '批量管理',
+  'outright.batch.exit': '退出批量',
+  'outright.batch.apply_odds': '应用赔率',
+  'outright.batch.remove': '批量移除',
+  'outright.batch.confirm_remove': '确定移除选中的 {n} 支队伍？',
+  'outright.batch.err_none': '请先选择队伍',
+  'outright.batch.apply_ok': '已更新 {n} 支队伍的赔率，请点击「保存全部赔率」',
+  'outright.batch.remove_ok': '已移除 {n} 支队伍',
+  'outright.batch.remove_partial': '成功 {ok} 支，失败 {fail} 支',
+  'outright.sort.label': '排序',
+  'outright.sort.rank': '排名',
+  'outright.sort.name': '队名',
+  'outright.sort.code': '代码',
+  'outright.sort.odds': '赔率（当前）',
+  'outright.sort.saved_odds': '赔率（已保存）',
+  'outright.sort.asc': '升序',
+  'outright.sort.desc': '降序',
+  'msg.outright_teams_added': '已添加 {n} 支球队（跳过 {skipped} 支）',
   'outright.btn.create_event': '新建冠军赛事',
   'outright.btn.import_wc2026': '导入世界杯 48 强',
   'outright.btn.apply_canonical': '应用世界杯基准表',
@@ -617,6 +661,7 @@ export const adminPagesEn: Record<string, string> = {
   'user.btn.hide_password': 'Hide',
   'user.ph.reset_password': 'Leave empty to keep; new value will be viewable',
   'user.ph.reset_password_short': 'Leave empty to keep',
+  'user.page_settings': 'Global settings',
   'user.global_settings': 'Password & account (global)',
   'user.global_settings_hint': 'Controls whether all players can change password or username in the app',
   'user.section.password_mgmt': 'Password management',
@@ -684,7 +729,9 @@ export const adminPagesEn: Record<string, string> = {
   'match.create_fixture_btn': '+ Add fixture',
   'match.btn.markets': 'Markets',
   'match.filter.keyword_ph': 'Tournament / team code',
+  'match.filter.status_hint': 'Filters fixtures inside a league and the fixture count column; empty leagues stay visible',
   'match.col.league': 'Tournament',
+  'match.col.league_en': 'League (EN)',
   'match.col.fixture_count': 'Fixtures',
   'match.col.bet_count': 'Bets',
   'match.col.total_stake': 'Total stake',
@@ -705,6 +752,8 @@ export const adminPagesEn: Record<string, string> = {
   'match.field.lang_en': 'EN',
   'match.field.lang_ms': 'MS',
   'match.field.kickoff': 'Kickoff time',
+  'match.field.home_team': 'Home team',
+  'match.field.away_team': 'Away team',
   'match.field.home_en': 'Home (EN)',
   'match.field.home_zh': 'Home (ZH)',
   'match.field.home_ms': 'Home (MS)',
@@ -715,7 +764,14 @@ export const adminPagesEn: Record<string, string> = {
   'match.hint.create_draft': 'Saved as draft; expand the tournament and publish each fixture to open markets.',
   'match.hint.create_league': 'Create a tournament first, then expand it to add fixtures.',
   'match.hint.edit_published': 'Published: edit kickoff, featured, display names; closed/settled are locked.',
-  'match.expand_league_hint': 'Expand a tournament to see fixtures; use Markets for a dedicated odds page (same grouping as player app).',
+  'match.expand_league_hint': 'Expand a league to manage fixtures; set winner odds under Outright odds.',
+  'match.expand_outright_hint': 'Expand a league to edit winner odds; fixture teams sync automatically, and you can add teams not yet on the schedule.',
+  'outright.odds_only_hint': 'Teams from fixtures are added automatically; add extra teams manually and edit winner odds here.',
+  'outright.col.teams_from_fixtures': 'Teams (from fixtures)',
+  'outright.col.teams_total': 'Outright teams',
+  'outright.empty_no_teams': 'No teams yet — add fixtures under Fixtures or click Add team.',
+  'match.outright.setup': 'Set up',
+  'match.outright.section_hint': 'Winner market for this league; fixtures are listed below',
   'match.expand_markets_hint': 'Click Markets on a fixture to open the dedicated markets page.',
   'match.no_fixtures': 'No fixtures under this tournament yet.',
   'match.ph.league_ms': 'World Cup 2027',
@@ -730,6 +786,7 @@ export const adminPagesEn: Record<string, string> = {
   'bet.col.agent': 'Agent',
   'bet.col.selection': 'Pick',
   'bet.col.content': 'Selections',
+  'bet.content.bet_counts': '{singles} single · {parlays} parlay',
   'bet.col.match': 'Match',
   'bet.legs_more': '+{n} more…',
   'bet.col.selection_count': 'Legs',
@@ -876,6 +933,7 @@ export const adminPagesEn: Record<string, string> = {
   'err.password_mismatch': 'Passwords do not match',
   'err.credit_negative': 'Credit limit cannot be negative',
   'err.kickoff_required': 'Kickoff time is required',
+  'err.team_country_required': 'Select home and away teams',
   'err.teams_required': 'Enter home and away team names (ZH or EN)',
   'err.teams_same': 'Home and away teams must be different',
   'err.league_required': 'League name is required',
@@ -1076,7 +1134,37 @@ export const adminPagesEn: Record<string, string> = {
   'outright.col.player_visible': 'Player',
   'outright.col.league_en': 'League (EN)',
   'outright.expand_no_teams': 'No teams — open Edit to add',
+  'outright.fixtures_sync_hint': 'Teams come from league fixtures; adjust odds and publish status only.',
+  'outright.empty_no_fixtures': 'No fixtures in this league — add matches under Fixtures first.',
   'outright.btn.add_team': 'Add team',
+  'outright.add.filter_fixture': 'From fixtures',
+  'outright.add.filter_all': 'All built-in',
+  'outright.add.select_all': 'Select all',
+  'outright.add.clear_selection': 'Clear selection',
+  'outright.add.selected_count': '{n} selected',
+  'outright.add.empty_fixture': 'No fixture teams to add (teams in matches but not yet on the outright market)',
+  'outright.add.empty_all': 'All built-in teams are already on the outright market',
+  'outright.add.default_odds': 'Default odds',
+  'outright.add.search_ph': 'Search name or code',
+  'outright.add.err_none': 'Select at least one team',
+  'outright.batch.mode': 'Batch manage',
+  'outright.batch.exit': 'Exit batch',
+  'outright.batch.apply_odds': 'Apply odds',
+  'outright.batch.remove': 'Remove selected',
+  'outright.batch.confirm_remove': 'Remove {n} selected team(s)?',
+  'outright.batch.err_none': 'Select teams first',
+  'outright.batch.apply_ok': 'Updated odds for {n} team(s) — click Save all odds',
+  'outright.batch.remove_ok': 'Removed {n} team(s)',
+  'outright.batch.remove_partial': '{ok} removed, {fail} failed',
+  'outright.sort.label': 'Sort',
+  'outright.sort.rank': 'Rank',
+  'outright.sort.name': 'Team name',
+  'outright.sort.code': 'Code',
+  'outright.sort.odds': 'Odds (current)',
+  'outright.sort.saved_odds': 'Odds (saved)',
+  'outright.sort.asc': 'Ascending',
+  'outright.sort.desc': 'Descending',
+  'msg.outright_teams_added': 'Added {n} team(s) ({skipped} skipped)',
   'outright.btn.create_event': 'New outright event',
   'outright.btn.import_wc2026': 'Import WC 2026 (48)',
   'outright.btn.apply_canonical': 'Apply WC baseline',
diff --git a/apps/admin/src/layouts/ManageLayout.vue b/apps/admin/src/layouts/ManageLayout.vue
index 3e8ac84..ed7a2a8 100644
--- a/apps/admin/src/layouts/ManageLayout.vue
+++ b/apps/admin/src/layouts/ManageLayout.vue
@@ -1,22 +1,25 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { RouterView, RouterLink, useRoute, useRouter } from 'vue-router';
 import { useAuthStore } from '../stores/auth';
 import { useAdminLocale } from '../composables/useAdminLocale';
 import AdminLocaleSwitcher from '../components/AdminLocaleSwitcher.vue';
+import { resolveAdminBreadcrumb } from '../utils/admin-breadcrumb';
 
 const route = useRoute();
 const router = useRouter();
 const auth = useAuthStore();
 const { t } = useAdminLocale();
 
+const sidebarOpen = ref(false);
+const isMobileNav = ref(false);
+
 const adminMenus = computed(() => [
   { path: '/', label: t('nav.dashboard') },
+  { path: '/matches', label: t('nav.matches'), matchPrefix: true },
+  { path: '/bets', label: t('nav.bets') },
   { path: '/users', label: t('nav.users') },
   { path: '/agents', label: t('nav.agents') },
-  { path: '/matches', label: t('nav.matches'), matchPrefix: true },
-  { path: '/outrights', label: t('nav.outrights'), matchPrefix: true },
-  { path: '/bets', label: t('nav.bets') },
   { path: '/cashback', label: t('nav.cashback') },
   { path: '/contents', label: t('nav.contents') },
   { path: '/audit', label: t('nav.audit') },
@@ -25,36 +28,91 @@ const adminMenus = computed(() => [
 const agentMenus = computed(() => [
   { path: '/', label: t('nav.dashboard') },
   { path: '/my-players', label: t('nav.players') },
-  { path: '/sub-agents', label: t('nav.subAgents') },
   { path: '/my-bets', label: t('nav.myBets') },
+  { path: '/sub-agents', label: t('nav.subAgents') },
 ]);
 
 const menus = computed(() => (auth.isAdmin.value ? adminMenus.value : agentMenus.value));
 
+function isMatchesSectionPath(path: string) {
+  return (
+    path === '/matches' ||
+    path.startsWith('/matches/') ||
+    path.startsWith('/outrights/') ||
+    path.startsWith('/settlement/')
+  );
+}
+
 const currentLabel = computed(() => {
   const hit = menus.value.find((m) => {
     if ('matchPrefix' in m && m.matchPrefix) {
-      return route.path === m.path || route.path.startsWith(`${m.path}/`);
+      return isMatchesSectionPath(route.path);
     }
     return route.path === m.path;
   });
   return hit?.label ?? '';
 });
 
+const topbarCrumbs = computed(() => resolveAdminBreadcrumb(route.path, t));
+
 const userInitial = computed(() =>
   (auth.user?.username ?? '').charAt(0).toUpperCase()
 );
 
+function syncMobileNav() {
+  isMobileNav.value = window.matchMedia('(max-width: 1023px)').matches;
+  if (!isMobileNav.value) {
+    sidebarOpen.value = false;
+  }
+}
+
+function toggleSidebar() {
+  sidebarOpen.value = !sidebarOpen.value;
+}
+
+function closeSidebar() {
+  sidebarOpen.value = false;
+}
+
+function onNavClick() {
+  if (isMobileNav.value) {
+    closeSidebar();
+  }
+}
+
 function logout() {
   auth.logout();
   router.push('/login');
 }
+
+onMounted(() => {
+  syncMobileNav();
+  window.addEventListener('resize', syncMobileNav);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', syncMobileNav);
+});
+
+watch(() => route.path, () => {
+  if (isMobileNav.value) {
+    closeSidebar();
+  }
+});
 </script>
 
 <template>
-  <div class="shell">
+  <div class="shell" :class="{ 'shell--nav-open': sidebarOpen && isMobileNav }">
+    <button
+      v-if="isMobileNav && sidebarOpen"
+      type="button"
+      class="sidebar-backdrop"
+      :aria-label="t('nav.close_menu')"
+      @click="closeSidebar"
+    />
+
     <!-- ── Sidebar ── -->
-    <aside class="sidebar">
+    <aside class="sidebar" :class="{ open: sidebarOpen }">
       <div class="brand">
         <img src="/logo.png" alt="TheBet365" class="brand-logo" />
       </div>
@@ -66,22 +124,47 @@ function logout() {
           :class="{
             active:
               route.path === m.path ||
-              ('matchPrefix' in m && m.matchPrefix && route.path.startsWith(`${m.path}/`)),
+              ('matchPrefix' in m && m.matchPrefix && isMatchesSectionPath(route.path)),
           }"
+          @click="onNavClick"
         >
           {{ m.label }}
         </RouterLink>
       </nav>
 
-      <div class="sidebar-foot">TheBet365 &copy; 2025</div>
+      <div class="sidebar-foot">TheBet365 &copy; 2026</div>
     </aside>
 
     <!-- ── Main ── -->
     <div class="main">
       <header class="topbar">
-        <div class="topbar-title">
-          <span class="topbar-accent" />
-          <span>{{ currentLabel }}</span>
+        <div class="topbar-left">
+          <button
+            v-if="isMobileNav"
+            type="button"
+            class="btn-menu"
+            :aria-label="sidebarOpen ? t('nav.close_menu') : t('nav.open_menu')"
+            @click="toggleSidebar"
+          >
+            <span class="menu-icon" aria-hidden="true" />
+          </button>
+          <div class="topbar-title">
+            <span v-if="!topbarCrumbs" class="topbar-accent" />
+            <nav v-if="topbarCrumbs" class="topbar-crumbs" aria-label="Breadcrumb">
+              <template v-for="(item, i) in topbarCrumbs" :key="`${item.label}-${i}`">
+                <RouterLink
+                  v-if="item.to && i < topbarCrumbs.length - 1"
+                  :to="item.to"
+                  class="crumb-link"
+                >
+                  {{ item.label }}
+                </RouterLink>
+                <span v-else class="crumb-current">{{ item.label }}</span>
+                <span v-if="i < topbarCrumbs.length - 1" class="crumb-sep" aria-hidden="true">/</span>
+              </template>
+            </nav>
+            <span v-else class="topbar-page-label">{{ currentLabel }}</span>
+          </div>
         </div>
         <div class="topbar-right">
           <div class="user-chip">
@@ -105,6 +188,7 @@ function logout() {
 
 <style scoped>
 .shell {
+  --sidebar-width: 176px;
   display: flex;
   height: 100vh;
   overflow: hidden;
@@ -112,7 +196,7 @@ function logout() {
 
 /* ── Sidebar ── */
 .sidebar {
-  width: 200px;
+  width: var(--sidebar-width);
   flex-shrink: 0;
   position: fixed;
   top: 0; left: 0; bottom: 0;
@@ -121,18 +205,23 @@ function logout() {
   display: flex;
   flex-direction: column;
   z-index: 100;
+  transition: transform 0.2s ease;
 }
 
 .brand {
-  padding: 20px 16px 18px;
-  border-bottom: 1px solid #181818;
+  height: 56px;
+  min-height: 56px;
+  padding: 0 10px;
+  border-bottom: 1px solid #1a1a1a;
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
 }
 .brand-logo {
-  max-width: 140px;
-  max-height: 48px;
+  max-width: 118px;
+  max-height: 34px;
   width: auto;
   height: auto;
   object-fit: contain;
@@ -141,7 +230,7 @@ function logout() {
 
 .nav {
   flex: 1;
-  padding: 10px 8px;
+  padding: 8px 6px;
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -151,10 +240,10 @@ function logout() {
 .nav-item {
   display: flex;
   align-items: center;
-  padding: 10px 14px;
-  border-radius: 7px;
+  padding: 9px 10px;
+  border-radius: 6px;
   color: #aaa;
-  font-size: 13.5px;
+  font-size: 13px;
   font-weight: 500;
   transition: all 0.15s;
   border-left: 2px solid transparent;
@@ -173,16 +262,27 @@ function logout() {
 }
 
 .sidebar-foot {
-  padding: 12px 16px;
+  padding: 10px 10px;
   font-size: 10px;
   color: #282828;
   border-top: 1px solid #161616;
   letter-spacing: 0.04em;
 }
 
+.sidebar-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: rgba(0, 0, 0, 0.55);
+  cursor: pointer;
+}
+
 /* ── Main ── */
 .main {
-  margin-left: 200px;
+  margin-left: var(--sidebar-width);
   flex: 1;
   min-width: 0;
   display: flex;
@@ -192,23 +292,88 @@ function logout() {
 }
 
 .topbar {
-  position: sticky; top: 0; z-index: 90;
+  position: sticky; top: 0; z-index: 80;
   height: 56px;
+  min-height: 56px;
+  box-sizing: border-box;
   display: flex; align-items: center; justify-content: space-between;
-  padding: 0 24px;
+  padding: 0 28px;
   background: rgba(6, 6, 6, 0.98);
   border-bottom: 1px solid #1a1a1a;
   backdrop-filter: blur(12px);
 }
 
+.topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.btn-menu {
+  display: none;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #2a2a2a;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.03);
+  color: #ccc;
+  transition: border-color 0.15s, background 0.15s;
+}
+.btn-menu:hover {
+  border-color: #444;
+  background: rgba(255, 255, 255, 0.06);
+}
+.menu-icon {
+  display: block;
+  width: 16px;
+  height: 2px;
+  background: currentColor;
+  border-radius: 1px;
+  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
+}
+
 .topbar-title {
-  display: flex; align-items: center; gap: 10px;
+  display: flex; align-items: center; gap: 12px;
   font-size: 15px; font-weight: 700;
   color: #e8e8e8;
   letter-spacing: 0.04em;
+  min-width: 0;
+}
+.topbar-page-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.topbar-crumbs {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px 8px;
+  font-size: 14px;
+  font-weight: 600;
+  min-width: 0;
+}
+.crumb-link {
+  color: var(--green-text);
+  transition: color 0.15s;
+}
+.crumb-link:hover {
+  color: #d4fde5;
+}
+.crumb-current {
+  color: #e8e8e8;
+}
+.crumb-sep {
+  color: #444;
+  font-weight: 400;
+  user-select: none;
 }
 .topbar-accent {
-  width: 3px; height: 15px;
+  width: 3px; height: 16px;
   background: linear-gradient(180deg, var(--green-glow), var(--green-deep));
   border-radius: 2px;
   flex-shrink: 0;
@@ -217,6 +382,7 @@ function logout() {
 
 .topbar-right {
   display: flex; align-items: center; gap: 12px;
+  flex-shrink: 0;
 }
 
 .user-chip {
@@ -269,7 +435,7 @@ function logout() {
 .page-main {
   flex: 1;
   min-height: 0;
-  padding: 28px;
+  padding: 20px 28px 28px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -278,4 +444,37 @@ function logout() {
   flex: 1;
   min-height: 0;
 }
+
+@media (max-width: 1023px) {
+  .sidebar {
+    transform: translateX(-100%);
+    box-shadow: none;
+  }
+  .sidebar.open {
+    transform: translateX(0);
+    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45);
+  }
+  .main {
+    margin-left: 0;
+  }
+  .btn-menu {
+    display: inline-flex;
+  }
+  .page-main {
+    padding: 16px;
+  }
+  .topbar {
+    padding: 0 14px;
+  }
+  .user-info,
+  .portal-tag {
+    display: none;
+  }
+}
+
+@media (max-width: 640px) {
+  .topbar-right {
+    gap: 8px;
+  }
+}
 </style>
diff --git a/apps/admin/src/router/index.ts b/apps/admin/src/router/index.ts
index 67fd41f..377c8ef 100644
--- a/apps/admin/src/router/index.ts
+++ b/apps/admin/src/router/index.ts
@@ -26,6 +26,11 @@ const router = createRouter({
           component: () => import('../views/Matches.vue'),
           meta: { adminOnly: true },
         },
+        {
+          path: 'matches/outrights',
+          component: () => import('../views/MatchesOutrights.vue'),
+          meta: { adminOnly: true },
+        },
         {
           path: 'matches/:matchId/edit',
           name: 'admin-match-edit',
@@ -38,19 +43,14 @@ const router = createRouter({
           component: () => import('../views/matches/MatchMarketsPage.vue'),
           meta: { adminOnly: true },
         },
-        {
-          path: 'outrights',
-          name: 'admin-outrights',
-          component: () => import('../views/outrights/OutrightList.vue'),
-          meta: { adminOnly: true },
-        },
+        { path: 'outrights', redirect: '/matches/outrights' },
         {
           path: 'outrights/:matchId/edit',
           name: 'admin-outright-edit',
-          component: () => import('../views/outrights/OutrightEventEditor.vue'),
+          component: () => import('../views/outrights/OutrightEditRedirect.vue'),
           meta: { adminOnly: true },
         },
-        { path: 'world-cup-outright', redirect: '/outrights' },
+        { path: 'world-cup-outright', redirect: '/matches/outrights' },
         {
           path: 'bets',
           component: () => import('../views/Bets.vue'),
diff --git a/apps/admin/src/utils/admin-breadcrumb.ts b/apps/admin/src/utils/admin-breadcrumb.ts
new file mode 100644
index 0000000..04e0105
--- /dev/null
+++ b/apps/admin/src/utils/admin-breadcrumb.ts
@@ -0,0 +1,42 @@
+export interface AdminBreadcrumbItem {
+  label: string;
+  to?: string;
+}
+
+/** 子页面顶栏面包屑（一级菜单 + 当前子页） */
+export function resolveAdminBreadcrumb(
+  path: string,
+  t: (key: string) => string,
+): AdminBreadcrumbItem[] | null {
+  if (/^\/settlement\/[^/]+/.test(path)) {
+    return [
+      { label: t('nav.matches'), to: '/matches' },
+      { label: t('breadcrumb.settlement') },
+    ];
+  }
+  if (/^\/matches\/[^/]+\/edit/.test(path)) {
+    return [
+      { label: t('nav.matches'), to: '/matches' },
+      { label: t('breadcrumb.match_edit') },
+    ];
+  }
+  if (/^\/matches\/[^/]+\/markets/.test(path)) {
+    return [
+      { label: t('nav.matches'), to: '/matches' },
+      { label: t('breadcrumb.match_markets') },
+    ];
+  }
+  if (path === '/matches/outrights') {
+    return [
+      { label: t('nav.matches'), to: '/matches' },
+      { label: t('nav.matches.outrights') },
+    ];
+  }
+  if (/^\/outrights\/[^/]+\/edit/.test(path)) {
+    return [
+      { label: t('nav.matches'), to: '/matches' },
+      { label: t('nav.matches.outrights'), to: '/matches/outrights' },
+    ];
+  }
+  return null;
+}
diff --git a/apps/admin/src/views/Agents.vue b/apps/admin/src/views/Agents.vue
index 0129cdb..cf7c917 100644
--- a/apps/admin/src/views/Agents.vue
+++ b/apps/admin/src/views/Agents.vue
@@ -23,6 +23,7 @@ import {
   formatAmountFull,
   shouldCompactAmount as shouldCompact,
 } from '../utils/format-amount';
+import AdminTableEmpty from '../components/AdminTableEmpty.vue';
 
 const agents = ref<AgentRow[]>([]);
 const total = ref(0);
@@ -224,30 +225,34 @@ function creditTypeLabel(type: string) {
 
 <template>
   <div class="admin-list-page">
-  <div class="page-toolbar">
-    <el-button type="primary" @click="openCreate">{{ t('agent.create_btn') }}</el-button>
+  <div class="list-chrome">
+    <div class="list-chrome__row">
+      <el-form inline class="list-chrome__grow">
+        <el-form-item :label="t('common.keyword')">
+          <el-input
+            v-model="keyword"
+            :placeholder="t('agent.filter.username_ph')"
+            clearable
+            style="width: 180px"
+            @keyup.enter="load"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="load">{{ t('common.search') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <div class="list-chrome__actions">
+        <el-button type="primary" @click="openCreate">{{ t('agent.create_btn') }}</el-button>
+      </div>
+    </div>
   </div>
 
-  <el-card class="filter-card" shadow="never">
-    <el-form inline>
-      <el-form-item :label="t('common.keyword')">
-        <el-input
-          v-model="keyword"
-          :placeholder="t('agent.filter.username_ph')"
-          clearable
-          style="width: 180px"
-          @keyup.enter="load"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="load">{{ t('common.search') }}</el-button>
-      </el-form-item>
-    </el-form>
-  </el-card>
-
-  <el-card class="data-card" shadow="never">
+  <section class="list-panel">
     <div class="table-wrap">
     <el-table :data="agents" stripe>
+      <template #empty>
+        <AdminTableEmpty />
+      </template>
       <el-table-column prop="userId" label="ID" width="72" />
       <el-table-column prop="username" :label="t('user.col.username')" min-width="120" />
       <el-table-column :label="t('common.status')" width="88">
@@ -296,7 +301,7 @@ function creditTypeLabel(type: string) {
         @size-change="onSizeChange"
       />
     </div>
-  </el-card>
+  </section>
 
   <el-dialog v-model="createVisible" :title="t('agent.dialog.create')" width="520px" destroy-on-close>
     <el-form label-width="100px">
@@ -485,8 +490,6 @@ function creditTypeLabel(type: string) {
 </template>
 
 <style scoped>
-.filter-card { border-radius: 12px; }
-.data-card { border-radius: 12px; }
 .field-hint { font-size: 12px; color: #888; margin-top: 4px; }
 .detail-block { margin-bottom: 16px; }
 .section-title {
diff --git a/apps/admin/src/views/Audit.vue b/apps/admin/src/views/Audit.vue
index 43bc35a..0647553 100644
--- a/apps/admin/src/views/Audit.vue
+++ b/apps/admin/src/views/Audit.vue
@@ -2,6 +2,7 @@
 import { ref, onMounted } from 'vue';
 import { useAdminLocale } from '../composables/useAdminLocale';
 import api from '../api';
+import AdminTableEmpty from '../components/AdminTableEmpty.vue';
 
 const { t, locale, localeTag } = useAdminLocale();
 
@@ -89,6 +90,9 @@ function formatTime(v: string) {
     <el-card class="data-card" shadow="never">
       <div class="table-wrap">
         <el-table :key="locale" :data="logs" stripe>
+          <template #empty>
+            <AdminTableEmpty />
+          </template>
           <el-table-column :label="t('audit.col.action')" min-width="140">
             <template #default="{ row }">{{ auditActionLabel(row.action) }}</template>
           </el-table-column>
diff --git a/apps/admin/src/views/Bets.vue b/apps/admin/src/views/Bets.vue
index ee2c029..eda8e56 100644
--- a/apps/admin/src/views/Bets.vue
+++ b/apps/admin/src/views/Bets.vue
@@ -11,6 +11,7 @@ import {
   useBetFilterOptions,
 } from '../utils/bet-labels';
 import { useAdminLocale } from '../composables/useAdminLocale';
+import AdminTableEmpty from '../components/AdminTableEmpty.vue';
 
 const { t, localeTag } = useAdminLocale();
 const { statusOptions, typeOptions } = useBetFilterOptions();
@@ -33,6 +34,12 @@ const detailLoading = ref(false);
 
 onMounted(load);
 
+function betContentCounts(row: BetListRow) {
+  const singles = row.betType === 'SINGLE' ? 1 : 0;
+  const parlays = row.betType === 'PARLAY' ? 1 : 0;
+  return t('bet.content.bet_counts', { singles, parlays });
+}
+
 async function load() {
   const { data } = await api.get('/admin/bets', {
     params: {
@@ -164,6 +171,9 @@ async function openDetail(row: BetListRow) {
   <el-card class="data-card" shadow="never">
     <div class="table-wrap">
     <el-table :data="bets" stripe class="bets-table">
+      <template #empty>
+        <AdminTableEmpty />
+      </template>
       <el-table-column prop="id" :label="t('bet.col.serial')" width="64" align="center" />
       <el-table-column prop="betNo" :label="t('bet.col.bet_no')" min-width="200" show-overflow-tooltip>
         <template #default="{ row }">
@@ -179,28 +189,15 @@ async function openDetail(row: BetListRow) {
           <el-tag type="info" size="small" effect="plain">{{ betTypeLabel(row.betType) }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column :label="t('bet.col.content')" min-width="260">
+      <el-table-column :label="t('bet.col.content')" width="108" align="center">
         <template #default="{ row }">
           <el-tooltip
-            v-if="row.selectionPreviews?.length"
-            :content="row.selectionSummary || ''"
+            v-if="row.selectionSummary"
+            :content="row.selectionSummary"
             placement="top"
             :show-after="300"
           >
-            <div class="bet-content-cell">
-              <div
-                v-for="(leg, i) in (row.selectionPreviews ?? []).slice(0, 3)"
-                :key="i"
-                class="bet-leg-line"
-              >
-                <span class="bet-match">{{ leg.matchLabel }}</span>
-                <span class="bet-pick">{{ leg.selectionName }}</span>
-                <span class="bet-leg-odds">@{{ leg.odds }}</span>
-              </div>
-              <div v-if="(row.selectionPreviews?.length ?? 0) > 3" class="bet-leg-more">
-                {{ t('bet.legs_more', { n: (row.selectionPreviews?.length ?? 0) - 3 }) }}
-              </div>
-            </div>
+            <span class="bet-content-summary">{{ betContentCounts(row) }}</span>
           </el-tooltip>
           <span v-else class="bet-content-empty">—</span>
         </template>
@@ -345,38 +342,10 @@ async function openDetail(row: BetListRow) {
   min-width: 1380px;
 }
 
-.bet-content-cell {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 2px 0;
-}
-
-.bet-leg-line {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 4px 6px;
-  font-size: 12px;
-  line-height: 1.35;
-}
-
-.bet-match {
-  color: #ddd;
-}
-
-.bet-pick {
-  color: var(--green-glow);
-}
-
-.bet-leg-odds {
-  color: #888;
-  font-size: 11px;
-}
-
-.bet-leg-more {
-  font-size: 11px;
-  color: #666;
+.bet-content-summary {
+  font-size: 13px;
+  color: #ccc;
+  white-space: nowrap;
 }
 
 .bet-content-empty {
diff --git a/apps/admin/src/views/Contents.vue b/apps/admin/src/views/Contents.vue
index 459d6c0..1ecd685 100644
--- a/apps/admin/src/views/Contents.vue
+++ b/apps/admin/src/views/Contents.vue
@@ -4,6 +4,7 @@ import { ElMessage, ElMessageBox } from 'element-plus';
 import type { TableInstance } from 'element-plus';
 import { useAdminLocale } from '../composables/useAdminLocale';
 import api from '../api';
+import AdminTableEmpty from '../components/AdminTableEmpty.vue';
 
 const { t, localeTag } = useAdminLocale();
 
@@ -385,9 +386,11 @@ void load();
           row-key="id"
           stripe
           size="small"
-          empty-text="—"
           @selection-change="onSelectionChange"
         >
+          <template #empty>
+            <AdminTableEmpty />
+          </template>
           <el-table-column type="selection" width="44" :selectable="() => !saving" />
           <el-table-column prop="sortOrder" :label="t('content.col.sort')" width="64" align="center" />
           <el-table-column v-if="isBanner" :label="t('content.col.preview')" width="88" align="center">
diff --git a/apps/admin/src/views/Dashboard.vue b/apps/admin/src/views/Dashboard.vue
index ce4c51d..0ad09ee 100644
--- a/apps/admin/src/views/Dashboard.vue
+++ b/apps/admin/src/views/Dashboard.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
 import api from '../api';
 import { formatAmount, formatAmountFull } from '../utils/format-amount';
 import type { AdminDashboard } from './dashboard-types';
@@ -9,22 +10,34 @@ import { betStatusLabel } from '../utils/bet-labels';
 import { useAdminLocale } from '../composables/useAdminLocale';
 
 const { t, locale, localeTag } = useAdminLocale();
+const router = useRouter();
 
 const stats = ref<AdminDashboard | null>(null);
 const loading = ref(true);
+const loadError = ref(false);
 
 onMounted(load);
 
 async function load() {
   loading.value = true;
+  loadError.value = false;
   try {
     const { data } = await api.get('/admin/dashboard');
     stats.value = data.data as AdminDashboard;
+  } catch {
+    stats.value = null;
+    loadError.value = true;
   } finally {
     loading.value = false;
   }
 }
 
+type KpiLink = { path: string; query?: Record<string, string> };
+
+function goKpiLink(link: KpiLink) {
+  router.push(link.query ? { path: link.path, query: link.query } : link.path);
+}
+
 const s = computed(() => stats.value);
 
 function fmtCount(val: number | undefined) {
@@ -176,6 +189,7 @@ const kpiPrimary = computed(() => {
 
 const kpiSecondary = computed(() => {
   if (!s.value) return [];
+  const pendingMatches = s.value.matches.pendingSettlement ?? 0;
   return [
     {
       label: t('dash.kpi_users'),
@@ -187,8 +201,12 @@ const kpiSecondary = computed(() => {
       value: `${fmtCount(s.value.bets.pendingTotal)} ${t('common.bets_unit')}`,
       sub: t('dash.kpi_pending_sub', {
         bets: fmtCount(s.value.bets.pendingTotal),
-        matches: fmtCount(s.value.matches.pendingSettlement),
+        matches: fmtCount(pendingMatches),
       }),
+      link:
+        pendingMatches > 0
+          ? { path: '/matches', query: { status: 'PENDING_SETTLEMENT' } }
+          : undefined,
     },
     {
       label: t('dash.kpi_wallet'),
@@ -206,7 +224,13 @@ const kpiSecondary = computed(() => {
 
 <template>
   <div class="dashboard-page" v-loading="loading">
-    <template v-if="s">
+    <el-card v-if="!loading && loadError" class="state-card" shadow="never">
+      <p class="state-title">{{ t('msg.load_failed') }}</p>
+      <p class="state-hint">{{ t('dash.load_error_hint') }}</p>
+      <el-button type="primary" size="small" @click="load">{{ t('common.retry') }}</el-button>
+    </el-card>
+
+    <template v-else-if="s">
       <el-card class="overview-board" shadow="never">
         <div v-if="s.generatedAt" class="board-head">
           <span class="dash-updated">
@@ -229,7 +253,16 @@ const kpiSecondary = computed(() => {
         </div>
 
         <div class="kpi-grid kpi-secondary">
-          <div v-for="item in kpiSecondary" :key="item.label" class="kpi-cell compact">
+          <div
+            v-for="item in kpiSecondary"
+            :key="item.label"
+            class="kpi-cell compact"
+            :class="{ 'kpi-cell--link': item.link }"
+            :role="item.link ? 'button' : undefined"
+            :tabindex="item.link ? 0 : undefined"
+            @click="item.link && goKpiLink(item.link)"
+            @keydown.enter.prevent="item.link && goKpiLink(item.link)"
+          >
             <span class="kpi-label">{{ item.label }}</span>
             <span class="kpi-value sm">{{ item.value }}</span>
             <span class="kpi-sub">{{ item.sub }}</span>
@@ -249,6 +282,25 @@ const kpiSecondary = computed(() => {
 <style scoped>
 .dashboard-page { padding-bottom: 32px; }
 
+.state-card {
+  border-radius: 14px;
+  border: 1px solid #2a2220;
+  background: rgba(255, 69, 58, 0.06);
+  text-align: center;
+  padding: 8px 0 4px;
+}
+.state-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: #ff8a80;
+  margin-bottom: 6px;
+}
+.state-hint {
+  font-size: 13px;
+  color: #888;
+  margin-bottom: 14px;
+}
+
 .overview-board {
   border-radius: 14px;
   border: 1px solid #1e1e1e;
@@ -290,6 +342,16 @@ const kpiSecondary = computed(() => {
 .kpi-cell.compact {
   padding: 10px 12px;
 }
+.kpi-cell--link {
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+.kpi-cell--link:hover,
+.kpi-cell--link:focus-visible {
+  border-color: rgba(77, 214, 138, 0.35);
+  background: rgba(36, 143, 84, 0.1);
+  outline: none;
+}
 .kpi-label {
   display: block;
   font-size: 11px;
diff --git a/apps/admin/src/views/Login.vue b/apps/admin/src/views/Login.vue
index 4741b71..26c8efb 100644
--- a/apps/admin/src/views/Login.vue
+++ b/apps/admin/src/views/Login.vue
@@ -17,6 +17,7 @@ const { t } = useAdminLocale();
 const form = ref({ username: '', password: '' });
 const loading = ref(false);
 const captchaRef = ref<InstanceType<typeof RobotVerify> | null>(null);
+const isDev = import.meta.env.DEV;
 
 async function quickLogin(username: string, password: string) {
   loading.value = true;
@@ -81,17 +82,19 @@ async function login() {
               {{ loading ? '...' : t('login.submit') }}
             </button>
 
-            <div class="quick-label">{{ t('login.quick_label') }}</div>
-            <div class="quick-btns">
-              <button type="button" class="quick-btn" :disabled="loading" @click="quickLogin('admin', 'Admin@123')">
-                <span class="quick-role">{{ t('login.quick_admin') }}</span>
-                <span class="quick-acc">admin</span>
-              </button>
-              <button type="button" class="quick-btn" :disabled="loading" @click="quickLogin('agent1', 'Agent@123')">
-                <span class="quick-role">{{ t('login.quick_agent') }}</span>
-                <span class="quick-acc">agent1</span>
-              </button>
-            </div>
+            <template v-if="isDev">
+              <div class="quick-label">{{ t('login.quick_label') }}</div>
+              <div class="quick-btns">
+                <button type="button" class="quick-btn" :disabled="loading" @click="quickLogin('admin', 'Admin@123')">
+                  <span class="quick-role">{{ t('login.quick_admin') }}</span>
+                  <span class="quick-acc">admin</span>
+                </button>
+                <button type="button" class="quick-btn" :disabled="loading" @click="quickLogin('agent1', 'Agent@123')">
+                  <span class="quick-role">{{ t('login.quick_agent') }}</span>
+                  <span class="quick-acc">agent1</span>
+                </button>
+              </div>
+            </template>
           </div>
         </div>
       </form>
diff --git a/apps/admin/src/views/Matches.vue b/apps/admin/src/views/Matches.vue
index e72bd16..eed8183 100644
--- a/apps/admin/src/views/Matches.vue
+++ b/apps/admin/src/views/Matches.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { useRoute } from 'vue-router';
 import { useAdminLocale } from '../composables/useAdminLocale';
 import { resolveFormError } from '../i18n/form-validation';
 import api from '../api';
 import { ElMessage } from 'element-plus';
 import LeagueMatchesPanel from './matches/LeagueMatchesPanel.vue';
-import LogoUrlField from '../components/LogoUrlField.vue';
-import { countryDisplayName, type BuiltinCountry } from '../data/builtinCountries';
+import MatchesSubNav from '../components/MatchesSubNav.vue';
+import CountryFlagSelect from '../components/outright/CountryFlagSelect.vue';
+import { getBuiltinCountry } from '../data/builtinCountries';
 import {
   readMatchesListUiState,
   writeMatchesListUiState,
@@ -15,10 +17,13 @@ import { formatAmount } from '../utils/format-amount';
 import {
   emptyMatchForm,
   buildPlatformPayload,
+  fillBuiltinTeam,
+  clearBuiltinTeam,
   type MatchCreateForm,
 } from './match-form.ts';
 
 const { t } = useAdminLocale();
+const route = useRoute();
 const leagues = ref<unknown[]>([]);
 const total = ref(0);
 const page = ref(1);
@@ -94,7 +99,16 @@ function onSearch() {
   load();
 }
 
-onMounted(() => load({ restoreExpand: true }));
+onMounted(() => {
+  const qStatus = route.query.status;
+  if (typeof qStatus === 'string' && qStatus.trim()) {
+    filterStatus.value = qStatus.trim();
+    page.value = 1;
+    load();
+    return;
+  }
+  load({ restoreExpand: true });
+});
 onBeforeUnmount(persistListUiState);
 
 function onPageChange(p: number) {
@@ -138,25 +152,13 @@ async function submitCreateLeague() {
   }
 }
 
-function applyTeamFromCountry(side: 'home' | 'away', country: BuiltinCountry) {
-  const msName = countryDisplayName(country, 'ms-MY');
-  if (side === 'home') {
-    if (!form.value.homeTeamZh.trim()) form.value.homeTeamZh = country.nameZh;
-    if (!form.value.homeTeamEn.trim()) form.value.homeTeamEn = country.nameEn;
-    if (!form.value.homeTeamMs.trim()) form.value.homeTeamMs = msName;
-  } else {
-    if (!form.value.awayTeamZh.trim()) form.value.awayTeamZh = country.nameZh;
-    if (!form.value.awayTeamEn.trim()) form.value.awayTeamEn = country.nameEn;
-    if (!form.value.awayTeamMs.trim()) form.value.awayTeamMs = msName;
+function onTeamCodeChange(side: 'home' | 'away', code: string) {
+  if (!code?.trim()) {
+    clearBuiltinTeam(form.value, side);
+    return;
   }
-}
-
-function draftTeamCode(side: 'home' | 'away') {
-  const en = side === 'home' ? form.value.homeTeamEn : form.value.awayTeamEn;
-  const zh = side === 'home' ? form.value.homeTeamZh : form.value.awayTeamZh;
-  const name = (en || zh).trim();
-  if (!name) return '';
-  return `NAME_${name.replace(/[^a-zA-Z0-9]+/g, '_').replace(/^_|_$/g, '').toUpperCase().slice(0, 48)}`;
+  const country = getBuiltinCountry(code);
+  if (country) fillBuiltinTeam(form.value, side, country);
 }
 
 function openCreateFixture(leagueRow: unknown) {
@@ -266,6 +268,14 @@ function leagueTitle(row: unknown) {
   const en = String(r.leagueEn ?? '').trim();
   return zh || en || String(r.code ?? '—');
 }
+function leagueNameZh(row: unknown) {
+  const zh = String(rowOf(row).leagueZh ?? '').trim();
+  return zh || '—';
+}
+function leagueNameEn(row: unknown) {
+  const en = String(rowOf(row).leagueEn ?? '').trim();
+  return en || '—';
+}
 function leagueMatchCount(row: unknown) {
   return Number(rowOf(row).matchCount ?? 0);
 }
@@ -290,42 +300,51 @@ function leaguePendingBets(row: unknown) {
 function isLeagueExpanded(id: string) {
   return expandedRowKeys.value.includes(id);
 }
+
 </script>
 
 <template>
   <div class="admin-list-page matches-page">
-  <div class="page-toolbar">
-    <el-button @click="openImport">{{ t('common.import') }}</el-button>
-    <el-button type="primary" @click="openCreateLeague">{{ t('match.create_btn') }}</el-button>
+  <div class="list-chrome">
+    <div class="list-chrome__row">
+      <div class="list-chrome__left">
+        <MatchesSubNav embedded />
+        <div class="list-chrome__filters">
+          <div class="list-chrome__field">
+            <span class="list-chrome__label">{{ t('common.keyword') }}</span>
+            <el-input
+              v-model="keyword"
+              :placeholder="t('match.filter.keyword_ph')"
+              clearable
+              style="width: 200px"
+              @keyup.enter="load"
+            />
+          </div>
+          <div class="list-chrome__field">
+            <span class="list-chrome__label">{{ t('common.status') }}</span>
+            <el-select v-model="filterStatus" :placeholder="t('common.all')" clearable style="width: 120px">
+              <el-option :label="t('match.status.DRAFT')" value="DRAFT" />
+              <el-option :label="t('match.status.PUBLISHED')" value="PUBLISHED" />
+              <el-option :label="t('match.status.CLOSED')" value="CLOSED" />
+              <el-option :label="t('match.status.PENDING_SETTLEMENT')" value="PENDING_SETTLEMENT" />
+              <el-option :label="t('match.status.SETTLED')" value="SETTLED" />
+            </el-select>
+          </div>
+          <el-button type="primary" class="list-chrome__submit" @click="onSearch">
+            {{ t('common.search') }}
+          </el-button>
+        </div>
+      </div>
+      <div class="list-chrome__actions">
+        <el-button @click="openImport">{{ t('common.import') }}</el-button>
+        <el-button type="primary" @click="openCreateLeague">{{ t('match.create_btn') }}</el-button>
+      </div>
+    </div>
+    <p v-if="filterStatus" class="list-hint">{{ t('match.filter.status_hint') }}</p>
   </div>
 
-  <el-card class="filter-card" shadow="never">
-    <el-form inline>
-      <el-form-item :label="t('common.keyword')">
-        <el-input
-          v-model="keyword"
-          :placeholder="t('match.filter.keyword_ph')"
-          clearable
-          style="width: 200px"
-          @keyup.enter="load"
-        />
-      </el-form-item>
-      <el-form-item :label="t('common.status')">
-        <el-select v-model="filterStatus" :placeholder="t('common.all')" clearable style="width: 120px">
-          <el-option :label="t('match.status.DRAFT')" value="DRAFT" />
-          <el-option :label="t('match.status.PUBLISHED')" value="PUBLISHED" />
-          <el-option :label="t('match.status.CLOSED')" value="CLOSED" />
-          <el-option :label="t('match.status.SETTLED')" value="SETTLED" />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSearch">{{ t('common.search') }}</el-button>
-      </el-form-item>
-    </el-form>
-  </el-card>
-
-  <el-card class="data-card" shadow="never">
-    <p class="table-hint">{{ t('match.expand_league_hint') }}</p>
+  <section class="list-panel">
+    <p class="list-hint">{{ t('match.expand_league_hint') }}</p>
     <div class="table-wrap">
     <el-table
       :data="leagues"
@@ -338,18 +357,19 @@ function isLeagueExpanded(id: string) {
     >
       <el-table-column type="expand" width="40">
         <template #default="{ row }">
-          <LeagueMatchesPanel
-            v-if="isLeagueExpanded(leagueId(row))"
-            :league-id="leagueId(row)"
-            :filter-status="filterStatus"
-            :keyword="keyword"
-            @changed="() => load({ keepExpand: true })"
-            @add-match="openCreateFixture(row)"
-          />
+          <template v-if="isLeagueExpanded(leagueId(row))">
+            <LeagueMatchesPanel
+              :league-id="leagueId(row)"
+              :filter-status="filterStatus"
+              :keyword="keyword"
+              @changed="() => load({ keepExpand: true })"
+              @add-match="openCreateFixture(row)"
+            />
+          </template>
         </template>
       </el-table-column>
       <el-table-column prop="id" label="ID" width="72" />
-      <el-table-column :label="t('match.col.league')" min-width="220">
+      <el-table-column :label="t('match.col.league')" width="148" show-overflow-tooltip>
         <template #default="{ row }">
           <div class="league-cell">
             <img
@@ -358,10 +378,15 @@ function isLeagueExpanded(id: string) {
               alt=""
               class="league-logo"
             />
-            <span class="matchup-link">{{ leagueTitle(row) }}</span>
+            <span class="matchup-link">{{ leagueNameZh(row) }}</span>
           </div>
         </template>
       </el-table-column>
+      <el-table-column :label="t('match.col.league_en')" width="180" show-overflow-tooltip>
+        <template #default="{ row }">
+          <span class="league-en">{{ leagueNameEn(row) }}</span>
+        </template>
+      </el-table-column>
       <el-table-column :label="t('match.col.fixture_count')" width="88" align="center">
         <template #default="{ row }">{{ leagueMatchCount(row) }}</template>
       </el-table-column>
@@ -381,7 +406,7 @@ function isLeagueExpanded(id: string) {
           <span v-else class="bet-stat-zero">0</span>
         </template>
       </el-table-column>
-      <el-table-column :label="t('match.col.league_code')" width="100">
+      <el-table-column :label="t('match.col.league_code')" width="140" show-overflow-tooltip>
         <template #default="{ row }">{{ rowOf(row).code }}</template>
       </el-table-column>
     </el-table>
@@ -398,7 +423,7 @@ function isLeagueExpanded(id: string) {
         @size-change="onSizeChange"
       />
     </div>
-  </el-card>
+  </section>
 
   <el-dialog v-model="createLeagueVisible" :title="t('match.dialog.create_league')" width="520px" destroy-on-close>
     <el-form label-width="96px">
@@ -451,36 +476,20 @@ function isLeagueExpanded(id: string) {
           style="width: 100%"
         />
       </el-form-item>
-      <el-form-item :label="t('match.field.home_en')">
-        <el-input v-model="form.homeTeamEn" :placeholder="t('match.ph.home_en')" />
-      </el-form-item>
-      <el-form-item :label="t('match.field.home_zh')">
-        <el-input v-model="form.homeTeamZh" :placeholder="t('match.ph.home_zh')" />
-      </el-form-item>
-      <el-form-item :label="t('match.field.home_ms')">
-        <el-input v-model="form.homeTeamMs" :placeholder="t('match.ph.home_ms')" />
-      </el-form-item>
-      <el-form-item :label="t('matchEditor.field.home_logo')">
-        <LogoUrlField
-          v-model="form.homeTeamLogoUrl"
-          :team-code="draftTeamCode('home')"
-          @pick="applyTeamFromCountry('home', $event)"
+      <el-form-item :label="t('match.field.home_team')" required>
+        <CountryFlagSelect
+          v-model="form.homeTeamCode"
+          size="default"
+          class="team-country-select"
+          @update:model-value="onTeamCodeChange('home', $event)"
         />
       </el-form-item>
-      <el-form-item :label="t('match.field.away_en')">
-        <el-input v-model="form.awayTeamEn" :placeholder="t('match.ph.away_en')" />
-      </el-form-item>
-      <el-form-item :label="t('match.field.away_zh')">
-        <el-input v-model="form.awayTeamZh" :placeholder="t('match.ph.away_zh')" />
-      </el-form-item>
-      <el-form-item :label="t('match.field.away_ms')">
-        <el-input v-model="form.awayTeamMs" :placeholder="t('match.ph.away_ms')" />
-      </el-form-item>
-      <el-form-item :label="t('matchEditor.field.away_logo')">
-        <LogoUrlField
-          v-model="form.awayTeamLogoUrl"
-          :team-code="draftTeamCode('away')"
-          @pick="applyTeamFromCountry('away', $event)"
+      <el-form-item :label="t('match.field.away_team')" required>
+        <CountryFlagSelect
+          v-model="form.awayTeamCode"
+          size="default"
+          class="team-country-select"
+          @update:model-value="onTeamCodeChange('away', $event)"
         />
       </el-form-item>
       <el-form-item :label="t('match.field.featured')">
@@ -511,16 +520,16 @@ function isLeagueExpanded(id: string) {
 </template>
 
 <style scoped>
-.filter-card { border-radius: 12px; }
-.data-card {
-  border-radius: 12px;
-}
 .dialog-hint {
   font-size: 13px;
   color: #666;
   margin: 0 0 12px;
   line-height: 1.5;
 }
+.team-country-select {
+  width: 100%;
+}
+
 .dialog-hint code {
   color: #aaa;
 }
@@ -534,61 +543,25 @@ function isLeagueExpanded(id: string) {
   margin-bottom: 16px;
 }
 
-.action-btns {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  justify-content: center;
-  align-items: center;
-}
-
-.action-btns :deep(.action-btn) {
-  margin: 0 !important;
-  min-width: 52px;
-  padding: 4px 8px !important;
-  font-size: 12px !important;
-  background: #1a1a1a !important;
-  border-color: #333 !important;
-  color: #bbb !important;
-}
-
-.action-btns :deep(.action-btn:not(.is-disabled):hover) {
-  background: #252525 !important;
-  border-color: #444 !important;
-  color: #fff !important;
-}
-
-.action-btns :deep(.action-btn.is-disabled) {
-  background: #121212 !important;
-  border-color: #252525 !important;
-  color: #444 !important;
-  opacity: 1 !important;
-  cursor: not-allowed !important;
-}
-
-.table-hint {
-  font-size: 12px;
-  color: #666;
-  margin: 0 0 10px;
-  line-height: 1.5;
-  flex-shrink: 0;
-}
-
 /* 列表表格随内容增高，滚动交给外层 table-wrap（仅赛事行） */
 .matches-page .table-wrap .el-table {
   height: auto !important;
 }
+.matches-page .table-wrap :deep(.el-table__header),
+.matches-page .table-wrap :deep(.el-table__body) {
+  width: 100% !important;
+}
 
 .matches-page :deep(.el-table__expanded-cell) {
   padding: 0 !important;
   background: #0a0a0a;
 }
 
-.data-card :deep(.row-expandable) {
+.list-panel :deep(.row-expandable) {
   cursor: pointer;
 }
 
-.data-card :deep(.row-no-expand .el-table__expand-icon) {
+.list-panel :deep(.row-no-expand .el-table__expand-icon) {
   visibility: hidden;
   pointer-events: none;
 }
@@ -617,6 +590,11 @@ function isLeagueExpanded(id: string) {
   flex-shrink: 0;
 }
 
+.league-en {
+  color: #aaa;
+  font-size: 13px;
+}
+
 .league-readonly {
   color: var(--green-text);
   font-weight: 500;
diff --git a/apps/admin/src/views/MatchesOutrights.vue b/apps/admin/src/views/MatchesOutrights.vue
new file mode 100644
index 0000000..e27cbfa
--- /dev/null
+++ b/apps/admin/src/views/MatchesOutrights.vue
@@ -0,0 +1,273 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { useRoute } from 'vue-router';
+import { useAdminLocale } from '../composables/useAdminLocale';
+import api from '../api';
+import MatchesSubNav from '../components/MatchesSubNav.vue';
+import LeagueOutrightOddsPanel from './matches/LeagueOutrightOddsPanel.vue';
+import {
+  readMatchesListUiState,
+  writeMatchesListUiState,
+} from '../utils/matchesListState.ts';
+
+const { t } = useAdminLocale();
+const route = useRoute();
+
+const leagues = ref<unknown[]>([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(10);
+const keyword = ref('');
+const expandedRowKeys = ref<string[]>([]);
+
+function persistListUiState() {
+  writeMatchesListUiState({
+    expandedLeagueIds: [...expandedRowKeys.value],
+    page: page.value,
+    pageSize: pageSize.value,
+    filterStatus: '',
+    keyword: keyword.value,
+  });
+}
+
+function applyExpandedFromSaved(savedIds: string[]) {
+  const allowed = new Set(leagues.value.map((row) => leagueId(row)));
+  expandedRowKeys.value = savedIds.filter((id) => allowed.has(id));
+}
+
+type LoadOptions = { restoreExpand?: boolean; keepExpand?: boolean };
+
+async function load(options: LoadOptions = {}) {
+  const saved = options.restoreExpand ? readMatchesListUiState() : null;
+  if (saved) {
+    page.value = saved.page;
+    pageSize.value = saved.pageSize;
+    keyword.value = saved.keyword;
+  }
+
+  const { data } = await api.get('/admin/leagues', {
+    params: {
+      page: page.value,
+      pageSize: pageSize.value,
+      keyword: keyword.value.trim() || undefined,
+    },
+  });
+  leagues.value = data.data.items;
+  total.value = data.data.total;
+
+  if (options.restoreExpand && saved) {
+    applyExpandedFromSaved(saved.expandedLeagueIds);
+  } else if (!options.keepExpand) {
+    expandedRowKeys.value = [];
+  } else {
+    applyExpandedFromSaved(expandedRowKeys.value);
+  }
+  persistListUiState();
+}
+
+function onSearch() {
+  page.value = 1;
+  expandedRowKeys.value = [];
+  load();
+}
+
+async function resolveExpandFromQuery() {
+  const qLeague = route.query.leagueId;
+  if (typeof qLeague === 'string' && qLeague.trim()) {
+    expandedRowKeys.value = [qLeague.trim()];
+    persistListUiState();
+    return;
+  }
+  const qMatch = route.query.matchId;
+  if (typeof qMatch === 'string' && qMatch.trim()) {
+    try {
+      const { data } = await api.get(`/admin/outrights/${qMatch.trim()}`);
+      const lid = data.data?.leagueId as string | undefined;
+      if (lid) {
+        expandedRowKeys.value = [lid];
+        persistListUiState();
+      }
+    } catch {
+      /* ignore */
+    }
+  }
+}
+
+onMounted(async () => {
+  await load({ restoreExpand: true });
+  await resolveExpandFromQuery();
+});
+onBeforeUnmount(persistListUiState);
+
+function onPageChange(p: number) {
+  page.value = p;
+  load({ keepExpand: true });
+}
+
+function onSizeChange(size: number) {
+  pageSize.value = size;
+  page.value = 1;
+  load({ keepExpand: true });
+}
+
+function onExpandChange(_row: unknown, expanded: unknown[]) {
+  expandedRowKeys.value = expanded.map((r) => leagueId(r));
+  persistListUiState();
+}
+
+function onRowClick(row: unknown, _column: unknown, event: MouseEvent) {
+  if ((event.target as HTMLElement).closest('.el-table__expand-icon')) return;
+  const id = leagueId(row);
+  expandedRowKeys.value = expandedRowKeys.value.includes(id) ? [] : [id];
+  persistListUiState();
+}
+
+function rowClassName() {
+  return 'row-expandable';
+}
+
+function rowOf(row: unknown) {
+  return row as Record<string, unknown>;
+}
+function leagueId(row: unknown) {
+  return String(rowOf(row).id ?? '');
+}
+function leagueNameZh(row: unknown) {
+  const zh = String(rowOf(row).leagueZh ?? '').trim();
+  return zh || '—';
+}
+function leagueNameEn(row: unknown) {
+  const en = String(rowOf(row).leagueEn ?? '').trim();
+  return en || '—';
+}
+function outrightTeamCount(row: unknown) {
+  return Number(rowOf(row).outrightTeamCount ?? 0);
+}
+function isLeagueExpanded(id: string) {
+  return expandedRowKeys.value.includes(id);
+}
+</script>
+
+<template>
+  <div class="admin-list-page matches-page">
+    <div class="list-chrome">
+      <div class="list-chrome__row">
+        <div class="list-chrome__left">
+          <MatchesSubNav embedded />
+          <div class="list-chrome__filters">
+            <div class="list-chrome__field">
+              <span class="list-chrome__label">{{ t('common.keyword') }}</span>
+              <el-input
+                v-model="keyword"
+                :placeholder="t('match.filter.keyword_ph')"
+                clearable
+                style="width: 200px"
+                @keyup.enter="onSearch"
+              />
+            </div>
+            <el-button type="primary" class="list-chrome__submit" @click="onSearch">
+              {{ t('common.search') }}
+            </el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <section class="list-panel">
+      <p class="list-hint">{{ t('match.expand_outright_hint') }}</p>
+      <div class="table-wrap">
+        <el-table
+          :data="leagues"
+          stripe
+          row-key="id"
+          :expand-row-keys="expandedRowKeys"
+          :row-class-name="rowClassName"
+          @expand-change="onExpandChange"
+          @row-click="onRowClick"
+        >
+          <el-table-column type="expand" width="40">
+            <template #default="{ row }">
+              <LeagueOutrightOddsPanel
+                v-if="isLeagueExpanded(leagueId(row))"
+                :league-id="leagueId(row)"
+                @updated="load({ keepExpand: true })"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column prop="id" label="ID" width="72" />
+          <el-table-column :label="t('match.col.league')" width="148" show-overflow-tooltip>
+            <template #default="{ row }">
+              <div class="league-cell">
+                <img
+                  v-if="rowOf(row).logoUrl"
+                  :src="String(rowOf(row).logoUrl)"
+                  alt=""
+                  class="league-logo"
+                />
+                <span class="matchup-link">{{ leagueNameZh(row) }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('match.col.league_en')" width="180" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span class="league-en">{{ leagueNameEn(row) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('outright.col.teams_total')" width="120" align="center">
+            <template #default="{ row }">{{ outrightTeamCount(row) }}</template>
+          </el-table-column>
+          <el-table-column :label="t('match.col.league_code')" width="140" show-overflow-tooltip>
+            <template #default="{ row }">{{ rowOf(row).code }}</template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pager">
+        <el-pagination
+          v-model:current-page="page"
+          v-model:page-size="pageSize"
+          :total="total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next"
+          background
+          @current-change="onPageChange"
+          @size-change="onSizeChange"
+        />
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.matches-page .table-wrap .el-table {
+  height: auto !important;
+}
+.matches-page .table-wrap :deep(.el-table__header),
+.matches-page .table-wrap :deep(.el-table__body) {
+  width: 100% !important;
+}
+.matches-page :deep(.el-table__expanded-cell) {
+  padding: 0 !important;
+  background: #0a0a0a;
+}
+.list-panel :deep(.row-expandable) {
+  cursor: pointer;
+}
+.matchup-link {
+  color: var(--green-text);
+}
+.league-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.league-logo {
+  width: 28px;
+  height: 28px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+.league-en {
+  color: #aaa;
+  font-size: 13px;
+}
+</style>
diff --git a/apps/admin/src/views/Settlement.vue b/apps/admin/src/views/Settlement.vue
index c10365e..045749e 100644
--- a/apps/admin/src/views/Settlement.vue
+++ b/apps/admin/src/views/Settlement.vue
@@ -18,6 +18,7 @@ import {
 } from '../utils/bet-labels';
 import { adminSelectionLabel } from '../utils/adminSelectionLabel.ts';
 import type { AdminMatchDetail } from './match-form.ts';
+import AdminSubNav from '../components/AdminSubNav.vue';
 
 interface SettlementBetStats {
   summary: {
@@ -82,7 +83,6 @@ const previewPageSize = ref(10);
 // 智能比分推荐已暂时关闭（后端 smart-score.solver.ts 保留，恢复时接回 UI 与 POST /settlement/smart-score）
 
 const matchId = computed(() => String(route.params.id ?? ''));
-
 type PreviewItem = {
   betNo: string;
   betType: string;
@@ -295,7 +295,7 @@ async function loadMatch() {
     };
     if (detail.isOutright) {
       ElMessage.warning(t('msg.outright_no_edit'));
-      router.replace('/outrights');
+      router.replace('/matches');
       return;
     }
     match.value = detail;
@@ -407,10 +407,6 @@ async function confirm() {
   await loadMatch();
 }
 
-function goBack() {
-  router.push('/matches');
-}
-
 onMounted(() => {
   void loadMatch();
 });
@@ -418,14 +414,14 @@ onMounted(() => {
 
 <template>
   <div v-loading="loading" class="settlement-page">
-    <div class="page-header">
-      <div class="header-left">
-        <el-button size="small" text @click="goBack">← {{ t('settlement.back') }}</el-button>
-        <h2 class="page-title">{{ t('page.settlement.title') }}</h2>
-        <span class="page-id">#{{ matchId }}</span>
-      </div>
-      <el-tag v-if="match" size="small" type="info">{{ statusLabel }}</el-tag>
-    </div>
+    <AdminSubNav
+      :title="t('page.settlement.title')"
+      :subtitle="`#${matchId}`"
+    >
+      <template #extra>
+        <el-tag v-if="match" size="small" type="info">{{ statusLabel }}</el-tag>
+      </template>
+    </AdminSubNav>
 
     <el-card v-if="match" class="settle-top-card" shadow="never">
       <p v-if="leagueLabel" class="match-league">{{ leagueLabel }}</p>
@@ -708,35 +704,6 @@ onMounted(() => {
   overflow: hidden;
 }
 
-.page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  flex-wrap: wrap;
-  flex-shrink: 0;
-}
-
-.header-left {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.page-title {
-  font-size: 20px;
-  font-weight: 700;
-  color: #e8e8e8;
-  margin: 0;
-}
-
-.page-id {
-  font-size: 13px;
-  color: #666;
-  font-family: monospace;
-}
-
 .settle-top-card,
 .preview-card {
   flex-shrink: 0;
diff --git a/apps/admin/src/views/Users.vue b/apps/admin/src/views/Users.vue
index c6479ba..2771b00 100644
--- a/apps/admin/src/views/Users.vue
+++ b/apps/admin/src/views/Users.vue
@@ -21,6 +21,7 @@ import {
   formatAmountFull,
   shouldCompactAmount as shouldCompact,
 } from '../utils/format-amount';
+import AdminTableEmpty from '../components/AdminTableEmpty.vue';
 
 const users = ref<PlayerRow[]>([]);
 const total = ref(0);
@@ -57,6 +58,7 @@ const bettingLimits = ref({
 });
 const settingsSaving = ref(false);
 const limitsSaving = ref(false);
+const settingsCollapseOpen = ref<string[]>([]);
 
 onMounted(() => {
   loadAgentOptions();
@@ -319,106 +321,107 @@ function statusLabel(s: string) {
 
 <template>
   <div class="admin-list-page users-page">
-  <div class="page-toolbar">
-    <el-button type="primary" @click="openCreate">{{ t('user.create_btn') }}</el-button>
-  </div>
+  <el-collapse v-model="settingsCollapseOpen" class="list-settings">
+    <el-collapse-item :title="t('user.page_settings')" name="settings">
+      <div class="list-settings-block">
+        <p class="list-settings-title">{{ t('user.global_settings') }}</p>
+        <el-form inline size="small" class="settings-form">
+          <el-form-item :label="t('user.field.allow_password_change')">
+            <el-switch
+              v-model="playerSettings.allowPasswordChange"
+              :loading="settingsSaving"
+              @change="savePlayerSettings"
+            />
+          </el-form-item>
+          <el-form-item :label="t('user.field.allow_username_change')">
+            <el-switch
+              v-model="playerSettings.allowUsernameChange"
+              :loading="settingsSaving"
+              @change="savePlayerSettings"
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="list-settings-block">
+        <p class="list-settings-title">{{ t('user.betting_limits') }}</p>
+        <el-form inline size="small" class="settings-form limits-form">
+          <el-form-item :label="t('user.limit.min_stake')">
+            <el-input-number v-model="bettingLimits.minStake" :min="0" :step="1" controls-position="right" />
+          </el-form-item>
+          <el-form-item :label="t('user.limit.max_stake_single')">
+            <el-input-number v-model="bettingLimits.maxStakeSingle" :min="0" :step="100" controls-position="right" />
+          </el-form-item>
+          <el-form-item :label="t('user.limit.max_stake_parlay')">
+            <el-input-number v-model="bettingLimits.maxStakeParlay" :min="0" :step="100" controls-position="right" />
+          </el-form-item>
+          <el-form-item :label="t('user.limit.max_payout_single')">
+            <el-input-number v-model="bettingLimits.maxPayoutSingle" :min="0" :step="1000" controls-position="right" />
+          </el-form-item>
+          <el-form-item :label="t('user.limit.max_payout_parlay')">
+            <el-input-number v-model="bettingLimits.maxPayoutParlay" :min="0" :step="1000" controls-position="right" />
+          </el-form-item>
+          <el-form-item :label="t('user.limit.daily_stake')">
+            <el-input-number v-model="bettingLimits.dailyStakeLimit" :min="0" :step="1000" controls-position="right" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" :loading="limitsSaving" @click="saveBettingLimits">
+              {{ t('common.save') }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-collapse-item>
+  </el-collapse>
 
-  <el-card class="settings-card" shadow="never">
-    <div class="global-settings">
-      <span class="settings-title">{{ t('user.global_settings') }}</span>
-      <span class="settings-desc">{{ t('user.global_settings_hint') }}</span>
-      <el-form inline size="small" class="settings-form">
-        <el-form-item :label="t('user.field.allow_password_change')">
-          <el-switch
-            v-model="playerSettings.allowPasswordChange"
-            :loading="settingsSaving"
-            @change="savePlayerSettings"
+  <div class="list-chrome">
+    <div class="list-chrome__row">
+      <el-form inline class="list-chrome__grow">
+        <el-form-item :label="t('common.keyword')">
+          <el-input
+            v-model="keyword"
+            :placeholder="t('user.filter.username_ph')"
+            clearable
+            style="width: 160px"
+            @keyup.enter="load"
           />
         </el-form-item>
-        <el-form-item :label="t('user.field.allow_username_change')">
-          <el-switch
-            v-model="playerSettings.allowUsernameChange"
-            :loading="settingsSaving"
-            @change="savePlayerSettings"
-          />
+        <el-form-item :label="t('user.filter.agent')">
+          <el-select
+            v-model="filterParentId"
+            :placeholder="t('user.filter.agent_ph')"
+            clearable
+            style="width: 180px"
+          >
+            <el-option
+              v-for="a in agentOptions"
+              :key="a.id"
+              :label="a.username"
+              :value="a.id"
+            />
+          </el-select>
         </el-form-item>
-      </el-form>
-    </div>
-  </el-card>
-
-  <el-card class="settings-card" shadow="never">
-    <div class="global-settings">
-      <span class="settings-title">{{ t('user.betting_limits') }}</span>
-      <span class="settings-desc">{{ t('user.betting_limits_hint') }}</span>
-      <el-form inline size="small" class="settings-form limits-form">
-        <el-form-item :label="t('user.limit.min_stake')">
-          <el-input-number v-model="bettingLimits.minStake" :min="0" :step="1" controls-position="right" />
-        </el-form-item>
-        <el-form-item :label="t('user.limit.max_stake_single')">
-          <el-input-number v-model="bettingLimits.maxStakeSingle" :min="0" :step="100" controls-position="right" />
-        </el-form-item>
-        <el-form-item :label="t('user.limit.max_stake_parlay')">
-          <el-input-number v-model="bettingLimits.maxStakeParlay" :min="0" :step="100" controls-position="right" />
-        </el-form-item>
-        <el-form-item :label="t('user.limit.max_payout_single')">
-          <el-input-number v-model="bettingLimits.maxPayoutSingle" :min="0" :step="1000" controls-position="right" />
-        </el-form-item>
-        <el-form-item :label="t('user.limit.max_payout_parlay')">
-          <el-input-number v-model="bettingLimits.maxPayoutParlay" :min="0" :step="1000" controls-position="right" />
-        </el-form-item>
-        <el-form-item :label="t('user.limit.daily_stake')">
-          <el-input-number v-model="bettingLimits.dailyStakeLimit" :min="0" :step="1000" controls-position="right" />
+        <el-form-item :label="t('common.status')">
+          <el-select v-model="filterStatus" :placeholder="t('common.all')" clearable style="width: 120px">
+            <el-option :label="t('user.status.ACTIVE')" value="ACTIVE" />
+            <el-option :label="t('user.status.SUSPENDED')" value="SUSPENDED" />
+          </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" :loading="limitsSaving" @click="saveBettingLimits">
-            {{ t('common.save') }}
-          </el-button>
+          <el-button type="primary" @click="load">{{ t('common.search') }}</el-button>
         </el-form-item>
       </el-form>
+      <div class="list-chrome__actions">
+        <el-button type="primary" @click="openCreate">{{ t('user.create_btn') }}</el-button>
+      </div>
     </div>
-  </el-card>
+  </div>
 
-  <el-card class="filter-card" shadow="never">
-    <el-form inline>
-      <el-form-item :label="t('common.keyword')">
-        <el-input
-          v-model="keyword"
-          :placeholder="t('user.filter.username_ph')"
-          clearable
-          style="width: 160px"
-          @keyup.enter="load"
-        />
-      </el-form-item>
-      <el-form-item :label="t('user.filter.agent')">
-        <el-select
-          v-model="filterParentId"
-          :placeholder="t('user.filter.agent_ph')"
-          clearable
-          style="width: 180px"
-        >
-          <el-option
-            v-for="a in agentOptions"
-            :key="a.id"
-            :label="a.username"
-            :value="a.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="t('common.status')">
-        <el-select v-model="filterStatus" :placeholder="t('common.all')" clearable style="width: 120px">
-          <el-option :label="t('user.status.ACTIVE')" value="ACTIVE" />
-          <el-option :label="t('user.status.SUSPENDED')" value="SUSPENDED" />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="load">{{ t('common.search') }}</el-button>
-      </el-form-item>
-    </el-form>
-  </el-card>
-
-  <el-card class="data-card" shadow="never">
+  <section class="list-panel">
     <div class="table-wrap">
     <el-table :data="users" stripe>
+      <template #empty>
+        <AdminTableEmpty />
+      </template>
       <el-table-column prop="id" label="ID" width="72" />
       <el-table-column prop="username" :label="t('user.col.username')" min-width="120" />
       <el-table-column :label="t('common.status')" width="88">
@@ -505,7 +508,7 @@ function statusLabel(s: string) {
         @size-change="onSizeChange"
       />
     </div>
-  </el-card>
+  </section>
 
   <el-dialog v-model="createVisible" :title="t('user.dialog.create')" width="520px" destroy-on-close>
     <el-form label-width="100px">
@@ -740,33 +743,15 @@ function statusLabel(s: string) {
 </template>
 
 <style scoped>
-.filter-card { margin-bottom: 12px; border-radius: 12px; }
-.settings-card { margin-bottom: 12px; border-radius: 12px; }
-.data-card { border-radius: 12px; }
-.pager { margin-top: 16px; display: flex; justify-content: flex-end; }
+.settings-form :deep(.el-form-item) {
+  margin-bottom: 0;
+  margin-right: 12px;
+}
 .field-hint { font-size: 12px; color: #888; margin-top: 4px; }
 .inline-hint { margin-top: 0; margin-left: 10px; display: inline-block; }
 .amount-compact { white-space: nowrap; font-variant-numeric: tabular-nums; cursor: default; }
 .amount-full-hint { font-size: 11px; color: #666; margin-left: 4px; }
 .text-muted { color: #666; font-size: 12px; }
-.global-settings {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px 20px;
-}
-.settings-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: #ccc;
-  margin-right: 4px;
-}
-.settings-desc {
-  font-size: 12px;
-  color: #888;
-  flex: 1;
-  min-width: 200px;
-}
 .password-mgmt-block {
   margin: 4px 0 10px;
   padding: 10px 12px;
@@ -794,10 +779,6 @@ function statusLabel(s: string) {
 .block-hint {
   margin: -4px 0 8px;
 }
-.settings-form :deep(.el-form-item) {
-  margin-bottom: 0;
-  margin-right: 16px;
-}
 .edit-meta {
   display: flex;
   align-items: center;
diff --git a/apps/admin/src/views/match-form.ts b/apps/admin/src/views/match-form.ts
index 4e6399e..921aa29 100644
--- a/apps/admin/src/views/match-form.ts
+++ b/apps/admin/src/views/match-form.ts
@@ -1,5 +1,11 @@
 /** 后台手动新增赛事（投注平台最小字段） */
 
+import {
+  countryDisplayName,
+  countryLogoUrl,
+  hasCountryCrest,
+  type BuiltinCountry,
+} from '../data/builtinCountries';
 import { FormValidationError } from '../i18n/form-validation';
 
 export interface MatchCreateForm {
@@ -8,6 +14,8 @@ export interface MatchCreateForm {
   leagueZh: string;
   leagueMs: string;
   startTime: string;
+  homeTeamCode: string;
+  awayTeamCode: string;
   homeTeamZh: string;
   homeTeamEn: string;
   homeTeamMs: string;
@@ -31,6 +39,8 @@ export function emptyMatchForm(): MatchCreateForm {
     leagueZh: '2026 世界杯',
     leagueMs: 'Piala Dunia 2026',
     startTime: '',
+    homeTeamCode: '',
+    awayTeamCode: '',
     homeTeamZh: '',
     homeTeamEn: '',
     homeTeamMs: '',
@@ -122,6 +132,8 @@ export function formFromDetail(d: AdminMatchDetail): MatchCreateForm {
     leagueZh: d.leagueZh,
     leagueMs: d.leagueMs ?? '',
     startTime: normalizeStartTimeForPicker(d.startTime),
+    homeTeamCode: d.homeTeamCode ?? '',
+    awayTeamCode: d.awayTeamCode ?? '',
     homeTeamZh: d.homeTeamZh,
     homeTeamEn: d.homeTeamEn,
     homeTeamMs: d.homeTeamMs ?? '',
@@ -139,19 +151,67 @@ export function formFromDetail(d: AdminMatchDetail): MatchCreateForm {
   };
 }
 
+export function fillBuiltinTeam(
+  form: MatchCreateForm,
+  side: 'home' | 'away',
+  country: BuiltinCountry,
+) {
+  const msName = countryDisplayName(country, 'ms-MY');
+  const logo = countryLogoUrl(country, hasCountryCrest(country) ? 'crest' : 'flag');
+  if (side === 'home') {
+    form.homeTeamCode = country.code;
+    form.homeTeamZh = country.nameZh;
+    form.homeTeamEn = country.nameEn;
+    form.homeTeamMs = msName;
+    form.homeTeamLogoUrl = logo;
+  } else {
+    form.awayTeamCode = country.code;
+    form.awayTeamZh = country.nameZh;
+    form.awayTeamEn = country.nameEn;
+    form.awayTeamMs = msName;
+    form.awayTeamLogoUrl = logo;
+  }
+}
+
+export function clearBuiltinTeam(form: MatchCreateForm, side: 'home' | 'away') {
+  if (side === 'home') {
+    form.homeTeamCode = '';
+    form.homeTeamZh = '';
+    form.homeTeamEn = '';
+    form.homeTeamMs = '';
+    form.homeTeamLogoUrl = '';
+  } else {
+    form.awayTeamCode = '';
+    form.awayTeamZh = '';
+    form.awayTeamEn = '';
+    form.awayTeamMs = '';
+    form.awayTeamLogoUrl = '';
+  }
+}
+
 export function buildPlatformPayload(form: MatchCreateForm) {
   if (!form.startTime.trim()) {
     throw new FormValidationError('err.kickoff_required');
   }
-  const homeOk = form.homeTeamZh.trim() || form.homeTeamEn.trim() || form.homeTeamMs.trim();
-  const awayOk = form.awayTeamZh.trim() || form.awayTeamEn.trim() || form.awayTeamMs.trim();
-  if (!homeOk || !awayOk) {
-    throw new FormValidationError('err.teams_required');
-  }
-  const homeKey = `${form.homeTeamZh.trim()}|${form.homeTeamEn.trim()}|${form.homeTeamMs.trim()}`.toLowerCase();
-  const awayKey = `${form.awayTeamZh.trim()}|${form.awayTeamEn.trim()}|${form.awayTeamMs.trim()}`.toLowerCase();
-  if (homeKey === awayKey) {
-    throw new FormValidationError('err.teams_same');
+  const homeCode = form.homeTeamCode.trim().toUpperCase();
+  const awayCode = form.awayTeamCode.trim().toUpperCase();
+  if (homeCode && awayCode) {
+    if (homeCode === awayCode) {
+      throw new FormValidationError('err.teams_same');
+    }
+  } else if (homeCode || awayCode) {
+    throw new FormValidationError('err.team_country_required');
+  } else {
+    const homeOk = form.homeTeamZh.trim() || form.homeTeamEn.trim() || form.homeTeamMs.trim();
+    const awayOk = form.awayTeamZh.trim() || form.awayTeamEn.trim() || form.awayTeamMs.trim();
+    if (!homeOk || !awayOk) {
+      throw new FormValidationError('err.team_country_required');
+    }
+    const homeKey = `${form.homeTeamZh.trim()}|${form.homeTeamEn.trim()}|${form.homeTeamMs.trim()}`.toLowerCase();
+    const awayKey = `${form.awayTeamZh.trim()}|${form.awayTeamEn.trim()}|${form.awayTeamMs.trim()}`.toLowerCase();
+    if (homeKey === awayKey) {
+      throw new FormValidationError('err.teams_same');
+    }
   }
   if (
     !form.leagueId.trim() &&
@@ -167,6 +227,8 @@ export function buildPlatformPayload(form: MatchCreateForm) {
     leagueEn: form.leagueEn.trim(),
     leagueZh: form.leagueZh.trim(),
     leagueMs: form.leagueMs.trim() || undefined,
+    homeTeamCode: homeCode || undefined,
+    awayTeamCode: awayCode || undefined,
     homeTeamEn: form.homeTeamEn.trim(),
     homeTeamZh: form.homeTeamZh.trim(),
     homeTeamMs: form.homeTeamMs.trim() || undefined,
diff --git a/apps/admin/src/views/matches/LeagueMatchesPanel.vue b/apps/admin/src/views/matches/LeagueMatchesPanel.vue
index bb68929..20e6db1 100644
--- a/apps/admin/src/views/matches/LeagueMatchesPanel.vue
+++ b/apps/admin/src/views/matches/LeagueMatchesPanel.vue
@@ -229,27 +229,63 @@ defineExpose({ reload: load });
           <span v-else class="bet-stat-zero">0</span>
         </template>
       </el-table-column>
-      <el-table-column :label="t('common.actions')" width="420" align="center">
+      <el-table-column :label="t('common.actions')" width="460" align="center">
         <template #default="{ row }">
           <div class="action-btns">
-            <el-button size="small" class="action-btn" :disabled="!canManage(row)" @click="openManage(matchId(row))">
-              {{ t('matchEditor.manage_btn') }}
-            </el-button>
-            <el-button size="small" class="action-btn" :disabled="!canManage(row)" @click="openMarkets(matchId(row))">
-              {{ t('match.btn.markets') }}
-            </el-button>
-            <el-button size="small" class="action-btn" :disabled="!canDeleteRow(row)" @click="confirmDelete(row)">
+            <div class="action-group">
+              <el-button
+                size="small"
+                type="primary"
+                :disabled="!canManage(row)"
+                @click="openManage(matchId(row))"
+              >
+                {{ t('matchEditor.manage_btn') }}
+              </el-button>
+              <el-button
+                size="small"
+                type="primary"
+                plain
+                :disabled="!canManage(row)"
+                @click="openMarkets(matchId(row))"
+              >
+                {{ t('match.btn.markets') }}
+              </el-button>
+            </div>
+            <div class="action-group">
+              <el-button
+                size="small"
+                type="success"
+                :disabled="!canPublishRow(row)"
+                @click="publish(matchId(row))"
+              >
+                {{ t('common.publish') }}
+              </el-button>
+              <el-button
+                size="small"
+                type="warning"
+                :disabled="!canCloseRow(row)"
+                @click="close(matchId(row))"
+              >
+                {{ t('common.close_betting') }}
+              </el-button>
+              <el-button
+                size="small"
+                type="primary"
+                :disabled="!canSettleRow(row)"
+                @click="settle(matchId(row))"
+              >
+                {{ t('common.settle') }}
+              </el-button>
+            </div>
+            <el-button
+              size="small"
+              type="danger"
+              plain
+              :disabled="!canDeleteRow(row)"
+              @click="confirmDelete(row)"
+            >
               {{ t('common.delete') }}
             </el-button>
-            <el-button size="small" class="action-btn" :disabled="!canPublishRow(row)" @click="publish(matchId(row))">
-              {{ t('common.publish') }}
-            </el-button>
-            <el-button size="small" class="action-btn" :disabled="!canCloseRow(row)" @click="close(matchId(row))">
-              {{ t('common.close_betting') }}
-            </el-button>
-            <el-button size="small" class="action-btn" :disabled="!canSettleRow(row)" @click="settle(matchId(row))">
-              {{ t('common.settle') }}
-            </el-button>
           </div>
         </template>
       </el-table-column>
@@ -284,13 +320,23 @@ defineExpose({ reload: load });
 .action-btns {
   display: flex;
   flex-wrap: wrap;
-  gap: 4px;
+  align-items: center;
+  gap: 6px 8px;
   justify-content: center;
 }
-.action-btns :deep(.action-btn) {
+.action-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 2px 4px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+.action-btns :deep(.el-button) {
   margin: 0 !important;
   min-width: 52px;
-  padding: 4px 8px !important;
+  padding: 4px 10px !important;
   font-size: 12px !important;
 }
 </style>
diff --git a/apps/admin/src/views/matches/LeagueOutrightOddsPanel.vue b/apps/admin/src/views/matches/LeagueOutrightOddsPanel.vue
new file mode 100644
index 0000000..7e9e269
--- /dev/null
+++ b/apps/admin/src/views/matches/LeagueOutrightOddsPanel.vue
@@ -0,0 +1,1051 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { useAdminLocale } from '../../composables/useAdminLocale';
+import api from '../../api';
+import {
+  BUILTIN_COUNTRIES,
+  countryFlagUrl,
+  teamRowDisplayName,
+} from '../../data/builtinCountries';
+
+interface SelectionRow {
+  id: string;
+  teamCode: string;
+  rank: number;
+  teamZh: string;
+  teamEn: string;
+  logoUrl: string | null;
+  odds: string;
+  status: string;
+  editOdds: number;
+}
+
+interface AddableTeam {
+  teamCode: string;
+  teamZh: string;
+  teamEn: string;
+  logoUrl: string | null;
+}
+
+type AddFilter = 'fixture' | 'all';
+type SortKey = 'rank' | 'name' | 'code' | 'odds' | 'saved_odds';
+type SortDir = 'asc' | 'desc';
+
+function teamFlagUrl(row: { teamCode: string; logoUrl?: string | null }): string {
+  const custom = row.logoUrl?.trim();
+  if (custom) return custom;
+  return countryFlagUrl(row.teamCode);
+}
+
+const props = defineProps<{
+  leagueId: string;
+}>();
+
+const emit = defineEmits<{
+  updated: [];
+}>();
+
+const { t, locale } = useAdminLocale();
+
+function teamDisplayName(row: { teamCode: string; teamZh: string; teamEn: string }) {
+  return teamRowDisplayName(row, locale.value);
+}
+
+const loading = ref(false);
+const savingOdds = ref(false);
+const adding = ref(false);
+const matchId = ref('');
+const selections = ref<SelectionRow[]>([]);
+const addableFixtureTeams = ref<AddableTeam[]>([]);
+
+const addVisible = ref(false);
+const addFilter = ref<AddFilter>('fixture');
+const addSearch = ref('');
+const selectedCodes = ref<Set<string>>(new Set());
+const defaultOdds = ref(10);
+
+const batchMode = ref(false);
+const batchSelectedIds = ref<Set<string>>(new Set());
+const batchOdds = ref(10);
+const batchRemoving = ref(false);
+
+const sortBy = ref<SortKey>('rank');
+const sortDir = ref<SortDir>('asc');
+
+const openTeamCodes = computed(
+  () => new Set(selections.value.map((s) => s.teamCode.toUpperCase())),
+);
+
+const allBuiltinAddable = computed<AddableTeam[]>(() =>
+  BUILTIN_COUNTRIES.filter((c) => !openTeamCodes.value.has(c.code)).map((c) => ({
+    teamCode: c.code,
+    teamZh: c.nameZh,
+    teamEn: c.nameEn,
+    logoUrl: null,
+  })),
+);
+
+const sourceTeams = computed<AddableTeam[]>(() =>
+  addFilter.value === 'fixture'
+    ? addableFixtureTeams.value
+    : allBuiltinAddable.value,
+);
+
+const visibleAddTeams = computed(() => {
+  const q = addSearch.value.trim().toLowerCase();
+  if (!q) return sourceTeams.value;
+  return sourceTeams.value.filter(
+    (team) =>
+      team.teamCode.toLowerCase().includes(q) ||
+      team.teamZh.toLowerCase().includes(q) ||
+      team.teamEn.toLowerCase().includes(q),
+  );
+});
+
+const selectedCount = computed(() => selectedCodes.value.size);
+const batchSelectedCount = computed(() => batchSelectedIds.value.size);
+
+const sortedSelections = computed(() => {
+  const rows = [...selections.value];
+  const dir = sortDir.value === 'asc' ? 1 : -1;
+  const loc = locale.value;
+  rows.sort((a, b) => {
+    let cmp = 0;
+    switch (sortBy.value) {
+      case 'rank':
+        cmp = a.rank - b.rank;
+        break;
+      case 'name':
+        cmp = teamRowDisplayName(a, loc).localeCompare(teamRowDisplayName(b, loc), loc);
+        break;
+      case 'code':
+        cmp = a.teamCode.localeCompare(b.teamCode);
+        break;
+      case 'odds':
+        cmp = a.editOdds - b.editOdds;
+        break;
+      case 'saved_odds':
+        cmp =
+          (Number.parseFloat(a.odds) || 0) - (Number.parseFloat(b.odds) || 0);
+        break;
+    }
+    if (cmp === 0) cmp = a.teamCode.localeCompare(b.teamCode);
+    return cmp * dir;
+  });
+  return rows;
+});
+
+async function load() {
+  if (!props.leagueId) return;
+  loading.value = true;
+  try {
+    const { data } = await api.get(`/admin/leagues/${props.leagueId}/outright`);
+    const payload = data.data as {
+      id: string;
+      selections: Array<{
+        id: string;
+        teamCode: string;
+        rank: number;
+        teamZh: string;
+        teamEn: string;
+        logoUrl?: string | null;
+        odds: string;
+        status: string;
+      }>;
+      addableFixtureTeams?: AddableTeam[];
+    };
+    matchId.value = payload.id;
+    addableFixtureTeams.value = payload.addableFixtureTeams ?? [];
+    selections.value = (payload.selections ?? [])
+      .filter((s) => s.status === 'OPEN')
+      .map((s) => ({
+        ...s,
+        logoUrl: s.logoUrl ?? null,
+        editOdds: Number.parseFloat(s.odds) || 10,
+      }));
+    const openIds = new Set(selections.value.map((s) => s.id));
+    batchSelectedIds.value = new Set(
+      [...batchSelectedIds.value].filter((id) => openIds.has(id)),
+    );
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.load_failed'));
+  } finally {
+    loading.value = false;
+  }
+}
+
+function openAddDialog() {
+  addFilter.value = 'fixture';
+  addSearch.value = '';
+  defaultOdds.value = 10;
+  selectedCodes.value = new Set(
+    addableFixtureTeams.value.map((team) => team.teamCode),
+  );
+  addVisible.value = true;
+}
+
+function onAddFilterChange() {
+  addSearch.value = '';
+  if (addFilter.value === 'fixture') {
+    selectedCodes.value = new Set(
+      addableFixtureTeams.value.map((team) => team.teamCode),
+    );
+  } else {
+    selectedCodes.value = new Set();
+  }
+}
+
+function toggleTeam(code: string) {
+  const next = new Set(selectedCodes.value);
+  if (next.has(code)) next.delete(code);
+  else next.add(code);
+  selectedCodes.value = next;
+}
+
+function selectAllVisible() {
+  selectedCodes.value = new Set(
+    visibleAddTeams.value.map((team) => team.teamCode),
+  );
+}
+
+function clearSelection() {
+  selectedCodes.value = new Set();
+}
+
+function toggleBatchMode() {
+  batchMode.value = !batchMode.value;
+  if (!batchMode.value) batchSelectedIds.value = new Set();
+}
+
+function toggleBatchSelect(id: string) {
+  const next = new Set(batchSelectedIds.value);
+  if (next.has(id)) next.delete(id);
+  else next.add(id);
+  batchSelectedIds.value = next;
+}
+
+function selectAllBatch() {
+  batchSelectedIds.value = new Set(selections.value.map((row) => row.id));
+}
+
+function clearBatchSelection() {
+  batchSelectedIds.value = new Set();
+}
+
+function applyBatchOdds() {
+  if (batchSelectedIds.value.size === 0) {
+    ElMessage.warning(t('outright.batch.err_none'));
+    return;
+  }
+  if (batchOdds.value <= 1) {
+    ElMessage.warning(t('outright.err_odds_min'));
+    return;
+  }
+  for (const row of selections.value) {
+    if (batchSelectedIds.value.has(row.id)) row.editOdds = batchOdds.value;
+  }
+  ElMessage.success(
+    t('outright.batch.apply_ok', { n: batchSelectedIds.value.size }),
+  );
+}
+
+async function batchRemove() {
+  if (!matchId.value) return;
+  if (batchSelectedIds.value.size === 0) {
+    ElMessage.warning(t('outright.batch.err_none'));
+    return;
+  }
+  try {
+    await ElMessageBox.confirm(
+      t('outright.batch.confirm_remove', { n: batchSelectedIds.value.size }),
+      { type: 'warning' },
+    );
+  } catch {
+    return;
+  }
+
+  batchRemoving.value = true;
+  const ids = [...batchSelectedIds.value];
+  let ok = 0;
+  let fail = 0;
+  try {
+    for (const id of ids) {
+      try {
+        await api.delete(`/admin/outrights/${matchId.value}/selections/${id}`);
+        ok++;
+      } catch {
+        fail++;
+      }
+    }
+    if (fail === 0) {
+      ElMessage.success(t('outright.batch.remove_ok', { n: ok }));
+    } else {
+      ElMessage.warning(t('outright.batch.remove_partial', { ok, fail }));
+    }
+    batchSelectedIds.value = new Set();
+    await load();
+    emit('updated');
+  } finally {
+    batchRemoving.value = false;
+  }
+}
+
+async function saveOdds() {
+  if (!matchId.value) return;
+  for (const row of selections.value) {
+    if (row.editOdds <= 1) {
+      ElMessage.warning(t('outright.err_odds_min'));
+      return;
+    }
+  }
+  savingOdds.value = true;
+  try {
+    await api.put(`/admin/outrights/${matchId.value}/odds`, {
+      updates: selections.value.map((row) => ({
+        selectionId: row.id,
+        odds: row.editOdds,
+      })),
+    });
+    ElMessage.success(t('msg.outright_odds_saved'));
+    await load();
+    emit('updated');
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
+  } finally {
+    savingOdds.value = false;
+  }
+}
+
+async function submitAdd() {
+  if (!matchId.value) return;
+  if (selectedCodes.value.size === 0) {
+    ElMessage.warning(t('outright.add.err_none'));
+    return;
+  }
+  if (defaultOdds.value <= 1) {
+    ElMessage.warning(t('outright.err_odds_min'));
+    return;
+  }
+
+  const byCode = new Map(
+    [...addableFixtureTeams.value, ...allBuiltinAddable.value].map((team) => [
+      team.teamCode,
+      team,
+    ]),
+  );
+
+  const items = [...selectedCodes.value]
+    .map((code) => byCode.get(code))
+    .filter((team): team is AddableTeam => !!team)
+    .map((team) => ({
+      teamCode: team.teamCode,
+      teamZh: team.teamZh,
+      teamEn: team.teamEn,
+      logoUrl: team.logoUrl?.trim() || undefined,
+      odds: defaultOdds.value,
+    }));
+
+  if (!items.length) {
+    ElMessage.warning(t('outright.add.err_none'));
+    return;
+  }
+
+  adding.value = true;
+  try {
+    const { data } = await api.post(
+      `/admin/outrights/${matchId.value}/selections/batch`,
+      { items },
+    );
+    const batch = (data.data as { batchResult?: { added: number; skipped: number } })
+      ?.batchResult;
+    if (batch) {
+      ElMessage.success(
+        t('msg.outright_teams_added', {
+          n: batch.added,
+          skipped: batch.skipped,
+        }),
+      );
+    } else {
+      ElMessage.success(t('msg.saved'));
+    }
+    addVisible.value = false;
+    selectedCodes.value = new Set();
+    await load();
+    emit('updated');
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
+  } finally {
+    adding.value = false;
+  }
+}
+
+async function removeSelection(row: SelectionRow) {
+  if (!matchId.value) return;
+  try {
+    await ElMessageBox.confirm(
+      t('outright.confirm_remove', { name: teamDisplayName(row) }),
+      { type: 'warning' },
+    );
+  } catch {
+    return;
+  }
+  loading.value = true;
+  try {
+    await api.delete(`/admin/outrights/${matchId.value}/selections/${row.id}`);
+    ElMessage.success(t('msg.saved'));
+    await load();
+    emit('updated');
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(
+  () => props.leagueId,
+  () => {
+    void load();
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div v-loading="loading" class="outright-odds-panel">
+    <div class="outright-odds-panel__head">
+      <p class="outright-odds-panel__hint">{{ t('outright.odds_only_hint') }}</p>
+      <div class="outright-odds-panel__actions">
+        <el-button
+          v-if="selections.length"
+          :type="batchMode ? 'warning' : 'default'"
+          plain
+          size="small"
+          @click="toggleBatchMode"
+        >
+          {{ batchMode ? t('outright.batch.exit') : t('outright.batch.mode') }}
+        </el-button>
+        <el-button type="primary" plain size="small" @click="openAddDialog">
+          {{ t('outright.btn.add_team') }}
+        </el-button>
+        <el-button
+          type="primary"
+          size="small"
+          :loading="savingOdds"
+          :disabled="selections.length === 0"
+          @click="saveOdds"
+        >
+          {{ t('outright.btn.save_odds') }}
+        </el-button>
+      </div>
+    </div>
+
+    <div v-if="batchMode && selections.length" class="outright-odds-panel__batch">
+      <el-button size="small" link type="primary" @click="selectAllBatch">
+        {{ t('outright.add.select_all') }}
+      </el-button>
+      <el-button size="small" link @click="clearBatchSelection">
+        {{ t('outright.add.clear_selection') }}
+      </el-button>
+      <span class="outright-odds-panel__batch-count">
+        {{ t('outright.add.selected_count', { n: batchSelectedCount }) }}
+      </span>
+      <label class="outright-odds-panel__batch-odds">
+        {{ t('outright.add.default_odds') }}
+        <el-input-number
+          v-model="batchOdds"
+          :min="1.01"
+          :step="0.05"
+          :precision="2"
+          size="small"
+          controls-position="right"
+          @click.stop
+        />
+      </label>
+      <el-button
+        size="small"
+        :disabled="batchSelectedCount === 0"
+        @click="applyBatchOdds"
+      >
+        {{ t('outright.batch.apply_odds') }}
+      </el-button>
+      <el-button
+        size="small"
+        type="danger"
+        plain
+        :loading="batchRemoving"
+        :disabled="batchSelectedCount === 0"
+        @click="batchRemove"
+      >
+        {{ t('outright.batch.remove') }}
+      </el-button>
+    </div>
+
+    <div v-if="selections.length" class="outright-odds-panel__sort">
+      <span class="outright-odds-panel__sort-label">{{ t('outright.sort.label') }}</span>
+      <el-select v-model="sortBy" size="small" class="outright-odds-panel__sort-by">
+        <el-option value="rank" :label="t('outright.sort.rank')" />
+        <el-option value="name" :label="t('outright.sort.name')" />
+        <el-option value="code" :label="t('outright.sort.code')" />
+        <el-option value="odds" :label="t('outright.sort.odds')" />
+        <el-option value="saved_odds" :label="t('outright.sort.saved_odds')" />
+      </el-select>
+      <el-select v-model="sortDir" size="small" class="outright-odds-panel__sort-dir">
+        <el-option value="asc" :label="t('outright.sort.asc')" />
+        <el-option value="desc" :label="t('outright.sort.desc')" />
+      </el-select>
+    </div>
+
+    <div v-if="selections.length" class="team-list-scroll">
+      <div class="team-list">
+        <div
+          v-for="row in sortedSelections"
+          :key="row.id"
+          class="team-row-wrap"
+          :class="{
+            'team-row-wrap--batch': batchMode,
+            'team-row-wrap--batch-selected': batchMode && batchSelectedIds.has(row.id),
+          }"
+          @click="batchMode ? toggleBatchSelect(row.id) : undefined"
+        >
+          <article class="team-row">
+            <span
+              v-if="batchMode && batchSelectedIds.has(row.id)"
+              class="team-row__check"
+              aria-hidden="true"
+            >✓</span>
+            <div class="team-row__head">
+              <span class="team-row__rank">{{ row.rank }}</span>
+              <img
+                v-if="teamFlagUrl(row)"
+                :src="teamFlagUrl(row)"
+                :alt="teamDisplayName(row)"
+                class="team-row__flag"
+              />
+              <div class="team-row__names">
+                <span class="team-row__name" :title="teamDisplayName(row)">
+                  {{ teamDisplayName(row) }}
+                </span>
+                <span class="team-row__meta">{{ row.teamCode }}</span>
+              </div>
+            </div>
+            <div class="team-row__right" @click.stop>
+              <div class="team-row__odds-row">
+                <span class="team-row__odds-label">{{ t('outright.col.odds') }}</span>
+                <el-input-number
+                  v-model="row.editOdds"
+                  class="team-row__odds"
+                  :min="1.01"
+                  :max="9999"
+                  :step="0.01"
+                  :precision="2"
+                  size="small"
+                  controls-position="right"
+                />
+              </div>
+            </div>
+          </article>
+          <button
+            v-if="!batchMode"
+            type="button"
+            class="team-row__trash"
+            :title="t('common.delete')"
+            :aria-label="t('common.delete')"
+            @click.stop="removeSelection(row)"
+          >
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path
+                fill="currentColor"
+                d="M9 3a1 1 0 0 0-.894.553L7.382 6H4a1 1 0 1 0 0 2h1v11a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8h1a1 1 0 1 0 0-2h-3.382l-.724-2.447A1 1 0 0 0 15 3H9zm2 5a1 1 0 0 1 2 0v9a1 1 0 1 1-2 0V8zm4 0a1 1 0 0 1 2 0v9a1 1 0 1 1-2 0V8z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+    <p v-else class="outright-odds-panel__empty">{{ t('outright.empty_no_teams') }}</p>
+
+    <el-dialog
+      v-model="addVisible"
+      :title="t('outright.btn.add_team')"
+      width="640px"
+      class="add-teams-dialog"
+    >
+      <div class="add-teams-dialog__toolbar">
+        <el-radio-group v-model="addFilter" size="small" @change="onAddFilterChange">
+          <el-radio-button value="fixture">
+            {{ t('outright.add.filter_fixture') }}
+            <span v-if="addableFixtureTeams.length" class="add-teams-dialog__badge">
+              {{ addableFixtureTeams.length }}
+            </span>
+          </el-radio-button>
+          <el-radio-button value="all">
+            {{ t('outright.add.filter_all') }}
+          </el-radio-button>
+        </el-radio-group>
+        <el-input
+          v-model="addSearch"
+          size="small"
+          clearable
+          class="add-teams-dialog__search"
+          :placeholder="t('outright.add.search_ph')"
+        />
+      </div>
+
+      <div class="add-teams-dialog__actions">
+        <el-button size="small" link type="primary" @click="selectAllVisible">
+          {{ t('outright.add.select_all') }}
+        </el-button>
+        <el-button size="small" link @click="clearSelection">
+          {{ t('outright.add.clear_selection') }}
+        </el-button>
+        <span class="add-teams-dialog__count">
+          {{ t('outright.add.selected_count', { n: selectedCount }) }}
+        </span>
+        <label class="add-teams-dialog__odds">
+          {{ t('outright.add.default_odds') }}
+          <el-input-number
+            v-model="defaultOdds"
+            :min="1.01"
+            :step="0.05"
+            :precision="2"
+            size="small"
+            controls-position="right"
+          />
+        </label>
+      </div>
+
+      <div v-if="visibleAddTeams.length" class="add-teams-grid">
+        <button
+          v-for="team in visibleAddTeams"
+          :key="team.teamCode"
+          type="button"
+          class="add-team-pick"
+          :class="{ 'add-team-pick--selected': selectedCodes.has(team.teamCode) }"
+          @click="toggleTeam(team.teamCode)"
+        >
+          <span
+            v-if="selectedCodes.has(team.teamCode)"
+            class="add-team-pick__check"
+            aria-hidden="true"
+          >✓</span>
+          <img
+            v-if="teamFlagUrl(team)"
+            :src="teamFlagUrl(team)"
+            :alt="teamDisplayName(team)"
+            class="add-team-pick__flag"
+          />
+          <span class="add-team-pick__name">{{ teamDisplayName(team) }}</span>
+          <span class="add-team-pick__code">{{ team.teamCode }}</span>
+        </button>
+      </div>
+      <p v-else class="add-teams-dialog__empty">
+        {{
+          addFilter === 'fixture'
+            ? t('outright.add.empty_fixture')
+            : t('outright.add.empty_all')
+        }}
+      </p>
+
+      <template #footer>
+        <el-button @click="addVisible = false">{{ t('common.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          :loading="adding"
+          :disabled="selectedCount === 0"
+          @click="submitAdd"
+        >
+          {{ t('common.confirm') }}
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.outright-odds-panel {
+  display: flex;
+  flex-direction: column;
+  padding: 12px 16px 16px;
+  border-bottom: 1px solid #1a1a1a;
+}
+.outright-odds-panel__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  margin-bottom: 12px;
+}
+.outright-odds-panel__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.outright-odds-panel__hint {
+  margin: 0;
+  font-size: 12px;
+  color: #777;
+  line-height: 1.5;
+}
+.outright-odds-panel__batch {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  margin-bottom: 10px;
+  padding: 8px 10px;
+  border: 1px solid #2a2a2a;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.02);
+}
+.outright-odds-panel__batch-count {
+  font-size: 12px;
+  color: #888;
+}
+.outright-odds-panel__batch-odds {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+  font-size: 12px;
+  color: #aaa;
+}
+.outright-odds-panel__sort {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  margin-bottom: 8px;
+}
+.outright-odds-panel__sort-label {
+  font-size: 12px;
+  color: #888;
+  white-space: nowrap;
+}
+.outright-odds-panel__sort-by {
+  width: 132px;
+}
+.outright-odds-panel__sort-dir {
+  width: 96px;
+}
+.outright-odds-panel__empty {
+  margin: 0;
+  padding: 16px 0;
+  font-size: 13px;
+  color: #666;
+  text-align: center;
+}
+
+.team-list-scroll {
+  max-height: min(440px, calc(100vh - 300px));
+  overflow-y: auto;
+  padding-right: 4px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
+}
+
+.team-list-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+
+.team-list-scroll::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.16);
+  border-radius: 3px;
+}
+
+.team-list {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.team-row-wrap {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.team-row-wrap--batch {
+  cursor: pointer;
+}
+
+.team-row {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex: 1;
+  padding: 8px 10px 8px 8px;
+  background: #111;
+  border: 1px solid #262626;
+  border-radius: 8px;
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+
+.team-row-wrap:hover .team-row {
+  border-color: #3a3a3a;
+}
+
+.team-row-wrap--batch-selected .team-row {
+  border-color: var(--el-color-primary);
+  background: rgba(64, 158, 255, 0.08);
+}
+
+.team-row__trash {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: #666;
+  cursor: pointer;
+  transition:
+    color 0.15s ease,
+    background 0.15s ease;
+}
+
+.team-row__trash svg {
+  width: 16px;
+  height: 16px;
+}
+
+.team-row__trash:hover {
+  color: #f56c6c;
+  background: rgba(245, 108, 108, 0.12);
+}
+
+.team-row__trash:focus-visible {
+  outline: 2px solid rgba(245, 108, 108, 0.45);
+  outline-offset: 1px;
+}
+
+.team-row__check {
+  position: absolute;
+  top: 6px;
+  right: 8px;
+  font-size: 12px;
+  color: var(--el-color-primary);
+}
+
+.team-row__head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  flex: 1;
+}
+
+.team-row__right {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.team-row__rank {
+  flex-shrink: 0;
+  width: 16px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #555;
+  text-align: center;
+}
+
+.team-row__flag {
+  flex-shrink: 0;
+  width: 28px;
+  height: 20px;
+  object-fit: cover;
+  border-radius: 3px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+}
+
+.team-row__names {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+  flex: 1;
+}
+
+.team-row__name {
+  font-size: 12px;
+  font-weight: 600;
+  color: #e8e8e8;
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.team-row__meta {
+  font-size: 10px;
+  color: #666;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.team-row__odds-row {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+}
+
+.team-row__odds-label {
+  font-size: 10px;
+  color: #666;
+  line-height: 1.2;
+  white-space: nowrap;
+  text-align: right;
+}
+
+.team-row__odds {
+  width: 72px;
+}
+
+.team-row__odds :deep(.el-input-number) {
+  width: 72px;
+}
+
+.add-teams-dialog__toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+
+.add-teams-dialog__search {
+  flex: 1;
+  min-width: 160px;
+}
+
+.add-teams-dialog__badge {
+  margin-left: 4px;
+  font-size: 11px;
+  opacity: 0.75;
+}
+
+.add-teams-dialog__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #262626;
+}
+
+.add-teams-dialog__count {
+  margin-left: auto;
+  font-size: 12px;
+  color: #888;
+}
+
+.add-teams-dialog__odds {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #aaa;
+}
+
+.add-teams-dialog__empty {
+  margin: 0;
+  padding: 24px 0;
+  text-align: center;
+  font-size: 13px;
+  color: #666;
+}
+
+.add-teams-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 8px;
+  max-height: 360px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.add-team-pick {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 8px 8px;
+  border: 1px solid #2a2a2a;
+  border-radius: 8px;
+  background: #141414;
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+
+.add-team-pick:hover {
+  border-color: #3d3d3d;
+}
+
+.add-team-pick--selected {
+  border-color: var(--el-color-primary);
+  background: rgba(64, 158, 255, 0.08);
+}
+
+.add-team-pick__check {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: var(--el-color-primary);
+}
+
+.add-team-pick__flag {
+  width: 36px;
+  height: 24px;
+  object-fit: cover;
+  border-radius: 3px;
+}
+
+.add-team-pick__name {
+  font-size: 12px;
+  font-weight: 600;
+  color: #e0e0e0;
+  text-align: center;
+  line-height: 1.25;
+}
+
+.add-team-pick__code {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  color: #555;
+}
+</style>
diff --git a/apps/admin/src/views/matches/LeagueOutrightPanel.vue b/apps/admin/src/views/matches/LeagueOutrightPanel.vue
new file mode 100644
index 0000000..60cb67d
--- /dev/null
+++ b/apps/admin/src/views/matches/LeagueOutrightPanel.vue
@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { ElMessage } from 'element-plus';
+import { useAdminLocale } from '../../composables/useAdminLocale';
+import api from '../../api';
+
+export interface LeagueOutrightSummary {
+  id: string;
+  leagueId: string;
+  leagueCode: string;
+  status: string;
+  selectionCount: number;
+  playerVisible: boolean;
+  playerHiddenReason: string | null;
+  canImportCanonical: boolean;
+  matchName: string;
+}
+
+interface SelectionPreview {
+  rank: number;
+  teamZh: string;
+  teamCode: string;
+  odds: string;
+}
+
+const props = defineProps<{
+  leagueId: string;
+  event: LeagueOutrightSummary | null;
+}>();
+
+const emit = defineEmits<{
+  updated: [];
+  create: [];
+}>();
+
+const { t } = useAdminLocale();
+const router = useRouter();
+
+const loading = ref(false);
+const applying = ref(false);
+const selections = ref<SelectionPreview[]>([]);
+const hiddenReason = ref<string | null>(null);
+
+function hiddenTip(reason: string | null) {
+  if (!reason) return '';
+  return t(`outright.hidden_reason.${reason}`);
+}
+
+function goEdit() {
+  if (!props.event) return;
+  router.push({ name: 'admin-outright-edit', params: { matchId: props.event.id } });
+}
+
+async function loadDetail() {
+  if (!props.event) {
+    selections.value = [];
+    hiddenReason.value = null;
+    return;
+  }
+  loading.value = true;
+  try {
+    const { data } = await api.get(`/admin/outrights/${props.event.id}`);
+    const payload = data.data as {
+      playerHiddenReason: string | null;
+      selections: SelectionPreview[];
+    };
+    hiddenReason.value = payload.playerHiddenReason;
+    selections.value = (payload.selections ?? []).slice(0, 8);
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.load_failed'));
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function applyCanonical() {
+  if (!props.event?.canImportCanonical) return;
+  applying.value = true;
+  try {
+    await api.post('/admin/outrights/import/wc2026');
+    ElMessage.success(t('msg.outright_canonical_applied'));
+    emit('updated');
+    await loadDetail();
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
+  } finally {
+    applying.value = false;
+  }
+}
+
+watch(
+  () => props.event?.id,
+  () => loadDetail(),
+  { immediate: true },
+);
+</script>
+
+<template>
+  <section class="league-outright-panel">
+    <div class="panel-head">
+      <div class="panel-head-text">
+        <span class="panel-title">{{ t('nav.outrights') }}</span>
+        <span class="panel-hint">{{ t('match.outright.section_hint') }}</span>
+      </div>
+      <div class="panel-actions">
+        <template v-if="event">
+          <el-tag
+            size="small"
+            :type="event.status === 'PUBLISHED' ? 'success' : 'info'"
+            effect="dark"
+          >
+            {{
+              event.status === 'PUBLISHED'
+                ? t('outright.status.published')
+                : t('outright.status.draft')
+            }}
+          </el-tag>
+          <el-tag size="small" :type="event.playerVisible ? 'success' : 'warning'" effect="plain">
+            {{ event.playerVisible ? t('outright.col.player_visible') : t('outright.not_on_player') }}
+          </el-tag>
+          <el-button type="primary" size="small" @click="goEdit">
+            {{ t('common.edit') }}
+          </el-button>
+          <el-button
+            v-if="event.canImportCanonical"
+            size="small"
+            :loading="applying"
+            @click="applyCanonical"
+          >
+            {{ t('outright.btn.apply_canonical') }}
+          </el-button>
+        </template>
+        <el-button v-else type="primary" plain size="small" @click="emit('create')">
+          {{ t('match.outright.setup') }}
+        </el-button>
+      </div>
+    </div>
+
+    <div v-if="event" v-loading="loading" class="panel-body">
+      <p v-if="event.matchName" class="meta-line">{{ event.matchName }}</p>
+      <p class="meta-line">
+        {{ t('outright.col.teams') }}：{{ event.selectionCount }}
+      </p>
+      <p v-if="!event.playerVisible && hiddenReason" class="meta-warn">
+        {{ hiddenTip(hiddenReason) }}
+      </p>
+      <el-table
+        v-if="selections.length"
+        :data="selections"
+        size="small"
+        class="preview-table"
+        max-height="200"
+      >
+        <el-table-column prop="rank" :label="t('outright.col.rank')" width="56" />
+        <el-table-column prop="teamZh" :label="t('outright.col.team_zh')" min-width="100" />
+        <el-table-column prop="teamCode" :label="t('outright.col.code')" width="72" />
+        <el-table-column prop="odds" :label="t('outright.col.odds')" width="88" align="right" />
+      </el-table>
+      <p v-else-if="!loading" class="meta-empty">{{ t('outright.expand_no_teams') }}</p>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.league-outright-panel {
+  margin-bottom: 10px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: rgba(47, 181, 106, 0.04);
+  border: 1px solid rgba(47, 181, 106, 0.14);
+}
+.panel-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.panel-head-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.panel-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--green-text);
+}
+.panel-hint {
+  font-size: 11px;
+  color: #666;
+  line-height: 1.4;
+}
+.panel-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+.panel-body {
+  margin-top: 8px;
+}
+.meta-line {
+  margin: 0 0 4px;
+  font-size: 12px;
+  color: #aaa;
+}
+.meta-warn {
+  margin: 0 0 8px;
+  font-size: 12px;
+  color: #e6a23c;
+  line-height: 1.45;
+}
+.meta-empty {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: #666;
+}
+.preview-table {
+  margin-top: 6px;
+}
+</style>
diff --git a/apps/admin/src/views/matches/MatchEventEditor.vue b/apps/admin/src/views/matches/MatchEventEditor.vue
index 512bd8f..66be8c4 100644
--- a/apps/admin/src/views/matches/MatchEventEditor.vue
+++ b/apps/admin/src/views/matches/MatchEventEditor.vue
@@ -14,13 +14,13 @@ import {
   type AdminMatchDetail,
   type MatchCreateForm,
 } from '../match-form.ts';
+import AdminSubNav from '../../components/AdminSubNav.vue';
 
 const route = useRoute();
 const router = useRouter();
 const { t } = useAdminLocale();
 
 const matchId = computed(() => String(route.params.matchId ?? ''));
-
 const loading = ref(false);
 const savingMeta = ref(false);
 const status = ref('DRAFT');
@@ -52,7 +52,7 @@ async function load() {
     const detail = data.data as AdminMatchDetail;
     if (detail.isOutright) {
       ElMessage.warning(t('msg.outright_no_edit'));
-      router.replace('/outrights');
+      router.replace('/matches');
       return;
     }
     status.value = detail.status;
@@ -93,15 +93,14 @@ async function saveMeta() {
 
 <template>
   <div v-loading="loading" class="match-editor-page page-scroll">
-    <div class="editor-topbar">
-      <el-button size="small" text class="back-btn" @click="router.push('/matches')">
-        ← {{ t('matchEditor.back') }}
-      </el-button>
-      <div class="topbar-title">
-        <h2>{{ t('matchEditor.title') }} #{{ matchId }}</h2>
+    <AdminSubNav
+      :title="t('matchEditor.title')"
+      :subtitle="`#${matchId}`"
+    >
+      <template #extra>
         <el-tag size="small" type="info">{{ t(`match.status.${status}`) }}</el-tag>
-      </div>
-    </div>
+      </template>
+    </AdminSubNav>
 
     <section class="panel">
       <div class="panel-head">
@@ -259,33 +258,6 @@ async function saveMeta() {
   padding-bottom: 24px;
 }
 
-.editor-topbar {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 6px;
-  flex-shrink: 0;
-}
-
-.back-btn {
-  color: var(--green-text) !important;
-  padding-left: 0 !important;
-}
-
-.topbar-title {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.topbar-title h2 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 800;
-  color: #fff;
-}
-
 .panel {
   background: #111;
   border: 1px solid #252525;
diff --git a/apps/admin/src/views/matches/MatchMarketsPage.vue b/apps/admin/src/views/matches/MatchMarketsPage.vue
index 5a8e62f..3fd2671 100644
--- a/apps/admin/src/views/matches/MatchMarketsPage.vue
+++ b/apps/admin/src/views/matches/MatchMarketsPage.vue
@@ -6,6 +6,7 @@ import { useAdminLocale } from '../../composables/useAdminLocale';
 import api from '../../api';
 import MatchMarketsPanel from './MatchMarketsPanel.vue';
 import type { AdminMatchDetail } from '../match-form.ts';
+import AdminSubNav from '../../components/AdminSubNav.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -24,7 +25,7 @@ async function load() {
     const detail = data.data as AdminMatchDetail;
     if (detail.isOutright) {
       ElMessage.warning(t('msg.outright_no_edit'));
-      router.replace('/outrights');
+      router.replace('/matches');
       return;
     }
     status.value = detail.status;
@@ -46,16 +47,14 @@ watch(matchId, load, { immediate: true });
 
 <template>
   <div v-loading="loading" class="match-markets-page page-scroll">
-    <div class="editor-topbar">
-      <el-button size="small" text class="back-btn" @click="router.push('/matches')">
-        ← {{ t('matchEditor.back') }}
-      </el-button>
-      <div class="topbar-title">
-        <h2>{{ t('matchEditor.section_markets') }}</h2>
-        <span class="match-subtitle">{{ matchLabel }}</span>
+    <AdminSubNav
+      :title="t('matchEditor.section_markets')"
+      :subtitle="matchLabel"
+    >
+      <template #extra>
         <el-tag size="small" type="info">{{ t(`match.status.${status}`) }}</el-tag>
-      </div>
-    </div>
+      </template>
+    </AdminSubNav>
 
     <section v-if="matchId" class="panel">
       <MatchMarketsPanel :match-id="matchId" />
@@ -68,36 +67,6 @@ watch(matchId, load, { immediate: true });
   padding: 0 4px 24px;
 }
 
-.editor-topbar {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.back-btn {
-  flex-shrink: 0;
-  padding-left: 0 !important;
-}
-
-.topbar-title {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-}
-
-.topbar-title h2 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.match-subtitle {
-  color: var(--green-text);
-  font-size: 14px;
-}
-
 .panel {
   background: #111;
   border: 1px solid #2a2a2a;
diff --git a/apps/admin/src/views/outrights/OutrightEditRedirect.vue b/apps/admin/src/views/outrights/OutrightEditRedirect.vue
new file mode 100644
index 0000000..752b3a1
--- /dev/null
+++ b/apps/admin/src/views/outrights/OutrightEditRedirect.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import api from '../../api';
+
+const route = useRoute();
+const router = useRouter();
+
+onMounted(async () => {
+  const matchId = String(route.params.matchId ?? '').trim();
+  if (!matchId) {
+    await router.replace('/matches/outrights');
+    return;
+  }
+  try {
+    const { data } = await api.get(`/admin/outrights/${matchId}`);
+    const leagueId = data.data?.leagueId as string | undefined;
+    await router.replace({
+      path: '/matches/outrights',
+      query: leagueId ? { leagueId } : { matchId },
+    });
+  } catch {
+    await router.replace('/matches/outrights');
+  }
+});
+</script>
+
+<template>
+  <div />
+</template>
diff --git a/apps/admin/src/views/outrights/OutrightEventEditor.vue b/apps/admin/src/views/outrights/OutrightEventEditor.vue
index 0ec2372..1f5ec93 100644
--- a/apps/admin/src/views/outrights/OutrightEventEditor.vue
+++ b/apps/admin/src/views/outrights/OutrightEventEditor.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { useAdminLocale } from '../../composables/useAdminLocale';
 import api from '../../api';
 import LogoUrlField from '../../components/LogoUrlField.vue';
+import AdminSubNav from '../../components/AdminSubNav.vue';
 import {
   getBuiltinCountry,
   resolveCountryCode,
@@ -12,7 +13,6 @@ import {
 } from '../../data/builtinCountries';
 
 const route = useRoute();
-const router = useRouter();
 const { t } = useAdminLocale();
 
 const matchId = computed(() => String(route.params.matchId ?? ''));
@@ -336,11 +336,10 @@ async function saveRow(row: SelectionRow) {
 
 <template>
   <div class="event-editor" v-loading="loading">
-    <div class="editor-topbar">
-      <el-button size="small" text @click="router.push({ name: 'admin-outrights' })">
-        ← {{ t('outright.back_list') }}
-      </el-button>
-    </div>
+    <AdminSubNav
+      :title="t('outright.section.edit')"
+      :subtitle="`#${matchId}`"
+    />
 
     <el-alert
       v-if="!meta.playerVisible"
@@ -513,14 +512,6 @@ async function saveRow(row: SelectionRow) {
   overflow: auto;
 }
 
-.editor-topbar {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex-shrink: 0;
-  margin-bottom: 2px;
-}
-
 .player-alert {
   flex-shrink: 0;
   margin-bottom: 0;
diff --git a/apps/api/src/applications/admin/admin.controller.ts b/apps/api/src/applications/admin/admin.controller.ts
index b793726..aa5c261 100644
--- a/apps/api/src/applications/admin/admin.controller.ts
+++ b/apps/api/src/applications/admin/admin.controller.ts
@@ -247,6 +247,14 @@ class CreatePlatformMatchDto {
   @IsString()
   leagueMs?: string;
 
+  @IsOptional()
+  @IsString()
+  homeTeamCode?: string;
+
+  @IsOptional()
+  @IsString()
+  awayTeamCode?: string;
+
   @IsString()
   homeTeamEn!: string;
 
@@ -471,6 +479,11 @@ class AddOutrightSelectionDto {
   logoUrl?: string;
 }
 
+class AddOutrightSelectionsBatchDto {
+  @IsArray()
+  items!: AddOutrightSelectionDto[];
+}
+
 class UpdateOutrightSelectionTeamDto {
   @IsOptional()
   @IsString()
@@ -983,6 +996,15 @@ export class AdminController {
     return jsonResponse(result);
   }
 
+  @Get('leagues/:leagueId/outright')
+  @RequirePermissions(P.matches, P.reports)
+  async getLeagueOutright(@Param('leagueId') leagueId: string) {
+    const data = await this.outright.getOrCreateAndSyncForLeague(
+      BigInt(leagueId),
+    );
+    return jsonResponse(data);
+  }
+
   @Get('leagues/:leagueId/matches')
   @RequirePermissions(P.matches, P.reports)
   async listLeagueMatches(
@@ -1096,6 +1118,8 @@ export class AdminController {
       leagueEn: dto.leagueEn ?? '',
       leagueZh: dto.leagueZh ?? '',
       leagueMs: dto.leagueMs,
+      homeTeamCode: dto.homeTeamCode,
+      awayTeamCode: dto.awayTeamCode,
       homeTeamEn: dto.homeTeamEn,
       homeTeamZh: dto.homeTeamZh,
       homeTeamMs: dto.homeTeamMs,
@@ -1319,6 +1343,22 @@ export class AdminController {
     return jsonResponse(data);
   }
 
+  @Post('outrights/:matchId/selections/batch')
+  @RequirePermissions(P.matches)
+  async addOutrightSelectionsBatch(
+    @Param('matchId') matchId: string,
+    @Body() dto: AddOutrightSelectionsBatchDto,
+  ) {
+    if (!dto.items?.length) {
+      throw new BadRequestException('At least one team required');
+    }
+    const data = await this.outright.addSelectionsBatch(
+      BigInt(matchId),
+      dto.items,
+    );
+    return jsonResponse(data);
+  }
+
   @Patch('outrights/:matchId/selections/:selectionId')
   @RequirePermissions(P.matches)
   async updateOutrightSelectionTeam(
diff --git a/apps/api/src/applications/player/player.controller.ts b/apps/api/src/applications/player/player.controller.ts
index 7a6cb63..23a79b0 100644
--- a/apps/api/src/applications/player/player.controller.ts
+++ b/apps/api/src/applications/player/player.controller.ts
@@ -222,10 +222,28 @@ export class PlayerController {
     return jsonResponse({ ...result, items });
   }
 
+  @Get('bets/stats')
+  async betStats(@CurrentUser('id') userId: bigint) {
+    const stats = await this.bets.getUserBetStats(userId);
+    return jsonResponse(stats);
+  }
+
   @Get('bets/:betNo')
-  async betDetail(@CurrentUser('id') userId: bigint, @Param('betNo') betNo: string) {
+  async betDetail(
+    @CurrentUser('id') userId: bigint,
+    @CurrentUser('locale') locale: string,
+    @Param('betNo') betNo: string,
+  ) {
     const bet = await this.bets.getBetByNo(betNo, userId);
-    return jsonResponse(bet);
+    if (!bet) return jsonResponse(null);
+    const [enriched] = await this.matches.enrichBetsForHistory([bet], locale);
+    return jsonResponse(enriched);
+  }
+
+  @Get('wallet/transactions/stats')
+  async transactionStats(@CurrentUser('id') userId: bigint) {
+    const stats = await this.wallet.getTransactionStats(userId);
+    return jsonResponse(stats);
   }
 
   @Get('wallet/transactions')
diff --git a/apps/api/src/domains/betting/bets.service.ts b/apps/api/src/domains/betting/bets.service.ts
index 16979df..c24261a 100644
--- a/apps/api/src/domains/betting/bets.service.ts
+++ b/apps/api/src/domains/betting/bets.service.ts
@@ -247,6 +247,35 @@ export class BetsService {
     return { items, total, page, pageSize };
   }
 
+  async getUserBetStats(userId: bigint) {
+    const [byStatus, aggregates] = await Promise.all([
+      this.prisma.bet.groupBy({
+        by: ['status'],
+        where: { userId },
+        _count: { id: true },
+        _sum: { stake: true, actualReturn: true, potentialReturn: true },
+      }),
+      this.prisma.bet.aggregate({
+        where: { userId },
+        _sum: { stake: true, actualReturn: true, potentialReturn: true },
+        _count: { id: true },
+      }),
+    ]);
+
+    return {
+      total: aggregates._count.id,
+      totalStake: aggregates._sum.stake?.toString() ?? '0',
+      totalReturn: aggregates._sum.actualReturn?.toString() ?? '0',
+      totalPotentialReturn: aggregates._sum.potentialReturn?.toString() ?? '0',
+      byStatus: byStatus.map((g) => ({
+        status: g.status,
+        count: g._count.id,
+        totalStake: g._sum.stake?.toString() ?? '0',
+        totalReturn: g._sum.actualReturn?.toString() ?? '0',
+      })),
+    };
+  }
+
   async getBetByNo(betNo: string, userId?: bigint) {
     return this.prisma.bet.findFirst({
       where: { betNo, ...(userId ? { userId } : {}) },
diff --git a/apps/api/src/domains/catalog/matches.service.ts b/apps/api/src/domains/catalog/matches.service.ts
index 825ec8d..0b40865 100644
--- a/apps/api/src/domains/catalog/matches.service.ts
+++ b/apps/api/src/domains/catalog/matches.service.ts
@@ -262,31 +262,28 @@ export class MatchesService {
     const kw = opts.keyword?.trim();
     let idFilter: bigint[] | undefined;
 
-    if (kw || opts.status) {
+    // 状态仅用于单场计数/展开列表筛选，不隐藏无该状态单场的联赛（含新建空联赛）
+    if (kw) {
       const ids = new Set<bigint>();
-      if (kw) {
-        const trRows = await this.prisma.entityTranslation.findMany({
-          where: {
-            entityType: 'LEAGUE',
-            fieldName: 'name',
-            value: { contains: kw, mode: 'insensitive' },
-          },
-          select: { entityId: true },
-        });
-        for (const r of trRows) ids.add(r.entityId);
-      }
+      const trRows = await this.prisma.entityTranslation.findMany({
+        where: {
+          entityType: 'LEAGUE',
+          fieldName: 'name',
+          value: { contains: kw, mode: 'insensitive' },
+        },
+        select: { entityId: true },
+      });
+      for (const r of trRows) ids.add(r.entityId);
       const matchWhere: Prisma.MatchWhereInput = {
         deletedAt: null,
         isOutright: false,
-      };
-      if (opts.status) matchWhere.status = opts.status;
-      if (kw) {
-        matchWhere.OR = [
+        OR: [
           { matchName: { contains: kw, mode: 'insensitive' } },
           { homeTeam: { code: { contains: kw, mode: 'insensitive' } } },
           { awayTeam: { code: { contains: kw, mode: 'insensitive' } } },
-        ];
-      }
+        ],
+      };
+      if (opts.status) matchWhere.status = opts.status;
       const matchLeagues = await this.prisma.match.findMany({
         where: matchWhere,
         select: { leagueId: true },
@@ -351,6 +348,27 @@ export class MatchesService {
       },
       select: { id: true, leagueId: true },
     });
+    const fixtureTeamRows = await this.prisma.match.findMany({
+      where: {
+        leagueId: { in: leagueIds },
+        deletedAt: null,
+        isOutright: false,
+      },
+      select: {
+        leagueId: true,
+        homeTeam: { select: { id: true, code: true } },
+        awayTeam: { select: { id: true, code: true } },
+      },
+    });
+    const fixtureTeamSets = new Map<string, Set<string>>();
+    for (const row of fixtureTeamRows) {
+      const lid = row.leagueId.toString();
+      if (!fixtureTeamSets.has(lid)) fixtureTeamSets.set(lid, new Set());
+      const set = fixtureTeamSets.get(lid)!;
+      for (const team of [row.homeTeam, row.awayTeam]) {
+        if (team.code !== 'OUT') set.add(team.id.toString());
+      }
+    }
     const matchStats = await this.betStatsForMatches(
       leagueMatches.map((m) => m.id),
     );
@@ -373,6 +391,50 @@ export class MatchesService {
       }
       leagueBetRollup.set(lid, cur);
     }
+    const outrightMatches = await this.prisma.match.findMany({
+      where: {
+        leagueId: { in: leagueIds },
+        isOutright: true,
+        deletedAt: null,
+      },
+      select: { id: true, leagueId: true },
+    });
+    const outrightTeamCounts = new Map<string, number>();
+    if (outrightMatches.length > 0) {
+      const matchIdToLeagueId = new Map(
+        outrightMatches.map((m) => [m.id.toString(), m.leagueId.toString()]),
+      );
+      const outrightMatchIds = outrightMatches.map((m) => m.id);
+      const markets = await this.prisma.market.findMany({
+        where: {
+          matchId: { in: outrightMatchIds },
+          marketType: 'OUTRIGHT_WINNER',
+        },
+        select: { id: true, matchId: true },
+      });
+      if (markets.length > 0) {
+        const marketIdToMatchId = new Map(
+          markets.map((m) => [m.id.toString(), m.matchId.toString()]),
+        );
+        const selectionCounts = await this.prisma.marketSelection.groupBy({
+          by: ['marketId'],
+          where: {
+            marketId: { in: markets.map((m) => m.id) },
+            status: 'OPEN',
+            selectionCode: { not: 'OUT' },
+          },
+          _count: { id: true },
+        });
+        for (const row of selectionCounts) {
+          const matchId = marketIdToMatchId.get(row.marketId.toString());
+          const leagueId = matchId ? matchIdToLeagueId.get(matchId) : undefined;
+          if (leagueId) {
+            outrightTeamCounts.set(leagueId, row._count.id);
+          }
+        }
+      }
+    }
+
     for (const item of items) {
       const roll = leagueBetRollup.get(item.id);
       if (roll) {
@@ -382,6 +444,10 @@ export class MatchesService {
           pendingCount: roll.pendingCount,
         };
       }
+      (item as { fixtureTeamCount?: number }).fixtureTeamCount =
+        fixtureTeamSets.get(item.id)?.size ?? 0;
+      (item as { outrightTeamCount?: number }).outrightTeamCount =
+        outrightTeamCounts.get(item.id) ?? 0;
     }
 
     return { items, total, page: opts.page, pageSize: opts.pageSize };
@@ -501,11 +567,37 @@ export class MatchesService {
     return result;
   }
 
+  private async upsertTeamByCode(data: {
+    code: string;
+    teamZh: string;
+    teamEn: string;
+    teamMs?: string;
+    logoUrl?: string;
+  }) {
+    const code = data.code.trim().toUpperCase();
+    if (!code) throw new BadRequestException('请填写球队代码');
+    const logoUrl = data.logoUrl?.trim() || undefined;
+    const team = await this.prisma.team.upsert({
+      where: { code },
+      create: { code, logoUrl },
+      update: logoUrl ? { logoUrl } : {},
+    });
+    const translations: Record<string, string> = {
+      'zh-CN': data.teamZh.trim() || data.teamEn.trim(),
+      'en-US': data.teamEn.trim() || data.teamZh.trim(),
+    };
+    if (data.teamMs?.trim()) translations['ms-MY'] = data.teamMs.trim();
+    await this.upsertEntityTranslations('TEAM', team.id, translations);
+    return team;
+  }
+
   async createPlatformMatch(data: {
     leagueId?: bigint;
     leagueEn?: string;
     leagueZh?: string;
     leagueMs?: string;
+    homeTeamCode?: string;
+    awayTeamCode?: string;
     homeTeamZh: string;
     homeTeamEn: string;
     homeTeamMs?: string;
@@ -563,32 +655,56 @@ export class MatchesService {
         });
       }
     }
-    const homeTeam = await this.upsertTeamFromZhiboExport({
-      id: null,
-      name: homeEn || homeZh || homeMs,
-      names: {
-        zh: homeZh || null,
-        en: homeEn || null,
-        zhTw: '',
-        vi: null,
-        km: null,
-        ms: homeMs || null,
-      },
-      image: data.homeTeamLogoUrl?.trim() || '',
-    });
-    const awayTeam = await this.upsertTeamFromZhiboExport({
-      id: null,
-      name: awayEn || awayZh || awayMs,
-      names: {
-        zh: awayZh || null,
-        en: awayEn || null,
-        zhTw: '',
-        vi: null,
-        km: null,
-        ms: awayMs || null,
-      },
-      image: data.awayTeamLogoUrl?.trim() || '',
-    });
+    const homeCode = data.homeTeamCode?.trim().toUpperCase();
+    const awayCode = data.awayTeamCode?.trim().toUpperCase();
+    let homeTeam;
+    let awayTeam;
+    if (homeCode && awayCode) {
+      if (homeCode === awayCode) {
+        throw new BadRequestException('主客队不能为同一支球队，请选择不同的队伍');
+      }
+      homeTeam = await this.upsertTeamByCode({
+        code: homeCode,
+        teamZh: homeZh,
+        teamEn: homeEn,
+        teamMs: homeMs,
+        logoUrl: data.homeTeamLogoUrl,
+      });
+      awayTeam = await this.upsertTeamByCode({
+        code: awayCode,
+        teamZh: awayZh,
+        teamEn: awayEn,
+        teamMs: awayMs,
+        logoUrl: data.awayTeamLogoUrl,
+      });
+    } else {
+      homeTeam = await this.upsertTeamFromZhiboExport({
+        id: null,
+        name: homeEn || homeZh || homeMs,
+        names: {
+          zh: homeZh || null,
+          en: homeEn || null,
+          zhTw: '',
+          vi: null,
+          km: null,
+          ms: homeMs || null,
+        },
+        image: data.homeTeamLogoUrl?.trim() || '',
+      });
+      awayTeam = await this.upsertTeamFromZhiboExport({
+        id: null,
+        name: awayEn || awayZh || awayMs,
+        names: {
+          zh: awayZh || null,
+          en: awayEn || null,
+          zhTw: '',
+          vi: null,
+          km: null,
+          ms: awayMs || null,
+        },
+        image: data.awayTeamLogoUrl?.trim() || '',
+      });
+    }
 
     if (homeTeam.id === awayTeam.id) {
       throw new BadRequestException('主客队不能为同一支球队，请填写不同的队名');
@@ -1199,13 +1315,18 @@ export class MatchesService {
       matchIds.length > 0
         ? await this.prisma.match.findMany({
             where: { id: { in: matchIds } },
-            include: { homeTeam: true, awayTeam: true },
+            include: { homeTeam: true, awayTeam: true, score: true },
           })
         : [];
 
     const matchMeta = new Map<
       string,
-      { leagueName: string; matchTitle: string; isOutright: boolean }
+      {
+        leagueName: string;
+        matchTitle: string;
+        isOutright: boolean;
+        score: { ht: string | null; ft: string | null } | null;
+      }
     >();
 
     for (const m of matches) {
@@ -1214,10 +1335,20 @@ export class MatchesService {
         this.getTranslation('TEAM', m.homeTeamId, locale),
         this.getTranslation('TEAM', m.awayTeamId, locale),
       ]);
+      const s = m.score;
+      const ftScore =
+        s?.ftHomeScore != null && s?.ftAwayScore != null
+          ? `${s.ftHomeScore}-${s.ftAwayScore}`
+          : null;
+      const htScore =
+        s?.htHomeScore != null && s?.htAwayScore != null
+          ? `${s.htHomeScore}-${s.htAwayScore}`
+          : null;
       matchMeta.set(m.id.toString(), {
         leagueName,
         matchTitle: m.isOutright ? leagueName : `${homeName} vs ${awayName}`,
         isOutright: m.isOutright,
+        score: ftScore || htScore ? { ht: htScore, ft: ftScore } : null,
       });
     }
 
@@ -1237,9 +1368,12 @@ export class MatchesService {
           resultStatus: sel.resultStatus,
           matchTitle: m?.matchTitle ?? sel.selectionNameSnapshot,
           leagueName: m?.leagueName ?? '',
+          score: m?.score ?? null,
         };
       });
 
+      const firstScore = meta?.score ?? legs[0]?.score ?? null;
+
       return {
         betNo: bet.betNo,
         betType: bet.betType,
@@ -1261,6 +1395,7 @@ export class MatchesService {
           : `${legs[0]?.marketLabel ?? ''}: ${legs[0]?.selectionName ?? ''}`,
         legs,
         isParlay,
+        matchScore: isParlay ? null : firstScore,
       };
     });
   }
diff --git a/apps/api/src/domains/catalog/outright.service.ts b/apps/api/src/domains/catalog/outright.service.ts
index 98ed0b7..4851c58 100644
--- a/apps/api/src/domains/catalog/outright.service.ts
+++ b/apps/api/src/domains/catalog/outright.service.ts
@@ -168,6 +168,11 @@ export class OutrightService {
       this.getOutrightTitle(match.id, 'ms-MY'),
     ]);
 
+    const addableFixtureTeams = await this.listAddableFixtureTeams(
+      match.leagueId,
+      fullMarket.id,
+    );
+
     return {
       id: match.id.toString(),
       leagueId: match.leagueId.toString(),
@@ -187,9 +192,146 @@ export class OutrightService {
       playerVisible: visibility.playerVisible,
       playerHiddenReason: visibility.playerHiddenReason,
       selections,
+      addableFixtureTeams,
     };
   }
 
+  private async listAddableFixtureTeams(leagueId: bigint, marketId: bigint) {
+    const teams = await this.collectFixtureTeamsForLeague(leagueId);
+    const openCodes = new Set(
+      (
+        await this.prisma.marketSelection.findMany({
+          where: {
+            marketId,
+            status: 'OPEN',
+            selectionCode: { not: PLACEHOLDER_TEAM_CODE },
+          },
+          select: { selectionCode: true },
+        })
+      ).map((s) => s.selectionCode),
+    );
+
+    const result: Array<{
+      teamCode: string;
+      teamZh: string;
+      teamEn: string;
+      logoUrl: string | null;
+    }> = [];
+
+    for (const team of teams) {
+      if (openCodes.has(team.code)) continue;
+      const [teamZh, teamEn] = await Promise.all([
+        this.getTranslation('TEAM', team.id, 'zh-CN'),
+        this.getTranslation('TEAM', team.id, 'en-US'),
+      ]);
+      result.push({
+        teamCode: team.code,
+        teamZh: teamZh || team.code,
+        teamEn: teamEn || team.code,
+        logoUrl: team.logoUrl ?? null,
+      });
+    }
+
+    return result;
+  }
+
+  /** 按联赛获取或创建冠军盘，并从单场赛程同步参赛队伍 */
+  async getOrCreateAndSyncForLeague(leagueId: bigint) {
+    let match = await this.prisma.match.findFirst({
+      where: { leagueId, isOutright: true, deletedAt: null },
+      orderBy: { id: 'asc' },
+    });
+    if (!match) {
+      const league = await this.prisma.league.findUnique({
+        where: { id: leagueId },
+      });
+      if (!league) throw new NotFoundException('League not found');
+      const [leagueZh, leagueEn, leagueMs] = await Promise.all([
+        this.getTranslation('LEAGUE', leagueId, 'zh-CN'),
+        this.getTranslation('LEAGUE', leagueId, 'en-US'),
+        this.getTranslation('LEAGUE', leagueId, 'ms-MY'),
+      ]);
+      await this.createForAdmin({
+        leagueId,
+        titleZh: leagueZh || league.code,
+        titleEn: leagueEn || league.code,
+        titleMs: leagueMs || undefined,
+        status: 'DRAFT',
+      });
+      match = await this.prisma.match.findFirstOrThrow({
+        where: { leagueId, isOutright: true, deletedAt: null },
+        orderBy: { id: 'asc' },
+      });
+    }
+    return this.syncSelectionsFromLeagueFixtures(match.id);
+  }
+
+  async syncSelectionsFromLeagueFixtures(matchId: bigint) {
+    const match = await this.getOutrightMatchOrThrow(matchId);
+    const market = await this.ensureOutrightMarket(match.id);
+    const teams = await this.collectFixtureTeamsForLeague(match.leagueId);
+    const fixtureCodes = new Set(teams.map((t) => t.code));
+
+    const existing = await this.prisma.marketSelection.findMany({
+      where: {
+        marketId: market.id,
+        selectionCode: { not: PLACEHOLDER_TEAM_CODE },
+      },
+    });
+
+    // 仅当球队重新出现在单场赛程时，恢复曾被关闭的选项；不因「暂无单场」而自动关闭
+    for (const sel of existing) {
+      if (fixtureCodes.has(sel.selectionCode) && sel.status === 'CLOSED') {
+        await this.prisma.marketSelection.update({
+          where: { id: sel.id },
+          data: { status: 'OPEN' },
+        });
+      }
+    }
+
+    const existingCodes = new Set(existing.map((s) => s.selectionCode));
+    let sortOrder = existing.reduce((max, s) => Math.max(max, s.sortOrder), -1);
+
+    for (const team of teams) {
+      if (existingCodes.has(team.code)) continue;
+      const [teamZh, teamEn] = await Promise.all([
+        this.getTranslation('TEAM', team.id, 'zh-CN'),
+        this.getTranslation('TEAM', team.id, 'en-US'),
+      ]);
+      sortOrder += 1;
+      await this.prisma.marketSelection.create({
+        data: {
+          marketId: market.id,
+          selectionCode: team.code,
+          selectionName: teamZh || teamEn || team.code,
+          odds: 10,
+          sortOrder,
+          status: 'OPEN',
+        },
+      });
+    }
+
+    return this.getForAdmin(matchId);
+  }
+
+  private async collectFixtureTeamsForLeague(leagueId: bigint) {
+    const matches = await this.prisma.match.findMany({
+      where: { leagueId, isOutright: false, deletedAt: null },
+      select: { homeTeamId: true, awayTeamId: true },
+    });
+    const teamIds = [
+      ...new Set(matches.flatMap((m) => [m.homeTeamId, m.awayTeamId])),
+    ];
+    if (teamIds.length === 0) return [];
+    return this.prisma.team.findMany({
+      where: {
+        id: { in: teamIds },
+        code: { not: PLACEHOLDER_TEAM_CODE },
+      },
+      orderBy: { code: 'asc' },
+    });
+  }
+
   async createForAdmin(data: {
     leagueId: bigint;
     titleZh: string;
@@ -325,6 +467,17 @@ export class OutrightService {
       where: { marketId: market.id, selectionCode: code },
     });
     if (existing) {
+      if (existing.status === 'CLOSED') {
+        await this.prisma.marketSelection.update({
+          where: { id: existing.id },
+          data: {
+            status: 'OPEN',
+            odds: data.odds,
+            selectionName: data.teamZh.trim() || data.teamEn,
+          },
+        });
+        return this.getForAdmin(matchId);
+      }
       throw new BadRequestException('Selection already exists for this team code');
     }
 
@@ -347,6 +500,38 @@ export class OutrightService {
     return this.getForAdmin(matchId);
   }
 
+  async addSelectionsBatch(
+    matchId: bigint,
+    items: Array<{
+      teamCode: string;
+      teamZh: string;
+      teamEn: string;
+      odds: number;
+      logoUrl?: string;
+    }>,
+  ) {
+    if (!items.length) {
+      throw new BadRequestException('At least one team required');
+    }
+    let added = 0;
+    let skipped = 0;
+    for (const item of items) {
+      try {
+        await this.addSelection(matchId, item);
+        added += 1;
+      } catch (e) {
+        const msg = e instanceof Error ? e.message : '';
+        if (msg.includes('already exists')) {
+          skipped += 1;
+          continue;
+        }
+        throw e;
+      }
+    }
+    const data = await this.getForAdmin(matchId);
+    return { ...data, batchResult: { added, skipped } };
+  }
+
   async updateSelectionTeam(
     matchId: bigint,
     selectionId: bigint,
diff --git a/apps/api/src/domains/ledger/wallet.service.ts b/apps/api/src/domains/ledger/wallet.service.ts
index 07def41..f823919 100644
--- a/apps/api/src/domains/ledger/wallet.service.ts
+++ b/apps/api/src/domains/ledger/wallet.service.ts
@@ -272,4 +272,30 @@ export class WalletService {
     ]);
     return { items, total, page, pageSize };
   }
+
+  async getTransactionStats(userId: bigint) {
+    const [aggregates, byType] = await Promise.all([
+      this.prisma.walletTransaction.aggregate({
+        where: { userId },
+        _sum: { amount: true },
+        _count: { id: true },
+      }),
+      this.prisma.walletTransaction.groupBy({
+        by: ['transactionType'],
+        where: { userId },
+        _count: { id: true },
+        _sum: { amount: true },
+      }),
+    ]);
+
+    return {
+      total: aggregates._count.id,
+      netAmount: aggregates._sum.amount?.toString() ?? '0',
+      byType: byType.map((g) => ({
+        transactionType: g.transactionType,
+        count: g._count.id,
+        totalAmount: g._sum.amount?.toString() ?? '0',
+      })),
+    };
+  }
 }
diff --git a/apps/player/index.html b/apps/player/index.html
index d0cf53b..c799e95 100644
--- a/apps/player/index.html
+++ b/apps/player/index.html
@@ -8,8 +8,64 @@
     <link rel="apple-touch-icon" href="/logo.png" />
     <link rel="manifest" href="/site.webmanifest" />
     <title>TheBet365</title>
+    <style>
+      html, body { margin: 0; padding: 0; height: 100%; background: #000; }
+      #app-loading {
+        position: fixed;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background: #000;
+        z-index: 9999;
+      }
+      #app-loading svg {
+        width: 48px;
+        height: 48px;
+        animation: gs-spin 0.8s linear infinite;
+      }
+      @keyframes gs-spin {
+        to { transform: rotate(360deg); }
+      }
+    </style>
   </head>
   <body>
+    <div id="app-loading">
+      <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <linearGradient id="gs-track" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#D4AF37" stop-opacity="0.18" />
+            <stop offset="50%" stop-color="#F0D875" stop-opacity="0.25" />
+            <stop offset="100%" stop-color="#D4AF37" stop-opacity="0.18" />
+          </linearGradient>
+          <linearGradient id="gs-arc" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#FFF4C8" />
+            <stop offset="22%" stop-color="#F0D875" />
+            <stop offset="50%" stop-color="#D4AF37" />
+            <stop offset="78%" stop-color="#B8942B" />
+            <stop offset="100%" stop-color="#8B6914" />
+          </linearGradient>
+          <filter id="gs-glow">
+            <feGaussianBlur stdDeviation="1.2" result="blur" />
+            <feMerge>
+              <feMergeNode in="blur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+          <radialGradient id="gs-dot" cx="50%" cy="50%" r="50%">
+            <stop offset="0%" stop-color="#FFF4C8" />
+            <stop offset="60%" stop-color="#F0D875" />
+            <stop offset="100%" stop-color="#D4AF37" />
+          </radialGradient>
+        </defs>
+        <circle cx="24" cy="24" r="20" stroke="url(#gs-track)" stroke-width="3" fill="none" />
+        <circle cx="24" cy="24" r="20" stroke="url(#gs-arc)" stroke-width="3" fill="none" stroke-linecap="round" stroke-dasharray="31.4 94.2" filter="url(#gs-glow)" />
+        <circle cx="24" cy="4" r="2.5" fill="url(#gs-dot)" filter="url(#gs-glow)">
+          <animate attributeName="r" values="2.5;3.2;2.5" dur="1.2s" repeatCount="indefinite" />
+        </circle>
+      </svg>
+    </div>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
diff --git a/apps/player/src/components/BetHistoryCard.vue b/apps/player/src/components/BetHistoryCard.vue
index 3ae773c..976ad06 100644
--- a/apps/player/src/components/BetHistoryCard.vue
+++ b/apps/player/src/components/BetHistoryCard.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 import { formatMoney } from '../utils/localeDisplay';
 
+export interface BetScore {
+  ht: string | null;
+  ft: string | null;
+}
+
 export interface BetHistoryItem {
   betNo: string;
   betType: string;
   stake: unknown;
+  totalOdds?: unknown;
   potentialReturn: unknown;
   actualReturn: unknown;
   status: string;
@@ -16,17 +23,20 @@ export interface BetHistoryItem {
   pickLabel: string;
   isParlay?: boolean;
   legCount?: number;
+  matchScore?: BetScore | null;
   legs?: Array<{
     marketLabel: string;
     selectionName: string;
     matchTitle: string;
     odds: unknown;
+    resultStatus?: string | null;
+    score?: BetScore | null;
   }>;
 }
 
 const props = defineProps<{ bet: BetHistoryItem }>();
-
 const { t, locale } = useI18n();
+const router = useRouter();
 
 const statusKey = computed(() => {
   const s = props.bet.status.toUpperCase();
@@ -40,13 +50,11 @@ const statusLabel = computed(() => t(`history.status_${statusKey.value}`));
 
 const placedDate = computed(() =>
   new Date(props.bet.placedAt).toLocaleDateString(locale.value, {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
+    month: 'short', day: 'numeric',
   }),
 );
 
-const matchTitle = computed(() => {
+const title = computed(() => {
   if (props.bet.isParlay) {
     const n = props.bet.legCount ?? props.bet.legs?.length ?? 0;
     return t('history.parlay_title', { n });
@@ -54,319 +62,135 @@ const matchTitle = computed(() => {
   return props.bet.matchTitle;
 });
 
-const pickLabel = computed(() => {
-  if (props.bet.isParlay) return '';
-  // pickLabel format is "marketLabel: selectionName"
-  const raw = props.bet.pickLabel;
-  if (locale.value === 'zh-CN' || !raw) return raw;
-  const colonIdx = raw.indexOf(': ');
-  if (colonIdx < 0) return raw;
-  const sel = raw.slice(colonIdx + 2);
-  return raw.slice(0, colonIdx + 2) + translateSelection(sel);
+const subtitle = computed(() => {
+  if (props.bet.isParlay) return props.bet.leagueName || t('history.parlay_league');
+  return props.bet.pickLabel || props.bet.leagueName || '';
 });
 
-const returnLabel = computed(() =>
-  statusKey.value === 'pending' ? t('history.est_return') : t('history.return'),
-);
-
 const returnAmount = computed(() => {
   if (statusKey.value === 'won') return formatMoney(props.bet.actualReturn, locale.value);
   if (statusKey.value === 'pending') return formatMoney(props.bet.potentialReturn, locale.value);
-  if (statusKey.value === 'lost') return formatMoney(0, locale.value);
+  if (statusKey.value === 'lost') return formatMoney(-parseFloat(String(props.bet.stake ?? 0)), locale.value);
   return formatMoney(props.bet.actualReturn ?? props.bet.potentialReturn, locale.value);
 });
 
 const returnHighlight = computed(() => statusKey.value === 'won');
+const returnPending = computed(() => statusKey.value === 'pending');
+const returnLost = computed(() => statusKey.value === 'lost');
 
-// Translate Chinese selection-name snapshots stored in DB
-const SEL_TRANS: Record<string, Record<string, string>> = {
-  '主胜': { 'en-US': 'Home Win', 'ms-MY': 'Rumah Menang' },
-  '客胜': { 'en-US': 'Away Win', 'ms-MY': 'Tandang Menang' },
-  '和局': { 'en-US': 'Draw',     'ms-MY': 'Seri' },
-  '主': { 'en-US': 'Home', 'ms-MY': 'Rumah' },
-  '客': { 'en-US': 'Away', 'ms-MY': 'Tandang' },
-  '大': { 'en-US': 'Over', 'ms-MY': 'Atas' },
-  '小': { 'en-US': 'Under', 'ms-MY': 'Bawah' },
-  '单': { 'en-US': 'Odd', 'ms-MY': 'Ganjil' },
-  '双': { 'en-US': 'Even', 'ms-MY': 'Genap' },
-  '冠军': { 'en-US': 'Winner', 'ms-MY': 'Juara' },
-};
-
-function translateSelection(name: string): string {
-  if (locale.value === 'zh-CN') return name;
-  // exact match
-  const exact = SEL_TRANS[name];
-  if (exact) return exact[locale.value] ?? exact['en-US'] ?? name;
-  // e.g. "大 2.5" → translate first token, keep rest
-  const spaceIdx = name.indexOf(' ');
-  if (spaceIdx > 0) {
-    const head = name.slice(0, spaceIdx);
-    const tail = name.slice(spaceIdx);
-    const m = SEL_TRANS[head];
-    if (m) return (m[locale.value] ?? m['en-US'] ?? head) + tail;
-  }
-  return name;
+function goDetail() {
+  router.push(`/bets/${props.bet.betNo}`);
 }
-
-// use grid when 3+ legs
-const useGrid = computed(() => (props.bet.legs?.length ?? 0) >= 3);
 </script>
 
 <template>
-  <article class="bet-card">
-    <!-- top strip: meta + badge -->
-    <header class="card-head">
-      <div class="meta">
-        <span class="sport-icon" aria-hidden="true">⚽</span>
-        <span class="league">{{
-          bet.isParlay ? t('history.parlay_league') : bet.leagueName || t('history.league_default')
-        }}</span>
-        <span class="dot">·</span>
-        <span class="date">{{ placedDate }}</span>
-      </div>
-      <span class="status-badge" :class="statusKey">{{ statusLabel }}</span>
-    </header>
-
-    <!-- title -->
-    <h3 class="match-title">{{ matchTitle }}</h3>
-    <p v-if="pickLabel" class="pick-line">{{ pickLabel }}</p>
-
-    <!-- parlay legs -->
-    <div v-if="bet.isParlay && bet.legs?.length" class="parlay-legs" :class="{ grid: useGrid }">
-      <div v-for="(leg, i) in bet.legs" :key="i" class="leg">
-        <span class="leg-num">{{ i + 1 }}</span>
-        <div class="leg-info">
-          <span class="leg-match">{{ leg.matchTitle }}</span>
-          <span class="leg-pick">{{ leg.marketLabel }}: {{ translateSelection(leg.selectionName) }}</span>
-        </div>
-      </div>
+  <article class="bet-card" @click="goDetail">
+    <span
+      class="watermark"
+      :class="statusKey"
+    >{{ statusLabel }}</span>
+    <div class="card-left">
+      <span class="title">{{ title }}</span>
+      <span class="subtitle">{{ subtitle }} · {{ placedDate }}</span>
     </div>
-
-    <!-- footer -->
-    <footer class="card-foot">
-      <div class="money-col">
-        <span class="money-label">{{ t('history.stake') }}</span>
-        <span class="money-value stake">{{ formatMoney(bet.stake, locale) }}</span>
-      </div>
-      <div class="money-col align-right">
-        <span class="money-label">{{ returnLabel }}</span>
-        <span
-          class="money-value return"
-          :class="{ highlight: returnHighlight, pending: statusKey === 'pending' }"
-        >{{ returnAmount }}</span>
-      </div>
-    </footer>
+    <div class="card-right">
+      <span class="return-amt" :class="{ highlight: returnHighlight, pending: returnPending, lost: returnLost }">
+        {{ returnAmount }}
+      </span>
+    </div>
+    <span class="chevron">›</span>
   </article>
 </template>
 
 <style scoped>
 .bet-card {
-  background: #141414;
-  border: 1px solid #252525;
-  border-radius: 12px;
-  padding: 0;
-  margin-bottom: 10px;
-  overflow: hidden;
   position: relative;
-}
-
-.card-head {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 10px 14px 8px 16px;
-  background: #181818;
-  border-bottom: 1px solid #222;
+  gap: 10px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  transition: background 0.15s;
+  -webkit-tap-highlight-color: transparent;
+  overflow: hidden;
 }
 
-.meta {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 5px;
-  font-size: 11.5px;
-  color: #888;
-  font-weight: 600;
+.bet-card:active {
+  background: rgba(255, 255, 255, 0.02);
 }
 
-.sport-icon {
-  font-size: 13px;
-  line-height: 1;
-}
-
-.dot { opacity: 0.4; }
-
-.date { color: #666; }
-
-.status-badge {
-  flex-shrink: 0;
-  padding: 3px 10px;
-  border-radius: 20px;
-  font-size: 10.5px;
-  font-weight: 800;
-  letter-spacing: 0.07em;
-  white-space: nowrap;
-  text-transform: uppercase;
-}
-
-.status-badge.won {
-  color: #3db865;
-  background: rgba(61, 184, 101, 0.12);
-  border: 1px solid rgba(61, 184, 101, 0.3);
-}
-.status-badge.pending {
-  color: #e8c84a;
-  background: rgba(232, 200, 74, 0.1);
-  border: 1px solid rgba(232, 200, 74, 0.3);
-}
-.status-badge.lost {
-  color: #e05050;
-  background: rgba(224, 80, 80, 0.1);
-  border: 1px solid rgba(224, 80, 80, 0.28);
-}
-.status-badge.push {
-  color: #888;
-  background: #1e1e1e;
-  border: 1px solid #333;
-}
-
-/* body */
-.match-title {
-  font-size: 16px;
+.watermark {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(-35deg);
+  font-size: 28px;
   font-weight: 900;
-  color: #f0f0f0;
-  line-height: 1.3;
-  padding: 10px 14px 4px 16px;
-  letter-spacing: 0.01em;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+  pointer-events: none;
+  text-transform: uppercase;
+  opacity: 0.18;
+  max-width: 90%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.pick-line {
-  font-size: 12.5px;
-  color: #888;
-  font-weight: 600;
-  line-height: 1.4;
-  padding: 0 14px 8px 16px;
-}
+.watermark.won     { color: #3db865; }
+.watermark.lost    { color: #e05050; }
+.watermark.push    { color: #888; }
+.watermark.pending { color: #e8c84a; }
 
-/* ── parlay legs ── */
-.parlay-legs {
-  padding: 4px 14px 8px 16px;
+.card-left {
+  flex: 1;
+  min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  gap: 3px;
 }
 
-/* grid mode: 2-column when 3+ legs */
-.parlay-legs.grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 5px 8px;
-}
-
-.leg {
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  background: #1a1a1a;
-  border: 1px solid #252525;
-  border-radius: 7px;
-  padding: 6px 8px;
-  min-width: 0;
-}
-
-.leg-num {
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: #2a2a2a;
-  color: #777;
-  font-size: 9px;
+.title {
+  font-size: 14px;
   font-weight: 800;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 1px;
-  line-height: 1;
+  color: #e8e8e8;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.leg-info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.leg-match {
+.subtitle {
   font-size: 11px;
-  font-weight: 700;
-  color: #c0c0c0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.leg-pick {
-  font-size: 10.5px;
-  color: #777;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* footer */
-.card-foot {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  gap: 16px;
-  padding: 8px 14px 12px 16px;
-  border-top: 1px solid #1e1e1e;
-  margin-top: 2px;
-}
-
-.money-col {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.money-col.align-right {
-  align-items: flex-end;
-  text-align: right;
-}
-
-.money-label {
-  font-size: 10px;
   color: #666;
   font-weight: 600;
-  letter-spacing: 0.02em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.money-value {
-  font-size: 19px;
+.card-right {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+
+.return-amt {
+  font-size: 15px;
   font-weight: 900;
-  letter-spacing: 0.01em;
+  color: #888;
 }
 
-.money-value.stake {
-  color: #c8c8c8;
-}
+.return-amt.highlight { color: #3db865; }
+.return-amt.pending   { color: #e8c84a; }
+.return-amt.lost      { color: #e05050; }
 
-.money-value.return {
-  color: #c8c8c8;
-}
-
-.money-value.return.pending {
-  color: #e8c84a;
-  text-shadow: 0 0 14px rgba(232, 200, 74, 0.3);
-}
-
-.money-value.highlight {
-  color: #3db865;
-  text-shadow: 0 0 14px rgba(61, 184, 101, 0.35);
-  font-size: 21px;
+.chevron {
+  flex-shrink: 0;
+  font-size: 18px;
+  color: #333;
+  margin-left: 2px;
+  line-height: 1;
 }
 </style>
diff --git a/apps/player/src/components/BetSlipDrawer.vue b/apps/player/src/components/BetSlipDrawer.vue
index bd5f8d5..44bc8eb 100644
--- a/apps/player/src/components/BetSlipDrawer.vue
+++ b/apps/player/src/components/BetSlipDrawer.vue
@@ -3,6 +3,7 @@ import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { PARLAY_MIN_LEGS, PARLAY_MAX_LEGS } from '@thebet365/shared';
 import { useBetSlipStore } from '../stores/betSlip';
+import BetSuccessOverlay from './BetSuccessOverlay.vue';
 import api from '../api';
 
 const props = defineProps<{ modelValue: boolean }>();
@@ -18,11 +19,18 @@ const show = computed({
 const loading = ref(false);
 const error = ref('');
 const success = ref('');
+const showSuccess = ref(false);
 
 function genId() {
   return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
 }
 
+function onSuccessDone() {
+  showSuccess.value = false;
+  show.value = false;
+  success.value = '';
+}
+
 async function placeBet() {
   if (!slip.items.length) return;
   loading.value = true;
@@ -58,10 +66,14 @@ async function placeBet() {
     }
     success.value = t('bet.place_success');
     slip.clear();
+    showSuccess.value = true;
     setTimeout(() => {
-      show.value = false;
-      success.value = '';
-    }, 1500);
+      if (showSuccess.value) {
+        showSuccess.value = false;
+        show.value = false;
+        success.value = '';
+      }
+    }, 2500);
   } catch (e: unknown) {
     error.value =
       (e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
@@ -75,58 +87,64 @@ async function placeBet() {
 <template>
   <div v-if="show" class="overlay" @click.self="show = false">
     <div class="drawer">
-      <div class="drawer-header">
-        <h3>{{ t('bet.bet_slip') }} <span class="count">({{ slip.count }})</span></h3>
-        <button type="button" class="close-btn" :aria-label="t('bet.cancel')" @click="show = false">
-          ✕
+      <div class="drawer-body">
+        <div class="drawer-header">
+          <h3>{{ t('bet.bet_slip') }} <span class="count">({{ slip.count }})</span></h3>
+          <button type="button" class="close-btn" :aria-label="t('bet.cancel')" @click="show = false">
+            ✕
+          </button>
+        </div>
+
+        <div v-if="!slip.items.length" class="empty">{{ t('bet.slip_empty_hint') }}</div>
+
+        <div v-for="item in slip.items" :key="item.selectionId" class="slip-item">
+          <div class="item-name">{{ item.matchName }}</div>
+          <div class="item-sel">
+            {{ item.selectionName }} @ <span class="odds">{{ item.odds }}</span>
+          </div>
+          <button type="button" class="remove" @click="slip.removeItem(item.selectionId)">
+            {{ t('bet.slip_remove') }}
+          </button>
+        </div>
+
+        <p v-if="slip.canPlaceParlay" class="mode-hint mode-hint--parlay">
+          {{ t('bet.parlay') }} · {{ t('bet.slip_parlay_odds', { odds: slip.totalOdds.toFixed(2) }) }}
+        </p>
+        <p v-else-if="slip.canPlaceBatchSingles && slip.count > 1" class="mode-hint">
+          {{ t('bet.slip_singles_hint', { n: slip.count }) }}
+        </p>
+
+        <div v-if="slip.items.length" class="stake-area">
+          <label>{{
+            slip.canPlaceBatchSingles && slip.count > 1
+              ? t('bet.slip_stake_per_bet')
+              : t('bet.stake')
+          }}</label>
+          <input v-model.number="slip.stake" type="number" min="1" />
+          <div class="return">
+            {{ t('bet.slip_est_return') }}:
+            <strong>{{ slip.potentialReturn.toFixed(2) }}</strong>
+          </div>
+        </div>
+
+        <p v-if="error" class="error">{{ error }}</p>
+        <p v-if="success" class="success">{{ success }}</p>
+      </div>
+
+      <div class="drawer-foot">
+        <button
+          type="button"
+          class="btn-primary"
+          :disabled="loading || !slip.canSubmit"
+          @click="placeBet"
+        >
+          {{ loading ? t('bet.placing') : t('bet.place_bet') }}
         </button>
       </div>
-
-      <div v-if="!slip.items.length" class="empty">{{ t('bet.slip_empty_hint') }}</div>
-
-      <div v-for="item in slip.items" :key="item.selectionId" class="slip-item">
-        <div class="item-name">{{ item.matchName }}</div>
-        <div class="item-sel">
-          {{ item.selectionName }} @ <span class="odds">{{ item.odds }}</span>
-        </div>
-        <button type="button" class="remove" @click="slip.removeItem(item.selectionId)">
-          {{ t('bet.slip_remove') }}
-        </button>
-      </div>
-
-      <p v-if="slip.canPlaceParlay" class="mode-hint mode-hint--parlay">
-        {{ t('bet.parlay') }} · {{ t('bet.slip_parlay_odds', { odds: slip.totalOdds.toFixed(2) }) }}
-      </p>
-      <p v-else-if="slip.canPlaceBatchSingles && slip.count > 1" class="mode-hint">
-        {{ t('bet.slip_singles_hint', { n: slip.count }) }}
-      </p>
-
-      <div v-if="slip.items.length" class="stake-area">
-        <label>{{
-          slip.canPlaceBatchSingles && slip.count > 1
-            ? t('bet.slip_stake_per_bet')
-            : t('bet.stake')
-        }}</label>
-        <input v-model.number="slip.stake" type="number" min="1" />
-        <div class="return">
-          {{ t('bet.slip_est_return') }}:
-          <strong>{{ slip.potentialReturn.toFixed(2) }}</strong>
-        </div>
-      </div>
-
-      <p v-if="error" class="error">{{ error }}</p>
-      <p v-if="success" class="success">{{ success }}</p>
-
-      <button
-        type="button"
-        class="btn-primary"
-        :disabled="loading || !slip.canSubmit"
-        @click="placeBet"
-      >
-        {{ loading ? t('bet.placing') : t('bet.place_bet') }}
-      </button>
     </div>
   </div>
+
+  <BetSuccessOverlay :show="showSuccess" @done="onSuccessDone" />
 </template>
 
 <style scoped>
@@ -144,9 +162,25 @@ async function placeBet() {
   width: 100%;
   max-height: 80vh;
   border-radius: 16px 16px 0 0;
-  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0));
-  overflow-y: auto;
   border-top: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.drawer-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 14px 14px 0;
+  -webkit-overflow-scrolling: touch;
+}
+
+.drawer-foot {
+  flex-shrink: 0;
+  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
+  background: rgba(14, 14, 14, 0.98);
+  border-top: 1px solid var(--border-gold-soft);
+  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
 }
 
 .drawer-header {
diff --git a/apps/player/src/components/BetStatsPanel.vue b/apps/player/src/components/BetStatsPanel.vue
new file mode 100644
index 0000000..e4faeae
--- /dev/null
+++ b/apps/player/src/components/BetStatsPanel.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { formatMoney, parseAmount } from '../utils/localeDisplay';
+import type { BetHistoryItem } from './BetHistoryCard.vue';
+
+const props = defineProps<{ items: BetHistoryItem[] }>();
+const { t, locale } = useI18n();
+
+const stats = computed(() => {
+  let total = 0;
+  let won = 0;
+  let lost = 0;
+  let pending = 0;
+  let push = 0;
+  let totalStake = 0;
+  let totalReturn = 0;
+
+  for (const bet of props.items) {
+    total++;
+    const s = bet.status.toUpperCase();
+    if (s === 'WON' || s === 'WIN') { won++; totalReturn += parseAmount(bet.actualReturn); }
+    else if (s === 'LOST' || s === 'LOSE') lost++;
+    else if (s === 'PUSH' || s === 'VOID' || s === 'CANCELLED') push++;
+    else pending++;
+    totalStake += parseAmount(bet.stake);
+    if (s === 'WON' || s === 'WIN') totalReturn += parseAmount(bet.actualReturn);
+    else if (s === 'PENDING') totalReturn += parseAmount(bet.potentialReturn);
+  }
+
+  return { total, won, lost, pending, push, totalStake, totalReturn };
+});
+</script>
+
+<template>
+  <div class="stats-panel">
+    <div class="stats-row">
+      <div class="stat-item">
+        <span class="stat-val">{{ stats.total }}</span>
+        <span class="stat-label">{{ t('history.stats_total') }}</span>
+      </div>
+      <div class="stat-item won">
+        <span class="stat-val">{{ stats.won }}</span>
+        <span class="stat-label">{{ t('history.stats_won') }}</span>
+      </div>
+      <div class="stat-item lost">
+        <span class="stat-val">{{ stats.lost }}</span>
+        <span class="stat-label">{{ t('history.stats_lost') }}</span>
+      </div>
+      <div class="stat-item pending">
+        <span class="stat-val">{{ stats.pending }}</span>
+        <span class="stat-label">{{ t('history.stats_pending') }}</span>
+      </div>
+      <div class="stat-item push">
+        <span class="stat-val">{{ stats.push }}</span>
+        <span class="stat-label">{{ t('history.stats_push') }}</span>
+      </div>
+    </div>
+    <div class="stats-bar">
+      <div class="bar-seg won" :style="{ flex: stats.won || 0.001 }" />
+      <div class="bar-seg lost" :style="{ flex: stats.lost || 0.001 }" />
+      <div class="bar-seg pending" :style="{ flex: stats.pending || 0.001 }" />
+      <div class="bar-seg push" :style="{ flex: stats.push || 0.001 }" />
+    </div>
+    <div class="stats-row secondary">
+      <div class="stat-item">
+        <span class="stat-val small">{{ formatMoney(stats.totalStake, locale) }}</span>
+        <span class="stat-label">{{ t('history.stats_stake') }}</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-val small gold">{{ formatMoney(stats.totalReturn, locale) }}</span>
+        <span class="stat-label">{{ t('history.stats_return') }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.stats-panel {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px 12px 10px;
+  margin-bottom: 12px;
+  backdrop-filter: blur(10px);
+}
+
+.stats-row {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.stats-row.secondary {
+  margin-bottom: 0;
+  margin-top: 8px;
+  justify-content: space-around;
+}
+
+.stat-item {
+  flex: 1;
+  text-align: center;
+  min-width: 0;
+}
+
+.stat-val {
+  display: block;
+  font-size: 18px;
+  font-weight: 900;
+  font-variant-numeric: tabular-nums;
+}
+
+.stat-val.small {
+  font-size: 14px;
+  color: var(--text-muted);
+}
+
+.stat-val.gold {
+  color: var(--primary-light);
+}
+
+.stat-item.won .stat-val { color: #3db865; }
+.stat-item.lost .stat-val { color: #e05050; }
+.stat-item.pending .stat-val { color: #e8c84a; }
+.stat-item.push .stat-val { color: #888; }
+
+.stat-label {
+  display: block;
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--text-muted);
+  letter-spacing: 0.04em;
+  margin-top: 2px;
+}
+
+.stats-bar {
+  display: flex;
+  height: 4px;
+  border-radius: 2px;
+  overflow: hidden;
+  gap: 2px;
+}
+
+.bar-seg {
+  min-width: 2px;
+  border-radius: 2px;
+  transition: flex 0.3s ease;
+}
+
+.bar-seg.won { background: #3db865; }
+.bar-seg.lost { background: #e05050; }
+.bar-seg.pending { background: #e8c84a; }
+.bar-seg.push { background: #444; }
+</style>
diff --git a/apps/player/src/components/BetSuccessOverlay.vue b/apps/player/src/components/BetSuccessOverlay.vue
new file mode 100644
index 0000000..8c82f30
--- /dev/null
+++ b/apps/player/src/components/BetSuccessOverlay.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { ref, watch, onUnmounted, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps<{ show: boolean }>();
+const emit = defineEmits<{ done: [] }>();
+
+const { t } = useI18n();
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+let raf = 0;
+let particles: Particle[] = [];
+
+interface Particle {
+  x: number; y: number; vx: number; vy: number;
+  life: number; maxLife: number; size: number;
+  color: string; shape: number;
+}
+
+const COLORS = ['#D4AF37', '#FFD700', '#F0C040', '#C8A02E', '#E6C84C', '#B8960C'];
+let w = 0;
+let h = 0;
+
+function spawnBurst() {
+  const cx = w / 2;
+  const cy = h * 0.38;
+  for (let i = 0; i < 80; i++) {
+    const angle = Math.random() * Math.PI * 2;
+    const speed = 1.5 + Math.random() * 5;
+    const color = COLORS[Math.floor(Math.random() * COLORS.length)];
+    particles.push({
+      x: cx + (Math.random() - 0.5) * 60,
+      y: cy + (Math.random() - 0.5) * 20,
+      vx: Math.cos(angle) * speed,
+      vy: Math.sin(angle) * speed - 2,
+      life: 0,
+      maxLife: 60 + Math.random() * 80,
+      size: 3 + Math.random() * 5,
+      color,
+      shape: Math.floor(Math.random() * 3),
+    });
+  }
+}
+
+function draw() {
+  if (!canvasRef.value) return;
+  const ctx = canvasRef.value.getContext('2d');
+  if (!ctx) return;
+  ctx.clearRect(0, 0, w, h);
+
+  for (const p of particles) {
+    p.x += p.vx;
+    p.y += p.vy;
+    p.vy += 0.06;
+    p.life++;
+    const alpha = 1 - p.life / p.maxLife;
+    if (alpha <= 0) continue;
+    ctx.globalAlpha = alpha;
+    ctx.fillStyle = p.color;
+    if (p.shape === 0) {
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, p.size * 0.5, 0, Math.PI * 2);
+      ctx.fill();
+    } else if (p.shape === 1) {
+      ctx.fillRect(p.x - p.size * 0.35, p.y - p.size * 0.35, p.size * 0.7, p.size * 0.7);
+    } else {
+      ctx.beginPath();
+      ctx.moveTo(p.x, p.y - p.size * 0.5);
+      ctx.lineTo(p.x + p.size * 0.4, p.y + p.size * 0.3);
+      ctx.lineTo(p.x - p.size * 0.4, p.y + p.size * 0.3);
+      ctx.closePath();
+      ctx.fill();
+    }
+  }
+
+  ctx.globalAlpha = 1;
+  particles = particles.filter((p) => p.life < p.maxLife);
+
+  raf = requestAnimationFrame(draw);
+}
+
+function start() {
+  setTimeout(() => { emit('done'); }, 2200);
+  void nextTick(() => {
+    if (!canvasRef.value) return;
+    const rect = canvasRef.value.getBoundingClientRect();
+    w = rect.width;
+    h = rect.height;
+    particles = [];
+    spawnBurst();
+    cancelAnimationFrame(raf);
+    raf = requestAnimationFrame(draw);
+  });
+}
+
+function stop() {
+  cancelAnimationFrame(raf);
+  particles = [];
+}
+
+watch(() => props.show, (v) => {
+  if (v) start();
+  else stop();
+});
+
+onUnmounted(stop);
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="show" class="bet-success-overlay" @click="emit('done')">
+      <canvas ref="canvasRef" class="confetti-canvas" />
+      <div class="success-card">
+        <svg class="check" viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
+          <circle class="check-circle" cx="26" cy="26" r="24" fill="none" stroke="#D4AF37" stroke-width="3" />
+          <path class="check-mark" d="M14 27l7 7 16-16" fill="none" stroke="#D4AF37" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+        <p class="success-text">{{ t('bet.place_success') }}</p>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.bet-success-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 300;
+  background: rgba(0, 0, 0, 0.82);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.confetti-canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.success-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 18px;
+  animation: card-pop 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.2);
+}
+
+.check {
+  width: 72px;
+  height: 72px;
+}
+
+.check-circle {
+  stroke-dasharray: 151;
+  stroke-dashoffset: 151;
+  animation: circle-draw 0.5s 0.15s ease forwards;
+}
+
+.check-mark {
+  stroke-dasharray: 42;
+  stroke-dashoffset: 42;
+  animation: check-draw 0.35s 0.45s ease forwards;
+}
+
+.success-text {
+  color: var(--primary-light);
+  font-size: 18px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  animation: text-up 0.4s 0.4s ease both;
+}
+
+@keyframes card-pop {
+  0% { transform: scale(0.6); opacity: 0; }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+@keyframes circle-draw {
+  to { stroke-dashoffset: 0; }
+}
+
+@keyframes check-draw {
+  to { stroke-dashoffset: 0; }
+}
+
+@keyframes text-up {
+  0% { opacity: 0; transform: translateY(8px); }
+  100% { opacity: 1; transform: translateY(0); }
+}
+</style>
diff --git a/apps/player/src/components/CashBalanceChip.vue b/apps/player/src/components/CashBalanceChip.vue
index d98178a..5ca26c6 100644
--- a/apps/player/src/components/CashBalanceChip.vue
+++ b/apps/player/src/components/CashBalanceChip.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue';
+import { ref, onMounted, onUnmounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import api from '../api';
 import { formatMoney } from '../utils/localeDisplay';
 
 const { locale, t } = useI18n();
 const open = ref(false);
+const root = ref<HTMLElement | null>(null);
 const wallet = ref<{ availableBalance?: unknown; frozenBalance?: unknown; currency?: string } | null>(null);
 
 function amountValue(value: unknown): number {
@@ -48,10 +49,24 @@ function toggle() {
 function close() {
   open.value = false;
 }
+
+function onOutsideClick(e: Event) {
+  if (!root.value?.contains(e.target as Node)) open.value = false;
+}
+
+onMounted(() => {
+  document.addEventListener('click', onOutsideClick);
+  document.addEventListener('touchend', onOutsideClick);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', onOutsideClick);
+  document.removeEventListener('touchend', onOutsideClick);
+});
 </script>
 
 <template>
-  <div class="cash-chip-wrap">
+  <div ref="root" class="cash-chip-wrap">
     <button type="button" class="cash-chip" @click="toggle">
       <span class="chip-body">
         <span class="chip-label">{{ t('wallet.cash_balance') }}</span>
diff --git a/apps/player/src/components/GoldSpinner.vue b/apps/player/src/components/GoldSpinner.vue
new file mode 100644
index 0000000..cf6186e
--- /dev/null
+++ b/apps/player/src/components/GoldSpinner.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  size?: number;
+  progress?: number;
+  active?: boolean;
+}>();
+
+const rotation = computed(() => (props.progress ?? 0) * 360);
+const wrapperStyle = computed(() => {
+  if (props.active) return {};
+  return {
+    transform: `rotate(${rotation.value}deg)`,
+    transition: 'transform 0.05s linear',
+  };
+});
+</script>
+
+<template>
+  <svg
+    :class="['gold-spinner', { 'is-active': active }]"
+    :width="size ?? 48"
+    :height="size ?? 48"
+    viewBox="0 0 48 48"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    :style="!active ? wrapperStyle : undefined"
+  >
+    <defs>
+      <linearGradient id="gs-track" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stop-color="#D4AF37" stop-opacity="0.18" />
+        <stop offset="50%" stop-color="#F0D875" stop-opacity="0.25" />
+        <stop offset="100%" stop-color="#D4AF37" stop-opacity="0.18" />
+      </linearGradient>
+      <linearGradient id="gs-arc" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stop-color="#FFF4C8" />
+        <stop offset="22%" stop-color="#F0D875" />
+        <stop offset="50%" stop-color="#D4AF37" />
+        <stop offset="78%" stop-color="#B8942B" />
+        <stop offset="100%" stop-color="#8B6914" />
+      </linearGradient>
+      <filter id="gs-glow">
+        <feGaussianBlur stdDeviation="1.2" result="blur" />
+        <feMerge>
+          <feMergeNode in="blur" />
+          <feMergeNode in="SourceGraphic" />
+        </feMerge>
+      </filter>
+      <radialGradient id="gs-dot" cx="50%" cy="50%" r="50%">
+        <stop offset="0%" stop-color="#FFF4C8" />
+        <stop offset="60%" stop-color="#F0D875" />
+        <stop offset="100%" stop-color="#D4AF37" />
+      </radialGradient>
+    </defs>
+    <circle cx="24" cy="24" r="20" stroke="url(#gs-track)" stroke-width="3" fill="none" />
+    <circle
+      cx="24"
+      cy="24"
+      r="20"
+      stroke="url(#gs-arc)"
+      stroke-width="3"
+      fill="none"
+      stroke-linecap="round"
+      stroke-dasharray="31.4 94.2"
+      filter="url(#gs-glow)"
+    />
+    <circle cx="24" cy="4" r="2.5" fill="url(#gs-dot)" filter="url(#gs-glow)">
+      <animate
+        v-if="active"
+        attributeName="r"
+        values="2.5;3.2;2.5"
+        dur="1.2s"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle v-if="active" cx="36" cy="13.5" r="1.8" fill="#F0D875" opacity="0.6">
+      <animate attributeName="opacity" values="0.6;0.15;0.6" dur="0.9s" repeatCount="indefinite" begin="0.15s" />
+    </circle>
+    <circle v-if="active" cx="34" cy="34" r="1.5" fill="#D4AF37" opacity="0.4">
+      <animate attributeName="opacity" values="0.4;0.1;0.4" dur="1.1s" repeatCount="indefinite" begin="0.35s" />
+    </circle>
+    <circle v-if="active" cx="14" cy="34" r="1.5" fill="#D4AF37" opacity="0.4">
+      <animate attributeName="opacity" values="0.4;0.1;0.4" dur="1s" repeatCount="indefinite" begin="0.55s" />
+    </circle>
+  </svg>
+</template>
+
+<style scoped>
+.gold-spinner {
+  display: block;
+  will-change: transform;
+}
+
+.gold-spinner.is-active {
+  animation: gs-spin 0.8s linear infinite;
+}
+
+@keyframes gs-spin {
+  to { transform: rotate(360deg); }
+}
+</style>
diff --git a/apps/player/src/components/LeagueAccordionItem.vue b/apps/player/src/components/LeagueAccordionItem.vue
index 71dd2f7..8143161 100644
--- a/apps/player/src/components/LeagueAccordionItem.vue
+++ b/apps/player/src/components/LeagueAccordionItem.vue
@@ -52,6 +52,10 @@ const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
 <style scoped>
 .league-block {
   margin-bottom: 10px;
+  border: 1px solid #2e2e2e;
+  border-radius: 6px;
+  overflow: hidden;
+  background: #141414;
 }
 
 .league-row {
@@ -60,9 +64,9 @@ const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
   align-items: center;
   gap: 10px;
   padding: 12px 12px;
-  background: #141414;
-  border: 1px solid #2e2e2e;
-  border-radius: 6px;
+  background: none;
+  border: none;
+  border-radius: 0;
   text-align: left;
   cursor: pointer;
 }
@@ -117,7 +121,8 @@ const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
 
 .match-grid {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 6px;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 8px;
+  padding: 0 4px;
 }
 </style>
diff --git a/apps/player/src/components/LocaleSwitcher.vue b/apps/player/src/components/LocaleSwitcher.vue
index 8972e71..acbc276 100644
--- a/apps/player/src/components/LocaleSwitcher.vue
+++ b/apps/player/src/components/LocaleSwitcher.vue
@@ -30,12 +30,18 @@ function toggle() {
   open.value = !open.value;
 }
 
-function onDocClick(e: MouseEvent) {
+function onOutsideClick(e: Event) {
   if (!root.value?.contains(e.target as Node)) open.value = false;
 }
 
-onMounted(() => document.addEventListener('click', onDocClick));
-onUnmounted(() => document.removeEventListener('click', onDocClick));
+onMounted(() => {
+  document.addEventListener('click', onOutsideClick);
+  document.addEventListener('touchend', onOutsideClick);
+});
+onUnmounted(() => {
+  document.removeEventListener('click', onOutsideClick);
+  document.removeEventListener('touchend', onOutsideClick);
+});
 </script>
 
 <template>
diff --git a/apps/player/src/components/MatchBetCard.vue b/apps/player/src/components/MatchBetCard.vue
index 559ec9d..5186d2a 100644
--- a/apps/player/src/components/MatchBetCard.vue
+++ b/apps/player/src/components/MatchBetCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import TeamEmblem from './TeamEmblem.vue';
+import { teamFlagUrl } from '../utils/teamFlag';
 
 const props = defineProps<{
   match: {
@@ -18,44 +18,50 @@ const props = defineProps<{
 
 const emit = defineEmits<{ bet: [id: string] }>();
 
-const { t, locale } = useI18n();
+const { t } = useI18n();
 
-const kickoff = computed(() => {
-  const d = new Date(props.match.startTime);
-  return d.toLocaleString(locale.value, {
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: true,
-  });
-});
+function teamBgStyle(
+  code?: string,
+  name?: string,
+  logoUrl?: string | null,
+) {
+  const url = teamFlagUrl(code, name, logoUrl);
+  if (!url) return {};
+  const isCustomLogo = Boolean(logoUrl?.trim());
+  return {
+    backgroundImage: `url(${url})`,
+    backgroundSize: isCustomLogo ? '36px auto' : '48px auto',
+  };
+}
 
+const homeBgStyle = computed(() =>
+  teamBgStyle(
+    props.match.homeTeamCode,
+    props.match.homeTeamName,
+    props.match.homeTeamLogoUrl,
+  ),
+);
+
+const awayBgStyle = computed(() =>
+  teamBgStyle(
+    props.match.awayTeamCode,
+    props.match.awayTeamName,
+    props.match.awayTeamLogoUrl,
+  ),
+);
 </script>
 
 <template>
   <article class="match-card">
-    <div class="kickoff">{{ kickoff }}</div>
-    <div class="teams-stack">
-      <div class="side">
-        <TeamEmblem
-          size="sm"
-          :team-code="match.homeTeamCode"
-          :team-name="match.homeTeamName"
-          :logo-url="match.homeTeamLogoUrl"
-        />
-        <span class="name">{{ match.homeTeamName }}</span>
-      </div>
+    <div class="bg-split" aria-hidden="true">
+      <div class="bg-half home-bg" :style="homeBgStyle" />
+      <div class="bg-half away-bg" :style="awayBgStyle" />
+      <div class="bg-veil" />
+    </div>
+    <div class="teams-row">
+      <span class="name home-name">{{ match.homeTeamName }}</span>
       <span class="vs">VS</span>
-      <div class="side">
-        <TeamEmblem
-          size="sm"
-          :team-code="match.awayTeamCode"
-          :team-name="match.awayTeamName"
-          :logo-url="match.awayTeamLogoUrl"
-        />
-        <span class="name">{{ match.awayTeamName }}</span>
-      </div>
+      <span class="name away-name">{{ match.awayTeamName }}</span>
     </div>
     <button type="button" class="bet-btn btn-gold-outline" @click="emit('bet', match.id)">
       {{ t('bet.place_bet_short') }}
@@ -65,69 +71,105 @@ const kickoff = computed(() => {
 
 <style scoped>
 .match-card {
-  background: #1a1a1a;
-  border: 1px solid #2a2a2a;
+  position: relative;
+  overflow: hidden;
+  background: #0d0d0d;
+  border: 1px solid rgba(255, 215, 0, 0.25);
   border-radius: 6px;
-  padding: 6px 4px 5px;
+  padding: 8px 10px 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.bg-split {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.bg-half {
+  position: absolute;
+  inset: 0;
+  background-repeat: no-repeat;
+  opacity: 0.48;
+}
+
+.home-bg {
+  clip-path: polygon(0 0, 54% 0, 46% 100%, 0 100%);
+  background-position: 22% 50%;
+}
+
+.away-bg {
+  clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%);
+  background-position: 78% 50%;
+}
+
+.bg-veil {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    102deg,
+    rgba(0, 0, 0, 0.52) 0%,
+    rgba(0, 0, 0, 0.28) 46%,
+    rgba(0, 0, 0, 0.28) 54%,
+    rgba(0, 0, 0, 0.52) 100%
+  );
+}
+
+.teams-row {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
   gap: 4px;
-  min-width: 0;
-}
-
-.kickoff {
-  width: 100%;
-  text-align: center;
-  font-size: 9px;
-  line-height: 1.25;
-  color: var(--text-muted);
-  font-weight: 600;
-}
-
-.teams-stack {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-}
-
-.side {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-  min-width: 0;
+  min-height: 32px;
 }
 
 .name {
-  width: 100%;
-  font-size: 10px;
-  font-weight: 800;
+  font-size: 14px;
+  font-weight: 900;
   color: var(--primary-light);
-  line-height: 1.2;
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 0 2px;
+  line-height: 1.25;
+  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
+  word-break: keep-all;
+}
+
+.home-name {
+  text-align: left;
+  padding-left: 2px;
+}
+
+.away-name {
+  text-align: right;
+  padding-right: 2px;
 }
 
 .vs {
-  font-size: 9px;
+  flex-shrink: 0;
+  font-size: 10px;
   font-weight: 800;
   color: var(--text-muted);
   line-height: 1;
+  letter-spacing: 0.06em;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
 }
 
 .bet-btn {
-  width: 100%;
-  margin-top: 2px;
-  padding: 3px 2px;
-  border-radius: 4px;
-  font-size: 10px;
+  position: relative;
+  z-index: 1;
+  width: auto;
+  min-width: 72px;
+  max-width: 42%;
+  margin-top: 0;
+  padding: 5px 18px;
+  border-radius: 6px;
+  font-size: 12px;
   letter-spacing: 0.04em;
   line-height: 1.2;
 }
diff --git a/apps/player/src/components/UserAvatarMenu.vue b/apps/player/src/components/UserAvatarMenu.vue
index 05f0377..dd6cfc5 100644
--- a/apps/player/src/components/UserAvatarMenu.vue
+++ b/apps/player/src/components/UserAvatarMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { playerAvatarUrl, randomAvatarKey } from '@thebet365/shared';
@@ -11,6 +11,7 @@ const auth = useAuthStore();
 const router = useRouter();
 const { avatarUrl, loadProfile } = usePlayerProfile();
 const open = ref(false);
+const root = ref<HTMLElement | null>(null);
 
 const displayAvatarUrl = computed(() => {
   if (avatarUrl.value) return avatarUrl.value;
@@ -30,6 +31,19 @@ function close() {
   open.value = false;
 }
 
+function onOutsideClick(e: Event) {
+  if (!root.value?.contains(e.target as Node)) open.value = false;
+}
+
+onMounted(() => {
+  document.addEventListener('click', onOutsideClick);
+  document.addEventListener('touchend', onOutsideClick);
+});
+onUnmounted(() => {
+  document.removeEventListener('click', onOutsideClick);
+  document.removeEventListener('touchend', onOutsideClick);
+});
+
 function goEdit() {
   close();
   router.push('/profile/edit');
@@ -43,7 +57,7 @@ function logout() {
 </script>
 
 <template>
-  <div class="avatar-wrap">
+  <div ref="root" class="avatar-wrap">
     <button type="button" class="avatar-btn" :aria-expanded="open" @click="toggle">
       <img v-if="displayAvatarUrl" :src="displayAvatarUrl" alt="" class="avatar-img" />
     </button>
diff --git a/apps/player/src/components/WalletStatsPanel.vue b/apps/player/src/components/WalletStatsPanel.vue
new file mode 100644
index 0000000..32b3b17
--- /dev/null
+++ b/apps/player/src/components/WalletStatsPanel.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { formatMoney, parseAmount } from '../utils/localeDisplay';
+
+interface Transaction {
+  transactionType: string;
+  amount: string;
+  createdAt: string;
+  transactionId?: string;
+}
+
+const props = defineProps<{ items: Transaction[] }>();
+const { t, locale } = useI18n();
+
+const stats = computed(() => {
+  let income = 0;
+  let expense = 0;
+
+  for (const tx of props.items) {
+    const amt = parseAmount(tx.amount);
+    if (amt >= 0) income += amt;
+    else expense += Math.abs(amt);
+  }
+
+  const net = income - expense;
+
+  return { income, expense, net };
+});
+</script>
+
+<template>
+  <div class="wallet-stats-panel">
+    <div class="stats-row">
+      <div class="stat-item">
+        <span class="stat-val income">{{ formatMoney(stats.income, locale) }}</span>
+        <span class="stat-label">{{ t('wallet.stats_income') }}</span>
+      </div>
+      <div class="stat-divider" />
+      <div class="stat-item">
+        <span class="stat-val expense">{{ formatMoney(stats.expense, locale) }}</span>
+        <span class="stat-label">{{ t('wallet.stats_expense') }}</span>
+      </div>
+      <div class="stat-divider" />
+      <div class="stat-item">
+        <span class="stat-val" :class="stats.net >= 0 ? 'income' : 'expense'">
+          {{ formatMoney(stats.net, locale) }}
+        </span>
+        <span class="stat-label">{{ t('wallet.stats_net') }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.wallet-stats-panel {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px 12px;
+  margin-bottom: 12px;
+  backdrop-filter: blur(10px);
+}
+
+.stats-row {
+  display: flex;
+  align-items: center;
+}
+
+.stat-item {
+  flex: 1;
+  text-align: center;
+  min-width: 0;
+}
+
+.stat-divider {
+  width: 1px;
+  height: 32px;
+  background: var(--border);
+  flex-shrink: 0;
+}
+
+.stat-val {
+  display: block;
+  font-size: 15px;
+  font-weight: 900;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.stat-val.income { color: #3db865; }
+.stat-val.expense { color: #e05050; }
+
+.stat-label {
+  display: block;
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--text-muted);
+  letter-spacing: 0.04em;
+  margin-top: 3px;
+}
+</style>
diff --git a/apps/player/src/components/match-detail/CorrectScoreConfirmModal.vue b/apps/player/src/components/match-detail/CorrectScoreConfirmModal.vue
index 9216c8f..5c72d38 100644
--- a/apps/player/src/components/match-detail/CorrectScoreConfirmModal.vue
+++ b/apps/player/src/components/match-detail/CorrectScoreConfirmModal.vue
@@ -52,38 +52,42 @@ function formatOdds(odds: string) {
         </button>
       </div>
 
-      <div class="slip-item">
-        <div class="item-name">{{ homeTeamName }} vs {{ awayTeamName }}</div>
-        <div class="item-sel">{{ marketLabel }}</div>
-      </div>
+      <div class="drawer-body">
+        <div class="slip-item">
+          <div class="item-name">{{ homeTeamName }} vs {{ awayTeamName }}</div>
+          <div class="item-sel">{{ marketLabel }}</div>
+        </div>
 
-      <div v-for="(line, idx) in lines" :key="idx" class="slip-item">
-        <div class="item-name">{{ line.scoreDisplay }}</div>
-        <div class="item-sel">
-          @ <span class="odds">{{ formatOdds(line.odds) }}</span>
-          · {{ formatMoney(line.stake, locale) }}
+        <div v-for="(line, idx) in lines" :key="idx" class="slip-item">
+          <div class="item-name">{{ line.scoreDisplay }}</div>
+          <div class="item-sel">
+            @ <span class="odds">{{ formatOdds(line.odds) }}</span>
+            · {{ formatMoney(line.stake, locale) }}
+          </div>
         </div>
       </div>
 
-      <div class="stake-area">
-        <div class="summary-row">
-          <span>{{ t('bet.cs_confirm_total_stake') }}</span>
-          <strong>{{ formatMoney(totalStake, locale) }}</strong>
+      <div class="drawer-foot">
+        <div class="stake-area">
+          <div class="summary-row">
+            <span>{{ t('bet.cs_confirm_total_stake') }}</span>
+            <strong>{{ formatMoney(totalStake, locale) }}</strong>
+          </div>
+          <div class="return">
+            {{ t('bet.slip_est_return') }}:
+            <strong>{{ formatMoney(totalReturn, locale) }}</strong>
+          </div>
         </div>
-        <div class="return">
-          {{ t('bet.slip_est_return') }}:
-          <strong>{{ formatMoney(totalReturn, locale) }}</strong>
-        </div>
-      </div>
 
-      <button
-        type="button"
-        class="btn-primary"
-        :disabled="loading"
-        @click="emit('confirm')"
-      >
-        {{ loading ? t('bet.placing') : t('bet.place_bet') }}
-      </button>
+        <button
+          type="button"
+          class="btn-primary"
+          :disabled="loading"
+          @click="emit('confirm')"
+        >
+          {{ loading ? t('bet.placing') : t('bet.place_bet') }}
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -103,16 +107,36 @@ function formatOdds(odds: string) {
   width: 100%;
   max-height: 80vh;
   border-radius: 16px 16px 0 0;
-  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0));
-  overflow-y: auto;
   border-top: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.drawer-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px 14px 0;
+  -webkit-overflow-scrolling: touch;
+}
+
+.drawer-foot {
+  flex-shrink: 0;
+  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
+  background: rgba(14, 14, 14, 0.98);
+  border-top: 1px solid var(--border-gold-soft);
+  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
 }
 
 .drawer-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 12px;
+  padding: 14px 14px 12px;
+  flex-shrink: 0;
+  background: rgba(14, 14, 14, 0.98);
+  border-bottom: 1px solid #2a2a2a;
+  z-index: 2;
 }
 
 .drawer-header h3 {
diff --git a/apps/player/src/components/match-detail/MarketTypeTile.vue b/apps/player/src/components/match-detail/MarketTypeTile.vue
index 1b194b4..1eb38ba 100644
--- a/apps/player/src/components/match-detail/MarketTypeTile.vue
+++ b/apps/player/src/components/match-detail/MarketTypeTile.vue
@@ -21,9 +21,9 @@ const { t } = useI18n();
     @click="emit('toggle')"
   >
     <span class="row-label">{{ label }}</span>
-    <span v-if="promoLabel" class="row-promo">{{ promoLabel }}</span>
+        <span v-if="promoLabel" class="row-promo">{{ promoLabel }}</span>
     <span v-if="!hasMarket" class="row-muted">{{ t('bet.market_closed') }}</span>
-    <span v-else class="row-chevron" aria-hidden="true">{{ expanded ? '▾' : '▸' }}</span>
+    <span v-else class="row-chevron" :class="{ open: expanded }" aria-hidden="true">▸</span>
   </button>
 </template>
 
@@ -33,16 +33,35 @@ const { t } = useI18n();
   align-items: center;
   gap: 8px;
   width: 100%;
-  padding: 10px 12px;
+  padding: 13px 12px;
   background: transparent;
   border: none;
   text-align: left;
+  transition: background 0.15s ease;
+  border-radius: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.row:not(.disabled):active {
+  background: rgba(255, 255, 255, 0.025);
 }
 
 .row.expanded {
   background: rgba(255, 255, 255, 0.03);
 }
 
+.row.expanded::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 12px;
+  right: 12px;
+  height: 2px;
+  background: linear-gradient(90deg, transparent 0%, var(--primary) 30%, var(--primary-light) 50%, var(--primary) 70%, transparent 100%);
+  opacity: 0.6;
+}
+
 .row.disabled {
   opacity: 0.4;
 }
@@ -53,6 +72,7 @@ const { t } = useI18n();
   font-size: 13px;
   font-weight: 700;
   color: var(--text);
+  letter-spacing: 0.02em;
 }
 
 .row-promo {
@@ -73,14 +93,18 @@ const { t } = useI18n();
 .row-muted {
   font-size: 10px;
   color: var(--text-muted);
+  font-weight: 600;
 }
 
 .row-chevron {
   font-size: 11px;
   color: var(--text-muted);
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s;
+  flex-shrink: 0;
 }
 
-.row.expanded .row-chevron {
+.row-chevron.open {
+  transform: rotate(90deg);
   color: var(--primary-light);
 }
 </style>
diff --git a/apps/player/src/components/outright/OutrightBetModal.vue b/apps/player/src/components/outright/OutrightBetModal.vue
index 9d23ead..7393d1e 100644
--- a/apps/player/src/components/outright/OutrightBetModal.vue
+++ b/apps/player/src/components/outright/OutrightBetModal.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import api from '../../api';
 import { formatMoney, parseAmount } from '../../utils/localeDisplay';
 import { teamFlagUrl } from '../../utils/teamFlag';
+import BetSuccessOverlay from '../BetSuccessOverlay.vue';
 
 export interface OutrightPick {
   selectionId: string;
@@ -30,6 +31,7 @@ const error = ref('');
 const balance = ref(0);
 const successBalance = ref(0);
 const successStake = ref(0);
+const showSuccess = ref(false);
 
 const flagUrl = computed(() =>
   props.pick ? teamFlagUrl(props.pick.teamCode, props.pick.teamName) : null,
@@ -102,6 +104,7 @@ async function submit() {
     successBalance.value = balance.value - stake.value;
     balance.value = successBalance.value;
     step.value = 'success';
+    showSuccess.value = true;
   } catch (e: unknown) {
     error.value =
       (e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
@@ -206,6 +209,8 @@ function formatOdds(odds: string) {
       </template>
     </div>
   </div>
+
+  <BetSuccessOverlay :show="showSuccess" @done="showSuccess = false" />
 </template>
 
 <style scoped>
diff --git a/apps/player/src/components/outright/OutrightEventSection.vue b/apps/player/src/components/outright/OutrightEventSection.vue
index 3fc6f9e..df62182 100644
--- a/apps/player/src/components/outright/OutrightEventSection.vue
+++ b/apps/player/src/components/outright/OutrightEventSection.vue
@@ -26,20 +26,15 @@ export interface OutrightEvent {
 const props = defineProps<{
   event: OutrightEvent;
   expanded: boolean;
-  visibleLimit: number;
-  loadingMore: boolean;
 }>();
 
 const emit = defineEmits<{
   toggle: [];
-  loadMore: [];
   pick: [selection: OutrightSelection];
 }>();
 
 const { t } = useI18n();
 
-const INITIAL_BATCH = 20;
-
 const headTitle = computed(() => {
   const raw = props.event.title.replace(/^\*+/, '').trim();
   return raw || props.event.leagueName || t('bet.tab_outright');
@@ -49,28 +44,16 @@ const headMeta = computed(() => {
   const total = props.event.selectionCount ?? props.event.selections.length;
   return t('bet.outright_teams_count', { n: total });
 });
-
-const visibleSelections = computed(() =>
-  props.event.selections.slice(0, props.visibleLimit),
-);
-
-const hasMore = computed(
-  () => props.event.selections.length > props.visibleLimit,
-);
-
-const showLoadMore = computed(
-  () => props.event.selections.length > INITIAL_BATCH && hasMore.value,
-);
 </script>
 
 <template>
   <section class="event-block">
-    <button type="button" class="event-head" :aria-expanded="expanded" @click="emit('toggle')">
+    <button type="button" class="event-head" :class="{ 'is-expanded': expanded }" :aria-expanded="expanded" @click="emit('toggle')">
       <span class="toggle-icon" :class="{ open: expanded }">
         <span class="toggle-mark">{{ expanded ? '−' : '+' }}</span>
       </span>
       <span class="event-head-text">
-        <span class="event-title">*{{ headTitle }}</span>
+        <span class="event-title">{{ headTitle }}</span>
         <span v-if="event.leagueName && event.leagueName !== headTitle" class="event-league">
           {{ event.leagueName }}
         </span>
@@ -79,10 +62,10 @@ const showLoadMore = computed(
       <img :src="saishiImg" alt="" class="event-saishi" />
     </button>
 
-    <div v-show="expanded" class="options-wrap">
+    <div v-show="expanded" class="options-scroll">
       <div class="options-grid">
         <OutrightOptionCard
-          v-for="sel in visibleSelections"
+          v-for="sel in event.selections"
           :key="sel.id"
           :team-code="sel.teamCode"
           :team-name="sel.teamName"
@@ -91,24 +74,6 @@ const showLoadMore = computed(
           @pick="emit('pick', sel)"
         />
       </div>
-      <div v-if="showLoadMore" class="load-more-zone">
-        <p class="load-more-hint">
-          {{
-            t('bet.outright_shown_count', {
-              shown: visibleSelections.length,
-              total: event.selections.length,
-            })
-          }}
-        </p>
-        <button
-          type="button"
-          class="load-more-btn"
-          :disabled="loadingMore"
-          @click="emit('loadMore')"
-        >
-          {{ loadingMore ? t('bet.loading') : t('bet.outright_load_more') }}
-        </button>
-      </div>
     </div>
   </section>
 </template>
@@ -116,6 +81,9 @@ const showLoadMore = computed(
 <style scoped>
 .event-block {
   margin-bottom: 10px;
+  border: 1px solid #2e2e2e;
+  border-radius: 6px;
+  overflow: hidden;
 }
 
 .event-head {
@@ -125,8 +93,8 @@ const showLoadMore = computed(
   gap: 10px;
   padding: 12px 10px;
   background: #141414;
-  border: 1px solid #2e2e2e;
-  border-radius: 6px;
+  border: none;
+  border-radius: 0;
   text-align: left;
 }
 
@@ -192,43 +160,18 @@ const showLoadMore = computed(
   border-left: 1px solid #2a2a2a;
 }
 
-.options-wrap {
-  padding: 10px 0 4px;
+.options-scroll {
+  max-height: 408px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 8px 2px 2px;
+  scrollbar-width: thin;
+  scrollbar-color: #333 transparent;
 }
 
 .options-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 8px;
-}
-
-.load-more-zone {
-  padding: 14px 8px 6px;
-  text-align: center;
-}
-
-.load-more-hint {
-  margin: 0 0 10px;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-muted);
-}
-
-.load-more-btn {
-  width: 100%;
-  max-width: 280px;
-  padding: 11px 16px;
-  border-radius: 8px;
-  border: 1px solid var(--border-gold-soft);
-  background: linear-gradient(180deg, #1f1f1f, #141414);
-  color: var(--primary-light);
-  font-size: 13px;
-  font-weight: 800;
-  font-family: inherit;
-  letter-spacing: 0.04em;
-}
-
-.load-more-btn:disabled {
-  opacity: 0.65;
+  gap: 6px;
 }
 </style>
diff --git a/apps/player/src/components/outright/OutrightOptionCard.vue b/apps/player/src/components/outright/OutrightOptionCard.vue
index d3b671d..71b9384 100644
--- a/apps/player/src/components/outright/OutrightOptionCard.vue
+++ b/apps/player/src/components/outright/OutrightOptionCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, onMounted, onUnmounted } from 'vue';
 import { teamFlagUrl } from '../../utils/teamFlag';
 
 const props = defineProps<{
@@ -15,6 +15,9 @@ const flag = computed(
   () => props.logoUrl?.trim() || teamFlagUrl(props.teamCode, props.teamName),
 );
 const flagFailed = ref(false);
+const imgVisible = ref(false);
+const cardRef = ref<HTMLElement | null>(null);
+let observer: IntersectionObserver | null = null;
 
 function onFlagError() {
   flagFailed.value = true;
@@ -31,16 +34,34 @@ function formatOdds(odds: string) {
   const n = parseFloat(odds);
   return Number.isFinite(n) ? n.toFixed(2) : odds;
 }
+
+onMounted(() => {
+  if (!cardRef.value) return;
+  observer = new IntersectionObserver(
+    (entries) => {
+      const entry = entries[0];
+      if (entry.isIntersecting) {
+        imgVisible.value = true;
+        observer?.disconnect();
+      }
+    },
+    { rootMargin: '120px' }
+  );
+  observer.observe(cardRef.value);
+});
+
+onUnmounted(() => {
+  observer?.disconnect();
+});
 </script>
 
 <template>
-  <button type="button" class="option-card" @click="emit('pick')">
+  <button ref="cardRef" type="button" class="option-card" @click="emit('pick')">
     <img
-      v-if="flag && !flagFailed"
+      v-if="imgVisible && flag && !flagFailed"
       :src="flag"
       alt=""
       class="flag"
-      loading="lazy"
       @error="onFlagError"
     />
     <span v-else class="flag-placeholder" aria-hidden="true">⚽</span>
diff --git a/apps/player/src/components/outright/OutrightPanel.vue b/apps/player/src/components/outright/OutrightPanel.vue
index 5e57e9b..b783d3e 100644
--- a/apps/player/src/components/outright/OutrightPanel.vue
+++ b/apps/player/src/components/outright/OutrightPanel.vue
@@ -8,19 +8,15 @@ import OutrightEventSection, {
 } from './OutrightEventSection.vue';
 import OutrightBetModal, { type OutrightPick } from './OutrightBetModal.vue';
 import emptyMatchesImg from '../../assets/images/empty-matches.svg';
+import GoldSpinner from '../../components/GoldSpinner.vue';
 import { useOnLocaleChange } from '../../composables/useOnLocaleChange';
 
 const { t } = useI18n();
 
-const INITIAL_BATCH = 20;
-const LOAD_MORE_STEP = 28;
-
 const loading = ref(true);
 const loadError = ref('');
-const loadingMoreId = ref<string | null>(null);
 const events = ref<OutrightEvent[]>([]);
 const expanded = ref<Set<string>>(new Set());
-const visibleLimits = ref<Record<string, number>>({});
 const modalOpen = ref(false);
 const activePick = ref<OutrightPick | null>(null);
 
@@ -29,60 +25,37 @@ const totalSelections = computed(() =>
   events.value.reduce((sum, e) => sum + e.selections.length, 0),
 );
 
-function resetVisibleLimits() {
-  const next: Record<string, number> = {};
-  for (const e of events.value) {
-    next[e.id] =
-      e.selections.length <= INITIAL_BATCH
-        ? e.selections.length
-        : INITIAL_BATCH;
-  }
-  visibleLimits.value = next;
-}
-
 function syncExpandedAfterLoad() {
   const ids = events.value.map((e) => e.id);
-  const kept = new Set([...expanded.value].filter((id) => ids.includes(id)));
-  if (kept.size > 0) {
-    expanded.value = kept;
+  // 只保留仍然存在的 id，且最多保留 1 个
+  const kept = [...expanded.value].filter((id) => ids.includes(id));
+  if (kept.length > 0) {
+    expanded.value = new Set([kept[0]]);
     return;
   }
-  if (ids.length === 1) {
-    expanded.value = new Set(ids);
-  } else if (ids.length <= 3) {
-    expanded.value = new Set(ids);
-  } else {
+  if (ids.length > 0) {
     expanded.value = new Set([ids[0]]);
+  } else {
+    expanded.value = new Set();
   }
 }
 
-function hasMoreSelections(event: OutrightEvent) {
-  const limit = visibleLimits.value[event.id] ?? INITIAL_BATCH;
-  return event.selections.length > limit;
-}
-
-function loadMore(event: OutrightEvent) {
-  if (loadingMoreId.value || !hasMoreSelections(event)) return;
-  loadingMoreId.value = event.id;
-  const current = visibleLimits.value[event.id] ?? INITIAL_BATCH;
-  visibleLimits.value = {
-    ...visibleLimits.value,
-    [event.id]: Math.min(current + LOAD_MORE_STEP, event.selections.length),
-  };
-  loadingMoreId.value = null;
-}
-
 async function load() {
-  loading.value = true;
+  const hadData = events.value.length > 0;
+  if (!hadData) loading.value = true;
   loadError.value = '';
   try {
     const { data } = await api.get('/player/outrights');
     const list = (data?.data ?? []) as OutrightEvent[];
-    events.value = list.filter((e) => e.selections?.length > 0);
-    resetVisibleLimits();
-    syncExpandedAfterLoad();
+    const fresh = list.filter((e) => e.selections?.length > 0);
+    if (!hadData) {
+      events.value = fresh;
+      syncExpandedAfterLoad();
+    } else {
+      mergeOddsOnly(fresh);
+    }
   } catch (e: unknown) {
-    events.value = [];
+    if (!hadData) events.value = [];
     const err = e as { response?: { status?: number; data?: { error?: string } } };
     if (err.response?.status === 403) {
       loadError.value = t('bet.outright_player_only');
@@ -90,7 +63,26 @@ async function load() {
       loadError.value = err.response?.data?.error ?? t('bet.outright_load_failed');
     }
   } finally {
-    loading.value = false;
+    if (!hadData) loading.value = false;
+  }
+}
+
+function mergeOddsOnly(fresh: OutrightEvent[]) {
+  const freshMap = new Map<string, OutrightEvent>();
+  for (const e of fresh) freshMap.set(e.id, e);
+
+  for (const event of events.value) {
+    const freshEvent = freshMap.get(event.id);
+    if (!freshEvent) continue;
+    const selMap = new Map<string, OutrightSelection>();
+    for (const s of freshEvent.selections) selMap.set(s.id, s);
+    for (const sel of event.selections) {
+      const fs = selMap.get(sel.id);
+      if (fs) {
+        sel.odds = fs.odds;
+        sel.oddsVersion = fs.oddsVersion;
+      }
+    }
   }
 }
 
@@ -101,18 +93,6 @@ function toggle(id: string) {
   if (next.has(id)) next.delete(id);
   else next.add(id);
   expanded.value = next;
-  if (next.has(id) && visibleLimits.value[id] == null) {
-    const event = events.value.find((e) => e.id === id);
-    if (event) {
-      visibleLimits.value = {
-        ...visibleLimits.value,
-        [id]:
-          event.selections.length <= INITIAL_BATCH
-            ? event.selections.length
-            : INITIAL_BATCH,
-      };
-    }
-  }
 }
 
 function openBet(event: OutrightEvent, sel: OutrightSelection) {
@@ -135,8 +115,9 @@ function closeModal() {
 
 <template>
   <div class="outright-panel">
-    <div v-if="loading" class="state">{{ t('bet.loading') }}</div>
-
+    <div v-if="loading" class="state">
+      <GoldSpinner :size="36" />
+    </div>
     <template v-else-if="events.length">
       <p v-if="eventCount > 1" class="panel-summary">
         {{ t('bet.outright_events_summary', { events: eventCount, teams: totalSelections }) }}
@@ -148,10 +129,7 @@ function closeModal() {
           :key="event.id"
           :event="event"
           :expanded="expanded.has(event.id)"
-          :visible-limit="visibleLimits[event.id] ?? INITIAL_BATCH"
-          :loading-more="loadingMoreId === event.id"
           @toggle="toggle(event.id)"
-          @load-more="loadMore(event)"
           @pick="openBet(event, $event)"
         />
       </div>
diff --git a/apps/player/src/components/parlay/ParlayPanel.vue b/apps/player/src/components/parlay/ParlayPanel.vue
index 334d7fd..1ba7890 100644
--- a/apps/player/src/components/parlay/ParlayPanel.vue
+++ b/apps/player/src/components/parlay/ParlayPanel.vue
@@ -6,6 +6,8 @@ import { useBetSlipStore } from '../../stores/betSlip';
 import { PARLAY_MAX_LEGS, canSelectForParlay } from '@thebet365/shared';
 import { PARLAY_MARKET_TYPES, PARLAY_SELECTION_KEYS } from '../../utils/parlayColumns';
 import BetGuideHelp from '../BetGuideHelp.vue';
+import GoldSpinner from '../GoldSpinner.vue';
+import TeamEmblem from '../TeamEmblem.vue';
 import { useOnLocaleChange } from '../../composables/useOnLocaleChange';
 
 type TimeFilter = 'all' | 'today';
@@ -29,8 +31,13 @@ interface Market {
 interface ParlayMatch {
   id: string;
   leagueName: string;
+  leagueId?: string;
   homeTeamName: string;
   awayTeamName: string;
+  homeTeamCode?: string;
+  awayTeamCode?: string;
+  homeTeamLogoUrl?: string | null;
+  awayTeamLogoUrl?: string | null;
   startTime: string;
   markets: Market[];
 }
@@ -41,23 +48,87 @@ const slip = useBetSlipStore();
 const loading = ref(true);
 const matches = ref<ParlayMatch[]>([]);
 const timeFilter = ref<TimeFilter>('all');
+const leagueFilter = ref('');
+const collapsed = ref<Set<string>>(new Set());
 
 const parlayMarketKeys = PARLAY_MARKET_TYPES.map((c) => c.key);
 
 async function loadParlayMatches() {
-  loading.value = true;
+  const hadData = matches.value.length > 0;
+  if (!hadData) loading.value = true;
   try {
     const { data } = await api.get('/player/matches');
-    matches.value = (data.data ?? []).filter(
+    const fresh = (data.data ?? []).filter(
       (m: ParlayMatch) => m.markets?.length && hasParlayMarkets(m),
     );
+    if (!hadData) {
+      matches.value = fresh;
+      syncCollapsedAfterLoad();
+    } else {
+      mergeOddsOnly(fresh);
+    }
   } finally {
-    loading.value = false;
+    if (!hadData) loading.value = false;
+  }
+}
+
+function syncCollapsedAfterLoad() {
+  const ids = matches.value.map((m) => m.id);
+  // 只保留仍然存在的 id
+  const kept = [...collapsed.value].filter((id) => ids.includes(id));
+  if (kept.length > 0) {
+    collapsed.value = new Set(kept);
+    return;
+  }
+  // 默认只展开第一个，其余折叠
+  if (ids.length > 1) {
+    collapsed.value = new Set(ids.slice(1));
+  } else {
+    collapsed.value = new Set();
+  }
+}
+
+function mergeOddsOnly(fresh: ParlayMatch[]) {
+  const matchMap = new Map<string, ParlayMatch>();
+  for (const m of fresh) matchMap.set(m.id, m);
+
+  for (const match of matches.value) {
+    const freshMatch = matchMap.get(match.id);
+    if (!freshMatch) continue;
+    const marketMap = new Map<string, Market>();
+    for (const mk of freshMatch.markets) marketMap.set(mk.id, mk);
+    for (const market of match.markets) {
+      const freshMarket = marketMap.get(market.id);
+      if (!freshMarket) continue;
+      const selMap = new Map<string, Selection>();
+      for (const s of freshMarket.selections) selMap.set(s.id, s);
+      for (const sel of market.selections) {
+        const fs = selMap.get(sel.id);
+        if (fs) {
+          sel.odds = fs.odds;
+          sel.oddsVersion = fs.oddsVersion;
+        }
+      }
+    }
   }
 }
 
 useOnLocaleChange(loadParlayMatches);
 
+const leagues = computed(() => {
+  const seen = new Set<string>();
+  const list: { id: string; name: string }[] = [];
+  for (const m of matches.value) {
+    const id = m.leagueId ?? m.leagueName;
+    if (!seen.has(id)) {
+      seen.add(id);
+      list.push({ id, name: m.leagueName });
+    }
+  }
+  list.sort((a, b) => a.name.localeCompare(b.name));
+  return list;
+});
+
 function parseLine(v: string | number | null | undefined) {
   if (v == null || v === '') return null;
   const n = typeof v === 'number' ? v : parseFloat(String(v));
@@ -100,8 +171,14 @@ function isKickoffToday(startTime: string) {
 }
 
 const filteredMatches = computed(() => {
-  if (timeFilter.value === 'all') return matches.value;
-  return matches.value.filter((m) => isKickoffToday(m.startTime));
+  let list = matches.value;
+  if (timeFilter.value === 'today') {
+    list = list.filter((m) => isKickoffToday(m.startTime));
+  }
+  if (leagueFilter.value) {
+    list = list.filter((m) => (m.leagueId ?? m.leagueName) === leagueFilter.value);
+  }
+  return list;
 });
 
 function formatKickoff(startTime: string) {
@@ -163,76 +240,101 @@ const showParlayFoot = computed(() => slip.mode === 'parlay' && slip.count > 0);
 const footConfirmLabel = computed(() =>
   slip.canPlaceParlay ? t('bet.parlay_confirm_parlay') : t('bet.cs_confirm_cell'),
 );
+
+function toggleCollapse(id: string) {
+  const next = new Set(collapsed.value);
+  if (next.has(id)) next.delete(id);
+  else next.add(id);
+  collapsed.value = next;
+}
 </script>
 
 <template>
   <div class="parlay-panel" :class="{ 'has-fixed-foot': showParlayFoot }">
     <div class="toolbar">
-      <div class="toolbar-filters">
-        <select v-model="timeFilter" class="filter-select">
+      <select v-model="timeFilter" class="filter-select">
         <option value="all">{{ t('bet.parlay_filter_all') }}</option>
         <option value="today">{{ t('bet.tab_today') }}</option>
-        </select>
-        <BetGuideHelp
-          :title="t('bet.parlay_guide_title')"
-          :aria-label="t('bet.parlay_guide_help')"
-          storage-key="thebet365_parlay_guide_seen"
-        >
-          <p class="intro">{{ t('bet.parlay_desc') }}</p>
-          <ol>
-            <li>{{ t('bet.parlay_guide_1') }}</li>
-            <li>{{ t('bet.parlay_guide_2') }}</li>
-            <li>{{ t('bet.parlay_guide_3') }}</li>
-          </ol>
-          <p class="rules-link">{{ t('bet.guide_rules_link') }}</p>
-        </BetGuideHelp>
-      </div>
-      <div class="col-headers">
-        <span v-for="col in PARLAY_MARKET_TYPES" :key="col.key" class="col-head">{{ colLabel(col.labelKey) }}</span>
-      </div>
+      </select>
+      <select v-model="leagueFilter" class="filter-select">
+        <option value="">{{ t('bet.parlay_filter_all') }}</option>
+        <option v-for="lg in leagues" :key="lg.id" :value="lg.id">{{ lg.name }}</option>
+      </select>
+      <BetGuideHelp
+        :title="t('bet.parlay_guide_title')"
+        :aria-label="t('bet.parlay_guide_help')"
+        storage-key="thebet365_parlay_guide_seen"
+      >
+        <p class="intro">{{ t('bet.parlay_desc') }}</p>
+        <ol>
+          <li>{{ t('bet.parlay_guide_1') }}</li>
+          <li>{{ t('bet.parlay_guide_2') }}</li>
+          <li>{{ t('bet.parlay_guide_3') }}</li>
+        </ol>
+        <p class="rules-link">{{ t('bet.guide_rules_link') }}</p>
+      </BetGuideHelp>
     </div>
 
-    <div v-if="loading" class="state">{{ t('bet.loading') }}</div>
+    <div v-if="loading" class="state">
+      <GoldSpinner :size="36" />
+    </div>
 
-    <div v-else-if="filteredMatches.length" class="table-wrap">
-      <div v-for="match in filteredMatches" :key="match.id" class="match-row">
-        <div class="match-info">
-          <div class="league">{{ match.leagueName }}</div>
-          <div class="teams">{{ match.homeTeamName }} vs {{ match.awayTeamName }}</div>
-          <div class="time">{{ formatKickoff(match.startTime) }}</div>
-        </div>
-        <div class="odds-cells">
+    <div v-else-if="filteredMatches.length" class="match-list">
+      <div v-for="match in filteredMatches" :key="match.id" class="match-card" :class="{ collapsed: collapsed.has(match.id) }">
+        <button type="button" class="match-head" @click="toggleCollapse(match.id)">
+          <span class="m-league">{{ match.leagueName }}</span>
+          <TeamEmblem
+            size="sm"
+            :team-code="match.homeTeamCode"
+            :team-name="match.homeTeamName"
+            :logo-url="match.homeTeamLogoUrl"
+          />
+          <span class="m-teams">{{ match.homeTeamName }} vs {{ match.awayTeamName }}</span>
+          <TeamEmblem
+            size="sm"
+            :team-code="match.awayTeamCode"
+            :team-name="match.awayTeamName"
+            :logo-url="match.awayTeamLogoUrl"
+          />
+          <span class="m-time">{{ formatKickoff(match.startTime) }}</span>
+          <span class="toggle-dot" :class="{ open: !collapsed.has(match.id) }">{{ collapsed.has(match.id) ? '+' : '−' }}</span>
+        </button>
+
+        <div v-show="!collapsed.has(match.id)" class="market-blocks">
           <div
             v-for="col in PARLAY_MARKET_TYPES"
             :key="col.key"
-            class="market-cell"
+            class="market-block"
           >
-            <template
-              v-if="
-                getMarket(match, col.key) &&
-                isParlayEligibleMarket(getMarket(match, col.key)!)
-              "
-            >
-              <button
-                v-for="sel in getMarket(match, col.key)!.selections"
-                :key="sel.id"
-                type="button"
-                class="odd-btn"
-                :class="{ picked: isPicked(sel.id) }"
-                @click="pickSelection(match, getMarket(match, col.key)!, sel)"
+            <span class="block-label">{{ colLabel(col.labelKey) }}</span>
+            <div class="block-btns">
+              <template
+                v-if="
+                  getMarket(match, col.key) &&
+                  isParlayEligibleMarket(getMarket(match, col.key)!)
+                "
               >
-                <span class="odd-label">{{ selLabel(sel) }}</span>
-                <span class="odd-val">{{ formatOdds(sel.odds) }}</span>
-              </button>
-            </template>
-            <span v-else class="market-empty">—</span>
+                <button
+                  v-for="sel in getMarket(match, col.key)!.selections"
+                  :key="sel.id"
+                  type="button"
+                  class="odd-btn"
+                  :class="{ picked: isPicked(sel.id) }"
+                  @click="pickSelection(match, getMarket(match, col.key)!, sel)"
+                >
+                  <span class="odd-label">{{ selLabel(sel) }}</span>
+                  <span class="odd-val">{{ formatOdds(sel.odds) }}</span>
+                </button>
+              </template>
+              <span v-else class="market-empty">—</span>
+            </div>
           </div>
         </div>
       </div>
     </div>
 
     <div v-else class="empty">
-      <span class="empty-icon" aria-hidden="true">📅</span>
+      <span class="empty-icon" aria-hidden="true">&#9917;</span>
       <p>{{ t('bet.parlay_empty') }}</p>
     </div>
 
@@ -267,11 +369,23 @@ const footConfirmLabel = computed(() =>
   padding-bottom: 100px;
 }
 
-.toolbar-filters {
+.toolbar {
   display: flex;
   align-items: center;
   gap: 8px;
-  flex-shrink: 0;
+  margin-bottom: 8px;
+  flex-wrap: wrap;
+}
+
+.filter-select {
+  padding: 7px 10px;
+  border-radius: 6px;
+  background: #141414;
+  border: 1px solid var(--border-gold-soft);
+  color: var(--primary-light);
+  font-size: 12px;
+  font-weight: 700;
+  max-width: 140px;
 }
 
 .parlay-foot-fixed {
@@ -297,12 +411,6 @@ const footConfirmLabel = computed(() =>
   text-align: center;
 }
 
-.foot-hint--info {
-  color: var(--primary-light);
-  text-align: center;
-  font-weight: 600;
-}
-
 .foot-meta {
   color: var(--primary-light);
   font-weight: 600;
@@ -324,102 +432,118 @@ const footConfirmLabel = computed(() =>
   opacity: 0.45;
 }
 
-.toolbar {
-  display: flex;
-  align-items: stretch;
-  gap: 8px;
-  margin-bottom: 8px;
-  overflow-x: auto;
-}
-
-.filter-select {
-  flex-shrink: 0;
-  min-width: 72px;
-  padding: 8px 10px;
-  border-radius: 6px;
-  background: #141414;
-  border: 1px solid var(--border-gold-soft);
-  color: var(--primary-light);
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.col-headers {
-  display: grid;
-  grid-template-columns: repeat(7, minmax(52px, 1fr));
-  gap: 4px;
-  flex: 1;
-  min-width: 360px;
-  align-items: center;
-}
-
-.col-head {
-  font-size: 10px;
-  font-weight: 800;
-  color: var(--text-muted);
-  text-align: center;
-  line-height: 1.25;
-  word-break: keep-all;
-}
-
-.table-wrap {
+.match-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
-.match-row {
-  display: flex;
-  gap: 8px;
-  padding: 10px 8px;
+.match-card {
   background: #141414;
   border: 1px solid #2a2a2a;
-  border-radius: 6px;
-  overflow-x: auto;
+  border-radius: 8px;
+  overflow: hidden;
 }
 
-.match-info {
+.match-card.collapsed {
+  border-color: #222;
+}
+
+.match-head {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px;
+  background: none;
+  border: none;
+  color: inherit;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.match-head:active {
+  background: rgba(255, 255, 255, 0.015);
+}
+
+.toggle-dot {
   flex-shrink: 0;
-  width: 88px;
-  min-width: 88px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #1a1a1a;
+  border: 1px solid #333;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 900;
+  color: #666;
+  line-height: 1;
+  transition: all 0.15s;
 }
 
-.league {
-  font-size: 9px;
+.toggle-dot.open {
+  border-color: var(--border-gold-soft);
+  color: var(--primary-light);
+}
+
+.m-league {
+  font-size: 10px;
   color: var(--text-muted);
-  margin-bottom: 2px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.m-teams {
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--primary-light);
+  flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.teams {
-  font-size: 11px;
-  font-weight: 800;
-  color: var(--primary-light);
-  line-height: 1.25;
-  margin-bottom: 4px;
-}
-
-.time {
-  font-size: 9px;
+.m-time {
+  font-size: 10px;
   color: var(--text-muted);
+  flex-shrink: 0;
 }
 
-.odds-cells {
-  display: grid;
-  grid-template-columns: repeat(7, minmax(52px, 1fr));
-  gap: 4px;
-  flex: 1;
-  min-width: 360px;
-  align-items: stretch;
+.match-head :deep(.team-emblem) {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
 }
 
-.market-cell {
+.market-blocks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 8px 10px 10px;
+}
+
+.market-block {
   display: flex;
   flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.block-label {
+  font-size: 9.5px;
+  font-weight: 800;
+  color: var(--text-muted);
+  letter-spacing: 0.03em;
+  padding: 0 2px;
+}
+
+.block-btns {
+  display: flex;
   gap: 3px;
-  min-height: 36px;
+  flex-wrap: wrap;
 }
 
 .odd-btn {
@@ -428,12 +552,12 @@ const footConfirmLabel = computed(() =>
   align-items: center;
   justify-content: center;
   gap: 1px;
-  padding: 4px 2px;
+  padding: 5px 8px;
   border-radius: 4px;
   background: #0d0d0d;
   border: 1px solid #333;
-  min-height: 32px;
-  width: 100%;
+  min-width: 44px;
+  min-height: 36px;
 }
 
 .odd-btn.picked {
@@ -442,7 +566,7 @@ const footConfirmLabel = computed(() =>
 }
 
 .odd-label {
-  font-size: 9px;
+  font-size: 8.5px;
   font-weight: 700;
   color: var(--text-muted);
   line-height: 1;
@@ -456,13 +580,13 @@ const footConfirmLabel = computed(() =>
 }
 
 .market-empty {
-  flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
+  min-width: 44px;
+  min-height: 36px;
   color: #444;
   font-size: 12px;
-  min-height: 32px;
 }
 
 .state,
diff --git a/apps/player/src/composables/usePullToRefresh.ts b/apps/player/src/composables/usePullToRefresh.ts
new file mode 100644
index 0000000..9a8bb9f
--- /dev/null
+++ b/apps/player/src/composables/usePullToRefresh.ts
@@ -0,0 +1,107 @@
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+
+export interface PullToRefreshOptions {
+  onRefresh: () => Promise<void>;
+  threshold?: number;
+  maxPull?: number;
+}
+
+export function usePullToRefresh(options: PullToRefreshOptions) {
+  const { onRefresh, threshold = 48, maxPull = 128 } = options;
+
+  const pullDistance = ref(0);
+  const spinning = ref(false);
+  const refreshing = ref(false);
+
+  const progress = computed(() => Math.min(pullDistance.value / maxPull, 1));
+
+  let scrollEl: HTMLElement | null = null;
+  let startY = 0;
+  let pulling = false;
+
+  function findScrollEl(): HTMLElement | null {
+    return document.querySelector('.layout > .main') as HTMLElement | null;
+  }
+
+  function isInsideScrollableChild(target: EventTarget | null): boolean {
+    let el = target as HTMLElement | null;
+    while (el && el !== scrollEl) {
+      const style = getComputedStyle(el);
+      const overflowY = style.overflowY;
+      if ((overflowY === 'auto' || overflowY === 'scroll') && el.scrollTop > 2) {
+        return true;
+      }
+      el = el.parentElement;
+    }
+    return false;
+  }
+
+  function handleTouchStart(e: TouchEvent) {
+    scrollEl = findScrollEl();
+    if (!scrollEl || refreshing.value) return;
+    if (scrollEl.scrollTop > 4) return;
+    if (isInsideScrollableChild(e.target)) return;
+    startY = e.touches[0].clientY;
+    pulling = true;
+  }
+
+  function handleTouchMove(e: TouchEvent) {
+    if (!pulling || refreshing.value) return;
+    const delta = e.touches[0].clientY - startY;
+    if (delta <= 0) {
+      pullDistance.value = 0;
+      spinning.value = false;
+      return;
+    }
+    const damped = Math.min(delta * 0.7, maxPull);
+    pullDistance.value = damped;
+    spinning.value = damped >= threshold * 0.5;
+  }
+
+  function handleTouchEnd() {
+    if (!pulling) return;
+    pulling = false;
+    if (pullDistance.value >= threshold && !refreshing.value) {
+      refreshing.value = true;
+      spinning.value = true;
+      pullDistance.value = threshold;
+
+      setTimeout(() => {
+        void onRefresh().finally(() => {
+          refreshing.value = false;
+          spinning.value = false;
+          pullDistance.value = 0;
+        });
+      }, 900);
+    } else {
+      pullDistance.value = 0;
+      spinning.value = false;
+    }
+  }
+
+  let attached = false;
+
+  function attach() {
+    if (attached) return;
+    const el = findScrollEl();
+    if (!el) return;
+    el.addEventListener('touchstart', handleTouchStart, { passive: true });
+    el.addEventListener('touchmove', handleTouchMove, { passive: false });
+    el.addEventListener('touchend', handleTouchEnd);
+    attached = true;
+  }
+
+  function detach() {
+    const el = findScrollEl();
+    if (!el) return;
+    el.removeEventListener('touchstart', handleTouchStart);
+    el.removeEventListener('touchmove', handleTouchMove);
+    el.removeEventListener('touchend', handleTouchEnd);
+    attached = false;
+  }
+
+  onMounted(attach);
+  onUnmounted(detach);
+
+  return { pullDistance, spinning, refreshing, progress };
+}
diff --git a/apps/player/src/layouts/MainLayout.vue b/apps/player/src/layouts/MainLayout.vue
index b9fc6af..476e3bd 100644
--- a/apps/player/src/layouts/MainLayout.vue
+++ b/apps/player/src/layouts/MainLayout.vue
@@ -21,7 +21,19 @@ const { initFromUser } = useAppLocale();
 const route = useRoute();
 const slip = useBetSlipStore();
 
-const showAnnouncement = computed(() => !route.path.startsWith('/profile'));
+const isDetailPage = computed(() => {
+  const p = route.path;
+  return p.startsWith('/match/') || p.startsWith('/bet/') || p.startsWith('/bets/');
+});
+
+const showHeader = computed(() => !isDetailPage.value);
+const showAnnouncement = computed(() => !isDetailPage.value && !route.path.startsWith('/profile'));
+
+const showBottomNav = computed(() => {
+  const p = route.path;
+  if (p === '/' || p === '/bet' || p === '/bets' || p === '/wallet' || p === '/profile') return true;
+  return false;
+});
 const { announcements, load: loadPlayerHome } = usePlayerHome();
 const { loadProfile } = usePlayerProfile();
 
@@ -45,7 +57,7 @@ watch(
 
 <template>
   <div class="layout">
-    <header class="header">
+    <header v-if="showHeader" class="header">
       <img src="/logo.png" alt="TheBet365" class="logo" />
       <div class="header-actions">
         <LocaleSwitcher />
@@ -58,11 +70,11 @@ watch(
       <AnnouncementMarquee :items="announcements" embedded />
     </div>
 
-    <main class="main">
+    <main :class="['main', { 'has-nav': showBottomNav }]">
       <RouterView />
     </main>
 
-    <nav class="bottom-nav" aria-label="Main">
+    <nav v-if="showBottomNav" class="bottom-nav" aria-label="Main">
       <RouterLink to="/" class="nav-item" :class="{ active: route.path === '/' }">
         <BottomNavIcon name="home" />
         <span class="nav-label">{{ t('nav.home') }}</span>
@@ -143,7 +155,11 @@ watch(
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
-  padding: 12px 16px 16px;
+  padding: 12px 16px 0;
+}
+
+.main.has-nav {
+  padding-bottom: 16px;
 }
 .bottom-nav {
   display: flex;
diff --git a/apps/player/src/main.ts b/apps/player/src/main.ts
index d1f448d..5f1e3ef 100644
--- a/apps/player/src/main.ts
+++ b/apps/player/src/main.ts
@@ -11,6 +11,13 @@ const i18n = createI18n({
   fallbackLocale: ['en-US', 'zh-CN'],
   messages: {
     'zh-CN': {
+      common: {
+        pull_refresh: '下拉刷新',
+        release_refresh: '释放刷新',
+        refreshing: '刷新中…',
+        loading_more: '加载更多…',
+        no_more: '没有更多了',
+      },
       nav: { home: '主页', bet: '投注', bet_history: '历史投注', wallet: '账单', profile: '我的' },
       home: {
         hot_matches: '热门赛事',
@@ -25,17 +32,39 @@ const i18n = createI18n({
       },
       history: {
         league_default: '足球',
-        stake: '投注 Stake',
-        return: '回报 Return',
-        est_return: '预计回报 Est. Return',
+        stake: '投注',
+        return: '回报',
+        est_return: '预计回报',
+        odds: '赔率',
+        ft: '全场',
+        ht: '半场',
         parlay_title: '串关 · {n} 场',
         parlay_league: '串关 Parlay',
         empty: '暂无投注记录',
         no_more: '没有更多记录了',
-        status_won: 'WON 赢',
-        status_pending: 'PENDING 待定',
-        status_lost: 'LOST 输',
-        status_push: 'PUSH 走盘',
+        status_won: '赢',
+        status_pending: '待定',
+        status_lost: '输',
+        status_push: '走盘',
+        back: '返回',
+        not_found: '注单不存在',
+        my_pick: '我的选择',
+        legs: '串关明细',
+        summary: '投注摘要',
+        bet_no: '注单号',
+        awaiting_result: '等待比赛结果…',
+        filter_all: '全部',
+        filter_won: '已赢',
+        filter_lost: '已输',
+        filter_pending: '待定',
+        filter_push: '走盘',
+        stats_total: '总投注',
+        stats_won: '赢',
+        stats_lost: '输',
+        stats_pending: '待定',
+        stats_push: '走盘',
+        stats_stake: '总投注额',
+        stats_return: '总回报',
       },
       auth: {
         login: '登录',
@@ -65,6 +94,13 @@ const i18n = createI18n({
         tx_bet_void: '投注撤销',
         tx_cashback: '返水发放',
         tx_resettle: '重新结算',
+        stats_income: '收入',
+        stats_expense: '支出',
+        stats_net: '净额',
+        filter_all: '全部',
+        filter_deposit: '存款',
+        filter_withdraw: '提款',
+        filter_bet: '投注',
       },
       bet: {
         bet_slip: '投注单',
@@ -154,6 +190,7 @@ const i18n = createI18n({
         cs_confirm_total_stake: '总投注额',
         cs_place_success: '下注成功',
         cs_place_failed: '下注失败',
+        kickoff_time: '开赛时间：',
         guide_title: '怎么下注？',
         guide_help_aria: '查看下注说明',
         guide_got_it: '知道了',
@@ -239,6 +276,13 @@ const i18n = createI18n({
       },
     },
     'en-US': {
+      common: {
+        pull_refresh: 'Pull to refresh',
+        release_refresh: 'Release to refresh',
+        refreshing: 'Refreshing…',
+        loading_more: 'Loading more…',
+        no_more: 'No more',
+      },
       nav: { home: 'Home', bet: 'Bet', bet_history: 'History', wallet: 'Wallet', profile: 'Profile' },
       home: {
         hot_matches: 'Hot matches',
@@ -253,20 +297,42 @@ const i18n = createI18n({
       },
       history: {
         league_default: 'Football',
-        stake: 'Stake 投注',
-        return: 'Return 回报',
-        est_return: 'Est. Return 预计回报',
+        stake: 'Stake',
+        return: 'Return',
+        est_return: 'Est. Return',
+        odds: 'Odds',
+        ft: 'FT',
+        ht: 'HT',
         parlay_title: 'Parlay · {n} legs',
-        parlay_league: 'Parlay 串关',
+        parlay_league: 'Parlay',
         empty: 'No bets yet',
         no_more: 'No more bets',
-        status_won: 'WON 赢',
-        status_pending: 'PENDING 待定',
-        status_lost: 'LOST 输',
-        status_push: 'PUSH 走盘',
+        status_won: 'WON',
+        status_pending: 'PENDING',
+        status_lost: 'LOST',
+        status_push: 'PUSH',
+        back: 'Back',
+        not_found: 'Bet not found',
+        my_pick: 'My pick',
+        legs: 'Parlay legs',
+        summary: 'Summary',
+        bet_no: 'Bet ID',
+        awaiting_result: 'Awaiting result…',
+        filter_all: 'All',
+        filter_won: 'Won',
+        filter_lost: 'Lost',
+        filter_pending: 'Pending',
+        filter_push: 'Push',
+        stats_total: 'Total',
+        stats_won: 'Won',
+        stats_lost: 'Lost',
+        stats_pending: 'Pending',
+        stats_push: 'Push',
+        stats_stake: 'Total Stake',
+        stats_return: 'Total Return',
       },
-      auth: {
-        login: 'Login',
+      auth:
+      { login: 'Login',
         logout: 'Log out',
         username: 'Username',
         password: 'Password',
@@ -293,6 +359,13 @@ const i18n = createI18n({
         tx_bet_void: 'Bet Voided',
         tx_cashback: 'Cashback Distribution',
         tx_resettle: 'Resettlement',
+        stats_income: 'Income',
+        stats_expense: 'Expense',
+        stats_net: 'Net',
+        filter_all: 'All',
+        filter_deposit: 'Deposit',
+        filter_withdraw: 'Withdraw',
+        filter_bet: 'Bet',
       },
       bet: {
         bet_slip: 'Bet Slip',
@@ -382,6 +455,7 @@ const i18n = createI18n({
         cs_confirm_total_stake: 'Total stake',
         cs_place_success: 'Bet placed',
         cs_place_failed: 'Bet failed',
+        kickoff_time: 'Kickoff: ',
         guide_title: 'How to bet',
         guide_help_aria: 'Betting help',
         guide_got_it: 'Got it',
@@ -467,6 +541,13 @@ const i18n = createI18n({
       },
     },
     'ms-MY': {
+      common: {
+        pull_refresh: 'Tarik untuk segar',
+        release_refresh: 'Lepas untuk segar',
+        refreshing: 'Menyegarkan…',
+        loading_more: 'Memuat lagi…',
+        no_more: 'Tiada lagi',
+      },
       nav: {
         home: 'Laman Utama',
         bet: 'Pertaruhan',
@@ -487,9 +568,12 @@ const i18n = createI18n({
       },
       history: {
         league_default: 'Bola Sepak',
-        stake: 'Stake',
+        stake: 'Jumlah',
         return: 'Pulangan',
         est_return: 'Anggaran pulangan',
+        odds: 'Odds',
+        ft: 'PT',
+        ht: 'SP',
         parlay_title: 'Berganda · {n} perlawanan',
         parlay_league: 'Berganda',
         empty: 'Tiada rekod pertaruhan',
@@ -498,6 +582,25 @@ const i18n = createI18n({
         status_pending: 'MENUNGGU',
         status_lost: 'KALAH',
         status_push: 'SERI',
+        back: 'Kembali',
+        not_found: 'Pertaruhan tidak dijumpai',
+        my_pick: 'Pilihan saya',
+        legs: 'Butiran berganda',
+        summary: 'Ringkasan',
+        bet_no: 'ID Pertaruhan',
+        awaiting_result: 'Menunggu keputusan…',
+        filter_all: 'Semua',
+        filter_won: 'Menang',
+        filter_lost: 'Kalah',
+        filter_pending: 'Menunggu',
+        filter_push: 'Seri',
+        stats_total: 'Jumlah',
+        stats_won: 'Menang',
+        stats_lost: 'Kalah',
+        stats_pending: 'Menunggu',
+        stats_push: 'Seri',
+        stats_stake: 'Jumlah Taruhan',
+        stats_return: 'Jumlah Pulangan',
       },
       auth: {
         login: 'Log Masuk',
@@ -527,6 +630,13 @@ const i18n = createI18n({
         tx_bet_void: 'Pertaruhan Dibatalkan',
         tx_cashback: 'Pembayaran Cashback',
         tx_resettle: 'Penyelesaian Semula',
+        stats_income: 'Pendapatan',
+        stats_expense: 'Perbelanjaan',
+        stats_net: 'Bersih',
+        filter_all: 'Semua',
+        filter_deposit: 'Deposit',
+        filter_withdraw: 'Pengeluaran',
+        filter_bet: 'Pertaruhan',
       },
       bet: {
         bet_slip: 'Slip Pertaruhan',
@@ -616,6 +726,7 @@ const i18n = createI18n({
         cs_confirm_total_stake: 'Jumlah pertaruhan',
         cs_place_success: 'Pertaruhan berjaya',
         cs_place_failed: 'Pertaruhan gagal',
+        kickoff_time: 'Masa mula: ',
         guide_title: 'Cara pertaruhan',
         guide_help_aria: 'Bantuan pertaruhan',
         guide_got_it: 'Faham',
@@ -704,3 +815,10 @@ const i18n = createI18n({
 });
 
 createApp(App).use(createPinia()).use(router).use(i18n).mount('#app');
+
+const loader = document.getElementById('app-loading');
+if (loader) {
+  loader.style.opacity = '0';
+  loader.style.transition = 'opacity 0.3s ease';
+  setTimeout(() => loader.remove(), 350);
+}
diff --git a/apps/player/src/router/index.ts b/apps/player/src/router/index.ts
index a2782e7..ccc853c 100644
--- a/apps/player/src/router/index.ts
+++ b/apps/player/src/router/index.ts
@@ -15,6 +15,7 @@ const router = createRouter({
         { path: 'football', redirect: '/bet' },
         { path: 'match/:id', component: () => import('../views/MatchDetailView.vue') },
         { path: 'bets', component: () => import('../views/MyBetsView.vue') },
+        { path: 'bets/:betNo', component: () => import('../views/BetDetailView.vue') },
         { path: 'wallet', component: () => import('../views/WalletView.vue') },
         { path: 'profile', component: () => import('../views/ProfileView.vue') },
         { path: 'profile/edit', component: () => import('../views/ProfileEditView.vue') },
diff --git a/apps/player/src/styles.css b/apps/player/src/styles.css
index 9e65bc1..2ecda90 100644
--- a/apps/player/src/styles.css
+++ b/apps/player/src/styles.css
@@ -303,3 +303,16 @@ input:-webkit-autofill:active {
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
+
+.state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  gap: 12px;
+  text-align: center;
+  color: var(--text-muted);
+  font-weight: 600;
+  font-size: 14px;
+}
diff --git a/apps/player/src/views/BetDetailView.vue b/apps/player/src/views/BetDetailView.vue
new file mode 100644
index 0000000..c3022e2
--- /dev/null
+++ b/apps/player/src/views/BetDetailView.vue
@@ -0,0 +1,580 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import api from '../api';
+import { formatMoney } from '../utils/localeDisplay';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import type { BetHistoryItem } from '../components/BetHistoryCard.vue';
+
+const route = useRoute();
+const router = useRouter();
+const { t, locale } = useI18n();
+
+const bet = ref<BetHistoryItem | null>(null);
+const loading = ref(true);
+const notFound = ref(false);
+
+onMounted(async () => {
+  try {
+    const { data } = await api.get(`/player/bets/${route.params.betNo}`);
+    if (!data.data) { notFound.value = true; return; }
+    bet.value = data.data;
+  } catch {
+    notFound.value = true;
+  } finally {
+    loading.value = false;
+  }
+});
+
+const statusKey = computed(() => {
+  const s = (bet.value?.status ?? '').toUpperCase();
+  if (s === 'WON' || s === 'WIN') return 'won';
+  if (s === 'LOST' || s === 'LOSE') return 'lost';
+  if (s === 'PUSH' || s === 'VOID' || s === 'CANCELLED') return 'push';
+  return 'pending';
+});
+
+const statusLabel = computed(() => t(`history.status_${statusKey.value}`));
+
+const placedDateTime = computed(() => {
+  if (!bet.value) return '';
+  const d = new Date(bet.value.placedAt);
+  const date = d.toLocaleDateString(locale.value, { year: 'numeric', month: 'short', day: 'numeric' });
+  const time = d.toLocaleTimeString(locale.value, { hour: '2-digit', minute: '2-digit' });
+  return `${date}  ${time}`;
+});
+
+const returnAmount = computed(() => {
+  if (!bet.value) return '';
+  if (statusKey.value === 'won') return formatMoney(bet.value.actualReturn, locale.value);
+  if (statusKey.value === 'pending') return formatMoney(bet.value.potentialReturn, locale.value);
+  if (statusKey.value === 'lost') return formatMoney(-parseFloat(String(bet.value.stake ?? 0)), locale.value);
+  return formatMoney(bet.value.actualReturn ?? bet.value.potentialReturn, locale.value);
+});
+
+function formatOdds(v: unknown): string {
+  const n = parseFloat(String(v));
+  return isNaN(n) || n <= 0 ? '-' : n.toFixed(2);
+}
+
+const SEL_TRANS: Record<string, Record<string, string>> = {
+  '主胜': { 'en-US': 'Home Win', 'ms-MY': 'Rumah Menang' },
+  '客胜': { 'en-US': 'Away Win', 'ms-MY': 'Tandang Menang' },
+  '和局': { 'en-US': 'Draw', 'ms-MY': 'Seri' },
+  '主': { 'en-US': 'Home', 'ms-MY': 'Rumah' },
+  '客': { 'en-US': 'Away', 'ms-MY': 'Tandang' },
+  '大': { 'en-US': 'Over', 'ms-MY': 'Atas' },
+  '小': { 'en-US': 'Under', 'ms-MY': 'Bawah' },
+  '单': { 'en-US': 'Odd', 'ms-MY': 'Ganjil' },
+  '双': { 'en-US': 'Even', 'ms-MY': 'Genap' },
+  '冠军': { 'en-US': 'Winner', 'ms-MY': 'Juara' },
+};
+
+function translateSel(name: string): string {
+  if (locale.value === 'zh-CN') return name;
+  const exact = SEL_TRANS[name];
+  if (exact) return exact[locale.value] ?? exact['en-US'] ?? name;
+  const sp = name.indexOf(' ');
+  if (sp > 0) {
+    const head = name.slice(0, sp);
+    const m = SEL_TRANS[head];
+    if (m) return (m[locale.value] ?? m['en-US'] ?? head) + name.slice(sp);
+  }
+  return name;
+}
+
+function legStatusKey(rs: string | null | undefined) {
+  if (!rs) return 'pending';
+  const s = rs.toUpperCase();
+  if (s === 'WON' || s === 'WIN') return 'won';
+  if (s === 'LOST' || s === 'LOSE') return 'lost';
+  return 'push';
+}
+
+const matchTitle = computed(() => {
+  if (!bet.value) return '';
+  if (bet.value.isParlay) {
+    const n = bet.value.legCount ?? bet.value.legs?.length ?? 0;
+    return t('history.parlay_title', { n });
+  }
+  return bet.value.matchTitle;
+});
+
+const myPick = computed(() => {
+  if (!bet.value || bet.value.isParlay) return '';
+  const raw = bet.value.pickLabel ?? '';
+  if (locale.value === 'zh-CN' || !raw) return raw;
+  const ci = raw.indexOf(': ');
+  if (ci < 0) return raw;
+  return raw.slice(0, ci + 2) + translateSel(raw.slice(ci + 2));
+});
+</script>
+
+<template>
+  <div class="detail-page">
+    <!-- back bar -->
+    <div class="top-bar">
+      <button class="back-btn" @click="router.back()">‹ {{ t('history.back') }}</button>
+    </div>
+
+    <div v-if="loading" class="state">
+      <GoldSpinner :size="36" />
+    </div>
+    <div v-else-if="notFound || !bet" class="state">{{ t('history.not_found') }}</div>
+
+    <template v-else>
+      <!-- status hero -->
+      <div class="hero" :class="statusKey">
+        <span class="hero-status">{{ statusLabel }}</span>
+        <span class="hero-return">{{ returnAmount }}</span>
+        <span class="hero-return-label">
+          {{ statusKey === 'pending' ? t('history.est_return') : t('history.return') }}
+        </span>
+      </div>
+
+      <!-- match / parlay title -->
+      <section class="section">
+        <div class="section-head">
+          <span class="league-tag">
+            {{ bet.isParlay ? t('history.parlay_league') : (bet.leagueName || t('history.league_default')) }}
+          </span>
+          <span class="placed-time">{{ placedDateTime }}</span>
+        </div>
+        <div class="match-name">{{ matchTitle }}</div>
+
+        <!-- single bet: score comparison -->
+        <div v-if="!bet.isParlay" class="score-block">
+          <!-- my pick row -->
+          <div class="row-label-val">
+            <span class="row-label">{{ t('history.my_pick') }}</span>
+            <span class="row-val pick">{{ myPick }}</span>
+          </div>
+          <!-- scores -->
+          <div v-if="bet.matchScore?.ft || bet.matchScore?.ht" class="score-chips">
+            <div v-if="bet.matchScore.ft" class="score-item">
+              <span class="score-period">{{ t('history.ft') }}</span>
+              <span class="score-value">{{ bet.matchScore.ft }}</span>
+            </div>
+            <div v-if="bet.matchScore.ht" class="score-item">
+              <span class="score-period">{{ t('history.ht') }}</span>
+              <span class="score-value muted">{{ bet.matchScore.ht }}</span>
+            </div>
+          </div>
+          <div v-else-if="statusKey === 'pending'" class="no-score">{{ t('history.awaiting_result') }}</div>
+        </div>
+      </section>
+
+      <!-- parlay legs -->
+      <section v-if="bet.isParlay && bet.legs?.length" class="section">
+        <div class="section-title">{{ t('history.legs') }}</div>
+        <div class="legs-list">
+          <div v-for="(leg, i) in bet.legs" :key="i" class="leg-row" :class="legStatusKey(leg.resultStatus)">
+            <div class="leg-left">
+              <span class="leg-num" :class="legStatusKey(leg.resultStatus)">{{ i + 1 }}</span>
+              <div class="leg-body">
+                <span class="leg-match">{{ leg.matchTitle }}</span>
+                <span class="leg-pick-line">
+                  {{ leg.marketLabel }}: {{ translateSel(leg.selectionName) }}
+                </span>
+                <div v-if="leg.score?.ft || leg.score?.ht" class="leg-scores">
+                  <span v-if="leg.score.ft">{{ t('history.ft') }} {{ leg.score.ft }}</span>
+                  <span v-if="leg.score.ht" class="muted-score">{{ t('history.ht') }} {{ leg.score.ht }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="leg-right">
+              <span class="leg-odds-val">{{ formatOdds(leg.odds) }}</span>
+              <span v-if="leg.resultStatus" class="leg-result-badge" :class="legStatusKey(leg.resultStatus)">
+                {{ t(`history.status_${legStatusKey(leg.resultStatus)}`) }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- bet summary -->
+      <section class="section">
+        <div class="section-title">{{ t('history.summary') }}</div>
+        <div class="summary-rows">
+          <div class="sum-row">
+            <span>{{ t('history.stake') }}</span>
+            <span>{{ formatMoney(bet.stake, locale) }}</span>
+          </div>
+          <div v-if="bet.totalOdds" class="sum-row">
+            <span>{{ t('history.odds') }}</span>
+            <span class="odds-val">{{ formatOdds(bet.totalOdds) }}</span>
+          </div>
+          <div class="sum-row">
+            <span>{{ statusKey === 'pending' ? t('history.est_return') : t('history.return') }}</span>
+            <span :class="{ 'amt-won': statusKey === 'won', 'amt-pending': statusKey === 'pending', 'amt-lost': statusKey === 'lost' }">
+              {{ returnAmount }}
+            </span>
+          </div>
+          <div class="sum-row muted">
+            <span>{{ t('history.bet_no') }}</span>
+            <span class="bet-no-val">{{ bet.betNo }}</span>
+          </div>
+        </div>
+      </section>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.detail-page {
+  padding-bottom: 32px;
+}
+
+.top-bar {
+  margin-bottom: 4px;
+}
+
+.back-btn {
+  background: none;
+  border: none;
+  color: var(--primary-light, #d4af37);
+  font-size: 15px;
+  font-weight: 700;
+  padding: 4px 0 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.state {
+  text-align: center;
+  padding: 60px 20px;
+  color: #666;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+/* ── hero ── */
+.hero {
+  border-radius: 14px;
+  padding: 20px 20px 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 12px;
+  text-align: center;
+}
+
+.hero.won    { background: linear-gradient(135deg, rgba(61,184,101,0.15), rgba(61,184,101,0.06)); border: 1px solid rgba(61,184,101,0.25); }
+.hero.lost   { background: linear-gradient(135deg, rgba(224,80,80,0.12), rgba(224,80,80,0.05)); border: 1px solid rgba(224,80,80,0.2); }
+.hero.pending { background: linear-gradient(135deg, rgba(232,200,74,0.1), rgba(232,200,74,0.04)); border: 1px solid rgba(232,200,74,0.2); }
+.hero.push   { background: #181818; border: 1px solid #2a2a2a; }
+
+.hero-status {
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  opacity: 0.7;
+}
+.hero.won    .hero-status  { color: #3db865; }
+.hero.lost   .hero-status  { color: #e05050; }
+.hero.pending .hero-status { color: #e8c84a; }
+.hero.push   .hero-status  { color: #888; }
+
+.hero-return {
+  font-size: 36px;
+  font-weight: 900;
+  letter-spacing: -0.01em;
+  line-height: 1.1;
+}
+.hero.won    .hero-return  { color: #3db865; text-shadow: 0 0 24px rgba(61,184,101,0.3); }
+.hero.lost   .hero-return  { color: #e05050; }
+.hero.pending .hero-return { color: #e8c84a; }
+.hero.push   .hero-return  { color: #777; }
+
+.hero-return-label {
+  font-size: 10.5px;
+  color: #555;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+/* ── sections ── */
+.section {
+  background: #141414;
+  border: 1px solid #222;
+  border-radius: 12px;
+  padding: 14px 16px;
+  margin-bottom: 10px;
+}
+
+.section-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.league-tag {
+  font-size: 11px;
+  color: #888;
+  font-weight: 700;
+}
+
+.placed-time {
+  font-size: 11px;
+  color: #555;
+  font-weight: 600;
+}
+
+.match-name {
+  font-size: 17px;
+  font-weight: 900;
+  color: #f0f0f0;
+  line-height: 1.3;
+  margin-bottom: 10px;
+}
+
+/* score block */
+.score-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.row-label-val {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.row-label {
+  font-size: 11px;
+  color: #666;
+  font-weight: 600;
+}
+
+.row-val {
+  font-size: 13px;
+  font-weight: 700;
+  color: #c8c8c8;
+}
+
+.row-val.pick {
+  color: #d4af37;
+}
+
+.score-chips {
+  display: flex;
+  gap: 8px;
+}
+
+.score-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  background: #1e1e1e;
+  border: 1px solid #2a2a2a;
+  border-radius: 7px;
+  padding: 5px 10px;
+}
+
+.score-period {
+  font-size: 10px;
+  color: #666;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.score-value {
+  font-size: 16px;
+  font-weight: 900;
+  color: #e8e8e8;
+}
+
+.score-value.muted {
+  color: #666;
+  font-size: 13px;
+}
+
+.no-score {
+  font-size: 11.5px;
+  color: #555;
+  font-style: italic;
+}
+
+/* section title */
+.section-title {
+  font-size: 10.5px;
+  color: #555;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-bottom: 10px;
+}
+
+/* parlay legs */
+.legs-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.leg-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 10px;
+  background: #1a1a1a;
+  border: 1px solid #252525;
+  border-radius: 9px;
+  padding: 10px 12px;
+}
+
+.leg-row.won  { border-color: rgba(61,184,101,0.2); }
+.leg-row.lost { border-color: rgba(224,80,80,0.18); }
+
+.leg-left {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.leg-num {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #2a2a2a;
+  color: #666;
+  font-size: 10px;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 1px;
+}
+
+.leg-num.won  { background: rgba(61,184,101,0.18); color: #3db865; }
+.leg-num.lost { background: rgba(224,80,80,0.18); color: #e05050; }
+
+.leg-body {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.leg-match {
+  font-size: 12.5px;
+  font-weight: 800;
+  color: #d0d0d0;
+}
+
+.leg-pick-line {
+  font-size: 11.5px;
+  color: #888;
+  font-weight: 600;
+}
+
+.leg-scores {
+  display: flex;
+  gap: 8px;
+  margin-top: 2px;
+}
+
+.leg-scores span {
+  font-size: 11px;
+  font-weight: 700;
+  color: #c8c8c8;
+}
+
+.leg-scores .muted-score {
+  color: #555;
+}
+
+.leg-right {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+
+.leg-odds-val {
+  font-size: 15px;
+  font-weight: 900;
+  color: #b8a04a;
+}
+
+.leg-result-badge {
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 2px 6px;
+  border-radius: 10px;
+}
+
+.leg-result-badge.won   { color: #3db865; background: rgba(61,184,101,0.12); }
+.leg-result-badge.lost  { color: #e05050; background: rgba(224,80,80,0.1); }
+.leg-result-badge.push  { color: #888; background: #222; }
+.leg-result-badge.pending { color: #666; background: #1e1e1e; }
+
+/* summary */
+.summary-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.sum-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #1c1c1c;
+  font-size: 13px;
+  color: #b0b0b0;
+  font-weight: 600;
+}
+
+.sum-row:last-child {
+  border-bottom: none;
+}
+
+.sum-row.muted {
+  color: #444;
+  font-size: 11px;
+}
+
+.odds-val {
+  color: #b8a04a;
+  font-weight: 800;
+}
+
+.amt-won {
+  color: #3db865;
+  font-weight: 900;
+  font-size: 15px;
+}
+
+.amt-pending {
+  color: #e8c84a;
+  font-weight: 900;
+}
+
+.amt-lost {
+  color: #e05050;
+  font-weight: 900;
+  font-size: 15px;
+}
+
+.bet-no-val {
+  font-family: monospace;
+  letter-spacing: 0.04em;
+}
+</style>
diff --git a/apps/player/src/views/FootballView.vue b/apps/player/src/views/FootballView.vue
index 2c88efb..7221049 100644
--- a/apps/player/src/views/FootballView.vue
+++ b/apps/player/src/views/FootballView.vue
@@ -9,6 +9,8 @@ import OutrightPanel from '../components/outright/OutrightPanel.vue';
 import ParlayPanel from '../components/parlay/ParlayPanel.vue';
 import emptyMatchesImg from '../assets/images/empty-matches.svg';
 import { useOnLocaleChange } from '../composables/useOnLocaleChange';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
 
 type MainTab = 'matches' | 'outright' | 'parlay';
 type TimeTab = 'today' | 'early';
@@ -58,6 +60,15 @@ async function loadMatches() {
 
 useOnLocaleChange(loadMatches);
 
+const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
+  onRefresh: async () => { await loadMatches(); },
+});
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
+});
+
 function dayStart(d: Date) {
   const x = new Date(d);
   x.setHours(0, 0, 0, 0);
@@ -140,6 +151,13 @@ function goMatch(id: string) {
 
 <template>
   <div class="bet-page">
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
     <div class="main-tabs">
       <button
         type="button"
@@ -171,7 +189,7 @@ function goMatch(id: string) {
       </button>
     </div>
 
-    <template v-if="mainTab === 'matches'">
+    <div v-show="mainTab === 'matches'">
       <div class="time-tabs">
         <button
           type="button"
@@ -191,8 +209,9 @@ function goMatch(id: string) {
         </button>
       </div>
 
-      <div v-if="loading" class="state">{{ t('bet.loading') }}</div>
-
+      <div v-if="loading" class="state">
+        <GoldSpinner :size="36" />
+      </div>
       <div v-else-if="leagueGroups.length" class="league-list">
         <LeagueAccordionItem
           v-for="group in leagueGroups"
@@ -211,17 +230,25 @@ function goMatch(id: string) {
         <img :src="emptyMatchesImg" alt="" class="empty-icon" />
         <p>{{ t('bet.no_matches') }}</p>
       </div>
-    </template>
+    </div>
 
-    <div v-else-if="mainTab === 'outright'" class="outright-tab">
+    <div v-show="mainTab === 'outright'" class="outright-tab">
       <OutrightPanel />
     </div>
 
-    <ParlayPanel v-else-if="mainTab === 'parlay'" />
+    <ParlayPanel v-show="mainTab === 'parlay'" />
   </div>
 </template>
 
 <style scoped>
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
 .bet-page {
   margin: 0 -16px;
   padding-bottom: 8px;
diff --git a/apps/player/src/views/HomeView.vue b/apps/player/src/views/HomeView.vue
index c6d5169..62ae058 100644
--- a/apps/player/src/views/HomeView.vue
+++ b/apps/player/src/views/HomeView.vue
@@ -7,11 +7,22 @@ import cardBg from '../assets/images/卡片.png';
 import BannerCarousel from '../components/BannerCarousel.vue';
 import { usePlayerHome } from '../composables/usePlayerHome';
 import TeamEmblem from '../components/TeamEmblem.vue';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
 
 const matchCardBg = `url(${cardBg})`;
 const { t, locale } = useI18n();
 const router = useRouter();
-const { banners, hotMatches, loading } = usePlayerHome();
+const { banners, hotMatches, loading, load } = usePlayerHome();
+
+const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
+  onRefresh: async () => { await load(); },
+});
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
+});
 
 function goMatch(id: string) {
   router.push(`/match/${id}`);
@@ -32,6 +43,13 @@ function formatKickoff(startTime: string) {
 
 <template>
   <div>
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
     <BannerCarousel :banners="banners" />
 
     <h2 class="section-title">{{ t('home.hot_matches') }}</h2>
@@ -94,6 +112,14 @@ function formatKickoff(startTime: string) {
 </template>
 
 <style scoped>
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
 .match-card {
   position: relative;
   isolation: isolate;
diff --git a/apps/player/src/views/MatchDetailView.vue b/apps/player/src/views/MatchDetailView.vue
index 1bdd586..407d395 100644
--- a/apps/player/src/views/MatchDetailView.vue
+++ b/apps/player/src/views/MatchDetailView.vue
@@ -16,6 +16,8 @@ import CorrectScoreConfirmModal, {
 import { isCorrectScoreMarket, parseScoreCode } from '../utils/correctScoreLayout';
 import { useOnLocaleChange } from '../composables/useOnLocaleChange';
 import vsImg from '../assets/images/vs.png';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import BetSuccessOverlay from '../components/BetSuccessOverlay.vue';
 import cardBg from '../assets/images/卡片.png';
 
 const heroCardBg = `url(${cardBg})`;
@@ -65,6 +67,7 @@ const expandedKey = ref<string | null>(null);
 const correctScoreStakes = ref<Record<string, number>>({});
 const placingCs = ref(false);
 const csMessage = ref('');
+const showCsSuccess = ref(false);
 const csConfirmOpen = ref(false);
 const csConfirmMarketType = ref<string | null>(null);
 const marketsByType = computed(() => {
@@ -188,6 +191,7 @@ async function placeCorrectScoreBets(marketType: string) {
     const next = { ...correctScoreStakes.value };
     for (const sel of entries) delete next[sel.id];
     correctScoreStakes.value = next;
+    showCsSuccess.value = true;
   } catch (e: unknown) {
     csMessage.value =
       (e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
@@ -270,11 +274,11 @@ function hasSlipPickForMarket(marketType: string) {
       </div>
     </header>
 
-    <div v-if="loading" class="state">{{ t('bet.loading') }}</div>
-
+    <div v-if="loading" class="state">
+      <GoldSpinner :size="36" />
+    </div>
     <template v-else-if="match">
       <section class="match-hero">
-        <p class="kickoff">{{ kickoff }}</p>
         <div class="hero-teams">
           <!-- home -->
           <div class="hero-team">
@@ -325,6 +329,8 @@ function hasSlipPickForMarket(marketType: string) {
             <span class="hero-name">{{ match.awayTeamName }}</span>
           </div>
         </div>
+
+        <p class="kickoff">{{ t('bet.kickoff_time') }}{{ kickoff }}</p>
       </section>
 
       <section class="markets-section">
@@ -391,6 +397,8 @@ function hasSlipPickForMarket(marketType: string) {
       </section>
     </template>
   </div>
+
+  <BetSuccessOverlay :show="showCsSuccess" @done="showCsSuccess = false" />
 </template>
 
 <style scoped>
@@ -405,6 +413,12 @@ function hasSlipPickForMarket(marketType: string) {
   justify-content: space-between;
   padding: 4px 12px 8px;
   gap: 8px;
+  position: sticky;
+  top: -12px;
+  z-index: 50;
+  margin-top: -12px;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(4px);
 }
 
 .toolbar-title {
@@ -467,8 +481,9 @@ function hasSlipPickForMarket(marketType: string) {
   z-index: 1;
   font-size: 11px;
   color: var(--text-muted);
-  text-align: center;
-  margin-bottom: 14px;
+  text-align: left;
+  margin-top: 10px;
+  padding-left: 2px;
 }
 
 .hero-teams {
@@ -615,13 +630,32 @@ function hasSlipPickForMarket(marketType: string) {
 }
 
 .market-list {
-  border-radius: 6px;
-  overflow: hidden;
-  background: #111;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 4px 0;
 }
 
-.market-group + .market-group {
-  border-top: 1px solid #252525;
+.market-group {
+  border-radius: 8px;
+  border: 1px solid #252525;
+  background: linear-gradient(180deg, #1a1a1a 0%, #151515 100%);
+  overflow: hidden;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.market-group.open {
+  border-color: rgba(212, 175, 55, 0.25);
+  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.08);
+}
+
+.market-group :deep(.row) {
+  border-radius: 8px;
+}
+
+.market-group.open :deep(.row) {
+  border-radius: 0;
 }
 
 .market-foot-btn {
diff --git a/apps/player/src/views/MyBetsView.vue b/apps/player/src/views/MyBetsView.vue
index 28ecbde..4379e2a 100644
--- a/apps/player/src/views/MyBetsView.vue
+++ b/apps/player/src/views/MyBetsView.vue
@@ -3,7 +3,10 @@ import { ref, onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import api from '../api';
 import BetHistoryCard, { type BetHistoryItem } from '../components/BetHistoryCard.vue';
+import BetStatsPanel from '../components/BetStatsPanel.vue';
+import GoldSpinner from '../components/GoldSpinner.vue';
 import { useOnLocaleChange } from '../composables/useOnLocaleChange';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
 
 const { t } = useI18n();
 
@@ -13,15 +16,26 @@ const page = ref(1);
 const loading = ref(false);
 const initialLoading = ref(true);
 const hasMore = ref(true);
+const statusFilter = ref('');
 
 const sentinel = ref<HTMLElement | null>(null);
 let observer: IntersectionObserver | null = null;
 
+const FILTERS = [
+  { key: '', label: 'history.filter_all' },
+  { key: 'WON', label: 'history.filter_won' },
+  { key: 'LOST', label: 'history.filter_lost' },
+  { key: 'PENDING', label: 'history.filter_pending' },
+  { key: 'PUSH', label: 'history.filter_push' },
+];
+
 async function loadPage(p: number) {
   if (loading.value) return;
   loading.value = true;
   try {
-    const { data } = await api.get('/player/bets', { params: { page: p } });
+    const params: Record<string, unknown> = { page: p };
+    if (statusFilter.value) params.status = statusFilter.value;
+    const { data } = await api.get('/player/bets', { params });
     const result = data.data ?? { items: [], total: 0, pageSize: 20 };
     total.value = result.total ?? 0;
     const pageSize = result.pageSize ?? 20;
@@ -38,7 +52,7 @@ async function loadPage(p: number) {
   }
 }
 
-function reset() {
+async function reset() {
   items.value = [];
   total.value = 0;
   page.value = 1;
@@ -47,8 +61,18 @@ function reset() {
   loadPage(1);
 }
 
+function changeFilter(key: string) {
+  if (statusFilter.value === key) return;
+  statusFilter.value = key;
+  reset();
+}
+
 useOnLocaleChange(reset);
 
+const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
+  onRefresh: async () => { await loadPage(1); },
+});
+
 onMounted(() => {
   observer = new IntersectionObserver(
     (entries) => {
@@ -56,7 +80,7 @@ onMounted(() => {
         loadPage(page.value + 1);
       }
     },
-    { rootMargin: '120px' },
+    { rootMargin: '200px' },
   );
   if (sentinel.value) observer.observe(sentinel.value);
 });
@@ -64,28 +88,59 @@ onMounted(() => {
 onUnmounted(() => {
   observer?.disconnect();
 });
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
+});
 </script>
 
 <template>
   <div class="history-page">
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
 
-    <div v-if="initialLoading" class="state">{{ t('bet.loading') }}</div>
+    <div v-if="initialLoading" class="state">
+      <GoldSpinner :size="36" />
+      <span class="loading-text">{{ t('bet.loading') }}</span>
+    </div>
 
-    <template v-else-if="items.length">
-      <BetHistoryCard v-for="bet in items" :key="bet.betNo" :bet="bet" />
+    <template v-else>
+      <BetStatsPanel :items="items" />
 
-      <div ref="sentinel" class="sentinel" />
-
-      <div v-if="loading" class="load-more-spinner">
-        <span class="spinner" />
+      <div class="filter-tabs">
+        <button
+          v-for="f in FILTERS"
+          :key="f.key"
+          type="button"
+          class="filter-tab"
+          :class="{ active: statusFilter === f.key }"
+          @click="changeFilter(f.key)"
+        >
+          {{ t(f.label) }}
+        </button>
       </div>
 
-      <div v-else-if="!hasMore && items.length > 0" class="end-hint">
-        {{ t('history.no_more') }}
-      </div>
+      <template v-if="items.length">
+        <BetHistoryCard v-for="bet in items" :key="bet.betNo" :bet="bet" />
+
+        <div ref="sentinel" class="sentinel" />
+
+        <div v-if="loading" class="load-more-spinner">
+          <GoldSpinner :size="24" />
+        </div>
+
+        <div v-else-if="!hasMore && items.length > 0" class="end-hint">
+          {{ t('common.no_more') }}
+        </div>
+      </template>
+
+      <div v-else class="state">{{ t('history.empty') }}</div>
     </template>
-
-    <div v-else class="state">{{ t('history.empty') }}</div>
   </div>
 </template>
 
@@ -94,7 +149,48 @@ onUnmounted(() => {
   padding-bottom: 24px;
 }
 
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
+.filter-tabs {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 12px;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.filter-tabs::-webkit-scrollbar { display: none; }
+
+.filter-tab {
+  flex-shrink: 0;
+  padding: 7px 14px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-muted);
+  background: #141414;
+  border: 1px solid #2a2a2a;
+  transition: all 0.2s;
+}
+
+.filter-tab.active {
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.1);
+  border-color: var(--border-gold-soft);
+}
+
 .state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
   text-align: center;
   color: var(--text-muted);
   padding: 56px 20px;
@@ -102,6 +198,10 @@ onUnmounted(() => {
   font-size: 14px;
 }
 
+.loading-text {
+  font-size: 13px;
+}
+
 .sentinel {
   height: 1px;
 }
@@ -112,20 +212,6 @@ onUnmounted(() => {
   padding: 20px 0 8px;
 }
 
-.spinner {
-  display: inline-block;
-  width: 22px;
-  height: 22px;
-  border: 3px solid #2a2a2a;
-  border-top-color: var(--primary-light);
-  border-radius: 50%;
-  animation: spin 0.7s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
 .end-hint {
   text-align: center;
   font-size: 12px;
diff --git a/apps/player/src/views/ProfileView.vue b/apps/player/src/views/ProfileView.vue
index 7581678..41958a8 100644
--- a/apps/player/src/views/ProfileView.vue
+++ b/apps/player/src/views/ProfileView.vue
@@ -7,6 +7,8 @@ import { formatMoney } from '../utils/localeDisplay';
 import LocaleFlag from '../components/LocaleFlag.vue';
 import { useAuthStore } from '../stores/auth';
 import { useAppLocale } from '../composables/useAppLocale';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
 import walletBg from '../assets/images/钱包.png';
 
 const { t, locale } = useI18n();
@@ -54,11 +56,22 @@ const displayedBalance = computed(() =>
     : formatMoney(profile.value?.wallet?.availableBalance, locale.value),
 );
 
-onMounted(async () => {
+async function fetchProfile() {
   const { data } = await api.get('/player/profile');
   profile.value = data.data;
   initFromUser(data.data?.locale);
   runCountUp(amountValue(data.data?.wallet?.availableBalance));
+}
+
+onMounted(fetchProfile);
+
+const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
+  onRefresh: async () => { await fetchProfile(); },
+});
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
 });
 
 async function changeLocale(code: string) {
@@ -73,6 +86,13 @@ function logout() {
 
 <template>
   <div class="profile-page">
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
     <div class="wallet-banner">
       <img class="wallet-banner-img" :src="walletBg" alt="" />
       <img src="/logo.png" alt="TheBet365" class="wallet-card-logo" />
@@ -149,6 +169,14 @@ function logout() {
 </template>
 
 <style scoped>
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
 .profile-page {
   padding: 8px 0 12px;
 }
diff --git a/apps/player/src/views/WalletView.vue b/apps/player/src/views/WalletView.vue
index 8ccc1aa..835a15e 100644
--- a/apps/player/src/views/WalletView.vue
+++ b/apps/player/src/views/WalletView.vue
@@ -1,13 +1,31 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import api from '../api';
 import { formatMoney } from '../utils/localeDisplay';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import WalletStatsPanel from '../components/WalletStatsPanel.vue';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
 
 const { t, locale } = useI18n();
-const transactions = ref<
-  Array<{ transactionType: string; amount: string; createdAt: string; transactionId?: string }>
->([]);
+
+type Transaction = {
+  transactionType: string;
+  amount: string;
+  createdAt: string;
+  transactionId?: string;
+};
+
+const items = ref<Transaction[]>([]);
+const total = ref(0);
+const page = ref(1);
+const loading = ref(false);
+const initialLoading = ref(true);
+const hasMore = ref(true);
+const typeFilter = ref('');
+
+const sentinel = ref<HTMLElement | null>(null);
+let observer: IntersectionObserver | null = null;
 
 const TX_KEY_MAP: Record<string, string> = {
   MANUAL_DEPOSIT: 'wallet.tx_deposit',
@@ -29,6 +47,13 @@ const TX_KEY_MAP: Record<string, string> = {
   WITHDRAW: 'wallet.tx_withdraw',
 };
 
+const FILTERS = [
+  { key: '', label: 'wallet.filter_all' },
+  { key: 'deposit', label: 'wallet.filter_deposit' },
+  { key: 'withdraw', label: 'wallet.filter_withdraw' },
+  { key: 'bet', label: 'wallet.filter_bet' },
+];
+
 function txLabel(type: string): string {
   const key = TX_KEY_MAP[type.toUpperCase()];
   if (key) {
@@ -38,46 +63,252 @@ function txLabel(type: string): string {
   return type;
 }
 
-onMounted(async () => {
-  const { data } = await api.get('/player/wallet/transactions');
-  transactions.value = data.data.items ?? [];
+function isDepositType(type: string): boolean {
+  const t = type.toUpperCase();
+  return t.includes('DEPOSIT') || t === 'CASHBACK_DEPOSIT';
+}
+
+function isWithdrawType(type: string): boolean {
+  const t = type.toUpperCase();
+  return t.includes('WITHDRAW');
+}
+
+function isBetType(type: string): boolean {
+  const t = type.toUpperCase();
+  return t.startsWith('BET_');
+}
+
+function matchesFilter(tx: Transaction): boolean {
+  if (!typeFilter.value) return true;
+  if (typeFilter.value === 'deposit') return isDepositType(tx.transactionType) || tx.transactionType === 'MANUAL_ADJUST';
+  if (typeFilter.value === 'withdraw') return isWithdrawType(tx.transactionType);
+  if (typeFilter.value === 'bet') return isBetType(tx.transactionType);
+  return true;
+}
+
+async function loadPage(p: number) {
+  if (loading.value) return;
+  loading.value = true;
+  try {
+    const { data } = await api.get('/player/wallet/transactions', { params: { page: p } });
+    const result = data.data ?? { items: [], total: 0, pageSize: 20 };
+    total.value = result.total ?? 0;
+    const pageSize = result.pageSize ?? 20;
+    const newItems = (result.items ?? []).filter(matchesFilter);
+    if (p === 1) {
+      items.value = newItems;
+    } else {
+      items.value = [...items.value, ...newItems];
+    }
+    hasMore.value = (result.items?.length ?? 0) >= pageSize;
+    page.value = p;
+  } finally {
+    loading.value = false;
+    initialLoading.value = false;
+  }
+}
+
+async function reset() {
+  items.value = [];
+  total.value = 0;
+  page.value = 1;
+  hasMore.value = true;
+  initialLoading.value = true;
+  loadPage(1);
+}
+
+function changeFilter(key: string) {
+  if (typeFilter.value === key) return;
+  typeFilter.value = key;
+  reset();
+}
+
+const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
+  onRefresh: async () => { await loadPage(1); },
+});
+
+onMounted(() => {
+  loadPage(1);
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0].isIntersecting && hasMore.value && !loading.value) {
+        loadPage(page.value + 1);
+      }
+    },
+    { rootMargin: '200px' },
+  );
+  if (sentinel.value) observer.observe(sentinel.value);
+});
+
+onUnmounted(() => {
+  observer?.disconnect();
+});
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
 });
 </script>
 
 <template>
-  <div>
-    <div v-if="transactions.length" class="card">
-      <div
-        v-for="tx in transactions"
-        :key="tx.transactionId ?? tx.createdAt"
-        class="tx-row"
-      >
-        <span class="tx-type">{{ txLabel(tx.transactionType) }}</span>
-        <span :class="parseFloat(tx.amount) >= 0 ? 'pos' : 'neg'">
-          {{ formatMoney(tx.amount, locale) }}
-        </span>
-        <span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
-      </div>
+  <div class="wallet-page">
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
     </div>
-    <div v-else class="empty">{{ t('wallet.no_records') }}</div>
+
+    <div v-if="initialLoading" class="state">
+      <GoldSpinner :size="36" />
+      <span class="loading-text">{{ t('bet.loading') }}</span>
+    </div>
+
+    <template v-else>
+      <WalletStatsPanel :items="items" />
+
+      <div class="filter-tabs">
+        <button
+          v-for="f in FILTERS"
+          :key="f.key"
+          type="button"
+          class="filter-tab"
+          :class="{ active: typeFilter === f.key }"
+          @click="changeFilter(f.key)"
+        >
+          {{ t(f.label) }}
+        </button>
+      </div>
+
+      <div v-if="items.length" class="tx-list">
+        <div
+          v-for="tx in items"
+          :key="tx.transactionId ?? tx.createdAt + Math.random()"
+          class="tx-row"
+        >
+          <span class="tx-type">{{ txLabel(tx.transactionType) }}</span>
+          <span :class="parseFloat(tx.amount) >= 0 ? 'pos' : 'neg'">
+            {{ formatMoney(tx.amount, locale) }}
+          </span>
+          <span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
+        </div>
+      </div>
+
+      <div ref="sentinel" class="sentinel" />
+
+      <div v-if="loading" class="load-more-spinner">
+        <GoldSpinner :size="24" />
+      </div>
+
+      <div v-else-if="!hasMore && items.length > 0" class="end-hint">
+        {{ t('common.no_more') }}
+      </div>
+
+      <div v-if="!items.length && !initialLoading" class="empty">
+        {{ t('wallet.no_records') }}
+      </div>
+    </template>
   </div>
 </template>
 
 <style scoped>
+.wallet-page {
+  padding-bottom: 24px;
+}
+
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
+.filter-tabs {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 12px;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.filter-tabs::-webkit-scrollbar { display: none; }
+
+.filter-tab {
+  flex-shrink: 0;
+  padding: 7px 14px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-muted);
+  background: #141414;
+  border: 1px solid #2a2a2a;
+  transition: all 0.2s;
+}
+
+.filter-tab.active {
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.1);
+  border-color: var(--border-gold-soft);
+}
+
+.state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+  color: var(--text-muted);
+  padding: 56px 20px;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.loading-text {
+  font-size: 13px;
+}
+
+.tx-list {
+  margin-bottom: 0;
+}
+
 .tx-row {
   display: flex;
   justify-content: space-between;
   font-size: 14px;
-  padding: 12px 0;
+  padding: 12px 16px;
   border-bottom: 1px solid var(--border);
   flex-wrap: wrap;
 }
+
 .tx-row:last-child {
   border-bottom: none;
 }
+
 .tx-type { font-weight: 700; color: var(--text); }
 .pos { color: var(--primary-light); font-weight: 800; font-size: 15px; }
 .neg { color: var(--danger); font-weight: 700; }
 .tx-time { width: 100%; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
+
+.sentinel {
+  height: 1px;
+}
+
+.load-more-spinner {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0 8px;
+}
+
+.end-hint {
+  text-align: center;
+  font-size: 12px;
+  color: #555;
+  font-weight: 600;
+  padding: 16px 0 4px;
+  letter-spacing: 0.03em;
+}
+
 .empty { text-align: center; color: var(--text-muted); padding: 40px 16px; font-weight: 600; }
 </style>