.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} }