/* ===== Irissat（Bluebook 复刻）样式（1103 按真实截图逐屏对齐） ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --blue-header: #e8edf6;      /* 顶栏浅蓝 */
  --blue-footer: #e7edf7;      /* 底栏 */
  --blue-primary: #384cc0;     /* Next/Back 按钮 / 主蓝 */
  --blue-deep: #1d225c;        /* PRACTICE 横幅 */
  --blue-selected: #384cc0;    /* 选中边框 */
  --yellow: #f8dc4a;           /* 黄色主按钮 */
  --opt-border: #8f8f96;
  --txt: #1a1a1a;
  --serif: Georgia, 'Times New Roman', 'Songti SC', serif;
  --sans: Roboto, -apple-system, 'Helvetica Neue', 'PingFang SC', sans-serif;
}

html, body { height: 100%; }
body {
  font-family: var(--sans);
  color: var(--txt);
  background: #fff;
  overflow: hidden;
}

.screen { display: none; height: 100vh; flex-direction: column; }
.screen.active { display: flex; }

/* ================= Code 输入页 ================= */
#screenCode {
  background: #4250cd;
  align-items: center; justify-content: center; position: relative;
}
.code-card {
  background: #fff; border-radius: 12px;
  width: 330px; padding: 36px 40px 40px;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  position: relative;
}
.code-card h1 {
  font-size: 24px; font-weight: 700; text-align: center;
  margin: 8px 0 28px; line-height: 1.3;
}
.code-card label { display: block; font-size: 13px; font-weight: 500; margin: 16px 0 6px; }
.code-card input {
  width: 100%; height: 42px; border: 1px solid #757575; border-radius: 6px;
  padding: 0 12px; font-size: 15px; font-family: var(--sans);
}
.code-card input:focus { outline: 2px solid var(--blue-primary); border-color: var(--blue-primary); }
.code-card .btn-submit {
  display: block; width: 100%; height: 42px; margin-top: 30px;
  background: var(--yellow); border: 1px solid #1a1a1a; border-radius: 21px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.code-card .btn-submit:disabled { opacity: .45; cursor: default; }
.code-err { color: #c62828; font-size: 13px; margin-top: 12px; min-height: 16px; }
/* 计时模式选择（Timed / Untimed）—— 在说明页（Practice Test）
   注意：此处不再是 .code-card 的后代，.code-card label 的 display:block 不会覆盖它 */
.mode-row {
  width: 660px; margin: 0 auto 20px; background: #fff; border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,.14); padding: 18px 44px 20px;
}
.mode-label { font-size: 13px; font-weight: 700; margin-bottom: 10px; display: block; }
.mode-opts { display: flex; gap: 12px; }
.mode-opt {
  flex: 1; display: flex; flex-direction: column; gap: 3px;
  border: 1.5px solid #757575; border-radius: 8px; padding: 10px 12px;
  cursor: pointer; position: relative; transition: border-color .12s, background .12s;
  background: #fff;
}
.mode-opt:hover { border-color: #4250cd; }
.mode-opt input { position: absolute; opacity: 0; pointer-events: none; }
.mode-opt:has(input:checked) { border-color: #4250cd; border-width: 2px; padding: 9.5px 11.5px; background: #f4f6ff; }
.mode-opt:has(input:disabled) { cursor: default; opacity: .55; }
.mode-name { font-size: 14px; font-weight: 600; display: block; }
.mode-desc { font-size: 11.5px; color: #555; display: block; line-height: 1.4; }
.mode-note { font-size: 12px; color: #6a5a10; margin-top: 10px; display: none; }
.mode-note.show { display: block; }
.vsn { position: absolute; bottom: 6px; right: 10px; font-size: 10px; color: #333; background: #eee; padding: 2px 6px; }

/* ================= 说明页（Practice Test 白卡） ================= */
#screenIntro { background: #fafafa; }
.intro-body { flex: 1; overflow-y: auto; }
.intro-body h1 { text-align: center; font-size: 28px; font-weight: 400; margin: 40px 0 26px; }
.intro-card {
  width: 660px; margin: 0 auto 40px; background: #fff; border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,.14); padding: 30px 44px 34px;
}
.intro-item { display: flex; gap: 16px; margin-bottom: 22px; }
.intro-item:last-child { margin-bottom: 0; }
/* 圆形灰色无边线底 + 黑色线状图标 */
.intro-ic {
  flex: 0 0 30px; height: 30px; border-radius: 50%;
  background: #dcdcdc; color: #111;
  display: flex; align-items: center; justify-content: center;
}
.intro-item h3 { font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.intro-item p { font-size: 13.5px; line-height: 1.5; color: #222; }
.intro-foot {
  height: 72px; background: #fff; border-top: 1px solid #e2e2e2;
  display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 0 28px;
}
/* 断点续存提示 */
.intro-resume {
  width: 660px; margin: -18px auto 34px; background: #fff8e1;
  border: 1px solid #f0d98a; border-radius: 8px; padding: 14px 18px;
  font-size: 13.5px; line-height: 1.6; color: #4a3d10;
}
/* 原版按钮高度：胶囊形、约 36px 高 */
.btn-nav {
  min-width: 80px; height: 36px; border-radius: 18px; border: none;
  background: var(--blue-primary); color: #fff; font-size: 14px; font-weight: 600;
  cursor: pointer; padding: 0 20px; font-family: var(--sans);
}
.btn-nav:disabled { background: #c3c8e8; cursor: default; }
.btn-back { background: #fff; color: var(--blue-primary); border: 1.5px solid var(--blue-primary); }

/* ================= 答题主界面 ================= */
#screenExam { background: #fff; }

/* 顶栏
   原版实测（截屏 11.36.16，2x÷2 − 30px 窗口标题栏）：页面内顶栏 0..77.5；
   标题文字 16..30；Directions 50..54；计时器中心 ≈23；Hide ≈53 */
.topbar {
  background: var(--blue-header);
  padding: 12px 17px 5px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  position: relative; z-index: 30;
}
/* 🔴 1105 21:35 用户标注（对照原版）：Directions 在标题**下一行**，不与标题同行 */
.tb-left { justify-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
/* 🔴 1105 13:50 用户裁定：返回箭头删除 —— 原版答题界面顶栏没有返回控件，
   真实考试里只有「继续答题」和 save and exit；本工具进度自动保存，关页即存。 */
.tb-title { font-size: 15px; font-weight: 700; line-height: 1.35; }
.tb-directions {
  background: none; border: none; font-size: 12.5px;
  cursor: pointer; color: #1a1a1a; font-family: var(--sans); font-weight: 700;
  display: flex; align-items: center; gap: 3px; padding: 0;
}
.tb-directions .caret { font-size: 12px; }
.tb-center { text-align: center; }
.tb-timer { font-size: 24px; font-weight: 700; letter-spacing: .5px; line-height: 1.15; }
.tb-timer.low { color: #c62828; }
/* 隐藏计时器后显示的秒表图标（原版 11-03 8.50.32） */
.tb-clock {
  display: none; justify-content: center; color: #8a8a8a;
  height: 28px; align-items: center;
}
.tb-clock.show { display: flex; }
/* 不计时模式标签 */
.tb-mode {
  display: inline-block; margin-top: 3px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .6px; color: #fff; background: #6b7280;
  border-radius: 3px; padding: 2px 6px;
}
/* Hide / Show 按钮：🔴 1104 21:40 用户裁定 —— **两种状态都不填白底**
   （原版 Show 是白底黑框，用户不要那个白块） */
.tb-hide {
  background: transparent; border: 1.5px solid #333; border-radius: 11px;
  font-size: 12px; font-weight: 700; padding: 2px 14px; margin-top: 7px; cursor: pointer;
  color: #1a1a1a; font-family: var(--sans); height: 24px;
}
.tb-hide.show-mode { background: transparent; border: 1.5px solid #333; font-weight: 800; }
.tb-right { justify-self: end; text-align: right; font-size: 11.5px; }
.tb-zoomrow { display: flex; align-items: center; justify-content: flex-end; gap: 7px; font-size: 12.5px; color: #111; margin-right: 34px; }
.tb-pct { font-weight: 600; }
/* 电池：长条矩形（非方形），左侧填充表示电量 */
.batt { display: inline-flex; align-items: center; gap: 1px; }
.batt-body {
  display: inline-block; width: 22px; height: 11px;
  border: 1.4px solid #111; border-radius: 2px; padding: 1.2px;
}
.batt-fill { display: block; height: 100%; width: 0; background: #111; }
.batt-cap {
  display: inline-block; width: 1.8px; height: 5px;
  background: #111; border-radius: 0 1px 1px 0;
}

/* 🔴 1103 21:20 右上角工具按钮（原版 11-03 8.56.39 / 8.51.44）
   图标在文字**上方**，浅蓝色块横向加宽；激活态文字下方加黑色下划线 */
.tb-links { display: flex; justify-content: flex-end; align-items: flex-start; gap: 12px; margin-top: 12px; }
.tb-tool {
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-family: var(--sans);
}
.tb-tool-ic {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: #d9e4f7; border-radius: 6px; padding: 0 14px; color: #1a1a1a;
  min-width: 56px; height: 31px;
}
.tb-tool-ic svg { display: block; flex: 0 0 auto; }
.tb-tool-ic-more { font-size: 20px; line-height: 1; padding: 0 14px; letter-spacing: 1px; }
.tb-tool-lb {
  font-size: 12.5px; font-weight: 700; color: #1a1a1a; white-space: nowrap;
  position: relative; padding-bottom: 3px;
}
.tb-tool.active .tb-tool-lb::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: #1e1e1e;
}

/* More 菜单（原版 11-03 8.51.44） */
.more-menu {
  position: fixed; z-index: 130; display: none;
  background: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.24);
  padding: 8px 0; min-width: 232px;
}
.more-menu.show { display: block; }
.mm-item {
  display: flex; align-items: center; gap: 16px; width: 100%;
  background: none; border: none; padding: 13px 24px; cursor: pointer;
  font-size: 16px; font-family: var(--sans); color: #1a1a1a; text-align: left;
}
.mm-item:hover { background: #f2f4fb; }
.mm-ic { flex: 0 0 22px; display: flex; align-items: center; justify-content: center; }

/* 高亮模式提示（原版 11-03 8.56.39：深灰气泡 + 指向上方的小三角） */
.hl-tip {
  position: fixed; z-index: 120; display: none;
  background: #3c3c3f; color: #fff; border-radius: 8px;
  padding: 12px 16px; font-size: 13px; line-height: 1.5; width: 176px;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.hl-tip.show { display: block; }
.hl-tip b { font-weight: 700; }
.hl-tip::before {
  content: ''; position: absolute; top: -7px; left: 50%; margin-left: -7px;
  width: 14px; height: 14px; background: #3c3c3f; transform: rotate(45deg);
}

/* Save and Exit 提示框 */
.modal-mask {
  position: fixed; inset: 0; z-index: 150; display: none;
  align-items: center; justify-content: center; background: rgba(0,0,0,.35);
}
.modal-mask.show { display: flex; }
.modal-card {
  background: #fff; border-radius: 10px; padding: 30px 34px; width: 420px;
  box-shadow: 0 10px 40px rgba(0,0,0,.3); text-align: center;
}
.modal-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.modal-card p { font-size: 13.5px; line-height: 1.6; color: #333; margin-bottom: 22px; }
.modal-card .btn-nav { display: inline-block; }

/* 黑色粗虚线分隔条
   原版实测（截屏 9.01.23，2x）：周期 47px 黑 43 / 白 4 → CSS 黑 21.5 / 白 2 */
.dash-sep {
  height: 2px; margin: 0;
  background-image: repeating-linear-gradient(90deg, #1c1c1d 0 21.5px, #ffffff 21.5px 23.5px);
  background-repeat: repeat-x;
}
.dash-top { margin: 0; }

/* PRACTICE 横幅：深蓝 #1c2260、左右边距 40 CSS、底部圆角 14
   🔴 1103 21:20 去掉上沿白色小虚线（原版深蓝块上没有白虚线） */
/* 🔴 1105 19:05 用户裁定：6.13.28 原版截图 —— 深蓝横幅**左右各留 ~40px、底部两角圆 14px**，
   就是原版样子（此前改成通栏是误判，恢复原样并按原版微调） */
.practice-banner {
  background: var(--blue-deep); color: #fff;
  border-radius: 0 0 14px 14px; margin: 0 34px;
  text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .6px;
  padding: 10px 0 9px;
}

/* 主分栏
   原版实测（截屏 11.36.16，−30 标题栏）：中缝 x=754；左栏正文首行 y=151、左边界 x=41.5 */
.split { flex: 1; display: flex; min-height: 0; position: relative; }
.pane-left {
  width: 50%; overflow-y: auto; padding: 39px 34px 40px 41px;
  font-family: var(--serif); font-size: 16px; line-height: 1.55;
}
.pane-left p { margin-bottom: 14px; }
.pane-left .txt-label { font-family: var(--sans); font-weight: 700; font-size: 14px; margin: 18px 0 4px; }

/* 🔴 正文段落：空行分段→独立 <p>；块内单换行（诗句/引文）用 pre-wrap 原样保留 */
.txt-body { }
.txt-body .txt-para { white-space: pre-wrap; margin: 0 0 14px; }
.txt-body .txt-para:last-child { margin-bottom: 0; }

/* 🔴 RS 三段式：引言一段 + bullet 每条独立成行 */
.rs-notes { font-family: var(--serif); font-size: 16px; line-height: 1.55; }
.rs-notes .rs-intro { margin-bottom: 14px; }
.rs-notes .rs-bullet {
  display: flex; gap: 10px; margin: 0 0 12px; padding-left: 4px;
}
.rs-notes .rs-dot {
  flex: 0 0 auto; width: 9px; color: #1a1a1a; font-size: 16px; line-height: 1.45;
}
.rs-notes .rs-text { flex: 1; }
.gutter {
  flex: 0 0 5px; background: #e6e6e6; cursor: col-resize; position: relative;
}
.gutter::after {
  content: '⇔'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff; border: 1px solid #999; border-radius: 50%;
  width: 16px; height: 16px; font-size: 10px; line-height: 15px; text-align: center; color: #333;
}
.pane-right { width: 50%; overflow-y: auto; padding: 37px 0 30px 0; }

/* 右栏题头：黑色直角题号方块 + 灰色条（虚线在灰条正下方，与灰条等宽）
   🔴 1103 21:20：灰条右缘与选项区右缘对齐（padding-right 105 = .opts 同值），
      黑色虚线改成灰条内的绝对定位元素 → 宽度自动＝灰条宽度 */
.q-head {
  display: flex; align-items: stretch; background: #fff;
  padding: 0 105px 0 37px;
}
/* 题号：非圆角矩形、黑底白字、无白底 */
.q-num {
  background: #000; color: #fff; font-weight: 700; font-size: 15px;
  width: 26px; height: 32.5px; border-radius: 0; margin: 0;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
/* 灰色条：独立一条，不与深蓝横幅相贴；虚线贴在灰条底沿 */
.q-head-bar {
  position: relative;
  flex: 1; background: #f0f0f0; display: flex; align-items: center; gap: 12px;
  height: 32.5px; padding: 0 12px; margin-left: 0;
}
/* Mark for Review：默认**无下划线**、图标不填充；标记后 → 红色填充 + 黑色描边 + 文字下划线
   红色取值：原版截屏 9.01.23 实测 rgb(157,48,56) = #9D3038 */
.q-flagbtn {
  background: none; border: none; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; gap: 8px; color: #1a1a1a; font-family: var(--sans);
  font-weight: 700; padding: 0;
}
.q-flagbtn .flag-txt { text-decoration: none; }
.q-flagbtn.flagged .flag-txt { text-decoration: underline; text-underline-offset: 3px; }
.q-flagbtn .flag-svg { display: block; }
.q-flagbtn .flag-fill { fill: transparent; }
.q-flagbtn .flag-line { stroke: #444; }
.q-flagbtn.flagged .flag-fill { fill: #9D3038; }
.q-flagbtn.flagged .flag-line { stroke: #000; }
/* ABC 划除开关：🔴 1105 用户裁定「边框是黑色」——白底黑框黑字黑斜杠＝已选中；
   取消选中＝同样白底黑框但**不显示斜杠**，且选项上的删除标记一并隐藏 */
.q-abc {
  position: relative; margin-left: auto;
  background: #fff; border: 1.5px solid #111; border-radius: 6px;
  color: #111; font-size: 11.5px; font-style: normal; font-weight: 700;
  letter-spacing: .2px; padding: 4px 9px; cursor: pointer; font-family: var(--sans);
}
.q-abc .abc-slash { display: none; }
.q-abc::after {
  content: ''; position: absolute; left: -2px; right: -2px; top: 50%;
  height: 1.8px; background: currentColor; transform: rotate(-45deg);
}
.q-abc.off::after { display: none; }
/* q-head 下方黑色虚线：贴在灰条底沿，宽度＝灰条宽度 */
.q-head-dash {
  position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background-image: repeating-linear-gradient(90deg, #1c1c1d 0 21.5px, #ffffff 21.5px 23.5px);
  background-repeat: repeat-x;
}
.q-stem { font-family: var(--sans); font-size: 14.5px; line-height: 1.5; padding: 14px 42px 0 37px; }

/* 选项
   原版实测（截屏 11.36.16）：选项框 x 796..1407（宽 611）；右栏内容左边距 37 CSS */
.opts { padding: 14px 105px 0 37px; }
/* 每行：选项框 + 右侧固定槽（46px）→ 划除/选中都不改变选项框宽度 */
.opt-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.opt {
  flex: 1; max-width: 611px; background: #fff; border: 1.5px solid var(--opt-border); border-radius: 9px;
  padding: 11px 14px; font-size: 14.5px; line-height: 1.45; cursor: pointer;
  display: flex; gap: 12px; font-family: var(--sans);
  transition: border-color .1s;
}
.opt .opt-letter {
  flex: 0 0 24px; height: 24px; border: 1.5px solid #444; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 500; margin-top: 1px;
}
.opt.sel { border: 2px solid var(--blue-selected); padding: 10.5px 13.5px; }
.opt.sel .opt-letter { background: var(--blue-selected); border-color: var(--blue-selected); color: #fff; }
/* 划除：原版截屏 11.37.25 —— 一条**贯穿整个选项框**的长横线（不是只划文字），
   选项框宽度/高度不变，文字与字母圈变灰，右侧 ⊘ 图标换成 Undo 文字。
   🔴 1103 21:20：横线加粗到 2px、颜色加深，并左右各超出选项框 9px（原版长线略出头） */
.opt.elim { cursor: default; position: relative; }
.opt.elim::after {
  content: ''; position: absolute; left: -9px; right: -9px; top: 50%;
  border-top: 2px solid #4a4a4a; pointer-events: none;
}
.opt.elim .opt-letter { color: #b0b0b0; border-color: #b0b0b0; }
.opt.elim .opt-text { color: #9a9a9a; }
/* 右侧槽：划除图标 ↔ Undo 文字（槽宽固定 46px → 划除前后选项框宽度完全一致） */
.opt-slot {
  flex: 0 0 46px; display: flex; align-items: center; justify-content: center;
}
/* 🔴 1103 21:20：圆圈里是「选项字母 + 斜删除线」，hover 变小手（不是文本 I 型光标） */
.opt-ic {
  position: relative; width: 26px; height: 26px; padding: 0; margin: 0;
  border: 1.5px solid #555; border-radius: 50%; background: #fff; color: #555;
  cursor: pointer; font-size: 12px; font-weight: 600; font-family: var(--sans);
  display: flex; align-items: center; justify-content: center;
}
.opt-ic::after {
  /* 🔴 1104 09:40 原版是「水平」删除线（横穿字母中部），不是斜线 */
  content: ''; position: absolute; left: -3px; right: -3px; top: 50%;
  height: 1.6px; background: currentColor; transform: translateY(-50%);
}
.opt-ic:hover { border-color: #111; color: #111; }
/* 划除模式关闭（ABC 未选中）：只留字母、无斜杠、不可点 */
.opt-ic.off { color: #c2c2c2; border-color: #dcdcdc; cursor: default; }
.opt-ic.off::after { display: none; }
.opt-row.row-sel .opt-ic { border-color: var(--blue-selected); color: var(--blue-selected); }
.opt-undo {
  background: none; border: none; font-size: 13px;
  text-decoration: underline; cursor: pointer; color: #1a1a1a; font-family: var(--sans);
  text-align: center; white-space: nowrap;
}

/* 高亮 mark */
.pane-left mark { padding: 0 1px; }
mark.hl-yellow { background: #f6e79e; }
mark.hl-blue { background: #a9c8f2; }
mark.hl-pink { background: #f4b9c6; }
mark.hl-under { background: transparent; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* 高亮工具条（原版 11-03 8.57.48：高亮笔 / 蓝 / 粉 / U+chevron / 垃圾桶 / 分隔线 / 便签） */
.hl-tools {
  position: fixed; z-index: 90; display: none;
  background: #fff; border-radius: 16px; box-shadow: 0 2px 14px rgba(0,0,0,.22);
  border: 1px solid #e4e4e7;
  padding: 6px 11px; align-items: center; gap: 7px;
}
.hl-tools.show { display: flex; }
.hl-tools button {
  cursor: pointer; background: none; border: none; padding: 0;
  font-family: var(--sans); color: #1a1a1a; display: flex; align-items: center;
}
/* 🔴 用 .hl-tools 前缀提高优先级：否则上面的 button 规则会把背景/边框覆盖掉 */
.hl-tools .hl-pen {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid #b9b9b9; justify-content: center;
}
.hl-tools .hl-pen:hover { border-color: #8a8a8a; }
.hl-tools /* 🔴 1105 19:30 用户裁定：色块边线细一点 */
.hl-dot { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #1a1a1a; }  /* 🔴 1105 黑色细边框 */
/* 🔴 1104 09:40 高光三色统一为「同规格圆点」：黄/蓝/粉 都是实心圆 + 灰边
   （原来黄色用的是笔形图标，只有蓝粉是圆点 → 视觉不齐） */
.hl-tools .hl-dot-yellow { background: #fbe38a; }
.hl-tools .hl-dot-blue { background: #bcd6f5; }
.hl-tools .hl-dot-pink { background: #f2c0cd; }
/* 🔴 1105 用户裁定：U 图标的横线放在 U 下面（上下叠放），下拉箭头在右侧居中 */
.hl-tools .hl-u { gap: 3px; padding: 0 4px; }
.hl-tools .hl-u .uw { display: flex; flex-direction: column; align-items: center; gap: 1.5px; }
.hl-tools .hl-u .u { font-size: 15px; font-weight: 600; line-height: 1; }
.hl-tools .hl-u .u-line { width: 14px; height: 1.6px; background: #1a1a1a; margin-top: 0; }
.hl-tools .hl-trash { color: #1a1a1a; }  /* 🔴 1105 hl-note 按钮已删（note 功能还没有） */
.hl-tools .hl-sep { width: 1px; height: 24px; background: #dcdcdc; margin: 0 3px; }

/* 图表缩放工具条 */
.img-wrap { position: relative; max-width: 100%; margin-bottom: 20px; }
.img-wrap img { width: 100%; display: block; }
.zoom-bar {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  background: #3c3c3f; color: #fff; border-radius: 8px;
  display: flex; align-items: center; gap: 4px; padding: 4px 8px;
  font-size: 12px; opacity: 0; transition: opacity .15s;
}
.img-wrap:hover .zoom-bar { opacity: 1; }
.zoom-bar button {
  background: none; border: none; color: #fff; font-size: 14px; cursor: pointer;
  padding: 2px 7px; font-family: var(--sans);
}
.zoom-bar .zlabel { min-width: 38px; text-align: center; }
#imgOverlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 200;
  display: none; align-items: center; justify-content: center; cursor: zoom-out;
}
#imgOverlay.show { display: flex; }
#imgOverlay img { max-width: 92%; max-height: 92%; }

/* Directions 弹层：白底面板 + 黄色 Close
   🔴 1103 21:20 加白色小三角 → 表示这个提示是左侧 Directions 按钮的内容 */
.dir-overlay { position: fixed; inset: 0; z-index: 80; display: none; }
.dir-overlay.show { display: block; }
.dir-panel {
  position: absolute; top: 84px; left: 30px; right: 44%;
  background: #fff; box-shadow: 4px 4px 14px rgba(0,0,0,.28);
  padding: 26px 30px 56px; font-family: var(--serif); font-size: 15px; line-height: 1.55;
}
.dir-arrow {
  position: absolute; top: -9px; left: 44px; width: 18px; height: 18px;
  background: #fff; transform: rotate(45deg);
  filter: drop-shadow(-2px -2px 2px rgba(0,0,0,.16));
}
.dir-panel p { margin-bottom: 12px; }
.dir-close {
  position: absolute; right: 22px; bottom: 16px;
  background: var(--yellow); border: none; border-radius: 16px;
  padding: 7px 20px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}

/* 底栏
   原版实测（截屏 11.36.16，−30 标题栏）：虚线 y=767；浅蓝 769..823.5（高 54.5） */
.bottombar {
  background: var(--blue-footer); height: 55px;
  display: flex; align-items: center; padding: 0 20px;
  position: relative; z-index: 30;
  border-top: 2px solid transparent;
  background-image: repeating-linear-gradient(90deg, #1c1c1d 0 21.5px, #ffffff 21.5px 23.5px),
                    linear-gradient(var(--blue-footer), var(--blue-footer));
  background-size: 100% 2px, 100% 100%;
  background-position: top left, top left;
  background-repeat: repeat-x, no-repeat;
}
.bb-name { font-size: 15px; font-weight: 700; }
.bb-qpill {
  position: absolute; left: 50%; transform: translateX(-50%);
  background: #1c1c1e; color: #fff; border: none; border-radius: 9px;
  font-size: 12.5px; font-weight: 600; padding: 8px 16px; cursor: pointer;
  display: flex; align-items: center; gap: 8px; font-family: var(--sans);
}
.bb-nav { margin-left: auto; display: flex; gap: 12px; }
.bb-next {
  min-width: 72px; height: 33px; border-radius: 17px; border: none;
  background: var(--blue-primary); color: #fff; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: var(--sans);
}

/* 题号导航弹窗 */
/* 原版实测（截屏 11.38.18，2x÷2）：白卡 x=510..1002（宽 492）；格子 29×29 CSS；中心距 45 */
.qnav-mask { position: fixed; inset: 0; z-index: 100; display: none; }
.qnav-mask.show { display: block; }
.qnav-panel {
  position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%);
  width: 492px; background: #fff; border-radius: 10px;
  box-shadow: 0 4px 22px rgba(0,0,0,.3); padding: 20px 24px 22px;
}
.qnav-panel h3 { font-size: 15px; font-weight: 700; text-align: center; line-height: 1.35; position: relative; padding: 0 20px; }
.qnav-panel h3 .x {
  position: absolute; right: -8px; top: -2px; background: none; border: none;
  font-size: 16px; cursor: pointer;
}
.qnav-legend {
  display: flex; justify-content: center; gap: 20px; font-size: 11.5px;
  margin: 14px 0 16px; border-bottom: 1px solid #e3e3e3; padding-bottom: 14px;
}
.qnav-legend span { display: inline-flex; align-items: center; gap: 5px; }
.lg-ic { display: block; flex: 0 0 auto; }
/* 格子：方形 29×29、黑色虚线边框、中心距 45 */
.qnav-grid { display: grid; grid-template-columns: repeat(10, 29px); gap: 24px 16px; padding: 0; justify-content: center; }
.qnav-cell {
  position: relative; width: 29px; height: 29px;
  border: 1.4px dashed #111; color: var(--blue-primary); background: #fff; border-radius: 0;
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--sans);
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.qnav-cell.ans { background: var(--blue-primary); color: #fff; border-style: solid; border-color: var(--blue-primary); }
/* 当前题：上方定位图标 + 题号下划线 */
.qnav-cell.cur { border-color: #111; }
.qnav-cell.cur .cell-num { text-decoration: underline; text-underline-offset: 3px; }
.qnav-pin {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  width: 15px; height: 15px; pointer-events: none;
}
/* mark 旗标：红书签 + **白色粗边线**（🔴 1104 21:40 用户裁定：加粗才看得出来） */
.qnav-cell .mini-flag {
  position: absolute; top: -8px; right: -8px; width: 14px; height: 16px;
  background: #b03a2e;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'><path d='M1 0.8h10v13.4L6 10.4 1 14.2Z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'><path d='M1 0.8h10v13.4L6 10.4 1 14.2Z'/></svg>") center/contain no-repeat;
  /* 白色粗边线：八方向实心描边（比原来的 1.2px 模糊阴影明显得多） */
  filter:
    drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff)
    drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
    drop-shadow(1.5px 1.5px 0 #fff) drop-shadow(-1.5px 1.5px 0 #fff)
    drop-shadow(1.5px -1.5px 0 #fff) drop-shadow(-1.5px -1.5px 0 #fff);
}
.qnav-review { text-align: center; margin-top: 18px; }
.qnav-review button {
  background: #fff; border: 1.5px solid var(--blue-primary); color: var(--blue-primary);
  border-radius: 16px; padding: 7px 18px; font-size: 13px; cursor: pointer;
}

/* ================= Check Your Work 页 ================= */
/* 原版实测（截屏 11.39.33，2x 像素 ÷2 得 CSS）：
   白卡 x=373..1139（宽 766）；格子 39×39 CSS；中心距 72（格间距 33）；卡片内边距 32/40 */
#screenCheck { background: #fafafa; }
.check-body { flex: 1; overflow-y: auto; text-align: center; }
.check-body h1 { font-size: 28px; font-weight: 400; margin: 40px 0 20px; }
.check-body .note { font-size: 14px; line-height: 1.75; color: #333; margin-bottom: 26px; }
.check-card {
  width: 766px; margin: 0 auto 40px; background: #fff; border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,.14); padding: 26px 35px 34px; text-align: left;
}
.check-card-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e3e3e3; padding-bottom: 16px; }
.check-card-head h2 { font-size: 15.5px; font-weight: 700; }
.check-card-head .legend { display: flex; gap: 16px; font-size: 11.5px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.check-grid { display: grid; grid-template-columns: repeat(10, 39px); gap: 33px; margin: 22px 0 0 0; justify-content: flex-start; }
.check-cell {
  position: relative; width: 39px; height: 39px;
  border: 1.6px dashed #111; color: var(--blue-primary); background: #fff; border-radius: 0;
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--sans);
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.check-cell.ans { background: var(--blue-primary); color: #fff; border-style: solid; border-color: var(--blue-primary); }
.check-cell .mini-flag {
  position: absolute; top: -7px; right: -7px; width: 13px; height: 15px;
  background: #b03a2e;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'><path d='M1 0.8h10v13.4L6 10.4 1 14.2Z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'><path d='M1 0.8h10v13.4L6 10.4 1 14.2Z'/></svg>") center/contain no-repeat;
  filter: drop-shadow(0 0 1.2px #fff) drop-shadow(0 0 1.2px #fff);
}

/* ================= This Module Is Over ================= */
#screenOver { background: #fff; align-items: center; justify-content: center; text-align: center; }
#screenOver h1 { color: #5b63d5; font-size: 26px; font-weight: 500; margin-bottom: 24px; }
#screenOver p { font-size: 15px; line-height: 1.9; }
.spinner { margin-top: 40px; width: 34px; height: 34px; border-radius: 50%;
  border: 4px solid transparent; border-top-color: #222; border-right-color: #222; border-bottom-color: #222;
  animation: spin 1s linear infinite; margin-left: auto; margin-right: auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ================= All Finished ================= */
#screenDone { background: #2a2f7d; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.done-title { color: #fff; font-size: 30px; font-weight: 500; margin-bottom: 40px; }
.done-card {
  background: #fff; border-radius: 6px; width: 520px; display: flex; align-items: center;
  padding: 34px 0; box-shadow: 0 3px 14px rgba(0,0,0,.3);
}
.done-ic { flex: 0 0 46%; display: flex; justify-content: center; align-items: center; font-size: 84px; }
.done-card .divider { width: 1px; align-self: stretch; background: #ddd; }
.done-card .txt { padding: 0 30px; font-size: 15px; line-height: 1.6; }
.done-btn {
  display: block; margin: 34px auto 0; background: var(--yellow); border: none;
  border-radius: 19px; padding: 11px 24px; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.done-meta { color: #b9bdf0; font-size: 12px; margin-top: 26px; text-align: center; line-height: 1.7; }
.confetti { position: absolute; width: 7px; height: 10px; opacity: .85; border-radius: 1px; animation: fall linear infinite; }
@keyframes fall { from { transform: translateY(-6vh) rotate(0); } to { transform: translateY(110vh) rotate(340deg); } }