improvement: toast component created and used every where in the app.

frontend/src/app/(dashboard)/settings/subscriptions/page.tsx

@@ -6,6 +6,7 @@ import { useRouter } from 'next/navigation';
 import { useAuth } from '@/lib/hooks/useAuth';
 import { authApi } from '@/lib/api/auth';
 import { Button } from '@/components/ui/common/Button';
+import { Toast } from '@/components/ui/common/Toast';
 import type { SubscriptionAlertData } from '@/types/subscription';
 
 const PLAN_OPTIONS = [
@@ -69,7 +70,7 @@ export default function SubscriptionsSettingsPage() {
           : 'text-red-400';
 
   return (
-    <div className="space-y-6">
+    <div className="relative space-y-6 pb-24">
       <div>
         <Link
           href="/today"
@@ -189,13 +190,16 @@ export default function SubscriptionsSettingsPage() {
           >
             Start purchase process
           </Button>
-          {purchaseNotice && (
-            <div className="rounded-[var(--radius-md)] border border-emerald-500/30 bg-emerald-500/10 px-4 py-3">
-              <p className="text-sm text-emerald-200">{purchaseNotice}</p>
-            </div>
-          )}
         </div>
       </div>
+
+      {purchaseNotice && (
+        <div className="fixed bottom-4 left-0 right-0 z-[70] px-4 pointer-events-none">
+          <div className="pointer-events-auto w-full">
+            <Toast variant="success">{purchaseNotice}</Toast>
+          </div>
+        </div>
+      )}
     </div>
   );
 }