/* 查勘员险种专项卷 · 在线考试系统样式（移动端优先） */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: #1f2329;
  background: #f2f3f5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 0 32px; }

/* ---------- 顶部条 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: #1a5fd6; color: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
}
.tb-title { font-size: 16px; font-weight: 600; letter-spacing: .3px; }
.tb-right { font-size: 13px; opacity: .95; display: flex; align-items: center; gap: 6px; }
.timer { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .5px; }
.timer.warn { color: #ffd21e; }
.timer.danger { color: #ff8f8f; animation: blink 1s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: .45; } }

/* ---------- 卡片 ---------- */
.card {
  background: #fff; border-radius: 10px; padding: 18px 16px;
  margin: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.card + .card { margin-top: 12px; }

h1 { font-size: 20px; font-weight: 600; line-height: 1.45; margin-bottom: 6px; }
h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.sub { font-size: 13px; color: #8a8f99; }
.muted { color: #8a8f99; }
.center { text-align: center; }

/* ---------- 规则说明 ---------- */
.rules { list-style: none; margin: 14px 0 4px; }
.rules li {
  position: relative; padding-left: 18px; margin-bottom: 8px;
  font-size: 13.5px; color: #4e5969; line-height: 1.7;
}
.rules li:before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: #1a5fd6;
}
.rules b { color: #1f2329; font-weight: 600; }

/* ---------- 表单 ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 7px; }
.field label .req { color: #e34d59; margin-left: 2px; }
.field input[type=text] {
  width: 100%; height: 46px; padding: 0 14px; font-size: 16px;
  border: 1px solid #dcdfe6; border-radius: 8px; background: #fff;
  color: #1f2329; outline: none; -webkit-appearance: none;
  transition: border-color .15s;
}
.field input[type=text]:focus { border-color: #1a5fd6; }
.field .tip { font-size: 12.5px; color: #8a8f99; margin-top: 6px; }

/* ---------- 按钮 ---------- */
.btn {
  display: block; width: 100%; height: 48px; border: 0; border-radius: 8px;
  font-size: 16px; font-weight: 600; color: #fff; background: #1a5fd6;
  cursor: pointer; -webkit-appearance: none; font-family: inherit;
  transition: opacity .15s;
}
.btn:active { opacity: .82; }
.btn.ghost { background: #fff; color: #1a5fd6; border: 1px solid #1a5fd6; }
.btn.gray { background: #fff; color: #4e5969; border: 1px solid #dcdfe6; }
.btn.danger { background: #e34d59; }
.btn + .btn { margin-top: 10px; }

/* ---------- 提示条 ---------- */
.alert {
  padding: 12px 14px; border-radius: 8px; font-size: 14px;
  margin-bottom: 16px; line-height: 1.6;
}
.alert.err { background: #fef0f0; color: #b32b34; border: 1px solid #fbdcdc; }
.alert.warn { background: #fdf6ec; color: #91571a; border: 1px solid #f9e3c0; }
.alert.ok { background: #eefaf0; color: #1d7b42; border: 1px solid #cdead6; }
.alert.info { background: #eef4fe; color: #1a5fd6; border: 1px solid #d3e4fb; }

/* ---------- 题目 ---------- */
.qgroup-head {
  padding: 12px 16px; margin: 16px 12px 0;
  font-size: 13.5px; font-weight: 600; color: #1a5fd6;
  background: #eef4fe; border-radius: 8px;
}
.q { background: #fff; border-radius: 10px; padding: 16px; margin: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.q-stem { font-size: 15.5px; line-height: 1.7; font-weight: 500; margin-bottom: 14px; }
.q-no {
  display: inline-block; min-width: 26px; height: 22px; line-height: 22px;
  padding: 0 7px; margin-right: 7px; border-radius: 5px;
  background: #1a5fd6; color: #fff; font-size: 12.5px; font-weight: 600;
  text-align: center; vertical-align: 2px;
}
.q-no.done { background: #1d9e75; }
.q-tag {
  display: inline-block; height: 20px; line-height: 20px; padding: 0 6px;
  margin-left: 6px; border-radius: 4px; font-size: 11.5px; font-weight: 500;
  vertical-align: 2px;
}
.q-tag.single { background: #eef4fe; color: #1a5fd6; }
.q-tag.multi  { background: #fdf6ec; color: #91571a; }
.q-tag.judge  { background: #eefaf0; color: #1d7b42; }

.opts { list-style: none; }
.opts li { margin-bottom: 9px; }
.opts li:last-child { margin-bottom: 0; }
.opts label {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; border: 1px solid #e2e5ea; border-radius: 8px;
  background: #fafbfc; cursor: pointer; transition: all .13s;
  font-size: 14.5px; line-height: 1.6;
}
.opts label:active { background: #f0f2f5; }
.opts input { position: absolute; opacity: 0; width: 0; height: 0; }
.opts .mark {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid #c3c8d0; background: #fff;
  font-size: 12px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.opts .mark.radio { border-radius: 50%; }
.opts .mark.check { border-radius: 4px; }
.opts input:checked ~ .mark { background: #1a5fd6; border-color: #1a5fd6; }
.opts input:checked ~ .mark.radio:after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.opts input:checked ~ .mark.check:after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px,-1px); }
.opts li.on label { border-color: #1a5fd6; background: #f2f7ff; }
.opts .txt { flex: 1; min-width: 0; word-break: break-word; }
.opts .ltr { font-weight: 600; color: #8a8f99; margin-right: 2px; }

/* ---------- 底部操作 ---------- */
.footbar {
  position: sticky; bottom: 0; z-index: 40;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96); border-top: 1px solid #e9ebef;
  backdrop-filter: blur(6px);
}
.footbar .progress { font-size: 13px; color: #4e5969; text-align: center; margin-bottom: 8px; }
.footbar .progress b { color: #1a5fd6; }

/* ---------- 成绩单 ---------- */
.score-hero { text-align: center; padding: 26px 16px 22px; }
.score-num { font-size: 56px; font-weight: 700; line-height: 1.1; letter-spacing: -1px; }
.score-num.pass { color: #1d9e75; }
.score-num.fail { color: #e34d59; }
.score-unit { font-size: 17px; font-weight: 500; color: #8a8f99; margin-left: 3px; }
.score-label { font-size: 14px; color: #8a8f99; margin-top: 4px; }
.badge {
  display: inline-block; margin-top: 14px; padding: 6px 18px;
  border-radius: 20px; font-size: 15px; font-weight: 600;
}
.badge.pass { background: #eefaf0; color: #1d9e75; }
.badge.fail { background: #fef0f0; color: #e34d59; }

.stat-grid { display: flex; border-top: 1px solid #eef0f3; margin-top: 20px; }
.stat-grid > div { flex: 1; padding: 14px 4px; text-align: center; border-right: 1px solid #eef0f3; }
.stat-grid > div:last-child { border-right: 0; }
.stat-grid .v { font-size: 19px; font-weight: 600; }
.stat-grid .k { font-size: 12.5px; color: #8a8f99; margin-top: 2px; }
.stat-grid .v.green { color: #1d9e75; }
.stat-grid .v.red { color: #e34d59; }

/* ---------- 表格 ---------- */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; white-space: nowrap; }
table.tbl th, table.tbl td { padding: 9px 11px; text-align: left; border-bottom: 1px solid #eef0f3; }
table.tbl th { background: #f7f8fa; font-weight: 600; color: #4e5969; font-size: 13px; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl td.num { font-variant-numeric: tabular-nums; }
.dot { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 12px; font-weight: 500; }
.dot.ok { background: #eefaf0; color: #1d9e75; }
.dot.no { background: #fef0f0; color: #e34d59; }

.empty { text-align: center; padding: 48px 16px; color: #8a8f99; font-size: 14px; }

/* ---------- 后台 ---------- */
.wide { max-width: 1080px; }
.kpis { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.kpi { flex: 1 1 128px; background: #fff; border-radius: 10px; padding: 14px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.kpi .v { font-size: 22px; font-weight: 700; color: #1a5fd6; }
.kpi .k { font-size: 12.5px; color: #8a8f99; margin-top: 3px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 9px; margin: 14px 12px 0; }
.toolbar a, .toolbar button {
  display: inline-block; padding: 9px 16px; border-radius: 8px; font-size: 14px;
  font-weight: 500; text-decoration: none; border: 1px solid #dcdfe6;
  background: #fff; color: #4e5969; cursor: pointer; font-family: inherit;
}
.toolbar a.primary { background: #1a5fd6; color: #fff; border-color: #1a5fd6; }
.toolbar a.red { color: #e34d59; border-color: #fbdcdc; }
table.tbl a.lnk { color: #1a5fd6; text-decoration: none; margin-right: 9px; }
table.tbl a.del { color: #e34d59; text-decoration: none; }
.mini { font-size: 12.5px; color: #8a8f99; margin-top: 10px; line-height: 1.7; }
code { background: #f2f3f5; padding: 1px 5px; border-radius: 4px; font-size: 12.5px; font-family: Consolas, Monaco, monospace; }

/* ---------- 表单扩展：textarea / select / 复选行 ---------- */
.field textarea,
.field select {
  width: 100%; padding: 11px 14px; font-size: 15px; font-family: inherit;
  border: 1px solid #dcdfe6; border-radius: 8px; background: #fff; color: #1f2329;
  outline: none; -webkit-appearance: none; resize: vertical; line-height: 1.6;
}
.field textarea { min-height: 76px; }
.field textarea:focus, .field select:focus { border-color: #1a5fd6; }
.field select { height: 46px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%238a8f99' d='M256 340L128 200h256z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 13px; padding-right: 38px; }
.field input[type=datetime-local] {
  width: 100%; height: 46px; padding: 0 14px; font-size: 15px; font-family: inherit;
  border: 1px solid #dcdfe6; border-radius: 8px; background: #fff; color: #1f2329; outline: none;
}
.field input[type=datetime-local]:focus { border-color: #1a5fd6; }

.chk {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  border: 1px solid #e2e5ea; border-radius: 8px; background: #fafbfc;
  margin-bottom: 9px; cursor: pointer; font-size: 14.5px; line-height: 1.5;
}
.chk:last-of-type { margin-bottom: 0; }
.chk input { width: 18px; height: 18px; accent-color: #1a5fd6; flex: 0 0 auto; cursor: pointer; }
.chk span { flex: 1; }

/* ---------- 链接复制框 ---------- */
.linkbox { display: flex; gap: 8px; align-items: stretch; }
.linkbox input {
  flex: 1; min-width: 0; height: 40px; padding: 0 11px; font-size: 12.5px;
  font-family: Consolas, Monaco, monospace; color: #4e5969;
  border: 1px solid #e2e5ea; border-radius: 8px; background: #f7f8fa; outline: none;
}
.linkbox button {
  flex: 0 0 auto; padding: 0 15px; height: 40px; border: 1px solid #1a5fd6;
  border-radius: 8px; background: #fff; color: #1a5fd6; font-size: 13.5px;
  font-weight: 500; font-family: inherit; cursor: pointer;
}
.linkbox button:active { background: #f2f7ff; }

/* ---------- 首页考试条目 ---------- */
.paperitem {
  display: block; padding: 13px 14px; margin-bottom: 9px;
  border: 1px solid #e2e5ea; border-radius: 9px; background: #fafbfc;
  text-decoration: none; color: inherit;
}
.paperitem:last-child { margin-bottom: 0; }
.paperitem:active { background: #f0f2f5; }
.pi-title { font-size: 15px; font-weight: 500; color: #1f2329; margin-bottom: 3px; }
.pi-meta { font-size: 12.5px; color: #8a8f99; }