/* 全局样式重置和默认字体设置 */
* {
    margin: 0; /* 移除所有元素的默认外边距 */
    padding: 0; /* 移除所有元素的默认内边距 */
    box-sizing: border-box; /*元素的总宽度和高度包括了padding和border*/
    font-family: 'Quicksand', sans-serif; /* 设置默认字体为 Quicksand，若无则使用无衬线字体 */
}

/* 设置根元素的颜色方案为浅色模式，影响浏览器默认控件如滚动条的颜色 */
:root {
    color-scheme: light;
}

/* body 基础样式，实现内容垂直水平居中和深色背景 */
body {
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 主轴（水平）居中对齐 */
    align-items: center; /* 交叉轴（垂直）居中对齐 */
    min-height: 100vh; /* 最小高度为整个视口高度 */
    background: #000; /* 背景色为黑色 */
    color: #ccc; /* 默认文字颜色为浅灰色 */
}

/* section 容器样式，用于背景动画和主要内容定位 */
section {
    position: absolute; /* 绝对定位，相对于body或最近的已定位祖先 */
    top: 0; /* 紧贴顶部 */
    left: 0; /* 紧贴左侧 */
    width: 100vw; /* 宽度为整个视口宽度 */
    height: 100vh; /* 高度为整个视口高度 */
    display: flex; /* 使用flex布局（主要用于内部span的排列） */
    justify-content: center; /* 水平居中（虽然span会换行，但理论上影响第一行） */
    align-items: center; /* 垂直居中（同上） */
    gap: 2px; /* flex子项之间的间隙 */
    flex-wrap: wrap; /* 允许子项换行 */
    overflow: hidden; /* 隐藏超出部分，特别是动画的伪元素 */
}

/* section 的伪元素，用于创建动态背景渐变动画 */
section::before {
    content: ''; /* 伪元素必须有content属性 */
    position: absolute; /* 绝对定位，铺满整个section */
    width: 100%;
    height: 100%;
    background: linear-gradient(#000, #bb271a, #000); /* 线性渐变背景：黑 -> 红 -> 黑 */
    animation: animate 5s linear infinite; /* 应用名为 'animate' 的动画，持续5秒，线性，无限循环 */
}

/* 定义背景渐变动画 'animate' */
@keyframes animate {
    0% { transform: translateY(-100%); } /* 动画开始时，渐变层在视口上方 */
    100% { transform: translateY(100%); } /* 动画结束时，渐变层在视口下方，形成从上到下的滚动效果 */
}

/* === 专为背景动画的 SPAN 元素设计的样式 === */
/* section 内的直接子元素 span (即背景方块) */
section > span {
    position: relative; /* 相对定位，使其可以响应z-index */
    display: block; /* 块级元素 */
    /* 使用视口单位vw计算宽高，减去2px的gap，形成网格效果 */
    width: calc(6.25vw - 2px); /* 每个方块的宽度 */
    height: calc(6.25vw - 2px); /* 每个方块的高度 (保持正方形) */
    background: #181818 !important; /* 背景色为深灰色，!important确保覆盖其他可能影响的样式 */
    z-index: 2; /* 堆叠顺序在渐变背景之上，但在签入表单之下 */
    transition: 1.5s; /* 背景色变化的过渡效果 */
    color: transparent !important; /* 使span内的任何潜在文本透明 */
    font-size: 0 !important; /* 使span内的任何潜在文本大小为0 */
}
/* 鼠标悬停在背景方块上时的效果 */
section > span:hover {
    background: #bb271a !important; /* 背景色变为红色 */
    transition: 0s; /* 悬停时立即变化，无过渡 */
}
/* === 背景动画 SPAN 样式结束 === */


/* 签入/认证表单容器样式 */
section .signin {
    position: absolute; /* 绝对定位，相对于section */
    top: 50%; /* 垂直居中定位 */
    left: 50%; /* 水平居中定位 */
    transform: translate(-50%, -50%); /* 通过transform精确居中 */
    width: 90%; /* 宽度为父容器的90% */
    max-width: 480px; /* 最大宽度限制 */
    background: #222; /* 背景色为深灰色 */
    z-index: 1000; /* 确保在背景动画span和渐变层之上 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中内部的 .content */
    align-items: flex-start; /* 垂直方向从顶部开始对齐内部的 .content (当内容超高时有用) */
    padding: 20px; /* 内边距 */
    border-radius: 8px; /* 圆角边框 */
    box-shadow: 0 15px 35px rgba(0,0,0,0.7); /* 盒子阴影 */
    max-height: 90vh; /* 最大高度为视口高度的90% */
    overflow-y: auto; /* 当内容超出max-height时，垂直方向显示滚动条 */
}

/* 签入表单内部的内容区域 */
section .signin .content {
    position: relative; /* 相对定位，用于内部元素可能的绝对定位 */
    width: 100%; /* 宽度占满父容器 .signin */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 子元素垂直排列 (姓名输入区、答题区、通行证区) */
}

/* === 姓名输入区域样式 === */
#name-input-container {
    text-align: center; /* 内部文本和块级元素（如按钮）水平居中 */
    padding: 20px 0; /* 上下内边距20px */
}

