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/orders/ticket-order-detail-screen.tsx

@@ -99,12 +99,10 @@ export function TicketOrderDetailScreen({ ticketNo }: { ticketNo: string }) {
     return (
       <PlayerPanel
         title={t("orders.betDetail")}
-        subtitle={ticketNo}
-        eyebrow={t("brand.name")}
         backHref="/orders"
         backLabel={t("orders.title")}
       >
-        <div className="space-y-4">
+        <div className="space-y-3">
           <Skeleton className="h-12 rounded-xl" />
           <Skeleton className="h-56 rounded-xl" />
         </div>
@@ -116,12 +114,10 @@ export function TicketOrderDetailScreen({ ticketNo }: { ticketNo: string }) {
     return (
       <PlayerPanel
         title={t("orders.betDetail")}
-        subtitle={ticketNo}
-        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">
+        <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
           <p>{error ?? t("orders.noData")}</p>
           <Button
             type="button"
@@ -179,12 +175,10 @@ export function TicketOrderDetailScreen({ ticketNo }: { ticketNo: string }) {
   return (
     <PlayerPanel
       title={t("orders.betDetail")}
-      subtitle={data.ticket_no}
-      eyebrow={t("brand.name")}
       backHref="/orders"
       backLabel={t("orders.title")}
     >
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-3">
         <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">
@@ -198,7 +192,7 @@ export function TicketOrderDetailScreen({ ticketNo }: { ticketNo: string }) {
               {t("orders.orderNo", { orderNo: data.order_no ?? "—" })}
             </CardDescription>
           </CardHeader>
-          <CardContent className="space-y-4 text-sm">
+          <CardContent className="space-y-3 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>

src/features/orders/ticket-orders-list-screen.tsx

@@ -156,11 +156,9 @@ export function TicketOrdersListScreen() {
   return (
     <PlayerPanel
       title={t("orders.title")}
-      subtitle={t("orders.subtitle")}
-      eyebrow={t("brand.name")}
       containerClassName="max-w-[720px]"
     >
-      <div className="space-y-4">
+      <div className="space-y-3">
         <div className="rounded-2xl border border-[#dfe9f8] bg-white p-3 shadow-[0_10px_28px_rgba(15,23,42,0.05)] sm:p-4">
           <div className="flex items-center justify-between gap-3">
             <div className="min-w-0 flex-1">
@@ -333,7 +331,7 @@ export function TicketOrdersListScreen() {
             ))}
           </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"
@@ -345,7 +343,7 @@ export function TicketOrdersListScreen() {
             </Button>
           </div>
         ) : items.length === 0 ? (
-          <div className="rounded-xl border border-dashed border-[#dce7f7] bg-[#f8fbff] px-4 py-10 text-center">
+          <div className="rounded-xl border border-dashed border-[#dce7f7] bg-[#f8fbff] px-3 py-8 text-center">
             <p className="text-sm font-bold text-slate-700">{t("orders.empty")}</p>
             <Link
               href="/hall"