.app-toasts { position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); right: 24px; width: min(400px, calc(100vw - 32px)); z-index: 2147483647; display: grid; gap: 12px; pointer-events: none; }
.app-toast { display: grid; grid-template-columns: 28px 1fr 28px; align-items: start; gap: 10px; padding: 16px; border: 1px solid #dbdfE5; border-left: 4px solid #f97316; border-radius: 8px; background: #fff; color: #344054; box-shadow: 0 8px 30px #1f293729; font: 400 13px/1.5 Poppins, sans-serif; pointer-events: auto; overflow-wrap: anywhere; }
.app-toast-success { border-left-color: #099888; }
.app-toast-error { border-left-color: #d33838; }
.app-toast-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff1e6; color: #bf4e00; font-weight: 600; }
.app-toast-success .app-toast-icon { color: #087b6e; background: #e9f8f3; }
.app-toast-error .app-toast-icon { color: #b42318; background: #fff0ee; }
.app-toast button { border: 0; background: transparent; color: #667085; cursor: pointer; padding: 0; width: 28px; height: 28px; font-size: 22px; line-height: 1; }
.app-toast button:hover { background: #f3f4f6; border-radius: 4px; }
.app-toast button:focus-visible { outline: 2px solid #f97316; outline-offset: 2px; }
@media (max-width: 600px) { .app-toasts { bottom: max(12px, env(safe-area-inset-bottom)); right: 16px; } }