/* ============================================================
   IELTS on Computer — 界面还原
   配色与版式对照 British Council 官方机考模拟实测截图：
     顶栏        #E9BEC2（粉）
     指令面板    #F7F7F7，1px 边框
     当前题号框  #007FA3
     正文        #212529
   ============================================================ */
:root {
  --pink: #e9bec2;
  --pink-line: #d8a5aa;
  --panel: #f7f7f7;
  --panel-line: #c9cdd1;
  --ink: #212529;
  --ink-2: #495057;
  --ink-3: #6c757d;
  --rule: #ececec;
  --teal: #007fa3;
  --blue: #2162ae;
  --ok: #1f7a45;
  --bad: #b02a37;
  --flag: #8e44ad;
  --hdr-h: 64px;
  --bot-h: 62px;
  --font: "Segoe UI", "Helvetica Neue", -apple-system, BlinkMacSystemFont,
          "Microsoft YaHei", "PingFang SC", Roboto, Arial, sans-serif;
}

/* ============================================================
   护眼模式 —— 用户可选三种配色，按钮在首页。
   见 docs/功能约定.md
   ============================================================ */
body.theme-paper {                        /* 米黄 / 纸感 */
  --page-bg: #f5efe0;
  --card-bg: #fbf6ea;
  --ink: #2f2a20;
  --ink-2: #55503f;
  --ink-3: #7d7663;
  --rule: #e3dac4;
  --panel: #f0e9d8;
  --panel-line: #d8cdb2;
  --pink: #e2cdb4;
  --pink-line: #cdb694;
}
body.theme-green {                        /* 淡绿 / 豆沙绿 */
  --page-bg: #dcecd9;
  --card-bg: #eaf4e8;
  --ink: #23301f;
  --ink-2: #46543f;
  --ink-3: #6d7a68;
  --rule: #cbdfc6;
  --panel: #d5e8d1;
  --panel-line: #b7ceb1;
  --pink: #c9dfc4;
  --pink-line: #a9c6a3;
}
body.theme-dark {                         /* 深色模式 */
  --page-bg: #1c1f23;
  --card-bg: #24282d;
  --ink: #e6e8ea;
  --ink-2: #b9bec4;
  --ink-3: #8b9299;
  --rule: #33383e;
  --panel: #24282d;
  --panel-line: #3a4046;
  --pink: #3a2c30;
  --pink-line: #4d3a3f;
  --teal: #4bb8d6;
  --blue: #6aa9e8;
  --ok: #5fbf85;
  --bad: #e0727f;
}
body.theme-paper, body.theme-green, body.theme-dark { background: var(--page-bg); }
body.theme-dark .card2,
body.theme-dark .tile,
body.theme-dark .pick-card,
body.theme-dark .hist-item,
body.theme-dark .av-panel,
body.theme-dark .notes.boxed,
body.theme-dark .qgroup-head .optbox,
body.theme-dark .answerbox,
body.theme-dark .setup-banner,
body.theme-dark .ov-sec,
body.theme-dark .ai-card,
body.theme-dark .dlg { background: var(--card-bg); color: var(--ink); }
body.theme-dark .instr,
body.theme-dark table.gaptable th,
body.theme-dark table.gaptable td { background: var(--card-bg); color: var(--ink); }
body.theme-dark input.gap,
body.theme-dark select.sel,
body.theme-dark .av-row select,
body.theme-dark .fld input { background: #2b3036; color: var(--ink); border-color: var(--panel-line); }
body.theme-dark .gap { border-bottom-color: var(--ink-3); }
body.theme-dark .tile:hover, body.theme-dark .pick-card:hover { background: #2b3036; }
body.theme-paper .card2, body.theme-paper .tile, body.theme-paper .pick-card,
body.theme-green .card2, body.theme-green .tile, body.theme-green .pick-card { background: var(--card-bg); }

/* 护眼按钮 */
.eye-wrap { position: relative; display: inline-block; }
.eye-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  background: #fff; border: 1px solid var(--panel-line); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16); padding: 6px; min-width: 150px; display: none;
}
.eye-menu.on { display: block; }
body.theme-dark .eye-menu { background: #24282d; }
.eye-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none;
  font: inherit; font-size: 13.5px; color: var(--ink); padding: 8px 10px; border-radius: 6px;
  cursor: pointer; text-align: left;
}
.eye-menu button:hover { background: rgba(128,128,128,.14); }
.eye-menu button.on { font-weight: 700; }
.eye-menu .sw {
  width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0,0,0,.25); flex: 0 0 auto;
}
.eye-menu .sw.off { background: #fff; }
.eye-menu .sw.paper { background: #f5efe0; }
.eye-menu .sw.green { background: #c7edcc; }
.eye-menu .sw.dark { background: #1c1f23; }

/* Made by Julian 角标（水印） */
.made-by {
  margin: 42px 0 16px; text-align: center; font-size: 21px; letter-spacing: .14em;
  color: var(--ink-2); opacity: .85; user-select: none;
}
.made-by b { font-weight: 700; letter-spacing: .2em; font-size: 23px; }

/* 科目卡片区的小标题行（右边放护眼按钮） */
.tiles-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 10px;
}
.tiles-head .tiles-label { font-size: 13px; color: var(--ink-3); letter-spacing: .04em; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
.hidden { display: none !important; }

/* ============================ 顶栏 ============================ */
.hdr {
  height: var(--hdr-h);
  background: var(--pink);
  border-bottom: 1px solid var(--pink-line);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  position: sticky;
  top: 0;
  z-index: 40;
}
.hdr-left { display: flex; flex-direction: column; justify-content: center; min-width: 190px; }
.cand {
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: #3d2b2d; font-weight: 600; line-height: 1.2;
}
.time { font-size: 14.5px; font-weight: 700; color: #24191a; line-height: 1.25; }
.time.warn { color: #8a3b00; }
.time.danger { color: #8b0000; }

.hdr-mid { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #33262a; }
.hdr-mid .wave { display: flex; align-items: flex-end; gap: 2px; height: 15px; }
.hdr-mid .wave i { width: 2.5px; height: 3px; background: #5a3f43; border-radius: 2px; }
.hdr-mid.playing .wave i { animation: eq .85s ease-in-out infinite; }
.hdr-mid.playing .wave i:nth-child(2) { animation-delay: .12s; }
.hdr-mid.playing .wave i:nth-child(3) { animation-delay: .24s; }
.hdr-mid.playing .wave i:nth-child(4) { animation-delay: .36s; }
.hdr-mid.playing .wave i:nth-child(5) { animation-delay: .06s; }
@keyframes eq { 0%,100% { height: 3px; } 50% { height: 14px; } }

.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.btn-finish {
  background: #fff; border: 1px solid #3d2b2d; color: #24191a;
  border-radius: 5px; padding: 6px 15px; font-size: 13.5px; cursor: pointer;
}
.btn-finish:hover { background: #fdf3f4; }
.ic-btn {
  width: 32px; height: 32px; border: 0; background: transparent; cursor: pointer;
  color: #24191a; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; padding: 0;
}
.ic-btn:hover { background: rgba(255,255,255,.45); }
.ic-btn svg { width: 21px; height: 21px; }

/* 音量浮层 */
.volpop {
  position: absolute; top: 58px; right: 132px; background: #fff; color: var(--ink);
  border: 1px solid #d5d9de; border-radius: 8px; padding: 12px 14px; width: 250px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18); z-index: 60; font-size: 13px;
}
.volpop label { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.volpop input[type=range] { flex: 1; }
.volpop .row { display: flex; align-items: center; gap: 7px; color: var(--ink-2); }

/* ============================ 主体 ============================ */
.wrap { min-height: calc(100vh - var(--hdr-h) - var(--bot-h)); padding: 16px 16px 30px; }

.instr {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 6px;
  padding: 14px 20px 15px;
  margin-bottom: 22px;
}
.instr h1 {
  margin: 0 0 8px; font-size: 27px; font-weight: 600; letter-spacing: -.01em;
}
.instr hr { border: 0; border-top: 1px solid #d9dde1; margin: 0 0 10px; }
.instr p { margin: 0; font-size: 15px; color: var(--ink); }
/* 原书：`You should spend about 20 minutes on **Questions 1–13**…` 整句斜体，
   其中题号区间是「斜体 + 粗体」 */
.instr p i, .instr p b { font-style: italic; }
.instr .sub { margin-top: 4px; font-size: 14px; color: var(--ink-2); }

/* 分栏：左侧文章/题目，右侧作答 */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start; }
.cols.one { grid-template-columns: 1fr; }
.cols.wide-left { grid-template-columns: 1.1fr .9fr; }
.col-left { padding-right: 26px; border-right: 1px solid var(--rule); }
.col-right { padding-left: 26px; min-height: 60vh; }
.cols.one .col-left { border-right: 0; padding-right: 0; }

/* ============================ 文章 ============================ */
.passage h2 { font-size: 17px; margin: 4px 0 12px; font-weight: 700; }
.passage p { margin: 0 0 13px; text-align: justify; hyphens: auto; }
.passage .para-label { font-weight: 700; margin-right: 6px; }

/* ============================ 题目 ============================ */
.qgroup { margin-bottom: 26px; }
.qgroup-head { margin-bottom: 12px; }
/* 原书：题号区间「Questions 1–10」是斜体加粗，指令是斜体 */
.qgroup-head .r { font-size: 15.5px; font-weight: 700; font-style: italic; }
.qgroup-head .ins { font-size: 15px; font-style: italic; color: var(--ink); margin-top: 3px; }
.qgroup-head .ins b { font-style: italic; }
.qgroup-head .optbox {
  border: 1px solid var(--panel-line); border-radius: 5px; padding: 11px 14px;
  margin-top: 10px; background: #fff; font-size: 14.5px;
}
.qgroup-head .optbox div { margin: 2px 0; }
.qgroup-head .optbox .optbox-title { font-weight: 700; margin-bottom: 4px; text-align: center; }

.q { display: flex; gap: 11px; margin-bottom: 16px; align-items: flex-start; }
.qnum {
  flex: 0 0 25px; height: 25px; margin-top: 1px;
  border: 1px solid #b9c0c7; border-radius: 3px; background: #fff;
  font-size: 13.5px; color: var(--ink-2); font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.q.current .qnum { border-color: var(--teal); border-width: 2px; color: var(--teal); }
.q.done .qnum { background: #eef7f9; border-color: var(--teal); color: var(--teal); }
.q.flagged .qnum { box-shadow: 0 0 0 2px rgba(142,68,173,.35); }
.qbody { flex: 1; min-width: 0; }
.qstem { font-weight: 600; margin-bottom: 7px; }
.qstem .n { font-weight: 400; margin-right: 5px; }

/* 单选：空心圆 */
.qopts { display: flex; flex-direction: column; gap: 5px; }
.qopts.inline { flex-direction: row; flex-wrap: wrap; gap: 10px 22px; }
.opt { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 15px; padding: 1px 0; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt .mark {
  flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px;
  border: 1.6px solid #6c757d; background: #fff; border-radius: 50%;
  position: relative; transition: .12s;
}
.opt input[type=checkbox] + .mark { border-radius: 3px; }
.opt input:checked + .mark { border-color: var(--blue); }
.opt input:checked + .mark::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--blue);
}
.opt input[type=checkbox]:checked + .mark::after { border-radius: 1px; }
.opt:hover .mark { border-color: var(--blue); }
.opt.sel { font-weight: 600; }

/* TRUE/FALSE/NOT GIVEN 药丸 */
.pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.pill {
  border: 1px solid #b9c0c7; background: #fff; border-radius: 20px;
  padding: 4px 15px; font-size: 14px; cursor: pointer; color: var(--ink-2);
  letter-spacing: .02em;
}
.pill:hover { border-color: var(--blue); color: var(--blue); }
.pill.on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }

/* 填空：点线下划线 */
.gap {
  border: 0; border-bottom: 1.6px dotted #6c757d; background: transparent;
  font: inherit; font-size: 15px; color: var(--ink);
  min-width: 90px; padding: 0 4px 1px; margin: 0 3px;
  outline: none;
}
.gap:focus { border-bottom-color: var(--teal); border-bottom-style: solid; background: #f2fbfd; }
.gap.filled { border-bottom-style: solid; border-bottom-color: var(--teal); font-weight: 600; }
.gap.inline { min-width: 120px; }

/* 表格填空 */
table.gaptable { border-collapse: collapse; width: 100%; font-size: 14.5px; margin: 6px 0 4px; }
table.gaptable th, table.gaptable td { border: 1px solid #b9c0c7; padding: 8px 10px; vertical-align: top; }
/* 表头：白底黑字加粗（原书如此，不是深色底反白） */
table.gaptable th { background: #fff; color: var(--ink); font-weight: 700; text-align: left; }
/* 首列加粗 —— 用户拍板「表格首列加粗合理」，默认开。
   某张表不想要就在数据里写 firstColBold: false。 */
table.gaptable.firstbold td:first-child { font-weight: 700; }
table.gaptable caption {
  caption-side: top; text-align: center; font-weight: 700; padding: 6px 0; font-size: 16px;
}
table.gaptable td ul { margin: 6px 0 0; padding-left: 20px; }
table.gaptable td li { margin-bottom: 4px; }
/* 注意：原书表格没有斑马纹，别再加 tr:nth-child(even) 底色 */

/* 笔记/摘要里的缩进列表 */
.notes { margin: 4px 0 0; padding-left: 4px; }
.notes.boxed { border: 1px solid #b9c0c7; padding: 14px 18px 6px; background: #fff; }
/* 笔记块标题：左对齐粗体（不是居中） */
.notes-title { font-weight: 700; font-size: 16px; margin: 2px 0 14px; }
/* 原书阅读部分笔记的标题是居中粗体（听力笔记的标题是左对齐） */
.notes-title.center { text-align: center; }
/* 口语 Part 1 的例题话题：EXAMPLE 标签 + 粗体话题名（原书都是粗体） */
.sp-ex { margin: 12px 0 6px; font-weight: 700; }
.sp-ex .lbl { display: block; margin-bottom: 2px; }
/* 选择题组的标题（如 "Melby Coal Mine"、"Presentation on houses of the future"）
   原书是粗体居中 */
.list-title { font-weight: 700; text-align: center; margin: 12px 0 8px; font-size: 15.5px; }
/* 有的原书在标题下画一条横线（如 Test 1 的 General information） */
.notes-title.ruled { border-bottom: 1px solid #b9c0c7; padding-bottom: 6px; margin-bottom: 10px; }
.notes .line { margin: 0 0 9px; }
.notes .line.ind { padding-left: 22px; }
.notes .line.bullet { padding-left: 22px; position: relative; }
.notes .line.bullet::before {
  content: "•"; position: absolute; left: 6px; color: var(--ink-2);
}
/* 缩进短横线子条目（原书的 – 那种），常规字重，别加粗 */
.notes .line.dash { padding-left: 52px; position: relative; }
.notes .line.dash::before { content: "–"; position: absolute; left: 36px; color: var(--ink-2); }
/* 粗体小节标题 */
.notes .line.head { font-weight: 700; margin: 14px 0 8px; }
/* 括号补充说明 */
.notes .line.note { padding-left: 52px; color: var(--ink-2); }
/* 两栏对齐：label 在左、内容在右，对应原书表单 */
.notes .line.two { display: flex; gap: 18px; align-items: baseline; }
.notes .line.two > .l { flex: 0 0 var(--two-l, 46%); }
/* 右栏自己也是 flex，保证「空格 + 后面的字」在一行内，不会换行 */
.notes .line.two > .r {
  flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px;
}
.notes .line.two .gap { width: 190px; min-width: 0; margin: 0; }
.notes .line.two.bullet { padding-left: 52px; }
.notes .line.two.bullet::before { left: 36px; }

/* 下拉匹配 */
.sel {
  font: inherit; font-size: 14.5px; padding: 3px 6px; border: 1px solid #b9c0c7;
  border-radius: 4px; background: #fff; color: var(--ink); min-width: 68px;
}
.sel:focus { outline: 2px solid rgba(33,98,174,.35); }

/* ============================ 写作 ============================ */
.wtask { font-style: italic; margin-bottom: 14px; }
.figure { width: 100%; max-width: 720px; border: 1px solid #d5d9de; border-radius: 4px; background: #fff; }
.answerbox {
  width: 100%; min-height: 430px; border: 1px solid #b9c0c7; border-radius: 4px;
  padding: 14px 15px; font: inherit; font-size: 15.5px; line-height: 1.75;
  resize: vertical; outline: none; background: #fff; color: var(--ink);
}
.answerbox:focus { border-color: var(--teal); }
.wordcount { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.wordcount b { color: var(--ink); }

/* ============================ 底部 ============================ */
.botbar {
  height: var(--bot-h); background: #fff; border-top: 1px solid #d5d9de;
  display: flex; align-items: center; gap: 26px; padding: 0 18px;
  position: sticky; bottom: 0; z-index: 40;
}
.partnav { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; overflow: hidden; }
.partnav-title { font-size: 15.5px; font-weight: 700; white-space: nowrap; }
.qboxes { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.qboxes::-webkit-scrollbar { height: 5px; }
.qboxes::-webkit-scrollbar-thumb { background: #ccd2d8; border-radius: 3px; }
.qbox {
  flex: 0 0 auto; min-width: 27px; height: 27px; padding: 0 5px;
  border: 1px solid #b9c0c7; background: #fff; border-radius: 3px;
  font-size: 13px; color: var(--ink-2); cursor: pointer; position: relative;
}
.qbox::after {
  content: ""; position: absolute; left: 5px; right: 5px; bottom: 3px;
  border-bottom: 1px solid #cfd4d9;
}
.qbox:hover { border-color: var(--blue); color: var(--blue); }
.qbox.current { border: 2px solid var(--teal); color: var(--teal); font-weight: 700; }
.qbox.answered { background: #eef7f9; border-color: var(--teal); color: var(--teal); font-weight: 600; }
.qbox.flagged::before {
  content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px;
  background: var(--flag); border-radius: 50%; border: 1px solid #fff;
}
.partmeta { font-size: 15px; color: var(--ink-2); white-space: nowrap; }
.partmeta b { color: var(--ink); font-weight: 600; margin-right: 8px; }
.partmeta .cnt { color: #9aa1a8; font-size: 14px; }

.scrollbtns { position: fixed; right: 14px; bottom: calc(var(--bot-h) + 12px); display: flex; gap: 8px; z-index: 35; }
.scrollbtn {
  width: 42px; height: 42px; border: 0; border-radius: 4px; cursor: pointer;
  background: #8f9293; color: #fff; display: flex; align-items: center; justify-content: center;
}
.scrollbtn.dark { background: #000; }
.scrollbtn:hover { opacity: .85; }
.scrollbtn svg { width: 22px; height: 22px; }

/* ============================ 首页 / 成绩 ============================ */
.screen { display: none; }
.screen.on { display: block; }
.home { max-width: 940px; margin: 0 auto; padding: 52px 24px; }
.home .brand { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); font-weight: 700; }
.home h1 { font-size: 30px; margin: 10px 0 4px; }
.home .sub { color: var(--ink-2); margin: 0 0 28px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.tile {
  border: 1px solid #d5d9de; border-radius: 8px; padding: 16px 18px; cursor: pointer;
  background: #fff; transition: .15s;
}
.tile:hover { border-color: var(--teal); box-shadow: 0 4px 16px rgba(0,0,0,.07); transform: translateY(-2px); }
.tile h3 { margin: 0 0 3px; font-size: 16px; }
.tile .cn { color: var(--ink-3); font-size: 12.5px; }
.tile .meta { font-size: 13px; color: var(--ink-2); margin-top: 7px; }
.tile .done { margin-top: 8px; font-size: 12.5px; color: var(--ok); font-weight: 600; }
.home-actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  border: 1px solid #b9c0c7; background: #fff; color: var(--ink); border-radius: 6px;
  padding: 9px 18px; font-size: 14px; cursor: pointer;
}
.btn:hover { background: #f4f6f8; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.btn.primary:hover { background: #1a4f8f; }
.btn.danger { color: var(--bad); border-color: #e0b4b8; }
.note { color: var(--ink-3); font-size: 13px; margin-top: 22px; line-height: 1.7; }

.result { max-width: 1040px; margin: 0 auto; padding: 36px 24px 60px; }
.result h1 { font-size: 26px; margin: 0 0 20px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 26px; }
.card { border: 1px solid #d5d9de; border-radius: 8px; padding: 15px 17px; }
.card .label { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.card .big { font-size: 33px; font-weight: 700; color: var(--blue); line-height: 1.15; margin-top: 3px; }
.card .small { font-size: 12.5px; color: var(--ink-2); }
table.res { border-collapse: collapse; width: 100%; font-size: 13.5px; margin-top: 8px; }
table.res th, table.res td { border: 1px solid #d5d9de; padding: 6px 10px; text-align: left; }
table.res th { background: #f2f4f6; font-size: 12.5px; }
table.res td.q { width: 46px; text-align: center; font-weight: 700; color: var(--ink-2); }
tr.ok td.given { color: var(--ok); font-weight: 700; }
tr.no td.given { color: var(--bad); }
tr.no td.key { color: var(--ok); font-weight: 700; }
.res-h { font-size: 15.5px; font-weight: 700; margin: 26px 0 8px; color: var(--blue); }

/* 弹窗 */
.mask {
  position: fixed; inset: 0; background: rgba(20,25,35,.45); display: none;
  align-items: center; justify-content: center; z-index: 90;
}
.mask.on { display: flex; }
.dlg { width: min(560px, 92vw); background: #fff; border-radius: 10px; padding: 24px 26px; box-shadow: 0 18px 50px rgba(0,0,0,.26); }
.dlg h3 { margin: 0 0 12px; font-size: 18px; }
.dlg p { margin: 0 0 8px; color: var(--ink-2); }
.dlg .acts {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px;
  flex-wrap: wrap;                        /* 按钮多了要换行，不能挤成一列 */
}
.dlg .acts .btn { flex: 0 0 auto; white-space: nowrap; }
/* 选项多于 4 个时改成竖排列表，更好点 */
.dlg .acts.many { flex-direction: column; align-items: stretch; }
.dlg .acts.many .btn { text-align: left; padding: 11px 16px; }

@media (max-width: 900px) {
  .cols, .cols.wide-left { grid-template-columns: 1fr; }
  .col-left { border-right: 0; padding-right: 0; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--rule); }
  .col-right { padding-left: 0; }
  .hdr-mid { display: none; }
}

/* ---------------------------- 口语：一题一录音 ---------------------------- */
.sp-wrap { max-width: 860px; }
.sp-cue {
  border: 1px solid var(--panel-line); border-radius: 6px; background: var(--panel);
  padding: 14px 18px; margin: 10px 0 16px;
}
.sp-cue-title { font-weight: 700; font-size: 16.5px; margin: 0 0 10px; }
.sp-cue-say { font-style: italic; margin: 0 0 6px; }
.sp-cue ul { margin: 0; padding-left: 22px; line-height: 1.9; }
.sp-list { margin: 12px 0 0; }
.sp-item { border-bottom: 1px solid var(--rule); padding: 12px 0; }
.sp-item:last-child { border-bottom: 0; }
.sp-q { font-size: 15px; line-height: 1.65; margin-bottom: 8px; }
.sp-q .sp-n {
  display: inline-block; min-width: 20px; height: 20px; line-height: 20px; text-align: center;
  background: var(--teal); color: #fff; border-radius: 4px; font-size: 12px;
  margin-right: 8px; vertical-align: 1px;
}
.sp-q-cue { color: var(--ink-2); font-style: italic; }
.sp-rec { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #cfd4d9; flex: 0 0 auto;
}
.sp-dot.on { background: #d9534f; animation: sp-pulse 1s infinite; }
@keyframes sp-pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
.sp-time { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sp-msg { font-size: 12.5px; color: var(--ink-3); }
.sp-msg.ok { color: var(--ok); }
.sp-msg.bad { color: var(--bad); }
.sp-play { margin-top: 8px; }
.sp-play audio { height: 34px; max-width: 420px; }
.sp-rec .btn.sm { padding: 5px 13px; font-size: 13px; }