@charset "UTF-8";
/* ============================================================
 * exam 插件学员端样式主入口（web.scss）——单文件版
 *
 * 来源：2026-10-15 由当时最新 web.css 产物整体反推（CSS 是 SCSS 子集，
 *       规则原样保留，语义零变化）；旧 scss/ 目录分 partial 版已废弃删除。
 * 编译：在本目录执行（版本锁定 1.62.1：最新版 sass 要求 Node >= 20，
 *       本机 Node 14 需 1.62.1，独立安装于 ~/sass-tool）：
 *         C:/Users/Administrator/sass-tool/node_modules/.bin/sass.cmd --no-source-map web.scss ../web.css
 * 修改样式请改本文件后重编译，不要直接改 web.css（会被下次编译覆盖）。
 * 适用页面：学员端六页 login / check / exam / result / certificate / certificate_query / notice
 * ============================================================ */
/* ============================================================
 * 学员端色板变量（_variables.scss）
 *
 * CSS 自定义属性挂 :root 全页生效，业务样式一律 var() 引用；
 * 设计口径：主色为主题蓝 #007BB6，成功绿 #19a923、
 * 危险红 #d9534f（答题卡判分着色同源）
 * ============================================================ */
:root {
  --exam-primary: #007bb6;
  --exam-primary-dark: #006a9d;
  --exam-primary-light: #eaf5fb;
  --exam-success: #19a923;
  --exam-success-light: #f0f9eb;
  --exam-danger: #d9534f;
  --exam-danger-light: #fef0f0;
  --exam-warning: #e6a23c;
  --exam-warning-light: #fdf6ec;
  --exam-text: #333;
  --exam-text-sub: #666;
  --exam-text-muted: #999;
  --exam-border: #dcdfe6;
  --exam-bg: #f0f2f5;
}

/* ============================================================
 * Reset 与基础（_base.scss）
 *
 * 全局盒模型 / 字体基调 / 链接与图片默认表现 / v-cloak 防闪烁；
 * .el-dialog__body 内距为学员端弹窗全局收紧（!important 压 Element 默认）
 * ============================================================ */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", sans-serif;
  font-size: 14px;
  color: var(--exam-text);
  background: var(--exam-bg);
  -webkit-font-smoothing: antialiased;
}

/* v-cloak 防闪烁须 !important：#app 同时挂 appClass（login-wrap/check-wrap 等
   display:flex 布局类），同特异度规则在编译产物中位于其后会覆盖 display:none，
   导致 Vue 编译前整页模板（含 @{{ }} 原始插值）闪现——加 important 锁定隐藏，
   Vue 挂载后 v-cloak 属性即被移除，规则自然失效无副作用 */
[v-cloak] {
  display: none !important;
}

a {
  color: var(--exam-primary);
  text-decoration: none;
}

a:hover {
  color: var(--exam-primary-dark);
}

img {
  max-width: 100%;
}

.el-dialog__body {
  padding: 10px 20px !important;
}

/* ============================================================
 * 跨页共用件（_components.scss）
 *
 * 面包屑 / 卡片 / 按钮 / 表单 / Toast 轻提示 / Loading / 文本色工具，
 * 六个学员端页面按需取用，页面差异样式不得改动此层
 * ============================================================ */
/* ---------- 面包屑 ---------- */
.exam-breadcrumb {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--exam-text-muted);
  padding: 14px 0;
}

.exam-breadcrumb span + span::before {
  content: "/";
  margin: 0 8px;
  color: #c0c4cc;
}

.exam-breadcrumb .current {
  color: var(--exam-text-sub);
}

/* ---------- 卡片 ---------- */
.exam-card {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 24px;
}

/* ---------- 按钮 ---------- */
.exam-btn {
  display: inline-block;
  padding: 10px 28px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
  white-space: nowrap;
}

.exam-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.exam-btn-primary {
  background: var(--exam-primary);
  color: #fff;
}

.exam-btn-primary:hover:not(:disabled) {
  background: var(--exam-primary-dark);
  color: #fff;
}

.exam-btn-success {
  background: var(--exam-success);
  color: #fff;
}

.exam-btn-warning {
  background: var(--exam-warning);
  color: #fff;
}

.exam-btn-danger {
  background: var(--exam-danger);
  color: #fff;
}

/* 幽灵按钮：灰色底白字，用于「放弃/返回」类次级动作 */
.exam-btn-ghost {
  background: #909399;
  color: #fff;
}

/* 线框按钮：白底描边，用于弹窗取消 */
.exam-btn-plain {
  background: #fff;
  border-color: var(--exam-border);
  color: var(--exam-text-sub);
}

.exam-btn-plain:hover:not(:disabled) {
  border-color: var(--exam-primary);
  color: var(--exam-primary);
}

.exam-btn-block {
  display: block;
  width: 100%;
}

.exam-btn-mini {
  padding: 6px 14px;
  font-size: 13px;
}

/* ---------- 表单 ---------- */
.exam-field {
  margin-bottom: 16px;
}

.exam-field label {
  display: block;
  font-size: 13px;
  color: var(--exam-text-sub);
  margin-bottom: 6px;
}

.exam-input,
.exam-select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--exam-border);
  border-radius: 4px;
  font-size: 14px;
  color: var(--exam-text);
  outline: none;
  background: #fff;
  transition: border-color 0.2s;
}

.exam-input:focus,
.exam-select:focus {
  border-color: var(--exam-primary);
}

.exam-input::placeholder {
  color: #c0c4cc;
}

/* 表单内联错误提示行 */
.exam-error {
  color: var(--exam-danger);
  font-size: 13px;
  text-align: center;
  min-height: 18px;
  margin-bottom: 10px;
}

/* ---------- Toast 轻提示 ---------- */
.exam-toast {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  padding: 10px 22px;
  border-radius: 4px;
  z-index: 3000;
  font-size: 14px;
  max-width: 80%;
  text-align: center;
}

/* ---------- Loading ---------- */
.exam-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: var(--exam-text-muted);
  font-size: 13px;
}

.exam-loading::before {
  content: "";
  width: 32px;
  height: 32px;
  margin-bottom: 10px;
  border: 3px solid var(--exam-primary-light);
  border-top-color: var(--exam-primary);
  border-radius: 50%;
  animation: exam-spin 0.8s linear infinite;
}

@keyframes exam-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ---------- 文本色工具 ---------- */
.exam-text-success {
  color: var(--exam-success);
}

.exam-text-danger {
  color: var(--exam-danger);
}

.exam-text-warning {
  color: var(--exam-warning);
}

.exam-text-muted {
  color: var(--exam-text-muted);
}

/* ============================================================
 * 科技风面板壳（login / check 共用）（_auth-panel.scss）
 *
 * 结构：wrap（全屏星空背景）> stage（宽度容器）> panel（面板框图铺底）
 *       > heading（面板图顶部装饰凹槽内的欢迎语/标题组）
 * 图片：编译产物位于 public/css/web.css，图片用 ../images/ 相对路径
 *       直达 /app/plugins/exam/public/images/（sass 不重写 url，
 *       相对路径以编译产物位置为基准，与 Blade 解耦页面无需注入）
 * 凹槽：面板框图顶部装饰凹槽（>>> <<<）纵向约占面板总高 18.7%，
 *       heading 按此比例绝对定位，桌面 padding-top:140px 避让凹槽
 * 注意：本区段全部为 login-* / check-* 跨页同构分组选择器，
 *       必须平铺保持原样，不做嵌套（嵌套会拆分/合并规则集）
 * ============================================================ */
.login-wrap,
.check-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 窄屏留边：面板 max-width:100% 时不贴屏幕边缘 */
  padding: 24px 16px;
  background: linear-gradient(135deg, rgba(16, 42, 82, 0.55), rgba(16, 42, 82, 0.25)), url("../images/login_back_pic.jpg") center/cover no-repeat;
}

/* 标题 + 面板的纵向组合（面板图自身带边框与顶部装饰凹槽） */
.login-stage,
.check-stage {
  width: 580px;
  max-width: 100%;
}

/* 面板框图 100% 100% 拉伸：内容撑高时边框跟随（科技风边框不破形） */
.login-panel,
.check-panel {
  position: relative;
  color: #e8f1fb;
  background: url("../images/loginBoxBackgroudn.png") center/100% 100% no-repeat;
  padding: 140px 64px 64px;
}

/* 凹槽欢迎语/标题组：按凹槽占面板图比例（纵向约 18.7%）等比定位，随面板拉伸不偏移 */
.login-heading,
.check-heading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18.7%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* 水平微校：背景图 >>> <<< 凹口内缘中点（50.66%）比图片中心偏右约 0.6%，
     flex 全宽居中只能对齐图片中心，580px 面板下整体偏左约 3px，
     造成标题距左箭头 5px / 距右箭头 12px 的不对称观感；此处右移补偿，
     translateX 百分比基于 heading 自身宽度（=面板宽），随面板等比缩放 */
  transform: translateX(0.6%);
}

/* 凹槽内文字统一观感：登录页「欢迎登录」与核对页「信息核对」同款
   字号/字距/字重/配色/阴影，两页切换凹槽文字视觉一致
   （22px 四字文字盒约 96px，580px 面板下箭头空隙约 129px，
   两侧各留约 16px 呼吸空间——浏览器实测值，原 26px 会贴死箭头装饰） */
