feat: polish alpine shell feedback

apps/ui/css/pages.css

@@ -125,6 +125,77 @@
 
 .btn-icon.danger:hover { background: var(--red-bg); color: var(--red); border-color: var(--red-border); }
 
+/* ══════════════════════════════════════════════════
+   TOASTS
+══════════════════════════════════════════════════ */
+.toast-stack {
+  position: fixed;
+  top: 84px;
+  right: 20px;
+  z-index: 1200;
+  width: min(360px, calc(100vw - 32px));
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  pointer-events: none;
+}
+
+.toast-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 14px;
+  border: 1px solid var(--border);
+  background: rgba(15, 23, 34, 0.96);
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
+  pointer-events: auto;
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+
+.toast-card.closing {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+
+.toast-info { border-color: rgba(56, 189, 248, 0.28); }
+.toast-success { border-color: rgba(63, 185, 80, 0.32); }
+.toast-error { border-color: rgba(248, 81, 73, 0.34); }
+
+.toast-copy {
+  min-width: 0;
+  flex: 1;
+}
+
+.toast-title {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--text-primary);
+  margin-bottom: 3px;
+}
+
+.toast-message {
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--text-secondary);
+}
+
+.toast-close {
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.toast-close:hover { color: var(--text-primary); }
+
 /* ══════════════════════════════════════════════════
    SECTION CARD
 ══════════════════════════════════════════════════ */
@@ -1456,3 +1527,12 @@
   flex-shrink: 0;
   opacity: 0.7;
 }
+
+@media (max-width: 900px) {
+  .toast-stack {
+    top: 72px;
+    right: 16px;
+    left: 16px;
+    width: auto;
+  }
+}