.site-alert-region { position: fixed; bottom: 26px; left: 50%; z-index: 12000; display: flex; width: min(560px, calc(100vw - 32px)); flex-direction: column; gap: 10px; transform: translateX(-50%); pointer-events: none; }
.site-alert { position: relative; display: flex; align-items: flex-start; gap: 13px; overflow: hidden; border: 1px solid rgba(203, 213, 225, .9); border-radius: 18px; background: rgba(255, 255, 255, .96); padding: 16px 46px 18px 16px; color: #1f2937; box-shadow: 0 20px 48px rgba(15, 23, 42, .16), 0 2px 5px rgba(15, 23, 42, .05); opacity: 0; transform: translate3d(0, 22px, 0) scale(.97); transition: opacity 220ms ease, transform 280ms cubic-bezier(.2, .8, .2, 1); pointer-events: auto; }
.site-alert::before { content: ''; position: absolute; top: 0; right: 18px; left: 18px; height: 3px; border-radius: 0 0 4px 4px; background: #9ca3af; }
.site-alert.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.site-alert.is-closing { opacity: 0; transform: translate3d(0, 16px, 0) scale(.97); }
.site-alert-error::before { background: #dc2626; }
.site-alert-warning::before { background: #d97706; }
.site-alert-success::before { background: #16a34a; }
.site-alert-info::before { background: #9ca3af; }
.site-alert-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 11px; background: #f3f4f6; color: #4b5563; font-size: 19px; }
.site-alert-error .site-alert-icon { background: #fef2f2; color: #dc2626; }
.site-alert-warning .site-alert-icon { background: #fffbeb; color: #b45309; }
.site-alert-success .site-alert-icon { background: #f0fdf4; color: #15803d; }
.site-alert-content { min-width: 0; flex: 1; }
.site-alert-title { font-size: 13px; font-weight: 700; line-height: 1.3; }
.site-alert-message { margin-top: 4px; color: #6b7280; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
.site-alert-close { position: absolute; top: 12px; right: 12px; border: 0; background: transparent; color: #9ca3af; cursor: pointer; font-size: 18px; line-height: 1; transition: color 160ms ease, transform 160ms ease; }
.site-alert-close:hover { color: #111827; transform: rotate(90deg); }
.site-alert-progress { position: absolute; right: 18px; bottom: 0; left: 18px; height: 2px; transform-origin: left; background: #d1d5db; animation: site-alert-progress linear forwards; }
.site-alert-error .site-alert-progress { background: #dc2626; }
.site-alert-warning .site-alert-progress { background: #d97706; }
.site-alert-success .site-alert-progress { background: #16a34a; }
@keyframes site-alert-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 640px) { .site-alert-region { right: 16px; bottom: 18px; left: 16px; width: auto; transform: none; } }