/* ===== 字体：MiSans（小米，免费商用，含 Web/CSS @font-face 授权）=====
   授权：全渠道免费商用，允许嵌入网站；禁止单独转卖字体文件或改名二次分发。
   仅引入 3 个字重（Regular/Medium/Bold），woff2 各约 5MB。
   font-display:swap → 先用系统字体渲染，字体就绪后自动替换，不阻塞首屏。 */
@font-face{
  font-family:"MiSans";
  src:url("fonts/MiSans-Regular.woff2?v=d704c1a932c0bd7e") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"MiSans";
  src:url("fonts/MiSans-Medium.woff2?v=44e28ca6c2f0ca79") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"MiSans";
  src:url("fonts/MiSans-Bold.woff2?v=1c5a7515b61bc82b") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
/* 600/800 等中间字重映射到已有的 500/700，避免浏览器合成发虚 */
@font-face{
  font-family:"MiSans";
  src:url("fonts/MiSans-Bold.woff2?v=1c5a7515b61bc82b") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}

/* ===== 设计变量 ===== */
:root{
  --bg:#f5f5f7;
  --card:#ffffff;
  --text:#1a1a1a;
  --text-2:#6b6b70;
  --text-3:#9a9aa0;
  --line:#ececf0;
  --accent:#ff7a1a;
  --accent-soft:#fff5ec;
  --gray-chip:#f2f2f5;
  --radius:14px;
  --topbar-h:48px;
  --bottombar-h:56px;
  /* 正文内容宽度：正文、顶栏、底栏都以它为准，宽屏下才对得齐 */
  --content-w:860px;
  /* 开合把手的宽度（宽屏才有）。列宽上限要用到它，改把手宽度时这里要同步 */
  --toggle-w:0px;
  /* 字体栈：优先 MiSans，回退到各平台系统字体 */
  --font-sans:"MiSans",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* 表单控件默认不继承字体，统一重置为 MiSans 字体栈 */
input,button,select,textarea,optgroup{font-family:inherit}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:16px;line-height:1.6;
  display:flex;flex-direction:column;
  /* ⚠️ 移动端必须用 dvh：地址栏收起/展开时 100vh 不变，
     底部栏会被挤出屏幕。第一行是给老浏览器的降级值。 */
  height:100vh;
  height:100dvh;
  overflow:hidden;
  /* iOS 横屏时左右也有安全区（刘海在侧面） */
  padding-left:env(safe-area-inset-left, 0px);
  padding-right:env(safe-area-inset-right, 0px);
}

/* ===== 顶部栏 ===== */
.topbar{
  flex:0 0 auto;height:var(--topbar-h);
  display:flex;align-items:center;gap:8px;padding:0 12px;
  background:#fff;border-bottom:1px solid var(--line);
  position:relative;z-index:20;
  /* 刘海/状态栏：viewport-fit=cover 后页面铺到安全区下面，得自己让出来 */
  height:calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  padding-top:env(safe-area-inset-top, 0px);
}
.topbar__back{
  border:0;background:none;color:var(--text-2);padding:4px;display:flex;cursor:pointer;
}
.topbar__title{
  flex:1;font-size:15px;font-weight:500;margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);
}
.topbar__page{font-size:14px;color:var(--text-2);font-variant-numeric:tabular-nums}

/* ===== 题号导航条 ===== */
.qnav{
  flex:0 0 auto;display:flex;gap:4px;padding:10px 12px;
  overflow-x:auto;background:#fff;border-bottom:1px solid var(--line);
  scrollbar-width:none;position:relative;z-index:19;
}
.qnav::-webkit-scrollbar{display:none}
.qnav__item{
  flex:0 0 auto;border:0;background:none;
  font-size:15px;color:var(--text-3);padding:2px 8px 8px;
  position:relative;cursor:pointer;white-space:nowrap;
  transition:color .15s;
}
.qnav__item.is-active{color:var(--accent);font-weight:600}
.qnav__item.is-active::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:18px;height:3px;border-radius:2px;background:var(--accent);
}
.qnav__item.is-done{color:var(--text-2)}
.qnav__item.is-done::before{
  content:"";position:absolute;top:8px;right:2px;width:5px;height:5px;
  border-radius:50%;background:var(--accent);
}

