:root{
  --motion-fast:150ms;
  --motion-base:220ms;
  --motion-slow:420ms;
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-emphasized:cubic-bezier(.2,0,0,1);
}

.mv-toast-host{position:fixed; top:18px; right:18px; z-index:2147483647; display:flex; flex-direction:column; gap:10px; pointer-events:none;}

.mv-toast{
  pointer-events:auto;
  min-width:300px;
  max-width:420px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(15,23,42,.72);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 55px rgba(0,0,0,.35);
  color:#e2e8f0;
  overflow:hidden;
  transform: translateX(18px);
  opacity:0;
  transition: transform var(--motion-fast) var(--ease-standard), opacity var(--motion-fast) var(--ease-standard);
}

.mv-toast[data-show="1"]{transform: translateX(0); opacity:1;}

.mv-toast-inner{display:flex; gap:12px; padding:14px 14px; align-items:flex-start;}
.mv-toast-ico{margin-top:2px; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;}
.mv-toast-body{flex:1 1 auto;}
.mv-toast-title{font-size:13px; font-weight:700; line-height:1.2; letter-spacing:.01em;}
.mv-toast-msg{margin-top:2px; font-size:13px; line-height:1.35; color:rgba(226,232,240,.9);}
.mv-toast-x{flex:0 0 auto; border:0; background:transparent; color:rgba(226,232,240,.7); padding:6px; border-radius:12px; transition: background var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);}
.mv-toast-x:hover{background:rgba(255,255,255,.08); color:#e2e8f0; transform: translateY(-1px);}

.mv-toast-bar{height:2px; background:rgba(255,255,255,.08);}
.mv-toast-bar > div{height:100%; width:100%; transform-origin:left; background:linear-gradient(90deg, rgba(109,40,217,.9), rgba(37,99,235,.9), rgba(34,197,94,.9)); transform: scaleX(1);}

.mv-toast[data-type="success"] .mv-toast-bar > div{background:linear-gradient(90deg, rgba(34,197,94,.95), rgba(16,185,129,.95));}
.mv-toast[data-type="error"] .mv-toast-bar > div{background:linear-gradient(90deg, rgba(239,68,68,.95), rgba(244,63,94,.95));}
.mv-toast[data-type="warning"] .mv-toast-bar > div{background:linear-gradient(90deg, rgba(245,158,11,.95), rgba(251,191,36,.95));}
.mv-toast[data-type="info"] .mv-toast-bar > div{background:linear-gradient(90deg, rgba(37,99,235,.95), rgba(99,102,241,.95));}

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