Backend

frontend/src/lib/components/MixWorkspace.svelte

@@ -2,6 +2,7 @@
   import { goto, invalidateAll } from '$app/navigation';
   import { api } from '$lib/api';
   import { clientSession } from '$lib/session';
+  import { toast } from '$lib/toast';
   import type { Mix, MixIngredient, RawMaterial } from '$lib/types';
 
   type DraftIngredient = {
@@ -166,16 +167,14 @@
   }
 
   async function saveMix() {
-    feedback = '';
-    errorMessage = '';
-
     const validationWarnings = getDraftWarnings();
     if (validationWarnings.length) {
-      errorMessage = validationWarnings[0];
+      toast.error(validationWarnings[0]);
       return;
     }
 
     isSaving = true;
+    const tid = toast.loading(savedMix ? 'Saving mix…' : 'Creating mix…');
 
     try {
       const cleanIngredients = getCleanIngredients();
@@ -194,6 +193,8 @@
           }))
         });
 
+        toast.dismiss(tid);
+        toast.success('Mix created');
         await invalidateAll();
         await goto(`/mixes/${created.id}`);
         return;
@@ -263,9 +264,11 @@
       const refreshed = await api.mix(savedMix.id);
       await invalidateAll();
       loadDraftFromMix(refreshed);
-      feedback = 'Mix saved with updated ingredient costing.';
+      toast.dismiss(tid);
+      toast.success('Mix saved');
     } catch (error) {
-      errorMessage = error instanceof Error ? error.message : 'Unable to save mix';
+      toast.dismiss(tid);
+      toast.error(error instanceof Error ? error.message : 'Unable to save mix');
     } finally {
       isSaving = false;
     }
@@ -644,8 +647,8 @@
   .primary-button {
     border: none;
     color: #fff;
-    background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
-    box-shadow: 0 8px 20px rgba(34, 169, 94, 0.18);
+    background: var(--color-brand);
+    box-shadow: none;
   }
 
   .secondary-button {