/* ===== 内容区 ===== */
.content{
  flex:1 1 auto;min-height:0;min-width:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
  padding:16px 16px 24px;
}
/* 正文列宽 = min(期望宽度, 可用宽 − 把手宽)。
   ⚠️ 必须封顶：1080 窗口下面板展开时可用宽只有 798px，
      扣掉 24px 把手就是 774px 上限；不封顶的话把手会压住正文末字。 */
.content__inner{
  width:100%;min-width:0;
  max-width:min(var(--content-w), calc(100% - var(--toggle-w)));
  margin:0 auto;
}

/* 题型指引 */
.directions{
  background:var(--gray-chip);border-radius:var(--radius);
  padding:12px 14px;font-size:14px;line-height:1.65;color:var(--text-2);
  margin-bottom:18px;
}
.directions b{color:var(--text);font-weight:600}
/* 写作题说明、题干和输入区整体加大，长题干在各设备上更易读。 */
.work-unit[data-qno="writing"] .writing-directions{font-size:18px;line-height:1.75}
.work-unit[data-qno="writing"] .writing-prompt{font-size:19px;line-height:1.8}
.work-unit[data-qno="writing"] .editor{font-size:18px}

/* 文章 */
.passage{
  font-size:16.5px;line-height:1.85;color:var(--text);
  white-space:pre-wrap;word-break:break-word;
}
.passage p{margin:0 0 14px}
.passage .para-label{font-weight:700;color:var(--accent);margin-right:6px}
.writing-image{display:block;width:min(100%,560px);height:auto;margin:18px auto;border:1px solid var(--line);border-radius:10px}

/* 题干 */
.stem{
  font-size:16.5px;line-height:1.7;color:var(--text);
  margin:22px 0 14px;white-space:pre-wrap;
}
.stem--group{color:var(--text-2);font-size:15px;margin:18px 0 14px}

/* 单题块 */
.question{margin-bottom:26px}
.question__head{display:flex;align-items:baseline;gap:6px;margin-bottom:12px}
.question__no{font-size:15px;font-weight:600;color:var(--text)}
.question__tag{font-size:12px;color:var(--text-3)}
.short-answer-question{padding-bottom:16px;border-bottom:1px solid var(--line)}
.short-answer__input{
  display:block;width:100%;min-height:56px;margin-top:8px;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--radius);resize:vertical;
  background:var(--card);color:var(--text);font:inherit;line-height:1.5;
}
.short-answer__input:focus{outline:none;border-color:var(--accent)}

