feat: 优化大厅下注结果与风险提示展示，重构期号与订单详情样式

src/features/orders/ticket-order-detail-screen.tsx

@@ -5,7 +5,7 @@ import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { getTicketItemDetail } from "@/api/ticket-items";
-import { Button, buttonVariants } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
 import { PlayerPanel } from "@/components/layout/player-panel";
 import {
   Card,
@@ -74,7 +74,7 @@ export function TicketOrderDetailScreen({ ticketNo }: { ticketNo: string }) {
       <PlayerPanel
         title={t("orders.betDetail")}
         subtitle={ticketNo}
-        eyebrow={t("orders.title")}
+        eyebrow={t("brand.name")}
         backHref="/orders"
         backLabel={t("orders.title")}
       >
@@ -91,13 +91,18 @@ export function TicketOrderDetailScreen({ ticketNo }: { ticketNo: string }) {
       <PlayerPanel
         title={t("orders.betDetail")}
         subtitle={ticketNo}
-        eyebrow={t("orders.title")}
+        eyebrow={t("brand.name")}
         backHref="/orders"
         backLabel={t("orders.title")}
       >
         <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700">
           <p>{error ?? t("orders.noData")}</p>
-          <Button type="button" size="sm" variant="secondary" onClick={() => void load()}>
+          <Button
+            type="button"
+            size="sm"
+            className="mt-3 bg-[#e5002c] text-white hover:bg-[#d10028]"
+            onClick={() => void load()}
+          >
             {t("actions.retry")}
           </Button>
         </div>
@@ -145,72 +150,87 @@ export function TicketOrderDetailScreen({ ticketNo }: { ticketNo: string }) {
     <PlayerPanel
       title={t("orders.betDetail")}
       subtitle={data.ticket_no}
-      eyebrow={t("orders.title")}
+      eyebrow={t("brand.name")}
       backHref="/orders"
       backLabel={t("orders.title")}
     >
       <div className="flex flex-col gap-4">
-        <Card className="rounded-xl border-[#e5edf8] shadow-[0_8px_24px_rgba(15,23,42,0.05)]">
-          <CardHeader className="space-y-2 pb-2">
+        <Card className="ring-0 border border-[#e8eef7] bg-white shadow-[0_8px_28px_rgba(15,23,42,0.05)]">
+          <CardHeader className="space-y-2 border-b border-[#edf2f9] pb-3">
             <div className="flex flex-wrap items-center justify-between gap-2">
-              <CardTitle className="text-base">{t("orders.detailTitle")}</CardTitle>
+              <CardTitle className="text-base font-black text-[#0b3f96]">
+                {t("orders.detailTitle")}
+              </CardTitle>
               <StatusDot label={st.label} dotClass={st.dotClass} ring={st.ring} />
             </div>
-            <CardDescription className="font-mono text-xs">
+            <CardDescription className="font-mono text-[11px] leading-relaxed text-slate-500">
               {t("orders.ticketNo", { ticketNo: data.ticket_no })} ·{" "}
               {t("orders.orderNo", { orderNo: data.order_no ?? "—" })}
             </CardDescription>
           </CardHeader>
-          <CardContent className="space-y-3 text-sm">
-            <div className="grid gap-1 text-xs">
-              <p>
-                <span className="text-muted-foreground">{t("orders.drawNo")}</span>{" "}
-                <span className="font-mono font-medium">{data.draw_no ?? "—"}</span>
-              </p>
-              <p>
-                <span className="text-muted-foreground">{t("orders.placedAt")}</span>{" "}
-                {formatLotteryInstant(data.placed_at ?? null)}
-              </p>
-              <p>
-                <span className="text-muted-foreground">{t("orders.number")}</span>{" "}
-                <span className="font-mono">{data.original_number ?? "—"}</span>
-              </p>
-              <p>
-                <span className="text-muted-foreground">{t("orders.play")}</span>{" "}
-                {playLabel(data.play_code, t)} (
-                {data.dimension ?? "—"}D)
-              </p>
-              <p>
-                <span className="text-muted-foreground">{t("orders.amount")}</span>{" "}
-                {formatMinorAsCurrency(data.total_bet_amount, cur)}
-              </p>
-              <p>
-                <span className="text-muted-foreground">{t("orders.rebateRate")}</span>{" "}
-                {(Number(data.rebate_rate_snapshot) * 100).toFixed(1)}%
-              </p>
-              <p>
-                <span className="text-muted-foreground">{t("orders.actualDeduct")}</span>{" "}
-                {formatMinorAsCurrency(data.actual_deduct_amount, cur)}
+          <CardContent className="space-y-4 text-sm">
+            <div className="space-y-2.5 text-xs">
+              <div className="flex items-baseline justify-between gap-3">
+                <span className="shrink-0 text-slate-500">{t("orders.drawNo")}</span>
+                <span className="text-right font-mono font-black text-[#0b3f96]">
+                  {data.draw_no ?? "—"}
+                </span>
+              </div>
+              <div className="flex items-baseline justify-between gap-3">
+                <span className="shrink-0 text-slate-500">{t("orders.placedAt")}</span>
+                <span className="text-right font-medium text-slate-800">
+                  {formatLotteryInstant(data.placed_at ?? null)}
+                </span>
+              </div>
+              <div className="flex items-baseline justify-between gap-3">
+                <span className="shrink-0 text-slate-500">{t("orders.number")}</span>
+                <span className="text-right font-mono text-base font-black text-[#0b3f96]">
+                  {data.original_number ?? "—"}
+                </span>
+              </div>
+              <div className="flex items-baseline justify-between gap-3">
+                <span className="shrink-0 text-slate-500">{t("orders.play")}</span>
+                <span className="text-right font-semibold text-[#32518d]">
+                  {playLabel(data.play_code, t)} ({data.dimension ?? "—"}D)
+                </span>
+              </div>
+              <div className="flex items-baseline justify-between gap-3">
+                <span className="shrink-0 text-slate-500">{t("orders.amount")}</span>
+                <span className="text-right font-black tabular-nums text-[#d81435]">
+                  {formatMinorAsCurrency(data.total_bet_amount, cur)}
+                </span>
+              </div>
+              <div className="flex items-baseline justify-between gap-3">
+                <span className="shrink-0 text-slate-500">{t("orders.rebateRate")}</span>
+                <span className="text-right font-semibold tabular-nums text-emerald-600">
+                  {(Number(data.rebate_rate_snapshot) * 100).toFixed(1)}%
+                </span>
+              </div>
+              <div className="flex items-baseline justify-between gap-3">
+                <span className="shrink-0 text-slate-500">{t("orders.actualDeduct")}</span>
+                <span className="text-right font-black tabular-nums text-[#0b3f96]">
+                  {formatMinorAsCurrency(data.actual_deduct_amount, cur)}
+                </span>
+              </div>
+            </div>
+
+            <div className="rounded-lg border border-[#c8daf6] bg-[#f0f6ff] px-3 py-2.5 text-xs">
+              <p className="font-bold text-[#0b3f96]">{t("orders.oddsSnapshot")}</p>
+              <p className="mt-1 leading-relaxed text-[#32518d]">
+                {formatOddsSnapshot(data.odds_snapshot_json, t)}
               </p>
             </div>
 
-          <div className="rounded-md border bg-muted/30 px-3 py-2 text-xs">
-            <p className="font-medium text-foreground">{t("orders.oddsSnapshot")}</p>
-            <p className="mt-1 text-muted-foreground">
-              {formatOddsSnapshot(data.odds_snapshot_json, t)}
-            </p>
-          </div>
-
           {pub?.results ? (
             <div className="space-y-2">
-              <p className="text-sm font-medium">{t("orders.drawNumbers")}</p>
+              <p className="text-sm font-bold text-[#0b3f96]">{t("orders.drawNumbers")}</p>
               <TwentyThreeResultsGrid numbers={pub.results} highlighted4d={highlight} />
               {first ? (
-                <p className="text-xs text-muted-foreground">
+                <p className="text-xs text-slate-500">
                   {t("orders.firstPrize")}{" "}
-                  <span className="font-mono font-semibold text-foreground">{first}</span>
+                  <span className="font-mono font-semibold text-slate-900">{first}</span>
                   {comboHits.length > 0 ? (
-                    <span className="text-emerald-600 dark:text-emerald-400">
+                    <span className="font-semibold text-emerald-600">
                       {" "}
                       ← {t("orders.hit")}
                     </span>
@@ -219,15 +239,17 @@ export function TicketOrderDetailScreen({ ticketNo }: { ticketNo: string }) {
               ) : null}
             </div>
           ) : (
-            <p className="text-xs text-muted-foreground">{t("orders.notPublished")}</p>
+            <p className="rounded-lg border border-[#dce7f7] bg-[#f8fbff] px-3 py-2 text-xs text-[#32518d]">
+              {t("orders.notPublished")}
+            </p>
           )}
 
           {data.settlement && tierLabel ? (
-            <div className="rounded-md border border-emerald-500/20 bg-emerald-500/5 px-3 py-2 text-xs">
-              <p className="font-medium text-emerald-900 dark:text-emerald-100">
+            <div className="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs">
+              <p className="font-bold text-emerald-900">
                 {t("orders.matchWin", { tier: tierLabel })}
               </p>
-              <p className="mt-1 font-mono text-muted-foreground">
+              <p className="mt-1 font-mono text-emerald-800/90">
                 {t("orders.winAmount", {
                   amount: formatMinorAsCurrency(data.settlement.win_amount_minor, cur),
                 })}
@@ -244,32 +266,39 @@ export function TicketOrderDetailScreen({ ticketNo }: { ticketNo: string }) {
                   </>
                 ) : null}
               </p>
-              <p className="mt-1 font-mono text-muted-foreground">
+              <p className="mt-1 font-mono font-semibold text-emerald-900">
                 {t("orders.payoutTotal", { amount: formatMinorAsCurrency(totalWin, cur) })}
               </p>
             </div>
           ) : data.status === "settled_lose" ? (
-            <p className="text-xs text-muted-foreground">{t("orders.matchLose")}</p>
+            <p className="text-xs text-slate-500">{t("orders.matchLose")}</p>
           ) : null}
 
           {data.settled_at ? (
-            <p className="text-[11px] text-muted-foreground">
+            <p className="text-[11px] text-slate-500">
               {t("orders.settledAt", { time: formatLotteryInstant(data.settled_at) })}
             </p>
           ) : null}
           </CardContent>
         </Card>
 
-        <div className="flex flex-wrap gap-2">
+        <div className="flex flex-wrap gap-3">
           {data.draw_no ? (
             <Link
               href={`/results/${encodeURIComponent(data.draw_no)}`}
-              className={cn(buttonVariants({ variant: "outline", size: "sm" }))}
+              className={cn(
+                "inline-flex h-11 min-w-[140px] flex-1 items-center justify-center rounded-xl bg-[#07459f] px-4 text-sm font-bold text-white shadow-sm transition-colors hover:bg-[#063b88]",
+              )}
             >
               {t("orders.viewDraw")}
             </Link>
           ) : null}
-          <Link href="/orders" className={cn(buttonVariants({ variant: "secondary", size: "sm" }))}>
+          <Link
+            href="/orders"
+            className={cn(
+              "inline-flex h-11 min-w-[140px] flex-1 items-center justify-center rounded-xl border border-[#dce7f7] bg-white px-4 text-sm font-semibold text-[#07459f] transition-colors hover:bg-[#f1f6ff]",
+            )}
+          >
             {t("orders.backToOrders")}
           </Link>
         </div>