.ui-notifications { position: fixed; top: 24px; right: 20px; z-index: 2000; display: grid; gap: 10px; width: min(390px, calc(100vw - 32px)); max-height: calc(100dvh - 100px); overflow-y: auto; pointer-events: none; padding: 1px 2px 12px; }
.ui-notification { --notice-accent: #4f8cf7; --notice-tint: #edf5ff; display: grid; grid-template-columns: 32px minmax(0, 1fr) 24px; align-items: start; gap: 10px; padding: 14px 14px 14px 13px; background: var(--ui-surface, #fff); border: 1px solid var(--ui-line, #dfe5ec); border-radius: 11px; box-shadow: 0 16px 38px rgba(22, 38, 62, .15); color: var(--ui-ink, #172b4d); font: 13px/1.5 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; opacity: 0; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease; pointer-events: auto; }
.ui-notification.is-visible { opacity: 1; transform: translateY(0); }
.ui-notification--success { --notice-accent: #128a60; --notice-tint: #eaf8f1; }
.ui-notification--error { --notice-accent: #cf4655; --notice-tint: #fff0f1; }
.ui-notification--warning { --notice-accent: #b87713; --notice-tint: #fff6e7; }
.ui-notification-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--notice-tint); color: var(--notice-accent); font-size: 18px; font-weight: 700; }
.ui-notification-content { display: grid; gap: 2px; min-width: 0; padding-top: 1px; }
.ui-notification-content strong { color: var(--ui-ink, #172b4d); font-size: 13px; font-weight: 700; line-height: 1.4; }
.ui-notification-content > span { color: var(--ui-muted, #526477); font-size: 12px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; max-height: min(60dvh, 560px); overflow-y: auto; }
.ui-notification-close { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ui-muted, #526477); cursor: pointer; font: inherit; font-size: 20px; line-height: 1; }
.ui-notification-close:hover { background: var(--ui-hover, #f3f6fa); color: var(--ui-ink, #172b4d); }
.ui-notification-close:focus-visible { outline: 2px solid var(--ui-focus, #4f8cf7); outline-offset: 1px; }
html[data-ui-theme="dark"] .ui-notification { --notice-tint: var(--ui-surface-soft, #253345); }
@media (max-width: 680px) { .ui-notifications { top: 16px; right: 14px; } }
@media (prefers-reduced-motion: reduce) { .ui-notification { transition: none; } }