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

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

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>