#name-input-container h2 {
    color: #5cb85c; /* 标题文字颜色 (绿色) */
    margin-bottom: 20px; /* 底部外边距 */
    font-size: 1.6em; /* 字体大小 */
}

/* 输入框字段组 (如果需要更复杂的布局，可以包裹输入框) */
.input-field-group {
    margin-bottom: 20px; /* 底部外边距 */
}

/* 姓名输入框样式 */
#holder-name-input {
    width: 80%; /* 宽度为父容器的80% */
    max-width: 300px; /* 最大宽度限制 */
    padding: 12px 15px; /* 内边距 */
    background-color: #333; /* 背景色 */
    border: 1px solid #555; /* 边框 */
    border-radius: 6px; /* 圆角 */
    color: #fff; /* 输入文字颜色 */
    font-size: 1em; /* 字体大小 */
    text-align: center; /* 占位符和输入的文本居中 */
}
/* 姓名输入框占位符样式 */
#holder-name-input::placeholder {
    color: #888; /* 占位符文字颜色 */
}

/* 姓名验证消息样式 */
#name-validation-message {
    background-color: #4a2a2a; /* 背景色 (暗红色) */
    color: #f8b8b8; /* 文字颜色 (浅红色) */
    border: 1px solid #6b3e3e; /* 边框 */
    padding: 8px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
    font-size: 0.9em; /* 字体大小 */
    margin-top: 15px; /* 顶部外边距 */
    display: inline-block; /* 使其宽度自适应内容，但可设置上下margin/padding */
}
/* === 姓名输入区域样式结束 === */


/* === 答题区域样式 === */
#quiz-container {
    padding: 0; /* 无内边距 (由内部元素控制) */
    width: 100%; /* 宽度占满父容器 */
}
#quiz-container h2 {
    text-align: center; /* 标题文本居中 */
    color: #5cb85c; /* 标题文字颜色 (绿色) */
    margin-bottom: 25px; /* 底部外边距 */
    font-size: 1.6em; /* 字体大小 */
    text-transform: none; /* 文本不转换为大写或小写 (默认) */
}
#question-area {
    /* 问题区域，如果问题列表很长，可以在此设置滚动 */
}

/* 单个问题块样式 */
.question-block {
    margin-bottom: 20px; /* 问题块之间的底部外边距 */
    padding: 15px; /* 内边距 */
    background-color: #2d2d2d; /* 背景色 */
    border-radius: 8px; /* 圆角 */
    border: 1px solid #444; /* 边框 */
    text-align: left; /* 问题文本和选项左对齐 */
}
/* 问题块内的P标签 (即问题文本) 样式 */
.question-block p {
    font-weight: bold; /* 字体加粗 */
    margin-top: 0; /* 顶部外边距 */
    margin-bottom: 15px; /* 底部外边距 */
    color: #e0e0e0; /* 文字颜色 */
}

/* === 选项增强样式 (隐藏原生radio，使用label美化) === */
/* 隐藏原生的radio按钮 */
.question-block input[type="radio"] {
    display: none;
}

