fix(ui): close 5 P0 audit findings (ingredients, cost, routing, mobile slots)

Sprint 1 of the UI/UX audit (Review/ui-nielsen-audit.md).

- RecipeDetail: drop .trim() on ingredient line so unit and name no longer fuse
  ('2 canBlack Beans' -> '2 can Black Beans').
- MealDetail: align ingredient field name to backend ('qty' not 'quantity'),
  add 'ingredient.name' fallback for the missing nested name from API.
- MealDetail: '$N/A per serving' -> '$X.XX' or 'No estimate'.
- App: add /recommended alias to /recipes/recommended, plus a catch-all
  NotFound page so unrecognised URLs no longer render blank.
- Dashboard: remove 'hidden md:*' on empty meal slots so mobile users can
  tap Generate. Bump empty-slot button to 44px min-height (a11y).
- EmptyState: accept an optional 'to' prop for Link-wrapped actions.
- types: extend RecipeIngredient with optional notes and nested ingredient.

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter, Routes, Route, Link, useLocation } from 'react-router-dom'
+import { BrowserRouter, Routes, Route, Link, useLocation, Navigate } from 'react-router-dom'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ErrorBoundary } from './components/ErrorBoundary'
 import Dashboard from './pages/Dashboard'
@@ -8,6 +8,7 @@ import Recipes from './pages/Recipes'
 import Recommended from './pages/Recommended'
 import RecipeDetail from './pages/RecipeDetail'
 import ShoppingList from './pages/ShoppingList'
+import NotFound from './pages/NotFound'
 
 const queryClient = new QueryClient()
 
@@ -50,9 +51,11 @@ function App() {
                 <Route path="/meals/:id" element={<MealDetail />} />
                 <Route path="/recipes" element={<Recipes />} />
                 <Route path="/recipes/recommended" element={<Recommended />} />
+                <Route path="/recommended" element={<Navigate to="/recipes/recommended" replace />} />
                 <Route path="/recipes/:id" element={<RecipeDetail />} />
                 <Route path="/pantry" element={<Pantry />} />
                 <Route path="/shopping-list" element={<ShoppingList />} />
+                <Route path="*" element={<NotFound />} />
               </Routes>
             </main>
           </div>