#echToastHost{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(380px, calc(100vw - 32px));
}

.ech-toast{
  border: 1px solid rgba(163,126,67,.18);
  background:
    radial-gradient(circle at top right, rgba(214,192,149,.16), transparent 38%),
    linear-gradient(180deg, #fbf7ef 0%, #f2eadf 100%);
  color: #17362c;
  border-radius: 18px;
  padding: 15px 16px;
  box-shadow: 0 18px 34px rgba(53,39,20,.14);
  font-size: 14px;
  line-height: 1.5;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease;
}

.ech-toast:hover{
  box-shadow: 0 22px 40px rgba(53,39,20,.18);
}

.ech-toast.info{
  border-color: rgba(163,126,67,.22);
  background:
    radial-gradient(circle at top right, rgba(214,192,149,.18), transparent 40%),
    linear-gradient(180deg, #fbf7ef 0%, #f3ece2 100%);
}

.ech-toast.success{
  border-color: rgba(27,81,64,.24);
  background:
    radial-gradient(circle at top right, rgba(27,81,64,.12), transparent 42%),
    linear-gradient(180deg, #f7f6ee 0%, #edf2eb 100%);
}

.ech-toast.error{
  border-color: rgba(142,92,54,.26);
  background:
    radial-gradient(circle at top right, rgba(172,130,92,.14), transparent 42%),
    linear-gradient(180deg, #fbf4eb 0%, #efe2d3 100%);
}

.ech-toast-title{
  font-weight: 700;
  color: #80602f;
  margin-bottom: 5px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ech-toast-message{
  color: #17362c;
  font-size: 14px;
}

@media (max-width: 640px){
  #echToastHost{
    top: 14px;
    right: 14px;
    left: 14px;
    width: auto;
  }
}