.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 16px 24px;
  background: linear-gradient(135deg, #1a1610 0%, #2a2218 100%);
  color: #f4f0e8;
  border: 1px solid rgba(212, 132, 14, 0.3);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  max-width: 90%;
  min-width: 300px;
  word-wrap: break-word;
  white-space: pre-wrap;
  line-height: 1.5;
  animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.show {
  animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.hide {
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes slideUp {
  to { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

@media (max-width: 640px) {
  .toast {
    min-width: auto;
    max-width: calc(100% - 20px);
    left: 10px;
    right: 10px;
    transform: none;
  }
  .toast.show { animation: slideDownMobile 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
  .toast.hide { animation: slideUpMobile 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
  @keyframes slideDownMobile {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes slideUpMobile {
    to { opacity: 0; transform: translateY(-20px); }
  }
}
