feat: enhance UI consistency and improve spacing across components

- Added styles for player-side toast notifications to improve user feedback.
- Adjusted padding and spacing in various components for a more cohesive layout.
- Updated card and dialog components to streamline visual hierarchy and enhance readability.
- Refactored player panel and navigation elements for better alignment and user experience.

src/features/hall/hall-betting-grid.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { CirclePlus, Ticket, Trash2, Star } from "lucide-react";
+import { CirclePlus, Lock, Ticket, Trash2, Star } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -865,7 +865,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
 
   if (catalogState.kind === "error") {
     return (
-      <section className="rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700">
+      <section className="rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">
         <p>{catalogState.message}</p>
         <Button
           type="button"
@@ -886,7 +886,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
 
   return (
     <>
-      <section className="space-y-4" aria-label={t("hall.aria")}>
+      <section className="space-y-3" aria-label={t("hall.aria")}>
         <div className="rounded-xl border border-[#e8eef7] bg-white p-1 shadow-[0_6px_18px_rgba(30,64,175,0.06)]">
           <div className="grid grid-cols-4 gap-1">
             {categoryTabs.map((tab) => {
@@ -920,7 +920,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
         </div>
 
         {jackpot?.enabled ? (
-          <div className="rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 via-white to-[#f8fbff] px-4 py-3">
+          <div className="rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 via-white to-[#f8fbff] px-3 py-2.5">
             <div className="flex flex-wrap items-center justify-between gap-2">
               <div>
                 <p className="text-[11px] font-black uppercase tracking-normal text-amber-700">
@@ -946,7 +946,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
             <div className="mx-auto flex size-14 items-center justify-center rounded-full bg-slate-200 text-slate-600">
               <Ticket className="size-7" aria-hidden />
             </div>
-            <p className="mt-4 text-lg font-bold text-slate-900">
+            <p className="mt-3 text-lg font-bold text-slate-900">
               {t("hall.closed.title")}
             </p>
             <p className="mt-1 text-xs">{t("hall.closed.subtitle")}</p>
@@ -1236,7 +1236,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
               </button>
             </div>
 
-            <div className="flex items-center justify-between rounded-xl border border-[#e9eef7] bg-[#f8fbff] px-4 py-3 text-sm shadow-[0_6px_20px_rgba(15,23,42,0.04)]">
+            <div className="flex items-center justify-between rounded-xl border border-[#e9eef7] bg-[#f8fbff] px-3 py-2.5 text-sm shadow-[0_6px_20px_rgba(15,23,42,0.04)]">
               <span className="text-xs font-medium text-slate-500">
                 {t("hall.table.draftTotal")}
               </span>
@@ -1255,9 +1255,18 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
               type="button"
               disabled={!canSubmit || previewLoading}
               onClick={() => void handlePreview()}
-              className="h-12 w-full rounded-xl border-0 bg-[#e5002c] text-base font-bold text-white shadow-[0_8px_20px_rgba(229,0,44,0.26)] hover:bg-[#d10028]"
+              className={cn(
+                "h-12 w-full gap-2 rounded-xl border-0 text-base font-bold text-white",
+                !isBettable
+                  ? "bg-slate-500 shadow-none hover:bg-slate-500 disabled:opacity-100"
+                  : "bg-[#e5002c] shadow-[0_8px_20px_rgba(229,0,44,0.26)] hover:bg-[#d10028]",
+              )}
             >
-              <Ticket className="size-5" aria-hidden />
+              {!isBettable ? (
+                <Lock className="size-5 shrink-0" aria-hidden />
+              ) : (
+                <Ticket className="size-5 shrink-0" aria-hidden />
+              )}
               {previewLoading
                 ? t("hall.table.previewing")
                 : !isBettable