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

body {
    font-family: "Microsoft YaHei", "Roboto", Consolas, sans-serif;
    background: #000814; /* 深空黑科技基底 */
    overflow: hidden;
}
/* ========== 科技粒子背景层（底层氛围感） ========== */
#particle-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #001d3d 0%, #000814 100%);
    background-image: radial-gradient(circle 2px at 50px 80px, rgba(0,229,255,0.1) 0%, transparent 100%), radial-gradient(circle 1px at 120px 200px, rgba(67,247,153,0.08) 0%, transparent 100%), radial-gradient(circle 2px at 300px 150px, rgba(0,229,255,0.1) 0%, transparent 100%);
    z-index: 1;
}
/* ========== 全屏验证容器（毛玻璃+居中核心层） ========== */
#verify-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 13, 26, 0.88);
    backdrop-filter: blur(10px); /* 强化毛玻璃质感 */
}
/* ========== ✨ 核心特效：双层环形转圈加载动画（视觉核心） ========== */
.loading-circle-box {
    position: relative;
    width: 160px;
    height: 160px;
    margin-bottom: 40px;
}
/* 外层大圆环（慢转速+宽轨道+主发光） */
.circle-outer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 6px solid transparent;
    border-top: 6px solid #00e5ff; /* 青蓝主色 */
    border-radius: 50%;
    box-shadow: 0 0 20px #00e5ff, 0 0 40px rgba(0,229,255,0.3);
    animation: circle-rotate-slow 3s linear infinite;
}
/* 内层小圆环（快转速+窄轨道+渐变发光） */
.circle-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 70%;
    transform: translate(-50%, -50%);
    border: 4px solid transparent;
    border-bottom: 4px solid #43f799; /* 青绿辅色 */
    border-radius: 50%;
    box-shadow: 0 0 15px #43f799, 0 0 30px rgba(67,247,153,0.25);
    animation: circle-rotate-fast 1.8s linear infinite reverse;
}
/* 圆环中心光点（呼吸缩放+脉冲发光） */
.circle-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #00e5ff, #43f799);
    border-radius: 50%;
    box-shadow: 0 0 10px #00e5ff, 0 0 20px #43f799;
    animation: circle-breathe 2s ease-in-out infinite alternate;
}
/* ========== 科技动画关键帧合集（转圈+呼吸+扫光+淡入） ========== */
/* 外层慢转圈 */
@keyframes circle-rotate-slow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/* 内层快反转圈（反向旋转更有层次感） */
@keyframes circle-rotate-fast {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
/* 中心光点呼吸缩放（脉冲科技感） */
@keyframes circle-breathe {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.7;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
        box-shadow: 0 0 15px #00e5ff, 0 0 30px #43f799;
    }
}
/* 文案淡入上浮 */
@keyframes tech-fade {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* 数字颜色跳动 */
@keyframes tech-number {
    0% {
        color: #0077b6;
    }

    50% {
        color: #00e5ff;
        text-shadow: 0 0 8px #00e5ff;
    }

    100% {
        color: #0077b6;
    }
}

/* ========== 科技感文案样式（排版+发光） ========== */
.verify-text {
    font-size: 24px;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 3px;
    margin-bottom: 20px;
    text-shadow: 0 0 12px rgba(0,229,255,0.6);
    animation: tech-fade 0.8s ease-out forwards;
}

.verify-number {
    font-size: 19px;
    color: #0077b6;
    margin-bottom: 25px;
    letter-spacing: 2px;
    font-family: Consolas, monospace;
    animation: tech-number 1s linear infinite;
}
/* ========== 验证结果提示（发光卡片区分成败） ========== */
.result-tips {
    margin-top: 15px;
    font-size: 17px;
    padding: 10px 25px;
    border-radius: 8px;
    display: none;
    font-weight: 500;
    letter-spacing: 1px;
    min-width: 350px;
    text-align: center;
}

.success {
    color: #43f799;
    border: 1px solid #43f799;
    background: rgba(67, 247, 153, 0.1);
    box-shadow: 0 0 15px #43f799;
}

.error {
    color: #ff4d6d;
    border: 1px solid #ff4d6d;
    background: rgba(255, 77, 109, 0.1);
    box-shadow: 0 0 15px #ff4d6d;
}