.toast {
  position: fixed;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  padding: 16px 24px;
  border-radius: 12px;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease, top 0.3s ease;
  font-weight: bold;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.1); /* transparan tapi clean */
  border: 1px solid rgba(255, 255, 255, 0.2); /* efek glass tipis */
  backdrop-filter: none; /* pastikan gak ada blur */
}

.toast.success {
  border-left: 4px solid #4caf50;
  color: #4caf50;
}

.toast.error {
  border-left: 4px solid #f44336;
  color: #f44336;
}

.toast.failed {
  border-left: 4px solid #f44336;
  color: #f44336;
}

.toast.info {
  border-left: 4px solid #2196f3;
  color: #2196f3;
}

.toast.show {
  opacity: 1;
  top: 7%;
}



.success {
  color: green;
  background-color: #e6ffe6;
  border: 1px solid green;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.error {
  color: red;
  background-color: #ffe6e6;
  border: 1px solid red;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.failed {
  color: red;
  background-color: #ffe6e6;
  border: 1px solid red;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}