.ux-foundations { position: relative; z-index: 2147483000; font-family: system-ui, sans-serif; }
.ux-feedback-toasts, .ux-feedback-errors { position: fixed; right: 1rem; left: auto; width: min(26rem, calc(100vw - 2rem)); display: grid; gap: .75rem; pointer-events: none; }
.ux-feedback-toasts { bottom: 1rem; }
.ux-feedback-errors { right: 1rem; bottom: 5.5rem; }
.ux-toast, .ux-error-banner { pointer-events: auto; border-radius: .75rem; box-shadow: 0 12px 28px rgba(15, 23, 42, .22); font-size: .9375rem; line-height: 1.5; }
.ux-toast { padding: .875rem 1rem; background: #1e293b; color: #fff; }
.ux-toast--success { background: #047857; }
.ux-toast--info { background: #1d4ed8; }
.ux-error-banner { padding: 1rem; background: #fff; border: 1px solid #fca5a5; color: #450a0a; }
.ux-error-banner__message, .ux-error-banner__request-id { margin: 0; }
.ux-error-banner__technical-details { margin-top: .75rem; color: #475569; font-size: .875rem; }
.ux-error-banner__technical-details summary { cursor: pointer; }
.ux-error-banner__request-id { margin-top: .375rem; font-size: .75rem; color: #7f1d1d; }
.ux-error-banner__actions, .ux-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.ux-button { min-height: 44px; padding: .625rem .875rem; border: 1px solid #64748b; border-radius: .5rem; background: #fff; color: #0f172a; font: inherit; font-weight: 700; cursor: pointer; }
.ux-button--retry { border-color: #1d4ed8; color: #1d4ed8; }
.ux-button--danger { border-color: #b91c1c; background: #b91c1c; color: #fff; }
.ux-button:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.ux-dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(15, 23, 42, .58); }
.ux-dialog { width: min(32rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; padding: 1.5rem; border-radius: .875rem; background: #fff; color: #0f172a; box-shadow: 0 24px 64px rgba(15, 23, 42, .35); }
.ux-dialog h2, .ux-dialog p { margin: 0; }
.ux-dialog h2 { font-size: 1.25rem; }
.ux-dialog p { margin-top: .75rem; }
.ux-dialog__detail { color: #475569; }
@media (max-width: 640px) { .ux-feedback-toasts, .ux-feedback-errors { right: 1rem; left: 1rem; width: auto; } .ux-feedback-errors { bottom: 5.5rem; max-height: calc(100vh - 7rem); overflow-y: auto; } .ux-dialog__actions { flex-direction: column-reverse; } .ux-button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .ux-foundations * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }