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/results/check-winning-screen.tsx

@@ -90,7 +90,7 @@ export function CheckWinningScreen() {
 
   return (
     <PlayerPanel title={t("results.check.title")} backHref="/results" backLabel={t("results.title")}>
-      <div className="space-y-4">
+      <div className="space-y-3">
         <section className="overflow-hidden rounded-2xl border border-red-100 bg-white shadow-[0_12px_32px_rgba(15,23,42,0.06)]">
           <div className="bg-gradient-to-b from-red-50 to-white px-5 pb-5 pt-8 text-center">
             <div className="mx-auto flex size-24 items-center justify-center rounded-full bg-white text-[#e5002c] shadow-[0_18px_40px_rgba(229,0,44,0.14)]">
@@ -104,7 +104,7 @@ export function CheckWinningScreen() {
             </p>
           </div>
 
-          <div className="space-y-3 px-4 pb-4">
+          <div className="space-y-2.5 px-3 pb-3">
             <label className="block space-y-1.5">
               <span className="text-xs font-black text-slate-700">
                 {t("results.check.ticketNumber")}
@@ -265,7 +265,7 @@ function WinningResultDialog({
             <p className="font-black text-slate-950">
               {t("results.check.drawInfo")}
             </p>
-            <div className="mt-3 grid grid-cols-2 gap-4 text-slate-500">
+            <div className="mt-2.5 grid grid-cols-2 gap-3 text-slate-500">
               <div>
                 <p className="text-xs">{t("results.check.issueNo")}</p>
                 <p className="mt-1 font-mono font-black text-slate-900">{data.draw.draw_no}</p>

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

@@ -108,12 +108,10 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
     return (
       <PlayerPanel
         title={t("results.detailTitle")}
-        subtitle={drawNo}
-        eyebrow={t("results.title")}
         backHref="/results"
         backLabel={t("results.title")}
       >
-        <div className="space-y-4">
+        <div className="space-y-3">
           <Skeleton className="h-12 rounded-xl" />
           <Skeleton className="h-56 rounded-xl" />
         </div>
@@ -125,12 +123,10 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
     return (
       <PlayerPanel
         title={t("results.detailTitle")}
-        subtitle={drawNo}
-        eyebrow={t("results.title")}
         backHref="/results"
         backLabel={t("results.title")}
       >
-        <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700">
+        <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
           <p>{error ?? t("results.noData")}</p>
           <Button type="button" size="sm" variant="secondary" onClick={() => void load()}>
             {t("actions.retry")}
@@ -156,12 +152,10 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
   return (
     <PlayerPanel
       title={t("results.detailTitle")}
-      subtitle={data.draw_no}
-      eyebrow={t("results.title")}
       backHref="/results"
       backLabel={t("results.title")}
     >
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-3">
         <JackpotResultsStrip currencyCode={currency} />
 
         <Card className="overflow-hidden border-[#e5edf8] bg-white shadow-[0_10px_28px_rgba(15,23,42,0.06)]">
@@ -209,7 +203,7 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
               )}
             </div>
           </CardHeader>
-          <CardContent className="space-y-4 pt-4">
+          <CardContent className="space-y-3 pt-3">
             <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]">

src/features/results/draw-results-list-screen.tsx

@@ -108,8 +108,8 @@ export function DrawResultsListScreen() {
   }, [fetchList, lastPage, loading, loadingMore, page]);
 
   return (
-    <PlayerPanel title={t("results.title")} subtitle={t("results.subtitle")} eyebrow={t("brand.name")}>
-      <div className="space-y-4">
+    <PlayerPanel title={t("results.title")}>
+      <div className="space-y-3">
         <JackpotResultsStrip currencyCode={jackpotCurrency} />
 
         <div className="rounded-xl border border-[#e6edf8] bg-[#f8fbff] p-3">
@@ -215,7 +215,7 @@ export function DrawResultsListScreen() {
             <Skeleton className="h-28 rounded-xl" />
           </div>
         ) : error ? (
-          <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700">
+          <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
             <p>{error}</p>
             <Button
               type="button"
@@ -227,7 +227,7 @@ export function DrawResultsListScreen() {
             </Button>
           </div>
         ) : items && items.length === 0 ? (
-          <div className="rounded-xl border border-dashed border-[#dce7f7] bg-[#f8fbff] px-4 py-10 text-center text-sm text-slate-500">
+          <div className="rounded-xl border border-dashed border-[#dce7f7] bg-[#f8fbff] px-3 py-8 text-center text-sm text-slate-500">
             {t("results.empty")}
           </div>
         ) : (

src/features/results/twenty-three-results-grid.tsx

@@ -72,7 +72,7 @@ export function TwentyThreeResultsGrid({
   ];
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-3">
       <div className="grid grid-cols-3 gap-2">
         {prizeCards.map((card) => (
           <div