.app-messages { position: relative; z-index: 1030; width: min(100%, 720px); margin: 0 auto 16px; }
.app-alert { --alert-tone: #3974ad; --alert-soft: #edf4fb; position: relative; display: grid; grid-template-columns: 38px minmax(0,1fr) 32px; align-items: center; gap: 11px; min-height: 58px; margin: 0 0 10px; padding: 9px 10px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--alert-tone) 24%,transparent); border-left: 4px solid var(--alert-tone); border-radius: 7px; color: #24323e; background: color-mix(in srgb,var(--alert-soft) 92%,#fff); box-shadow: 0 9px 24px rgba(31,46,59,.09); text-align: left; }
.app-alert__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px; color: var(--alert-tone); background: color-mix(in srgb,var(--alert-tone) 12%,transparent); font-size: 1rem; }
.app-alert__content { min-width: 0; font-size: .8rem; font-weight: 600; line-height: 1.4; }
.app-alert .btn-close { position: static; width: 30px; height: 30px; padding: 0; border-radius: 5px; background-size: 9px; opacity: .55; }
.app-alert .btn-close:hover { background-color: color-mix(in srgb,var(--alert-tone) 10%,transparent); opacity: .9; }
.app-alert--success,.alert-success { --alert-tone: #19805e; --alert-soft: #e8f6f1; }
.app-alert--error,.app-alert--danger,.alert-danger { --alert-tone: #bd3f4b; --alert-soft: #faedef; }
.app-alert--warning,.alert-warning { --alert-tone: #9a6b12; --alert-soft: #fbf4e3; }
.app-alert--info,.alert-info { --alert-tone: #3974ad; --alert-soft: #edf4fb; }
.app-alert--debug,.app-alert--secondary,.alert-secondary { --alert-tone: #667085; --alert-soft: #f0f2f4; }
.alert:not(.app-alert) { color: #24323e; background: color-mix(in srgb,var(--alert-soft,#edf4fb) 92%,#fff); border-color: color-mix(in srgb,var(--alert-tone,#3974ad) 24%,transparent); border-radius: 7px; border-width: 1px; border-left: 4px solid var(--alert-tone,#3974ad); box-shadow: 0 7px 18px rgba(31,46,59,.07); font-size: .8rem; }
[data-bs-theme="dark"] .app-alert { color: #e5eeee; background: color-mix(in srgb,var(--alert-tone) 15%,#142629); border-color: color-mix(in srgb,var(--alert-tone) 42%,#243b3f); }
[data-bs-theme="dark"] .app-alert .btn-close { filter: invert(1); }
[data-bs-theme="dark"] .alert:not(.app-alert) { color: #e5eeee; background: color-mix(in srgb,var(--alert-tone,#3974ad) 15%,#142629); border-color: color-mix(in srgb,var(--alert-tone,#3974ad) 42%,#243b3f); }
@media (max-width:575.98px) { .app-alert { grid-template-columns: 34px minmax(0,1fr) 28px; gap: 8px; }.app-alert__icon { width: 31px; height: 31px; } }

.alert-auto-dismiss::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--alert-tone,#3974ad); transform-origin: left; animation: alert-countdown var(--alert-duration,5000ms) linear forwards; opacity: .55; }
.alert-auto-dismiss.alert-timer-paused::after { animation-play-state: paused; }
@keyframes alert-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .alert-auto-dismiss::after { animation: none; } }