.gradient-bg {
    /*background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);*/
    /*background:*/
    /*        radial-gradient(circle at 15% 40%, rgba(88, 28, 135, 0.7) 0%, transparent 40%),*/
    /*        radial-gradient(circle at 85% 20%, rgba(15, 52, 96, 0.8) 0%, transparent 35%),*/
    /*        radial-gradient(circle at 60% 85%, rgba(6, 95, 70, 0.5) 0%, transparent 38%),*/
    /*        radial-gradient(circle at 40% 60%, rgba(30, 27, 75, 0.9) 0%, transparent 50%),*/
    /*        #070714;*/
    background:
            radial-gradient(ellipse at 20% 50%, #1a0533 0%, transparent 60%),
            radial-gradient(ellipse at 80% 10%, #0a1a3a 0%, transparent 55%),
            radial-gradient(ellipse at 50% 90%, #001a2e 0%, transparent 50%),
            radial-gradient(ellipse at 90% 70%, #0d0520 0%, transparent 45%),
            #050510;
}

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

.glass-morphism {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.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 {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    border-radius: 12px !important;
    color: #fca5a5 !important;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.08) inset,
    0 4px 6px rgba(239, 68, 68, 0.18),
    0 2px 4px rgba(0, 0, 0, 0.25);
    animation: shake-error 0.7s ease-in-out;
}

.error-message > div {
    justify-content: center;
}

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