.login-heading span,
.check-title {
  margin: 0;
  font-size: 22px;
  /* 统一粗体：check 侧 h1 原生 bold，login span 同步加粗（中文字重不改字宽，不挤凹槽） */
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* 面板内主按钮对齐站点色板：主题蓝 #007bb6（作用域放宽到整页 wrap：
   el-dialog 挂在 #app 下不进 panel，panel 级作用域罩不到弹窗内主按钮） */
.login-wrap .el-button--primary,
.check-wrap .el-button--primary {
  background-color: var(--exam-primary);
  border-color: var(--exam-primary);
}

.login-wrap .el-button--primary:hover,
.login-wrap .el-button--primary:focus,
.check-wrap .el-button--primary:hover,
.check-wrap .el-button--primary:focus {
  background-color: var(--exam-primary-dark);
  border-color: var(--exam-primary-dark);
}

/* ---- 移动端（<=480px）：面板图 100% 100% 拉伸后凹槽深度随内容变高不可控
        （padding-top 百分比追不上内容增长，照片/表格会顶进凹槽），
        改深蓝渐变卡替代框图、标题组回归文档流，从根上消除重叠 ---- */
@media (max-width: 480px) {
  .login-wrap,
  .check-wrap {
    /* 顶对齐可滚动：flex 居中在内容高于视口时会裁掉顶部且无法滚动 */
    align-items: flex-start;
    padding-top: 32px;
  }
  .login-panel,
  .check-panel {
    background: linear-gradient(160deg, rgba(95, 127, 185, 0.92), rgba(9, 24, 52, 0.92));
    border: 1px solid rgba(110, 160, 230, 0.4);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    padding: 24px 20px 28px;
  }
  .login-heading,
  .check-heading {
    position: static;
    height: auto;
    margin-bottom: 12px;
    /* 窄屏渐变卡无凹槽，撤销桌面端凹口中心水平微校 */
    transform: none;
  }
  /* 窄屏凹槽文字统一字号（渐变卡无凹槽宽度约束，四字加字距仍单行） */
  .login-heading span,
  .check-title {
    font-size: 18px;
    letter-spacing: 4px;
  }
}
/* ============================================================
 * 登录页差异样式（login.blade.php）（_login.scss）
 *
 * 壳样式在「科技风面板壳」公共区段（_auth-panel.scss），
 * 此处只留登录页专有：标题组（面板上方主标题/副标题）、
 * 凹槽欢迎语字号、el-form 深色面板适配、提示区、窄屏（<=480px）字号收敛
 * ============================================================ */
/* 面板上方主标题（参考图同层级的白色大标题） */
.login-title {
  text-align: center;
  margin: 0 0 6px;
  font-size: 26px;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.login-sub {
  text-align: center;
  color: #b9d2ec;
  font-size: 13px;
  margin-bottom: 14px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* ---- el-form 深色面板适配：label/输入框/图标统一淡蓝白配色
      （默认白底输入框在深蓝面板上突兀，改半透明白底深蓝调） ---- */
.login-panel {
  /* 前缀/后缀图标（含登录码明文切换眼睛）淡蓝配色 */
}

.login-panel .el-form-item__label {
  color: #9fc0e8;
}

.login-panel .el-input__inner {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(110, 160, 230, 0.35);
  color: #f2f7fd;
}

.login-panel .el-input__inner::placeholder {
  color: #8fb0d8;
}

.login-panel .el-input__inner:focus {
  border-color: var(--exam-primary);
}

.login-panel .el-input__prefix,
.login-panel .el-input__suffix {
  color: #8fb0d8;
}

.login-panel .el-form-item.is-error .el-input__inner,
.login-panel .el-form-item.is-error .el-input__inner:focus {
  border-color: var(--exam-danger);
}

.login-alert {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  margin: 0;
}

/* 深色面板适配：默认浅红实底在深蓝科技风面板上突兀，改半透明红底 + 描边淡红字 */
.login-alert.el-alert--error {
  background: rgba(245, 108, 108, 0.14);
  border: 1px solid rgba(245, 108, 108, 0.45);
  color: #f78989;
}

.login-btn {
  width: 100%;
  margin-top: 4px;
}

/* ---- 提示区（三行提示保留，淡蓝文字适配深色底） ---- */
.login-tips {
  margin-top: 18px;
  font-size: 12px;
  color: #b9d2ec;
  line-height: 1.8;
  text-align: center;
  border-top: 1px dashed rgba(140, 180, 240, 0.35);
  padding-top: 14px;
}

/* 窄屏：标题/副标题收字号防换行挤压（面板渐变卡与 padding 由公共 @media 接管） */
@media (max-width: 480px) {
  .login-title {
    font-size: 20px;
  }
  .login-sub {
    font-size: 12px;
    line-height: 1.6;
    padding: 0 6px;
  }
  /* 窄屏渐变卡无凹槽（heading 回归文档流），悬浮锚定失效，提示回退流式插在表单上方 */
  .login-alert {
    position: static;
    top: -8px;
  }
}
/* ============================================================
 * 核对页差异样式（check.blade.php）（_check.scss）
 *
 * 壳样式在「科技风面板壳」公共区段（_auth-panel.scss），
 * 此处只留核对页专有：凹槽标题组（计划名绝对定位 + 大字居中）、
 * 照片区、el-descriptions 深色面板适配、提示区/按钮深色适配、
 * 全屏 loading 深色蒙版、窄屏（<=480px）适配
 * 注意：.check-panel 后代规则被提示区/按钮区隔为两段，分两个嵌套块
 *       保持与历史 web.css 相同的输出顺序
 * ============================================================ */
/* 考试计划名：绝对定位于凹槽内上部（不占 flex 布局位，「信息核对」大字样式
   已上收公共区段与登录页欢迎语统一，容器 .check-heading 同在公共区段） */
.check-sub {
  position: absolute;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: #b9d2ec;
  font-size: 13px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  /* 长计划名防溢出凹槽（超出省略号截断，不压 >>> <<< 装饰） */
  max-width: 56%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- 照片区（面板内顶部居中，白色描边适配深色底；
      面板框图 .check-panel 已在公共区段） ---- */
.check-photo {
  text-align: center;
  margin-bottom: 16px;
}

.check-photo img {
  width: 96px;
  height: 128px;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.photo-empty {
  width: 96px;
  height: 128px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9fc0e8;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(140, 180, 240, 0.5);
  border-radius: 4px;
}

/* ---- el-descriptions 深色面板适配：透明底 + 半透明白边 + 白字（默认白底在深蓝面板上突兀） ---- */
.check-panel {
  /* cell 级只覆盖边框色（0-4-0 特异性打赢 element-ui.css 的 border 简写）；
     注意 Element bordered 类名是 is-bordered 而非 --border，类名写错整条规则不命中 */
  /* label 底色/字色需带 is-bordered-label 凑 0-3-0，打赢后加载的 element-ui.css 默认 #fafafa 白底 */
}

.check-panel .el-descriptions__body {
  background: transparent;
}

.check-panel .el-descriptions.is-bordered .el-descriptions-item__cell {
  border-color: rgba(110, 160, 230, 0.35);
}

.check-panel .el-descriptions-item__label.is-bordered-label {
  color: #9fc0e8;
  background: rgba(255, 255, 255, 0.06);
  min-width: 70px;
  width: 78px;
}

.check-panel .el-descriptions-item__content {
  color: #f2f7fd;
  word-break: break-all;
}

/* ---- 提示区（三行提示保留，Element 图标 + 淡蓝文字） ---- */
.check-tip {
  margin-top: 16px;
  font-size: 12px;
  color: #b9d2ec;
  line-height: 1.9;
  border-top: 1px dashed rgba(140, 180, 240, 0.35);
  padding-top: 12px;
}

.check-tip p {
  margin: 0;
}

.check-tip .el-icon-info {
  color: #7ec2f3;
  margin-right: 4px;
}

/* ---- 操作按钮（面板内居中） ---- */
.check-actions {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 14px;
  /* check-actions 用 gap 控制间距，归零 Element 相邻按钮的 margin-left
     （+ 选择器凑足 0-3-0 特异性，打赢后加载的 element-ui.css 的 margin-left:10px，
      否则移动端纵排时第二个按钮被推右 10px 造成左右错位） */
}

.check-actions .el-button + .el-button {
  margin-left: 0;
}

/* el-alert 提示条与面板内容间距 */
.check-alert {
  margin-bottom: 8px !important;
}

/* ---- 全屏 loading 深色半透明蒙版：与星空背景同色调，
      消除默认白色蒙版在深色背景上的闪屏（白块骤现骤隐）；
      全局蒙版类不属于 .check-panel 后代，平铺保持 ---- */
.el-loading-mask {
  background-color: rgba(8, 18, 45, 0.6) !important;
}

.el-loading-spinner .path {
  stroke: #7ec2f3;
}

.el-loading-spinner .el-loading-text {
  color: #cfe3ff;
}

/* ---- 按钮深色适配：主按钮色已由 wrap 级覆盖接管（el-dialog 挂 #app 下也能罩到），
      这里只留核对页特有的 danger/info plain 深色面板适配 ---- */
.check-panel .el-button--danger.is-plain {
  color: #ff9d98;
  background: rgba(217, 83, 79, 0.18);
  border-color: rgba(217, 83, 79, 0.65);
}

.check-panel .el-button--danger.is-plain:hover,
.check-panel .el-button--danger.is-plain:focus {
  color: #fff;
  background: var(--exam-danger);
  border-color: var(--exam-danger);
}

.check-panel .el-button--info.is-plain {
  color: #b9d2ec;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(160, 190, 225, 0.5);
}

/* 窄屏：标题组回归文档流（渐变卡无凹槽，sub 在上 title 在下），
   sub 恢复 normal 换行防长计划名截断 */
@media (max-width: 480px) {
  .check-heading {
    flex-direction: column;
    gap: 2px;
  }
  .check-sub {
    position: static;
    transform: none;
    max-width: 100%;
    white-space: normal;
  }
  /* 照片缩小（原 96x128 在窄卡中占比过大） */
  .check-photo img,
  .photo-empty {
    width: 76px;
    height: 102px;
  }
  /* 提示区收紧 */
  .check-tip {
    line-height: 1.7;
    margin-top: 12px;
    padding-top: 10px;
  }
  /* 操作按钮纵排：窄屏两按钮横排挤压文字（margin-left 归零已由上方无条件规则接管） */
  .check-actions {
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
  }
  .check-actions .el-button {
    width: 100%;
  }
}
/* ============================================================
 * 考试页差异样式（exam.blade.php）（exam/_topbar.scss）
 *
 * 壳样式在上方公共区段，考试页按区块细拆为五个 partial：
 * 顶条（本文件）/ 试卷纸与题卡选项（_paper）/
 * 右侧答题卡与霸屏（_aside）/ 移动端（_mobile）/ 弹窗（_dialog）
 * 本文件只留顶部固定条：毛玻璃顶条 + 两行结构（状态行 / 规则防作弊行）
 * 源码按 DOM 层级完整嵌套（.topbar > .topbar-in > .topbar-main/.topbar-sub，
 * 子元素按页面出现顺序排布），产物选择器链随之加长（如 .topbar .topbar-main .title）；
 * @keyframes live-pulse 为全局 at-rule 保持顶层平铺（放 .topbar 块之后，
 * 不参与嵌套也不参与特异性对决，位置移动无功能影响）
 * 注意：_mobile.scss <=640 断点的顶条折行规则与本文件嵌套链严格同构
 * （媒体查询不改变特异性，短链会被桌面长链压住导致折行失效），两文件必须同改
 * ============================================================ */
.topbar {
  /* ---- 顶部固定条：毛玻璃效果撑满全宽（半透明白 + backdrop-filter 高斯模糊，滚动内容从条下穿过
          呈磨砂虚影；-webkit- 前缀兜底 Safari），内容由 .topbar-in 限宽 1440 居中（超宽屏两侧不再露灰底）；
          .topbar-in 纵向两行：topbar-main 状态行 + topbar-sub 规则/防作弊提示行（sub 不存在时整体仅 52px） ---- */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  /* 限宽 1440 居中容器，纵向包住两行 */
  /* 第一行：状态行（状态点/标题/时间/统计/交卷），承接原 topbar-in 的横向布局与 52px 高度 */
  /* 第二行：考卷规则 + 已开启的防作弊提示（v-if 条件渲染，全空时整行不存在）；
     限高约两行 13px 富文本（2x20.8 行高 + 6 元素内距 + 4 行距 + 6/8 容器内距 ≈ 62，取 66 容错）
     防规则过长顶爆固定条，超出部分隐藏（实际场景规则不会超过两行） */
}

.topbar .topbar-in {
  max-width: 1440px;
  margin: 0 auto;
}

.topbar .topbar-main {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 52px;
  /* 考试状态点：绿色脉冲光环（box-shadow 向外扩散渐隐），顶部条唯一的「进行中」仪表指示 */
  /* title 不再 flex:1 撑满整行（改由 .stat 的 margin-left:auto 把右侧元素推走），
     时间才能紧贴计划名；长标题靠 flex-shrink+min-width:0 仍走 ellipsis 截断；
     左侧主色竖条为顶栏唯一品牌锚点 */
  /* 顶部条考试计划起止时间（紧贴计划名右侧，括号文案）：不收缩不换行 */
  /* 交卷按钮前是 div 非 Element 相邻按钮兄弟，默认规则不生效，补齐与 stat 一致的 16px 间距 */
}

.topbar .topbar-main .live-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--exam-success);
  animation: live-pulse 2s ease-out infinite;
}

.topbar .topbar-main .title {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  padding-left: 10px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar .topbar-main .plan-time {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--exam-text-sub);
  margin-left: 8px;
  white-space: nowrap;
  /* 窄屏简短文案（仅考试截止，<=640 与顶条折行同断点显示）：桌面隐藏，
     显隐切换见 _mobile.scss 同断点（链长一致靠源顺序取胜） */
}

.topbar .topbar-main .plan-time .pt-brief {
  display: none;
}

.topbar .topbar-main .stat {
  font-size: 13px;
  color: var(--exam-text-sub);
  /* margin-left:auto 把 已答/交卷 推到顶条右侧，title+时间组靠左 */
  margin-left: auto;
}

.topbar .topbar-main .el-button {
  margin-left: 16px;
}

.topbar .topbar-sub {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 6px 20px 8px;
  border-top: 1px solid var(--exam-border);
  font-size: 12px;
  line-height: 18px;
  color: var(--exam-text-sub);
  max-height: 66px;
  overflow: hidden;
  /* 考卷规则：浅主色底 + 主色左边框的「须知」观感，行高 1.6 放宽可读性（富文本常驻提醒） */
}

.topbar .topbar-sub .sub-rule {
  font-size: 13px;
  line-height: 1.6;
  color: var(--exam-text-sub);
  background: var(--exam-primary-light);
  border-left: 3px solid var(--exam-primary);
  border-radius: 4px;
  padding: 3px 10px;
  /* 富文本规则内的块级标签归零外距，避免在固定条内撑出怪异空隙 */
}

.topbar .topbar-sub .sub-rule p {
  margin: 0;
}

/* 考试状态点脉冲动画：全局 at-rule 保持顶层，不参与嵌套与特异性对决 */
@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(25, 169, 35, 0.35);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(25, 169, 35, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(25, 169, 35, 0);
  }
}
/* ============================================================
 * 考试页 · 试卷纸与题卡选项（exam/_paper.scss）
 *
 * 页面背景氛围 / 主体双列布局 / 版块标题 / 题卡 / 题目行内排版 /
 * 题图 / 选项（含判断题双选项）
 * 嵌套口径：按页面 DOM 层级完整嵌套
 *   （exam-wrap > exam-main > test-cont > topic > q-card > 子元素）；
 * 平铺白名单：跨组件分组选择器（.q-img 与 .opt-img 共用的 el-image__inner
 *   覆盖）与 @keyframes q-flash-bg 保持顶层平铺；
 * 兄弟分隔规则（.q-card + .q-card / .type-title + .q-card）放 .topic 层
 *   平级——两条产物同为 0-6-0 特异性、源顺序 type-title + .q-card 在后，
 *   维持「组内首题不画线」语义；
 * mobile 920 断点（_mobile.scss）的 exam-main/test-cont/topic/q-img/opt-img
 *   覆盖与本文嵌套链严格同构（两文件必须同改）
 * ============================================================ */
.exam-wrap {
  /* ---- 页面背景氛围：exam-wrap 仅考试页挂载（Blade appClass 注入，不污染其余四页），
          顶部一圈主色微光晕沉入灰底，营造沉浸考场氛围又不干扰作答 ---- */
  min-height: 100vh;
  background: radial-gradient(1100px 360px at 50% -80px, rgba(0, 123, 182, 0.07), transparent 70%), var(--exam-bg);
  /* ---- 主体双列：左「试卷纸」弹性 + 右答题卡 350px（最大宽 1440px 与 topbar 对齐）；
          padding-top 由 --topbar-h（measureTopbar 实测顶条高度）+ 24 呼吸动态驱动，
          第二行规则 1~2 行伸缩时留白自动贴合，不再按最坏情况保守放大；
          左右 20px 防贴边：>1440 时与 topbar-main 内距对齐（均离容器边 20px），
          <1440 时 max-width 不生效、内容自动离屏幕边 20px，与顶条边距保持一致 ---- */
}

.exam-wrap .exam-main {
  max-width: 1440px;
  margin: 0 auto;
  padding: calc(var(--topbar-h, 52px) + 24px) 20px 30px;
}

.exam-wrap .exam-main .test-cont {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  /* 试卷纸：连续白面「标题/题目同处一张卡」，细边框+浅投影做出纸面质感（不再逐题卡片化）；
     试卷头已并入 topbar，顶部直接是版块标题（含自身 22px 上边距），上内距收窄至 16 平衡留白 */
}

.exam-wrap .exam-main .test-cont .topic {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid rgba(15, 42, 82, 0.06);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(16, 42, 82, 0.05);
  padding: 16px 24px 8px;
  /* 题型作答说明：小字灰同行紧跟版块标题（判分规则固定文案），前留 10px 间距；
     窄屏挤压时随行内流自然折行（span 行内元素） */
  /* 相邻题卡间以极淡分隔线区隔；版块标题后的组内首题不画线（组间已由标题分隔）；
     两条兄弟规则与下方 .q-card 嵌套块同层平级：产物同为 0-6-0 特异性，
     源顺序 .type-title + .q-card 在后，维持原「组内首题不画线」语义 */
  /* ---- 题卡：左列整体为连续白色工作面，题卡去独立卡片化，仅以 hairline 分隔 ---- */
}

.exam-wrap .exam-main .test-cont .topic .type-title {
  font-size: 15px;
  font-weight: 600;
  margin: 22px 0 12px;
  padding-left: 10px;
  border-left: 3px solid var(--exam-primary);
}

.exam-wrap .exam-main .test-cont .topic .type-tip {
  font-size: 12px;
  color: var(--exam-text-muted);
  margin-left: 10px;
}

.exam-wrap .exam-main .test-cont .topic .q-card + .q-card {
  border-top: 1px solid #f2f3f7;
}

.exam-wrap .exam-main .test-cont .topic .type-title + .q-card {
  border-top: 0;
}

.exam-wrap .exam-main .test-cont .topic .q-card {
  padding: 16px 0 18px;
  /* 锚点跳转偏移：随顶条实测高度联动（顶条高 + 14 间隙） */
  scroll-margin-top: calc(var(--topbar-h, 52px) + 14px);
  /* 答题卡跳转落点反馈：题卡短暂淡蓝高亮后淡出（anchorTo 移除类+强制重排以重放动画） */
  /* 题目行内排版：题型标签 -> 题号 -> 题目（分值并入版块标题，单题不展示）；
     标签/徽章统一 vertical-align: middle，同一对齐线避免各自手猜偏移量打架 */
  /* 题号：无底色纯数字，min-width 保持个位/两位题号占位一致（题目起始线对齐）；
     middle 与 .q-tag 同线对齐；胶囊圆角兼容两位数题号 */
  /* 题图：完整链特异性（0-6-0）压过 element-ui.css 的 .el-image（inline-block，
     其在本文件之后加载），锁定题图为块级独占一行 */
  /* ---- 选项 ---- */
  /* 判断题双选项：平分容器宽度、内容居中，字母 chip 与文字间距收窄 */
}

.exam-wrap .exam-main .test-cont .topic .q-card.q-flash {
  animation: q-flash-bg 1.6s ease-out;
}

.exam-wrap .exam-main .test-cont .topic .q-card .q-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 3px;
  font-size: 12px;
  margin-right: 8px;
  vertical-align: middle;
}

.exam-wrap .exam-main .test-cont .topic .q-card .tag-judge {
  background: var(--exam-success-light);
  color: var(--exam-success);
}

.exam-wrap .exam-main .test-cont .topic .q-card .tag-single {
  background: var(--exam-primary-light);
  color: var(--exam-primary);
}

.exam-wrap .exam-main .test-cont .topic .q-card .tag-multiple {
  background: var(--exam-warning-light);
  color: var(--exam-warning);
}

.exam-wrap .exam-main .test-cont .topic .q-card .q-title {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 12px;
  /* 题目富文本内的块级标签行内化：防富文本编辑器写入的 p/div 把题目从「标签+题号」行挤下去，
     保证题目与标签、题号同行流式展示（多段时源码换行折叠为空格，行距由 q-title 的 1.7 统一管） */
}

.exam-wrap .exam-main .test-cont .topic .q-card .q-title span p, .exam-wrap .exam-main .test-cont .topic .q-card .q-title span div {
  display: inline;
  margin: 0;
}

.exam-wrap .exam-main .test-cont .topic .q-card .q-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  color: var(--exam-text-sub);
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
  box-sizing: border-box;
}

