.toast { position: fixed; left: 50%; bottom: var(--sp-6); transform: translateX(-50%); z-index: var(--z-toast); display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); font-size: var(--text-sm); white-space: nowrap; animation: toast-in var(--dur-slow) var(--ease); }
.toast__icon { display: grid; place-items: center; width: var(--size-28); height: var(--size-28); border-radius: 50%; background: var(--success-bg); color: var(--success); }
.toast__icon .icon { width: var(--size-16); height: var(--size-16); }
.toast--error .toast__icon { background: var(--danger-bg); color: var(--danger); }
.toast__text { display: flex; flex-direction: column; line-height: 1.3; }
.toast__sub { color: var(--text-3); font-size: var(--text-xs); }
@keyframes toast-in { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@media (max-width: 767px) { .toast { bottom: calc(var(--tabbar-h) + var(--sp-4)); max-width: calc(100% - var(--sp-8)); white-space: normal; } }
/* While a sheet / drawer is open the toast moves to the top so it never covers form fields or the sheet footer */
.app.has-layer ~ .toast { top: var(--sp-4); bottom: auto; }
@media (max-width: 767px) { .app.has-layer ~ .toast { top: calc(env(safe-area-inset-top) + var(--sp-3)); bottom: auto; } }