diff --git a/frontend/src/components/Toaster.tsx b/frontend/src/components/Toaster.tsx
index 9aa0928..0b94953 100644
--- a/frontend/src/components/Toaster.tsx
+++ b/frontend/src/components/Toaster.tsx
@@ -31,13 +31,13 @@ export default function Toaster() {
   const toasts = useSyncExternalStore(subscribe, getActiveToasts, getActiveToasts);
 
   return (
-    <div className="fixed top-4 right-4 z-50 flex flex-col gap-2 w-80 max-w-[calc(100vw-2rem)]">
+    <div className="absolute bottom-4 left-4 z-50 flex flex-col gap-2 w-80 max-w-[calc(100vw-2rem)]">
       {toasts.map((toast) => {
         const { icon: Icon, color, bar } = LEVEL_STYLE[toast.level];
         return (
           <div
             key={toast.id}
-            className="glass relative overflow-hidden rounded-xl px-3 py-3 flex items-start gap-3 animate-[popIn_0.16s_ease]"
+            className="toast-card glass relative overflow-hidden rounded-xl px-3 py-3 flex items-start gap-3 animate-[popIn_0.16s_ease]"
           >
             <Icon className={`w-5 h-5 shrink-0 mt-0.5 ${color}`} />
             <div className="min-w-0 flex-1">
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 6225ce3..59a35fa 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -93,6 +93,12 @@ html[data-theme="dark"] .glass-menu {
   backdrop-filter: blur(30px) saturate(1.7) brightness(1.4);
   -webkit-backdrop-filter: blur(30px) saturate(1.7) brightness(1.4);
 }
+/* Toasts surface bottom-left (by the nav's notification bell), off the conventional
+   top-right; a brighter rim draws the eye there. Most needed in dark mode, where the
+   default glass border (dark navy) all but vanishes against the backdrop. */
+html[data-theme="dark"] .toast-card {
+  border-color: color-mix(in srgb, #fff 50%, transparent);
+}
 
 /* Performance mode (Settings → Appearance) drops the expensive blur + soft shadows. */
 html[data-perf="1"] .glass,