.exam-wrap .exam-main .test-cont .topic .q-card .q-img {
  display: block;
  max-width: 360px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.exam-wrap .exam-main .test-cont .topic .q-card .option {
  display: flex;
  align-items: flex-start;
  padding: 11px 14px;
  border: 1px solid var(--exam-border);
  border-radius: 6px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.6;
  transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
  word-break: break-all;
  /* hover 轻微上浮 + 描边渐蓝：可点击感反馈，不做全蓝强调（强调蓝留给选中态） */
  /* 选项字母做实色 chip：默认灰底，选中态主蓝底白字，强化「已选中」确认感 */
  /* 选项图：完整链特异性（0-7-0）压过 element-ui.css 的 .el-image（inline-block），锁定选项图为块级独占一行 */
}

.exam-wrap .exam-main .test-cont .topic .q-card .option:hover {
  border-color: #b9d4e6;
  background: #fafcfe;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(16, 42, 82, 0.06);
}

.exam-wrap .exam-main .test-cont .topic .q-card .option .letter {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-right: 10px;
  border-radius: 4px;
  background: #eef1f5;
  color: var(--exam-text-sub);
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}

.exam-wrap .exam-main .test-cont .topic .q-card .option.selected {
  border-color: var(--exam-primary);
  background: var(--exam-primary-light);
  box-shadow: 0 2px 8px rgba(0, 123, 182, 0.1);
}

.exam-wrap .exam-main .test-cont .topic .q-card .option.selected .letter {
  background: var(--exam-primary);
  color: #fff;
}

.exam-wrap .exam-main .test-cont .topic .q-card .option .opt-img {
  display: block;
  max-width: 260px;
  margin-top: 6px;
  border-radius: 4px;
}

.exam-wrap .exam-main .test-cont .topic .q-card .judge-opts {
  display: flex;
  gap: 12px;
}

.exam-wrap .exam-main .test-cont .topic .q-card .judge-opts .option {
  flex: 1;
  justify-content: center;
}

.exam-wrap .exam-main .test-cont .topic .q-card .judge-opts .option .letter {
  margin-right: 6px;
}

/* el-image 内部 img 默认 width/height: 100%（需容器定尺寸），改为自适应：小图原始尺寸、
   大图受容器 max-width 约束（q-img/opt-img 通用）——跨组件分组选择器保持平铺
   （0-2-0 仍压过 element-ui 的 .el-image__inner 0-1-0） */
.q-img .el-image__inner,
.opt-img .el-image__inner {
  width: auto;
  height: auto;
  max-width: 100%;
}

@keyframes q-flash-bg {
  0% {
    background: var(--exam-primary-light);
  }
  100% {
    background: transparent;
  }
}
/* ============================================================
 * 考试页 · 右列答题卡与霸屏遮罩（exam/_aside.scss）
 *
 * 右列 sticky 容器 / 学员信息卡 / 答题卡卡片（倒计时/进度/图例/题号格/
 * 交卷）/ 霸屏全屏引导遮罩
 * 嵌套口径：按页面 DOM 层级完整嵌套
 *   （exam-wrap > exam-main > test-cont > test-aside > [car-user + test-right
 *   > car-head / car-body / car-actions]）；fullscreen-mask 系挂 #app.exam-wrap
 *   下，嵌 exam-wrap 层；
 * car-user-* / car-item 系列同父连续类名沿用 &- 拼接（& 为完整父链替换，
 *   产物仍是「.test-aside .car-user-xxx」式后代链，命中语义与历史平铺一致）；
 * 平铺白名单：@keyframes exam-blink 因嵌套结构提升至文件末尾顶层
 *   （历史位置在 car-progress 系之后、car-legend 之前）；
 * mobile 920 断点（_mobile.scss）的 .test-aside/.test-right 覆盖与本文
 *   嵌套链严格同构（两文件必须同改）
 * ============================================================ */
.exam-wrap {
  /* ---- 霸屏全屏引导遮罩（DOM 挂 #app.exam-wrap 下）：z-index 3000 高于 Element 弹窗（2000+），
          恢复全屏前盖住全部页面 ---- */
}

.exam-wrap .exam-main .test-cont {
  /* ---- 右列容器：学员信息卡 + 答题卡纵向双卡，整体 sticky 跟随滚动；
          top/max-height 随顶条实测高度联动。top 必须与 .exam-main 的 padding-top（顶条高 + 24）取值一致：
          初始位置即吸顶位，向下滚动第一像素就吸住、无「先上移 8px 再吸顶」的位移感；
          max-height 54 = 上 24 间隙 + 下 30（= .exam-main 的 padding-bottom，两值必须联动）：
          吸顶位底边与滚到底时的容器底边恰好对齐，滚动到底部 sticky 不被父容器推离（无「向上动一下」） ---- */
}

.exam-wrap .exam-main .test-cont .test-aside {
  width: 350px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--topbar-h, 52px) + 24px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - var(--topbar-h, 52px) - 54px);
  /* ---- 学员信息卡：独立卡片（人证核对展示，照片+姓名+手机/身份证直显+核对字段，口径同核对页 userPayload）；
        car-user-* 系列同父连续，沿用 &- 拼接嵌套，产物为「.test-aside .car-user-xxx」后代链 ---- */
  /* ---- 答题卡卡片：撑满右列剩余高度；纵向三段式（头/尾固定，car-body 独立滚动），滚动权不在此层 ---- */
}

