#toast-container {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sp-2);
  z-index: var(--z-toast);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-toast);
  font-size: var(--text-sm);
  font-weight: 500;
  pointer-events: auto;
  min-width: 240px;
  max-width: 380px;
  border: 1px solid transparent;
  animation: toast-in var(--t-slow) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transition: opacity var(--t-base), transform var(--t-base);
}
.toast.is-leaving {
  animation: toast-out var(--t-base) ease forwards;
}

.toast--positive { background: var(--ok-subtle);   border-color: var(--ok);   color: var(--ok); }
.toast--negative { background: var(--err-subtle);  border-color: var(--err);  color: var(--err); }
.toast--neutral  { background: var(--bg-elevated); border-color: var(--border); color: var(--text-secondary); }
.toast--warn     { background: var(--warn-subtle); border-color: var(--warn); color: var(--warn); }
.toast--info     { background: var(--info-subtle); border-color: var(--info); color: var(--info); }

.toast__icon   { font-size: 16px; flex-shrink: 0; }
.toast__msg    { flex: 1; color: var(--text-primary); line-height: var(--leading-tight); }
.toast__close  { background: none; border: none; cursor: pointer; color: var(--text-muted);
                 font-size: 16px; padding: 0; line-height: 1; flex-shrink: 0; }
.toast__close:hover { color: var(--text-primary); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}