.toast-stack { position: fixed; inset: 20px 20px auto auto; width: min(390px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; z-index: 10000; pointer-events: none; scrollbar-width: none; }
.toast-stack::-webkit-scrollbar { display: none; }
.toast { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: var(--dialog-shadow); pointer-events: auto; animation: toast-enter .2s ease-out; }
.toast[data-type="error"] { border-left-color: var(--danger-text); }
.toast[data-type="success"] { border-left-color: var(--success-text); }
.toast-icon { display: inline-flex; padding: 7px; border-radius: 8px; background: var(--accent-soft); color: var(--primary); flex-shrink: 0; }
.toast[data-type="error"] .toast-icon { background: var(--danger-bg); color: var(--danger-text); }
.toast[data-type="success"] .toast-icon { background: var(--success-bg); color: var(--success-text); }
.toast .icon { width: 18px; height: 18px; }
.toast-icon > .icon { display: none; }
.toast[data-type="success"] .toast-success-icon, .toast[data-type="error"] .toast-error-icon, .toast[data-type="info"] .toast-info-icon { display: block; }
.toast-content { flex: 1; min-width: 0; }
.toast-content strong { display: block; font-size: 13px; margin: 1px 0 5px; }
.toast-content p { font-size: 12px; line-height: 1.6; margin: 0; color: var(--soft-text); white-space: pre-line; overflow-wrap: anywhere; }
.toast-close { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border: 0; border-radius: 6px; background: transparent; color: var(--soft-text); }
.toast-close:hover { background: var(--surface-soft); color: var(--text); }
.toast-close:focus-visible { outline: 3px solid var(--focus); }
.toast-source { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
@keyframes toast-enter { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) { .toast-stack { inset: 16px 16px auto auto; max-height: calc(100dvh - 32px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }