.save-toast {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(420px, calc(100vw - 32px));
  padding: 15px 18px;
  border: 1px solid #b9ecd4;
  border-radius: 16px;
  background: rgba(240, 253, 247, .97);
  color: #08764d;
  box-shadow: 0 20px 55px rgba(15, 23, 42, .18);
  font-weight: 800;
  animation: toast-in .28s ease-out;
  backdrop-filter: blur(12px);
}

.save-toast::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: #16a36a;
  color: #fff;
  font-size: 18px;
}

.save-toast.error {
  border-color: #ffcaca;
  background: rgba(255, 244, 244, .98);
  color: #b4232d;
}

.save-toast.error::before {
  content: "!";
  background: #d83f48;
}

.save-toast.hiding {
  opacity: 0;
  transform: translateY(-12px);
  transition: .25s ease;
}

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

@media (max-width: 620px) {
  .save-toast { top: 14px; right: 16px; left: 16px; width: auto; }
}