/* ============ 全局 ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: font-size: 16px;
  background: #ffffff;
  color: #1f2937;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.hidden { display: none !important; }

/* ============ 启动页 ============ */
.start-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #1e3a8a 0%, #312e81 100%);
}
.start-card {
  background: #fff;
  padding: 48px;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  max-width: 800px;
  width: 90%;
  text-align: center;
}
.start-card h1 {
  font-size: 32px;
  margin-bottom: 8px;
  color: #1e3a8a;
}
.start-card .subtitle {
  color: #6b7280;
  margin-bottom: 32px;
}
.info-row {
  display: flex;
  gap: 20px;
  margin-bottom: 32px;
}
.info-block {
  flex: 1;
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px 16px;
}
.info-block:hover { border-color: #1e3a8a; }
.info-icon { font-size: 36px; margin-bottom: 8px; }
.info-title {
  font-size: 18px;
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: 6px;
}
.info-meta {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}
.start-actions { margin-bottom: 16px; }
.start-tip { font-size: 12px; color: #9ca3af; }
.btn-primary {
  background: #1e3a8a;
  color: #fff;
  border: none;
  padding: 14px 48px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-primary:hover { background: #1e40af; }
.btn-secondary {
  background: #e5e7eb;
  color: #1f2937;
  border: none;
  padding: 8px 20px;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
}

/* ============ 考试主界面 ============ */
.exam-screen {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}
/* 9-03 mel: review 模式 — exam-screen 占满视口, 单一滚动条
   iframe 整体只展示一个滚动条 (在 exam-screen 内), 不在 body 也不在 main.page 上 */
body.review-mode .exam-screen {
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;  /* 唯一滚动条位置 */
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
/* review 模式: main.page 全部 inline block (不限制自身高度), 让 exam-screen 整体滚 */
body.review-mode main.page,
body.review-mode #listeningPage,
body.review-mode #readingPage,
body.review-mode #writingPage {
  display: block !important;
  position: relative !important;
  visibility: visible !important;
  flex: none !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  padding: 16px !important;
  width: 100% !important;
  /* 写作区 page 之间空隙, 阅读用实线分隔 */
  margin-bottom: 24px;
}
/* 9-04 mel: PDF 打印模式 (printpdf=1) — 把视口滚动容器撑开成完整文档, 否则只打印一屏
   关键: exam-screen 的 height:100vh + overflow-y:auto 是"唯一滚动条",
   打印时必须解除, 让内容自然撑高, Chrome 才会按内容分页 */
body.print-pdf,
body.print-pdf html {
  height: auto !important;
  overflow: visible !important;
}
body.print-pdf .exam-screen {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
}
body.print-pdf main.page {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
body.print-pdf .split-panel .left-panel,
body.print-pdf .split-panel .right-panel {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
body.print-pdf .single-panel {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
/* 9-04: 兜底 — 任何嵌套的滚动容器/限高元素全部撑开 (防止漏网的内部滚动区只打印一屏) */
body.print-pdf * {
  max-height: none !important;
  overflow: visible !important;
}
/* 打印时隐藏浮动音频播放器 (卷子里不需要) */
body.print-pdf #yasi-floating-players,
body.print-pdf .top-bar,
body.print-pdf .bottom-bar,
body.print-pdf #yasi-debug-bar {
  display: none !important;
}
/* review 模式: 阅读和写作的 split-panel 上下排 */
body.review-mode .split-panel {
  display: block !important;
  flex-direction: column !important;
}
body.review-mode .split-panel .left-panel,
body.review-mode .split-panel .right-panel {
  width: 100% !important;
  max-width: 100% !important;
  border-right: none !important;
  border-bottom: 1px solid #E5E7EB;
  margin-bottom: 16px;
}
/* review 模式 - 听力 4 part 之间的导航隐藏 (用不到, 全部展开) */
body.review-mode .part-nav,
body.review-mode .reading-nav,
body.review-mode .writing-nav { display: none !important; }

/* 顶部 */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: #1e3a8a;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  flex-shrink: 0;
}
.top-left, .top-center, .top-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-tabs { display: flex; gap: 4px; }
.section-tabs .tab {
  background: transparent;
  color: rgba(255,255,255,0.7);
  border: none;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.section-tabs .tab.active {
  background: rgba(255,255,255,0.2);
  color: #fff;
}
.timer {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}
.timer-label {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
}
.timer.warning { color: #fca5a5; }
.top-btn {
  background: transparent;
  color: #fff;
  border: none;
  padding: 6px 10px;
  font-size: 18px;
  border-radius: 6px;
  cursor: pointer;
}
.top-btn:hover { background: rgba(255,255,255,0.1); }
.volume-slider {
  width: 100px;
  cursor: pointer;
}

/* 主体 */
main.page {
  flex: 1;
  overflow: hidden;
  display: flex;
}
.single-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow-y: auto;
}
.question-panel {
  width: 100%;
  max-width: 900px;
}
.question-content { padding: 16px 0; }
.placeholder {
  color: #9ca3af;
  text-align: center;
  padding: 80px 0;
}

/* 9-03 mel: 听力 debug 诊断面板 (默认隐藏, 点工具栏按钮才出来) */
#yasi-debug-bar {
  position: fixed;
  top: 60px;             /* top-bar 下方 */
  right: 12px;
  width: 340px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  background: #FEF3C7;  /* 浅黄色警示色, 让 mel 一眼看到 */
  border: 2px solid #F59E0B;
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 60;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
#yasi-debug-bar.hidden { display: none; }
#yasi-debug-bar .yasi-debug-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #92400E;
}

/* 9-03 mel: 听力播放器 (浮出 column 容器, 绝对定位浮在屏幕底部) */
#yasi-floating-players {
  position: fixed;
  bottom: 56px;          /* 在 bottom-bar 上方 */
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  max-width: 92vw;
  background: #fff;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.1);
  z-index: 50;
}
#yasi-floating-players .yasi-player-fixed audio {
  /* 保证 audio 控件可见且不被 column 算法干扰 */
  width: 100% !important;
  display: block;
  pointer-events: auto;
}

/* 9-05 mel: 听力区 - 单栏居中显示, 不再分左右; 一页装不下右侧出滚动条 */
.yasi-page-flow {
  display: block;
  overflow: visible;       /* 让 part-section 自己管滚动, 不要父容器裁掉 */
  /* 9-03 mel: autoFit 缩字号用, JS 会根据是否溢出从 16→15→14 步进 */
  font-size: var(--yasi-listening-font, 16px);
}
.yasi-page-flow .lst-paper,
.yasi-page-flow .lst-instr,
.yasi-page-flow .lst-table,
.yasi-page-flow .lst-title,
.yasi-page-flow .lst-gap,
.yasi-page-flow .lst-choice-q,
.yasi-page-flow .lst-choice-opt,
.yasi-page-flow .lst-match-box,
.yasi-page-flow .lst-part-header,
.yasi-page-flow .lst-scene {
  font-size: inherit;       /* 全部跟父级 .yasi-page-flow 的 var 走, 一改全改 */
}
.yasi-page-flow > .yasi-part-section {
  display: block;
  /* 9-05 mel: 不再 CSS Columns 分左右半屏, 单栏直接居中显示 */
  column-count: 1;
  width: 100%;
  max-width: 100%;
  padding: 0 16px;          /* 单栏居中: 留左右白边 */
  box-sizing: border-box;
  /* 9-05 mel: 一页装不下时右侧出滚动条 */
  overflow-y: auto;
  overflow-x: hidden;
  /* 内容高度由子元素决定, 不强制 100% (否则滚动条不出现) */
  height: auto;
}
.yasi-page-flow > .yasi-part-section > .lst-paper {
  width: 100%;
  max-width: 720px;         /* 单栏居中: 限定最大宽度, 太宽看着散 */
  margin: 0 auto;           /* 真正居中 */
  border-radius: 0;
  box-shadow: none;
}

/* 左右分屏 (阅读/写作仍用) */
.split-panel {
  flex: 1;
  display: flex;
  gap: 1px;
  background: #e5e7eb;
  overflow: hidden;
}
.left-panel, .right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}
.panel-header {
  padding: 12px 20px;
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
  font-weight: 600;
  color: #1e3a8a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  line-height: 1.7;
}
.passage-text ::selection {
  background: #fef08a;
  color: #1f2937;
}
/* 9-06 mel: 阅读 passage 持久高亮 (跟原生 ::selection 区分, 用更鲜的橙黄色 + 圆角) */
.passage-text mark.yasi-hl {
  background: #FACC15;   /* 比 ::selection 的 #fef08a 深一点, 一眼能看出是"我标记的" */
  color: #1f2937;
  padding: 1px 2px;
  border-radius: 2px;
  cursor: text;
}

/* 9-06 mel: 阅读高亮浮动菜单 (mouseup / contextmenu 都用这一个) */
.yasi-hl-menu {
  position: fixed;
  z-index: 999998;            /* 跟 login 遮罩 (999999) 差一级, 不抢 z-index 之王 */
  background: #fff;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  padding: 4px;
  display: flex;
  flex-direction: column;
  min-width: 140px;
}
.yasi-hl-menu.hidden { display: none; }
.yasi-hl-menu-item {
  background: transparent;
  border: none;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  color: #1f2937;
  cursor: pointer;
  border-radius: 4px;
  font-family: inherit;
}
.yasi-hl-menu-item:hover {
  background: #F3F4F6;
}
.yasi-hl-menu-item.danger { color: #B91C1C; }
.yasi-hl-menu-item.danger:hover { background: #FEE2E2; }

/* 写作区 */
.writing-input {
  flex: 1;
  width: 100%;
  border: none;
  padding: 20px 24px;
  font-size: 15px;
  line-height: 1.7;
  resize: none;
  font-family: inherit;
  outline: none;
}
.word-count {
  background: rgba(0,0,0,0.05);
  color: #4b5563;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: normal;
}
/* 9-03: 写作 task tab 已搬到 footer (#writingTaskNav), 不再需要 .writing-tabs 绝对定位样式 */

/* 底部 */
.bottom-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.nav-btn {
  background: #fff;
  border: 1px solid #d1d5db;
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-btn:hover { background: #f3f4f6; }
/* 9-06 mel: Part 按钮选中高亮 (深色背景 + 白字, 让用户一眼看出当前在哪一个大题) */
.nav-btn.part-btn.active {
  background: #2563EB;
  color: #fff;
  border-color: #2563EB;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.35);
}
.nav-btn.part-btn.active:hover {
  background: #1D4ED8;
  border-color: #1D4ED8;
}
/* 9-06 mel: 题号组 (每个 Part 按钮 + 题号串 一个 .part-group, flex 让两者并排) */
.part-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* 9-06 mel: 题号串容器 - 默认收起 (max-width:0 + overflow:hidden + padding:0),
   选中对应 Part 后展开 (max-width 600px, 给够 10 个题号位置) */
.part-qnums {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition: max-width 0.18s ease-out, opacity 0.12s ease-out, padding 0.18s ease-out;
}
/* 选中 Part 后, 同一个 part-group 里的题号串展开 (mel: 啪一下收起来/展开) */
.part-group:has(.part-btn.active) .part-qnums {
  max-width: 600px;
  opacity: 1;
  padding-left: 6px;
}
/* 9-06 mel: 每个题号小方块 (未做答 = 白底浅蓝描边, 已做答 = 浅蓝填充 + 白字) */
.qnum-chip {
  display: inline-block;
  min-width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #2563EB;
  background: #fff;
  border: 1px solid #BFDBFE;
  border-radius: 4px;
  cursor: default;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.qnum-chip:hover {
  background: #F0F7FF;
}
/* 9-06 mel: 已做答 = 浅蓝填充 + 白字 (深一点的蓝让"做过"视觉一眼可辨) */
.qnum-chip.answered {
  background: #2563EB;
  color: #fff;
  border-color: #2563EB;
}
.qnum-chip.answered:hover {
  background: #1D4ED8;
  border-color: #1D4ED8;
}
/* 9-06 mel: review 标记 = 圆形 (跟方框区分; 颜色不动, 仍用 answered 蓝)
   用户原话: "颜色管做没做, 形状管拿不准要回看"
   默认方框 = 普通题, 圆形 = REVIEW 标记需要回看 */
.qnum-chip.reviewed {
  border-radius: 50%;
  /* 没答也用黄色描边, 让"拿不准"在所有 chip 里都一眼可见 */
  border-color: #F59E0B;
  color: #F59E0B;
}
.qnum-chip.reviewed.answered {
  /* 答了 + review: 蓝色填充但保留圆形 + 黄色描边 */
  background: #2563EB;
  color: #fff;
  border-color: #F59E0B;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}
.qnum-chip.reviewed:hover {
  background: #EFF6FF;
}
.qnum-chip.reviewed.answered:hover {
  background: #1D4ED8;
}
.review-btn.active {
  background: #fbbf24;
  color: #fff;
  border-color: #fbbf24;
}
.question-nav {
  display: flex;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  padding: 0 8px;
}
.question-nav .q-btn {
  min-width: 32px;
  height: 32px;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.question-nav .q-btn.current {
  background: #1e3a8a;
  color: #fff;
  border-color: #1e3a8a;
}
.question-nav .q-btn.answered {
  background: #d1fae5;
  border-color: #10b981;
}
.question-nav .q-btn.reviewed {
  background: #fef3c7;
  border-color: #fbbf24;
}

/* 设置/帮助弹窗 */
.settings-panel, .help-panel {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.settings-card, .help-card {
  background: #fff;
  padding: 32px;
  border-radius: 12px;
  width: 90%;
  max-width: 480px;
}
.settings-card h3, .help-card h3 {
  margin-bottom: 20px;
  color: #1e3a8a;
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}
.setting-row label { font-size: 14px; color: #4b5563; }
.setting-row select {
  padding: 6px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
}
.help-card ul {
  list-style: none;
  padding: 0;
}
.help-card li {
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 14px;
  line-height: 1.6;
}
body.bg-night .help-card li:last-child { border-bottom: none; }

/* 9-02: 手机端渲染 CSS (从 kaopei.html 搬过来, 去掉 .preview-mobile 前缀) */
.lst-paper { background: #fff; border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.lst-instr { font-size: 14px; color: #1F2937; font-style: italic; line-height: 1.8; }
.lst-instr .lst-write { font-style: normal; }
.lst-title { text-align: center; font-weight: 700; font-size: 14px; margin: 10px 0; color: #111827; }
table.lst-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.7; }
table.lst-table th { border: 1px solid #1F2937; font-weight: 700; padding: 8px; background: #F8FAFC; }
table.lst-table td { border: 1px solid #1F2937; padding: 8px; vertical-align: top; word-break: break-word; }
.lst-num { font-weight: 700; margin: 0 2px; }
.lst-gap {
  display: inline-block; width: 90px; border: 0;
  border-bottom: 1.5px dotted #1F2937;
  font-size: 13px; padding: 1px 2px; outline: none;
  background: transparent; text-align: center; vertical-align: baseline;
}
.lst-gap:focus { border-bottom-color: #2563EB; border-bottom-style: solid; background: #EFF6FF; }
.lst-notes { border: 1px solid #1F2937; margin-top: 14px; font-size: 13px; background: #fff; }
.lst-notes-title { font-weight: 700; padding: 8px 10px; border-bottom: 1px solid #1F2937; }
.lst-notes-heading { font-weight: 700; padding: 9px 10px 3px; font-size: 13px; }
.lst-form { border: 1px solid #1F2937; background: #fff; border-radius: 6px; overflow: hidden; }
.lst-form-row { display: flex; font-size: 13px; line-height: 1.9; border-bottom: 1px solid #D7DBE0; }
.lst-form-row:last-child { border-bottom: 0; }
.lst-form-label { width: 110px; flex-shrink: 0; padding: 7px 10px; background: #F8FAFC; font-weight: 700; color: #1F2937; border-right: 1px solid #D7DBE0; }
.lst-form-value { flex: 1; padding: 7px 10px; }
.lst-note-row { display: flex; gap: 7px; padding: 9px 10px; border-bottom: 1px solid #D7DBE0; line-height: 1.75; }
.lst-note-row:last-child { border-bottom: 0; }
.lst-bullet { flex-shrink: 0; }
.lst-choice-q { margin-bottom: 14px; }
.lst-choice-stem { font-size: 13px; line-height: 1.65; color: #1F2937; margin-bottom: 6px; }
.lst-choice-stem .lst-num { margin-right: 2px; }
.lst-choice-opt { display: flex; gap: 8px; padding: 6px 9px; border: 1px solid #E5E7EB; border-radius: 8px; margin-bottom: 5px; cursor: pointer; font-size: 13px; line-height: 1.55; background: #fff; transition: all 0.12s; align-items: flex-start; }
.lst-choice-opt:hover { border-color: #4F8EF7; background: #F0F7FF; }
.lst-choice-opt.selected { border-color: #4F8EF7; background: #EBF5FF; color: #1E40AF; font-weight: 600; }
.lst-choice-opt .lst-opt-letter { flex-shrink: 0; font-weight: 700; width: 16px; }
.lst-match-box { border: 1px solid #1F2937; padding: 8px 12px; margin: 10px 0 12px; background: #fff; }
.lst-match-opt { display: flex; gap: 8px; font-size: 13px; line-height: 1.7; }
.lst-match-opt .lst-opt-letter { font-weight: 700; flex-shrink: 0; }
.lst-match-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.lst-match-row { display: flex; align-items: baseline; gap: 6px; font-size: 13px; line-height: 2.1; }
.lst-match-row .lst-num { font-weight: 700; }
.lst-match-line { flex: 1; border-bottom: 1.5px dotted #1F2937; min-width: 40px; }
.lst-match-input { width: 50px; border: 0; border-bottom: 1.5px dotted #1F2937; font-size: 13px; font-weight: 700; text-align: center; padding: 1px 0; outline: none; background: transparent; text-transform: uppercase; }
.lst-match-input:focus { border-bottom-color: #2563EB; border-bottom-style: solid; background: #EFF6FF; }
.lst-match-box-title { font-weight: 700; text-align: center; font-size: 13px; border-bottom: 1px solid #1F2937; padding-bottom: 5px; margin-bottom: 6px; }
.lst-map { display: block; width: 100%; max-width: 480px; margin: 0 auto 8px; border: 1px solid #1F2937; border-radius: 6px; }
.lst-flow { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 12px; align-items: center; }
.lst-flow-step { background: #fff; border: 1px solid #1F2937; border-radius: 6px; padding: 8px 14px; min-width: 240px; text-align: center; }
.lst-flow-step-title { font-size: 13px; font-weight: 700; color: #1F2937; margin-bottom: 4px; }
.lst-flow-step-line { display: flex; align-items: baseline; justify-content: center; gap: 4px; font-size: 13px; }
.lst-flow-step-input { width: 70px; border: 0; border-bottom: 1.5px dotted #1F2937; font-size: 13px; padding: 1px 2px; outline: none; background: transparent; text-align: center; }
.lst-flow-step-input:focus { border-bottom-color: #2563EB; border-bottom-style: solid; background: #EFF6FF; }
.lst-flow-arrow { color: #94A3B8; font-size: 16px; line-height: 1; }
.lst-multi-hint { font-size: 12px; color: #64748B; margin: 2px 0 6px; }
.lst-part-header { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.lst-part-header i { font-style: italic; font-weight: 400; }
.lst-player { padding: 10px 14px; background: #F8FAFC; border-radius: 8px; margin-bottom: 14px; border: 1px solid #E5E7EB; }
.lst-scene { font-size: 12px; color: #6B7280; margin-bottom: 6px; font-style: italic; }
.lst-player audio { width: 100%; }

/* 夜间模式 */
/* 夜间模式 */
body.bg-night { background: #202124; color: #e5e7eb; }
body.bg-night .panel-header { background: #2d2d30; border-bottom-color: #3f3f44; color: #93c5fd; }
body.bg-night .panel-body { background: #202124; }
body.bg-night .writing-input { background: #202124; color: #e5e7eb; }
body.bg-night .bottom-bar { background: #2d2d30; border-top-color: #3f3f44; }
body.bg-night .nav-btn { background: #2d2d30; color: #e5e7eb; border-color: #3f3f44; }
body.bg-night .q-btn { background: #2d2d30; color: #e5e7eb; border-color: #3f3f44; }
body.bg-night .placeholder { color: #6b7280; }

/* 9-03 mel: 阅读区样式 (从 kaopei.html 抠过来, 去 .preview-mobile 前缀, 字号适配电脑屏) */
.m-passage { font-size: 14px; line-height: 1.8; color: #1F2937; white-space: pre-wrap; }
.m-passage p { margin: 0 0 10px 0; }
.m-passage .m-passage-title { text-align: center; font-size: 15px; margin: 4px 0 14px 0; }
.m-passage .m-passage-sec { font-weight: 700; margin: 14px 0 6px 0; }
.m-q { margin-bottom: 14px; padding: 10px 12px; background: #fff; border: 1px solid #E5E7EB; border-radius: 6px; }
.m-q-num { font-weight: 700; color: #1B3A6B; margin-right: 4px; }
.m-q-stem { margin-bottom: 8px; line-height: 1.65; color: #1F2937; font-size: 13px; }
.m-q-input { width: 100%; padding: 6px 10px; border: 1px solid #D1D5DB; border-radius: 4px; font-size: 13px; box-sizing: border-box; background: #fff; outline: none; transition: border-color 0.15s; }
.m-q-input:focus { border-color: #4F8EF7; background: #F0F7FF; }
.m-q-input-inline { display: inline-block; width: 110px; border: 0; border-bottom: 1.5px solid #1F2937; padding: 1px 4px; font-size: 13px; outline: none; background: transparent; vertical-align: baseline; margin: 0 2px; }
.m-q-input-inline:focus { border-bottom-color: #2563EB; background: #EFF6FF; }
.m-q-input-inline-placeholder { display: inline-block; color: #94A3B8; font-size: 11px; margin: 0 2px; }
.m-opt { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid #E5E7EB; border-radius: 6px; margin-bottom: 5px; cursor: pointer; font-size: 13px; line-height: 1.55; background: #fff; transition: all 0.12s; }
.m-opt:hover { border-color: #4F8EF7; background: #F0F7FF; }
.m-opt:hover .m-opt-letter { background: #4F8EF7; color: #fff; }
.m-opt.selected { border-color: #4F8EF7; background: #EBF5FF; color: #1E40AF; font-weight: 600; box-shadow: 0 1px 4px rgba(79,142,247,0.2); }
.m-opt.selected .m-opt-letter { background: #4F8EF7; color: #fff; }
.m-opt-letter { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #F1F5F9; color: #475569; font-weight: 700; font-size: 12px; flex-shrink: 0; transition: all 0.12s; }
.m-opt-text { flex: 1; }
.m-opt-long { align-items: flex-start; }
.m-opt-letter-out .m-opt-letter { width: 28px; height: 28px; font-size: 11px; }
.m-q-passage-fill { background: #FFFBEB; border: 1px dashed #D97706; border-radius: 6px; padding: 10px 14px; margin-top: 6px; font-size: 13px; line-height: 2.1; }
.m-q-pf-label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dashed #D97706; color: #92400E; font-weight: 600; font-size: 12px; }
.m-q-pf-badge { background: #FCD34D; color: #783B; padding: 1px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
/* ============ 9-03 mel: 自定义居中确认 modal (代替浏览器 confirm()) ============ */
.yasi-modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.55);  /* 半透明黑遮罩 */
  z-index: 99999;  /* 9-03 K-AUTH-JS-MODAL-ZINDEX-1000000 之前, 这里遮罩 zindex 够用 */
  display: flex; align-items: center; justify-content: center;
  animation: yasiModalFadeIn 0.18s ease-out;
}
.yasi-modal-overlay[style*="display: none"],
.yasi-modal-overlay[style*="display:none"] { display: none !important; }
.yasi-modal-box {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  padding: 32px 36px 24px;
  max-width: 480px;
  width: 90%;
  text-align: center;
  animation: yasiModalSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.yasi-modal-icon {
  font-size: 48px;
  margin-bottom: 12px;
  animation: yasiModalPulse 1.5s ease-in-out infinite;
}
.yasi-modal-title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
  color: #1F2937;
}
.yasi-modal-body {
  font-size: 14px;
  color: #4B5563;
  line-height: 1.6;
  margin: 0 0 12px;
}
.yasi-modal-hint {
  font-size: 13px;
  color: #6B7280;
  background: #F3F4F6;
  border-left: 3px solid #9CA3AF;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 0 0 24px;
  text-align: left;
}
.yasi-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.yasi-modal-actions button {
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  border: 1.5px solid;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.yasi-modal-actions .btn-secondary {
  background: #fff; border-color: #D1D5DB; color: #4B5563;
}
.yasi-modal-actions .btn-secondary:hover { background: #F9FAFB; border-color: #9CA3AF; }
.yasi-modal-actions .btn-danger {
  background: #DC2626; border-color: #DC2626; color: #fff;
}
.yasi-modal-actions .btn-danger:hover { background: #B91C1C; border-color: #B91C1C; }

@keyframes yasiModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes yasiModalSlideIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes yasiModalPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* 10-27 Evan: 题号 chip 跳转定位高亮 */
.qnum-jump-flash { outline: 3px solid #F59E0B !important; outline-offset: 2px; border-radius: 6px; }