.zp-toast{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:120;
  width:min(440px,calc(100% - 32px));
  border-radius:var(--radius-lg);
  border:1px solid rgba(235,241,228,.12);
  background:linear-gradient(180deg,rgba(16,21,20,.84),rgba(6,8,8,.92));
  box-shadow:var(--shadow-soft),0 0 120px rgba(199,255,0,.06);
  padding:14px 14px;
  display:grid;
  gap:10px;
  transform:translateY(16px);
  opacity:0;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s ease;
}
.zp-toast.is-in{transform:translateY(0);opacity:1}
.zp-toast__row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.zp-toast__msg{margin:0;color:rgba(235,233,223,.82)}
.zp-toast__title{font-weight:860;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;color:rgba(235,233,223,.72)}
.zp-toast__x{
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(235,241,228,.12);
  background:rgba(6,8,8,.26);
  cursor:pointer;
  position:relative;
  flex:0 0 auto;
}
.zp-toast__x::before,
.zp-toast__x::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:16px;
  height:2px;
  background:rgba(235,233,223,.84);
  transform:rotate(45deg);
}
.zp-toast__x::after{transform:rotate(-45deg)}
.zp-toast[data-tone="warn"]{border-color:rgba(240,255,107,.18)}
.zp-toast[data-tone="error"]{border-color:rgba(211,30,45,.24)}
.zp-toast[data-tone="info"]{border-color:rgba(199,255,0,.18)}

@media (prefers-reduced-motion:reduce){
  .zp-toast{transition:none}
}