/* 选项 */
.options{display:flex;flex-direction:column;gap:10px}
.opt{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 14px;cursor:pointer;transition:border-color .15s,background .15s;
  /* 长按交互需要：定位整项填充层、禁止选中文字、屏蔽长按系统菜单 */
  position:relative;overflow:hidden;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.opt:active{background:#fafafa}
.opt__badge{
  flex:0 0 30px;height:30px;border-radius:50%;
  background:var(--gray-chip);color:var(--text-2);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;line-height:1;
}
.opt__text{flex:1;font-size:16px;line-height:1.55;color:var(--text);padding-top:3px}

/* --- 长按"划掉"（排除）：变灰 + 划线 --- */
.opt.is-ex{background:var(--gray-chip);border-color:var(--line);opacity:.6}
.opt.is-ex .opt__badge{background:var(--line);color:var(--text-3);text-decoration:line-through}
.opt.is-ex .opt__text{color:var(--text-3);text-decoration:line-through}
/* 选词填空词库：长按同样可划掉 */
.bank__word{position:relative;overflow:hidden;cursor:pointer;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.bank__word.is-ex{background:var(--gray-chip);opacity:.55}
.bank__word.is-ex b,.bank__word.is-ex{color:var(--text-3);text-decoration:line-through}

/* --- 按住反馈：整张选项从左向右填充，填满时触发长按 --- */
.opt.is-pressing,.bank__word.is-pressing{
  background:var(--card);border-color:var(--accent);isolation:isolate
}
.opt.is-pressing::after,.bank__word.is-pressing::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--accent-soft);transform:scaleX(0);transform-origin:left;
  animation:pressFill .45s linear forwards;
}
@keyframes pressFill{to{transform:scaleX(1)}}

.opt.is-sel{border-color:var(--accent);background:var(--accent-soft)}
.opt.is-sel .opt__badge{background:var(--accent);color:#fff}
.opt.is-sel .opt__text{color:var(--accent)}

/* 翻译/写作输入 */
.editor-wrap{width:100%;min-width:0;max-width:100%;margin-top:8px}
.editor{
  display:block;box-sizing:border-box;
  width:100%;min-width:100%;max-width:100%;min-height:180px;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;font-size:16px;line-height:1.7;resize:vertical;
  font-family:inherit;background:var(--card);color:var(--text);
}
.editor:focus{outline:none;border-color:var(--accent)}
.editor-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.editor-actions--save{align-items:center}
.btn-save{
  border:1px solid var(--accent);border-radius:999px;padding:8px 18px;
  background:var(--accent);color:#fff;font:inherit;font-size:14px;cursor:pointer
}
.btn-save:active{filter:brightness(.94)}
.save-hint{font-size:12px;color:var(--text-3)}

/* 选词填空词库 */
.bank{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;
}
.bank__word{
  border:1px solid var(--line);background:var(--card);border-radius:8px;
  padding:5px 10px;font-size:14px;color:var(--text-2);
}
.bank__word b{color:var(--accent);margin-right:4px;font-weight:600}

/* 段落匹配 */
.para-list{margin-top:8px}
.para{margin:0 0 12px;font-size:16px;line-height:1.75}
.para b{color:var(--accent);margin-right:6px}
/* 正文与待匹配陈述句之间的分隔（先正文、后题目，与试卷一致） */
.stmt-list{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.stmt{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;margin-bottom:10px;
}
.stmt__no{font-weight:600;color:var(--accent);flex:0 0 auto}
.stmt__text{flex:1;font-size:15.5px;line-height:1.6}
.stmt__select{
  flex:0 0 auto;border:1px solid var(--line);border-radius:8px;background:#fff;
  padding:4px 8px;font-size:15px;font-family:inherit;color:var(--text);cursor:pointer;
}
.stmt__select:focus{outline:none;border-color:var(--accent)}

/* 段落标题 */
.passage-title{font-size:19px;font-weight:600;margin:4px 0 16px;line-height:1.4}

/* ===== 听力播放器：时间仅显示在播放器中，原文不显示逐句时间戳 ===== */
.listening-dock{
  position:relative;z-index:25;flex:0 0 auto;
}
.listening-dock[hidden]{display:none!important}
.player{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;
  min-height:64px;padding:8px 16px;
  background:#fff;border-top:1px solid var(--line);position:relative;z-index:18;
}
.player[hidden]{display:none!important}
.player__progress{display:flex;align-items:center;gap:10px;width:100%;min-width:0;padding:0 8px}
.player__time{
  flex:0 0 auto;min-width:42px;color:var(--text-3);font-size:12px;
  font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap;
}
.player__range-wrap{position:relative;display:flex;align-items:center;flex:1;min-width:0;height:24px}
.player__range{
  position:absolute;inset:0;display:block;width:100%;height:24px;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;touch-action:pan-x;cursor:pointer;
  --range-progress:0%;
}
.player__range::-webkit-slider-runnable-track{
  height:4px;border-radius:999px;
  background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--range-progress),var(--line) var(--range-progress),var(--line) 100%);
}
.player__range::-moz-range-track{height:4px;border:0;border-radius:999px;background:var(--line)}
.player__range::-moz-range-progress{height:4px;border:0;border-radius:999px;background:var(--accent)}
.player__range::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border:0;border-radius:50%;background:var(--accent);
}
.player__range::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--accent)}
.player__range:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:999px}
.player__controls{display:flex;align-items:center;justify-content:center;gap:20px;width:100%}
.player__speed{
  min-width:48px;padding:8px 4px;border:0;background:none;color:var(--text-2);
  font-size:14px;font-weight:500;text-align:center;white-space:nowrap;cursor:pointer;
}
.player__play{
  width:48px;height:48px;flex:0 0 auto;border:0;border-radius:50%;
  background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
  position:relative;cursor:pointer;box-shadow:0 4px 12px rgba(255,122,26,.28);
}
.player__play:active{transform:scale(.96)}
.player__play.is-loading{cursor:progress}
.player__play.is-loading svg{visibility:hidden}
.player__play.is-loading::after{
  content:"";position:absolute;width:21px;height:21px;border:2.5px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;animation:cet6-spin .72s linear infinite
}
.player__text{
  min-height:40px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;
  background:var(--accent-soft);color:var(--accent);font-size:13px;white-space:nowrap;cursor:pointer;
}
.player__text.is-on{border-color:var(--accent);background:#fff;color:var(--accent)}

/* 试卷按需加载时的全屏状态，错误时显示重试按钮。 */
.page-loader{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:24px;background:rgba(245,245,247,.94);backdrop-filter:blur(4px)
}
.page-loader[hidden]{display:none!important}
.page-loader__card{
  display:flex;flex-direction:column;align-items:center;gap:12px;max-width:min(360px,100%);
  padding:24px 28px;border:1px solid var(--line);border-radius:18px;background:#fff;
  box-shadow:0 12px 34px rgba(23,31,45,.08);text-align:center
}
.page-loader__card p{margin:0;color:var(--text-2);font-size:14px;line-height:1.6}
.page-loader__spinner{width:28px;height:28px;border:3px solid var(--accent-soft);border-top-color:var(--accent);border-radius:50%;animation:cet6-spin .72s linear infinite}
.page-loader.is-error .page-loader__spinner{display:none}
.page-loader__retry{padding:9px 18px;border:0;border-radius:999px;background:var(--accent);color:#fff;font:inherit;cursor:pointer}
.page-loader__retry[hidden]{display:none}
@keyframes cet6-spin{to{transform:rotate(360deg)}}
@media (min-width:560px){
  .player{flex-direction:row;gap:18px;padding-top:8px;padding-bottom:8px}
  .player__progress{flex:1;min-width:0}
  .player__controls{width:auto;flex:0 0 auto;gap:14px}
}

/* ===== 底部栏（仅手机 / 窄屏）=====
   宽屏下整条隐藏（见文件末尾的 @media min-width:920px）——
   答题卡已常驻右侧，大节切换也能从面板点题号完成。 */
.bottombar{
  flex:0 0 auto;height:var(--bottombar-h);display:flex;align-items:center;gap:10px;
  padding:8px 16px;background:#fff;border-top:1px solid var(--line);z-index:17;
  /* Home 指示条 */
  height:calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px));
}
.bottombar__btn{
  flex:1;height:38px;border-radius:10px;border:1px solid var(--line);
  background:#fff;color:var(--text);font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;
}
.bottombar__btn--primary{border-color:var(--accent);color:var(--accent)}
.bottombar__btn:disabled{opacity:.4;cursor:not-allowed}
.bottombar__btn.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}

