/* 宿迁建安培训 · 学员端样式（延续 Blueprint Archive 视觉） */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--c-bg, #F2F0EA);
  color: var(--c-ink, #17202B);
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  font-size: 14px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: linear-gradient(rgba(11,99,197,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,99,197,.045) 1px, transparent 1px);
  background-size: 44px 44px;
}
a { color: var(--c-blue, #0B63C5); text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.01em; }
p { margin: 0; }
.muted { color: var(--c-ink-3, #6B7684); }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.wrap { width: min(1180px, 100% - 40px); margin: 0 auto; position: relative; z-index: 1; }
.hide { display: none !important; }

/* ---------- 顶栏 ---------- */
.topbar {
  background: linear-gradient(100deg, #072B52, #0B4E9B 60%, #0B63C5);
  color: #fff; position: sticky; top: 0; z-index: 40;
  border-bottom: 3px solid #EA6412;
}
.topbar .wrap { display: flex; align-items: center; gap: 26px; height: 66px; }
/* 顶栏深底：品牌区为 <a>，需覆盖全局 a 的蓝色，文字统一白色 */
.topbar .brand { color: #fff; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand img { height: 30px; width: auto; }
.brand b { font-size: 16px; letter-spacing: .02em; white-space: nowrap; }
.brand span {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .18em;
  opacity: .62; display: block; margin-top: 1px;
}
.nav { display: flex; gap: 2px; margin-left: 8px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  color: rgba(255,255,255,.78); padding: 8px 13px; border-radius: 6px;
  font-size: 13.5px; white-space: nowrap; display: flex; align-items: center; gap: 7px;
  transition: .18s;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.09); }
.nav a.on { color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 0 -2px 0 #EA6412; }
.nav a svg { opacity: .85; }
.userbox { display: flex; align-items: center; gap: 12px; font-size: 12.5px; white-space: nowrap; }
.userbox .who { text-align: right; line-height: 1.35; }
.userbox .who b { display: block; font-size: 13px; }
.userbox .who span { opacity: .62; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; }
.userbox button {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  color: #fff; border-radius: 6px; padding: 6px 11px; cursor: pointer; font-size: 12px;
}
.userbox button:hover { background: rgba(255,255,255,.2); }

/* ---------- 页脚 ---------- */
.foot { margin-top: 56px; background: #0C1724; color: rgba(255,255,255,.66); padding: 30px 0 24px; position: relative; z-index: 1; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 26px 46px; align-items: flex-start; }
.foot .f-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.foot .f-brand img { height: 24px; }
.foot .f-brand b { color: #fff; font-size: 14px; }
.foot .f-col { font-size: 12.5px; line-height: 1.9; min-width: 200px; }
.foot .f-col b { color: #fff; display: block; font-size: 12px; letter-spacing: .08em; margin-bottom: 4px; }
.foot .f-col .mono { color: #E9EEF5; font-size: 13px; }
.foot .f-bottom { width: 100%; border-top: 1px solid rgba(255,255,255,.1); margin-top: 18px; padding-top: 14px; font-size: 11.5px; opacity: .55; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* ---------- 通用块 ---------- */
.card { background: #fff; border: 1px solid var(--c-line, #DCE3EC); border-radius: 10px; box-shadow: 0 1px 2px rgba(16,32,54,.04); position: relative; }
.card.pad { padding: 22px 24px; }
.card-hd { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--c-line, #E5EAF1); }
.card-hd h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.card-bd { padding: 18px 20px; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 30px 0 14px; }
.sec-no { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .2em; color: #EA6412; margin-bottom: 5px; }
.sec-head h2 { font-size: 20px; }
.sec-extra { font-size: 12.5px; color: var(--c-ink-3, #6B7684); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--c-line-2, #C9D4E2); background: #fff; color: var(--c-ink, #17202B);
  border-radius: 7px; padding: 9px 16px; font-size: 13.5px; cursor: pointer;
  font-family: inherit; transition: .16s; min-height: 38px; font-weight: 500;
}
.btn:hover { border-color: #0B63C5; color: #0B63C5; }
.btn.primary { background: #0B63C5; border-color: #0B63C5; color: #fff; font-weight: 600; }
.btn.primary:hover { background: #0950a2; }
.btn.accent { background: #EA6412; border-color: #EA6412; color: #fff; font-weight: 600; }
.btn.accent:hover { background: #cf570c; }
.btn.ghost { background: transparent; }
.btn.sm { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #0B63C5; outline-offset: 2px;
}

.badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 1px 8px;
  border-radius: 20px; background: #EDF1F6; color: #4B5866; border: 1px solid transparent; white-space: nowrap;
}
.badge.ok { background: #E6F4EE; color: #0B7D57; border-color: #BFE3D4; }
.badge.warn { background: #FCF0DE; color: #A96A06; border-color: #F0DCB8; }
.badge.risk { background: #FBEAE7; color: #BA3A2C; border-color: #F0C8C2; }
.badge.info { background: #E8F0FB; color: #0B63C5; border-color: #C9DCF5; }

.prog { height: 6px; background: #E7ECF3; border-radius: 6px; overflow: hidden; }
.prog i { display: block; height: 100%; background: #0B63C5; border-radius: 6px; transition: width .35s; }
.prog.ok i { background: #0B7D57; }
.prog.accent i { background: #EA6412; }

.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.kpi { background: #fff; border: 1px solid var(--c-line, #DCE3EC); border-radius: 10px; padding: 16px 18px; position: relative; overflow: hidden; }
.kpi .k-label { font-size: 12px; color: #6B7684; margin-bottom: 6px; }
.kpi .k-val { font-family: 'Barlow Condensed', 'Noto Sans SC', sans-serif; font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: .01em; }
.kpi .k-sub { font-size: 11.5px; color: #8A94A3; margin-top: 6px; }
.kpi .k-ico { position: absolute; right: 14px; bottom: 10px; color: #0B63C5; opacity: .16; }
.kpi.accent .k-ico { color: #EA6412; }

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: .04em; color: #6B7684; padding: 10px 12px; border-bottom: 1px solid #E5EAF1; background: #FAFBFD; white-space: nowrap; }
.tbl td { padding: 11px 12px; border-bottom: 1px solid #EEF2F7; vertical-align: middle; }
.tbl tr:hover td { background: #F8FAFD; }
.tbl .num { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }

.empty { text-align: center; padding: 40px 20px; color: #8A94A3; }
.empty svg { margin: 0 auto 12px; opacity: .6; }
.empty p { font-size: 13.5px; }
.empty small { font-size: 12px; opacity: .8; }

/* ---------- 登录 / 注册（居中收敛） ---------- */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px 20px; position: relative; z-index: 1; }
.auth-card { width: min(1000px, 100%); display: grid; grid-template-columns: 1.05fr .95fr; background: #fff; border: 1px solid var(--c-line, #DCE3EC); border-radius: 12px; overflow: hidden; box-shadow: 0 18px 50px rgba(12,32,58,.13); }
.auth-card.single { grid-template-columns: 1fr; width: min(620px, 100%); }
.auth-art { background: linear-gradient(150deg, #072B52, #0B4E9B 55%, #0B63C5); color: #fff; padding: 38px 34px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.auth-art::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 38px 38px; }
.auth-art > * { position: relative; z-index: 1; }
.auth-art img { height: 34px; width: auto; align-self: flex-start; margin-bottom: 24px; }
.auth-art .a-no { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .2em; color: #FFB27A; }
.auth-art h1 { font-size: clamp(22px, 2.2vw, 29px); line-height: 1.35; margin: 10px 0 12px; }
.auth-art p { font-size: 13px; color: rgba(255,255,255,.76); line-height: 1.9; }
.auth-art ul { list-style: none; padding: 0; margin: 24px 0 0; font-size: 12.5px; color: rgba(255,255,255,.8); }
.auth-art li { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 11px; }
.auth-art li svg { flex: none; margin-top: 3px; color: #7FC0FF; }
.auth-form { padding: 36px 34px; }
.auth-form h2 { font-size: 20px; margin-bottom: 4px; }
.auth-form .sub { font-size: 12.5px; color: #7A8697; margin-bottom: 22px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: #3C4857; }
.field label .req { color: #BA3A2C; }
.input, .select, textarea.input {
  width: 100%; border: 1px solid #CFD9E6; border-radius: 7px; padding: 10px 12px;
  font-size: 13.5px; font-family: inherit; background: #fff; color: #17202B; transition: .16s;
}
.input:focus, .select:focus, textarea.input:focus { border-color: #0B63C5; box-shadow: 0 0 0 3px rgba(11,99,197,.1); outline: none; }
.input.hint { font-family: 'IBM Plex Mono', monospace; letter-spacing: .04em; }
.field .tip { font-size: 11.5px; color: #8A94A3; margin-top: 5px; }
.field.err .input { border-color: #BA3A2C; }
.field .errmsg { color: #BA3A2C; font-size: 11.5px; margin-top: 4px; display: none; }
.field.err .errmsg { display: block; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: #5A6675; line-height: 1.65; }
.check input { margin-top: 3px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-foot { margin-top: 16px; font-size: 12.5px; color: #7A8697; text-align: center; }
.auth-foot a { font-weight: 600; }
.auth-note { margin-top: 18px; padding: 11px 13px; background: #F5F8FC; border-left: 3px solid #0B63C5; border-radius: 4px; font-size: 12px; color: #55637A; line-height: 1.75; }

/* ---------- 照片上传（替代原生 file 控件） ---------- */
.upload {
  position: relative; border: 1.5px dashed #C6D4E6; border-radius: 10px;
  background: linear-gradient(180deg, #FAFCFF, #F3F7FC);
  padding: 26px 18px; text-align: center; cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.upload:hover { border-color: #0B63C5; background: #F2F8FF; box-shadow: 0 0 0 3px rgba(11,99,197,.07); }
.upload:focus-within { border-color: #0B63C5; box-shadow: 0 0 0 3px rgba(11,99,197,.12); }
.upload input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 3; }
.upload .up-ico {
  width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 50%;
  background: #E6F0FC; color: #0B63C5; display: flex; align-items: center; justify-content: center;
}
.upload b { display: block; font-size: 13.5px; font-weight: 600; color: #17202B; }
.upload span { display: block; margin-top: 3px; font-size: 11.5px; color: #8A94A3; }
.upload .upload-filled { display: none; }
.upload.filled { padding: 0; border-style: solid; border-color: #D8E2EE; background: #0B2A4E; overflow: hidden; }
.upload.filled .upload-empty { display: none; }
.upload.filled .upload-filled { display: block; position: relative; }
.upload.filled img { display: block; width: 100%; max-height: 340px; object-fit: contain; background: #0B2A4E; }
.upload .up-again {
  position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px;
  background: rgba(6,24,52,.78); color: #fff; font-size: 11.5px; padding: 5px 10px;
  border-radius: 6px; backdrop-filter: blur(4px);
}

/* ---------- 首页 ---------- */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 26px; align-items: stretch; margin: 28px 0 4px; }
.hero-cover { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid #D8E1EC; min-height: 300px; background: #0B2A4E; }
.hero-cover img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hero-cover .tag { position: absolute; left: 16px; top: 16px; background: rgba(6,24,52,.75); color: #fff; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .14em; padding: 4px 9px; border-radius: 4px; backdrop-filter: blur(4px); }
.hero-info { display: flex; flex-direction: column; justify-content: center; }
.hero-info .eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .2em; color: #EA6412; }
.hero-info h1 { font-size: clamp(22px, 2.4vw, 31px); line-height: 1.35; margin: 9px 0 12px; }
.hero-info .desc { color: #5A6675; font-size: 13.5px; line-height: 1.85; }
.price-row { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 6px; }
.price-row .p { font-family: 'Barlow Condensed', sans-serif; font-size: 42px; font-weight: 700; color: #EA6412; line-height: 1; }
.price-row .u { font-size: 13px; color: #6B7684; }
.hero-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.facts { display: flex; gap: 22px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed #D8E1EC; flex-wrap: wrap; }
.facts div { font-size: 12px; color: #6B7684; }
.facts b { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 22px; color: #17202B; line-height: 1.1; }

/* ---------- 学习 ---------- */
.learn-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.chapter-list { max-height: 620px; overflow: auto; }
.chapter { display: flex; gap: 11px; padding: 12px 14px; border-bottom: 1px solid #EEF2F7; cursor: pointer; transition: .15s; }
.chapter:hover { background: #F7FAFD; }
.chapter.on { background: #EDF4FD; box-shadow: inset 3px 0 0 #0B63C5; }
.chapter .ch-no { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #8A94A3; padding-top: 2px; min-width: 20px; }
.chapter .ch-main { flex: 1; min-width: 0; }
.chapter .ch-title { font-size: 13px; font-weight: 600; line-height: 1.5; margin-bottom: 5px; }
.chapter .ch-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #8A94A3; }
.chapter .ch-meta .prog { flex: 1; height: 4px; }
.player { background: #0A1620; border-radius: 10px; overflow: hidden; position: relative; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.player .p-cover { position: absolute; inset: 0; }
.player .p-cover img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.player .p-inner { position: relative; z-index: 2; text-align: center; color: #fff; padding: 20px; }
.player .p-inner .big { width: 66px; height: 66px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; cursor: pointer; transition: .2s; }
.player .p-inner .big:hover { background: #0B63C5; border-color: #0B63C5; transform: scale(1.04); }
.player .p-title { font-size: 14px; font-weight: 600; }
.player .p-sub { font-size: 12px; opacity: .65; margin-top: 4px; }
.player .p-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: linear-gradient(transparent, rgba(0,0,0,.72)); padding: 22px 16px 12px; }
.player .p-bar .line { height: 4px; background: rgba(255,255,255,.22); border-radius: 4px; overflow: hidden; }
.player .p-bar .line i { display: block; height: 100%; background: #EA6412; width: 0; }
.player .p-bar .ctrl { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; color: rgba(255,255,255,.8); font-size: 11.5px; font-family: 'IBM Plex Mono', monospace; }
.player .p-bar .ctrl .play { cursor: pointer; color: #fff; }
.anti-cheat { display: flex; gap: 8px; align-items: flex-start; background: #FFF7EC; border: 1px solid #F3DFC2; border-left: 3px solid #EA6412; border-radius: 6px; padding: 9px 12px; font-size: 12px; color: #8A5A12; margin-top: 12px; }
.anti-cheat svg { flex: none; margin-top: 2px; color: #EA6412; }
.warn-strip { background: #FBEAE7; border: 1px solid #F0C8C2; color: #A32E21; padding: 9px 13px; border-radius: 6px; font-size: 12.5px; display: none; margin-top: 10px; }
.warn-strip.show { display: block; }

/* ---------- 考试 ---------- */
.exam-layout { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 20px; align-items: start; }
.q-item { padding: 18px 20px; border-bottom: 1px solid #EEF2F7; }
.q-item:last-child { border-bottom: none; }
.q-title { font-size: 14px; line-height: 1.75; margin-bottom: 12px; }
.q-title .qn { font-family: 'IBM Plex Mono', monospace; color: #EA6412; margin-right: 6px; }
.q-title .qt { font-size: 10.5px; color: #8A94A3; border: 1px solid #DCE3EC; border-radius: 3px; padding: 0 5px; margin-left: 6px; vertical-align: 1px; }
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid #E5EAF1; border-radius: 7px; margin-bottom: 7px; cursor: pointer; font-size: 13px; transition: .14s; }
.opt:hover { border-color: #A9C6E8; background: #F8FBFF; }
.opt.on { border-color: #0B63C5; background: #EDF4FD; box-shadow: inset 0 0 0 1px #0B63C5; }
.opt input { margin-top: 4px; }
.answer-card { position: sticky; top: 84px; }
.ac-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.ac-grid button { aspect-ratio: 1; border: 1px solid #DCE3EC; background: #fff; border-radius: 6px; cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #4B5866; }
.ac-grid button.done { background: #E8F0FB; border-color: #A9C6E8; color: #0B63C5; }
.ac-grid button.cur { background: #0B63C5; border-color: #0B63C5; color: #fff; }
.timer { font-family: 'Barlow Condensed', monospace; font-size: 30px; font-weight: 700; color: #0B63C5; line-height: 1; }
.timer.low { color: #BA3A2C; }

/* ---------- 证书 ---------- */
.cert-preview { background: #fff; border: 1px solid #D8C9A8; border-radius: 6px; padding: 30px; position: relative; overflow: hidden; }
.cert-preview::before { content: ''; position: absolute; inset: 12px; border: 1px solid #D8C9A8; pointer-events: none; }
.cert-preview .c-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.cert-preview .c-brand img { height: 30px; }
.cert-preview h3 { font-size: 21px; text-align: center; letter-spacing: .12em; margin: 10px 0 6px; }
.cert-preview .c-no { text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #8A7A56; letter-spacing: .08em; }
.cert-preview .c-body { margin: 24px 0; font-size: 14px; line-height: 2.2; }
.cert-preview .c-body b { border-bottom: 1px solid #7A6A46; padding: 0 10px; }
.cert-preview .c-foot { display: flex; justify-content: space-between; align-items: flex-end; font-size: 12px; color: #5A5040; margin-top: 22px; }
.cert-preview .seal { width: 82px; height: 82px; border: 2px solid rgba(186,58,44,.7); border-radius: 50%; color: rgba(186,58,44,.8); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 10px; line-height: 1.3; transform: rotate(-9deg); }

/* ---------- 我的中心 ---------- */
.member-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 20px; align-items: start; }
.menu-group { margin-bottom: 14px; }
.menu-group .mg-t { font-size: 10.5px; letter-spacing: .14em; color: #8A94A3; padding: 0 12px 6px; font-family: 'IBM Plex Mono', monospace; }
.menu-item { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 7px; font-size: 13px; color: #4B5866; cursor: pointer; transition: .14s; }
.menu-item:hover { background: #F3F7FC; }
.menu-item.on { background: #EDF4FD; color: #0B63C5; font-weight: 600; box-shadow: inset 3px 0 0 #0B63C5; }
.menu-item svg { opacity: .8; }

/* ---------- 弹层 / Toast ---------- */
#modal-root { position: fixed; inset: 0; z-index: 80; display: none; }
#modal-root.open { display: block; }
#modal-root .mask { position: absolute; inset: 0; background: rgba(10,22,32,.55); backdrop-filter: blur(2px); }
#modal-root .modal { position: relative; width: min(560px, calc(100% - 32px)); margin: 8vh auto 0; background: #fff; border-radius: 10px; box-shadow: 0 24px 60px rgba(6,20,38,.3); max-height: 84vh; display: flex; flex-direction: column; }
#modal-root .modal.wide { width: min(860px, calc(100% - 32px)); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #E5EAF1; }
.modal-head h3 { font-size: 15px; }
.modal-x { border: none; background: none; font-size: 22px; line-height: 1; color: #8A94A3; cursor: pointer; padding: 0 4px; }
.modal-body { padding: 18px 20px; overflow: auto; }
.modal-foot { padding: 13px 20px; border-top: 1px solid #E5EAF1; display: flex; justify-content: flex-end; gap: 9px; }
.confirm-text { font-size: 13.5px; color: #4B5866; line-height: 1.8; }
#toast-box { position: fixed; right: 20px; bottom: 24px; z-index: 90; display: flex; flex-direction: column; gap: 9px; }
.toast { background: #17202B; color: #fff; padding: 10px 15px; border-radius: 7px; font-size: 13px; box-shadow: 0 10px 30px rgba(10,22,32,.24); opacity: 0; transform: translateY(8px); transition: .24s; max-width: 340px; }
.toast.in { opacity: 1; transform: none; }
.toast.err { background: #A32E21; }
.toast.ok { background: #0B6B4C; }
.loading { text-align: center; padding: 46px 0; color: #8A94A3; font-size: 13px; }
.loading i { display: inline-block; width: 16px; height: 16px; border: 2px solid #CBD6E4; border-top-color: #0B63C5; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -3px; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 响应式 ---------- */
@media (max-width: 1000px) {
  .hero, .learn-layout, .exam-layout, .member-layout { grid-template-columns: 1fr; }
  .auth-card { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .answer-card { position: static; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 28px); }
  .nav { display: none; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .auth-form { padding: 26px 20px; }
  .topbar .wrap { height: 58px; gap: 12px; }
  .kpi .k-val { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
  .topbar, .foot, .no-print { display: none !important; }
  body { background: #fff; }
  body::before { display: none; }
  .cert-preview { border: none; box-shadow: none; }
}

/* ---------- 页脚贴底 ---------- */
html { background: var(--c-bg, #F2F0EA); }
body { min-height: 100vh; display: flex; flex-direction: column; }
#view-root { flex: 1 0 auto; }
#site-foot { flex: 0 0 auto; margin-top: auto; }

/* ---------- 微信扫码核验 ---------- */
.qr-box { display: flex; justify-content: center; padding: 6px 0 2px; }
.qr-img { width: 220px; height: 220px; border-radius: 10px; border: 1px solid #E1E7F0; background: #fff; }
.qr-tip { text-align: center; font-size: 13px; color: #17202B; margin-top: 12px; }
.qr-state { margin-top: 8px; text-align: center; font-size: 12px; color: #8A94A3; }
.qr-state.ok { color: #1F7A46; font-weight: 600; }
.qr-state.err { color: #B4342A; }
.member-nav a.menu-item { text-decoration: none; }

/* ---------- V1.3 考试：一题一屏 + 左侧答题卡 ---------- */
.exam-v2 { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 16px; align-items: start; }
.ac-left { position: sticky; top: 82px; }
.exam-timer { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 14px; padding-top: 14px; border-top: 1px solid #EEF2F7; }
.ac-legend { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11px; color: #8A94A3; }
.ac-legend .dot { width: 9px; height: 9px; border-radius: 2px; background: #EEF2F7; border: 1px solid #DCE4EE; }
.ac-legend .dot.done { background: #0B63C5; border-color: #0B63C5; }
.ac-legend .dot.cur { border: 2px solid #EA6412; }
.q-v2-head { display: flex; align-items: center; gap: 9px; }
.q-v2-head .qn { width: 28px; height: 28px; border-radius: 7px; background: #0B4E9B; color: #fff;
  font: 12px ui-monospace, monospace; display: flex; align-items: center; justify-content: center; }
.q-v2-title { font-size: 17px; line-height: 1.85; margin: 18px 0 22px; font-weight: 500; }
.q-v2-opts { display: flex; flex-direction: column; gap: 10px; }
.q-opt { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; border: 1px solid #DCE4EE;
  border-radius: 9px; font-size: 14px; line-height: 1.7; cursor: pointer; transition: .15s; }
.q-opt:hover { border-color: #9CBEEB; background: #F8FBFF; }
.q-opt.on { border-color: #0B63C5; background: #F0F6FE; }
.q-opt .ol { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1px solid #C9D4E3;
  display: flex; align-items: center; justify-content: center; font: 11px ui-monospace, monospace; }
.q-opt.on .ol { background: #0B63C5; border-color: #0B63C5; color: #fff; }
.q-right .q-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px; border-top: 1px solid #EEF2F7; }
.exam-v2 .ac-grid button.cur { border: 2px solid #EA6412; color: #EA6412; font-weight: 700; }

/* ---------- V1.3 考中随机人脸锁屏 ---------- */
.face-lock { display: none; position: fixed; z-index: 80; inset: 0; background: rgba(6, 22, 44, .82);
  align-items: center; justify-content: center; padding: 20px; }
.face-lock.show { display: flex; }
.fl-card { width: 100%; max-width: 400px; max-height: 92vh; overflow: auto; background: #fff;
  border-radius: 16px; padding: 26px 24px 22px; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.fl-ico { width: 58px; height: 58px; margin: 0 auto 13px; border-radius: 50%; background: #EDF3FC;
  color: #0B4E9B; display: flex; align-items: center; justify-content: center; }
.fl-card h3 { margin: 0 0 8px; font-size: 17px; }
.fl-card > p { margin: 0 0 14px; font-size: 12.5px; line-height: 1.85; color: #5A6879; }
.fl-foot { margin-top: 14px; }
@media (max-width: 900px) { .exam-v2 { grid-template-columns: 1fr; } .ac-left { position: static; } }