refactor: 重构整体页面布局与样式，统一UI设计风格

- 重构PlayerAppShell，移除冗余头部导航与国际化依赖，统一页面背景与内边距
- 新增通用页面容器组件PlayerPanel，统一页面头部布局与样式
- 重构底部导航栏，调整图标、文案与样式，新增激活状态指示器
- 重构所有页面组件：大厅页、注单页、结果页、开奖面板等，统一使用新的UI组件与设计风格
- 优化状态标签、卡片、按钮等组件的视觉样式，统一配色与圆角规范
- 移除冗余依赖与注释代码，整理代码结构

src/components/layout/player-app-shell.tsx

@@ -1,13 +1,9 @@
 "use client";
 
-import Link from "next/link";
 import type { ReactNode } from "react";
-import { useTranslation } from "react-i18next";
 
-import { LanguageSwitcher } from "@/components/language-switcher";
 import { NetworkStatusBanner } from "@/components/network-status-banner";
 import { PlayerBottomNav } from "@/components/layout/player-bottom-nav";
-import { PlayerSessionBar } from "@/features/player/player-session-bar";
 
 type PlayerAppShellProps = {
   children: ReactNode;
@@ -21,25 +17,10 @@ type PlayerAppShellProps = {
  * 这里的 NetworkStatusBanner 仅用于 WebSocket 状态显示
  */
 export function PlayerAppShell({ children }: PlayerAppShellProps): ReactNode {
-  const { t } = useTranslation("layout");
-
   return (
-    <div className="flex min-h-dvh flex-col bg-background text-foreground">
-      {/* WebSocket 连接状态横幅（降级模式提示） */}
+    <div className="min-h-dvh bg-[#f3f7fd] text-foreground">
       <NetworkStatusBanner />
-      <header className="sticky top-0 z-40 shrink-0 border-b border-border bg-background/95 backdrop-blur-sm supports-[backdrop-filter]:bg-background/80">
-        <div className="mx-auto flex h-12 max-w-lg items-center gap-2 px-4">
-          <Link
-            href="/hall"
-            className="shrink-0 text-sm font-semibold tracking-tight text-foreground no-underline hover:opacity-90"
-          >
-            {t("brand.title")}
-          </Link>
-          <PlayerSessionBar className="min-w-0 flex-1 border-l border-border pl-2" />
-          <LanguageSwitcher variant="minimal" showFlag={false} />
-        </div>
-      </header>
-      <main className="mx-auto flex w-full max-w-lg flex-1 flex-col gap-4 px-4 pb-[calc(3.5rem+env(safe-area-inset-bottom,0px)+0.75rem)] pt-4">
+      <main className="mx-auto flex w-full max-w-lg flex-col px-3 pb-[calc(4.25rem+env(safe-area-inset-bottom,0px)+0.75rem)] pt-3 sm:px-4">
         {children}
       </main>
       <PlayerBottomNav />

src/components/layout/player-bottom-nav.tsx

@@ -3,30 +3,30 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
-import { LayoutGrid, Receipt, Trophy, Wallet } from "lucide-react";
+import { BarChart3, ClipboardList, Home, Wallet } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
 const tabs = [
-  { href: "/hall", label: "大厅", icon: LayoutGrid, match: (p: string) => p === "/hall" },
+  { href: "/hall", label: "Home", icon: Home, match: (p: string) => p === "/hall" },
+  {
+    href: "/results",
+    label: "Results",
+    icon: BarChart3,
+    match: (p: string) => p === "/results" || p.startsWith("/results/"),
+  },
   {
     href: "/orders",
-    label: "注单",
-    icon: Receipt,
+    label: "My Bets",
+    icon: ClipboardList,
     match: (p: string) => p === "/orders" || p.startsWith("/orders/"),
   },
   {
     href: "/wallet",
-    label: "钱包",
+    label: "Wallet",
     icon: Wallet,
     match: (p: string) => p === "/wallet" || p.startsWith("/wallet/"),
   },
-  {
-    href: "/results",
-    label: "开奖",
-    icon: Trophy,
-    match: (p: string) => p === "/results" || p.startsWith("/results/"),
-  },
 ] as const;
 
 /**
@@ -37,10 +37,10 @@ export function PlayerBottomNav() {
 
   return (
     <nav
-      className="fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-background/95 pb-[env(safe-area-inset-bottom,0px)] backdrop-blur-md supports-[backdrop-filter]:bg-background/90"
+      className="fixed bottom-0 left-0 right-0 z-50 border-t border-[#e4ebf5] bg-white/96 pb-[env(safe-area-inset-bottom,0px)] shadow-[0_-10px_30px_rgba(15,23,42,0.08)] backdrop-blur-md"
       aria-label="主导航"
     >
-      <div className="mx-auto grid h-14 w-full max-w-lg grid-rows-1 [grid-template-columns:repeat(4,minmax(0,1fr))]">
+      <div className="mx-auto grid h-16 w-full max-w-lg grid-rows-1 [grid-template-columns:repeat(4,minmax(0,1fr))]">
         {tabs.map(({ href, label, icon: Icon, match }) => {
           const active = match(pathname);
           return (
@@ -50,15 +50,18 @@ export function PlayerBottomNav() {
               prefetch
               aria-current={active ? "page" : undefined}
               className={cn(
-                "flex min-h-0 min-w-0 max-w-full flex-col items-center justify-center gap-0.5 px-0.5 text-center text-[10px] font-medium leading-tight transition-colors sm:text-[11px]",
+                "relative flex min-h-0 min-w-0 max-w-full flex-col items-center justify-center gap-1 px-0.5 text-center text-[10px] font-semibold leading-tight transition-colors sm:text-[11px]",
                 active
-                  ? "text-primary"
-                  : "text-muted-foreground hover:text-foreground active:text-foreground",
+                  ? "text-[#f10b32]"
+                  : "text-[#6b7280] hover:text-[#1f2937] active:text-[#1f2937]",
               )}
             >
+              {active ? (
+                <span className="absolute top-0 h-0.5 w-9 rounded-full bg-[#f10b32]" />
+              ) : null}
               <Icon
                 aria-hidden
-                className={cn("size-5 shrink-0 sm:size-[22px]", active && "stroke-[2.25px]")}
+                className={cn("size-5 shrink-0 sm:size-[22px]", active && "stroke-[2.5px]")}
               />
               <span className="w-full truncate">{label}</span>
             </Link>

src/components/layout/player-panel.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import Link from "next/link";
+import type { ReactNode } from "react";
+
+import { Bell, ChevronLeft } from "lucide-react";
+
+import { LanguageSwitcher } from "@/components/language-switcher";
+import { cn } from "@/lib/utils";
+
+type PlayerPanelProps = {
+  title: string;
+  subtitle?: string;
+  eyebrow?: string;
+  children: ReactNode;
+  backHref?: string;
+  backLabel?: string;
+  className?: string;
+};
+
+export function PlayerPanel({
+  title,
+  subtitle,
+  eyebrow,
+  children,
+  backHref = "/hall",
+  backLabel = "Home",
+  className,
+}: PlayerPanelProps) {
+  return (
+    <div className="mx-auto w-full max-w-[480px]">
+      <section
+        className={cn(
+          "overflow-hidden rounded-[18px] border border-[#dce7f7] bg-white px-2.5 py-3 text-slate-900 shadow-[0_18px_50px_rgba(15,44,92,0.12)]",
+          className,
+        )}
+      >
+        <div className="mb-3 flex items-center gap-2 px-1">
+          <Link
+            href={backHref}
+            className="flex h-9 shrink-0 items-center gap-1 rounded-full border border-[#e4eaf4] bg-[#f8fafc] px-2.5 text-xs font-bold text-[#0b3f96] hover:bg-[#f1f6ff]"
+          >
+            <ChevronLeft className="size-4" aria-hidden />
+            {backLabel}
+          </Link>
+          <div className="min-w-0 flex-1 text-center">
+            {eyebrow ? (
+              <p className="truncate text-[10px] font-bold uppercase text-[#f10b32]">
+                {eyebrow}
+              </p>
+            ) : null}
+            <h1 className="truncate text-lg font-black tracking-normal text-[#0b3f96]">
+              {title}
+            </h1>
+            {subtitle ? (
+              <p className="truncate text-[11px] font-medium text-slate-500">
+                {subtitle}
+              </p>
+            ) : null}
+          </div>
+          <LanguageSwitcher
+            variant="minimal"
+            showFlag={false}
+            className="shrink-0 rounded-full border border-[#e4eaf4] bg-[#f8fafc]"
+          />
+          <button
+            type="button"
+            className="relative flex size-9 shrink-0 items-center justify-center rounded-full text-[#1d57b7] hover:bg-[#f4f7fb]"
+            aria-label="Notifications"
+          >
+            <Bell className="size-5" aria-hidden />
+            <span className="absolute right-2 top-2 size-2 rounded-full bg-[#ff143d]" />
+          </button>
+        </div>
+        {children}
+      </section>
+    </div>
+  );
+}