/* ===== 内容区滚动条：定成固定宽度 =====
   为什么要自定义而不是用系统默认：
   系统默认可能是**覆盖式滚动条**（Edge 的 fluent、macOS）——
   它不占布局宽度，画在哪儿、多宽全由浏览器决定，
   开合把手就没法可靠地"贴着它"（用户反馈过两次"不贴合"：
   本机无头浏览器是经典滚动条 15px，用户机器是覆盖式 8px，两边表现不一致）。
   自定义成固定 10px 后它必定占据布局宽度，
   app.js 量到的 --sbw 就是真实值，把手用 `padding-right + --sbw` 即可精确贴合。 */
.content::-webkit-scrollbar{ width:10px; }
.content::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.22); border-radius:5px;
}
.content::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,.34); }
.content::-webkit-scrollbar-track{ background:transparent; }

/* ===== 答题卡开合开关（仅宽屏）=====
   做成一根竖向小把手，跟着面板一起移动。

   ⚠️ 位置必须**避开内容区自己的滚动条**（用户反馈过"开关压在了滚动条上"）。
      实测几何（W=1080，滚动条宽 15）：
        展开：滚动条 [809,824]，面板 [840,1080] → 中间只有 16px 的缝
        收起：滚动条 [1049,1064]                   → 把手得挪到它左边
      所以：
        · 右缘 = 滚动条左缘 = `var(--shell-right) + var(--sbw)`
          （收起 shell-right=0 → 就是"从视口右缘向左平移一个滚动条宽度"；
            展开 shell-right=240 → 平移面板宽 + 滚动条宽）。
        · ⚠️ 不含内容区的 padding-right —— `::-webkit-scrollbar` 画在**边框盒右缘**，
          和 padding 无关。实测（W=1080 收起）：滚动条在 x1070~1079，
          按"padding 内侧"算会算到 1054~1064，正好差 16px（用户看到的那道缝）。
        · `--sbw` 是**内容区当前**的滚动条宽度（由 app.js 实测写入）。
          不能用固定值：覆盖式滚动条宽度是 0，写死 15 会在把手和滚动条之间留一道缝。
      `--sbw` 由 app.js 实测写入（Windows 经典滚动条约 15~17px，覆盖式为 0），
      这里给 15px 兜底。 */
