/* 定义从上到下的动画 */
@keyframes slide-down {
    0% {
        transform: translateY(-100%); /* 从上方完全隐藏 */
        opacity: 0; /* 起始时透明 */
    }
    100% {
        transform: translateY(0); /* 位置回到原位 */
        opacity: 1; /* 完全可见 */
    }
}

#message-container {
    position: fixed;
    top: 10px;
    left: 50%;
    z-index: 1;
    /* 使用新的动画效果 */
    animation: slide-down 0.75s cubic-bezier(0.4, 0, 0.2, 1); /* 增加动画时长与自定义缓动 */
}
.message {
    padding: 15px;
    margin: 10px 0;
    border-radius: 5px;
    color: white;
    position: relative;
}

.message.success {
    background-color: #67c23a; /* 成功消息颜色 */
}

.message.error {
    background-color: #f56c6c; /* 错误消息颜色 */
}

.message.info {
    background-color: #909399; /* 信息消息颜色 */
}

.close-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    color: white;
    font-weight: bold;
}