#toast-container{position:fixed;bottom:30px;right:30px;z-index:2000;display:flex;flex-direction:column;gap:1rem}
.toast{background:rgba(26,43,60,.95);border:2px solid rgba(0,221,235,.4);color:#fff;padding:1rem 1.5rem;border-radius:12px;box-shadow:0 5px 15px rgba(0,221,235,.3);display:flex;align-items:center;gap:1rem;min-width:250px;max-width:400px;position:relative;overflow:hidden;animation:slideIn .5s ease-out forwards}
.toast.success{background:rgba(26,60,43,.95);border-color:rgba(0,255,136,.4)}
.toast.error{background:rgba(60,26,26,.95);border-color:rgba(255,68,68,.4)}
.toast .icon{font-size:1.5rem;flex-shrink:0}
.toast.success .icon{color:#0f8}
.toast.error .icon{color:#f44}
.toast .message{font-size:1rem;flex:1}
.toast .close-btn{background:0 0;border:none;color:#fff;font-size:1.2rem;cursor:pointer;padding:0;margin-right:.5rem;transition:transform .3s ease}
.toast .close-btn:hover{transform:scale(1.2)}
.toast .progress-bar{position:absolute;bottom:0;left:0;height:4px;width:100%;background:rgba(255,255,255,.2)}
.toast .progress-bar::before{content:"";position:absolute;height:100%;width:0;background:#0f8;animation:progress 4s linear forwards}
.toast.error .progress-bar::before{background:#f44}
@keyframes slideIn{
from{transform:translateX(110%);opacity:0}
to{transform:translateX(0);opacity:1}
}
@keyframes slideOut{
from{transform:translateX(0);opacity:1}
to{transform:translateX(110%);opacity:0}
}
@keyframes progress{
from{width:0}
to{width:100%}
}
@media (max-width:480px){
#toast-container{bottom:15px;right:15px;width:calc(100% - 30px)}
.toast{min-width:200px;max-width:100%;font-size:.9rem}
}