:root{ --sbw:15px; }
.sheet-toggle{
  position:fixed;z-index:32;top:50%;transform:translateY(-50%);
  right:calc(var(--shell-right, 0px) + var(--sbw));   /* 右缘 = 滚动条左缘 */
  width:24px;height:56px;padding:0;
  border:1px solid var(--line);border-right:0;border-radius:10px 0 0 10px;
  background:#fff;color:var(--text-2);cursor:pointer;
  display:none;align-items:center;justify-content:center;
  box-shadow:-2px 0 8px rgba(0,0,0,.05);
  transition:right .28s cubic-bezier(.4,0,.2,1), color .15s, background .15s;
}
/* 开关可见性跟随 JS 从底栏实际显示状态判定的停靠模式，避免小数 CSS 宽度
   落在 919px 与 920px 两条媒体查询之间时，露出行为不匹配的开关。 */
body.is-sheet-wide .sheet-toggle{display:flex}
.sheet-toggle:hover{color:var(--accent);background:var(--accent-soft)}
.sheet-toggle__ico{transition:transform .28s cubic-bezier(.4,0,.2,1)}
/* 展开时移到面板左缘，箭头翻转指向"收起"方向 */
body.is-sheet-open .sheet-toggle__ico{transform:rotate(180deg)}

/* ===== 答题卡抽屉 ===== */
.sheet-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:30;
  animation:fade .2s ease;
}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:31;
  background:#fff;border-radius:18px 18px 0 0;
  max-height:70vh;display:flex;flex-direction:column;
  animation:slideUp .25s ease;
}
/* hidden 优先级必须高于 display:flex，否则抽屉会默认展开 */
.sheet[hidden],.sheet-mask[hidden],.fab[hidden],.qnav[hidden]{display:none !important}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px 10px;border-bottom:1px solid var(--line);
}
.sheet__head h2{margin:0;font-size:16px}
.sheet__close{border:0;background:none;font-size:18px;color:var(--text-3);cursor:pointer}
.sheet__body{overflow-y:auto;padding:16px 20px 24px}
/* 抽屉底部的操作区（如"清除本套记录"） */
.sheet-foot{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);text-align:center}
.btn-clear{
  border:1px solid var(--line);background:var(--card);color:var(--text-2);
  border-radius:999px;padding:8px 18px;font-size:13px;cursor:pointer;font-family:inherit;
}
.btn-clear:active{background:var(--gray-chip)}
.btn-clear--danger{border-color:#e8b4b4;color:#c0392b}
.btn-clear--danger:active{background:#fdf0f0}
.btn-clear[disabled]{opacity:.5;cursor:default}
.sheet-group{margin-bottom:20px}
.sheet-group__title{font-size:13px;color:var(--text-3);margin-bottom:10px}
.sheet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:10px}
.sheet-num{
  aspect-ratio:1;border:1px solid var(--line);border-radius:10px;background:#fff;
  font-size:15px;color:var(--text);cursor:pointer;font-family:inherit;
}
.sheet-num--text{
  aspect-ratio:auto;min-height:50px;padding:4px;font-size:13px;white-space:nowrap;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px
}
.sheet-num--section{
  grid-column:1/-1;aspect-ratio:auto;min-height:44px;padding:10px 12px;
  text-align:left;white-space:normal
}
.sheet-num__ordinal{font-size:11px;line-height:1.2;opacity:.78}
.sheet-num.is-done{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- 听力原文：贴在播放器上方，按钮触发向上展开 ---------- */
.transcript-panel{
  position:absolute;left:0;right:var(--shell-right, 0px);bottom:100%;z-index:16;
  display:flex;flex-direction:column;max-height:min(70dvh, calc(100dvh - var(--topbar-h) - var(--bottombar-h) - 140px));
  overflow:hidden;background:#fff;border:1px solid var(--line);border-bottom:0;
  border-radius:16px 16px 0 0;box-shadow:0 -8px 26px rgba(0,0,0,.10);
  opacity:0;visibility:hidden;transform:translateY(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .2s ease,visibility 0s .28s;
}
body.is-transcript-open .transcript-panel{
  z-index:26;opacity:1;visibility:visible;transform:translateY(0);
  transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .2s ease,visibility 0s;
}
.transcript-panel .sheet__head{flex:0 0 auto}
.transcript-panel .sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto}
@media (prefers-reduced-motion:reduce){
  .transcript-panel,body.is-transcript-open .transcript-panel{transition:none}
}
.ts-seg{margin-bottom:26px}
.ts-seg:last-of-type{margin-bottom:8px}
.ts-seg__title{
  margin:0 0 12px;font-size:15px;font-weight:600;color:var(--text);
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
}
.ts-seg__label{display:flex;align-items:center;gap:8px;min-width:0}
.ts-seg__jump{
  flex:0 0 auto;border:1px solid var(--line);border-radius:999px;
  padding:4px 10px;background:var(--accent-soft);color:var(--accent);
  font:inherit;font-size:12px;font-weight:500;cursor:pointer;
}
.ts-seg__jump:hover{border-color:var(--accent)}
.ts-seg__jump:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ts-seg__jump:active{transform:translateY(1px)}
.ts-seg__jump:disabled{opacity:.55;cursor:not-allowed}
.ts-seg__jump-time{font-variant-numeric:tabular-nums}
.ts-seg__title .ts-seg__q{flex:0 0 auto}
.ts-seg__title .ts-seg__label{flex-wrap:wrap}
.ts-seg__q{
  font-size:12px;font-weight:400;color:var(--accent);
  background:var(--accent-soft);border-radius:999px;padding:2px 8px;
}
.ts-seg__text p{
  margin:0 0 12px;font-size:15px;line-height:1.85;color:var(--text);
}
.ts-line{display:flex;gap:8px;align-items:flex-start}
.ts-who{
  flex:0 0 18px;color:var(--accent);font-weight:600;
  font-size:14px;line-height:1.85;
}
.ts-empty{color:var(--text-3);font-size:14px}
.ts-sources{margin:12px 0 0;padding-left:22px;color:var(--text-2)}
.ts-sources li{margin:8px 0;line-height:1.55}
.ts-sources a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* ---------- 刷新恢复：定位高亮闪烁 ---------- */
@keyframes flashPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,122,26,.55); }
  60%  { box-shadow: 0 0 0 8px rgba(255,122,26,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,122,26,0); }
}
.flash {
  animation: flashPulse 1.2s ease-out 1;
  border-radius: 10px;
}

