.toast-container {
  position: fixed;
  bottom: var(--space-xl);
  right: calc(var(--space-xl) + 70px);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
@media (max-width: 768px) {
  .toast-container { right: var(--space-md); bottom: calc(64px + env(safe-area-inset-bottom,0px) + 70px); }
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
  min-width: 280px;
  max-width: 360px;
  pointer-events: all;
  animation: toast-in var(--transition-base) ease forwards;
}
.toast.is-leaving {
  animation: toast-out 200ms ease-out forwards;
}
.toast--success { border-left-color: #111; }
.toast--error   { border-left-color: #555; }
.toast--info    { border-left-color: #999; }
.toast__icon { color: var(--color-primary-text); flex-shrink: 0; }
.toast__icon svg { width: 20px; height: 20px; }
.toast__content { flex: 1; }
.toast__title { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); }
.toast__text  { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px; }
.toast__close {
  color: var(--color-text-light);
  transition: color var(--transition-fast);
  pointer-events: all;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
  margin: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 4px;
}
.toast__close:hover { color: var(--color-primary-text); }
.toast__close svg { width: 16px; height: 16px; display: block; }

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

@media (max-width: 480px) {
  .toast-container { bottom: var(--space-md); right: var(--space-md); left: var(--space-md); }
  .toast { min-width: auto; max-width: 100%; }
}