.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.self-gradient-bg {
    background: linear-gradient(135deg, #1bee1f 0%, #0080ff 100%);
}

.glass-morphism {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.floating-animation {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-down {
    animation: slideDown 0.6s ease-in;
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


.error-message {
    animation: shake-error 0.7s ease-in-out; /* 持续多少秒，缓动效果 */
}

@keyframes shake-error {
    0%, 100% {
        transform: translateX(0);
    }
    /* 初始和结束位置 */
    20% {
        transform: translateX(-10px);
    }
    /* 向左移动 */
    40% {
        transform: translateX(10px);
    }
    /* 向右移动 */
    60% {
        transform: translateX(-8px);
    }
    /* 向左回弹 */
    80% {
        transform: translateX(8px);
    }
    /* 向右回弹 */
}