@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;700;800&display=swap');
*{box-sizing:border-box}

.toast{display:flex;align-items:flex-start;gap:12px;border-radius:10px;padding:13px 16px;background:#181818;font-family:'Syne',sans-serif;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,0.06)}
.toast.success{border-left:3px solid #00e5a0}
.toast.error{border-left:3px solid #e24b4a}
.toast.warning{border-left:3px solid #ef9f27}
.toast.info{border-left:3px solid #378add}
.toast-icon{width:34px;height:34px;min-width:34px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.toast.success .toast-icon{background:#0d2e21}
.toast.error .toast-icon{background:#2e1010}
.toast.warning .toast-icon{background:#2e1e08}
.toast.info .toast-icon{background:#0a1c2e}
.toast-icon svg{width:15px;height:15px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.toast.success .toast-icon svg{stroke:#00e5a0}
.toast.error .toast-icon svg{stroke:#e24b4a}
.toast.warning .toast-icon svg{stroke:#ef9f27}
.toast.info .toast-icon svg{stroke:#378add}
.toast-body{flex:1;min-width:0}
.toast-title{font-size:13px;font-weight:700;margin-bottom:6px}
.toast.success .toast-title{color:#00e5a0}
.toast.error .toast-title{color:#e24b4a}
.toast.warning .toast-title{color:#ef9f27}
.toast.info .toast-title{color:#378add}
.toast-close{width:20px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0.3;background:transparent;border:none;padding:0}
.toast-close svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round}
.toast-close:hover{opacity:0.8}
.progress{position:absolute;bottom:0;left:0;height:2px;animation:shrink 3s linear forwards}
.toast.success .progress{background:#00e5a0}
.toast.error .progress{background:#e24b4a}
.toast.warning .progress{background:#ef9f27}
.toast.info .progress{background:#378add}
@keyframes shrink{from{width:100%}to{width:0%}}