iter(g35): 新增 notification 通知卡片组件

packages/skin/ui/ui.css

@@ -2282,3 +2282,84 @@ button.ua-step-dot:hover {
     transition: none;
   }
 }
+
+/* —— 通知卡片 —— */
+.ua-notice-host {
+  position: fixed;
+  right: var(--ua-space-4);
+  bottom: var(--ua-space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ua-space-2);
+  z-index: 60;
+  pointer-events: none; /* 容器不挡点击，卡片自身恢复 */
+}
+.ua-notice {
+  width: 300px;
+  padding: var(--ua-space-3);
+  border: 1px solid var(--ua-color-border);
+  border-left: 3px solid var(--ua-color-accent);
+  border-radius: var(--ua-radius-md);
+  background: var(--ua-color-bg);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  pointer-events: auto;
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.ua-notice-open {
+  opacity: 1;
+  transform: none;
+}
+.ua-notice-success { border-left-color: var(--ua-color-success); }
+.ua-notice-warning { border-left-color: var(--ua-color-warning); }
+.ua-notice-danger  { border-left-color: var(--ua-color-danger); }
+.ua-notice-head {
+  display: flex;
+  align-items: center;
+  gap: var(--ua-space-1);
+}
+.ua-notice-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--ua-color-accent);
+  flex: none;
+}
+.ua-notice-success .ua-notice-dot { background: var(--ua-color-success); }
+.ua-notice-warning .ua-notice-dot { background: var(--ua-color-warning); }
+.ua-notice-danger .ua-notice-dot  { background: var(--ua-color-danger); }
+.ua-notice-title {
+  flex: 1;
+  font-size: var(--ua-font-size-md);
+  font-weight: 600;
+  color: var(--ua-color-text);
+}
+.ua-notice-close {
+  border: none;
+  background: none;
+  color: var(--ua-color-text-muted);
+  cursor: pointer;
+  line-height: 1;
+  padding: 0 2px;
+}
+.ua-notice-close:hover {
+  color: var(--ua-color-text);
+}
+.ua-notice-desc {
+  margin-top: var(--ua-space-1);
+  font-size: var(--ua-font-size-sm);
+  color: var(--ua-color-text-muted);
+  line-height: 1.5;
+}
+.ua-notice-action {
+  margin-top: var(--ua-space-2);
+  display: flex;
+  gap: var(--ua-space-1);
+  justify-content: flex-end;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ua-notice {
+    transition: none;
+  }
+}