* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    background: #0f0f1a;
    display: flex;
    justify-content: center;
    align-items: center;
}

.progress-container {
    width: 430px;
    height: 5px;
    border-radius: 3px 3px 3px 3px;
    background: #1e1e2e;
    z-index: 9999;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: #4a9eff;
    border-radius: 0 3px 3px 0;
    animation: fillProgress 10s ease-in-out forwards;
}

/* 进度从0到100% */
@keyframes fillProgress {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}


.background {
    min-height: 100vh;
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
    /* 背景动画的关键：多重径向渐变 + 动画移动位置 */
    background: radial-gradient(circle at 30% 30%, #ff00c1, transparent 45%),
        radial-gradient(circle at 70% 70%, #00ffd5, transparent 45%),
        radial-gradient(circle at 20% 80%, #ffb300, transparent 50%),
        radial-gradient(circle at 85% 25%, #9d00ff, transparent 50%),
        #0a0a1a;
    /* 深色基底，让霓虹色更突出 */
    background-size: 200% 200%;
    /* 增加尺寸让移动更明显 */
    animation: neonFlow 6s ease-in-out infinite alternate;
    /* 给文字一点光晕 */
    color: rgba(255, 255, 255, 0.284);
    text-shadow: 0 0 10px cyan, 0 0 20px magenta;
}

/* 霓虹灯流动动画：通过移动背景位置和轻微变换色相感 */
@keyframes neonFlow {
    0% {
        background-position: 10% 0%, 100% 100%, 0% 100%, 100% 0%;
        filter: hue-rotate(0deg) brightness(1);
    }

    25% {
        background-position: 30% 10%, 70% 90%, 20% 70%, 80% 30%;
    }

    50% {
        background-position: 60% 30%, 40% 60%, 40% 40%, 60% 60%;
        filter: hue-rotate(30deg) brightness(1.1);
    }

    75% {
        background-position: 20% 70%, 80% 20%, 60% 20%, 40% 80%;
    }

    100% {
        background-position: 80% 40%, 20% 60%, 90% 50%, 10% 50%;
        filter: hue-rotate(60deg) brightness(1.2);
    }
}

.flex-box {
    display: flex;
    width: 600px;
    height: 300px;
    flex-direction:column;
    background-color: rgba(31, 31, 66, 0.5);
    backdrop-filter: blur(5px);
    border-radius: 3rem;
    padding: 3rem 5rem;
    border: 2px solid rgba(0, 255, 255, 0.4);
    box-shadow: 0 0 30px #00ffff88, 0 0 60px #ff00ff88, inset 0 0 20px #ffffff33;
    transition: 0.3s;
}

.text1 {
    width: 500px;
    height: 50px;
    font-size: 40px;
    color: #e0f7ff;
    font-weight: 600;
}

.text2 {
    width: 500px;
    height: 50px;
    font-size: 25px;
    color: #e0f7ff;
    font-weight: 400;
}

.loading-text {
    font-size: 25px;
    text-align: center;
    font-weight: 500;
    color: #ddcde7;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}