:root {
    --system-alert-primary: #1565c0;
    --system-alert-primary-soft: #eaf2ff;
    --system-alert-primary-border: #90caf9;
    --system-alert-success: #2e7d32;
    --system-alert-success-soft: #edf7ed;
    --system-alert-success-border: #a5d6a7;
    --system-alert-error: #c62828;
    --system-alert-error-soft: #fff0f0;
    --system-alert-error-border: #ef9a9a;
    --system-alert-warning: #ed6c02;
    --system-alert-warning-soft: #fff4e5;
    --system-alert-warning-border: #ffcc80;
}

body.stsn-layout {
    --system-alert-primary: #7f1d35;
    --system-alert-primary-soft: #fff1f3;
    --system-alert-primary-border: #d99aa7;
}

.system-alert-host {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 11000;
    width: min(440px, calc(100vw - 2rem));
    display: grid;
    gap: .75rem;
    pointer-events: none;
}

.system-alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .8rem 1rem;
    border: 1px solid;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    font: 500 .875rem/1.45 inherit;
    transform: translateX(16px);
    opacity: 0;
    transition: opacity .28s cubic-bezier(.22, 1, .36, 1), transform .28s cubic-bezier(.22, 1, .36, 1);
    pointer-events: auto;
}

.system-alert.is-visible { opacity: 1; transform: translateX(0); }
.system-alert.success { color: var(--system-alert-success); background: var(--system-alert-success-soft); border-color: var(--system-alert-success-border); }
.system-alert.error { color: var(--system-alert-error); background: var(--system-alert-error-soft); border-color: var(--system-alert-error-border); }
.system-alert.warning { color: var(--system-alert-warning); background: var(--system-alert-warning-soft); border-color: var(--system-alert-warning-border); }
.system-alert.info { color: var(--system-alert-primary); background: var(--system-alert-primary-soft); border-color: var(--system-alert-primary-border); }
.system-alert-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border: 2px solid currentColor; border-radius: 50%; font: 800 .8rem/1 Arial, sans-serif; flex: 0 0 1.35rem; }
.system-alert-content { min-width: 0; flex: 1; }
.system-alert-title { display: block; margin-bottom: .15rem; font-weight: 700; }
.system-alert-message { white-space: pre-line; }
.system-confirm-backdrop { position: fixed; inset: 0; z-index: 11001; display: grid; place-items: center; padding: 1rem; background: rgba(15, 23, 42, .48); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s linear .22s; }
.system-confirm-backdrop.is-visible { opacity: 1; visibility: visible; transition-delay: 0s; }
.system-confirm-backdrop.is-closing { opacity: 0; visibility: hidden; }
.system-confirm { width: min(430px, 100%); background: #fff; border-radius: 4px; box-shadow: 0 16px 48px rgba(0, 0, 0, .22); overflow: hidden; opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .26s cubic-bezier(.22, 1, .36, 1), transform .26s cubic-bezier(.22, 1, .36, 1); }
.system-confirm-backdrop.is-visible .system-confirm { opacity: 1; transform: translateY(0) scale(1); }
.system-confirm-body { display: flex; gap: .75rem; padding: 1.25rem; color: #263238; }
.system-confirm-content { min-width: 0; flex: 1; }
.system-confirm-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: var(--system-alert-primary); background: var(--system-alert-primary-soft); font: 800 1.25rem/1 Arial, sans-serif; flex: 0 0 2.25rem; }
.system-confirm-title { margin: 0 0 .35rem; font-size: 1rem; font-weight: 700; }
.system-confirm-message { margin: 0; color: #546e7a; white-space: pre-line; font-size: .875rem; line-height: 1.5; }
.system-confirm-input { display: block; width: 100%; min-height: 5rem; margin-top: .75rem; padding: .6rem .7rem; resize: vertical; border: 1px solid #b0bec5; border-radius: 4px; color: #263238; font: inherit; }
.system-confirm-input:focus { outline: 2px solid var(--system-alert-primary-border); border-color: var(--system-alert-primary); }
.system-confirm-actions { display: flex; justify-content: flex-end; gap: .5rem; padding: .8rem 1.25rem; border-top: 1px solid #eceff1; }
.system-confirm-btn { border: 1px solid var(--system-alert-primary); border-radius: 4px; padding: .5rem .9rem; font: 700 .8rem inherit; cursor: pointer; }
.system-confirm-btn.cancel { background: #fff; color: var(--system-alert-primary); }
.system-confirm-btn.confirm { background: var(--system-alert-primary); color: #fff; }
@media (prefers-reduced-motion: reduce) {
    .system-alert,
    .system-confirm-backdrop,
    .system-confirm { transition: none; }
}