Replace single toast with stacked toast queue

Multiple toasts can appear simultaneously, capped at 3. Oldest
toast auto-evicts when cap is reached. Each toast auto-dismisses
with a fade-up exit animation.

- frontend/app.js: toast() now creates DOM elements in toastContainer
- frontend/index.html: single #toast replaced with #toastContainer
- frontend/styles.css: .toast-container flexbox row, .toast-exit animation

frontend/styles.css

@@ -922,19 +922,42 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
 .btn.danger:hover { background: rgba(255,75,50,0.12); }
 
 /* ===================== Toast ===================== */
+.toast-container {
+  position: fixed;
+  bottom: 26px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 200;
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
+  gap: 8px;
+  pointer-events: none;
+}
 .toast {
-  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
   background: var(--bg-3);
   border: 1px solid var(--line);
   color: var(--text);
   padding: 13px 20px;
   border-radius: 11px;
   box-shadow: var(--shadow);
-  z-index: 200;
-  font-size: 13.5px; font-weight: 500;
+  font-size: 13.5px;
+  font-weight: 500;
+  white-space: nowrap;
   animation: toastIn 0.3s var(--ease);
+  pointer-events: auto;
+}
+@keyframes toastIn {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.toast-exit {
+  animation: toastOut 0.25s var(--ease) forwards;
+}
+@keyframes toastOut {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-8px); }
 }
-@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
 
 /* ===================== Keyboard shortcut overlay ===================== */
 .shortcut-overlay {