/* 题组起始锚点：不可见、不占位，仅作为"正文/引导语开头"的滚动定位点。
   scroll-margin-top 留出一点间距，避免贴顶。 */
.group-start {
  display: block;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  scroll-margin-top: 6px;
}

/* =========================================================
   宽屏适配：各条栏的内容与正文同宽并居中
   ---------------------------------------------------------
   正文 .content__inner 本来就是 760px 居中，顶栏 / 题号条 / 底栏
   是**通栏**；宽屏下让它们与正文保持一致的可读宽度。

   做法：用 padding-inline 把每栏的内容"夹"到与正文同宽，**不改 HTML 结构**：
       padding-inline: max(基础内边距, (100% - var(--content-w)) / 2)
   窄屏时 (100% - 760px)/2 为负 → max() 取基础内边距 → 移动端完全不受影响。
   （百分比按包含块宽度解析；这些栏的包含块就是视口，故 100% == 窗口宽。）

   ⚠️ 必须放在文件末尾：前面各栏的 `padding:0 12px` 是简写，会覆盖同优先级的
      padding-inline，靠"后来居上"才能生效。
   ========================================================= */
.topbar,.qnav,.player,.bottombar{
  padding-inline:max(16px, calc((100% - var(--content-w)) / 2));
}
/* 抽屉内容同样限宽，避免宽屏下正文被拉成超长行 */
.sheet__body{
  padding-inline:max(20px, calc((100% - var(--content-w)) / 2));
}

