.toast-host {
  position: fixed;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 400;
  display: grid;
  gap: 0.55rem;
  width: min(520px, calc(100vw - 1.5rem));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  margin: 0;
  padding: 0.78rem 1rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
  animation: toast-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.toast--ok {
  border: 1px solid rgba(45, 212, 191, 0.4);
  background: rgba(13, 48, 44, 0.92);
  color: #99f6e4;
  backdrop-filter: blur(12px);
}

.toast--err {
  border: 1px solid rgba(252, 165, 165, 0.42);
  background: rgba(60, 16, 24, 0.94);
  color: #fecdd3;
  backdrop-filter: blur(12px);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
}