.exam-wrap .exam-main .test-cont .test-aside .car-user {
  flex-shrink: 0;
  background: #fff;
  border: 1px solid rgba(15, 42, 82, 0.06);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(16, 42, 82, 0.06);
  padding: 16px;
  /* 照片与信息块并排：证件照按一寸比例（5:7）放大至 80x112 保证人脸可辨，object-fit 防拉伸变形 */
  /* 姓名大字直显（免 label，人证核对一眼比对）；手机/身份证/民族/学历复用 .car-user-field 的 label 行
     （均带 label 与下方单位/职务口径一致）；min-width 0 保证长号换行 */
  /* 核对字段：label 定宽对齐（muted），值深色可换行（单位名可能较长）；
     行距 4px 统一由相邻选择器管（照片右侧 car-user-id 内的 label 行同享） */
}

.exam-wrap .exam-main .test-cont .test-aside .car-user-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.exam-wrap .exam-main .test-cont .test-aside .car-user-photo {
  width: 80px;
  height: 112px;
  border: 1px solid var(--exam-border);
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  /* 无照片占位：同尺寸浅灰块 + 弱化文案 */
}

.exam-wrap .exam-main .test-cont .test-aside .car-user-photo.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--exam-text-muted);
  background: #f7f8fa;
}

.exam-wrap .exam-main .test-cont .test-aside .car-user-id {
  flex: 1;
  min-width: 0;
}

