.notification-toast-stack{
  position:fixed;
  top:18px;
  right:18px;
  z-index:2600;
  width:min(350px,calc(100vw - 36px));
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.notification-toast{
  position:relative;
  display:grid;
  grid-template-columns:36px 46px minmax(0,1fr) 26px;
  align-items:center;
  gap:10px;
  min-height:72px;
  padding:10px 10px 10px 9px;
  border:1px solid rgba(48,62,92,.11);
  border-radius:17px;
  background:rgba(255,255,255,.96);
  box-shadow:0 14px 42px rgba(33,46,76,.18),0 3px 10px rgba(33,46,76,.07);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  color:#172033;
  opacity:0;
  transform:translate3d(26px,-6px,0) scale(.98);
  transition:opacity .22s ease,transform .22s ease;
  pointer-events:auto;
  cursor:pointer;
  overflow:hidden;
}
.notification-toast::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:#8176f2;
}
.notification-toast-blue::before{background:#5c91ef}
.notification-toast-green::before{background:#4fc88a}
.notification-toast-pink::before{background:#e86f9f}
.notification-toast-violet::before{background:#8176f2}
.notification-toast.notification-toast-in{opacity:1;transform:none}
.notification-toast.notification-toast-out{opacity:0;transform:translate3d(22px,-4px,0) scale(.98)}
.notification-toast-mark{
  width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;
  background:#f2f4fb;color:#66708a;font-size:16px;
}
.notification-toast-blue .notification-toast-mark{background:#eef5ff;color:#4e86e3}
.notification-toast-green .notification-toast-mark{background:#edf9f3;color:#34a66c}
.notification-toast-pink .notification-toast-mark{background:#fff0f6;color:#d7558a}
.notification-toast-violet .notification-toast-mark{background:#f3f0ff;color:#7467de}
.notification-toast-avatar{
  width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;
  overflow:hidden;background:#f2f4f8;
  flex:none;
}
.notification-toast-avatar img,.notification-toast-avatar canvas{width:100%;height:100%;object-fit:contain;display:block}
.notification-toast-avatar-icon{font-size:21px}
.notification-toast-copy{min-width:0;align-self:center}
.notification-toast-copy small{display:block;margin-bottom:3px;color:#9aa2b3;font-size:8px;font-weight:800;letter-spacing:.1em}
.notification-toast-copy b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.25;font-weight:800}
.notification-toast-copy p{margin:3px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#687187;font-size:10px;line-height:1.3}
.notification-toast-close{
  width:26px;height:26px;border:0;border-radius:9px;background:transparent;
  color:#9aa2b2;font-size:20px;line-height:1;display:grid;place-items:center;padding:0;
}
.notification-toast-close:hover{background:#f2f4f8;color:#5e6678}
.notification-toast:focus-visible{outline:3px solid rgba(98,125,237,.2);outline-offset:2px}

@media (max-width:700px){
  .notification-toast-stack{
    top:calc(env(safe-area-inset-top,0px) + 10px);
    left:10px;right:10px;width:auto;gap:8px;
  }
  .notification-toast{
    grid-template-columns:32px 42px minmax(0,1fr) 24px;
    min-height:66px;padding:8px;border-radius:15px;gap:8px;
  }
  .notification-toast-mark{width:30px;height:30px;border-radius:10px;font-size:14px}
  .notification-toast-avatar{width:42px;height:42px;border-radius:13px}
  .notification-toast-copy b{font-size:11px}
  .notification-toast-copy p{font-size:9px}
}