/* radio按钮选项的label标签样式 - 现在是可点击的元素 */
.question-block label {
    display: block; /* 使label占据整行 */
    margin-bottom: 10px; /* 选项之间的底部外边距 */
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
    font-size: 0.95em; /* 字体大小 */
    color: #ccc; /* 文字颜色 */
    padding: 10px 12px; /* 内边距 */
    border-radius: 6px; /* 圆角 */
    /* 过渡效果：背景色、文字颜色、边框颜色 */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    border: 1px solid transparent; /* 默认透明边框 */
    line-height: 1.3; /* 行高 */
    position: relative; /* 用于可能的伪元素定位 (例如自定义radio点) */
}

/* 鼠标悬停在选项label上时的样式 */
.question-block label:hover {
    background-color: #3a3a3a; /* 背景色变深 */
    color: #fff; /* 文字颜色变白 */
}

/* 当关联的radio按钮被选中时，其后紧邻的label的样式 */
.question-block input[type="radio"]:checked + label {
    background-color: #4CAF50; /* 背景色变为绿色 (选中状态) */
    color: white; /* 文字颜色变为白色 */
    border-color: #3e8e41; /* 边框颜色 (深绿色) */
    font-weight: bold; /* 字体加粗 */
}
/* === 选项增强样式结束 === */


/* 通用导航按钮样式 (下一题, 上一题, 开始认证, 提交认证等) */
.nav-button {
    padding: 10px 20px; /* 内边距 */
    background-color: #5cb85c; /* 背景色 (绿色) */
    color: white; /* 文字颜色 */
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角 */
    cursor: pointer; /* 鼠标手型 */
    font-size: 0.95em; /* 字体大小 */
    margin-top: 20px; /* 顶部外边距 */
    transition: background-color 0.3s ease; /* 背景色过渡动画 */
    font-weight: bold; /* 字体加粗 */
}
.nav-button:hover {
    background-color: #4cae4c; /* 鼠标悬停时背景色变深 */
}

/* 问答区域内导航按钮的特定样式 (如果与通用样式不同) */
.question-block .nav-button {
    /* 此处可以添加仅作用于问题块内按钮的样式 */
}
/* “上一题”按钮的特定样式 */
.prev-question-btn {
    background-color: #777; /* 背景色 (灰色) */
    margin-right: 10px; /* 右外边距，与“下一题”按钮隔开 */
}
.prev-question-btn:hover {
    background-color: #666; /* 鼠标悬停时背景色变深 */
}
/* 最终“提交认证”按钮的特定样式 */
#submit-quiz-btn {
    background-color: #d9534f; /* 背景色 (红色) */
}
#submit-quiz-btn:hover {
    background-color: #c9302c; /* 鼠标悬停时背景色变深 */
}


/* 答题时“请选择一个答案”的验证消息样式 */
#validation-message {
    background-color: #4a2a2a; /* 背景色 (暗红色) */
    color: #f8b8b8; /* 文字颜色 (浅红色) */
    border: 1px solid #6b3e3e; /* 边框 */
    padding: 8px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
    font-size: 0.9em; /* 字体大小 */
    margin-top: 10px; /* 顶部外边距 */
    text-align: center; /* 文本居中 */
}
/* 答题失败时的结果消息样式 */
#result-message {
    margin-top: 20px; /* 顶部外边距 */
    padding: 10px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    text-align: center; /* 文本居中 */
    font-weight: bold; /* 字体加粗 */
}
/* 确保在 quiz-container 内的 result-message 和 retry-button 可以通过 margin auto 居中 */
#quiz-container > #result-message,
#quiz-container > #retry-button {
    display: block; /* 块级元素才能应用 margin:auto 水平居中 */
    margin-left: auto;
    margin-right: auto;
}
/* “再试一次”按钮样式 */
#retry-button {
    display: block; /* 块级元素 */
    width: auto; /* 宽度自适应内容 */
    min-width: 120px; /* 最小宽度 */
    padding: 12px 20px; /* 内边距 */
    background-color: #d9534f; /* 背景色 (红色) */
    color: white; /* 文字颜色 */
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角 */
    cursor: pointer; /* 鼠标手型 */
    font-size: 1em; /* 字体大小 */
    margin-top: 20px; /* 顶部外边距 */
    transition: background-color 0.3s ease; /* 背景色过渡动画 */
    font-weight: bold; /* 字体加粗 */
}
#retry-button:hover {
    background-color: #c9302c; /* 鼠标悬停时背景色变深 */
}
/* 答题成功消息容器样式 (如果单独使用一个div) */
.success {
    background-color: #2a3d2a; /* 背景色 (暗绿色) */
    color: #a8d8a8; /* 文字颜色 (浅绿色) */
    border: 1px solid #3c5c3e; /* 边框 */
}
/* 答题失败消息容器样式 (用于 #result-message) */
.failure {
    background-color: #4a2a2a; /* 背景色 (暗红色) */
    color: #f8b8b8; /* 文字颜色 (浅红色) */
    border: 1px solid #6b3e3e; /* 边框 */
}
/* === 答题区域样式结束 === */


