feat: 优化下注异常清理与开奖结果详情展示

- 支持玩法关闭错误返回 cleanup_lines 时自动清空对应下注格并提示原因
- 调整下注预览与下注结果金额汇总文案，补充金额、回水、合计多语言翻译
- 下注结果弹窗新增注单状态展示
- 重构开奖结果详情页样式，强化前三名、派奖提示与查看中奖入口展示
- 精简底部导航激活态视觉效果

src/features/results/draw-result-detail-screen.tsx

@@ -159,96 +159,127 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
       <div className="flex flex-col gap-4">
         <JackpotResultsStrip currencyCode={currency} />
 
-        <Card className="rounded-xl border-[#e5edf8] shadow-[0_8px_24px_rgba(15,23,42,0.05)]">
-          <CardHeader className="space-y-3 pb-2">
+        <Card className="overflow-hidden border-[#e5edf8] bg-white shadow-[0_10px_28px_rgba(15,23,42,0.06)]">
+          <CardHeader className="space-y-3 border-b border-[#edf2f9] bg-[#f8fbff] pb-3">
             <div className="flex flex-wrap items-center justify-between gap-2">
               {data.previous_draw_no ? (
                 <Link
                   href={`/results/${encodeURIComponent(data.previous_draw_no)}`}
                   className={cn(
                     buttonVariants({ variant: "outline", size: "sm" }),
-                    "min-w-[5rem]",
+                    "min-w-[5rem] rounded-full border-[#dce7f7] bg-white text-[#0b56b7] hover:bg-[#f1f6ff]",
                   )}
                 >
                   {t("results.previous")}
                 </Link>
               ) : (
-                <Button type="button" variant="outline" size="sm" className="min-w-[5rem]" disabled>
+                <Button type="button" variant="outline" size="sm" className="min-w-[5rem] rounded-full border-[#e6edf8] bg-white text-slate-400" disabled>
                   {t("results.previous")}
                 </Button>
               )}
-              <CardTitle className="text-center font-mono text-lg">
-                {data.draw_no}
-              </CardTitle>
+              <div className="flex min-w-0 flex-1 flex-col items-center text-center">
+                <CardTitle className="truncate font-mono text-lg font-black text-[#0b3f96]">
+                  {data.draw_no}
+                </CardTitle>
+                <CardDescription className="mt-1 font-mono text-xs text-slate-500">
+                  {t("results.drawTime", {
+                    time: formatLotteryInstant(data.draw_time_iso ?? data.draw_time ?? null),
+                  })}
+                </CardDescription>
+              </div>
               {data.next_draw_no ? (
                 <Link
                   href={`/results/${encodeURIComponent(data.next_draw_no)}`}
                   className={cn(
                     buttonVariants({ variant: "outline", size: "sm" }),
-                    "min-w-[5rem]",
+                    "min-w-[5rem] rounded-full border-[#dce7f7] bg-white text-[#0b56b7] hover:bg-[#f1f6ff]",
                   )}
                 >
                   {t("results.next")}
                 </Link>
               ) : (
-                <Button type="button" variant="outline" size="sm" className="min-w-[5rem]" disabled>
+                <Button type="button" variant="outline" size="sm" className="min-w-[5rem] rounded-full border-[#e6edf8] bg-white text-slate-400" disabled>
                   {t("results.next")}
                 </Button>
               )}
             </div>
-            <CardDescription className="text-center font-mono text-sm">
-              {t("results.drawTime", {
-                time: formatLotteryInstant(data.draw_time_iso ?? data.draw_time ?? null),
-              })}
-            </CardDescription>
           </CardHeader>
