feat(player): theme-3 移动端/PC 双端拆分与桌面投注工作台

新增 DesktopShell 及桌面端首页、赛事、钱包、记录等页面，原 H5 视图迁移至 Mobile* 并由路由 wrapper 按视口切换。补齐右侧投注单栏、赔率快捷浮层、联赛/赛事侧栏、串关与定位能力；桌面下注成功改为全局 Toast，修复侧栏成功遮罩被裁剪与底部汇总黑底。同步悬浮客服、公告卡片、三语 i18n、桌面样式体系，以及 API 赛事与 shared 包相关调整。

apps/player/src/components/desktop/BetSlipPanel.vue

@@ -0,0 +1,2005 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter, RouterLink } from 'vue-router';
+import { PARLAY_MIN_LEGS, PARLAY_MAX_LEGS } from '@thebet365/shared';
+import { useBetSlipStore, type ParlaySlipError, type SlipItem, type SlipMode } from '../../stores/betSlip';
+import { useAuthStore } from '../../stores/auth';
+import { formatMoney, parseAmount } from '../../utils/localeDisplay';
+import api from '../../api';
+import { usePlayerProfile } from '../../composables/usePlayerProfile';
+import ConfirmDialog from '../ConfirmDialog.vue';
+import { useAppToast } from '../../composables/useAppToast';
+import GoldSpinner from '../GoldSpinner.vue';
+import { type BetHistoryItem } from '../BetHistoryCard.vue';
+import { buildBetPlaceConfirmMessage } from '../../utils/betPlaceConfirmMessage';
+import { useDesktopBetLocate } from '../../composables/useDesktopBetLocate';
+
+type PanelTab = SlipMode | 'history';
+
+const { t, locale } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const slip = useBetSlipStore();
+const auth = useAuthStore();
+const { refreshProfile } = usePlayerProfile();
+const { requestLocate } = useDesktopBetLocate();
+const { showToast } = useAppToast();
+
+const activeTab = ref<PanelTab>('single');
+const transitionName = ref('list-slide');
+const historyScope = ref<'all' | 'match'>('all');
+const historyItems = ref<BetHistoryItem[]>([]);
+const historyTotal = ref(0);
+const historyPage = ref(1);
+const historyPageSize = 15;
+const historyLoading = ref(false);
+const historyInitialLoading = ref(false);
+const loading = ref(false);
+const balanceLoading = ref(false);
+const balance = ref<number | null>(null);
+const error = ref('');
+const showPlaceConfirm = ref(false);
+const placeConfirmMessage = ref('');
+const pendingSingleItem = ref<SlipItem | null>(null);
+const MIN_STAKE = 5;
+const MAX_STAKE_INTEGER_LENGTH = 9;
+const stakeInput = ref('');
+const itemStakeInputs = ref<Record<string, string>>({});
+const ODDS_POLL_MS = 5000;
+
+type OddsDelta = {
+  oldOdds: number;
+  newOdds: number;
+  newVersion: string;
+  suspended: boolean;
+};
+
+interface SelectionOddsRow {
+  id: string;
+  odds: string;
+  oddsVersion: string;
+  status: string;
+  marketStatus: string;
+  marketShowOnPlayer: boolean;
+  matchStatus: string;
+}
+
+const oddsDeltas = ref<Record<string, OddsDelta>>({});
+let oddsPollTimer: ReturnType<typeof setInterval> | null = null;
+
+const currentMatchId = computed(() => {
+  const match = route.path.match(/^\/match\/([^/]+)/);
+  if (match) return match[1];
+  const outright = route.path.match(/^\/outright\/([^/]+)/);
+  return outright ? outright[1] : '';
+});
+
+const showMatchHistoryFilter = computed(() => Boolean(currentMatchId.value));
+
+const singleSlipItems = computed<SlipItem[]>(() => {
+  if (slip.singleCartItems.length) return slip.singleCartItems;
+  return slip.singleItem ? [slip.singleItem] : [];
+});
+
+const activeItems = computed<SlipItem[]>(() => {
+  if (activeTab.value === 'history') return [];
+  if (activeTab.value === 'parlay') return slip.parlayItems;
+  return singleSlipItems.value;
+});
+
+const historyHasMore = computed(
+  () => historyItems.value.length < historyTotal.value,
+);
+
+const activeCount = computed(() => activeItems.value.length);
+
+function effectiveOdds(item: SlipItem) {
+  return oddsDeltas.value[item.selectionId]?.newOdds ?? item.odds;
+}
+
+const activeTotalOdds = computed(() =>
+  activeItems.value.reduce((acc, item) => acc * effectiveOdds(item), 1),
+);
+const activeEstimatedReturn = computed(() => {
+  if (!activeItems.value.length) return 0;
+  if (activeTab.value === 'parlay') {
+    if (!Number.isFinite(slip.stake) || slip.stake <= 0) return 0;
+    return slip.stake * activeTotalOdds.value;
+  }
+  return activeItems.value.reduce((acc, item) => {
+    const s = slip.getItemStake(item.selectionId);
+    if (!Number.isFinite(s) || s <= 0) return acc;
+    return acc + s * effectiveOdds(item);
+  }, 0);
+});
+
+const activeTotalStake = computed(() => {
+  if (activeTab.value === 'parlay') return Number(slip.stake) || 0;
+  if (activeTab.value !== 'single') return 0;
+  return singleSlipItems.value.reduce((acc, item) => acc + slip.getItemStake(item.selectionId), 0);
+});
+
+const hasSuspendedSelections = computed(() =>
+  Object.values(oddsDeltas.value).some((delta) => delta.suspended),
+);
+
+const hasPendingOddsChanges = computed(() =>
+  Object.values(oddsDeltas.value).some((delta) => !delta.suspended),
+);
+
+const oddsWarningText = computed(() => {
+  if (hasSuspendedSelections.value) return t('bet.odds_suspended');
+  if (hasPendingOddsChanges.value) return t('bet.odds_changed');
+  return '';
+});
+
+const submitButtonLabel = computed(() => {
+  if (loading.value) return t('bet.placing');
+  if (hasPendingOddsChanges.value) return t('bet.accept_changes_place');
+  if (activeTab.value === 'single') return t('bet.slip_place_all');
+  return t('bet.place_bet_short');
+});
+
+const canSubmitWithOdds = computed(() => canSubmitActive.value && !hasSuspendedSelections.value);
+
+const canSubmitActive = computed(() => {
+  if (activeTab.value === 'parlay') {
+    return slip.parlayItems.length >= PARLAY_MIN_LEGS && slip.parlayItems.length <= PARLAY_MAX_LEGS;
+  }
+  if (activeTab.value !== 'single') return false;
+  return singleSlipItems.value.length > 0 && singleSlipItems.value.every((item) => item.allowSingle !== false);
+});
+
+const singleParlayOnlyHint = computed(
+  () =>
+    slip.mode === 'single' &&
+    Boolean(slip.singleItem) &&
+    slip.singleItem!.allowSingle === false &&
+    slip.singleItem!.allowParlay !== false,
+);
+
+const balanceText = computed(() => {
+  if (balanceLoading.value) return t('bet.loading');
+  if (balance.value == null) return '--';
+  return formatMoney(balance.value, locale.value);
+});
+
+const stakeText = computed(() => formatMoney(activeTotalStake.value, locale.value));
+const estimatedReturnText = computed(() => formatMoney(activeEstimatedReturn.value, locale.value));
+const totalOddsText = computed(() => activeTotalOdds.value.toFixed(4).replace(/0+$/, '').replace(/\.$/, ''));
+
+const parlayWarning = computed(() => {
+  if (activeTab.value !== 'parlay') return '';
+  if (slip.lastParlayError) return parlayErrorMessage(slip.lastParlayError);
+  if (slip.parlayItems.length > 0 && slip.parlayItems.length < PARLAY_MIN_LEGS) {
+    return t('bet.parlay_need_more');
+  }
+  return '';
+});
+
+const singleInParlay = computed(() => {
+  const item = slip.singleItem;
+  return Boolean(item && slip.parlayItems.some((leg) => leg.selectionId === item.selectionId));
+});
+
+const showFooterParlayAction = computed(() => slip.mode === 'single' && Boolean(slip.singleItem));
+
+function genId() {
+  return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+
+function selectTab(tab: PanelTab) {
+  transitionName.value = '';
+  activeTab.value = tab;
+  error.value = '';
+  if (tab === 'history') {
+    if (!auth.token) {
+      auth.showLoginPrompt(route.fullPath);
+      activeTab.value = slip.mode;
+      nextTick(() => {
+        transitionName.value = 'list-slide';
+      });
+      return;
+    }
+    if (showMatchHistoryFilter.value) {
+      historyScope.value = 'match';
+    }
+    void loadHistory(true);
+    nextTick(() => {
+      transitionName.value = 'list-slide';
+    });
+    return;
+  }
+  slip.setMode(tab);
+  syncStakeInputFromSlip();
+  nextTick(() => {
+    transitionName.value = 'list-slide';
+  });
+}
+
+function selectHistoryScope(scope: 'all' | 'match') {
+  if (historyScope.value === scope) return;
+  historyScope.value = scope;
+  void loadHistory(true);
+}
+
+async function loadHistory(reset = false) {
+  if (!auth.token || activeTab.value !== 'history') return;
+  if (historyLoading.value) return;
+  if (reset) {
+    historyPage.value = 1;
+    historyInitialLoading.value = true;
+  }
+  historyLoading.value = true;
+  try {
+    const params: Record<string, unknown> = {
+      page: historyPage.value,
+      pageSize: historyPageSize,
+    };
+    if (historyScope.value === 'match' && currentMatchId.value) {
+      params.matchId = currentMatchId.value;
+    }
+    const { data } = await api.get('/player/bets', { params });
+    const result = data.data ?? { items: [], total: 0 };
+    const items = (result.items ?? []) as BetHistoryItem[];
+    historyTotal.value = result.total ?? 0;
+    historyItems.value = reset ? items : [...historyItems.value, ...items];
+  } catch {
+    if (reset) {
+      historyItems.value = [];
+      historyTotal.value = 0;
+    }
+  } finally {
+    historyLoading.value = false;
+    historyInitialLoading.value = false;
+  }
+}
+
+function loadMoreHistory() {
+  if (!historyHasMore.value || historyLoading.value) return;
+  historyPage.value += 1;
+  void loadHistory(false);
+}
+
+function historyStatusLabel(status: string) {
+  const s = status.toUpperCase();
+  if (s === 'WON' || s === 'WIN') return t('history.status_won');
+  if (s === 'LOST' || s === 'LOSE') return t('history.status_lost');
+  if (s === 'PUSH' || s === 'VOID' || s === 'CANCELLED') return t('history.status_push');
+  return t('history.status_pending');
+}
+
+function historyStatusClass(status: string) {
+  const s = status.toUpperCase();
+  if (s === 'WON' || s === 'WIN') return 'hist-won';
+  if (s === 'LOST' || s === 'LOSE') return 'hist-lost';
+  if (s === 'PUSH' || s === 'VOID' || s === 'CANCELLED') return 'hist-push';
+  return 'hist-pending';
+}
+
+function historyPickLabel(bet: BetHistoryItem) {
+  if (bet.betType === 'PARLAY' || bet.isParlay) {
+    const n = bet.legCount ?? bet.legs?.length ?? 0;
+    return n > 0 ? t('history.parlay_title', { n }) : t('history.parlay_league');
+  }
+  return bet.pickLabel || bet.matchTitle || '-';
+}
+
+function removeItem(id: string) {
+  slip.removeItem(id);
+  error.value = '';
+}
+
+function locateSlipItem(item: SlipItem) {
+  const isOutright = item.marketType === 'OUTRIGHT_WINNER';
+  const targetPath = isOutright ? `/outright/${item.matchId}` : `/match/${item.matchId}`;
+  requestLocate({
+    matchId: item.matchId,
+    selectionId: item.selectionId,
+    marketId: item.marketId,
+    marketType: item.marketType,
+  });
+  if (route.path !== targetPath) {
+    void router.push(targetPath);
+  }
+}
+
+function clearActiveSlip() {
+  error.value = '';
+  oddsDeltas.value = {};
+  if (activeTab.value === 'parlay') {
+    slip.clearParlay();
+  } else if (activeTab.value === 'single') {
+    slip.clearSingle();
+  }
+  syncStakeInputFromSlip();
+}
+
+function stakeAmountToInput(amount: number) {
+  if (!Number.isFinite(amount) || amount <= 0) return '';
+  const rounded = Math.round(amount * 100) / 100;
+  return Number.isInteger(rounded)
+    ? String(rounded)
+    : rounded.toFixed(2).replace(/0+$/, '').replace(/\.$/, '');
+}
+
+function sanitizeStakeInput(raw: string) {
+  const onlyAmountChars = raw.replace(/[^\d.]/g, '');
+  const [integerRaw, ...fractionParts] = onlyAmountChars.split('.');
+  const integerPart = integerRaw.replace(/^0+(?=\d)/, '').slice(0, MAX_STAKE_INTEGER_LENGTH);
+  if (!fractionParts.length) return integerPart;
+  const fractionPart = fractionParts.join('').slice(0, 2);
+  return `${integerPart || '0'}.${fractionPart}`;
+}
+
+function commitStakeInput(raw: string) {
+  const clean = sanitizeStakeInput(raw);
+  stakeInput.value = clean;
+  const amount = Number.parseFloat(clean);
+  slip.stake = Number.isFinite(amount) ? amount : 0;
+}
+
+function syncItemStakeInputs(items: SlipItem[]) {
+  const next: Record<string, string> = {};
+  for (const item of items) {
+    slip.initItemStake(item.selectionId);
+    next[item.selectionId] = stakeAmountToInput(slip.getItemStake(item.selectionId));
+  }
+  itemStakeInputs.value = next;
+}
+
+function itemStakeInputValue(selectionId: string) {
+  if (!(selectionId in itemStakeInputs.value)) {
+    slip.initItemStake(selectionId);
+    itemStakeInputs.value = {
+      ...itemStakeInputs.value,
+      [selectionId]: stakeAmountToInput(slip.getItemStake(selectionId)),
+    };
+  }
+  return itemStakeInputs.value[selectionId];
+}
+
+function onItemStakeInput(selectionId: string, event: Event) {
+  const clean = sanitizeStakeInput((event.target as HTMLInputElement).value);
+  itemStakeInputs.value = { ...itemStakeInputs.value, [selectionId]: clean };
+  const amount = Number.parseFloat(clean);
+  slip.setItemStake(selectionId, Number.isFinite(amount) ? amount : 0);
+}
+
+function clearItemStakeInput(selectionId: string) {
+  itemStakeInputs.value = { ...itemStakeInputs.value, [selectionId]: '' };
+  slip.setItemStake(selectionId, 0);
+}
+
+function addItemStake(selectionId: string, amount: number) {
+  const next = (slip.getItemStake(selectionId) || 0) + amount;
+  const normalized = Math.round(Math.max(MIN_STAKE, next) * 100) / 100;
+  slip.setItemStake(selectionId, normalized);
+  itemStakeInputs.value = {
+    ...itemStakeInputs.value,
+    [selectionId]: stakeAmountToInput(normalized),
+  };
+}
+
+function setItemMaxStake(selectionId: string) {
+  if (balance.value == null || balance.value <= 0) return;
+  const normalized = Math.round(balance.value * 100) / 100;
+  slip.setItemStake(selectionId, normalized);
+  itemStakeInputs.value = {
+    ...itemStakeInputs.value,
+    [selectionId]: stakeAmountToInput(normalized),
+  };
+}
+
+function itemEstReturn(item: SlipItem) {
+  const s = slip.getItemStake(item.selectionId);
+  if (!Number.isFinite(s) || s <= 0) return 0;
+  return s * effectiveOdds(item);
+}
+
+function syncStakeInputFromSlip() {
+  stakeInput.value = stakeAmountToInput(Number(slip.stake) || 0);
+  if (activeTab.value === 'single') {
+    syncItemStakeInputs(singleSlipItems.value);
+  }
+}
+
+function onStakeInput(event: Event) {
+  commitStakeInput((event.target as HTMLInputElement).value);
+}
+
+function clearStakeInput() {
+  commitStakeInput('');
+}
+
+function setStake(amount: number, enforceMinimum = true) {
+  if (!Number.isFinite(amount)) return;
+  const normalized = Math.round((enforceMinimum ? Math.max(MIN_STAKE, amount) : amount) * 100) / 100;
+  slip.stake = normalized;
+  stakeInput.value = stakeAmountToInput(normalized);
+}
+
+function addStake(amount: number) {
+  setStake((Number(slip.stake) || 0) + amount);
+}
+
+function setMaxStake() {
+  if (balance.value != null && balance.value > 0) setStake(balance.value, false);
+}
+
+function stopOddsPolling() {
+  if (oddsPollTimer) {
+    clearInterval(oddsPollTimer);
+    oddsPollTimer = null;
+  }
+  oddsDeltas.value = {};
+}
+
+function acceptPendingOdds() {
+  for (const [selectionId, delta] of Object.entries(oddsDeltas.value)) {
+    if (!delta.suspended) {
+      slip.updateSelectionOdds(selectionId, delta.newOdds, delta.newVersion);
+    }
+  }
+  oddsDeltas.value = {};
+}
+
+function acceptPendingOddsForSelection(selectionId: string) {
+  const delta = oddsDeltas.value[selectionId];
+  if (!delta || delta.suspended) return;
+  slip.updateSelectionOdds(selectionId, delta.newOdds, delta.newVersion);
+  const next = { ...oddsDeltas.value };
+  delete next[selectionId];
+  oddsDeltas.value = next;
+}
+
+function isItemSuspended(item: SlipItem) {
+  return Boolean(oddsDeltaFor(item.selectionId)?.suspended);
+}
+
+function canPlaceSingleItem(item: SlipItem) {
+  if (item.allowSingle === false) return false;
+  if (isItemSuspended(item)) return false;
+  return slip.getItemStake(item.selectionId) >= MIN_STAKE;
+}
+
+function validateSingleItemPlace(item: SlipItem): boolean {
+  if (!auth.token) {
+    auth.showLoginPrompt();
+    return false;
+  }
+  if (item.allowSingle === false) {
+    error.value = t('bet.slip_parlay_only_hint');
+    return false;
+  }
+  const itemStake = slip.getItemStake(item.selectionId);
+  if (itemStake < MIN_STAKE) {
+    error.value = t('bet.slip_min_error', { amount: MIN_STAKE });
+    return false;
+  }
+  if (balance.value != null && itemStake > balance.value) {
+    error.value = t('bet.outright_insufficient');
+    return false;
+  }
+  if (isItemSuspended(item)) {
+    error.value = t('bet.odds_suspended');
+    return false;
+  }
+  return true;
+}
+
+function onPlaceSingleItemClick(item: SlipItem) {
+  error.value = '';
+  if (!validateSingleItemPlace(item)) return;
+  if (oddsDeltaFor(item.selectionId) && !isItemSuspended(item)) {
+    acceptPendingOddsForSelection(item.selectionId);
+  }
+  pendingSingleItem.value = item;
+  const stake = slip.getItemStake(item.selectionId);
+  placeConfirmMessage.value = buildBetPlaceConfirmMessage(t, {
+    mode: 'single',
+    items: [item],
+    totalStake: stake,
+    totalReturn: stake * effectiveOdds(item),
+    formatMoney: (amount) => formatMoney(amount, locale.value),
+    getStake: () => stake,
+    getOdds: () => effectiveOdds(item),
+  });
+  showPlaceConfirm.value = true;
+}
+
+async function pollSelectionsOdds() {
+  const items = activeItems.value;
+  if (!items.length) return;
+
+  try {
+    const ids = items.map((item) => item.selectionId).join(',');
+    const { data } = await api.get('/player/selections/odds', { params: { ids } });
+    const rows: SelectionOddsRow[] = data.data?.items ?? [];
+    const rowMap = new Map(rows.map((row) => [row.id, row]));
+    const next: Record<string, OddsDelta> = {};
+
+    for (const item of items) {
+      const row = rowMap.get(item.selectionId);
+      if (!row) continue;
+
+      const suspended =
+        row.status !== 'OPEN' ||
+        row.marketStatus !== 'OPEN' ||
+        row.marketShowOnPlayer === false ||
+        row.matchStatus !== 'PUBLISHED';
+      const newOdds = parseFloat(row.odds);
+      const versionChanged = row.oddsVersion !== item.oddsVersion;
+      const oddsChanged = Number.isFinite(newOdds) && Math.abs(newOdds - item.odds) > 0.0001;
+
+      if (suspended || versionChanged || oddsChanged) {
+        const existing = oddsDeltas.value[item.selectionId];
+        next[item.selectionId] = {
+          oldOdds: existing?.oldOdds ?? item.odds,
+          newOdds: Number.isFinite(newOdds) ? newOdds : item.odds,
+          newVersion: row.oddsVersion,
+          suspended,
+        };
+      }
+    }
+
+    oddsDeltas.value = next;
+  } catch {
+    /* silent retry */
+  }
+}
+
+function startOddsPolling() {
+  stopOddsPolling();
+  void pollSelectionsOdds();
+  oddsPollTimer = setInterval(() => {
+    void pollSelectionsOdds();
+  }, ODDS_POLL_MS);
+}
+
+function oddsDeltaFor(selectionId: string) {
+  return oddsDeltas.value[selectionId];
+}
+
+function oddsTrendClass(delta: OddsDelta) {
+  if (delta.suspended) return 'odds-suspended';
+  return delta.newOdds >= delta.oldOdds ? 'odds-up' : 'odds-down';
+}
+
+function singlesForSubmit() {
+  return [...singleSlipItems.value];
+}
+
+function validatePlaceBet(): boolean {
+  if (!activeItems.value.length) return false;
+  if (!auth.token) {
+    auth.showLoginPrompt();
+    return false;
+  }
+  if (activeTab.value === 'parlay') {
+    if (slip.stake < MIN_STAKE) {
+      error.value = t('bet.slip_min_error', { amount: MIN_STAKE });
+      return false;
+    }
+    if (balance.value != null && slip.stake > balance.value) {
+      error.value = t('bet.outright_insufficient');
+      return false;
+    }
+  } else {
+    const singles = singlesForSubmit();
+    let totalStake = 0;
+    for (const item of singles) {
+      const itemStake = slip.getItemStake(item.selectionId);
+      if (itemStake < MIN_STAKE) {
+        error.value = t('bet.slip_min_error', { amount: MIN_STAKE });
+        return false;
+      }
+      totalStake += itemStake;
+    }
+    if (balance.value != null && totalStake > balance.value) {
+      error.value = t('bet.outright_insufficient');
+      return false;
+    }
+  }
+  if (activeTab.value === 'parlay' && !canSubmitActive.value) {
+    error.value = slip.parlayItems.length > PARLAY_MAX_LEGS
+      ? t('bet.parlay_max_legs')
+      : t('bet.parlay_need_more');
+    return false;
+  }
+  if (hasSuspendedSelections.value) {
+    error.value = t('bet.odds_suspended');
+    return false;
+  }
+  return true;
+}
+
+function onPlaceBetClick() {
+  error.value = '';
+  if (!validatePlaceBet()) return;
+  if (hasPendingOddsChanges.value) {
+    acceptPendingOdds();
+  }
+  pendingSingleItem.value = null;
+  const singles = singlesForSubmit();
+  placeConfirmMessage.value = buildBetPlaceConfirmMessage(t, {
+    mode: activeTab.value === 'parlay' ? 'parlay' : 'single',
+    items: activeTab.value === 'parlay' ? [...slip.parlayItems] : singles,
+    totalStake: activeTotalStake.value,
+    totalReturn: activeEstimatedReturn.value,
+    totalOdds: activeTab.value === 'parlay' ? activeTotalOdds.value : undefined,
+    formatMoney: (amount) => formatMoney(amount, locale.value),
+    getStake: (item) => slip.getItemStake(item.selectionId),
+    getOdds: (item) => effectiveOdds(item),
+  });
+  showPlaceConfirm.value = true;
+}
+
+async function executePlaceSingleItem(item: SlipItem) {
+  loading.value = true;
+  error.value = '';
+
+  try {
+    await api.post('/player/bets/single', {
+      selectionId: item.selectionId,
+      oddsVersion: item.oddsVersion,
+      stake: slip.getItemStake(item.selectionId),
+      requestId: genId(),
+    });
+    slip.removeItem(item.selectionId);
+    await Promise.all([loadBalance(), refreshProfile()]);
+    showToast(t('bet.place_success'));
+    syncStakeInputFromSlip();
+  } catch (e: unknown) {
+    error.value =
+      (e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
+      t('bet.place_failed');
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function executePlaceBet() {
+  loading.value = true;
+  error.value = '';
+
+  try {
+    if (activeTab.value === 'parlay') {
+      await api.post('/player/bets/parlay', {
+        legs: slip.parlayItems.map((item) => ({
+          selectionId: item.selectionId,
+          oddsVersion: item.oddsVersion,
+        })),
+        stake: slip.stake,
+        requestId: genId(),
+      });
+      slip.clearParlay();
+    } else {
+      for (const item of singlesForSubmit()) {
+        await api.post('/player/bets/single', {
+          selectionId: item.selectionId,
+          oddsVersion: item.oddsVersion,
+          stake: slip.getItemStake(item.selectionId),
+          requestId: genId(),
+        });
+      }
+      slip.clearSingle();
+    }
+    if (activeTab.value === 'history') {
+      void loadHistory(true);
+    }
+    await Promise.all([loadBalance(), refreshProfile()]);
+    showToast(t('bet.place_success'));
+    syncStakeInputFromSlip();
+  } catch (e: unknown) {
+    error.value =
+      (e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
+      t('bet.place_failed');
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function confirmPlaceBet() {
+  showPlaceConfirm.value = false;
+  const singleItem = pendingSingleItem.value;
+  pendingSingleItem.value = null;
+  if (singleItem) {
+    await executePlaceSingleItem(singleItem);
+    return;
+  }
+  await executePlaceBet();
+}
+
+async function loadBalance() {
+  if (!auth.token) {
+    balance.value = null;
+    return;
+  }
+  balanceLoading.value = true;
+  try {
+    const { data } = await api.get('/player/profile');
+    balance.value = parseAmount(data.data?.wallet?.availableBalance);
+  } catch {
+    balance.value = null;
+  } finally {
+    balanceLoading.value = false;
+  }
+}
+
+function parlayErrorMessage(reason: ParlaySlipError) {
+  if (reason === 'MAX_LEGS') return t('bet.parlay_max_legs');
+  if (reason === 'QUARTER_LINE') return t('bet.parlay_block_quarter');
+  if (reason === 'OUTRIGHT') return t('bet.parlay_block_outright');
+  if (reason === 'NOT_ALLOWED') return t('bet.parlay_block_not_allowed');
+  if (reason === 'SAME_MATCH') return t('bet.slip_parlay_same_match');
+  return t('bet.parlay_block_not_allowed');
+}
+
+function addItemToParlay(item: SlipItem) {
+  if (!auth.token) {
+    auth.showLoginPrompt(route.fullPath);
+    return;
+  }
+  if (slip.parlayItems.some((leg) => leg.selectionId === item.selectionId)) {
+    activeTab.value = 'parlay';
+    slip.setMode('parlay');
+    error.value = '';
+    return;
+  }
+  const err = slip.addParlayLeg(item);
+  activeTab.value = 'parlay';
+  slip.setMode('parlay');
+  if (err) {
+    error.value = parlayErrorMessage(err);
+    return;
+  }
+  error.value = '';
+}
+
+function isItemInParlay(item: SlipItem) {
+  return slip.parlayItems.some((leg) => leg.selectionId === item.selectionId);
+}
+
+function parlayActionLabel(item: SlipItem) {
+  return isItemInParlay(item) ? t('bet.slip_parlay_added_short') : t('bet.add_to_parlay');
+}
+
+function addCurrentToParlay() {
+  if (singleInParlay.value) {
+    activeTab.value = 'parlay';
+    slip.setMode('parlay');
+    error.value = '';
+    return;
+  }
+  const err = slip.addSingleToParlay();
+  activeTab.value = 'parlay';
+  slip.setMode('parlay');
+  if (err) {
+    error.value = parlayErrorMessage(err);
+    return;
+  }
+  error.value = '';
+}
+
+watch(
+  () => activeItems.value.map((item) => item.selectionId).join(','),
+  (ids) => {
+    if (ids) {
+      if (activeTab.value === 'single') syncItemStakeInputs(singleSlipItems.value);
+      startOddsPolling();
+    } else {
+      itemStakeInputs.value = {};
+      stopOddsPolling();
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  () => slip.mode,
+  (mode) => {
+    if (activeTab.value !== 'history') {
+      transitionName.value = '';
+      activeTab.value = mode;
+      nextTick(() => {
+        transitionName.value = 'list-slide';
+      });
+    }
+  },
+);
+
+watch(showMatchHistoryFilter, (show) => {
+  if (!show && historyScope.value === 'match') {
+    historyScope.value = 'all';
+    if (activeTab.value === 'history') void loadHistory(true);
+  }
+});
+
+watch(currentMatchId, (id, prev) => {
+  if (activeTab.value !== 'history') return;
+  if (id && id !== prev && historyScope.value === 'match') {
+    void loadHistory(true);
+  }
+  if (!id && historyScope.value === 'match') {
+    historyScope.value = 'all';
+    void loadHistory(true);
+  }
+});
+
+watch(
+  () => auth.token,
+  (token) => {
+    if (!token && activeTab.value === 'history') {
+      activeTab.value = slip.mode;
+      historyItems.value = [];
+      historyTotal.value = 0;
+    }
+  },
+);
+
+onMounted(() => {
+  activeTab.value = slip.mode;
+  if (activeTab.value === 'single' && !slip.singleItem && slip.parlayItems.length) {
+    activeTab.value = 'parlay';
+    slip.setMode('parlay');
+  }
+  syncStakeInputFromSlip();
+  void loadBalance();
+});
+
+onUnmounted(() => {
+  stopOddsPolling();
+});
+</script>
+
+<template>
+  <div class="betslip-panel">
+    <div class="panel-head">
+      <h3>{{ t('bet.bet_slip') || '投注单' }}</h3>
+      <button
+        type="button"
+        class="panel-close-btn"
+        @click="slip.collapsePanel()"
+        :aria-label="t('common.collapse') || '折叠'"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
+          <path d="M13 17l5-5-5-5M6 17l5-5-5-5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+    </div>
+
+    <div class="panel-tabs">
+      <button
+        type="button"
+        class="tab-btn"
+        :class="{ active: activeTab === 'single' }"
+        @click="selectTab('single')"
+      >
+        {{ t('bet.slip_tab_single') }}
+        <span v-if="slip.singleCount" class="badge">{{ slip.singleCount }}</span>
+      </button>
+      <button
+        type="button"
+        class="tab-btn"
+        :class="{ active: activeTab === 'parlay' }"
+        @click="selectTab('parlay')"
+      >
+        {{ t('bet.slip_tab_parlay') }}
+        <span v-if="slip.parlayCount" class="badge">{{ slip.parlayCount }}</span>
+      </button>
+      <button
+        type="button"
+        class="tab-btn"
+        :class="{ active: activeTab === 'history' }"
+        @click="selectTab('history')"
+      >
+        {{ t('bet.slip_tab_history') }}
+      </button>
+    </div>
+
+    <div v-if="activeTab === 'history' && showMatchHistoryFilter" class="history-scope-bar">
+      <button
+        type="button"
+        class="scope-chip"
+        :class="{ active: historyScope === 'all' }"
+        @click="selectHistoryScope('all')"
+      >
+        {{ t('bet.slip_history_all') }}
+      </button>
+      <button
+        type="button"
+        class="scope-chip"
+        :class="{ active: historyScope === 'match' }"
+        @click="selectHistoryScope('match')"
+      >
+        {{ t('bet.slip_history_match') }}
+      </button>
+    </div>
+
+    <!-- Warnings -->
+    <p v-if="activeTab !== 'history' && oddsWarningText" class="odds-warning">{{ oddsWarningText }}</p>
+
+    <!-- Body -->
+    <div class="panel-body">
+      <template v-if="activeTab === 'history'">
+        <div v-if="historyInitialLoading" class="history-loading">
+          <GoldSpinner :size="28" />
+        </div>
+        <div v-else-if="!historyItems.length" class="empty-state">
+          <svg class="empty-icon" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2zm0-4H7V7h10v2zm0 8H7v-2h10v2z" fill="currentColor"/>
+          </svg>
+          <p>{{ t('history.empty') }}</p>
+        </div>
+        <div v-else class="history-list">
+          <RouterLink
+            v-for="bet in historyItems"
+            :key="bet.betNo"
+            :to="`/bets/${bet.betNo}`"
+            class="history-card"
+          >
+            <div class="history-card-top">
+              <span class="history-pick">{{ historyPickLabel(bet) }}</span>
+              <span class="history-status" :class="historyStatusClass(bet.status)">
+                {{ historyStatusLabel(bet.status) }}
+              </span>
+            </div>
+            <div v-if="historyScope === 'all' && bet.matchTitle" class="history-match">
+              {{ bet.matchTitle }}
+            </div>
+            <div class="history-card-foot">
+              <span class="history-stake">{{ t('history.stake') }} {{ formatMoney(bet.stake, locale) }}</span>
+              <span class="history-return" :class="historyStatusClass(bet.status)">
+                {{ formatMoney(bet.actualReturn || bet.potentialReturn, locale) }}
+              </span>
+            </div>
+            <div class="history-meta">
+              <span>{{ bet.betNo }}</span>
+              <span>{{ bet.placedAt ? new Date(bet.placedAt).toLocaleString(locale) : '' }}</span>
+            </div>
+          </RouterLink>
+        </div>
+        <button
+          v-if="historyHasMore && !historyInitialLoading"
+          type="button"
+          class="history-load-more"
+          :disabled="historyLoading"
+          @click="loadMoreHistory"
+        >
+          {{ historyLoading ? t('bet.loading') : t('bet.slip_history_load_more') }}
+        </button>
+      </template>
+
+      <template v-else>
+      <div v-if="!activeItems.length" class="empty-state">
+        <svg class="empty-icon" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2zm0-4H7V7h10v2zm0 8H7v-2h10v2z" fill="currentColor"/>
+        </svg>
+        <p>{{ activeTab === 'parlay' ? t('bet.slip_parlay_empty_hint') : t('bet.slip_empty_hint') }}</p>
+      </div>
+
+      <TransitionGroup v-else :name="transitionName" tag="div" class="items-list">
+        <p v-if="activeTab === 'parlay' && parlayWarning" class="panel-warning" key="warning">{{ parlayWarning }}</p>
+        <div
+          v-for="item in activeItems"
+          :key="item.selectionId"
+          class="slip-card"
+        >
+          <div class="card-top">
+            <div class="card-meta">
+              <span class="match-name">{{ item.matchName }}</span>
+              <span class="card-market">{{ item.marketName }}</span>
+            </div>
+            <div class="card-actions">
+              <button type="button" class="del-btn" @click="removeItem(item.selectionId)">✕</button>
+              <button
+                type="button"
+                class="locate-btn"
+                :title="t('bet.slip_locate')"
+                :aria-label="t('bet.slip_locate_aria')"
+                @click="locateSlipItem(item)"
+              >
+                <svg class="locate-icon" viewBox="0 0 24 24" aria-hidden="true">
+                  <path
+                    d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div class="card-selection-row">
+            <span class="selection-name">{{ item.selectionName }}</span>
+            <span class="odds-value">
+              <template v-if="oddsDeltaFor(item.selectionId)">
+                <span class="odds-change" :class="oddsTrendClass(oddsDeltaFor(item.selectionId)!)">
+                  {{ oddsDeltaFor(item.selectionId)!.oldOdds.toFixed(2) }} →
+                  {{ oddsDeltaFor(item.selectionId)!.newOdds.toFixed(2) }}
+                </span>
+              </template>
+              <template v-else>{{ item.odds.toFixed(2) }}</template>
+            </span>
+          </div>
+
+          <div v-if="activeTab === 'single'" class="card-stake-block">
+            <div class="card-stake-inline">
+              <div class="card-stake-input-box">
+                <input
+                  :value="itemStakeInputValue(item.selectionId)"
+                  type="number"
+                  class="card-stake-input"
+                  :placeholder="t('bet.stake_placeholder') || '金额'"
+                  @input="onItemStakeInput(item.selectionId, $event)"
+                />
+                <button
+                  v-if="itemStakeInputValue(item.selectionId)"
+                  type="button"
+                  class="clear-input-btn"
+                  @click="clearItemStakeInput(item.selectionId)"
+                >
+                  ✕
+                </button>
+              </div>
+              <button type="button" class="chip-btn mini" @click="addItemStake(item.selectionId, 50)">+50</button>
+              <button type="button" class="chip-btn mini" @click="addItemStake(item.selectionId, 100)">+100</button>
+              <button type="button" class="chip-btn mini" @click="setItemMaxStake(item.selectionId)">
+                {{ t('bet.stake_max') || '全' }}
+              </button>
+            </div>
+            <div
+              class="card-action-row"
+              :class="{
+                'card-action-row--single': item.allowParlay === false || item.allowSingle === false,
+              }"
+            >
+              <button
+                v-if="item.allowSingle !== false"
+                type="button"
+                class="card-action-btn card-single-btn"
+                :disabled="loading || !canPlaceSingleItem(item)"
+                @click="onPlaceSingleItemClick(item)"
+              >
+                {{ t('bet.slip_place_single') }}
+              </button>
+              <button
+                v-if="item.allowParlay !== false"
+                type="button"
+                class="card-action-btn card-parlay-btn"
+                :class="{ active: isItemInParlay(item) }"
+                @click="addItemToParlay(item)"
+              >
+                <span class="card-parlay-btn-icon" aria-hidden="true">{{ isItemInParlay(item) ? '✓' : '+' }}</span>
+                <span>{{ isItemInParlay(item) ? t('bet.slip_parlay_added_btn') : t('bet.add_to_parlay') }}</span>
+              </button>
+            </div>
+            <div class="card-est-row">
+              <span class="est-lbl">{{ t('bet.slip_est_return') }}</span>
+              <span class="est-val">{{ formatMoney(itemEstReturn(item), locale) }}</span>
+            </div>
+          </div>
+        </div>
+        <div v-if="activeTab === 'parlay' && slip.parlayItems.length" class="parlay-summary" key="summary">
+          <span>{{ t('bet.slip_parlay_count', { n: slip.parlayItems.length }) }}</span>
+          <span class="parlay-odds">{{ t('bet.slip_parlay_odds', { odds: totalOddsText }) }}</span>
+        </div>
+      </TransitionGroup>
+
+      <!-- Stake input (parlay only) -->
+      <div v-if="activeTab === 'parlay' && activeItems.length" class="stake-control">
+        <div class="stake-input-box">
+            <span class="currency">{{ t('bet.slip_currency') || 'CNY' }}</span>
+            <input
+              v-model="stakeInput"
+              type="number"
+              class="stake-input"
+              :placeholder="t('bet.stake') || '输入金额'"
+              @input="onStakeInput"
+            />
+            <button v-if="stakeInput" type="button" class="clear-input-btn" @click="clearStakeInput">✕</button>
+          </div>
+
+          <div class="quick-chips">
+            <button type="button" class="chip-btn" @click="addStake(50)">+50</button>
+            <button type="button" class="chip-btn" @click="addStake(100)">+100</button>
+            <button type="button" class="chip-btn" @click="addStake(500)">+500</button>
+            <button type="button" class="chip-btn" @click="setMaxStake">{{ t('bet.stake_max') || '最大' }}</button>
+          </div>
+      </div>
+
+      <p v-if="error" class="panel-error-msg">{{ error }}</p>
+      </template>
+    </div>
+
+    <div v-if="activeTab === 'history'" class="panel-bottom-fixed panel-bottom-history">
+      <RouterLink to="/bets" class="history-view-all-btn">
+        {{ t('bet.slip_history_view_all') }}
+      </RouterLink>
+    </div>
+
+    <div v-else-if="activeItems.length" class="panel-bottom-fixed">
+      <div class="panel-summary">
+        <div class="summary-row">
+          <span class="lbl">{{ t('bet.slip_total_stake') }}</span>
+          <span class="val">{{ stakeText }}</span>
+        </div>
+        <div class="summary-row est-return">
+          <span class="lbl">{{ t('bet.slip_est_return') }}</span>
+          <span class="val">{{ estimatedReturnText }}</span>
+        </div>
+      </div>
+      <div class="panel-foot">
+        <button type="button" class="clear-slip-btn foot-clear" @click="clearActiveSlip">
+          {{ t('bet.slip_clear') }}
+        </button>
+        <button
+          type="button"
+          class="submit-btn"
+          :disabled="loading || !canSubmitWithOdds"
+          @click="onPlaceBetClick"
+        >
+          {{ submitButtonLabel }}
+        </button>
+      </div>
+    </div>
+
+    <ConfirmDialog
+      v-model:visible="showPlaceConfirm"
+      :title="t('bet.place_confirm_title')"
+      :message="placeConfirmMessage"
+      :confirm-text="t('bet.place_bet')"
+      :cancel-text="t('common.cancel')"
+      :loading="loading"
+      @confirm="confirmPlaceBet"
+    />
+  </div>
+</template>
+
+<style scoped>
+.betslip-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--desktop-sidebar-panel-bg);
+}
+
+.panel-head {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.panel-head h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 800;
+  color: var(--primary-light);
+}
+
+.panel-close-btn {
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background 0.2s, color 0.2s;
+}
+
+.panel-close-btn:hover {
+  background: var(--bg-hover);
+  color: var(--primary);
+}
+
+.clear-slip-btn {
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 3px 8px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+
+.clear-slip-btn.foot-clear {
+  flex: 0 0 20%;
+  min-width: 0;
+  padding: 10px 4px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.clear-slip-btn:hover {
+  color: var(--primary-light);
+  border-color: var(--border-gold-soft);
+  background: rgba(244, 162, 97, 0.06);
+}
+
+.balance-info {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+}
+
+.balance-info .lbl {
+  color: var(--text-muted);
+}
+
+.balance-info .val {
+  color: var(--text);
+  font-weight: 700;
+}
+
+.refresh-btn {
+  background: transparent;
+  color: var(--primary-light);
+  font-size: 12px;
+  line-height: 1;
+  padding: 0 2px;
+}
+
+.panel-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+}
+
+.tab-btn {
+  flex: 1;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 700;
+  padding: 10px 4px;
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.tab-btn:hover {
+  color: var(--text);
+}
+
+.tab-btn.active {
+  color: var(--primary-light);
+  border-bottom-color: var(--primary);
+}
+
+.badge {
+  background: var(--primary);
+  color: #fff;
+  font-size: 9px;
+  font-weight: 800;
+  padding: 1px 4px;
+  border-radius: 6px;
+  line-height: 1;
+}
+
+.odds-warning {
+  background: rgba(244, 162, 97, 0.12);
+  border-bottom: 1px solid var(--border-gold-soft);
+  color: var(--primary-light);
+  font-size: 11px;
+  font-weight: 600;
+  padding: 8px 16px;
+  margin: 0;
+  text-align: center;
+}
+
+.panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px 12px;
+  min-height: 0;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 60%;
+  color: var(--text-muted);
+  gap: 12px;
+  text-align: center;
+  font-size: 12px;
+}
+
+.empty-icon {
+  width: 32px;
+  height: 32px;
+  opacity: 0.3;
+}
+
+.items-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+.slip-card {
+  background: rgba(22, 45, 54, 0.4);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 7px 8px;
+  position: relative;
+  transition: border-color 0.2s;
+}
+
+.slip-card:hover {
+  border-color: var(--border-gold-soft);
+}
+
+.card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+
+.card-meta {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.match-name {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-market {
+  font-size: 10px;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.del-btn {
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 10px;
+  padding: 0 2px;
+  line-height: 1;
+}
+
+.card-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.locate-btn {
+  background: transparent;
+  color: var(--text-muted);
+  padding: 0 2px;
+  line-height: 1;
+  display: flex;
+}
+
+.locate-btn:hover {
+  color: var(--primary-light);
+}
+
+.locate-icon {
+  width: 12px;
+  height: 12px;
+}
+
+.del-btn:hover {
+  color: var(--danger);
+}
+
+.card-selection-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 2px;
+}
+
+.selection-name {
+  font-size: 11px;
+  font-weight: 700;
+  color: #fff;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.odds-value {
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--primary-light);
+  flex-shrink: 0;
+}
+
+.odds-change {
+  font-size: 11px;
+  padding: 1px 4px;
+  border-radius: 2px;
+}
+
+.odds-up {
+  background: rgba(46, 204, 113, 0.15);
+  color: #2ecc71;
+}
+
+.odds-down {
+  background: rgba(231, 76, 60, 0.15);
+  color: #e74c3c;
+}
+
+.odds-suspended {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-muted);
+  text-decoration: line-through;
+}
+
+.card-stake-block {
+  margin-top: 5px;
+  padding-top: 5px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.card-stake-inline {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.card-stake-input-box {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  background: var(--bg-body);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 0 6px;
+  height: 26px;
+  min-width: 0;
+}
+
+.card-stake-input {
+  flex: 1;
+  background: transparent;
+  border: none !important;
+  color: #fff;
+  padding: 0;
+  font-size: 11px;
+  font-weight: 700;
+  min-width: 0;
+}
+
+.card-stake-input::-webkit-outer-spin-button,
+.card-stake-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.chip-btn.mini {
+  flex: 0 0 auto;
+  padding: 0 6px;
+  height: 26px;
+  font-size: 9px;
+  min-width: 32px;
+}
+
+.card-action-row {
+  display: flex;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.card-action-row--single .card-action-btn {
+  flex: 1 1 100%;
+}
+
+.card-action-btn {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 6px 6px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1.2;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
+}
+
+.card-action-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.card-single-btn {
+  border: 1px solid rgba(244, 162, 97, 0.55);
+  background: rgba(244, 162, 97, 0.14);
+  color: var(--primary-light);
+}
+
+.card-single-btn:hover:not(:disabled) {
+  background: rgba(244, 162, 97, 0.22);
+  border-color: var(--border-gold);
+  color: #fff;
+}
+
+.card-parlay-btn {
+  border: 1px dashed rgba(244, 162, 97, 0.45);
+  background: rgba(244, 162, 97, 0.04);
+  color: var(--primary-light);
+}
+
+.card-parlay-btn:hover:not(:disabled) {
+  background: rgba(244, 162, 97, 0.1);
+  border-color: var(--border-gold-soft);
+  color: #fff;
+}
+
+.card-parlay-btn.active {
+  border-style: solid;
+  border-color: rgba(244, 162, 97, 0.35);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text-muted);
+}
+
+.card-parlay-btn.active:hover {
+  color: var(--primary-light);
+  border-color: var(--border-gold-soft);
+}
+
+.card-parlay-btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: rgba(244, 162, 97, 0.16);
+  font-size: 11px;
+  line-height: 1;
+  font-weight: 800;
+}
+
+.card-parlay-btn.active .card-parlay-btn-icon {
+  background: rgba(46, 204, 113, 0.18);
+  color: #2ecc71;
+}
+
+.card-est-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 9px;
+  line-height: 1.2;
+}
+
+.card-est-row .est-lbl {
+  color: var(--text-muted);
+}
+
+.card-est-row .est-val {
+  color: var(--primary-light);
+  font-weight: 800;
+}
+
+.panel-warning {
+  font-size: 11px;
+  color: var(--primary-light);
+  background: rgba(244, 162, 97, 0.08);
+  border: 1px solid var(--border-gold-soft);
+  border-radius: 4px;
+  padding: 8px;
+  margin: 6px 0;
+}
+
+.parlay-summary {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  padding: 4px 6px;
+  background: var(--bg-elevated);
+  border-radius: 4px;
+}
+
+.parlay-odds {
+  color: var(--primary-light);
+}
+
+.stake-control {
+  background: var(--bg-elevated);
+  border-radius: 4px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.stake-input-box {
+  display: flex;
+  align-items: center;
+  background: var(--bg-body);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 0 10px;
+  height: 36px;
+}
+
+.currency {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--primary-light);
+  margin-right: 6px;
+}
+
+.stake-input {
+  flex: 1;
+  background: transparent;
+  border: none !important;
+  color: #fff;
+  padding: 0;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.stake-input::-webkit-outer-spin-button,
+.stake-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.clear-input-btn {
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 12px;
+  padding: 0 4px;
+}
+
+.quick-chips {
+  display: flex;
+  gap: 6px;
+}
+
+.chip-btn {
+  flex: 1;
+  background: rgba(22, 45, 54, 0.45); border: 1px solid var(--border);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  font-size: 11px;
+  font-weight: 700;
+  padding: 5px 0;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.chip-btn:hover {
+  border-color: var(--border-gold-soft);
+  color: #fff;
+}
+
+.panel-error-msg {
+  color: var(--danger);
+  font-size: 11px;
+  font-weight: 600;
+  margin-top: 8px;
+}
+
+.panel-bottom-fixed {
+  flex-shrink: 0;
+  border-top: 1px solid var(--border);
+  background: transparent;
+}
+
+.panel-summary {
+  padding: 10px 16px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.summary-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 11px;
+}
+
+.summary-row .lbl {
+  color: var(--text-muted);
+}
+
+.summary-row .val {
+  color: var(--text);
+  font-weight: 700;
+}
+
+.summary-row.est-return .val {
+  color: var(--primary-light);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.panel-foot {
+  padding: 10px 16px 12px;
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+}
+
+.add-parlay-btn {
+  width: 100%;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid var(--border-gold-soft);
+  background: transparent;
+  color: var(--primary-light);
+  font-size: 11px;
+  font-weight: 700;
+  transition: all 0.2s;
+}
+
+.add-parlay-btn:hover {
+  background: rgba(244, 162, 97, 0.05);
+  border-color: var(--primary);
+}
+
+.submit-btn {
+  flex: 1;
+  min-width: 0;
+  padding: 10px;
+  border-radius: 4px;
+  background: var(--gradient-primary);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 800;
+  text-transform: uppercase;
+  transition: opacity 0.2s;
+  border: none;
+  cursor: pointer;
+}
+
+.submit-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  filter: saturate(0.5);
+}
+
+.history-view-all-btn {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px solid var(--border-gold-soft);
+  background: rgba(244, 162, 97, 0.08);
+  color: var(--primary-light);
+  font-size: 13px;
+  font-weight: 800;
+  text-align: center;
+  text-decoration: none;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.history-view-all-btn:hover {
+  background: rgba(244, 162, 97, 0.14);
+  border-color: var(--primary);
+}
+
+.panel-bottom-history {
+  padding: 10px 16px 12px;
+}
+
+.history-scope-bar {
+  display: flex;
+  gap: 6px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.scope-chip {
+  flex: 1;
+  padding: 5px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 11px;
+  font-weight: 700;
+  transition: all 0.15s;
+}
+
+.scope-chip.active {
+  color: var(--primary-light);
+  border-color: var(--border-gold-soft);
+  background: rgba(244, 162, 97, 0.08);
+}
+
+.history-loading {
+  display: flex;
+  justify-content: center;
+  padding: 32px 0;
+}
+
+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.history-card {
+  display: block;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: rgba(22, 45, 54, 0.45); border: 1px solid var(--border);
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.history-card:hover {
+  border-color: var(--border-gold-soft);
+  background: rgba(244, 162, 97, 0.04);
+}
+
+.history-card-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.history-pick {
+  font-size: 11px;
+  font-weight: 700;
+  color: #fff;
+  line-height: 1.35;
+  min-width: 0;
+}
+
+.history-status {
+  flex-shrink: 0;
+  font-size: 10px;
+  font-weight: 800;
+  padding: 1px 5px;
+  border-radius: 3px;
+}
+
+.history-status.hist-won {
+  color: #2ecc71;
+  background: rgba(46, 204, 113, 0.12);
+}
+
+.history-status.hist-lost {
+  color: #e74c3c;
+  background: rgba(231, 76, 60, 0.12);
+}
+
+.history-status.hist-push {
+  color: #95a5a6;
+  background: rgba(149, 165, 166, 0.12);
+}
+
+.history-status.hist-pending {
+  color: var(--primary-light);
+  background: rgba(244, 162, 97, 0.1);
+}
+
+.history-match {
+  font-size: 10px;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.history-card-foot {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+}
+
+.history-stake {
+  color: var(--text-muted);
+}
+
+.history-return {
+  font-weight: 800;
+}
+
+.history-return.hist-won {
+  color: #2ecc71;
+}
+
+.history-return.hist-lost {
+  color: #e74c3c;
+}
+
+.history-return.hist-push,
+.history-return.hist-pending {
+  color: var(--primary-light);
+}
+
+.history-meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 4px;
+  font-size: 9px;
+  color: var(--text-muted);
+  opacity: 0.85;
+}
+
+.history-load-more {
+  width: 100%;
+  margin-top: 8px;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--primary-light);
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.history-load-more:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Transition group list animation */
+.list-slide-enter-active,
+.list-slide-leave-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.list-slide-enter-from {
+  opacity: 0;
+  transform: translateY(-20px) scale(0.95);
+}
+
+.list-slide-leave-to {
+  opacity: 0;
+  transform: translateY(20px) scale(0.95);
+}
+
+/* Ensure smooth moving when list changes */
+.list-slide-move {
+  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+</style>