/* === 通行证样式 === */
#pass-container {
    background-color: #2c3e50; /* 通行证主背景色 (深蓝灰色) */
    padding: 0; /* 无内边距，由内部元素控制 */
    border-radius: 8px; /* 圆角 */
    overflow: hidden; /* 隐藏溢出内容 (例如内部圆角) */
    color: white; /* 默认文字颜色 */
}
/* 通行证内部的 span 元素通用重置，避免与背景动画的 span 样式冲突 */
#pass-container span {
    background-color: transparent !important; /* 背景透明 */
    color: inherit !important; /* 继承父元素文字颜色 */
    font-size: inherit !important; /* 继承父元素字体大小 */
    border: none !important; /* 无边框 */
    padding: 0 !important; /* 无内边距 */
    margin: 0 !important; /* 无外边距 */
}

/* 通行证头部样式 */
.pass-header {
    text-align: center; /* 文本居中 */
    padding: 25px 20px; /* 内边距 */
    background-color: #34495e; /* 头部背景色 (稍浅的蓝灰色) */
}
/* 头部成功打勾图标的圆形背景 */
.pass-header .checkmark-circle {
    width: 70px; /* 宽度 */
    height: 70px; /* 高度 */
    border-radius: 50%; /* 圆形 */
    background-color: #4CAF50; /* 背景色 (绿色) */
    margin: 0 auto 15px; /* 水平居中，底部外边距15px */
    display: flex; /* flex布局用于居中内部SVG */
    justify-content: center;
    align-items: center;
}
/* 头部成功打勾图标SVG样式 */
.pass-header .checkmark-circle svg {
    width: 40px; /* SVG宽度 */
    height: 40px; /* SVG高度 */
}
/* SVG内圆圈背景路径样式 */
.pass-header .checkmark-circle .checkmark-circle-bg {
    stroke-width: 3; /*描边宽度*/
    stroke: #fff; /*描边颜色 (白色) */
}
/* SVG内打勾路径样式 */
.pass-header .checkmark-circle .checkmark-check {
    stroke-width: 4; /*描边宽度*/
    stroke-linecap: round; /*路径末端为圆形*/
    stroke: #fff; /*描边颜色 (白色) */
}
/* 头部H2标题样式 */
.pass-header h2 {
    color: #eafaf1; /* 文字颜色 (非常浅的绿色) */
    font-size: 1.8em; /* 字体大小 */
    margin: 10px 0 5px; /* 上10px，下5px外边距 */
    background-color: transparent; /* 确保背景透明 */
}
/* 头部P段落样式 */
.pass-header p {
    color: #bdc3c7; /* 文字颜色 (浅灰色) */
    font-size: 0.95em; /* 字体大小 */
    margin: 0; /* 无外边距 */
    background-color: transparent; /* 确保背景透明 */
}

