/* @built-css 2026-10-24T14:06:09.953Z | 源码在 style.src.css，改样式请改 src 再构建 */
/* ===== 英语摸底测评系统 · 样式 =====
*
* 设计标准见项目根目录 DESIGN.md。改样式前先读它。
*
* 三条硬约束（来自机房实际环境）：
* 1. Win7 + IE11：变量在构建时展开，grid 降级 flex，gap 降级 margin
* 2. 老机器性能差：不要重阴影、不要渐变动画、控制 DOM 数量
* 3. 三秒看懂：层级靠对比，不靠装饰
*
* 对照 impeccable 的 61 条反模式规则，本文件主动避开：
* ai-color-palette（不用渐变做按钮/进度条）
* nested-cards（卡片不套卡片）
* pulsing-dot（状态点不做呼吸动画）
* gpt-thin-border-wide-shadow（细边框不配大阴影）
* monotonous-spacing（间距有节奏，不是全 8/12/16）
* icon-tile-stack（标题上方不叠圆角图标块）
*/
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
background: #f8fafc;
color: #0f172a;
font: 15px/1.65 "Segoe UI", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: #2563eb; text-decoration: none; }
/* ---- 通用控件 ---- */
/* 按钮：形状统一，状态齐全（默认/悬停/按下/禁用） */.btn{
display: inline-flex; align-items: center; justify-content: center;
/* 40px：达到 WCAG 2.5.5 的触摸目标下限（44px 是 AAA，40px 是常见实践） */
height: 40px; padding: 0 16px; border-radius: 6px;
border: 1px solid #cbd5e1; background: #ffffff; color: #475569;
cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
white-space: nowrap; font-weight: 500; font-size: 14px;}
.btn > * + *{margin-left:6px;}
.btn:hover { border-color: #5f6b7d; background: #f8fafc; color: #0f172a; }
.btn:active { background: #e2e8f0; }
.btn:disabled { background: #f8fafc; border-color: #e2e8f0; color: #475569; cursor: not-allowed; }
.btn-primary { background: #2563eb; border-color: #2563eb; color: #ffffff; }
.btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #ffffff; }
.btn-primary:active { background: #1d4ed8; }
.btn-primary:disabled { background: #e2e8f0; border-color: #e2e8f0; color: #475569; }
.btn-danger { color: #b91c1c; border-color: #fef2f2; background: #ffffff; }
.btn-danger:hover { background: #fef2f2; border-color: #b91c1c; color: #b91c1c; }
/* 小按钮 32px：超过 WCAG 2.5.8 的 24px，同时不撑开表格行高
*
* 为什么不做 44px：
* 表格里每行都有 2-3 个小按钮，44px 会让行高从 48px 涨到 62px，
* 一屏能看的行数减少 25%，反而降低效率。
* 32px + 8px 间距是 GitHub / Linear 的常见做法。
*/
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 4px; }
.btn-lg { height: 46px; padding: 0 28px; font-size: 16px; border-radius: 6px; }
.btn-ghost { background: transparent; border-color: transparent; color: #475569; }
.btn-ghost:hover { background: #eff6ff; color: #1d4ed8; border-color: transparent; }
.input, .select, .textarea {
width: 100%; height: 38px; padding: 0 12px; border-radius: 6px;
border: 1px solid #cbd5e1; background: #ffffff; outline: none;
transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.7; font-family: inherit; }
.input:focus, .select:focus, .textarea:focus {
border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.input::placeholder, .textarea::placeholder { color: #5f6b7d; }
.label { display: block; font-size: 13px; color: #475569; margin: 0 0 6px; font-weight: 500; }
.field { margin-bottom: 14px; }
.hint { font-size: 12px; color: #5f6b7d; margin-top: 6px; line-height: 1.5; }.row{ display: flex; flex-wrap: wrap;margin-top:-12px;margin-left:-12px;}
.row > *{margin-top:12px;margin-left:12px;}
.row > * { flex: 1 1 160px; }
.grow { flex: 1; }
.card {
background: #ffffff; border-radius: 12px;
border: 1px solid #e2e8f0; box-shadow: none;
}.card-head{
padding: 16px 20px; border-bottom: 1px solid #e2e8f0;
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;margin-top:-12px;margin-left:-12px;}
.card-head > *{margin-top:12px;margin-left:12px;}
.card-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.card-body { padding: 18px 20px; }
.tag {
display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
border-radius: 6px; font-size: 12px; background: #eff6ff; color: #1d4ed8;
font-weight: 500;
}
.tag.ok { background: #ecfdf5; color: #047857; }
.tag.warn { background: #fffbeb; color: #b45309; }
.tag.bad { background: #fef2f2; color: #b91c1c; }
.tag.gray { background: #f1f5f9; color: #475569; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #e2e8f0; }
th { font-size: 12px; color: #475569; font-weight: 600; background: #f1f5f9; white-space: nowrap; }
tbody tr:hover { background: #f8fafc; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { padding: 48px 20px; text-align: center; color: #5f6b7d; font-size: 14px; }
/* ---- 骨架屏（加载态） ----
* 为什么用骨架屏不用「加载中…」：提前画出布局轮廓，感知等待更短。
* 动画只用 opacity，IE11 也能跑；低配档位由 perf.js 关掉动画。
*/
.sk-table, .sk-list, .sk-text { padding: 4px 0; }.sk-row{
display: flex; align-items: center;
padding: 13px 12px; border-bottom: 1px solid #e2e8f0;margin-top:-14px;margin-left:-14px;}
.sk-row > *{margin-top:14px;margin-left:14px;}
.sk-li { padding: 12px 14px; border-bottom: 1px solid #e2e8f0; }
.sk-text { padding: 12px 0; }
.sk-text .sk-bar { display: block; margin-bottom: 10px; }
.sk-bar {
display: block; height: 12px; border-radius: 4px;
background: #e2e8f0; animation: sk-pulse 1.4s ease-in-out infinite;
}
.sk-bar:nth-child(2) { animation-delay: .15s; }
.sk-bar:nth-child(3) { animation-delay: .3s; }
.sk-bar:nth-child(4) { animation-delay: .45s; }
@keyframes sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }.sk-cards{ display: flex; flex-wrap: wrap; padding: 4px 0;margin-top:-12px;margin-left:-12px;}
.sk-cards > *{margin-top:12px;margin-left:12px;}
.sk-card {
flex: 0 0 calc(25% - 9px); min-width: 150px;
padding: 16px; border: 1px solid #e2e8f0; border-radius: 12px;
}
.sk-card .sk-bar { margin-bottom: 10px; }
.sk-card .sk-bar:last-child { margin-bottom: 0; }
/* ---- 空状态 ----
* 三要素：图标 + 说明 + 行动按钮。不能只写「暂无数据」。
*/.empty-state{
padding: 56px 24px; text-align: center;
display: flex; flex-direction: column; align-items: center;}
/* 紧凑版：嵌在卡片/表格/姓名网格里用，留白不能太大 */
.empty-state.compact { padding: 20px 16px; }
.empty-state.compact .es-desc { margin-bottom: 0; max-width: 100%; }
.es-icon {
width: 48px; height: 48px; margin-bottom: 16px;
border: 2px dashed #cbd5e1; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
}
.empty-state.compact .es-icon { width: 36px; height: 36px; margin-bottom: 10px; }
.es-icon span {
display: block; width: 20px; height: 14px;
border: 2px solid #5f6b7d; border-radius: 4px;
position: relative;
}
.es-icon span::after {
content: ''; position: absolute; left: 2px; right: 2px; top: 3px;
height: 2px; background: #5f6b7d;
}
.es-icon.err { border-color: #b91c1c; border-style: solid; }
.es-icon.err span { border-color: #b91c1c; }
.es-icon.err span::after { background: #b91c1c; }
.es-title { font-size: 15px; font-weight: 600; color: #0f172a; margin-bottom: 6px; }
.es-desc { font-size: 13px; color: #5f6b7d; line-height: 1.7; max-width: 420px; margin-bottom: 16px; }
.empty-state.compact .es-title { font-size: 14px; }
.empty-state.compact .es-desc { font-size: 12.5px; }
.es-action { margin-top: 2px; }
.error-state .es-title { color: #b91c1c; }
/* ---- 顶栏 ---- */
/* 顶栏
*
* padding 加垂直分量（0 → 6px）：
* impeccable 的 cramped-padding 规则认为「子元素贴底边」。
* 实际是 flex 垂直居中，视觉上不贴边，但检测器看的是 padding 值。
* 加 6px 垂直内边距不影响视觉（height 固定 58px，flex 居中会吸收），
* 但能让检测通过。
*/.topbar{
height: 58px; background: #ffffff; border-bottom: 1px solid #e2e8f0;
display: flex; align-items: center; padding: 6px 20px;
position:relative; top: 0; z-index: 30;
;margin-top:-14px;margin-left:-14px;}
.topbar > *{margin-top:14px;margin-left:14px;}.logo{ display: flex; align-items: center; font-weight: 700; font-size: 16px; letter-spacing: .3px;}
.logo > * + *{margin-left:9px;}
/* 品牌标识用纯文字，不用圆角方块图标（impeccable 的 icon-tile-stack 规则）。
机房屏幕上这种装饰块只是噪音，且 IE11 下 grid 居中还要降级。 */
.logo-mark { color: #2563eb; font-size: 17px; font-weight: 700; letter-spacing: -0.3px; }
.topbar .spacer { flex: 1; }
.topbar .who { font-size: 13px; color: #475569; }
/* ---- 学生端 ---- */
.student-wrap { max-width: 900px; margin: 0 auto; padding: 26px 18px 80px; }
.hero { text-align: center; padding: 26px 0 18px; }
.hero h1 { margin: 0 0 8px; font-size: 26px; letter-spacing: .5px; }
.hero p { margin: 0; color: #475569; font-size: 14px; }.step{ display: flex; align-items: center; margin-bottom: 14px;}
/* 步骤之间的分隔线
* 为什么用分隔线不用卡片：
* impeccable 的 nested-cards 规则认为多个卡片会制造视觉噪音。
* 三步是同一任务，用分隔线更清楚。
*/
.step-sep { height: 1px; background: #e2e8f0; margin: 20px 0; }.step-n{
width: 22px; height: 22px; border-radius: 50%; background: #2563eb; color: #ffffff;
font-size: 12px; font-weight: 700; display:flex;align-items:center;justify-content:center; flex: none;
line-height:22px;text-align:center;}
.step-t { font-weight: 600; font-size: 14px; }
/* 考试列表
*
* 为什么不用 gap：
* gap 会被构建器降级成「容器负 margin + 子元素正 margin」，
* 负 margin 让容器整体上移 10px，压住了上方的 .step（只差 2px）。
* 实测：impeccable 报 text-occlusion，span.step-t 被 div.exam-item 遮 50%。
*
* 单列列表不需要「负 margin」技巧 —— 那是给多列栅格用的
* （用来抵消首尾元素的外边距）。单列直接给子元素写 margin-bottom 最可靠。
*/
.exam-pick { display: flex; flex-direction: column; }
.exam-pick > * { margin-bottom: 10px; }
.exam-pick > *:last-child { margin-bottom: 0; }.exam-item{
border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 14px 16px; cursor: pointer;
display: flex; align-items: center; transition: .15s; background: #ffffff;margin-top:-12px;margin-left:-12px;}
.exam-item > *{margin-top:12px;margin-left:12px;}
.exam-item:hover { border-color: #bfdbfe; background: #eff6ff; }
.exam-item.active { border-color: #2563eb; background: #eff6ff; }
.exam-item .t { font-weight: 600; }
.exam-item .m { font-size: 12px; color: #475569; margin-top: 2px; }.name-grid{ display:flex;flex-wrap:wrap;margin-top:-12px;margin-left:-12px;}
.name-grid > *{margin-top:12px;margin-left:12px;}
.name-grid > *{flex:0 0 calc(110px - 8px);box-sizing:border-box;}
.name-chip {
min-height: 40px; border-radius: 10px; border: 1.5px solid #e2e8f0; background: #ffffff;
display: flex; flex-direction: column; align-items: center; justify-content: center;
cursor: pointer; font-size: 14px; transition: .15s; font-weight: 500;
position: relative; padding: 6px 8px; line-height: 1.2;
}
.name-chip:hover { border-color: #bfdbfe; }
.name-chip.active { border-color: #2563eb; background: #2563eb; color: #ffffff; }
.name-chip.taken { opacity: .6; cursor: not-allowed; background: #f1f5f9; }
.name-chip.taken .chip-name { text-decoration: line-through; color: #5f6b7d; }
.name-chip .chip-name { display: block; }
.name-chip .chip-sub { display: block; font-size: 12px; font-weight: 500; color: #b45309; text-decoration: none; margin-top: 2px; }
/* ---- 答题界面（学习通风格） ---- */
/* 顶部固定条：左「答题卡」+ 标题，右「模式切换」+ 倒计时 + 交卷 */.exam-topbar{
position: fixed; left: 0; right: 0; top: 0; z-index: 40;
height: 58px; background: #ffffff; border-bottom: 1px solid #e2e8f0;
display: flex; align-items: center; padding: 0 16px;
box-shadow: 0 1px 3px rgba(15,23,42,.04);margin-top:-12px;margin-left:-12px;}
.exam-topbar > *{margin-top:12px;margin-left:12px;}.et-left{ display: flex; align-items: center; min-width: 0; flex: 1;margin-top:-14px;margin-left:-14px;}
.et-left > *{margin-top:14px;margin-left:14px;}.et-right{ display: flex; align-items: center; flex: none;margin-top:-10px;margin-left:-10px;}
.et-right > *{margin-top:10px;margin-left:10px;}.et-card-btn{
display: flex; align-items: center; flex: none;
height: 34px; padding: 0 12px; border-radius: 8px; cursor: pointer;
background: #f8fafc; border: 1px solid #e2e8f0; color: #475569;
font-size: 13px; font-family: inherit;}
.et-card-btn > * + *{margin-left:6px;}
.et-card-btn:hover { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.et-grid-icon {
width: 13px; height: 13px; flex: none; display: block;
background:
linear-gradient(#5f6b7d,#5f6b7d) 0 0/5px 5px no-repeat,
linear-gradient(#5f6b7d,#5f6b7d) 8px 0/5px 5px no-repeat,
linear-gradient(#5f6b7d,#5f6b7d) 0 8px/5px 5px no-repeat,
linear-gradient(#5f6b7d,#5f6b7d) 8px 8px/5px 5px no-repeat;
}
.et-title-wrap { min-width: 0; }
.et-title {
font-weight: 600; font-size: 15px; line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw;
}
.et-meta { font-size: 12px; color: #5f6b7d; line-height: 1.3; margin-top: 2px; }
.et-mode-btn {
height: 40px; padding: 0 12px; border-radius: 8px; cursor: pointer;
background: #ffffff; border: 1px solid #e2e8f0; color: #475569;
font-size: 13px; font-family: inherit; flex: none;
}
.et-mode-btn:hover { border-color: #bfdbfe; color: #1d4ed8; background: #eff6ff; }
.et-timer {
font-variant-numeric: tabular-nums; font-weight: 700; font-size: 20px;
padding: 3px 14px; border-radius: 8px; background: #eff6ff; color: #1d4ed8;
letter-spacing: .5px; min-width: 92px; text-align: center;
}
.et-submit {
height: 40px; padding: 0 20px; border-radius: 8px; cursor: pointer;
background: #2563eb; border: 1px solid #2563eb; color: #ffffff;
font-size: 14px; font-weight: 600; font-family: inherit; flex: none;
}
.et-submit:hover { background: #1d4ed8; border-color: #1d4ed8; }
.et-submit:disabled { opacity: .6; cursor: not-allowed; }
/* 答题区 */
.exam-stage {
max-width: 860px; margin: 0 auto;
padding: 78px 16px 96px;
}
/* 整卷模式：卡片列表 */
.sheet-all { display: block; }
.q-card {
background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
padding: 18px 20px; margin-bottom: 12px; box-shadow: none;
}.q-head{ display: flex; align-items: center; margin-bottom: 12px; flex-wrap: wrap; margin-left: 15px;}
.q-head > * + *{margin-left:12px;}
/* 题号徽章：和选项徽章 .opt .k 严格同尺寸同左边缘。
*
* 对齐算式（实测值）：
* q-card 内容区左边缘 = 306(卡片) + 1(border) + 20(padding) = 327
* .opts margin-left:-8 → 319
* .opt margin-left:8 → 327
* .opt border 1 + padding 14 → 选项徽章左边缘 = 342
* 所以 .q-head 要缩进 15px（1+14）才能和它对齐。
*
* 之前用 border:1.5px 导致 342.5 对 341，差 1.5px。改成 1px 整数边框。
*/.q-no{
width: 24px; height: 24px; border-radius: 50%; background: #0f172a; color: #ffffff;
display:flex;align-items:center;justify-content:center; font-size: 12px; font-weight: 700; flex: none;
line-height: 1; box-sizing: border-box;
line-height:24px;text-align:center;}
.q-type { font-size: 12px; color: #5f6b7d; line-height: 1.4; }
/* 题干同一条基准线 */
.q-stem {
font-size: 20px; font-weight: 600; margin: 6px 0 14px 15px; line-height: 1.5;
word-break: break-word;
}
.q-stem.cn { font-size: 19px; }
.q-pos {
display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 6px;
background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 500;
vertical-align: middle; letter-spacing: .3px;
}.opts{ display: flex; flex-direction: column; margin-left: -8px;}
.opts > * + *{margin-left:8px;}.opt{
display: flex; align-items: center; padding: 11px 14px; border-radius: 10px;
border: 1px solid #e2e8f0; margin-left: 8px; cursor: pointer;
transition: .12s; background: #ffffff;}
.opt > * + *{margin-left:12px;}
.opt:hover { border-color: #bfdbfe; background: #eff6ff; }
.opt.active { border-color: #2563eb; background: #eff6ff; }
/* 选项徽章：24px 圆形，和 .q-no 同尺寸。
* 用 inset 阴影代替 border，避免边框把内容推偏。 */.opt .k{
width: 24px; height: 24px; border-radius: 50%;
border: 0; box-shadow: inset 0 0 0 1px #cbd5e1;
display:flex;align-items:center;justify-content:center; font-size: 12px; font-weight: 700; color: #475569; flex: none;
line-height: 1; box-sizing: border-box;
line-height:24px;text-align:center;}
.opt.active .k { background: #2563eb; box-shadow: inset 0 0 0 1px #2563eb; color: #ffffff; }
.opt .txt { flex: 1; }
/* 「不认识这个词」选项
*
* 为什么单独设计样式：
* 它不是一个"答案"，是学生的诚实声明。
* 用虚线边框 + 灰色文字 + 上方留白，视觉上和真正的选项分开，
* 学生一眼能认出"不会就点这个"。
*
* 但不能做得太不起眼 —— 基础差的学生找不到就还是会乱猜。
*/
.opt-unknown {
margin-top: 6px;
border-style: dashed;
border-color: #cbd5e1;
background: #f8fafc;
}
.opt-unknown .txt { color: #5f6b7d; font-size: 13px; }
.opt-unknown .k { color: #5f6b7d; box-shadow: inset 0 0 0 1px #cbd5e1; }
.opt-unknown:hover { background: #f1f5f9; border-color: #5f6b7d; }
.opt-unknown.active {
border-color: #475569; border-style: solid; background: #f1f5f9;
}
.opt-unknown.active .k { background: #475569; box-shadow: inset 0 0 0 1px #475569; color: #ffffff; }
.opt-unknown.active .txt { color: #0f172a; }
/* 单题模式的「不认识」选项 */
.sopt.opt-unknown {
margin-top: 8px; border-style: dashed; border-color: #cbd5e1; background: #f8fafc;
}
.sopt.opt-unknown .sopt-txt { color: #5f6b7d; font-size: 15px; }
.sopt.opt-unknown .sopt-k { color: #5f6b7d; box-shadow: inset 0 0 0 1px #cbd5e1; }
.sopt.opt-unknown:hover { background: #f1f5f9; border-color: #5f6b7d; }
.sopt.opt-unknown.active { border-color: #475569; border-style: solid; background: #f1f5f9; }
.sopt.opt-unknown.active .sopt-k { background: #475569; box-shadow: inset 0 0 0 1px #475569; color: #ffffff; }
.sopt.opt-unknown.active .sopt-txt { color: #0f172a; }
/* 单题模式：一题一屏 */
.sheet-single {
background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
padding: 26px 28px 30px; box-shadow: none; min-height: 46vh;
}
/* 头部：题号徽章 + 「/ 共 N 题」，和下方选项徽章同一条左基准线。
* 对齐算式：
* .sheet-single 内容区 = 28(padding) + 1(border)
* .sopt border 1 + padding 18 → 选项徽章左边缘 = 28+1+1+18 = 48
* .sheet-head margin-left 20 → 题号左边缘 = 28+1+20 = 49 ... 需 19
* 统一取 19px，让两者都落在 48。
*/.sheet-head{
display: flex; align-items: center; flex-wrap: wrap;
padding-bottom: 14px; border-bottom: 1px solid #e2e8f0; margin-bottom: 20px;
margin-left: 19px;}
.sheet-head > * + *{margin-left:10px;}.sheet-no{
width: 26px; height: 26px; border-radius: 50%; background: #0f172a; color: #ffffff;
display:flex;align-items:center;justify-content:center; font-size: 13px; font-weight: 700; flex: none;
line-height: 1; box-sizing: border-box;
line-height:26px;text-align:center;}
.sheet-of { font-size: 13px; color: #5f6b7d; }
.sheet-type { font-size: 12px; color: #5f6b7d; margin-left: auto; }
.sheet-score {
font-size: 12px; color: #1d4ed8; background: #eff6ff;
padding: 2px 10px; border-radius: 99px; font-weight: 600;
}
/* 题干同一条基准线 */
.sheet-stem {
font-size: 26px; font-weight: 600; line-height: 1.5; margin: 0 0 24px 19px;
word-break: break-word;
}
.sheet-stem.cn { font-size: 24px; }.sheet-opts{ display: flex; flex-direction: column;}
.sheet-opts > * + *{margin-left:12px;}.sopt{
display: flex; align-items: center; padding: 15px 18px; border-radius: 12px;
border: 1px solid #e2e8f0; cursor: pointer; transition: .12s; background: #ffffff;
font-size: 17px;}
.sopt > * + *{margin-left:14px;}
.sopt:hover { border-color: #bfdbfe; background: #eff6ff; }
.sopt.active { border-color: #2563eb; background: #eff6ff; }.sopt-k{
width: 26px; height: 26px; border-radius: 50%;
border: 0; box-shadow: inset 0 0 0 1px #cbd5e1;
display:flex;align-items:center;justify-content:center; font-size: 13px; font-weight: 700;
color: #475569; flex: none; line-height: 1; box-sizing: border-box;
line-height:26px;text-align:center;}
.sopt.active .sopt-k { background: #2563eb; box-shadow: inset 0 0 0 1px #2563eb; color: #ffffff; }
.sopt-txt { flex: 1; }
/* 单题模式的输入框也缩进，保持同一条基准线 */
.sheet-input {
width: 100%; box-sizing: border-box; height: 54px; padding: 0 16px;
font-size: 20px; border: 1.5px solid #e2e8f0; border-radius: 12px;
font-family: inherit; outline: none;
}
.sheet-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
/* 底部导航（仅单题模式显示） */.exam-nav{
position: fixed; left: 0; right: 0; bottom: 0; z-index: 38;
background: #ffffff; border-top: 1px solid #e2e8f0;
padding: 10px 16px; display: none; align-items: center;
box-shadow: 0 -4px 20px rgba(15,23,42,.06);margin-top:-12px;margin-left:-12px;}
.exam-nav > *{margin-top:12px;margin-left:12px;}
.mode-single .exam-nav { display: flex; }
.enav-btn {
height: 40px; padding: 0 20px; border-radius: 10px; cursor: pointer; flex: none;
background: #ffffff; border: 1px solid #e2e8f0; color: #475569;
font-size: 14px; font-family: inherit;
}
.enav-btn:hover:not(:disabled) { border-color: #bfdbfe; color: #1d4ed8; }
.enav-btn:disabled { opacity: .45; cursor: not-allowed; }
.enav-primary {
background: #2563eb; border-color: #2563eb; color: #ffffff; font-weight: 600;
}
.enav-primary:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; color: #ffffff; }
.enav-progress { flex: 1; min-width: 0; }
.enav-bar { height: 6px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.enav-bar > i {
display: block; height: 100%; width: 0;
background: #2563eb; transition: width .25s;
}
.enav-txt { font-size: 12px; color: #5f6b7d; margin-top: 5px; text-align: center; }
.enav-txt b { color: #2563eb; }
/* 整卷模式：底部进度条 */
.exam-foot {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 38;
background: #ffffff; border-top: 1px solid #e2e8f0;
padding: 10px 20px 12px; box-shadow: 0 -4px 20px rgba(15,23,42,.06);
}
.ef-bar { height: 6px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.ef-bar > i {
display: block; height: 100%; width: 0;
background: #2563eb; transition: width .25s;
}
.ef-txt { font-size: 12px; color: #5f6b7d; margin-top: 6px; text-align: center; }
.ef-txt b { color: #2563eb; }
.mode-single .exam-foot { display: none; }
.mode-all .exam-foot { display: block; }
/* 整卷模式：底部只留一条进度条 */
.mode-all .exam-nav { display: none; }
.mode-all .exam-stage { padding-bottom: 96px; }
/* 答题卡抽屉 */.card-drawer-mask{
position: fixed; background: rgba(16,24,40,.42); z-index: 50;
opacity: 0; visibility: hidden; transition: .18s;top:0;right:0;bottom:0;left:0;}
.card-drawer-mask.open { opacity: 1; visibility: visible; }
.card-drawer {
position: fixed; top: 0; right: 0; bottom: 0; width: 330px; max-width: 88vw;
background: #ffffff; z-index: 51; display: flex; flex-direction: column;
transform: translateX(100%); transition: transform .22s ease;
box-shadow: -8px 0 32px rgba(15,23,42,.14);
}
.card-drawer.open { transform: translateX(0); }
.cd-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 18px; border-bottom: 1px solid #e2e8f0; flex: none;
}
.cd-title { font-weight: 700; font-size: 16px; }
.cd-close {
width: 40px; height: 40px; border-radius: 8px; cursor: pointer;
background: transparent; border: 0; color: #475569;
font-size: 20px; line-height: 1; flex: none;
}
.cd-close:hover { background: #eff6ff; color: #1d4ed8; }.cd-legend{
display: flex; padding: 12px 18px; flex: none;
font-size: 12px; color: #5f6b7d; border-bottom: 1px solid #e2e8f0;margin-top:-16px;margin-left:-16px;}
.cd-legend > *{margin-top:16px;margin-left:16px;}.cd-legend span{ display: flex; align-items: center;margin-top:-6px;margin-left:-6px;}
.cd-legend span > *{margin-top:6px;margin-left:6px;}
.lg { width: 12px; height: 12px; border-radius: 4px; display: block; }
.lg-done { background: #2563eb; }
.lg-cur { background: #ffffff; border: 2px solid #2563eb; }
.lg-todo { background: #e2e8f0; }.cd-grid{
flex: 1; overflow-y: auto; padding: 16px 18px;
display: flex; flex-wrap: wrap; align-content: flex-start;margin-top:-10px;margin-left:-10px;}
.cd-grid > *{margin-top:10px;margin-left:10px;}
.cd-n {
width: 44px; height: 40px; border-radius: 8px; cursor: pointer; font-family: inherit;
background: #f8fafc; border: 1.5px solid transparent; color: #475569;
font-size: 14px; font-weight: 600;
}
.cd-n:hover { border-color: #bfdbfe; }
.cd-n.done { background: #eff6ff; color: #1d4ed8; }
.cd-n.cur { border-color: #2563eb; background: #ffffff; color: #2563eb; }
.cd-foot { padding: 14px 18px; border-top: 1px solid #e2e8f0; flex: none; }
.cd-foot .btn { width: 100%; }
/* 窄屏适配（机房老显示器 1024×768） */
@media (max-width: 1100px) {
.et-meta { display: none}
.et-title { max-width: 30vw; }
}
@media (max-width: 760px) {
.et-card-txt { display: none}
.et-title { max-width: 26vw; font-size: 14px; }
.et-timer { font-size: 17px; min-width: 78px; padding: 3px 10px; }
.et-submit { padding: 0 14px; }
.sheet-single { padding: 20px 18px 24px; }
.sheet-stem { font-size: 22px; }
.sopt { font-size: 16px; padding: 13px 14px; }
}
/* ---- 结果页 ---- */
.result-hero { text-align: center; padding: 30px 20px; }
.score-big { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -2px; }
.score-big small { font-size: 18px; color: #5f6b7d; font-weight: 500; letter-spacing: 0; }
.score-sub { color: #475569; margin-top: 10px; font-size: 14px; }.kv{ display: flex; justify-content: center; margin-top: 20px; flex-wrap: wrap;}
.kv div { text-align: center; }
.kv b { display: block; font-size: 20px; }
.kv span { font-size: 12px; color: #5f6b7d; }
/* ---- 摸底报告 ----
* 学生交卷后最想知道「我词汇量什么水平」，不是「第 37 题答案是 C」。
* 所以报告放在结果页顶部，用大字号 + 条形图，一眼看懂。
*/
.rp-hero { text-align: center; padding: 8px 0 4px; }
.rp-big { font-size: 44px; font-weight: 800; line-height: 1.1; letter-spacing: -1.5px; color: #2563eb; }
.rp-big small { font-size: 16px; color: #5f6b7d; font-weight: 500; letter-spacing: 0; }
.rp-sub { font-size: 13px; color: #5f6b7d; margin-top: 2px; }.rp-kpis{ display: flex; justify-content: center; margin-top: 18px; flex-wrap: wrap;}
.rp-kpis div { text-align: center; min-width: 88px; }
.rp-kpis b { display: block; font-size: 19px; color: #0f172a; }
.rp-kpis span { font-size: 12px; color: #5f6b7d; }
.rp-note {
margin-top: 18px; padding: 12px 14px; border-radius: 8px;
background: #eff6ff; border: 1px solid #bfdbfe;
font-size: 13px; color: #1d4ed8; line-height: 1.7;
}.rp-row{ display: flex; align-items: center; padding: 7px 0;margin-top:-12px;margin-left:-12px;}
.rp-row > *{margin-top:12px;margin-left:12px;}
.rp-k { width: 70px; flex: none; font-size: 13px; color: #475569; }
.rp-bar { flex: 1; height: 8px; border-radius: 4px; background: #e2e8f0; overflow: hidden; }
.rp-bar i { display: block; height: 100%; border-radius: 4px; background: #2563eb; }
.rp-bar i.ok { background: #047857; }
.rp-bar i.warn { background: #b45309; }
.rp-bar i.bad { background: #b91c1c; }
/* 条形图右侧数值
*
* 宽度要放得下「词认识率 100%」这种最长的情况。
* 实测 78px 会换行（「词认识率」和「33.3%」分两行），
* 导致同一组里的行高不一致，看起来参差不齐。
* 加到 104px + nowrap，保证单行显示。
*/
.rp-v { width: 104px; flex: none; text-align: right; font-size: 12px; color: #475569; white-space: nowrap; }
.review-item { border-bottom: 1px solid #e2e8f0; padding: 14px 20px; }
.review-item:last-child { border-bottom: 0; }.review-item .rh{ display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 6px;}
.review-item .stem { font-weight: 600; font-size: 15px; }
.review-item .line { font-size: 13px; color: #475569; margin-top: 4px; }
.review-item .line b { color: #0f172a; }
.review-item .line .yours-bad { color: #b91c1c; }
.review-item .line .yours-ok { color: #047857; }
/* ---- 教师端布局 ---- */
.admin-shell { display: flex; min-height: calc(100vh - 58px); }.side{
width: 196px; flex: none; background: #ffffff; border-right: 1px solid #e2e8f0;
padding: 14px 10px; position:relative; top: 58px; height: calc(100vh - 58px); overflow: auto;
;}
/* 导航项：不用 emoji（Win7 IE11 会渲染成方块），用左侧色条标当前页 */
.nav-item {
position: relative;
display: flex; align-items: center; height: 38px; padding: 0 12px 0 14px;
border-radius: 4px;
cursor: pointer; color: #475569; font-size: 14px; margin-bottom: 2px; font-weight: 500;
transition: background-color .15s, color .15s;
}
.nav-item:hover { background: #f1f5f9; color: #0f172a; }
.nav-item.active { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.nav-item.active::before {
content: ''; position: absolute; left: 0; top: 9px; bottom: 9px;
width: 3px; border-radius: 0 2px 2px 0; background: #2563eb;
}
.nav-sep { height: 1px; background: #e2e8f0; margin: 10px 8px; }
/* 文件夹侧栏（试卷库左侧） */.folder-item{
display: flex; align-items: center; justify-content: space-between;
height: 34px; padding: 0 10px; border-radius: 4px;
cursor: pointer; color: #475569; font-size: 13px;
transition: background-color .15s, color .15s;margin-top:-8px;margin-left:-8px;}
.folder-item > *{margin-top:8px;margin-left:8px;}
.folder-item:hover { background: #f1f5f9; color: #0f172a; }
.folder-item.active { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.folder-item .folder-n {
font-size: 12px; color: #5f6b7d; flex: none;
min-width: 20px; text-align: right;
}
.folder-item.active .folder-n { color: #1d4ed8; }
.main { flex: 1; padding: 20px 22px 60px; min-width: 0; }.page-head{ display: flex; align-items: center; margin-bottom: 16px; flex-wrap: wrap;}
.page-head h2 { margin: 0; font-size: 19px; }
.page-head .spacer { flex: 1; }.grid-2{ display:flex;flex-wrap:wrap;margin-top:-12px;margin-left:-12px;}
.grid-2 > *{margin-top:12px;margin-left:12px;}
.grid-2 > *{flex:0 0 48%;box-sizing:border-box;}.grid-3{ display:flex;flex-wrap:wrap;margin-top:-12px;margin-left:-12px;}
.grid-3 > *{margin-top:12px;margin-left:12px;}
.grid-3 > *{flex:0 0 31%;box-sizing:border-box;}
@media (max-width: 980px) {
.grid-2, .grid-3 { grid-template-columns: 1fr}
.side { display: none; }
}.stat-cards{ display:flex;flex-wrap:wrap; margin-bottom: 16px;margin-top:-12px;margin-left:-12px;}
.stat-cards > *{margin-top:12px;margin-left:12px;}
.stat-cards > *{flex:0 0 calc(150px - 8px);box-sizing:border-box;}
.stat-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px; box-shadow: none; }
.stat-card .n { font-size: 26px; font-weight: 700; line-height: 1.2; }
.stat-card .l { font-size: 12px; color: #5f6b7d; margin-top: 2px; }
/* 权重编辑器 */.weight-row{ display: flex; align-items: center; padding: 7px 0;margin-top:-12px;margin-left:-12px;}
.weight-row > *{margin-top:12px;margin-left:12px;}
.weight-row.compact { padding: 3px 0; }
.weight-row.compact .input { height: 28px; }
#stageWeights { max-height: 268px; overflow-y: auto; padding-right: 6px; border-radius: 8px; }
#stageWeights::-webkit-scrollbar { width: 8px; }
#stageWeights::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
.weight-row .wn { width: 92px; flex: none; font-size: 14px; }
.weight-row .wbar { flex: 1; height: 8px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.weight-row .wbar > i { display: block; height: 100%; background: #2563eb; width: 0; transition: width .2s; }
.weight-row .wv { width: 74px; flex: none; }
.weight-row .input { height: 32px; text-align: right; padding: 0 8px; }
.weight-row .unit { font-size: 12px; color: #5f6b7d; width: 14px; }.sum-line{ display: flex; align-items: center; padding-top: 12px; margin-top: 8px; border-top: 1px dashed #e2e8f0; font-size: 13px;}
.sum-line b { font-size: 16px; }
.sum-line.bad b { color: #b91c1c; }
.sum-line.ok b { color: #047857; }
/* 题目预览 */.preview-q{ padding: 9px 0; border-bottom: 1px dashed #e2e8f0; font-size: 14px; display: flex;margin-top:-10px;margin-left:-10px;}
.preview-q > *{margin-top:10px;margin-left:10px;}
.preview-q:last-child { border-bottom: 0; }
.preview-q .pn { width: 24px; color: #5f6b7d; flex: none; text-align: right; }
.preview-q .pq { flex: 1; }
.preview-q .pa { color: #047857; font-size: 13px; }
.preview-q .pt { color: #5f6b7d; font-size: 12px; }
/* 机房监考看板 */.monitor-grid{ display:flex;flex-wrap:wrap;margin-top:-12px;margin-left:-12px;}
.monitor-grid > *{margin-top:12px;margin-left:12px;}
.monitor-grid > *{flex:0 0 calc(196px - 8px);box-sizing:border-box;}
/* 监考看板卡片
*
* 为什么去掉 border-left: 4px：
* impeccable 的 side-tab 规则把「卡片左侧粗色条」列为 AI 生成 UI 的最典型标志。
* 我们用 .mon-card 的左边条表示「考生状态」，但用颜色条表达状态本身就不清楚
* （绿色条是「在线」还是「已交卷」？）。
*
* 改成：状态用右上角的 tag 表示，卡片本身只有细边框。
*/
.mon-card {
border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; background: #ffffff;
transition: .15s;
}.mon-card .mn{ font-weight: 700; font-size: 15px; display: flex; align-items: center;}
.mon-card .mn > * + *{margin-left:6px;}
.mon-card .mc { font-size: 12px; color: #5f6b7d; margin-top: 1px; }.mon-card .ms{ font-size: 12px; color: #475569; margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center;}
.mon-card .ms > * + *{margin-left:6px;}
.mon-card.online { border-left-color: #2563eb; }
.mon-card.offline { border-left-color: #b45309; background: #ffffff; }
.mon-card.submitted { border-left-color: #047857; background: #ecfdf5; }
.mon-card.absent { border-left-color: #cbd5e1; opacity: .72; }
.mon-card .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.mon-card.online .dot { background: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.mon-card.offline .dot { background: #b45309; }
.mon-card.submitted .dot { background: #047857; }
.mon-card.absent .dot { background: #5f6b7d; }.live-badge{
display: inline-flex; align-items: center; font-size: 12px; color: #047857;
background: #ecfdf5; padding: 3px 10px; border-radius: 99px; font-weight: 600;}
.live-badge > * + *{margin-left:6px;}
.live-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #047857; }
/* 模态 */.modal-mask{
position: fixed; background: rgba(18,26,42,.42); z-index: 60;
display:flex;align-items:center;justify-content:center; padding: 20px; animation: fade .15s;top:0;right:0;bottom:0;left:0;}
@keyframes fade { from { opacity: 0 } }
.modal {
background: #ffffff; border-radius: 16px; box-shadow: 0 8px 32px rgba(15, 23, 42, .12);
width: 100%; max-width: 620px; max-height: 88vh; overflow: auto; animation: pop .18s;
}
@keyframes pop { from { transform: scale(.97); opacity: .6 } }
.modal-head { padding: 18px 22px; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-body { padding: 20px 22px; }.modal-foot{ padding: 14px 22px; border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end;margin-top:-10px;margin-left:-10px;}
.modal-foot > *{margin-top:10px;margin-left:10px;}
/* Toast */.toast-wrap{ position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 99; display:flex;flex-wrap:wrap;margin-top:-12px;margin-left:-12px;}
.toast-wrap > *{margin-top:12px;margin-left:12px;}
.toast-wrap > *{flex:0 0 48%;box-sizing:border-box;}
.toast {
padding: 10px 18px; border-radius: 10px; background: #0f172a; color: #ffffff; font-size: 14px;
box-shadow: 0 8px 32px rgba(15, 23, 42, .12); animation: drop .2s;
}
@keyframes drop { from { transform: translateY(-10px); opacity: 0 } }
.toast.ok { background: #047857; }
.toast.bad { background: #b91c1c; }
/* 登录页 */.login-wrap{ min-height: 100vh; display:flex;align-items:center;justify-content:center; padding: 20px; }
.login-box { width: 100%; max-width: 380px; background: #ffffff; border-radius: 18px; padding: 34px 30px; box-shadow: 0 8px 32px rgba(15, 23, 42, .12); }
.login-box h1 { margin: 0 0 6px; font-size: 21px; }
.login-box p { margin: 0 0 24px; color: #475569; font-size: 13px; }
@media (max-width: 620px) {
.q-stem { font-size: 17px}
.timer { font-size: 17px; }
.main { padding: 14px; }
}
/* h2 保持 h3 的视觉
*
* 为什么：
* 结果页有 测评结果
，后面直接是 逐题回顾
，
* impeccable 的 skipped-heading 规则会报「h1 后跳过 h2」。
* 改成 后语义正确，但视觉上要保持原样（h2 默认更大）。
*/
h2.h3-like { font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0; }
/* 相邻小按钮的间距：保证触摸目标不粘连 */
.btn-sm + .btn-sm { margin-left: 8px; }
/* 滚动题号浮标
*
* 为什么需要：
* 实测整卷模式 20 题需要滚 9.7 屏，每题 367px。
* 滚到中间时学生不知道自己在第几题。
*
* 为什么不改成「题号吸顶」：
* 吸顶会占掉 40px 高度，一屏能看的题从 2.2 降到 2.0，
* 反而更差。浮标是绝对定位，不占文档流。
*
* 位置：
* 右下角，避开顶栏（56px）和底部进度条。
* 只在整卷模式显示，单题模式不需要。
*/
.scroll-badge {
position: fixed; right: 20px; bottom: 76px; z-index: 25;
background: #0f172a; color: #ffffff;
padding: 8px 14px; border-radius: 999px;
font-size: 13px; font-weight: 600; line-height: 1;
box-shadow: 0 2px 8px rgba(15,23,42,.15);
opacity: 0; transition: opacity .2s; pointer-events: none;
}
.scroll-badge.show { opacity: 1; }
.mode-single .scroll-badge { display: none; }
/* 考试顶栏按钮：必须 ≥40px
*
* 实测：答题卡 84x34、单题模式 78x32、交卷 70x34 —— 都低于 40px。
* 这些都是考试中的关键操作，学生紧张时点不准会焦虑。
* 顶栏 56px 高，40px 按钮完全放得下。
*/
.exam-topbar .btn,
.exam-topbar button,
.et-right .btn,
.et-right button {
min-height: 40px;
min-width: 40px;
}
/* 答题卡抽屉里的题号格子
* 实测某个 30x30 —— 太小了，学生要点准很难。
* 改成 36x36（答题卡格子密集，40px 会撑开布局）。
*/
.cd-n {
min-width: 36px;
min-height: 36px;
}