/* =========================================================
   答题卡：宽屏下改成**右侧停靠面板**（默认展开），正文整体左移
   ---------------------------------------------------------
   窄屏（< 920px）放不下"正文 + 240px 面板 + 把手 + 滚动条"，
   继续用原来的底部抽屉（带遮罩），只是把开合交给同一个开关按钮。
   ⚠️ 断点为什么是 920 而不是更高：面板 240 + 内边距 32 + 滚动条 10 + 把手 24
      = 306px 的固定开销，920 时正文还剩 614px，仍然可读。
      实测用户机器 1920×1080 @125%（CSS 宽 = 物理宽 / 1.25）——
      断点 1040 意味着窗口窄于 1300 物理像素就切手机模式（只占屏幕 68%），
      降到 920 后 1150 物理像素以上都是桌面模式。

   为什么用 --shell-right 这一个变量驱动：
     正文 .content__inner 靠 margin:auto 居中，各横条靠 padding-inline 居中，
     两套算法必须用**同一个**可用宽度，否则面板一开正文就和横条错位。
     把"右侧被占掉的宽度"抽成一个变量，两边同时减它即可。
   ========================================================= */
:root{ --sheet-w:240px; }
body{ --shell-right:0px; }


@media (min-width:920px){
  /* 有题号的大节用右侧答题卡切换；没有题号的部分仍显示底部切换栏。 */
  .bottombar{display:none}
  :root{ --toggle-w:24px; }      /* 与 .sheet-toggle 的 width 保持一致 */

  /* 面板展开时，右侧被占掉 240px */
  body.is-sheet-open{ --shell-right:var(--sheet-w); }
  body.has-section-nav .bottombar{
    display:flex;margin-right:var(--shell-right);
    padding-left:var(--pad-l);
    padding-right:calc(var(--pad-l) + var(--shell-right));
  }

  /* 正文区整体缩窄（margin 而不是 padding）—— 这一点很关键：
     用 padding 让位时，内容区的滚动条会落在停靠面板底下被盖住（拖不到，
     实测像素扫描确认展开态根本扫不到滑块）；
     用 margin 缩窄后它的边框盒真正结束在面板左侧，滚动条露在外面。
     ⚠️ `::-webkit-scrollbar` 画在**边框盒右缘**，不受 padding-right 影响 ——
        所以把手的定位基准是"面板宽 + 滚动条宽"，与 padding 无关。 */
  .content{ margin-right:var(--shell-right); }

  /* 各横条：内容仍是 760 宽，但要在"视口 − 面板"这块区域里居中。
     ⚠️ 左右内边距**不能相等** —— 右侧还要再让出面板那 240px，
        否则横条会一直铺到面板底下。
        左 = (可用宽 − 760)/2；右 = 左 + 面板宽。 */
  body{ --pad-l:max(16px, calc((100% - var(--shell-right) - var(--content-w)) / 2)); }
  .topbar,.qnav,.player{
    padding-left:var(--pad-l);
    padding-right:calc(var(--pad-l) + var(--shell-right));
  }
  /* 悬浮按钮别被面板盖住 */
  .fab{ right:calc(18px + var(--shell-right)); }

  /* 位移过渡（"正文往左平移"的动画就来自这里） */
  .content,.topbar,.qnav,.player,.fab{
    transition:padding-left .28s cubic-bezier(.4,0,.2,1),
               padding-right .28s cubic-bezier(.4,0,.2,1),
               margin-right .28s cubic-bezier(.4,0,.2,1),
               right .28s cubic-bezier(.4,0,.2,1);
  }

  /* ---- 面板本体：从右侧滑入 ---- */
  #sheet{
    top:0;bottom:0;left:auto;right:0;
    width:var(--sheet-w);max-height:none;
    border-radius:0;border-left:1px solid var(--line);
    animation:none;
    visibility:hidden;                 /* 收起时不参与 Tab 焦点 */
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1), visibility 0s .28s;
  }
  body.is-sheet-open #sheet{
    visibility:visible;
    transform:translateX(0);
    transition:transform .28s cubic-bezier(.4,0,.2,1), visibility 0s 0s;
  }
  /* 停靠模式不需要遮罩（点空白不该收起面板） */
  .sheet-mask{display:none !important}

  /* 面板变窄了，内边距收紧 */
  #sheet .sheet__head{padding:14px 16px 10px}
  #sheet .sheet__body{padding:14px 16px 20px}
  #sheet .sheet-group{margin-bottom:16px}
}

