.toastHost{
  position: fixed;
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
  z-index: 10000;
  width: min(560px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none; 
}


.toast{
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,26,48,.95);
  color: rgba(255,255,255,.95);
  border-radius: 22px;
  padding: 18px 18px;
  box-shadow: 0 22px 70px rgba(0,0,0,.48);

  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;

  text-align: left;
  transform: translateY(-10px) scale(.98);
  opacity: 0;
  animation: toastIn .22s ease forwards;
}

@keyframes toastIn { to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes toastOut { to { transform: translateY(-10px) scale(.98); opacity: 0; } }

.toast__title{
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .2px;
}

.toast__text{
  font-size: 15px;
  line-height: 1.45;
  opacity: .92;
  margin-top: 4px;
}


.toast__close{
  width: 40px; height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor: pointer;
}
.toast__close:hover{ background: rgba(255,255,255,.10); }


.toast{
  position: relative;
  overflow: hidden;
}
.toast::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 6px;
  background: rgba(91,140,255,.9); 
}


.toast--success{ border-color: rgba(39,215,166,.35); }
.toast--success::before{ background: rgba(39,215,166,.95); }

.toast--error{ border-color: rgba(255,91,110,.35); }
.toast--error::before{ background: rgba(255,91,110,.95); }

.toast--warning{ border-color: rgba(255,200,80,.35); }
.toast--warning::before{ background: rgba(255,200,80,.95); }

.toast--info{ border-color: rgba(91,140,255,.35); }
.toast--info::before{ background: rgba(91,140,255,.95); }