/* 通行证详细信息区域样式 */
.pass-details {
    background-color: #39b54a; /* 背景色 (通行证主色调，绿色) */
    color: white; /* 文字颜色 */
    padding: 20px; /* 内边距 */
    margin: 0; /* 无外边距 */
    text-align: left; /* 文本左对齐 */
}
/* 通行证详细信息区域的标题栏样式 */
.pass-details .pass-title-bar {
    display: flex; /* flex布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
    margin-bottom: 15px; /* 底部外边距 */
    background-color: transparent; /* 背景透明 */
    color: white; /* 文字颜色 */
}
/* 标题栏H3样式 */
.pass-details .pass-title-bar h3 {
    margin: 0; /* 无外边距 */
    font-size: 1.6em; /* 字体大小 */
    color: white; /* 文字颜色 */
    background-color: transparent; /* 背景透明 */
}
/* 标题栏地球图标样式 (是一个包含表情符号的span) */
.pass-details .pass-title-bar .globe-icon {
    font-size: 1.5em; /* 字体大小 (影响表情符号大小) */
    /* color 和 background 已被 #pass-container span 重置或继承 */
}

/* 通行证详细信息区域的P段落样式 */
.pass-details p {
    margin-top: 4px; /* 上外边距 */
    margin-bottom: 4px; /* 下外边距 */
    margin-left: 0;
    margin-right: 0;
    padding: 0; /* 无内边距 */
    font-size: 0.95em; /* 字体大小 */
    background-color: transparent; /* 背景透明 */
    color: white; /* 文字颜色 */
    line-height: 1.4; /* 行高 */
}
/* P段落内strong标签样式 */
.pass-details p strong {
    font-weight: bold; /* 字体加粗 */
    color: white; /* 文字颜色 */
    background-color: transparent; /* 背景透明 */
}
/* 持有人姓名和通行证编号的span特定样式 */
#pass-holder, #pass-number {
    font-weight: normal; /* 正常字重 (或 bold 如果需要) */
    /* color 和 background 已被 #pass-container span 重置或继承 */
}

/* “有效”状态标签样式 */
.pass-details .status-valid {
    background-color: white !important; /* 背景白色 (覆盖父级透明) */
    color: #39b54a !important; /* 文字绿色 (覆盖父级白色) */
    padding: 3px 10px !important; /* 内边距 */
    border-radius: 15px; /* 圆角形成药丸状 */
    font-weight: bold; /* 字体加粗 */
    font-size: 0.9em !important; /* 字体大小 */
    display: inline-block; /* 行内块元素 */
    margin: 0 !important; /* 无外边距 */
}

/* 有效期区域样式 */
.pass-details .validity-period {
    display: flex; /* flex布局 */
    justify-content: space-between; /* 两端对齐 */
    margin-top: 20px; /* 上外边距 */
    margin-bottom: 20px; /* 下外边距 */
    font-size: 0.9em; /* 基础字体大小 */
    background-color: transparent; /* 背景透明 */
    color: white; /* 文字颜色 */
}
/* 有效期区域内部div样式 */
.pass-details .validity-period div {
    background-color: transparent; /* 背景透明 */
    color: white; /* 文字颜色 */
}
/* 有效期区域strong标签样式 (“有效期从/至”文本) */
.pass-details .validity-period strong {
    font-size: 0.95em; /* 字体大小 */
    color: #d0e0d0; /* 文字颜色 (浅绿色) */
    background-color: transparent; /* 背景透明 */
}
/* 有效期区域span标签样式 (实际日期文本) */
.pass-details .validity-period span {
    font-size: 1.1em !important; /* 确保此字体大小应用 */
    font-weight: bold; /* 字体加粗 */
    /* color 和 background 已被 #pass-container span 重置或继承 */
}

/* 二维码区域样式 */
.pass-details .qr-code {
    text-align: center; /* 内部图片居中 */
    margin: 20px auto; /* 上下外边距20px，左右自动实现水平居中 */
    background-color: white; /* 背景白色，以便二维码清晰显示 */
    padding: 10px; /* 内边距，二维码与边框的间距 */
    display: block; /* 块级元素 */
    width: fit-content; /* 宽度自适应内容 (图片大小) */
    border-radius: 5px; /* 圆角 */
}
/* 二维码图片样式 */
.pass-details .qr-code img {
    display: block; /* 移除图片下方的额外空白 */
    width: 120px; /* 图片宽度 */
    height: 120px; /* 图片高度 */
}