/* 窄屏时底栏可见，开关隐藏，悬浮按钮给底栏让位。
   使用同一个停靠模式 class，避免 919.x CSS 像素时媒体查询留缝。 */
body:not(.is-sheet-wide) .fab{bottom:calc(var(--bottombar-h) + 88px)}


/* =========================================================
   触摸设备：把主要控件的点击区提到 44px
   iOS HIG 建议 44×44，Material 建议 48×48。
   用 (pointer:coarse) 判断而不是 UA 嗅探 —— 触屏笔记本也会命中，正好。
   实测（iPhone SE / Pixel 7）原来最小的题号条按钮只有 30px。
   ========================================================= */
@media (pointer:coarse){
  .qnav__item{ min-width:44px; min-height:44px; padding:6px 10px; }
  .bottombar__btn{ height:44px; }
  .player__play{min-width:48px;min-height:48px}
  .player__text{min-height:44px}
  .player__range-wrap,.player__range{height:44px}
  .sheet-num{ min-height:44px; }
  .btn-clear{ min-height:44px; padding:10px 18px; }
  /* 收藏星星（首页）：实测只有 38×38，低于 44。
     卡片给它留了 56px 右内边距，放大到 44 仍放得下（44+10=54 < 56）。 */
  .fav{ min-width:44px; min-height:44px; }
  /* 段落匹配的字母下拉框 */
  .stmt__select{ min-height:44px; }
  /* 答题卡开合把手：视觉上必须保持 24px 宽（要贴合滚动条），
     所以不改宽度，改用伪元素把**可点区域**往外扩一圈。 */
  .sheet-toggle::after{ content:''; position:absolute; inset:-10px -12px; }
}