.toast-stack { position: fixed; z-index: 10000; display: grid; gap: 12px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast-stack--top-right { top: 100px; right: 24px; }
.toast-stack--top-left { top: 100px; left: 24px; }
.toast-stack--top-center { top: 100px; left: 50%; transform: translateX(-50%); }
.toast-stack--bottom-right { bottom: 24px; right: 24px; }
.toast-stack--bottom-left { bottom: 24px; left: 24px; }
.toast-stack--bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); }
.toast-stack--center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.toast { --toast-color: #26744d; display: flex; align-items: flex-start; gap: 12px; padding: 20px; border: 1px solid #dededb; border-left: 4px solid var(--toast-color); border-radius: 16px; background: #fff; color: #202320; box-shadow: 0 12px 40px #0002; pointer-events: auto; font-size: 14px; line-height: 1.55; }
.toast--error { --toast-color: #bb3535; }
.toast--warning { --toast-color: #98600a; }
.toast--info { --toast-color: #286a9e; }
.toast-icon { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%; color: var(--toast-color); background: #f1f4f0; font-weight: 800; }
.toast-copy { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.toast-copy strong { font-size: 15px; }
.toast-close { flex: 0 0 26px; padding: 0; margin-left: auto; border: 0; background: transparent; color: #656965; font-size: 24px; line-height: 28px; cursor: pointer; }
.toast-close:focus-visible { outline: 2px solid var(--toast-color); outline-offset: 3px; }
@media (max-width: 600px) { .toast-stack--top-right, .toast-stack--top-left { top: 84px; left: 16px; right: 16px; } .toast { padding: 16px; } }