/* “此签证有效期为7天”文本样式 */
.pass-details .validity-duration {
    text-align: center; /* 文本居中 */
    font-size: 0.9em; /* 字体大小 */
    margin-top: 10px; /* 上外边距 */
    background-color: transparent; /* 背景透明 */
    color: white; /* 文字颜色 */
}

/* 公民权益区域样式 */
.citizen-rights {
    background-color: #34495e; /* 背景色 (与头部一致) */
    margin: 0; /* 无外边距 */
    padding: 20px; /* 内边距 */
    border-top: 1px solid #2c3e50; /* 顶部边框，与通行证主背景色一致，形成分割线效果 */
}
/* 公民权益H4标题样式 */
.citizen-rights h4 {
    margin-top: 0; /* 上外边距 */
    margin-bottom: 15px; /* 下外边距 */
    color: #ecf0f1; /* 文字颜色 (浅灰色) */
    font-size: 1.2em; /* 字体大小 */
    background-color: transparent; /* 背景透明 */
}
/* 公民权益列表ul样式 */
.citizen-rights ul {
    list-style: none; /* 移除默认列表样式 (项目符号) */
    padding: 0; /* 无内边距 */
    margin: 0; /* 无外边距 */
    background-color: transparent; /* 背景透明 */
}
/* 公民权益列表项li样式 */
.citizen-rights li {
    margin-bottom: 10px; /* 列表项之间的底部外边距 */
    font-size: 0.95em; /* 字体大小 */
    color: #bdc3c7; /* 文字颜色 (浅灰色) */
    display: flex; /* 使用flex布局，使图标和文本对齐 */
    align-items: center; /* 垂直居中对齐 */
    background-color: transparent; /* 背景透明 */
}
/* 列表项前面的打勾图标 (是一个包含表情符号的span) */
.citizen-rights li .check-icon {
    color: #2ecc71 !important; /* 图标颜色 (亮绿色) */
    font-size: 1.2em !important; /* 图标大小 */
    margin-right: 8px !important; /* 与右侧文本的间距 */
    /* background 已被 #pass-container span 重置 */
}
/* === 通行证样式结束 === */


/* 响应式调整 */
/* 当屏幕宽度小于等于900px时 */
@media (max-width: 900px) {
    section > span { /* 调整背景动画方块的大小 */
        width: calc(10vw - 2px);
        height: calc(10vw - 2px);
    }
}
/* 当屏幕宽度小于等于600px时 (移动设备优先) */
@media (max-width: 600px) {
    section > span { /* 进一步调整背景动画方块的大小 */
        width: calc(20vw - 2px);
        height: calc(20vw - 2px);
    }
    section .signin { /* 调整签入表单的宽度、内边距和最大高度 */
        width: 95%;
        padding: 15px;
        max-height: 95vh;
    }
    /* 调整姓名输入和答题区域标题的字体大小和边距 */
    #name-input-container h2,
    #quiz-container h2 { font-size: 1.4em; margin-bottom: 20px; }
    /* 调整姓名输入框的字体大小和内边距 */
    #holder-name-input { font-size: 0.95em; padding: 10px 12px;}
    /* 调整问题文本的字体大小和边距 */
    .question-block p { font-size: 0.9em; margin-bottom: 12px; }
    /* 调整选项label的字体大小、内边距和边距 */
    .question-block label { font-size: 0.9em; padding: 8px 10px; margin-bottom: 8px;}
    /* 调整导航按钮的内边距和字体大小 */
    .nav-button { padding: 8px 15px; font-size: 0.9em; }
    /* 调整通行证头部标题的字体大小 */
    .pass-header h2 { font-size: 1.5em; }
    /* 调整通行证详细信息区域标题栏H3的字体大小 */
    .pass-details .pass-title-bar h3 { font-size: 1.3em; }
    /* 调整二维码图片的大小 */
    .pass-details .qr-code img { width: 100px; height: 100px; }
    /* 调整公民权益区域H4标题的字体大小 */
    .citizen-rights h4 { font-size: 1.1em; }
    /* 调整公民权益列表项的字体大小 */
    .citizen-rights li { font-size: 0.9em; }
}