-          <CardContent className="pt-2">
+          <CardContent className="space-y-4 pt-4">
+            <div className="rounded-xl border border-[#e8eef7] bg-[#f8fbff] p-3 shadow-[0_4px_14px_rgba(15,23,42,0.04)]">
+              <div className="flex items-center justify-between gap-2">
+                <p className="text-sm font-black text-[#0b3f96]">
+                  {t("results.detailTitle")}
+                </p>
+                <span className="rounded-full bg-[#f2f6ff] px-2.5 py-1 text-xs font-bold text-[#0b56b7]">
+                  {t("results.detail")}
+                </span>
+              </div>
+              <div className="mt-3 grid grid-cols-3 gap-2 text-center">
+                {[
+                  ["1st", data.results["1st"]],
+                  ["2nd", data.results["2nd"]],
+                  ["3rd", data.results["3rd"]],
+                ].map(([label, value]) => (
+                  <div
+                    key={label}
+                    className="rounded-lg border border-[#edf2f8] bg-white py-2 shadow-[0_4px_12px_rgba(15,23,42,0.03)]"
+                  >
+                    <p className="text-[10px] font-bold uppercase text-[#7890b8]">{label}</p>
+                    <p className="mt-1 font-mono text-lg font-black tabular-nums text-[#e5002c]">
+                      {value}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
             <TwentyThreeResultsGrid
               numbers={data.results}
               highlighted4d={highlightSet ?? undefined}
             />
 
-          {showMyPayout && myTotals ? (
-            <div className="mt-4 rounded-md border border-emerald-500/25 bg-emerald-500/5 px-3 py-2 text-sm">
-              <p className="font-medium text-emerald-900 dark:text-emerald-100">
-                {t("results.myPayout")}
-              </p>
-              <p className="mt-1 font-mono text-xs tabular-nums text-muted-foreground">
-                {t("results.regular", {
-                  amount: formatMinorAsCurrency(myTotals.win, currency),
-                })}
-                {myTotals.jackpot > 0 ? (
-                  <>
-                    {" "}
-                    ·{" "}
-                    {t("results.jackpot", {
-                      amount: formatMinorAsCurrency(myTotals.jackpot, currency),
-                    })}
-                  </>
-                ) : null}
-              </p>
-            </div>
-          ) : null}
-          {showHitOnly ? (
-            <p className="mt-3 text-xs text-amber-900/90 dark:text-amber-100/90">
-              {t("results.hitPending")}
-            </p>
-          ) : null}
+            {showMyPayout && myTotals ? (
+              <div className="rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-3 text-sm shadow-[0_4px_14px_rgba(15,23,42,0.03)]">
+                <p className="font-bold text-emerald-900">
+                  {t("results.myPayout")}
+                </p>
+                <p className="mt-2 font-mono text-xs tabular-nums text-emerald-900/80">
+                  {t("results.regular", {
+                    amount: formatMinorAsCurrency(myTotals.win, currency),
+                  })}
+                  {myTotals.jackpot > 0 ? (
+                    <>
+                      {" "}
+                      ·{" "}
+                      {t("results.jackpot", {
+                        amount: formatMinorAsCurrency(myTotals.jackpot, currency),
+                      })}
+                    </>
+                  ) : null}
+                </p>
+              </div>
+            ) : null}
 
-          <div className="mt-4 flex flex-col gap-3">
-            <p className="text-xs text-muted-foreground">
-              {t("results.hitHint")}
-            </p>
-            <Link
-              href={`/orders?draw_no=${encodeURIComponent(data.draw_no)}`}
-              className={cn(
-                buttonVariants({ variant: "default", size: "sm" }),
-                "w-full sm:w-auto sm:self-start",
-              )}
-            >
-              {t("results.viewMyWinning")}
-            </Link>
-          </div>
+            {showHitOnly ? (
+              <div className="rounded-xl border border-amber-200 bg-amber-50 px-3 py-3 text-xs text-amber-950">
+                {t("results.hitPending")}
+              </div>
+            ) : null}
+
+            <div className="rounded-xl border border-[#e8eef7] bg-[#f8fbff] px-3 py-3">
+              <p className="text-xs leading-relaxed text-slate-500">
+                {t("results.hitHint")}
+              </p>
+              <Link
+                href={`/orders?draw_no=${encodeURIComponent(data.draw_no)}`}
+                className={cn(
+                  buttonVariants({ variant: "default", size: "sm" }),
+                  "mt-3 h-10 w-full rounded-xl bg-[#e5002c] text-white hover:bg-[#d10028] sm:w-auto",
+                )}
+              >
+                {t("results.viewMyWinning")}
+              </Link>
+            </div>
           </CardContent>
         </Card>
       </div>