.pato-toastr{
  position:fixed;
  left:50%;
  bottom:28px;
  top:auto;
  right:auto;
  transform:translateX(-50%);
  z-index:99999;
  display:grid;
  gap:12px;
  width:min(520px,calc(100vw - 28px));
  pointer-events:none;
}

.pato-toast{
  --toast-accent:#ffffff;
  --toast-glow:rgba(255,255,255,.28);
  position:relative;
  display:grid;
  grid-template-columns:46px 1fr auto;
  gap:14px;
  align-items:start;
  padding:17px 18px 17px 15px;
  background:rgba(8,8,11,.97);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  box-shadow:
    0 20px 50px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 34px var(--toast-glow);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  overflow:hidden;
  pointer-events:auto;
  opacity:0;
  transform:translateY(28px) scale(.94);
  filter:blur(6px);
  transition:
    opacity .34s cubic-bezier(.16,1,.3,1),
    transform .34s cubic-bezier(.16,1,.3,1),
    filter .34s ease;
}

.pato-toast::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--toast-accent);
  box-shadow:0 0 24px var(--toast-glow);
}

.pato-toast::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--toast-accent),transparent);
  opacity:.72;
  animation:patoToastShimmer 2.4s ease-in-out infinite;
}

.pato-toast.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

.pato-toast.is-hiding{
  opacity:0;
  transform:translateY(18px) scale(.96);
  filter:blur(4px);
}

.pato-toast__icon{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:16px;
  color:#050505;
  background:var(--toast-accent);
  box-shadow:0 0 22px var(--toast-glow);
}

.pato-toast__content strong{
  display:block;
  font-size:14px;
  line-height:1.3;
  margin-bottom:5px;
  letter-spacing:.01em;
}

.pato-toast__content div{
  font-size:13px;
  line-height:1.6;
  color:#d7d7df;
}

.pato-toast button{
  border:0;
  background:transparent;
  color:#a7a7b2;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  padding:0 0 0 8px;
  transition:color .2s ease,transform .2s ease;
}

.pato-toast button:hover{
  color:#fff;
  transform:rotate(8deg) scale(1.08);
}

.pato-toast--success{
  --toast-accent:#63ffb3;
  --toast-glow:rgba(99,255,179,.32);
}

.pato-toast--error{
  --toast-accent:#ff4d6d;
  --toast-glow:rgba(255,77,109,.38);
}

.pato-toast--warning{
  --toast-accent:#ffd166;
  --toast-glow:rgba(255,209,102,.34);
}

.pato-toast--info{
  --toast-accent:#5cc8ff;
  --toast-glow:rgba(92,200,255,.34);
}

@keyframes patoToastShimmer{
  0%,100%{transform:translateX(-20%);opacity:.28}
  50%{transform:translateX(20%);opacity:.9}
}

@media(max-width:575px){
  .pato-toastr{
    left:14px;
    right:14px;
    bottom:14px;
    transform:none;
    width:auto;
  }

  .pato-toast{
    grid-template-columns:40px 1fr auto;
    padding:14px;
    border-radius:15px;
  }

  .pato-toast__icon{
    width:34px;
    height:34px;
    border-radius:10px;
  }
}