.exam-wrap .exam-main .test-cont .test-aside .car-user-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--exam-text);
  line-height: 1.4;
  word-break: break-all;
  margin-bottom: 4px;
}

.exam-wrap .exam-main .test-cont .test-aside .car-user-fields {
  margin-top: 4px;
}

.exam-wrap .exam-main .test-cont .test-aside .car-user-field {
  display: flex;
  font-size: 12px;
  line-height: 1.6;
  min-width: 0;
  /* & 为完整父链替换：产物为「.test-aside .car-user-field + .test-aside .car-user-field」，
     命中全部相邻字段行（car-user-id 内与 car-user-fields 内同享） */
}

.exam-wrap .exam-main .test-cont .test-aside .car-user-field + .exam-wrap .exam-main .test-cont .test-aside .car-user-field {
  margin-top: 4px;
}

.exam-wrap .exam-main .test-cont .test-aside .car-user-field span {
  flex-shrink: 0;
  width: 52px;
  color: var(--exam-text-muted);
}

.exam-wrap .exam-main .test-cont .test-aside .car-user-field b {
  font-weight: normal;
  color: var(--exam-text);
  word-break: break-all;
}

.exam-wrap .exam-main .test-cont .test-aside .test-right {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15, 42, 82, 0.06);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(16, 42, 82, 0.06);
  padding: 16px;
  overflow: hidden;
  /* 三段式之头（倒计时/进度/图例）：不参与滚动，固定在卡片顶部 */
  /* 三段式之中（题号区）：占满剩余高度并独立滚动，min-height: 0 释放 flex 子项可收缩性 */
}

.exam-wrap .exam-main .test-cont .test-aside .test-right .car-head {
  flex-shrink: 0;
  /* 倒计时默认红色（与 topbar/移动端 m-timer 同色），≤60 秒由 .danger 红橙闪烁加强紧迫感 */
  /* 答题卡截止时刻小字：紧跟倒计时分隔线下方，标注实际生效截止与自动交卷规则 */
  /* 答题进度条：el-progress（show-text 关闭），悬停 tooltip 展示已答/未答精确数量；
     底槽与填充覆盖 Element 默认配色：沿用灰槽 + 主蓝渐变，随作答平滑推进 */
}

.exam-wrap .exam-main .test-cont .test-aside .test-right .car-head .car-countdown {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: var(--exam-danger);
  padding: 2px 0 14px;
  border-bottom: 1px solid var(--exam-border);
  font-variant-numeric: tabular-nums;
  /* 伪元素补「剩余时间」小标签，倒计时语义更明确 */
}

.exam-wrap .exam-main .test-cont .test-aside .test-right .car-head .car-countdown::before {
  content: "剩余时间";
  display: block;
  font-size: 12px;
  font-weight: normal;
  color: var(--exam-text-muted);
  letter-spacing: 2px;
  margin-bottom: 2px;
}

.exam-wrap .exam-main .test-cont .test-aside .test-right .car-head .car-countdown.danger {
  color: var(--exam-danger);
  animation: exam-blink 1s step-start infinite;
}

.exam-wrap .exam-main .test-cont .test-aside .test-right .car-head .car-deadline {
  text-align: center;
  font-size: 12px;
  color: var(--exam-text-sub);
  margin: 8px 0 6px;
}

.exam-wrap .exam-main .test-cont .test-aside .test-right .car-head .car-progress {
  margin: 12px 0 2px;
}

.exam-wrap .exam-main .test-cont .test-aside .test-right .car-head .car-progress .el-progress-bar__outer {
  background: #eef1f5;
}

.exam-wrap .exam-main .test-cont .test-aside .test-right .car-head .car-progress .el-progress-bar__inner {
  background: linear-gradient(90deg, var(--exam-primary), #3aa0d8);
}

.exam-wrap .exam-main .test-cont .test-aside .test-right .car-head .car-legend {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--exam-text-muted);
  margin: 10px 0 6px;
  /* 图例配色（DOM 挂 .car-legend > span > i 上，与上方 i 形状规则无属性冲突） */
}

.exam-wrap .exam-main .test-cont .test-aside .test-right .car-head .car-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 3px;
  vertical-align: -1px;
}

.exam-wrap .exam-main .test-cont .test-aside .test-right .car-head .car-legend .legend-answer {
  background: var(--exam-primary-light);
  border: 1px solid var(--exam-primary);
}

.exam-wrap .exam-main .test-cont .test-aside .test-right .car-head .car-legend .legend-blank {
  background: #fff;
  border: 1px solid var(--exam-border);
}

.exam-wrap .exam-main .test-cont .test-aside .test-right .car-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.exam-wrap .exam-main .test-cont .test-aside .test-right .car-body .car-group {
  font-size: 13px;
  font-weight: 600;
  color: var(--exam-text);
  margin: 14px 0 8px;
}

.exam-wrap .exam-main .test-cont .test-aside .test-right .car-body .car-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* 题号格为普通 div：flex 双向居中（不依赖 line-height 撑高），样式自持不依赖 Element 按钮；
     各状态连续同父，嵌套保持输出顺序（is-answered 与 :hover 同特异性，hover 源顺序在后胜出恢复本色） */
}

.exam-wrap .exam-main .test-cont .test-aside .test-right .car-body .car-grid .car-item {
  width: 36px;
  height: 36px;
  border: 1px solid var(--exam-border);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--exam-text-sub);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  /* hover 恢复本色并轻微上浮 */
}

.exam-wrap .exam-main .test-cont .test-aside .test-right .car-body .car-grid .car-item.is-answered {
  background: var(--exam-primary-light);
  border-color: var(--exam-primary);
  color: var(--exam-primary);
}

.exam-wrap .exam-main .test-cont .test-aside .test-right .car-body .car-grid .car-item:hover {
  color: var(--exam-text-sub);
  background: #fff;
  border-color: #b9d4e6;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(16, 42, 82, 0.08);
}

.exam-wrap .exam-main .test-cont .test-aside .test-right .car-body .car-grid .car-item.is-answered:hover {
  background: var(--exam-primary-light);
  border-color: var(--exam-primary);
  color: var(--exam-primary);
}

.exam-wrap .exam-main .test-cont .test-aside .test-right .car-actions {
  flex-shrink: 0;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--exam-border);
  /* 交卷按钮铺满答题卡列宽 */
}

.exam-wrap .exam-main .test-cont .test-aside .test-right .car-actions .el-button {
  width: 100%;
  margin-left: 0;
}

.exam-wrap .fullscreen-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3000;
  background: var(--exam-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.exam-wrap .fullscreen-mask .fullscreen-tip {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  padding: 36px 44px;
  text-align: center;
  max-width: 420px;
}

.exam-wrap .fullscreen-mask .fullscreen-tip p {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--exam-text);
}

@keyframes exam-blink {
  50% {
    color: var(--exam-warning);
  }
}
/* 意见反馈悬浮按钮（考试页）：桌面/移动端常驻右下角，白底描边区别于答题卡主色实底钮；
   桌面 bottom 36 位于 el-backtop（bottom 128，滚动后出现）同列下方互不重叠；
   已交卷随 v-if 移除（模板侧控制），z-index 1100 与 car-fab 同级 */
.opinion-fab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 24px;
  bottom: 36px;
  z-index: 1100;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--exam-primary);
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid var(--exam-border);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.opinion-fab i {
  font-size: 20px;
}

/* ============================================================
 * 考试页 · 移动端适配（exam/_mobile.scss）
 *
 * 手机端顶条折两行居左（<=640px；平板/手机横屏 641~920px 保持桌面单行）+
 * 底部条 + 浮动按钮 + 答题卡抽屉（移动端 wap 交互）+
 * el-backtop 回顶部按钮窄屏位置覆盖（<=920px）
 * 嵌套口径：媒体查询不改变特异性——桌面 partial（topbar/paper/aside）改写为
 *   完整嵌套后产物已是长链，本文件窄屏覆盖必须与桌面嵌套链严格同构、
 *   靠源顺序（mobile 在 paper/aside 之后编译）取胜，两文件必须同改：
 *   - 640 断点：.topbar > .topbar-main/.topbar-sub 同构（对齐 _topbar.scss），
 *     顶条交卷按钮隐藏（底部条已有常驻交卷，双入口去重）
 *   - 920 断点：exam-main/test-cont/topic/test-aside/test-right 及图片约束
 *     同构（对齐 _paper.scss/_aside.scss）；car-mask/mobile-bar/car-fab/
 *     car-user-in-drawer 桌面无规则，保持平铺
 * ============================================================ */
