#toast-container {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: fit-content;
  padding: 0 1rem;
  pointer-events: none;
}

.toast {
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: -0.5px;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem; /* 10px = 2.5 * 0.25rem → 0.625rem */
  padding: 0.75rem 1rem; /* py-3 = 0.75rem, px-4 = 1rem */
  background-color: rgba(26, 28, 36, 0.9); /* bg-[#1A1C24]/90 */
  border: 1px solid rgba(58, 61, 75, 0.6); /* border-[#3A3D4B]/60 */
  border-radius: 0.875rem; /* rounded-xl = 0.875rem */
  color: white;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(58, 61, 75, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  pointer-events: auto;
}

.toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast .icon {
  display: inline-block;
  margin-top: 2px;
  filter: drop-shadow(0 0 4px currentColor);
}

.toast.success .icon { color: #34d399; } /* text-emerald-400 */
.toast.error .icon { color: #f87171; }   /* text-red-400 */
.toast.info .icon { color: #E20A3E; }     /* brand accent */

.toast .message {
  margin: 0;
  color: #fff;
}

@supports not (backdrop-filter: blur(8px)) {
  .toast {
    background-color: rgba(26, 28, 36, 0.95);
  }
}