feat(App): enhance Toaster component with rich colors, close button, and custom toast options

src/app/App.tsx

@@ -234,7 +234,16 @@ function AppPage({ title, onBack }: { title: string; onBack: () => void }) {
   return (
     <WsProvider>
     <div className="size-full flex flex-col bg-neutral-50">
-      <Toaster position="bottom-center" offset="calc(4rem + env(safe-area-inset-bottom))" />
+      <Toaster
+        position="bottom-center"
+        offset="calc(4rem + env(safe-area-inset-bottom))"
+        richColors
+        closeButton
+        duration={5000}
+        toastOptions={{
+          style: { fontSize: '0.9rem', fontWeight: 500, padding: '14px 16px' },
+        }}
+      />
       <header className="bg-[#4d4d4d] px-0 py-0 flex-shrink-0" style={{ paddingTop: 'env(safe-area-inset-top)' }}>
         <div className="flex items-stretch justify-between min-h-[56px]">
           <button onClick={() => setCurrentPage('status')} className="flex items-center h-full">