#alert-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2147483647;
}

.alert {
    min-width: 260px;
    margin-bottom: 12px;
    padding: 14px 18px;
    color: #fff;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    animation: slideIn 0.4s ease forwards;
}

.alert.hide {
    animation: slideOut 0.4s ease forwards;
}

.alert.success { background: linear-gradient(45deg,#28a745,#5dd879); }
.alert.error   { background: linear-gradient(45deg,#dc3545,#ff6b6b); }
.alert.warning { background: linear-gradient(45deg,#ffc107,#ffd966); color:#000; }
.alert.info    { background: linear-gradient(45deg,#17a2b8,#5bc0de); }

.alert button {
    background: none;
    border: none;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
}

@keyframes slideIn {
    from { opacity:0; transform: translateX(100%); }
    to   { opacity:1; transform: translateX(0); }
}

@keyframes slideOut {
    from { opacity:1; transform: translateX(0); }
    to   { opacity:0; transform: translateX(120%); }
}