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/wallet/wallet-transfer-forms.tsx

@@ -24,6 +24,7 @@ import {
   parseDecimalInputToMinor,
 } from "@/lib/money";
 import { useCurrencyCatalog } from "@/hooks/use-currency-catalog";
+import { randomIdempotentKey } from "@/lib/utils";
 import { formatWalletClientError } from "@/lib/wallet-api-error";
 import { LotteryApiBizError } from "@/types/api/errors";
 
@@ -57,7 +58,7 @@ type PanelVariant = "dialog" | "page";
 
 function TransferInfoBlock({ children }: { children: ReactNode }) {
   return (
-    <div className="rounded-lg border border-border bg-muted/40 px-4 py-3 text-sm leading-relaxed">
+    <div className="rounded-lg border border-border bg-muted/40 px-3 py-2.5 text-sm leading-relaxed">
       {children}
     </div>
   );
@@ -160,7 +161,7 @@ export function TransferInPanel({
       await postWalletTransferIn({
         amount: parsedMinor,
         currency,
-        idempotent_key: crypto.randomUUID(),
+        idempotent_key: randomIdempotentKey(),
       });
       toast.success(t("wallet.successIn"));
       setAmountText("");
@@ -205,7 +206,7 @@ export function TransferInPanel({
 
   return (
     <>
-      <div className="grid gap-4">
+      <div className="grid gap-3">
         <TransferInfoBlock>
           <p className="text-muted-foreground">
             {t("wallet.mainBalance")}{" "}
@@ -292,7 +293,7 @@ export function TransferOutPanel({
       await postWalletTransferOut({
         amount: parsedMinor,
         currency,
-        idempotent_key: crypto.randomUUID(),
+        idempotent_key: randomIdempotentKey(),
       });
       toast.success(t("wallet.successOut"));
       setAmountText("");
@@ -337,7 +338,7 @@ export function TransferOutPanel({
 
   return (
     <>
-      <div className="grid gap-4">
+      <div className="grid gap-3">
         <TransferInfoBlock>
           <p className="text-muted-foreground">
             {t("wallet.lotteryAvailable")}{" "}
@@ -395,8 +396,6 @@ export function TransferInPage({
   return (
     <PlayerPanel
       title={t("wallet.transferInTitle")}
-      subtitle={t("wallet.transferInSubtitle", { currency })}
-      eyebrow={t("wallet.title")}
       backHref="/wallet"
       backLabel={t("wallet.title")}
     >
@@ -431,8 +430,6 @@ export function TransferOutPage({
   return (
     <PlayerPanel
       title={t("wallet.transferOutTitle")}
-      subtitle={t("wallet.transferOutSubtitle", { currency })}
-      eyebrow={t("wallet.title")}
       backHref="/wallet"
       backLabel={t("wallet.title")}
     >