.toast-host {
  position: fixed;
  inset-block-end: 18px;
  inset-inline-end: 18px;
  z-index: 9999;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100% - 36px));
}
.toast {
  translate: 0 10px;
  opacity: 0;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 16px 40px rgb(0 0 0 / 16%);
  transition: .18s ease;
}
.toast.is-visible {
  translate: 0;
  opacity: 1;
}
.toast[data-type="success"] {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.toast[data-type="error"] {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
}