.mobile-bar,
.car-fab,
.car-mask,
.car-user-in-drawer {
  display: none;
}

@media (max-width: 920px) {
  /* 窄屏图片约束：与桌面完整嵌套链同构（_paper.scss，否则固定 max-width 压不住），还原为随容器收缩 */
  .exam-wrap .exam-main .test-cont .topic .q-card .q-img,
  .exam-wrap .exam-main .test-cont .topic .q-card .option .opt-img {
    max-width: 100%;
  }
  /* 顶距 = 实测顶条高 + 12 呼吸（窄屏顶条换行增高后自动贴合）；
     左右恢复 12px 内距（试卷纸不再全宽贴边），底部 96px 让出底部条；
     嵌套链与 _paper.scss 桌面完整嵌套同构 */
  .exam-wrap .exam-main {
    padding: calc(var(--topbar-h, 52px) + 12px) 12px 96px;
  }
  /* 主体单列化 + 右列退化：嵌套链与 _paper.scss/_aside.scss 桌面完整嵌套同构，
     靠源顺序覆盖桌面同链规则 */
  .exam-wrap .exam-main .test-cont {
    display: block;
    /* 试卷纸窄屏适配：顶部直接是版块标题，留白与卡内缩进同桌面逻辑 */
    /* 右列容器窄屏退化为普通块：文档流学员信息卡隐藏（信息卡移入答题卡抽屉），答题卡单独走 fixed 抽屉 */
    /* 答题卡变抽屉：默认隐藏，nav_active 时滑出 */
  }
  .exam-wrap .exam-main .test-cont .topic {
    padding: 18px 14px 8px;
  }
  .exam-wrap .exam-main .test-cont .test-aside {
    position: static;
    width: auto;
    max-height: none;
    /* 文档流份学员信息卡隐藏：窄屏人证核对信息统一收进答题卡抽屉（car-user-in-drawer），
       避免滚到题目底部才见信息的割裂感；嵌套链与 _aside.scss 桌面同构，靠源顺序覆盖 */
    /* 抽屉内学员信息卡：桌面全局隐藏（文件顶部平铺组），窄屏随抽屉展示；
       弱化容器（去独立卡片边框/阴影，仅底部分隔线与倒计时区隔开），
       内部照片/字段样式全复用 _aside.scss 的 car-user-* 后代链（本卡同挂 .car-user 类）；
       链 = 桌面 car-user 链多一环 test-right（0-6-0 > 桌面 0-5-0），弱化覆盖不依赖源顺序 */
  }
  .exam-wrap .exam-main .test-cont .test-aside .car-user {
    display: none;
  }
  .exam-wrap .exam-main .test-cont .test-aside .test-right .car-user-in-drawer {
    display: block;
    flex-shrink: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--exam-border);
  }
  .exam-wrap .exam-main .test-cont .test-right {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 310px;
    max-width: 84%;
    border-radius: 0;
    z-index: 1201;
    transform: translateX(100%);
    transition: transform 0.25s;
  }
  .exam-wrap .exam-main .test-cont .test-right.nav_active {
    /* 从 display: none 恢复为 flex（而非 block）：保持桌面纵向三段式，否则 car-body 滚动失效且内容被 overflow: hidden 裁掉 */
    display: flex;
    transform: translateX(0);
  }
  .car-mask {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1200;
  }
  .mobile-bar {
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    background: #fff;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.08);
    padding: 10px 14px;
    /* 移动端截止时刻小字：m-timer 改容器后第二行（m-time 继承上方红色大字样式） */
  }
  .mobile-bar .m-timer {
    flex: 1;
    font-size: 18px;
    font-weight: 700;
    color: var(--exam-danger);
    font-variant-numeric: tabular-nums;
  }
  .mobile-bar .m-deadline {
    font-size: 12px;
    font-weight: normal;
    color: var(--exam-text-sub);
    margin-top: 2px;
  }
  .car-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 14px;
    bottom: 64px;
    z-index: 1100;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--exam-primary);
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 1.3;
    box-shadow: 0 4px 10px rgba(0, 123, 182, 0.4);
    cursor: pointer;
  }
  /* 意见反馈悬浮按钮窄屏上移：右下角自下而上为 底部条(~64) → car-fab(64~116) → 反馈钮(128~180)，
     与 car-fab 同列对齐（right 14） */
  .opinion-fab {
    right: 14px;
    bottom: 128px;
  }
  /* 回顶部按钮窄屏上移：el-backtop 的 right/bottom 是内联样式，须 !important 覆盖；
     bottom 192 = 底部条(~64) + 答题卡浮动按钮(64~116) + 反馈悬浮按钮(128~180) 之上，与浮动按钮列对齐（right 14） */
  .el-backtop {
    right: 14px !important;
    bottom: 192px !important;
  }
}
/* ---- 手机端（<=640px）顶条折两行居左：平板/手机横屏（641~920px）保持桌面单行一行展示 ----
   注意：顶条折行规则嵌套链与 _topbar.scss 桌面完整嵌套严格同构（.topbar > .topbar-main/.topbar-sub）：
   媒体查询不改变特异性，桌面产物已是长链（如 .topbar .topbar-main .plan-time .pt-brief 0-4-0），
   此处必须同链覆盖、靠源顺序（mobile 在 topbar 之后编译）取胜，两文件必须同改 */
@media (max-width: 640px) {
  .topbar {
    /* 行1 状态点+计划名(ellipsis)+已答统计（交卷按钮 640 以下隐藏，见下方 .el-button），行2 考试时间整串居左
       （日期时间串不允许截断，独占一行保证完整可读）；
       顶条高度仍由 measureTopbar 实测写 --topbar-h，驱动 exam-main 顶距与题卡锚点偏移 */
    /* 第二行规则/防作弊提示左右内距与第一行窄屏内距对齐 */
  }
  .topbar .topbar-main {
    height: auto;
    min-height: 44px;
    padding: 8px 12px;
    flex-wrap: wrap;
    row-gap: 2px;
    /* 时间 DOM 位置在统计之前，直接折行会把 已答统计 一并挤到下方：order 后置调到行2；
       margin-left 归零与行1 左缘对齐 */
    /* 行1 收回统计与按钮且整体居左（桌面 margin-left:auto 靠右语义在两行布局不适用） */
    /* 手机端隐藏顶条交卷按钮：底部固定条（mobile-bar）已有常驻交卷入口，双按钮重复；
       嵌套链与桌面 .topbar .topbar-main .el-button 严格同构（0-3-0），
       靠源顺序（mobile 在 topbar 之后编译）取胜；order 折行位随隐藏一并移除 */
  }
  .topbar .topbar-main .plan-time {
    order: 5;
    flex-basis: 100%;
    margin-left: 0;
    /* 时间行双文案切换（与折行同断点）：pt-full 完整起止隐藏，pt-brief 仅显示
       「（考试截止 ××××）」——行2 空间有限，开始时刻无需重复展示，截止即可定位考试窗口；
       无 planEnd 时 pt-brief 为空不渲染，行2 自然留空（嵌进 .plan-time 保证与桌面
       .pt-brief 隐藏规则 0-4-0 同链对决） */
  }
  .topbar .topbar-main .plan-time .pt-full {
    display: none;
  }
  .topbar .topbar-main .plan-time .pt-brief {
    display: inline;
  }
  .topbar .topbar-main .stat {
    order: 3;
    margin-left: 8px;
  }
  .topbar .topbar-main .el-button {
    display: none;
  }
  .topbar .topbar-sub {
    padding: 6px 12px 8px;
  }
}
/* ============================================================
 * 考试页 · 弹窗文案（exam/_dialog.scss）
 *
 * el-dialog 内容区文案（弹窗结构本身走 Element 默认样式）：
 * 确认交卷正文 + 已完成考试结果卡弹窗内修补
 *
 * 【嵌套白名单决策】本文件刻意保持平铺、不做完整嵌套改写：
 * 1. .dialog-text 挂在 el-dialog body 内（Element teleport DOM 结构不稳定，
 *    无自有父容器可依赖），且 0-1-0 平铺已足够生效；
 * 2. .el-dialog.finished-dialog .el-dialog__body 必须 0-3-0 特异性压过
 *    element-ui center 模式 0-2-0（见下方规则内注释），嵌套反而无法增强。
 * 与 exam/_mobile.scss 的「两文件必须同改」约束无关，独立维护。
 * ============================================================ */
/* 确认交卷正文：居中说明 */
.dialog-text {
  margin: 0;
  color: var(--exam-text-sub);
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
}

/* 已完成考试弹窗：成绩页同款结果卡（复用 result-badge/result-score/result-meta 等全局类，
   此处只做弹窗内边距收紧与居中上下文修补）；
   为什么用 .el-dialog.finished-dialog 0-3-0 特异性：element-ui.css 在本文件之后加载，
   其 center 模式规则 .el-dialog--center .el-dialog__body { text-align: initial } 与
   .finished-dialog .el-dialog__body 同为 0-2-0 且更靠后，居中会被打回左对齐 */
.el-dialog.finished-dialog .el-dialog__body {
  /* 全局 .el-dialog__body 带 !important，同权重下靠更高特异性覆盖；
     text-align: center 为补成绩页 .result-card 的居中上下文（result-title/score/sub/badge 文字均依赖父级居中） */
  padding: 12px 26px 6px !important;
  text-align: center;
}

