.flash-messages {
    position: fixed;
    top: 20px;
    width: 100%;
    z-index: 1050;
    pointer-events: none;
    perspective: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flash-message {
    margin-bottom: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border: none;
    backdrop-filter: blur(10px);
    font-weight: 500;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    pointer-events: auto;
    width: 400px;
    max-width: 90%;
    will-change: transform, opacity;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backface-visibility: hidden;
    transform: translateY(-20px);
    opacity: 0;
}

.flash-message.success {
    background: linear-gradient(145deg, rgba(40, 167, 69, 0.95) 0%, rgba(32, 201, 151, 0.95) 100%);
    color: white;
    border-left: 4px solid #28a745;
    transform-origin: top center;
}

.flash-message.error {
    background: linear-gradient(145deg, rgba(220, 53, 69, 0.95) 0%, rgba(248, 99, 132, 0.95) 100%);
    color: white;
    border-left: 4px solid #dc3545;
}

.flash-message.warning {
    background: linear-gradient(145deg, rgba(255, 193, 7, 0.95) 0%, rgba(255, 218, 106, 0.95) 100%);
    color: #000;
    border-left: 4px solid #ffc107;
}

.flash-message.info {
    background: linear-gradient(145deg, rgba(13, 202, 240, 0.95) 0%, rgba(61, 139, 253, 0.95) 100%);
    color: white;
    border-left: 4px solid #0dcaf0;
}

.flash-message i {
    font-size: 1.4rem;
    margin-right: 1rem;
    opacity: 0.9;
}

.flash-message .btn-close {
    padding: 1rem;
    margin: -1rem -1rem -1rem auto;
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: all 0.2s ease-in-out;
    transform: scale(0.8);
}

.flash-message.warning .btn-close {
    filter: none;
}

.flash-message .btn-close:hover {
    opacity: 1;
    transform: scale(1);
}

.flash-message:hover {
    transform: translateY(0) scale(1.02);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.flash-message.show {
    transform: translateY(0);
    opacity: 1;
}

.flash-message.hide {
    transform: translateY(-20px);
    opacity: 0;
} 
/* 响应式设计 */
@media (max-width: 576px) {
    .flash-messages {
        right: 10px;
        left: 10px;
    }
    
    .flash-message {
        width: 100%;
    }
}