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

/* 核心：设置 html/body 铺满屏幕并添加背景图 */
html {
    height: 100%;
    min-height: 100vh;
}


/* 箭头容器：控制箭头的位置和动画 */
.arrow {
    position: absolute;
    width: 50px; /* 箭头图片宽度，可根据实际调整 */
    height: auto; /* 保持宽高比 */
    opacity: 1;
    animation: arrowFadeUp 3s ease-in-out infinite; /* 动画：3秒一次，循环 */
    pointer-events: none; /* 箭头不遮挡点击 */
}

/* 箭头1：位置+延迟动画 */
.arrow-1 {
    top: 10%;
    left: 5%;
    animation-delay: 0s; /* 立即开始 */
}

/* 箭头2：位置+延迟动画 */
.arrow-2 {
    top: 15%;
    left: 10%;
    transform: translateX(-50%);
    animation-delay: 0.5s; /* 延迟0.5秒 */
}

/* 箭头3：位置+延迟动画 */
.arrow-3 {
    top: 25%;
    right: 5%;
    animation-delay: 1s; /* 延迟1秒 */
}
/* 箭头4：位置+延迟动画 */
.arrow-4 {
    top: 22%;
    right: 10%;
    animation-delay: 1s; /* 延迟1秒 */
}

/* 箭头向上渐隐动画 */
@keyframes arrowFadeUp {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-50px); /* 向上移动50px */
        opacity: 0; /* 完全透明 */
    }
}

/* 图片样式：水平居中+自定义大小 */
.rebot1 {
    margin: 0 auto; /* 水平居中 */
    width: 900px; /* 自定义宽度 */
    height: auto; /* 高度自适应 */
    margin-bottom: 20px; /* PC端基础间距 */
    margin-top: 10px; /* 第一张图片下移 */
    max-width: 90%; /* 适配小屏：图片宽度自适应 */
}
.rebot2 {
    margin: 0 auto; /* 移除负边距，恢复正常居中 */
    width: 600px; /* 自定义宽度 */
    height: auto; /* 高度自适应 */
    margin-bottom: 20px; /* 与文本框保持间距 */
    max-width: 90%; /* 适配小屏：图片宽度自适应 */
}
/* 图片适配容器 */
.rebot1 img, .rebot2 img {
    width: 100%; /* 适配容器宽度 */
    height: auto; /* 避免变形 */
    object-fit: contain;
    display: block; /* 移除图片默认行内空白 */
}

/* 文本框样式 - 居中 */
.input-box {
    width: 500px; /* 文本框宽度 */
    max-width: 90%; /* 小屏自适应 */
    height: 40px; /* 文本框高度 */
    padding: 0 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    outline: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 50px;
    transition: border-color 0.3s ease; /* 边框颜色过渡 */
}
/* 输入框错误状态样式 */
.input-box.error {
    border-color: #ff4949; /* 红色边框提示 */
    box-shadow: 0 0 5px rgba(255, 73, 73, 0.2); /* 轻微红色阴影 */
}
.input-box:focus {
    border-color: #409eff; /* 聚焦时蓝色边框 */
    box-shadow: 0 0 5px rgba(64, 158, 255, 0.2);
}

/* 按钮样式 - 居中 */
.submit-btn {
    display: block; /* 块级元素才能margin:0 auto居中 */
    width: 200px; /* 按钮宽度 */
    max-width: 90%; /* 小屏自适应 */
    height: 45px; /* 按钮高度 */
    margin: 0 auto; /* 水平居中 */
    background-color: #409eff; /* 按钮背景色 */
    color: white; /* 文字白色 */
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer; /* 鼠标悬浮变手型 */
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.submit-btn:hover {
    background-color: #66b1ff; /* 悬浮变色 */
    transform: translateY(-2px); /* 轻微上浮效果 */
}
.submit-btn:active {
    transform: translateY(0); /* 点击回退 */
}

/* 可选：给内容底部添加少量间距，避免贴底（按需调整） */
.content-footer {
    margin-bottom: 200px;
    min-height: calc(20vh - 40px)
}

/* 弹窗遮罩层 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色遮罩 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 确保弹窗在最上层 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 弹窗显示状态 */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 弹窗容器 */
.modal-container {
    width: 500px;
    max-width: 90vw;
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* 弹窗标题 */
.modal-title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

/* 进度项容器 */
.progress-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

/* 进度项文字 */
.progress-text {
    width: 120px;
    font-size: 16px;
    color: #555;
}

/* 进度条容器 */
.progress-bar-container {
    flex: 1;
    height: 20px;
    background-color: #eee;
    border-radius: 10px;
    overflow: hidden;
}

/* 进度条 */
.progress-bar {
    height: 100%;
    width: 0%;
    background-color: #409eff;
    border-radius: 10px;
    transition: width 1.5s ease; /* 进度条动画时长 */
}

/* 百分比文字 */
.progress-percent {
    width: 60px;
    text-align: center;
    font-size: 14px;
    color: #666;
    margin-left: 10px;
}

/* 完成状态容器 - 美化样式 */
.complete-container {
    display: none; /* 默认隐藏 */
    padding: 20px 10px;
    text-align: center;
}

/* 完成状态文字行 - 优化样式 */
.complete-text-line {
    font-size: 17px;
    color: #2c3e50; /* 深灰色更高级 */
    line-height: 1.8;
    margin-bottom: 20px;
    padding: 0 10px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* 轻微文字阴影 */
}
/* 第一行文字强调 */
#completeLine1 {
    font-weight: 600;
    color: #2980b9; /* 蓝色强调 */
    font-size: 18px;
}

/* 完成状态按钮 - 美化 */
.complete-btn {
    display: block;
    width: 200px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background-color: #2980b9; /* 更深的蓝色 */
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    margin: 0 auto;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(41, 128, 185, 0.1);
}
.complete-btn:hover {
    background-color: #3498db;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(41, 128, 185, 0.15);
}
.complete-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(41, 128, 185, 0.1);
}

/* 响应式调整：移动端（屏幕宽度≤768px） */
@media (max-width: 768px) {
    .rebot1 {
        margin-bottom: 10px; /* 移动端缩小第一张图片底部间距 */
        margin-top: 5px; /* 移动端减少第一张图片顶部间距 */
    }
    .rebot2 {
        margin-top: 0; /* 移动端确保第二张图片无额外向上偏移 */
        margin-bottom: 15px; /* 移动端缩小与文本框的间距 */
    }
    /* 可选：进一步缩小移动端图片宽度，避免占满屏幕 */
    .rebot1 {
        width: 80%; /* 移动端第一张图片宽度80% */
    }
    .rebot2 {
        width: 70%; /* 移动端第二张图片宽度70% */
    }
    /* 移动端完成文字调整 */
    .complete-text-line {
        font-size: 16px;
    }
    #completeLine1 {
        font-size: 17px;
    }
    .complete-btn {
        width: 180px;
        height: 45px;
        line-height: 45px;
    }
}

/* 响应式调整：小屏手机（屏幕宽度≤480px） */
@media (max-width: 480px) {
    .rebot1 {
        margin-bottom: 5px; /* 小屏手机进一步缩小间距 */
    }
    .rebot2 {
        margin-bottom: 10px;
    }
}