.finished-dialog .result-meta {
  margin-bottom: 0;
}

/* ============================================================
 * 成绩页差异样式（result.blade.php）（_result.scss）
 *
 * 壳样式在上方公共区段，此处只留成绩页专有：
 * 居中结果卡 / 合格徽章 / 得分展示 / 成绩明细 / 窄屏适配
 * ============================================================ */
/* ---- 成绩页特有：居中结果卡（原 body flex 居中经布局抽离后下沉到 #app 外包盒子） ---- */
.result-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 窄屏留边：卡片 max-width:100% 时不贴屏幕边缘 */
  padding: 24px 16px;
  /* 全屏证书主题背景：与证书查询页 .cq-wrap 同款双图策略（PC 用 certificate_bg.jpg，
     ≤768px 切移动端 web_certificate_bg.jpg，见下方媒体查询）；
     结果卡为半透明 exam-card，底图透出，明细区 .result-meta 保持不透明底保证可读性 */
  background: url("../images/certificate_bg.jpg") center/cover no-repeat;
}

.result-card {
  width: 560px;
  max-width: 100%;
  text-align: center;
  padding: 40px 36px 30px;
}

.result-badge {
  width: 84px;
  height: 84px;
  line-height: 84px;
  border-radius: 50%;
  margin: 0 auto 14px;
  /* 24px：保证「不合格」三字（约 72px）不溢出 84px 圆形徽章 */
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

.result-badge.pass {
  background: var(--exam-success);
}

.result-badge.fail {
  background: var(--exam-danger);
}

.result-title {
  margin: 0 0 6px;
  font-size: 21px;
}

.result-score {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.2;
  margin: 8px 0 4px;
}

.result-score.pass {
  color: var(--exam-success);
}

.result-score.fail {
  color: var(--exam-danger);
}

.result-sub {
  color: var(--exam-text-muted);
  font-size: 13px;
  margin-bottom: 22px;
}

.result-meta {
  text-align: left;
  background: #f8f9fb;
  border-radius: 6px;
  padding: 14px 22px;
  font-size: 14px;
  line-height: 2.1;
  color: var(--exam-text-sub);
  margin-bottom: 24px;
}

.result-meta b {
  display: inline-block;
  width: 88px;
  font-weight: normal;
  color: var(--exam-text-muted);
}

/* ---- 响应式：≤768px 切移动端背景图（与 .cq-wrap 同款双图策略）；≤480px 收缩卡片留白 ---- */
@media (max-width: 768px) {
  .result-wrap {
    background-image: url("../images/web_certificate_bg.jpg");
  }
}
@media (max-width: 480px) {
  .result-card {
    padding: 30px 20px 24px;
  }
}
/* ============================================================
 * 证书验证页差异样式（certificate.blade.php）（_certificate.scss）
 *
 * 壳样式在上方公共区段，此处只留证书页专有：
 * 居中查询卡 / 编号输入行 / 真伪结果条 / 证书明细 / 证书图 / 窄屏适配
 * ============================================================ */
/* ---- 证书验证页特有：居中查询卡（原 body flex 居中经布局抽离后下沉到 #app 外包盒子） ---- */
.cert-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 窄屏留边：卡片 max-width:100% 时不贴屏幕边缘 */
  padding: 24px 16px;
}

.cert-card {
  width: 620px;
  max-width: 100%;
  padding: 40px 36px 30px;
}

.cert-title {
  margin: 0 0 6px;
  font-size: 22px;
  text-align: center;
}

.cert-sub {
  color: var(--exam-text-muted);
  font-size: 13px;
  text-align: center;
  margin-bottom: 24px;
}

.cert-form {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}

.cert-form .exam-input {
  flex: 1;
}

/* ---- 结果条 ---- */
.cert-result {
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 18px;
}

.cert-result.valid {
  color: var(--exam-success);
  background: var(--exam-success-light);
  border: 1px solid #b8e6bd;
}

.cert-result.invalid {
  color: var(--exam-danger);
  background: var(--exam-danger-light);
  border: 1px solid #f0c4c2;
}

/* ---- 证书明细 ---- */
.cert-meta {
  text-align: left;
  background: #f8f9fb;
  border-radius: 6px;
  padding: 14px 22px;
  font-size: 14px;
  line-height: 2.1;
  color: var(--exam-text-sub);
  margin-bottom: 18px;
}

.cert-meta b {
  display: inline-block;
  width: 88px;
  font-weight: normal;
  color: var(--exam-text-muted);
}

.cert-img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid var(--exam-border);
  border-radius: 4px;
}

/* ---- 窄屏收缩：卡片与明细区 padding，缓解小屏拥挤 ---- */
@media (max-width: 480px) {
  .cert-card {
    padding: 30px 20px 24px;
  }
  .cert-meta {
    padding: 12px 14px;
  }
}
/* ============================================================
 * 个人证书查询页差异样式（certificate_query.blade.php）（_certificate_query.scss）
 *
 * 壳样式在上方公共区段，此处只留查询页专有：
 * 全屏证书主题背景（PC/移动双图）/ 标题组 / 查询卡 / 表单行 /
 * 结果证书卡片（角标）/ 未查到引导 / 响应式适配
 * 图片：编译产物位于 public/css/web.css，图片用 ../images/ 相对路径
 *       直达 /app/plugins/exam/public/images/（与 Blade 解耦，页面无需注入）
 * ============================================================ */
/* ---- 全屏背景：PC 用 certificate_bg.jpg，≤768px 切移动端 web_certificate_bg.jpg ---- */
.cq-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 窄屏留边：卡片 max-width:100% 时不贴屏幕边缘 */
  padding: 32px 16px;
  background: url("../images/certificate_bg.jpg") center/cover no-repeat;
}

/* 标题组：置于卡片上方（参考查询页红头层级），白字加阴影保证任意底图可读 */
.cq-head {
  text-align: center;
  margin-bottom: 24px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.cq-head .cq-title {
  margin: 0 0 8px;
  font-size: 28px;
  letter-spacing: 6px;
  font-weight: 700;
}

.cq-head .cq-sub {
  font-size: 14px;
  opacity: 0.92;
}

/* ---- 查询卡：三视图共用容器（表单/结果/未查到）----
    宽 1200 对齐参考查询平台宽幅内容区（表格化证书信息需要横向空间） */
.cq-card {
  width: 1200px;
  max-width: 100%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  padding: 36px 40px 32px;
}

/* ---- 表单视图：验证码行（输入框 + 验证码图）与按钮 ---- */
.cq-captcha-row {
  display: flex;
  gap: 10px;
}

.cq-captcha-row .el-input {
  flex: 1;
}

/* 票据续查恢复态：mounted 自动续查期间表单不渲染，卡片留出 loading 蒙版高度防塌陷 */
.cq-card.is-restoring {
  min-height: 200px;
}

.cq-captcha-img {
  height: 40px; /* 对齐 el-input 默认高度 */
  width: 120px;
  border-radius: 4px;
  border: 1px solid var(--exam-border);
  cursor: pointer;
  flex-shrink: 0;
}

.cq-btn {
  min-width: 110px;
}

/* 表单视图按钮行：内容区居中（el-button 为 inline-block，text-align 即可生效） */
.cq-form-btns .el-form-item__content {
  text-align: center;
}

.cq-alert {
  margin-bottom: 18px;
}

/* ---- 温馨提示区 ---- */
.cq-tips {
  border-top: 1px dashed var(--exam-border);
  margin-top: 6px;
  padding-top: 14px;
  color: var(--exam-text-muted);
  font-size: 13px;
  line-height: 2;
}

.cq-tips p {
  margin: 0;
}

.cq-tips-title {
  color: var(--exam-text-sub);
  font-weight: 600;
}

/* ---- 结果视图：「特」徽章图 + 证书信息标题 + 斜纹线图（img 直引素材：
     行内 flex row 宽 100%，特图+文字居左，右侧线图占满剩余宽度并垂直居中；
     徽章特.png、线线.png 837x8（斜纹带，非实线）横向拉伸；
     img 显式 block——inline 图片参与基线排版会在 flex 外产生下沉偏移 ---- */
.cq-section-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 12px;
  color: var(--exam-text);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
}

.cq-section-title .cq-flag {
  flex-shrink: 0;
  display: block;
  width: 62px;
  height: 44px;
  position: relative;
  top: 4px;
}

.cq-section-title .cq-title-hatch {
  flex: 1;
  display: block;
  width: 100%;
  height: 8px;
  /* img 固有宽 837px：flex 子项默认 min-width:auto 不可低于固有宽，
     打印页比屏幕窄时线图顶满挤压文字 span 成竖排，解锁允许收缩 */
  min-width: 0;
}

/* 查询人信息快照（身份证号为后端脱敏格式） */
.cq-person {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  background: var(--exam-primary-light);
  border-radius: 6px;
  padding: 10px 16px;
  color: var(--exam-text-sub);
  font-size: 14px;
  margin-bottom: 10px;
}

.cq-person b {
  color: var(--exam-text);
  font-weight: 600;
}

/* 身份证双态：页面展示脱敏，打印切明文（打印出来是正式留档材料需完整证件号） */
.cq-person .cq-id-full {
  display: none;
}

/* 证书块：居中表标题（底部通栏细线）+ 原生表格；表间以斜纹分隔线（.cq-zigzag） */
.cq-cert {
  margin-bottom: 0;
}

