.ui-alert {
    --alert-accent: #25a49d;
    --alert-background: #e3fbfa;
    --alert-heading: #25a49d;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: 22px;
    padding: 24px;
    border-left: 6px solid var(--alert-accent);
    border-radius: 8px;
    background: var(--alert-background);
    font-family: Inter, sans-serif;
}
.ui-alert-warning { --alert-accent: #d87e00; --alert-background: #fff2de; --alert-heading: #9d5425; }
.ui-alert-success { --alert-accent: #849e03; --alert-background: #f0f6d1; --alert-heading: #151320; gap: 25px; }
.ui-alert-danger { --alert-accent: #ff5757; --alert-background: #ffe6e6; --alert-heading: #bc1c21; box-shadow: 0 2px 10px rgb(0 0 0 / 8%); }
.ui-alert-info { align-items: center; }
.ui-alert-icon { display: flex; flex: 0 0 34px; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 6px; background: var(--alert-accent); color: white; }
.ui-alert-danger .ui-alert-icon { border-radius: 8px; }
.ui-alert-body { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.ui-alert .ui-alert-title { margin: 0; color: var(--alert-heading); font-size: 18px; font-weight: 600; line-height: 26px; }
.ui-alert-success .ui-alert-title { line-height: 22px; }
.ui-alert-danger .ui-alert-title { font-size: 16px; line-height: 24px; }
.ui-alert .ui-alert-text { margin: 0; color: #151320; font-size: 16px; font-weight: 400; line-height: 24px; }
.ui-alert-success .ui-alert-text { color: #5c596c; }
.ui-alert .ui-alert-body .errorlist { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; color: #151320; font-size: 16px; line-height: 24px; }
.ui-alert .errorlist li { display: flex; align-items: flex-start; gap: 11px; }
.ui-alert .errorlist li::before { content: ''; flex: 0 0 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--alert-accent); }
.ui-alert-stack { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
[data-flash-messages] { opacity: 1; transition: opacity 300ms ease-out; }
[data-flash-messages].ui-alert-stack-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    [data-flash-messages] { transition: none; }
}
@media (max-width: 640px) {
    .ui-alert { padding: 16px; gap: 12px; }
}