/* 原生表格（参考图实测：行高 45px、label 列 15% 浅蓝底 #eef5fc、边框 #e0e0e0、
   文字 14px #333 左对齐；table-layout fixed 保证列宽稳定） */
.cq-cert-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cq-cert-table th,
.cq-cert-table td {
  border: 1px solid #e0e0e0;
  height: 45px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: normal;
  text-align: left;
  vertical-align: middle;
  color: var(--exam-text);
  /* 内容超宽换行展示（机构全称等长文本不允许省略截断）；break-all 兜底无空格长串 */
  word-break: break-all;
  white-space: normal;
}

.cq-cert-table th {
  background: #eef5fc;
}

/* 列宽声明在 colgroup（fixed 布局列宽只认第一行，编号行 colspan 会吞掉后行 th/td 的 width）：
   label 列 15%、value 列 35%，两列交替 */
.cq-cert-table col.cq-col-label {
  width: 15%;
}

.cq-cert-table col.cq-col-value {
  width: 35%;
}

/* 编号行：跨 3 列，角标绝对定位右侧垂直居中（td 保持 table-cell 角色不用 flex） */
.cq-cert-table .cq-td-no {
  position: relative;
  padding-right: 120px;
}

.cq-badge {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-size: 12px;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 10px;
  white-space: nowrap;
}

.cq-badge.valid {
  color: var(--exam-success);
  background: var(--exam-success-light);
  border: 1px solid #b8e6bd;
}

.cq-badge.expired {
  color: var(--exam-danger);
  background: var(--exam-danger-light);
  border: 1px solid #f0c4c2;
}

/* 备注行：整行白底红字（参考图实测红 #f60000，文案紧贴无多余空格） */
.cq-cert-table .cq-td-note {
  width: auto;
  color: #f60000;
}

/* 表间斜纹分隔线图（img 直引素材线.png 837x8，参考查询平台非实线；block 常规流，
   width:100% 拉伸铺满卡片内容宽，margin 撑开上下间距） */
.cq-zigzag {
  display: block;
  width: 100%;
  height: 8px;
  margin: 20px 0;
}

/* 结果/未查到视图底部返回按钮行 */
.cq-btn-row {
  text-align: center;
  margin-top: 22px;
}

/* ---- 结果视图头部：标题左 + 操作按钮组右（打印本页/返回，参考查询平台布局） ---- */
.cq-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.cq-result-head .cq-section-title {
  margin-bottom: 0;
}

/* 结果操作按钮组：卡片外页头层，宽同卡片（1200）右对齐卡片右缘；
   gap 控间距须归零 Element 相邻按钮默认 margin-left，否则双重间距 20px */
.cq-result-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  width: 1200px;
  max-width: 100%;
  margin-bottom: 10px;
}

.cq-result-actions .el-button + .el-button {
  margin-left: 0;
}

/* 打印按钮主色对齐参考图实测 #1890ff（覆盖站点主题蓝 --exam-primary） */
.cq-result-actions .el-button--primary {
  background-color: #1890ff;
  border-color: #1890ff;
}

.cq-result-actions .el-button--primary:hover,
.cq-result-actions .el-button--primary:focus {
  background-color: #40a3ff;
  border-color: #40a3ff;
}

/* 免责声明：结果区底部固定文案（打印时随证书信息一并输出）；
   上方分隔改由 cq-zigzag 线图承担（原 border-top dashed 虚线已弃用），margin 交线图间距 */
.cq-disclaimer {
  margin-top: 0;
  padding-top: 14px;
  color: var(--exam-text-muted);
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
}

/* ---- 打印版面收敛（window.print）：仅保留查询卡内证书信息（免责声明随印），
     隐藏页头/操作按钮/公共页脚与监制署名，去背景白底省墨；
     exam-has-footer 的 body flex 锁高 + overflow:hidden 会截断多页打印，打印时放开 ---- */
@media print {
  html.exam-has-footer,
  html.exam-has-footer body {
    height: auto;
    overflow: visible;
  }
  body {
    background: #fff !important;
  }
  .cq-wrap {
    min-height: auto;
    padding: 0;
    background: none;
  }
  .cq-head,
  .cq-result-actions,
  .ef-corner,
  .exam-footer {
    display: none !important;
  }
  /* 身份证打印明文：切明文 span 显示、隐藏脱敏 span */
  .cq-person .cq-id-masked {
    display: none;
  }
  .cq-person .cq-id-full {
    display: inline;
  }
  .cq-card {
    width: 100%;
    max-width: none;
    box-shadow: none;
    border: none;
    padding: 0;
  }
}
/* ---- 未查到视图：感叹图标 + 大字提示 + 引导建议 ---- */
.cq-none {
  text-align: center;
  padding: 18px 0 8px;
}

.cq-none-icon {
  width: 64px;
  height: 64px;
  line-height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--exam-warning-light);
  color: var(--exam-warning);
  font-size: 34px;
  font-weight: 700;
}

.cq-none-text {
  font-size: 18px;
  color: var(--exam-text);
  font-weight: 600;
}

.cq-help {
  border-top: 1px dashed var(--exam-border);
  margin-top: 20px;
  padding-top: 14px;
  color: var(--exam-text-sub);
  font-size: 13px;
  line-height: 2;
}

.cq-help p {
  margin: 0;
}

.cq-help-title {
  color: var(--exam-danger);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* ---- 响应式：≤768px 切移动端背景图 + 明细单列；≤480px 收缩卡片留白 ---- */
@media (max-width: 768px) {
  .cq-wrap {
    background-image: url("../images/web_certificate_bg.jpg");
  }
  .cq-title {
    font-size: 22px;
    letter-spacing: 4px;
  }
  .cq-card {
    padding: 28px 22px 24px;
  }
  /* 原生表格窄屏：label 列收窄、字号与行高收紧；长 label（有效期开始日期）允许换行防截断 */
  .cq-cert-table th {
    width: 22%;
    padding: 0 8px;
  }
  .cq-cert-table th,
  .cq-cert-table td {
    font-size: 13px;
    height: auto;
    min-height: 40px;
    padding: 8px;
    white-space: normal;
    line-height: 1.5;
  }
  .cq-cert-table .cq-td-no {
    padding-right: 96px;
  }
}
@media (max-width: 480px) {
  .cq-card {
    padding: 24px 16px 20px;
  }
  .cq-person {
    padding: 8px 12px;
  }
  /* 表格化证书卡无独立 padding，窄屏无需收缩 */
}
/* ---- 打印表格收敛（置于响应式断点之后：打印视口可能命中上方 max-width 断点，
     源顺序靠后保证打印规则胜出）----
   A4 内容区比屏幕窄：colgroup 百分比列宽随容器等比缩小，而字号/padding 是固定 px，
   长 label（有效期开始日期）与长值（培训机构）可用宽不足即换行，观感列宽被挤压；
   打印收紧字号与 padding、调宽 label 列比例，保持与屏幕版式一致 */
@media print {
  .cq-cert-table th,
  .cq-cert-table td {
    height: auto;
    padding: 6px 8px;
    font-size: 12px;
  }
  .cq-cert-table col.cq-col-label {
    width: 18%;
  }
  .cq-cert-table col.cq-col-value {
    width: 32%;
  }
  .cq-cert-table .cq-td-no {
    padding-right: 110px;
  }
}
/* ============================================================
 * exam 插件学员端样式主入口（web.scss）
 *
 * 本目录为学员端样式 SCSS 源码，web.css 由本文件编译生成：
 *   在本目录（public/css/scss）执行（版本锁定 1.62.1：最新版 sass 要求
 *   Node >= 20 且依赖纯 ESM 的 chokidar，本机 Node 14 下 require 会报
 *   "Must use import to load ES Module"，1.62.1 为支持 Node 14 的最后稳定版）：
 *     npx sass@1.62.1 --no-source-map web.scss ../web.css
 *   或全局安装后：sass --no-source-map web.scss ../web.css
 * 修改样式请改这里的 partial，不要直接改 web.css（会被下次编译覆盖）。
 *
 * 适用页面：学员端六页 login / check / exam / result / certificate / certificate_query
 * 加载方式：各页面 head 内以 exam_asset('css/web.css') 引入编译产物
 * 职责边界：本文件提供跨页共用件（色板变量、reset、卡片、按钮、表单、
 *           弹窗、Toast、Loading、面包屑）与 login/check 共用的科技风
 *           面板壳（wrap/stage/panel/heading + 主按钮色覆盖）；页面级
 *           布局与差异样式留在各页面 head 内 style 块（等价 scoped）
 * 拆分口径：@use 引入顺序即编译输出顺序，与历史 web.css 区段一一对应，
 *           页面级样式按「一个页面一个 partial」组织，考试页体量最大
 *           再按区块细拆（顶条/试卷纸/答题卡/移动端/弹窗）
 * 设计口径：主色为主题蓝 #007BB6，成功绿 #19a923、
 *           危险红 #d9534f（答题卡判分着色同源）
 * ============================================================ */
/* 基础层：色板变量 → Reset → 跨页共用件 */
/* 科技风面板壳（login / check 共用）+ 两页差异样式 */
/* 考试页（按区块细拆：顶条 → 试卷纸 → 答题卡 → 移动端 → 弹窗） */
/* 其余页面差异样式 */