/* EchoLine - 淡雅简洁，移动端优先 */

:root {
  --bg: #f8f6f3;
  --bg-card: #fff;
  --text: #3d3a36;
  --text-muted: #7a756e;
  --accent: #8b7355;
  --accent-soft: #c4b5a0;
  --border: #e8e4df;
  --highlight: #e8e0d5;
  --chip: #efe9e1;   /* 点开选的胶囊按钮底色（?dev=1） */
  --rec: #c0503a; /* 录音（跟读）：偏咖的红，和米色、咖色搭 */
  --good: #3d7a4f; /* 填空答对：偏暗的绿 */
  --ok: #b0761c; /* 填空答错：琥珀橙，不用红，不像在批评 */
  /* 积累卡片配色（2026-11-12 第二版，同色一浅一深）：收藏卡主色极浅底，错题卡主色深一档的底，错题圆标是主色淡一号 */
  --accent2: #a28a6d;
  --accent-wash: #fcf4ec;
  --accent2-wash: #f5e8d8;
  --safe-top: env(safe-area-inset-top, 0);
  --safe-bottom: env(safe-area-inset-bottom, 0);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
}

#app {
  min-height: 100%;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

/* Pages */
.page {
  display: none;
  min-height: 100vh;
  flex-direction: column;
}

.page.active {
  display: flex;
}

/* ---------- 剧集列表页 ---------- */
#episode-list-page {
  padding: 1rem 1rem 2rem;
}

.header {
  text-align: center;
  margin-bottom: 1.5rem;
  padding: 1rem 0;
}

.header h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}

.subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* 看剧按季分（正式版也有）：标题下面一排「第 7 季 | 第 8 季 | 第 10 季」，样子同练习页的等级按钮（.seg-ctl）。
   季多到一行放不下时可以左右滑 */
.season-bar {
  margin-top: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.season-bar::-webkit-scrollbar {
  display: none;
}

.season-bar button {
  flex: 1 0 auto;
  min-width: 4.5rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
}

.header.with-seasons {
  margin-bottom: 0.75rem;
  padding-bottom: 0.25rem;
}

.episode-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.episode-list li {
  margin: 0;
}

.episode-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
  transition: background 0.15s, border-color 0.15s;
}

.episode-link:active {
  background: var(--highlight);
}

.episode-thumb {
  flex: 0 0 auto;
  width: 96px;
  height: 54px;
  border-radius: 6px;
  background: var(--border);
  background-size: cover;
  background-position: center;
}

.episode-thumb.loaded {
  background-color: transparent;
}

.episode-info {
  flex: 1 1 auto;
  min-width: 0;
}

.episode-link .title {
  font-weight: 500;
  display: block;
}

.episode-link .meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  display: block;
}

/* 继续看（?dev=1，js/resume.js）：列表最上面一张卡，和剧集卡片同一种样子，多一行咖色小字和底部一条细线 */
.episode-list li.resume-item {
  margin-bottom: 0.5rem;
}

.resume-link {
  position: relative;
  overflow: hidden;
}

.resume-kicker {
  display: block;
  font-size: 0.78rem;
  color: var(--accent);
  margin-bottom: 0.15rem;
  white-space: nowrap;
}

.resume-chev {
  flex: 0 0 auto;
  color: var(--accent-soft);
  font-size: 1.2rem;
}

.resume-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: var(--accent-soft);
}

.empty-hint {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 2rem 1rem;
}

.empty-hint.hidden {
  display: none;
}

/* 剧集列表取不到时：一行标题、一行说明、一个「重试」 */
.load-failed p {
  margin: 0 0 0.35rem;
}

.load-failed .load-failed-title {
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
}

.load-failed .role-secondary {
  margin-top: 0.75rem;
}

.load-failed .role-secondary:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---------- 播放页 ---------- */
#player-page {
  height: 100vh;
  overflow: hidden;
}

.back-link {
  flex-shrink: 0;
  padding: 0.75rem 1rem;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
}

.back-link:active {
  opacity: 0.8;
}

/* 返回只占文字和它四周的留白，不占整行（片段页右边还有页签，点偏一点不该退出去） */
#player-page > .back-link {
  align-self: flex-start;
}

/* 点按范围至少 44×44（苹果人机界面指南）：样子不变，用一层透明的 ::after 往外扩，居中盖在按钮上 */
.seg-ctl button,
.practice-back,
.back-link,
.account-textlink,
.role-chip,
.fill-opts button,
.pop-btn {
  position: relative;
}

.seg-ctl button::after,
.practice-back::after,
.back-link::after,
.account-textlink::after,
.role-chip::after,
.fill-opts button::after,
.pop-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

.video-section {
  flex: 0 0 auto;
  position: relative;
  width: 100%;
  background: #1a1a1a;
  /* 高度由视频（最高 45vh）加控制栏决定，不再整体截断，否则控制栏下面的 A/B 按钮会被切掉 */
}

#video {
  display: block;
  width: 100%;
  max-height: 45vh;
  object-fit: contain;
}

.video-controls-overlay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--panel, rgba(248, 246, 243, 0.98));
  border-top: 1px solid var(--border);
}

.controls-right {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.subtitle-mode-control,
.speed-control {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.subtitle-mode-control label,
.speed-control label {
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 2em;
  text-align: right;
}

.subtitle-mode-control select,
.speed-control select {
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.subtitle-section {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.subtitle-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
}

.subtitle-line {
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  border: 1px solid transparent;
}

.subtitle-line:active,
.subtitle-line.pressing {
  background: var(--highlight);
}

.subtitle-line.current {
  background: var(--highlight);
  border-color: var(--accent-soft);
}

.subtitle-line .timestamp {
  flex-shrink: 0;
  font-size: 0.68rem;
  color: var(--text-muted);
  opacity: 0.4;
  font-variant-numeric: tabular-nums;
  user-select: none;
  min-width: 3.5em;
  text-align: right;
}

/* 单句循环图标（?dev=1）：序号下面一个小图标，序号还按原来的基线对齐 */
.subtitle-line .ts-col {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}

.subtitle-line .loop-one-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.subtitle-line .text-wrap {
  flex: 1;
  min-width: 0;
}

.subtitle-line .text {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text);
  display: block;
}

.subtitle-line .text-zh {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
  display: block;
}

.subtitle-line.loop-a {
  border-left: 3px solid #4a9;
}

.subtitle-line.loop-b {
  border-left: 3px solid #557ac5;
}

.subtitle-line.loop-a .text::before {
  content: 'A ';
  color: #4a9;
  font-weight: 700;
  font-size: 0.8em;
}

.subtitle-line.loop-b .text::before {
  content: 'B ';
  color: #557ac5;
  font-weight: 700;
  font-size: 0.8em;
}

/* ---------- 跟读（?dev=1，js/shadowing.js） ---------- */

/* 正在循环的那一句右边一列：星（登录了才有）在上、麦克风在下；点的范围都是 44 像素见方 */
.subtitle-line.has-mic {
  padding-right: 0.25rem;
}

.line-acts {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: -0.6rem 0;
}

.line-acts .fav-star {
  margin: 0;
}

.shadow-mic {
  position: relative;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  cursor: pointer;
  touch-action: manipulation;
}

.shadow-mic svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 录音中：红底白方块（照 iPhone「语音备忘录」的停止键），外面一圈慢慢散开 */
.shadow-mic.rec svg {
  display: none;
}

.shadow-mic.rec::before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--rec);
  animation: rec-ring 1.4s ease-out infinite;
}

.shadow-mic.rec::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 2px;
  background: #fff;
}

@keyframes rec-ring {
  0% { box-shadow: 0 0 0 0 rgba(192, 80, 58, 0.25); }
  100% { box-shadow: 0 0 0 9px rgba(192, 80, 58, 0); }
}

/* 声波：录音时红色、新的在右边往左滚；播放录音时整条摊开，播过的部分变深。
   扮演录音时句子下面也是这条红色声波（.role-wave，js/roleplay.js） */
.shadow-wave,
.role-wave {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  height: 28px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.shadow-wave i,
.role-wave i {
  flex: 0 0 3px;
  min-height: 3px;
  border-radius: 2px;
  background: var(--rec);
}

.shadow-wave.mine {
  justify-content: flex-start;
}

.shadow-wave.mine i {
  background: var(--accent-soft);
}

.shadow-wave.mine i.done {
  background: var(--accent);
}

/* 句子下面的录音条：录音时只有声波；录过以后左边一个圆的播放键（照 iPhone 信息里的语音消息） */
.shadow-take {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.shadow-take .shadow-wave {
  flex: 1;
  min-width: 0;
  margin-top: 0;
}

.shadow-play {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.5rem -0.35rem -0.5rem -0.6rem;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}

.shadow-play span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.shadow-play svg {
  width: 12px;
  height: 12px;
  fill: #fff;
}

/* 打分测试版：逐词标颜色（照 ELSA：读得好绿色，一般橙色，没读准红色下划线，漏读红色删除线） */
.w-good { color: #3d7a4f; }
.w-ok { color: #b0761c; }
.w-bad {
  color: var(--rec);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.w-miss {
  color: var(--rec);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  opacity: 0.85;
}

/* 录音那一行下面：左边总分，竖线，右边两行两列四项，最右 ⓘ（照模拟页第六版；360 宽的手机也排得下一行） */
.shadow-score {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.shadow-score .why { display: block; line-height: 1.4; }
.score-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.score-row .total {
  display: flex;
  align-items: baseline;
  gap: 0.1rem;
  color: var(--text);
  white-space: nowrap;
}
.score-row .total b {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
}
.score-row .parts {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.1rem 0.9rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--accent-soft);
  font-size: 0.78rem;
  line-height: 1.45;
}
.score-row .parts span { white-space: nowrap; }
.score-row .parts em {
  font-style: normal;
  color: var(--text);
  margin-left: 0.3rem;
}
/* ⓘ：照 iPhone 的 info.circle，点的范围 44 像素见方 */
.score-info,
.rp-info {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.5rem -0.75rem -0.5rem -0.6rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
}
.score-info svg,
.rp-info svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.score-info svg .dot,
.rp-info svg .dot { fill: currentColor; stroke: none; }
/* 点 ⓘ 展开的说明 */
.score-help {
  margin-top: 0.55rem;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
}
.score-help dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.75rem;
  margin: 0;
}
.score-help dt { color: var(--text); white-space: nowrap; }
.score-help dd { margin: 0; }
.score-help dl + dl {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

/* 拿不到麦克风时，这一句下面一行提示（不弹窗） */
.shadow-err {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--rec);
}

/* 视频下面那一行：录音时字变红，前面一个闪的小红点 */
.range-hint.rec {
  color: var(--rec);
}

.range-hint.rec::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: var(--rec);
  vertical-align: 0.1em;
  animation: rec-blink 1.2s ease-in-out infinite;
}

@keyframes rec-blink {
  50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .shadow-mic.rec::before,
  .range-hint.rec::before { animation: none; }
}

/* ---------- 点一句就循环、段落循环（先放在 ?dev=1 后面） ---------- */

/* 视频下面那一行：左边「段落循环」，右边字幕和语速 */
.line-tools-on .controls-right {
  flex-direction: row;
  gap: 0.9rem;
}

.line-tools-on .video-controls-overlay {
  flex-wrap: wrap;
  row-gap: 0.35rem;
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.6rem;
  min-height: 2.2rem;
  font-family: inherit;
  font-size: 0.85rem;
  white-space: nowrap;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  touch-action: manipulation;
}

.tool-btn:active {
  background: var(--highlight);
}

/* 段落循环中 */
.tool-btn.on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* 正在选起点、终点 */
.tool-btn.picking {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.tool-icon {
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 段落循环的提示：选的时候说怎么选，循环中写明第几句到第几句。
   手机上排在按钮那一行下面；屏幕宽（电脑）时放在按钮右边的空白里，不多占一行 */
.range-hint {
  order: 3;
  flex-basis: 100%;
  font-size: 0.85rem;
  color: var(--accent);
}

@media (min-width: 640px) {
  .range-hint {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
  }
}

.range-hint[hidden] {
  display: none;
}

/* 状态行后面那句小字（?dev=1，2026-11-07 Weiwei 定）：单句循环「再次轻点这句即可退出」，
   录音「说完即可，录音会自动结束」。一直写，但比状态行（13.6 像素）小一点、用浅灰，看得到又不抢眼；
   不小于全站最小字号 13 像素 */
.loop-exit-tip {
  margin-left: 0.5em;
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* 看剧页单句循环：「单句循环中」和后面的小字中间空大一点；这一行一定一行写完（放不下时脚本换短的说法） */
.loop-exit-tip.wide {
  margin-left: 1em;
}

.range-hint.one-line {
  white-space: nowrap;
  overflow: hidden;
}

/* 看剧页的提示行放进一条浅底圆角条（2026-11-07 Weiwei 选甲，照苹果系统的小提示卡片）：
   一眼看得出是提示，又不抢视频和字幕。手机上往两边伸进留白里，字能用的宽度不变 */
.range-hint.tip-box {
  background: var(--chip);
  border-radius: 8px;
  padding: 0.42rem 0.5rem;
}

@media (max-width: 639px) {
  .range-hint.tip-box {
    margin: 0 -0.5rem;
    flex-basis: calc(100% + 1rem);
    max-width: calc(100% + 1rem);
  }
}

/* 练习片段刚进来、还没点句子：这一行只有小字，前面不空 */
.loop-exit-tip.only {
  margin-left: 0;
}

/* 练习片段跟读里小字中间的小麦克风：和句子右边的麦克风一个样子，跟着字的大小和颜色 */
.loop-exit-tip svg {
  width: 13px;
  height: 13px;
  margin: 0 1px;
  vertical-align: -2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 已收藏时小字里的星是实心的，和句子右边的星一样 */
.loop-exit-tip svg.fill {
  fill: currentColor;
}

/* 收藏页这一行右边还有字幕、语速，放不下一整行：小字换到「单句循环中」下面 */
.fav-controls .loop-exit-tip {
  display: block;
  margin-left: 0;
  white-space: normal;  /* 左边窄，放不下时折行，不压到右边的按钮 */
}

/* 收藏页的新提示（?dev=1，2026-11-07）：和看剧一样放在「字幕」「语速」下面一行，浅底条，一行写完 */
@media (max-width: 639px) {
  .fav-controls .range-hint.fav-below {
    order: 3;
    flex: 0 0 calc(100% + 1rem);
    max-width: calc(100% + 1rem);
  }
}

.fav-controls .range-hint.fav-below .loop-exit-tip {
  display: inline;
  margin-left: 0.5em;
  white-space: nowrap;
}

.fav-controls .range-hint.fav-below .loop-exit-tip.wide {
  margin-left: 1em;
}

.fav-controls .range-hint.fav-below .loop-exit-tip.only {
  margin-left: 0;
}

/* 段落循环：不写 A、B 字母；从起点到结束句连成一整块浅米色底，左边一条浅咖色竖线不断开 */
.line-tools-on .subtitle-line.loop-a .text::before,
.line-tools-on .subtitle-line.loop-b .text::before {
  content: none;
}

.line-tools-on .subtitle-line.loop-a,
.line-tools-on .subtitle-line.loop-b {
  border-left: 1px solid transparent;
}

.line-tools-on .subtitle-line.in-range {
  margin-bottom: 0;
  border: 0;
  border-left: 3px solid var(--accent-soft);
  border-radius: 0;
  padding-top: calc(0.75rem + 1px);
  padding-bottom: calc(0.75rem + 1px);
  background: var(--range, #f3ece2); /* 和页面的米色、咖色同一个色系，只比页面底色深一点点 */
}

.line-tools-on .subtitle-line.in-range.current {
  background: var(--range-cur, #ebe1d3);
}

.line-tools-on .subtitle-line.range-first {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.line-tools-on .subtitle-line.range-last {
  margin-bottom: 0.5rem;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* ---------- 账号（?dev=1）：底部入口、我的、登录、邀请和重置链接 ---------- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 0 env(safe-area-inset-right, 0) var(--safe-bottom) env(safe-area-inset-left, 0);
}

.tabbar[hidden],
#player-page.active ~ .tabbar,
#auth-page.active ~ .tabbar,
.login-gate .tabbar {
  display: none;
}

/* 没登录先登录（js/account.js）：还不知道登没登录时只显示底色，免得剧集列表一闪 */
.auth-checking .page,
.auth-checking .tabbar {
  visibility: hidden;
}

.tabbar button {
  flex: 1;
  padding: 0.55rem 0 0.5rem;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-family: inherit;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  cursor: pointer;
}

/* 底部入口的图标：没选中的是空心线条，选中的是实心（照 iPhone 的标签栏，2026-11-05 Weiwei 定） */
.tabbar .ico {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;   /* 积累那摞卡片上面两条边的头是圆的（照 SF Symbols） */
}

.tabbar button.active {
  color: var(--accent);
  font-weight: 600;
}

.tabbar button.active .ico-fill {
  fill: currentColor;
}

/* 练习的靶心：选中时外圈实心，中间留一个底色的圆点 */
.tabbar button.active .ico-hole {
  fill: var(--bg);
  stroke: var(--bg);
}

/* 有底部入口时，列表页底下留出它的高度 */
.has-tabbar #episode-list-page,
#practice-page,
#mine-page,
#auth-page {
  padding: 1rem 1rem calc(4.5rem + var(--safe-bottom));
}

.account-body {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.account-form h2 {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
}

/* 登录页上为什么要登录的那句说明（没登录先登录时才有），和其他说明一样大的字 */
.account-why {
  margin: -0.75rem 0 1.25rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
}

/* 删除账号后上面还有一行「账号已删除」：两行之间留开 */
.account-notice + .account-why {
  margin-top: 0.75rem;
}

.account-lead {
  margin: -0.3rem 0 0.2rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
  overflow-wrap: anywhere;
}

.account-field {
  width: 100%;
  padding: 0.75rem 0.85rem;
  font-size: 1rem; /* 不小于 16px，iPhone 点输入框时不会自动放大页面 */
  font-family: inherit;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.account-field:focus {
  outline: 2px solid var(--accent-soft);
  outline-offset: -1px;
}

/* 设新密码那一栏右边的眼睛（?dev=1）：点一下显示密码，再点藏起 */
.account-pw {
  position: relative;
}

.account-pw .account-field {
  padding-right: 3rem;
}

.account-eye {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.account-eye svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-primary {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.account-primary:disabled {
  opacity: 0.6;
}

.account-msg {
  min-height: 1.4em;
  margin: 0;
  font-size: 0.88rem;
  color: var(--danger, #a5523a);
  text-align: center;
}

.account-msg.ok {
  color: var(--text-muted);
}

.account-who {
  margin: 0 0 1.2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

/* 像 iPhone 设置那样的一组一组 */
.account-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.account-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: none;
  border: 0;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.account-cell + .account-cell,
.account-cell + .account-sub {
  border-top: 1px solid var(--border);
}

.account-cell:active {
  background: var(--highlight);
}

.account-cell.center {
  justify-content: center;
  color: var(--accent);
}

.account-chev {
  color: var(--accent-soft);
}

.account-sub {
  padding: 0.75rem 1rem 0.5rem;
}

.account-who {
  padding: 1.6rem 0 0.4rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
}

.account-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  min-height: 1.3em;
  margin: -0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.account-hint .met {
  color: var(--accent);
  font-weight: 600;
}

/* 密码的四条要求一条一行，左边对齐 */
.account-hint.account-rules {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.account-bars {
  display: inline-flex;
  gap: 3px;
}

.account-bars i {
  width: 1.6rem;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
}

.account-bars i.on {
  background: var(--accent);
}

.account-textlink {
  align-self: center;
  padding: 0.2rem;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 0.9rem;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.account-help {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
}

/* 登录下面「还没有账号？立即创建」，和上面的登录隔一条线 */
.account-signup {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.1rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* 「立即创建」加下划线、字加粗，和前面灰色的「还没有账号？」一眼分开，看得出能点（2026-11-11 Weiwei）。
   点按范围照旧由 .account-textlink::after 扩到 44×44 */
.account-signup .account-textlink {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* 创建账号、忘记密码时左上角的「取消 / 返回」；邀请链接页面里是空的 */
.auth-nav {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  max-width: 420px;
  margin: -0.5rem auto 0;
}

.auth-nav button {
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 1rem;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}

/* 6 位验证码：6 个分开的格子，数字直接显示，正在填的那一格咖色框加闪动的光标（2026-11-09 Weiwei 在模拟页上选甲；
   原来的一个输入框加 6 个灰点像锁屏密码）。真正的输入框透明地盖满整排格子，点哪一格都是点它 */
.account-otp {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0.2rem 0;
}

.account-otp input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px; /* 不小于 16px，iPhone 点输入框时不会自动放大页面 */
  color: transparent;
  background: transparent;
  caret-color: transparent;
}

.account-otp span {
  width: 46px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 1.6rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}

/* 手指一碰，整排格子马上变色（防误点规则 2） */
.account-otp:active span {
  background: var(--chip);
}

.account-otp.focus span.cur {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.account-otp.focus span.cur:empty::after {
  content: "";
  width: 2px;
  height: 26px;
  border-radius: 1px;
  background: var(--accent);
  animation: otp-blink 1.1s steps(1) infinite;
}

@keyframes otp-blink {
  50% { opacity: 0; }
}

.account-otp.full span {
  border-color: var(--good);
}

@media (max-width: 360px) {
  .account-otp span {
    width: 40px;
    height: 52px;
  }
}

.account-lead b {
  color: var(--text);
  font-weight: 600;
}

.account-textlink:disabled {
  color: var(--text-muted);
  cursor: default;
}

/* 删除账号：那一行和确认按钮用提示错误的红咖色 */
.account-cell.danger {
  color: var(--danger, #a5523a);
}

.account-primary.danger {
  background: var(--danger, #a5523a);
}

/* 登录页顶上的一行结果（「账号已删除。」） */
.account-notice {
  margin: -0.6rem 0 0.8rem;
}

/* 错误提示里的「去登录」 */
.account-inline {
  padding: 0 0.2rem;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: inherit;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}

/* ---------- 收藏（?dev=1，登录了才有） ---------- */

/* 播放页：星的位置一直留着，出现、消失时句子不重新换行；点的范围 44 像素见方 */
.subtitle-list.fav-on .subtitle-line {
  padding-right: 0.25rem;
}

.fav-star {
  flex-shrink: 0;
  align-self: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.6rem 0;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  cursor: pointer;
  visibility: hidden;
}

.fav-star svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  transition: transform 0.18s;
}

.fav-star.saved svg {
  fill: currentColor;
}

.fav-star.pop svg {
  transform: scale(1.25);
}

/* 正在放的那一句出空心星；收藏过的一直是实心星 */
.subtitle-line.current .fav-star,
.fav-every .fav-star,
.fav-star.saved {
  visibility: visible;
}

.fav-every .subtitle-line:not(.current) .fav-star:not(.saved) svg {
  stroke: var(--accent-soft);
}

@media (prefers-reduced-motion: reduce) {
  .fav-star svg { transition: none; }
  .fav-star.pop svg { transform: none; }
}

/* 收藏和跟读按钮靠左（「我的 › 设置 › 显示」，js/settings.js 给 html 加 .acts-left；2026-11-11 Weiwei 定）：
   左手拿手机时拇指够不到最右边。星和话筒那一列整个挪到每句最左边，样子、大小、点法都不变；
   原来右边留给按钮的窄边距跟着换到左边。扮演、填空时这一列本来就藏起来，句子边距不动 */
.acts-left .subtitle-line .line-acts,
.acts-left .subtitle-line .fav-star {
  order: -1;
}

.acts-left #player-page:not(.role-mode):not(.fill-mode) .subtitle-list.fav-on .subtitle-line,
.acts-left .subtitle-line.has-mic,
.acts-left #fav-list.subtitle-list .subtitle-line {
  padding-left: 0.25rem;
  padding-right: 1rem;
}

/* 收藏页的分组小标题和句子文字左边对齐：句子往右让了 0.25rem + 星 2.75rem + 空隙 0.6rem - 原来左边距 1rem = 2.6rem */
.acts-left .fav-group-h {
  margin-left: 7.1rem;
}

/* 我的：「收藏」那一行右边的句数 */
.account-value {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* 收藏页：和看剧同一种播放页（上面视频，下面收藏的句子），版式沿用播放页的 */
#favorites-page,
#mistakes-page {
  height: 100vh;
  overflow: hidden;
}

#favorites-page.active ~ .tabbar,
#mistakes-page.active ~ .tabbar {
  display: none;
}

.fav-video-wrap {
  position: relative;
  background: #1a1a1a;
}

#fav-video,
#mis-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 45vh;
  object-fit: contain;
  background: #1a1a1a;
}

/* 停着时画面中间一个播放键（没有系统进度条，拖不出这一句）。练习的片段里也用它（js/scenes.js） */
.fav-play,
.scene-play {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fav-play[hidden],
.scene-play[hidden] {
  display: none;
}

.fav-play span,
.scene-play span {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--panel-soft, rgba(248, 246, 243, 0.85));
  position: relative;
}

.fav-play span::after,
.scene-play span::after {
  content: "";
  position: absolute;
  left: 1.35rem;
  top: 1.05rem;
  border-style: solid;
  border-width: 0.7rem 0 0.7rem 1.1rem;
  border-color: transparent transparent transparent var(--accent);
}

.fav-controls .range-hint {
  flex: 1 1 auto;
  order: 0;
  flex-basis: auto;
  min-width: 0;
}

.fav-controls {
  justify-content: flex-end;
}

.fav-line .fav-src {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  opacity: 0.75;
  margin-top: 0.35rem;
  font-variant-numeric: tabular-nums;
}

/* 收藏页、错题本的出处一行（2026-11-11 Weiwei 选丁，js/favorites.js srcRow）：「S08E09 · 第 34 句」放进浅灰圆角胶囊，
   点胶囊回到看剧里这一句听上下文，等级灰字留在胶囊外面。不写字、不加「›」、不用主题色（每句一样的字太吵）。
   只有胶囊能点：点的范围上下撑开到 44 像素高，左右多留一点；看起来和原来的小字差不多占地方 */
.fav-line .src-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: -0.3rem 0 -0.65rem;
  white-space: nowrap;
}

.fav-line .src-go {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin: 0 -0.35rem;
  padding: 0 0.35rem;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fav-line .src-tag {
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--chip);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  transition: background 0.1s;
}

/* 正在放的那句底色本来就是浅色，胶囊换成半透明的灰，在各主题、深浅色上都分得出来 */
.fav-line.current .src-tag {
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
}

/* 手指一碰胶囊马上变深，知道点到了 */
.fav-line .src-go:active .src-tag {
  background: color-mix(in srgb, var(--text-muted) 28%, transparent);
}

.fav-line .src-level {
  font-size: 0.8125rem;
  color: var(--text-muted);
  opacity: 0.75;
}

#fav-list .fav-star {
  visibility: visible;
}

/* 收藏的分组小标题：按时间排写「今天听过」「3 天前听过」……，按等级排写「初级」……，和句子文字左边对齐 */
.fav-group-h {
  margin: 1rem 0 0.25rem 4.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.fav-group-h:first-child {
  margin-top: 0.25rem;
}

#fav-list.subtitle-list .subtitle-line,
#mis-list.subtitle-list .subtitle-line {
  padding-right: 0.25rem;
}

.fav-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 3.5rem 1rem;
}

.fav-empty b {
  display: block;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.fav-empty span {
  font-size: 0.9rem;
}

/* ---------- 练习（?dev=1，js/scenes.js）：选等级、片段列表、片段播放页、看剧里的场景标题 ---------- */
.practice-body {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

/* 一排等级按钮（分段控件）：练习列表顶上一整行，收藏页放在「‹ 我的」那一行右边 */
.seg-ctl {
  display: flex;
  background: var(--highlight);
  border-radius: 8px;
  padding: 2px;
}

.seg-ctl button {
  border: 0;
  background: none;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
}

.seg-ctl button.on {
  background: var(--bg-card);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(61, 58, 54, 0.12);
}

/* 每集一组，上面写集号和英文片名 */
.practice-ep {
  margin: 1.1rem 0.2rem 0.4rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.practice-ep b {
  margin-right: 0.35rem;
  color: var(--text);
  font-weight: 600;
}

.practice-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.practice-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 0;
  background: none;
  font-family: inherit;
  color: var(--text);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.practice-row + .practice-row {
  border-top: 1px solid var(--border);
}

.practice-row:active {
  background: var(--highlight);
}

.practice-row .tx {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.practice-row .t1 {
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.practice-row .t2 {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
}

.practice-row .chev {
  color: var(--accent-soft);
  font-size: 1.1rem;
}

/* 各集的列表：集号加粗，右边写这个等级有几段（练过几段） */
.practice-row .ep-code {
  font-weight: 600;
}

/* 段数、练过几段：右边上下两行、右对齐，「已练 1 段」用主题色（2026-11-11 Weiwei 定）。
   字小一号、离标题近一点，这一块收窄，中文名少折行 */
.practice-row .cnt {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: -0.375rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.practice-row .cnt .did {
  color: var(--accent);
}

/* 一集的片段：左上角「‹ 练习」，下面集号、片名和「中高级 · 19 段」 */
.practice-back {
  display: inline-block;
  margin: 0.1rem 0 0.4rem;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--accent);
  white-space: nowrap;
  cursor: pointer;
}

/* 字号和下面片段列表的两行一样（2026-11-05 Weiwei：几行字大小不一，看着乱）：集号片名同片段名，「初级 · 4 段」同「10 句 · 27 秒」；
   左边和片段名对齐 */
.practice-ep-head {
  margin: 0.25rem calc(0.9rem + 1px) 0.9rem;
}

.practice-ep-head .name {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 1rem;
  color: var(--text);
}

.practice-ep-head .name b {
  flex: none;
  font-weight: 600;
}

/* 英文片名小一号、浅灰（2026-11-05 Weiwei：太挤、字太多）；长名字折行时第二行和片名第一个字母对齐，不顶到集号下面 */
.practice-ep-head .name span {
  min-width: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* 吸顶（?dev=1，2026-11-05 Weiwei 定，照 iPhone 的导航栏：往上滑时标题那一栏一直在最上面）。
   练习页的等级按钮、一集里的「‹ 练习」和集号片名、看剧列表的「EchoLine 老友记英语学习」。
   底色和页面一样，左右伸到屏幕边；内容滑到它下面时多一条细线（body.scrolled，js/nav.js） */
.practice-sticky {
  position: sticky;
  top: var(--safe-top);
  z-index: 3;
  margin: -1rem -1rem 0;
  padding: 0.6rem 1rem 0.5rem;
  background: var(--bg);
}

.practice-sticky .practice-ep-head {
  margin-bottom: 0.2rem;
}

.has-tabbar #episode-list-page .header {
  position: sticky;
  top: var(--safe-top);
  z-index: 3;
  margin: -1rem -1rem 0.75rem;
  padding: 1rem 1rem 0.75rem;
  background: var(--bg);
}

.has-tabbar.scrolled .practice-sticky,
.has-tabbar.scrolled #episode-list-page .header {
  box-shadow: 0 1px 0 var(--border);
}

/* 主屏幕图标打开时状态栏那一条：内容滑上去时不从状态栏下面露出来 */
.has-tabbar::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--safe-top);
  background: var(--bg);
  z-index: 4;
}

/* 练习页最上面的「继续练」（?dev=1，js/scenes.js）：和看剧的「继续看」同一种卡 */
.practice-resume {
  width: 100%;
  margin: 0.6rem 0 0.15rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.practice-empty {
  padding: 2rem 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* 片段列表一段一张卡（?dev=1，2026-11-06 Weiwei 看过模拟页选丙）：原来一整块白底、中间细线，几十段连在一起不好读；
   改成每段（各集的列表里每集）单独一块白卡，中间留 8 像素缝。照 iPhone：手机上分开内容靠留白，不用隔行底色 */
.line-tools-on .practice-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.line-tools-on .practice-row {
  padding: 0.8rem 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.line-tools-on .practice-row + .practice-row {
  border-top: 1px solid var(--border);
}

.line-tools-on .practice-row:active {
  background: var(--highlight);
}

.seg-ctl button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* 片段播放页：上面写场景名和「S08E09 · 10 句 · 27 秒」，只显示这一段的句子 */
.scene-head {
  flex-shrink: 0;
  padding: 0 1rem 0.6rem;
}

.scene-name {
  font-size: 1rem;
  font-weight: 600;
}

.scene-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.scene-video-wrap {
  position: relative;
}

#player-page.scene-mode #video {
  cursor: pointer;
}

#player-page.scene-mode .subtitle-line.off-scene {
  display: none;
}

/* 看剧：每个片段开头一行场景名，和左边的序号对齐（句子留白 + 边框）（2026-11-05 Weiwei 定，原来和台词对齐） */
.scene-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.6rem 0.25rem 0.1rem calc(1rem + 1px);
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.scene-title span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 正在放的那一段：深咖色；正在循环的那一段再加粗（不放循环图标，2026-11-07 Weiwei） */
.scene-title.cur,
.scene-title.on {
  color: var(--accent);
}

.scene-title.on {
  font-weight: 600;
}

/* 收藏页、错题本顶上：左边「‹ 我的」，页名居中（?dev=1，照 iPhone 的导航栏） */
.fav-top {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-right: 1rem;
}

.page-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding-right: 0;
}

.page-nav .back-link {
  justify-self: start;
}

.page-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  color: var(--text);
}

.practice-sticky > .page-title {
  padding: 0.15rem 0 0.1rem;
}

/* 选季、选等级（?dev=1，2026-11-06 Weiwei 选甲）：一个按钮点开菜单选（js/popmenu.js），右边写共几集、几段。
   2026-11-06 界面质感第二轮：按钮放左边，改成浅底咖字的胶囊加一个下箭头（原来「第 7 季」是黑色粗字，看着像标题）；
   练习页并排两个（等级、季） */
.level-pick,
.season-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
}

.season-pick {
  margin-top: 0.6rem;
}

.season-pick[hidden] {
  display: none;
}

.level-pick {
  margin: 0.2rem 0.2rem 0;
}

.fav-levelrow {
  flex-shrink: 0;
  margin: 0 1rem 0.3rem;
}

.pick-count {
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pick-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.25rem;
  padding: 0 0.75rem 0 0.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--chip);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

/* 胶囊看着 36 像素高，能点的范围上下各多 4 像素，凑够苹果建议的 44 */
.pick-btn::after {
  content: "";
  position: absolute;
  inset: -4px 0;
}

.pick-btn .pop-chev {
  width: 0.8em;
  height: 0.8em;
  stroke: currentColor;
  stroke-width: 2.6;
}

.pick-btn.big {
  font-size: 1rem;
}

.pick-group {
  display: flex;
  gap: 0.5rem;
  min-width: 0;
}

.pick-btn.open,
.pick-btn:active {
  opacity: 0.6;
}

/* 菜单和按钮左边对齐（选季）：从左上角放大出来 */
.pop-menu.left {
  transform-origin: top left;
}

.pop-menu.left.up {
  transform-origin: bottom left;
}

.pop-it:disabled {
  opacity: 0.38;
  cursor: default;
}

.practice-row .done {
  color: var(--accent);
  font-size: 0.78rem;
  white-space: nowrap;
}

/* 片段右上角的页签「跟读 扮演」，和「‹ 练习」同一行 */
#player-page.scene-mode {
  position: relative;
}

.scene-tabs {
  position: absolute;
  top: 0.4rem;
  right: 1rem;
  z-index: 1;
}

.scene-tabs button {
  padding: 0.3rem 0.75rem;
  font-size: 0.82rem;
}

/* 这一段没有填空题、不适合扮演：页签留着，置灰点不了（照 iOS 分段控件里不能用的那一段） */
.scene-tabs button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---------- 扮演（?dev=1，js/roleplay.js） ---------- */
/* 视频下面那一行只留字幕和语速，「正在播放原声」「正在录音」写在它下面（和段落循环的提示同一个位置） */
.role-hint {
  display: none;
}

.role-mode .role-hint:not([hidden]) {
  display: block;
}

.role-mode .range-btn,
.role-mode .range-hint:not(.role-hint) {
  display: none;
}

.role-mode .video-controls-overlay {
  justify-content: flex-end;
}

.role-panel {
  padding: 0.6rem 1rem 0.75rem;
  background: var(--panel, rgba(248, 246, 243, 0.98));
  border-top: 1px solid var(--border);
}

.role-panel[hidden] {
  display: none;
}

.role-ask {
  margin: 0 0 0.55rem;
  font-size: 0.9rem;
}

.role-err {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--rec);
}

.role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.role-chip {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  background: var(--bg-card);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
}

.role-chip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.role-chip small {
  margin-left: 0.25rem;
  font-size: 0.75rem;
  opacity: 0.75;
}

.role-primary,
.role-secondary {
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  white-space: nowrap;
  cursor: pointer;
}

.role-primary {
  border: 0;
  background: var(--accent);
  color: #fff;
}

.role-primary:disabled {
  opacity: 0.4;
  cursor: default;
}

.role-secondary {
  border: 1px solid var(--accent-soft);
  background: var(--bg-card);
  color: var(--accent);
}


/* 填空、扮演做完后的按钮：两个一样大，左右并排（2026-11-06 Weiwei 定方案甲） */
.end-pair {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.65rem;
}

.end-pair > button {
  flex: 1 1 0;
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
}

/* 实心按钮也加一圈同色边框，和描边按钮一样宽 */
.end-pair > .role-primary {
  border: 1px solid var(--accent);
}

.end-pair .chev {
  margin-left: 0.2rem;
  font-size: 1.1rem;
  line-height: 1;
}

/* 台词前面的名字：小一号、加粗、灰色；用户扮演的句子左边一条深咖色竖线，名字也是深咖色 */
.subtitle-line .role-who {
  margin-right: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.role-mode .subtitle-line.role-mine {
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding-left: calc(1rem - 3px);
}

.role-mode .subtitle-line.role-mine .role-who {
  color: var(--accent);
}

/* 别人只插了一两个词、整句归一个人的句子：扮演时藏起换人的「- 」 */
.role-mode .subtitle-line .role-dash {
  display: none;
}

.role-mode .subtitle-line .fav-star,
.role-mode .subtitle-line .line-acts {
  display: none;
}

/* 录音中的那一句右边：红底白方块的停止键（和跟读的一样）。
   用户的句子右边一直留着它的位置，停止键出现、消失时台词不重新折行，不会上下跳 */
.role-mode .subtitle-list .subtitle-line.role-mine {
  position: relative;
  padding-right: 3rem;
}

.role-stop {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 2.75rem;
  height: 2.75rem;
  margin: -1.375rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.role-stop::before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--rec);
  animation: rec-ring 1.4s ease-out infinite;
}

.role-stop::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 2px;
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .role-stop::before { animation: none; }
}

/* ---------- 填空（?dev=1，js/fill.js） ---------- */
/* 视频下面那一行只留字幕和语速；进度和小结在它下面（和扮演的选角色同一个位置） */
.fill-mode .range-btn,
.fill-mode .range-hint {
  display: none;
}

.fill-mode .video-controls-overlay {
  justify-content: flex-end;
}

.fill-panel {
  padding: 0.6rem 1rem 0.65rem;
  background: var(--panel, rgba(248, 246, 243, 0.98));
  border-top: 1px solid var(--border);
}

.fill-panel[hidden] {
  display: none;
}

/* 进度「共 N 题，已答 M 题」和结果「共 N 题，答对 M 题」：放在「字幕」「语速」左边同一行，不单独占一行
   （2026-11-07 Weiwei）。占满左边的空，放不下时脚本换短的说法（js/fill.js 的 fitStatus） */
.fill-status,
.role-status {
  display: none;
}

.fill-mode .fill-status:not([hidden]),
.role-mode .role-status:not([hidden]) {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
}

.fill-mode .video-controls-overlay .controls-right,
.role-mode .video-controls-overlay .controls-right {
  flex-shrink: 0;
}

/* 做完的结果比进度重一点：深色、加粗（扮演的「扮演完成」同样） */
.fill-mode .fill-status.end,
.role-mode .role-status {
  color: var(--text);
  font-weight: 600;
}

.fill-end > :first-child,
.role-end > :first-child {
  margin-top: 0;
}

.fill-end b {
  display: block;
  font-size: 1rem;
  font-weight: 600;
}

.fill-end p {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* 填空结果里「答错的 N 句已加入错题本」：整行能点的白色格子，右边箭头（照 iPhone 设置里的一格，2026-11-07 Weiwei 选甲） */
.mis-entry {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 52px;
  margin-top: 0.55rem;
  padding: 0.5rem 0.8rem;
  border: 0;
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.mis-entry:active {
  background: var(--highlight);
}
.mis-entry-text {
  flex: 1;
  min-width: 0;
}
.fill-end .mis-entry-text b {
  font-size: 0.92rem;
  font-weight: 500;
}
.mis-entry-text small {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* 「我的」最上面的积累卡（?dev=1，js/accum.js）：三个数一行排开，下面一行今天做了什么 */
.accum-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 0.5rem 0.85rem;
  margin-bottom: 1rem;
}

.accum-nums {
  display: flex;
}

.accum-n {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.accum-n + .accum-n {
  border-left: 1px solid var(--border);
}

.accum-n b {
  display: block;
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* 数字后面跟单位「句、次、段」；变多时旁边淡出一个「+N」 */
.accum-n b var {
  font-style: normal;
}

.accum-n b small {
  margin-left: 0.15rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}

.accum-plus {
  position: absolute;
  margin-left: 0.2rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s, transform 0.4s;
}

.accum-plus.show {
  opacity: 1;
  transform: none;
}

.accum-today b {
  font-weight: 600;
  color: var(--text);
}

.accum-n > span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.accum-today {
  margin: 0.85rem 0.5rem 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
}

/* 周小结（?dev=1，js/weekly.js，2026-11-06 Weiwei 看过模拟页第二版定）：「我的」里的本周进度卡、上周回顾一行，点进去是周小结页 */
.wk-card,
.wk-last {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
  font-family: inherit;
  color: var(--text);
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}

.wk-card {
  min-height: 5.6rem;
  padding: 0.85rem 1rem 0.9rem;
}

.wk-card:active,
.wk-last:active {
  background: var(--highlight);
}

.wk-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.wk-h b {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
}

.wk-h > span {
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.wk-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 0.45rem;
}

.wk-t {
  display: block;
  font-size: 1.35rem;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.wk-t small,
.wk-big small {
  margin: 0 0.15rem 0 0.1rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-muted);
}

.wk-s {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.wk-mini {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 34px;
  flex-shrink: 0;
}

.wk-mini i {
  display: block;
  width: 7px;
  border-radius: 2px;
  background: var(--accent-soft);
}

.wk-mini i.top {
  background: var(--accent);
}

.wk-mini i.future {
  height: 3px;
  background: none;
  border: 1px dashed var(--border);
}

.wk-last {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: -0.4rem;
  padding: 0.8rem 1rem;
}

.wk-last-l b {
  display: block;
  font-size: 1rem;
  font-weight: 500;
}

.wk-last-l span {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.wk-last-r {
  font-size: 0.95rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* 周小结页：排法照「关于」，顶上一栏右边是翻周的 ‹ › */
#week-page {
  padding: 0 1rem calc(4.5rem + var(--safe-bottom));
}

.wk-arrows {
  justify-self: end;
  display: flex;
}

.wk-arrow {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-family: inherit;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
}

.wk-arrow:last-child {
  margin-right: -0.6rem;
}

.wk-arrow:disabled {
  color: var(--accent-soft);
  cursor: default;
}

.wk-hero {
  padding: 0.6rem 0 1.2rem;
  text-align: center;
}

.wk-hero > small {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.wk-big {
  margin: 0.25rem 0 0.1rem;
  font-size: 2.2rem;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.wk-big small {
  font-size: 1rem;
}

.wk-hero p {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.wk-bars {
  padding: 1rem 1rem 0.75rem;
}

.wk-cols,
.wk-labels {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.wk-cols {
  align-items: flex-end;
  height: 110px;
}

.wk-col {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
}

.wk-col i {
  display: block;
  width: 100%;
  max-width: 26px;
  border-radius: 4px 4px 2px 2px;
  background: var(--accent-soft);
}

.wk-col.top i {
  background: var(--accent);
}

.wk-col.zero i {
  height: 2px;
  background: var(--border);
}

.wk-col.future i {
  height: 0;
  border-top: 1px dashed var(--border);
  border-radius: 0;
  background: none;
}

.wk-labels {
  margin-top: 0.4rem;
}

.wk-labels span {
  flex: 1;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.wk-labels span.top {
  font-weight: 600;
  color: var(--accent);
}

.wk-cap {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
}

.wk-cap b {
  font-weight: 600;
  white-space: nowrap;
}

.wk-sec {
  margin: 1.3rem 0 0.45rem 1rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-muted);
}

.wk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.wk-tile {
  padding: 0.8rem 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.wk-tile b {
  display: block;
  font-size: 1.45rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.wk-tile b small {
  margin-left: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-muted);
}

.wk-tile span {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.wk-row {
  padding: 0.8rem 1rem;
  line-height: 1.5;
}

.wk-row + .wk-row {
  border-top: 1px solid var(--border);
}

.wk-k,
.wk-sub {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.wk-k {
  margin-bottom: 0.15rem;
}

.wk-sub {
  margin-top: 0.1rem;
}

.wk-en {
  font-weight: 500;
}

.wk-score {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.wk-score b {
  font-weight: 600;
  color: var(--text);
}

.wk-score b.now {
  color: var(--good);
}

.wk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.wk-chips span {
  padding: 0.2rem 0.6rem;
  font-size: 0.85rem;
  white-space: nowrap;
  background: var(--highlight);
  border-radius: 999px;
}

.wk-foot {
  margin: 1.2rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-align: center;
}

.wk-foot span {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.9rem;
  color: var(--text);
}

/* 一句话鼓励（?dev=1，js/accum.js）：视频下面那一行提示的下面一行咖色小字；填空、扮演做完时在小结下面 */
.video-controls-overlay:has(.milestone) {
  flex-wrap: wrap;
}

.video-controls-overlay .milestone {
  order: 4;
  flex-basis: 100%;
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: var(--accent);
}

.fill-end .milestone,
.role-end .milestone {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: var(--accent);
}

.role-end .milestone {
  margin: -0.3rem 0 0.55rem;
}

/* 扮演打分（?dev=1）：做完后最上面一行和跟读的分数行一样（左边大字整段总分，竖线，右边四项，ⓘ）；
   下面一到两句话，第二句是建议，灰一点；「比上次高 N 分」咖色另起一行（2026-11-07 Weiwei 嫌鼓励太敷衍） */
.rp-row {
  margin: -0.1rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.role-end .rp-row .total b {
  display: inline;
  margin: 0;
  font-size: 1.75rem;
}
.role-end .score-help {
  margin-top: 0.4rem;
}
.rp-cheer,
.score-cheer {
  margin: 0.45rem 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text);
}
.rp-cheer span,
.score-cheer span {
  color: var(--text-muted);
}
.score-cheer {
  font-size: 0.85rem;
}
.rp-up {
  margin: 0.2rem 0 0.1rem;
  font-size: 0.82rem;
  color: var(--accent);
}
/* 四项里最低的一项：琥珀橙（和答错、「基本准确」同一个颜色，不用红） */
.score-row .parts em.low,
.rp-parts i.low {
  color: var(--ok);
}
.rp-wait,
.rp-plain {
  margin: -0.3rem 0 0.2rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.rp-plain + .rp-plain {
  margin-top: 0.15rem;
}
/* 自己说的那一句下面：「92 分 ›」，轻点在后面展开这一句的四项（箭头转向下），再点收起 */
.rp-score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.5rem;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.rp-score em {
  font-style: normal;
  font-weight: 600;
  color: var(--text);
}
.rp-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  margin: -0.7rem 0;
  padding: 0 0.4rem 0 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.rp-parts {
  white-space: nowrap;
}
.rp-parts span + span::before {
  content: ' · ';
}
.rp-parts i {
  font-style: normal;
  margin-left: 0.2rem;
  color: var(--text);
}

/* 同一句前后对比（?dev=1）：分数那一行下面 */
.score-cmp {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--accent);
}

/* 台词：原来的文字换成填空这一份（英文一律显示，空着一处；下面是选项） */
.fill-mode .subtitle-line .text-wrap,
.fill-mode .subtitle-line .fav-star,
.fill-mode .subtitle-line .line-acts {
  display: none;
}

.subtitle-line .fill-wrap {
  flex: 1;
  min-width: 0;
}

.fill-blank {
  display: inline-block;
  min-width: 4.5em;
  border-bottom: 1.5px solid var(--accent);
  text-align: center;
  line-height: 1.2;
  vertical-align: baseline;
}

.fill-blank:empty::before {
  content: "\00a0";
}

.fill-blank.right {
  min-width: 0;
  padding: 0 0.15em;
  color: var(--good);
  border-color: var(--good);
  font-weight: 600;
}

.fill-blank.wrong {
  min-width: 0;
  padding: 0 0.15em;
  color: var(--ok);
  border-color: var(--ok);
  font-weight: 600;
}

.fill-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.fill-opts button {
  min-height: 2.5rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--accent-soft);
  border-radius: 8px;
  background: var(--bg-card);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
}

.fill-opts button:disabled {
  color: var(--text-muted);
  opacity: 1;
  cursor: default;
}

.fill-opts button.right {
  border-color: var(--good);
  color: var(--good);
  font-weight: 600;
}

.fill-opts button.wrong {
  border-color: var(--ok);
  color: var(--ok);
  text-decoration: line-through;
}

.fill-verdict {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.85rem;
}

.fill-verdict.right {
  color: var(--good);
}

.fill-verdict.wrong {
  color: var(--ok);
}

/* 填空、错题本不放画面（2026-11-05 Weiwei：画面不动，占地方）。点句子照样出声，没有单句音频的集用视频自己的声音 */
.fill-mode .scene-video-wrap,
#mistakes-page .fav-video-wrap {
  display: none;
}

/* 换了无水印片源的集（?dev=1，js/video-subs.js 加 .clean-video）：填空放画面，停在这一段开头；点一句，画面跟着这一句放，放完停住
   （2026-11-06 Weiwei 定先试：旧片源烧了中文字幕会漏答案，所以原来不放）。错题本照旧不放 */
#player-page.fill-mode.clean-video .scene-video-wrap {
  display: block;
}

/* 错题本放画面（js/mistakes.js 加 .mis-pic；2026-11-08 Weiwei 问能不能也有视频，2026-11-09 对所有人上线）：照收藏页上面一块画面。
   还是旧片源的集画面遮住，中间一行浅色小字，声音照放 */
#mistakes-page .fav-video-wrap.mis-pic {
  display: block;
}

.mis-nopic {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  white-space: nowrap;
}

.mis-nopic[hidden] {
  display: none;
}

/* 画面字幕（?dev=1，js/video-subs.js）：竖屏、页面里不在画面上画字幕，全屏才画（2026-11-06 Weiwei 选甲）。
   选中的轨道一直是「显示」，这样 iPhone 进全屏照它显示，不会按系统语言自己挑；这里只是把网页里画的藏起来 */
#video.vsubs-off::-webkit-media-text-track-container {
  display: none !important;
}

#video.vsubs-off::cue {
  color: transparent;
  background: transparent;
  text-shadow: none;
}

/* 横屏全屏回来以后台词字号变大、缩不回去（?dev=1，2026-11-07 Weiwei 在 iPhone 上遇到）：
   iPhone 的 Safari 在横屏时会自动放大文字，回到竖屏有时不还原。字号一律按样式表来，不让系统自动放大 */
html.line-tools-on {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 播放页、收藏页、错题本页钉在看得见的那一块里，整页不能上下滑（2026-11-06）：
   原来页面高 100vh / 100dvh，再加上 #app 上下给刘海和底部横条留的空，整页比屏幕高出几十像素；
   从滑到下面的列表点进来时页面停在往上推过的位置，右上角「跟读 填空 扮演」被顶出屏幕。
   改成固定在屏幕上、上下各让出安全区，不靠 vh 算高度，iPad、iPhone 的 Safari 工具栏收起展开都对得上 */
.has-tabbar #player-page,
.has-tabbar #favorites-page,
.has-tabbar #mistakes-page {
  position: fixed;
  top: var(--safe-top);
  bottom: var(--safe-bottom);
  left: 0;
  right: 0;
  height: auto;
  min-height: 0;
}

/* 点词（?dev=1，js/gloss.js）：有释义的词下面一条浅咖色虚线；点开时这个词（分开的短语几段一起）带浅咖底色 */
.gl {
  text-decoration: underline dashed var(--accent-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  border-radius: 3px;
  cursor: pointer;
}

.gl.on {
  background: var(--gl-on, rgba(139, 115, 85, 0.16));
  text-decoration-color: var(--accent);
}

/* 跟读打分标了红线的词，不再叠一条虚线 */
.w-bad .gl,
.w-miss .gl {
  text-decoration: none;
}

/* 释义行：在这一句下面（双语时在中文后面），词照词典写法、咖色，后面是中文意思。
   放进一张白色小卡片，和中文字幕分开（2026-11-06 Weiwei：没有底色时埋在双语后面看不出来） */
.gloss-line {
  display: table;
  margin-top: 0.45rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg-card);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(61, 58, 54, 0.1);
}

.gloss-line b {
  color: var(--accent);
  font-weight: 600;
  margin-right: 0.5em;
}

/* 扮演进行中不提供点词 */
.gloss-off .gl {
  text-decoration: none;
  cursor: inherit;
}

.gloss-off .gloss-line {
  display: none;
}

/* ---------- 第二阶段丙组 界面质感（?dev=1，功能方案第十一节第 8 项，2026-11-06） ---------- */

:root {
  --menu-bg: rgba(252, 250, 247, 0.82);
  --menu-sep: rgba(61, 58, 54, 0.14);
  --menu-press: rgba(61, 58, 54, 0.08);
  --menu-shadow: 0 12px 40px rgba(40, 30, 20, 0.22), 0 0 0 0.5px rgba(40, 30, 20, 0.08);
}

/* 字幕、语速：原来的下拉框藏起来，换成和「段落循环」同一种按钮，右边一对上下小箭头（js/popmenu.js） */
.has-pop label,
.has-pop select {
  display: none;
}

.line-tools-on .controls-right {
  gap: 0.5rem;
}

.pop-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.5rem 0.4rem 0.6rem;
  min-height: 2.2rem;
  font-family: inherit;
  font-size: 0.85rem;
  white-space: nowrap;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s;
}

.pop-btn:active,
.pop-btn.open {
  background: var(--highlight);
}

.pop-btn .pop-k {
  color: var(--text-muted);
}

.pop-btn .pop-v {
  font-variant-numeric: tabular-nums;
}

.pop-chev {
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.05rem;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 弹出的菜单：圆角、半透明毛玻璃、每行 44 像素、17 像素字，选中的左边一个对勾；从按钮那一角放大出来 */
.pop-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.pop-menu {
  position: fixed;
  z-index: 201;
  display: flex;
  flex-direction: column;
  min-width: 13.5rem;
  max-width: calc(100vw - 24px);
  overflow: hidden;
  background: var(--menu-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  border-radius: 13px;
  box-shadow: var(--menu-shadow);
  transform-origin: top right;
  animation: pop-in 0.24s cubic-bezier(0.25, 1.1, 0.4, 1) both;
}

.pop-menu.up {
  transform-origin: bottom right;
}

.pop-menu.out {
  animation: pop-out 0.14s ease-in both;
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.82); }
  to { opacity: 1; transform: none; }
}

@keyframes pop-out {
  to { opacity: 0; transform: scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
  .pop-menu,
  .pop-menu.out { animation-duration: 0.01s; }
}

.pop-ttl {
  flex-shrink: 0;
  padding: 0.55rem 1rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  border-bottom: 0.5px solid var(--menu-sep);
}

.pop-items {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.pop-it {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 1rem 0 0.6rem;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 1.0625rem;
  color: var(--text);
  text-align: left;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
}

.pop-it + .pop-it {
  border-top: 0.5px solid var(--menu-sep);
}

.pop-it:active,
.pop-it.press {
  background: var(--menu-press);
}

.pop-it:focus-visible {
  outline: none;
  background: var(--menu-press);
}

.pop-ck {
  flex-shrink: 0;
  width: 1.6rem;
  display: flex;
  justify-content: center;
}

.pop-ck svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--text);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  visibility: hidden;
}

.pop-it.sel .pop-ck svg {
  visibility: visible;
}

.pop-sub {
  margin-left: auto;
  padding-left: 1rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* 最小字号 13 像素（?dev=1，功能方案第十一节第 8 项）：原来小于 13 像素的字一律提到 13 像素。
   句子序号原来 10.9 像素、淡到 40%，提到 13 像素后淡到 55%，看得清又不抢台词 */
.line-tools-on .subtitle-line .timestamp {
  font-size: 0.8125rem;
  opacity: 0.55;
}

.line-tools-on .shadow-score,
.line-tools-on .score-row .parts,
.line-tools-on .tabbar button,
.line-tools-on .account-hint,
.line-tools-on .fav-line .fav-src,
.line-tools-on .seg-ctl button,
.line-tools-on .practice-ep,
.line-tools-on .practice-row .t2,
.line-tools-on .pick-count,
.line-tools-on .scene-meta,
.line-tools-on .scene-title,
.line-tools-on .practice-row .done,
.line-tools-on .role-chip small,
.line-tools-on .resume-kicker,
.line-tools-on .accum-n > span {
  font-size: 0.8125rem;
}

/* ---------- 我的 › 关于（?dev=1，js/about.js，2026-11-06 Weiwei 看过模拟页第三版定）：照「关于微信」排 ---------- */
#about-page {
  padding: 0 1rem calc(4.5rem + var(--safe-bottom));
}

.about-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: var(--bg);
}

.about-nav .back-link {
  justify-self: start;
  padding-left: 0;
  font-size: 1rem;
  white-space: nowrap;
}

.about-nav h1 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

.about-body {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.about-app {
  padding: 1.2rem 0 1.4rem;
  text-align: center;
}

.about-app img {
  display: block;
  margin: 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 17px;
  box-shadow: 0 2px 8px rgba(61, 58, 54, 0.18);
}

.about-app h2 {
  margin: 0.7rem 0 0.2rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.about-app p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.about-app small {
  display: block;
  margin-top: 0.25rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.about-legal {
  margin: 1.6rem 0.5rem 0;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.about-lead {
  margin: 0.8rem 0.3rem 1rem;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
}

.about-lead.small {
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  color: var(--text-muted);
}

.about-sec {
  margin: 1.2rem 0 0.4rem 1rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.about-item {
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  line-height: 1.55;
}

.about-item + .about-item {
  border-top: 1px solid var(--border);
}

.about-item b {
  display: block;
  margin-bottom: 0.1rem;
  font-weight: 600;
}

.about-item span {
  color: var(--text-muted);
}

.about-item .about-plain {
  color: var(--text);
}

.about-row {
  display: flex;
  justify-content: space-between;
}

.about-row .about-k {
  color: var(--text);
}

.about-text {
  height: 9.5rem;
  line-height: 1.5;
  resize: none;
}

.about-label {
  margin: 0 0.2rem -0.4rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.about-fb .account-msg:empty {
  display: none;
}

.about-hint {
  margin: -0.4rem 0.2rem 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.about-hint b {
  font-weight: 500;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* 发送成功：对勾、道谢、怎么联系、「完成」；下面空白处放图标、名称、一句话介绍和版本号 */
.about-sent {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 7.5rem - var(--safe-top) - var(--safe-bottom));
  min-height: calc(100dvh - 7.5rem - var(--safe-top) - var(--safe-bottom));
}

.about-done {
  padding: 2.6rem 0.25rem 0;
  text-align: center;
}

.about-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  background: var(--accent);
}

.about-check svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-done h2 {
  margin: 0 0 0.7rem;
  font-size: 1.3rem;
  font-weight: 600;
}

.about-done p {
  max-width: 19rem;
  margin: 0 auto;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.about-done p b {
  display: block;
  margin-top: 0.15rem;
  font-weight: 500;
  color: var(--text);
  overflow-wrap: anywhere;
}

.about-done .about-reply {
  margin-top: 0.8rem;
  font-size: 0.875rem;
}

.about-done .account-primary {
  margin-top: 2rem;
}

.about-brand {
  margin-top: auto;
  padding: 2rem 0 2.5rem;
  text-align: center;
  color: var(--text-muted);
}

.about-brand img {
  display: block;
  margin: 0 auto 0.55rem;
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.about-brand b {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.about-brand span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
}

.about-brand small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
}

/* 矮屏（iPhone SE 这类）：上下留白收一点，一屏放得下 */
@media (max-height: 700px) {
  .about-done {
    padding-top: 1.4rem;
  }

  .about-done .account-primary {
    margin-top: 1.4rem;
  }

  .about-brand {
    padding: 1.5rem 0 1.5rem;
  }
}

/* 登录页最下面一行小字「关于 EchoLine」 */
.about-entry {
  margin-top: 2.4rem;
  text-align: center;
}

.about-entry .account-textlink {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* ---------- 深色模式（?dev=1，功能方案第十一节第 13 项）：默认跟着手机的「深色」设置自动切换；
   2026-11-07 起「我的 › 设置 › 外观」也能固定浅色或深色。实际是深色时 js/settings.js 给 html 加 .dark，
   深色的样式一律写成 .line-tools-on.dark 开头，不再用 @media (prefers-color-scheme: dark) ----------
   暖一点的深咖底，不用纯黑；咖色调亮一档保证对比度。页面里写死的颜色在下面逐条换掉 */
html.line-tools-on.dark {
  color-scheme: dark;
  /* 积累卡片配色（2026-11-12 第二版，同色一浅一深）：收藏卡主色极浅底，错题卡主色深一档的底，错题圆标是主色淡一号 */
  --accent2: #92734c;
  --accent-wash: #2e2922;
  --accent2-wash: #3b3024;
  --bg: #1b1916;
  --bg-card: #26231f;
  --text: #ece6dd;
  --text-muted: #a39b90;
  --accent: #c8a77e;
  --accent-soft: #6e5d48;
  --border: #37322c;
  --highlight: #322c25;
  --chip: #2f2a25;
  --rec: #e0705a;
  --good: #74b884;
  --ok: #dda54f;
  --menu-bg: rgba(44, 40, 35, 0.86);
  --menu-sep: rgba(236, 230, 221, 0.12);
  --menu-press: rgba(236, 230, 221, 0.1);
  --menu-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(236, 230, 221, 0.1);
}

/* 视频下面那一行、扮演和填空的面板：原来是半透明米色 */
.line-tools-on.dark .video-controls-overlay,
.line-tools-on.dark .role-panel,
.line-tools-on.dark .fill-panel {
  background: var(--panel, rgba(27, 25, 22, 0.98));
}

.line-tools-on.dark .video-section,
.line-tools-on.dark .fav-video-wrap,
.line-tools-on.dark .scene-video-wrap {
  background: #000;
}

/* 咖色底上的字：浅咖底配白字看不清，换成深色字 */
.line-tools-on.dark .tool-btn.on,
.line-tools-on.dark .account-primary,
.line-tools-on.dark .role-chip.on,
.line-tools-on.dark .role-primary {
  color: var(--bg);
}

.line-tools-on.dark .shadow-play svg {
  fill: var(--bg);
}

/* 段落循环的范围：比页面底色亮一点点 */
.line-tools-on.dark .subtitle-line.in-range {
  background: var(--range, #25211c);
}

.line-tools-on.dark .subtitle-line.in-range.current {
  background: var(--highlight);
}

.line-tools-on.dark .score-help {
  background: var(--help-bg, rgba(38, 35, 31, 0.65));
}

.line-tools-on.dark .account-msg {
  color: var(--danger, #e08a70);
}

.line-tools-on.dark .account-msg.ok {
  color: var(--text-muted);
}

.line-tools-on.dark .account-cell.danger {
  color: var(--danger, #e08a70);
}

.line-tools-on.dark .account-primary.danger {
  background: var(--danger, #e08a70);
}

.line-tools-on.dark .w-good { color: var(--good); }
.line-tools-on.dark .w-ok { color: var(--ok); }

.line-tools-on.dark .gl.on {
  background: var(--gl-on, rgba(200, 167, 126, 0.2));
}

.line-tools-on.dark .seg-ctl button.on,
.line-tools-on.dark .gloss-line {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* 分段控件选中的那一块要比底色亮（照 iPhone 深色模式），原来用卡片色反而比底色暗，看不出选了哪项 */
.line-tools-on.dark .seg-ctl button.on {
  background: var(--seg-on, #4a4239);
}

/* ---------- 界面质感第二轮（?dev=1，2026-11-06 Weiwei 看过模拟页说全按推荐，功能方案第十一节） ---------- */

/* 看剧页左上角：小图标加 EchoLine 字标（js/brand.js），只这一页有 */
.has-tabbar #episode-list-page .header.brand-header {
  text-align: left;
  padding-top: 0.6rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  min-height: 2.75rem;
}

.brand-mark {
  flex: none;
  width: 30px;
  height: 30px;
}

.brand-wm {
  display: block;
  height: 21px;   /* Playfair（2026-11-07 Weiwei 选），和模拟页同样大小 */
  width: auto;
  fill: var(--text);
}

/* 字标丙「正斜对比」：「Line」斜体用强调色，换主题时跟着变 */
.brand-wm .brand-wm-line {
  fill: var(--accent);
}

/* 「练习」的大标题（照 iPhone：底部入口的首页用靠左的粗体大标题，约 34 号）。中文两个字中间不加空格 */
.large-title {
  margin: 0.15rem 0.1rem 0.25rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

/* 大标题被顶栏挡住时，顶栏中间淡出小标题（js/scenes.js 加 lt-collapsed），滑回顶上再消失 */
.lt-bar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  height: calc(var(--safe-top) + 44px);
  padding-top: var(--safe-top);
  align-items: center;
  justify-content: center;
  background: var(--bg);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

#practice-page.lt-on .lt-bar {
  display: flex;
}

#practice-page.lt-collapsed .lt-bar {
  opacity: 1;
}

/* 三块练法卡片也滑走后：顶栏中间换成一条小的「跟读 | 填空 | 扮演」（js/scenes.js，2026-11-12）。
   每段整条顶栏高（44 像素）都能点，看得见的是中间 28 像素高的胶囊；样子同分段控件 */
.lt-bar .lt-ways {
  display: none;
  position: relative;
  width: min(15rem, 64vw);
  pointer-events: auto;
}

#practice-page.ways-hidden .lt-bar .lt-title {
  display: none;
}

#practice-page.ways-hidden .lt-bar .lt-ways {
  display: flex;
}

.lt-ways::before {
  content: "";
  position: absolute;
  inset: 6px 0;
  border-radius: 9px;
  background: var(--highlight);
}

.lt-ways button {
  position: relative;
  flex: 1 1 0;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.lt-ways button span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  margin: 0 2px;
  border-radius: 7px;
}

.lt-ways button.on {
  color: var(--text);
  font-weight: 600;
}

.lt-ways button.on span {
  background: var(--bg-card);
  box-shadow: 0 1px 2px rgba(61, 58, 54, 0.12);
}

.lt-ways button:active span {
  filter: brightness(0.94);
}

.line-tools-on.dark .lt-ways button.on span {
  background: var(--seg-on, #4a4239);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* 选等级、选季那一行：吸顶时停在小标题下面 */
.practice-sticky.under-bar {
  top: calc(var(--safe-top) + 44px);
  margin-top: 0;
  padding-top: 0.25rem;
}

/* 各集的列表：每集左边一张小方图（就是看剧那张图，裁成正方形），和看剧的宽图区分开 */
.practice-thumb {
  flex: none;
  width: 48px;
  height: 48px;
  margin: -0.2rem 0;
  border-radius: 8px;
  background: var(--border) center / cover no-repeat;
}

/* 我的：最上面首字母圆形头像 + 昵称，下面一行小字写邮箱（照 iPhone「设置」最上面那一行） */
.mine-profile {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  margin: 0.4rem 0 1rem;
  padding: 0.9rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.mine-profile:active {
  background: var(--highlight);
}

.mine-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--avatar-a, #b39674), var(--avatar-b, #7c654b));
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
}

.mine-avatar.big {
  width: 5rem;
  height: 5rem;
  font-size: 2.1rem;
  margin: 0.6rem auto 1.2rem;
}

.mine-who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mine-who b {
  font-size: 1.15rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mine-who span {
  font-size: 0.8125rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mine-profile .account-chev {
  flex: none;
}

/* 我的里点进去的一层（个人信息、账号与安全）：顶上「‹ 我的」和居中页名 */
.mine-sub .about-nav {
  margin-bottom: 0.6rem;
}

.mine-label {
  margin: 0 0.2rem 0.4rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.mine-foot {
  margin: -0.5rem 0.2rem 1rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* 返回键照苹果导航栏（?dev=1，js/nav.js 加 nav-back 类；2026-11-06 Weiwei：「‹ 练习」太小）：
   17 号字，前面一个粗的向左箭头，比字略高；点按范围照旧用 ::after 扩到 44×44 */
.back-link.nav-back,
.practice-back.nav-back {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 1.0625rem;
  line-height: 1.3;
  white-space: nowrap;
}

.back-link.nav-back::before,
.practice-back.nav-back::before {
  content: '';
  flex: none;
  width: 0.62rem;
  height: 1.1rem;
  margin-left: -0.1rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M10 2 2 10l8 8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M10 2 2 10l8 8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 头像照片（?dev=1，js/avatar.js；2026-11-06 Weiwei 看过模拟页定）：有照片时盖在首字母上面 */
.mine-avatar {
  position: relative;
  overflow: hidden;
}

.mine-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 个人信息顶上：大头像，下面「编辑」；点哪个都是换照片 */
.mine-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.6rem 0 1rem;
}

.mine-photo .mine-avatar.big {
  margin: 0;
}

.mine-photo-btn {
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.mine-photo-edit {
  position: relative;
  margin-top: 0.4rem;
  padding: 0.3rem 0.5rem;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--accent);
  white-space: nowrap;
  cursor: pointer;
}

.mine-photo-edit::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

.mine-photo .account-msg:empty {
  display: none;
}

/* 底部弹出的选项（照 iPhone 的操作表）：「选择照片 / 移除照片」一组，下面单独一个「取消」 */
.av-veil {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 max(8px, env(safe-area-inset-left, 0px)) calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(20, 16, 12, 0.35);
  animation: av-fade 0.2s ease both;
}

.av-sheet {
  width: 100%;
  max-width: 414px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: av-up 0.28s cubic-bezier(0.25, 1, 0.4, 1) both;
}

.av-grp,
.av-cancel {
  background: var(--menu-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  border-radius: 14px;
  overflow: hidden;
}

.av-sheet button {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  border: 0;
  font-family: inherit;
  font-size: 1.125rem;
  color: var(--accent);
  white-space: nowrap;
  cursor: pointer;
}

.av-grp button {
  background: none;
  border-top: 0.5px solid var(--menu-sep);
}

.av-grp button:first-child {
  border-top: 0;
}

.av-grp button.danger {
  color: var(--danger, #a5523a);
}

.line-tools-on.dark .av-grp button.danger {
  color: var(--danger, #e08a70);
}

/* 「取消」照 iPhone 不透明，底下的内容不透出来 */
.av-sheet .av-cancel {
  font-weight: 600;
  background: var(--bg-card);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@keyframes av-fade { from { opacity: 0; } }
@keyframes av-up { from { transform: translateY(40px); opacity: 0; } }

/* 移动和缩放：全屏黑底，中间一个圆框，圆外面压暗（照 iPhone 通讯录换头像） */
.av-crop {
  position: fixed;
  inset: 0;
  z-index: 310;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #fff;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.av-crop-title {
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 0;
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 600;
}

.av-crop-hint {
  padding-top: 6px;
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
}

.av-crop-stage {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.av-crop-stage img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  transform-origin: 0 0;
  pointer-events: none;
}

.av-crop-mask {
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
  outline: 1px solid rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

.av-crop-bar {
  display: flex;
  justify-content: space-between;
  padding: 12px max(20px, env(safe-area-inset-left, 0px)) calc(16px + env(safe-area-inset-bottom, 0px));
}

.av-crop-bar button {
  min-width: 64px;
  padding: 10px 4px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 1.0625rem;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
}

.av-crop-ok {
  font-weight: 600;
  text-align: right;
}

/* ---------- 「我的」页照 iPhone「设置」（?dev=1，2026-11-07 模拟页丙）：不画线框，整页底色比白卡深一点，白卡自己浮出来；
   块与块之间多留空，一块里行与行之间的细线从文字开始画 ---------- */
html.line-tools-on {
  --grouped: #f1ece5;
}

html.line-tools-on.dark {
  --grouped: #141210;
}

html.line-tools-on body:has(#mine-page.active),
.line-tools-on #mine-page {
  background: var(--grouped);
}

.line-tools-on #mine-page .mine-profile,
.line-tools-on #mine-page .accum-card,
.line-tools-on #mine-page .wk-card,
.line-tools-on #mine-page .wk-last,
.line-tools-on #mine-page .account-group {
  border-color: transparent;
}

.line-tools-on #mine-page .mine-profile,
.line-tools-on #mine-page .accum-card,
.line-tools-on #mine-page .wk-card,
.line-tools-on #mine-page .account-group {
  margin-bottom: 1.4rem;
}

/* 看剧、练习（各集列表和一集的片段列表）也照这样（2026-11-07 Weiwei 问要不要一样，听 Claude 的建议）：
   苹果自己的 App 各个底部入口用同一种底色，切换时不变色；白卡不画线框，靠底色浮出来。播放页不变 */
html.line-tools-on body:has(#episode-list-page.active),
html.line-tools-on body:has(#practice-page.active),
.line-tools-on #episode-list-page,
.line-tools-on #practice-page,
.line-tools-on #practice-page .practice-sticky,
.line-tools-on #practice-page .lt-bar,
html.line-tools-on .has-tabbar #episode-list-page .header {
  background: var(--grouped);
}

html.line-tools-on body.has-tabbar:has(#episode-list-page.active)::before,
html.line-tools-on body.has-tabbar:has(#practice-page.active)::before,
html.line-tools-on body.has-tabbar:has(#mine-page.active)::before {
  background: var(--grouped);
}

.line-tools-on #episode-list-page .episode-link,
.line-tools-on #practice-page .episode-link,
.line-tools-on #practice-page .practice-row,
.line-tools-on #practice-page .practice-row + .practice-row {
  border-color: transparent;
}

/* 「本周进度」「上周回顾」右上角：箭头和前面的日期、时长隔开一点 */
.line-tools-on .wk-h .account-chev,
.line-tools-on .wk-last-r .account-chev {
  margin-left: 0.2rem;
}

.line-tools-on #mine-page .account-cell + .account-cell,
.line-tools-on #mine-page .account-cell + .account-sub {
  position: relative;
  border-top: 0;
}

.line-tools-on #mine-page .account-cell + .account-cell::before,
.line-tools-on #mine-page .account-cell + .account-sub::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1rem;
  right: 0;
  border-top: 1px solid var(--border);
}

/* 箭头照 iPhone：画出来的，处处一样大（宽 8、高 13），展开时同一个箭头转向下。
   原来是文字「›」，跟着那一行的字号走，账号那一行和本周进度只有 13 像素，别处 16 像素（2026-11-07 Weiwei 发现大小不一） */
.line-tools-on .account-chev {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 13px;
  font-size: 0;
  vertical-align: middle;
  background: var(--accent-soft);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M1.5 1.5 6.5 6.5l-5 5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M1.5 1.5 6.5 6.5l-5 5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s;
}

.line-tools-on .account-chev.down {
  transform: rotate(90deg);
}

/* 我的里点进去的一层（个人信息、账号与安全、本周进度、关于）：吸顶的「‹ 我的」那一条跟着整页底色 */
.line-tools-on #mine-page .about-nav {
  background: var(--grouped);
}

/* ---------- 中文集名（?dev=1，js/zh-titles.js；2026-11-07 Weiwei 看过模拟页说可以）：
   集号后面跟中文名，长了折行，第二行和中文名第一个字对齐，不省略；英文名在下一行灰色小字，只占一行，
   放不下用省略号，进了这一集再写全 ---------- */
.episode-info.has-zh .title {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.episode-info.has-zh .title .zh,
.practice-row .t1 .zh {
  min-width: 0;
  font-weight: 400;
}

.episode-info.has-zh .meta,
.episode-info .meta.one-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.practice-row .t1 {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  overflow: visible;
  white-space: normal;
}

.practice-row .t1 .ep-code {
  flex: none;
}

.practice-row .t2 {
  white-space: nowrap;
}

.practice-ep-head.has-zh .name span.zh {
  font-size: 1rem;
  color: var(--text);
}

.practice-ep-head.has-zh .en {
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ---------- 换页的滑动（?dev=1，js/nav.js；2026-11-07 Weiwei 问的）：照 iPhone 的导航，
   进一层新的一页从右边盖上来、原来那页往左退三成稍微变暗；点返回键时要离开的那页往右滑走，上一页从左边一点滑回。
   滑的是点下去时和画好后各拓的一份（.nav-ghost），叠在真页面上面，滑完拿掉；真页面自己不动 ---------- */
html.nav-sliding,
html.nav-sliding body {
  overflow-x: clip;
}

.nav-ghost {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}

/* 盖在上面的那份左边有一道淡影，分得出上下两层 */
.nav-ghost.over {
  box-shadow: -8px 0 24px rgba(61, 58, 54, 0.12);
}

.nav-ghost-scroll {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

/* 主屏幕打开时状态栏那一条：和真页面一样，内容不从状态栏下面露出来 */
.nav-ghost-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--safe-top);
}

/* 垫在下面那份稍微变暗一点（照 iPhone） */
.nav-ghost-dim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background: rgba(40, 30, 20, 0.06);
}

.nav-ghost.over .nav-ghost-dim {
  display: none;
}

.line-tools-on.dark .nav-ghost-dim {
  background: rgba(0, 0, 0, 0.3);
}

/* 错题本的提示（?dev=1，2026-11-07 Weiwei）：放在「字幕」「语速」左边同一行，不另起一行；
   浅底圆角条，和按钮一样高；放不下时脚本换短的说法（js/mistakes.js 的 fitHint） */
.fav-controls.mis-controls {
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.mis-controls .controls-right {
  flex-shrink: 0;
}

.fav-controls .range-hint.mis-hint {
  order: 0;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0 0 0 -0.5rem;
  padding: 0 0.5rem;
  height: 2.2rem;
  line-height: 2.2rem;
  border-radius: 8px;
  background: var(--chip);
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.fav-controls .range-hint.mis-hint.tight {
  padding: 0 0.3rem;
}

/* ---------- 我的 › 设置（?dev=1，js/settings.js；2026-11-07 Weiwei 看过模拟页定）：照 iPhone「设置」，
   整页底色比白卡深一点，一组一组白卡不画线框，组上面灰色小标题、下面一句灰色说明 ---------- */
#settings-page {
  padding: 0 1rem calc(4.5rem + var(--safe-bottom));
}

html.line-tools-on body:has(#settings-page.active),
html.line-tools-on body.has-tabbar:has(#settings-page.active)::before,
.line-tools-on #settings-page,
.line-tools-on #settings-page .about-nav {
  background: var(--grouped);
}

.line-tools-on #settings-page .account-group {
  border-color: transparent;
  margin-bottom: 0;
}

.line-tools-on #settings-page .account-cell + .account-cell {
  position: relative;
  border-top: 0;
}

.line-tools-on #settings-page .account-cell + .account-cell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1rem;
  right: 0;
  border-top: 1px solid var(--border);
}

.set-head {
  margin: 1.4rem 1rem 0.4rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.set-foot {
  margin: 0.4rem 1rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.set-foot[hidden] {
  display: none;
}

/* 主题那一页没有小标题，第一组离顶栏空一点 */
.set-body > .account-group:first-child {
  margin-top: 0.75rem;
}

/* 没有说明的组（主题）下面也空一点 */
#settings-page .account-group + .account-group,
#settings-page .account-group + .set-head {
  margin-top: 1rem;
}

.set-row {
  cursor: default;
  min-height: 3.1rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.set-row:active {
  background: none;
}

/* iPhone 式开关：宽 51、高 31，开着用主题色（iPhone 自带的是绿色，这里和全站的咖色一致） */
.set-sw {
  position: relative;
  flex: none;
  width: 51px;
  height: 31px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--chip);
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: pointer;
  transition: background 0.2s;
}

.set-sw::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.set-sw[aria-checked="true"] {
  background: var(--accent);
  box-shadow: none;
}

.set-sw[aria-checked="true"]::after {
  transform: translateX(20px);
}

@media (prefers-reduced-motion: reduce) {
  .set-sw,
  .set-sw::after {
    transition: none;
  }
}

/* 台词字号：上面一行字，下面三格分段控件 */
.set-size {
  padding: 0.75rem 1rem 0.85rem;
  font-size: 1rem;
  color: var(--text);
}

.set-seg {
  display: flex;
  margin-top: 0.6rem;
  padding: 2px;
  border-radius: 9px;
  background: var(--chip);
}

.set-seg button {
  flex: 1;
  padding: 0.4rem 0;
  border: 0;
  border-radius: 7px;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
}

.set-seg button[aria-checked="true"] {
  background: var(--bg-card);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* 打勾的一组（外观、主题）：选中的那行右边一个勾 */
.set-check {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  visibility: hidden;
}

.set-pick[aria-checked="true"] .set-check {
  visibility: visible;
}

.set-val {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
}

/* 主题那一页：左边小预览（底色上一条浅色、一小块主题色），名字下面一行说明 */
.set-theme-row {
  justify-content: flex-start;
  gap: 0.85rem;
  min-height: 3.75rem;
}

.set-theme-row .set-check {
  margin-left: auto;
}

.set-swatch {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--border);
}

.set-swatch::before,
.set-swatch::after {
  content: '';
  position: absolute;
  left: 6px;
  height: 8px;
  border-radius: 3px;
}

.set-swatch::before {
  top: 7px;
  right: 6px;
  background: var(--sw-h);
}

.set-swatch::after {
  bottom: 7px;
  width: 14px;
  background: var(--sw-a);
}

.set-tname {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.set-tname small {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* 台词字号那一格下面的示例句：和看剧的台词同样大小，点「标准 / 大 / 特大」当场变（照 iPhone「文字大小」） */
.set-sample {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0.85rem -1rem -0.85rem;
  padding: 0.75rem 1rem 0.85rem;
  border-top: 1px solid var(--border);
}

.set-sample .text {
  font-size: calc(1.05rem * var(--line-scale, 1));
  color: var(--text);
}

.set-sample .text-zh {
  font-size: calc(0.95rem * var(--line-scale, 1));
  color: var(--text-muted);
}

/* 主题子页的预览（2026-11-11 Weiwei 选「预览固定在底部」）：钉在底栏上面（js/settings.js 按底栏高度定 bottom），
   上面一行一款的列表在它后面滚。里面按真实大小截看剧页最常看的一块：提示条、正在单句循环的那句（高亮、星、话筒）、下一句。
   外面一圈细框，看得出是一张截图；点不了。 */
.set-dock {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 4;
  padding: 0.4rem max(1rem, env(safe-area-inset-right, 0px)) 0.6rem max(1rem, env(safe-area-inset-left, 0px));
  background: var(--grouped, var(--bg));
  border-top: 1px solid var(--border);
}

.set-dock-head,
.set-shot {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.set-dock-head {
  margin-top: 0.1rem;
  margin-bottom: 0.4rem;
  padding: 0 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.set-shot {
  padding: 0.5rem 0.625rem 0.15rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  pointer-events: none;
  user-select: none;
}

.set-shot-tip {
  margin-bottom: 0.5rem;
  padding: 0.38rem 0.5rem;
  border-radius: 8px;
  background: var(--chip);
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
}

.set-shot-tip b {
  margin-right: 0.5rem;
  font-weight: 400;
  color: var(--accent);
}

.set-shot-line {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid transparent;
  border-radius: 8px;
}

.set-shot-line.cur {
  background: var(--highlight);
  border-color: var(--accent-soft);
}

.set-shot-ts {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  min-width: 3.4em;
  padding-top: 0.25rem;
  font-size: 0.68rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.set-shot-ts svg,
.set-shot-acts svg {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.set-shot-ts svg {
  width: 16px;
  height: 16px;
}

.set-shot-tx {
  flex: 1;
  min-width: 0;
  font-size: calc(1.05rem * var(--line-scale, 1));
  line-height: 1.45;
  color: var(--text);
}

.set-shot-acts {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-top: 0.1rem;
}

.set-shot-acts svg {
  width: 20px;
  height: 20px;
}

/* 设置里选了按钮靠左：预览里的星和话筒也画在左边 */
.acts-left .set-shot-acts {
  order: -1;
}

/* 台词字号（js/settings.js 设 --line-scale：标准 1、大 1.2/1.05、特大 1.375/1.05） */
.line-tools-on .subtitle-line .text {
  font-size: calc(1.05rem * var(--line-scale, 1));
}

.line-tools-on .subtitle-line .text-zh {
  font-size: calc(0.95rem * var(--line-scale, 1));
}

/* ---------- 主题配色（?dev=1，2026-11-07 Weiwei 看过模拟页 https://claude.ai/artifact/NG6x8ekijKb3dVVWL56MQK 定 7 套）----------
   「我的 › 设置 › 主题」选了哪套，html 上就写 data-theme-name（js/settings.js）；列表在 js/themes.js。
   每套只换颜色变量，浅色写在 :not(.dark) 里、深色写在 .dark 里（深色跟着设置页「外观」）。
   打分和对错的绿、橙、红，录音红，删除红每套都一样，不跟主题换。每套的字和底色都按 WCAG AA 查过对比度。
   米咖是默认：只把灰字、咖色加深一点、当前句高亮浅一点，让小字达到 4.5 倍对比度（深色版不变）。
   App 内书本标志（js/brand.js）用 --mark-bg（底）、--mark-book / --mark-book2（书页）、--mark-wave（声波）；
   米咖不写，用标志里的原值。主屏幕图标不跟主题换。 */
html.line-tools-on:not(.dark)[data-theme-name="mika"] {
  --text-muted: #69645d;
  --accent: #7b6448;
  --highlight: #ece5db;
  --gl-on: rgba(123, 100, 72, 0.16);
}

/* 宣纸 */
html.line-tools-on:not(.dark)[data-theme-name="xuanzhi"] {
  /* 积累卡片配色（2026-11-12 第二版，同色一浅一深）：收藏卡主色极浅底，错题卡主色深一档的底，错题圆标是主色淡一号 */
  --accent2: #686661;
  --accent-wash: #faf5eb;
  --accent2-wash: #f1eada;
  --bg: #f5f1e8;
  --bg-card: #fdfbf6;
  --text: #2f2c27;
  --text-muted: #625d55;
  --accent: #3a3833;
  --accent-soft: #b9b2a4;
  --border: #e6e0d3;
  --highlight: #ebe4d4;
  --chip: #ece6da;
  --grouped: #efe9dd;
  --range: #f1ebdf;
  --range-cur: #e8dfcc;
  --panel: rgba(245, 241, 232, 0.98);
  --panel-soft: rgba(245, 241, 232, 0.85);
  --gl-on: rgba(58, 56, 51, 0.16);
  --menu-bg: rgba(251, 249, 246, 0.82);
  --avatar-a: #8d877c;
  --avatar-b: #3a3833;
  --mark-bg: #34322e;
  --mark-book: #f3eee3;
  --mark-book2: #e8e3d8;
  --mark-wave: #f3eee3;
}

html.line-tools-on.dark[data-theme-name="xuanzhi"] {
  /* 积累卡片配色（2026-11-12 第二版，同色一浅一深）：收藏卡主色极浅底，错题卡主色深一档的底，错题圆标是主色淡一号 */
  --accent2: #a29a8b;
  --accent-wash: #2b2823;
  --accent2-wash: #34312c;
  --bg: #1a1917;
  --bg-card: #24221f;
  --text: #e9e4da;
  --text-muted: #a29c91;
  --accent: #d8d0c0;
  --accent-soft: #4b473f;
  --border: #35322d;
  --highlight: #2f2c27;
  --chip: #2b2925;
  --grouped: #12110f;
  --range: #201f1c;
  --range-cur: #2f2c27;
  --panel: rgba(26, 25, 23, 0.98);
  --panel-soft: rgba(26, 25, 23, 0.85);
  --gl-on: rgba(216, 208, 192, 0.2);
  --menu-bg: rgba(43, 41, 38, 0.86);
  --help-bg: rgba(36, 34, 31, 0.65);
  --seg-on: #494742;
  --avatar-a: #8d877c;
  --avatar-b: #3a3833;
  --mark-bg: #34322e;
  --mark-book: #f3eee3;
  --mark-book2: #e8e3d8;
  --mark-wave: #f3eee3;
}

/* 藕粉 */
html.line-tools-on:not(.dark)[data-theme-name="oufen"] {
  /* 积累卡片配色（2026-11-12 第二版，同色一浅一深）：收藏卡主色极浅底，错题卡主色深一档的底，错题圆标是主色淡一号 */
  --accent2: #b87f9a;
  --accent-wash: #fef2f7;
  --accent2-wash: #f9e3ed;
  --bg: #faf6f6;
  --bg-card: #ffffff;
  --text: #3e3537;
  --text-muted: #6e6265;
  --accent: #8c5670;
  --accent-soft: #d2b4c2;
  --border: #eee4e5;
  --highlight: #f1e2e6;
  --chip: #f5eaed;
  --grouped: #f4ecec;
  --range: #f8eff1;
  --range-cur: #f0e2e6;
  --panel: rgba(250, 246, 246, 0.98);
  --panel-soft: rgba(250, 246, 246, 0.85);
  --gl-on: rgba(140, 86, 112, 0.16);
  --menu-bg: rgba(253, 251, 251, 0.82);
  --avatar-a: #c99aa7;
  --avatar-b: #8c5670;
  --mark-bg: #8c5670;
  --mark-book: #fbf2f4;
  --mark-book2: #f4e9ec;
  --mark-wave: #fbf2f4;
}

html.line-tools-on.dark[data-theme-name="oufen"] {
  /* 积累卡片配色（2026-11-12 第二版，同色一浅一深）：收藏卡主色极浅底，错题卡主色深一档的底，错题圆标是主色淡一号 */
  --accent2: #966273;
  --accent-wash: #2e2528;
  --accent2-wash: #3c2c31;
  --bg: #1b1617;
  --bg-card: #272022;
  --text: #efe5e8;
  --text-muted: #a8989c;
  --accent: #cc95a6;
  --accent-soft: #5f424a;
  --border: #3a3033;
  --highlight: #35282c;
  --chip: #30272a;
  --grouped: #141011;
  --range: #221c1e;
  --range-cur: #35282c;
  --panel: rgba(27, 22, 23, 0.98);
  --panel-soft: rgba(27, 22, 23, 0.85);
  --gl-on: rgba(204, 149, 166, 0.2);
  --menu-bg: rgba(45, 39, 41, 0.86);
  --help-bg: rgba(39, 32, 34, 0.65);
  --seg-on: #4f4548;
  --avatar-a: #c99aa7;
  --avatar-b: #8c5670;
  --mark-bg: #8c5670;
  --mark-book: #fbf2f4;
  --mark-book2: #f4e9ec;
  --mark-wave: #fbf2f4;
}

/* 薰衣草 */
html.line-tools-on:not(.dark)[data-theme-name="xunyi"] {
  /* 积累卡片配色（2026-11-12 第二版，同色一浅一深）：收藏卡主色极浅底，错题卡主色深一档的底，错题圆标是主色淡一号 */
  --accent2: #9484c1;
  --accent-wash: #f6f4fe;
  --accent2-wash: #ebe7fa;
  --bg: #f7f6fa;
  --bg-card: #ffffff;
  --text: #36343d;
  --text-muted: #615e6a;
  --accent: #6b5b95;
  --accent-soft: #bdb3d6;
  --border: #e5e2ec;
  --highlight: #e9e5f2;
  --chip: #eeebf5;
  --grouped: #f0eef5;
  --range: #f4f1f9;
  --range-cur: #e9e5f2;
  --panel: rgba(247, 246, 250, 0.98);
  --panel-soft: rgba(247, 246, 250, 0.85);
  --gl-on: rgba(107, 91, 149, 0.16);
  --menu-bg: rgba(252, 251, 253, 0.82);
  --avatar-a: #a99cc9;
  --avatar-b: #6b5b95;
  --mark-bg: #6b5b95;
  --mark-book: #f5f2fa;
  --mark-book2: #ede9f4;
  --mark-wave: #f5f2fa;
}

html.line-tools-on.dark[data-theme-name="xunyi"] {
  /* 积累卡片配色（2026-11-12 第二版，同色一浅一深）：收藏卡主色极浅底，错题卡主色深一档的底，错题圆标是主色淡一号 */
  --accent2: #7e73a0;
  --accent-wash: #28262e;
  --accent2-wash: #312e3c;
  --bg: #18161c;
  --bg-card: #222029;
  --text: #e9e6ef;
  --text-muted: #a19dab;
  --accent: #b2a6d6;
  --accent-soft: #4d4562;
  --border: #34313c;
  --highlight: #2c2838;
  --chip: #2a2733;
  --grouped: #111015;
  --range: #1e1c24;
  --range-cur: #2c2838;
  --panel: rgba(24, 22, 28, 0.98);
  --panel-soft: rgba(24, 22, 28, 0.85);
  --gl-on: rgba(178, 166, 214, 0.2);
  --menu-bg: rgba(41, 39, 47, 0.86);
  --help-bg: rgba(34, 32, 41, 0.65);
  --seg-on: #494651;
  --avatar-a: #a99cc9;
  --avatar-b: #6b5b95;
  --mark-bg: #6b5b95;
  --mark-book: #f5f2fa;
  --mark-book2: #ede9f4;
  --mark-wave: #f5f2fa;
}

/* 雾蓝 */
html.line-tools-on:not(.dark)[data-theme-name="wulan"] {
  /* 积累卡片配色（2026-11-12 第二版，同色一浅一深）：收藏卡主色极浅底，错题卡主色深一档的底，错题圆标是主色淡一号 */
  --accent2: #6f91b3;
  --accent-wash: #f0f7fe;
  --accent2-wash: #deecfb;
  --bg: #f5f7f9;
  --bg-card: #ffffff;
  --text: #32383e;
  --text-muted: #5f6770;
  --accent: #4d6d8e;
  --accent-soft: #a9b9ca;
  --border: #e1e6eb;
  --highlight: #dfe7f0;
  --chip: #e8eef4;
  --grouped: #edf1f5;
  --range: #eef3f8;
  --range-cur: #e2e9f1;
  --panel: rgba(245, 247, 249, 0.98);
  --panel-soft: rgba(245, 247, 249, 0.85);
  --gl-on: rgba(77, 109, 142, 0.16);
  --menu-bg: rgba(251, 252, 253, 0.82);
  --avatar-a: #93a9c0;
  --avatar-b: #4d6d8e;
  --mark-bg: #4d6d8e;
  --mark-book: #f1f5f9;
  --mark-book2: #e7edf3;
  --mark-wave: #f1f5f9;
}

html.line-tools-on.dark[data-theme-name="wulan"] {
  /* 积累卡片配色（2026-11-12 第二版，同色一浅一深）：收藏卡主色极浅底，错题卡主色深一档的底，错题圆标是主色淡一号 */
  --accent2: #607f9d;
  --accent-wash: #242a30;
  --accent2-wash: #28333f;
  --bg: #15181b;
  --bg-card: #1f2428;
  --text: #e5eaef;
  --text-muted: #97a1ab;
  --accent: #93b3d3;
  --accent-soft: #45586c;
  --border: #30373e;
  --highlight: #27313b;
  --chip: #262d34;
  --grouped: #0f1215;
  --range: #1b2026;
  --range-cur: #27313b;
  --panel: rgba(21, 24, 27, 0.98);
  --panel-soft: rgba(21, 24, 27, 0.85);
  --gl-on: rgba(147, 179, 211, 0.2);
  --menu-bg: rgba(38, 43, 46, 0.86);
  --help-bg: rgba(31, 36, 40, 0.65);
  --seg-on: #454b52;
  --avatar-a: #93a9c0;
  --avatar-b: #4d6d8e;
  --mark-bg: #4d6d8e;
  --mark-book: #f1f5f9;
  --mark-book2: #e7edf3;
  --mark-wave: #f1f5f9;
}

/* 藏青 */
html.line-tools-on:not(.dark)[data-theme-name="zangqing"] {
  /* 积累卡片配色（2026-11-12 第二版，同色一浅一深）：收藏卡主色极浅底，错题卡主色深一档的底，错题圆标是主色淡一号 */
  --accent2: #55709e;
  --accent-wash: #f1f6fe;
  --accent2-wash: #e0ebfc;
  --bg: #f7f6f2;
  --bg-card: #ffffff;
  --text: #2c3340;
  --text-muted: #5c6370;
  --accent: #27406a;
  --accent-soft: #a9b4c8;
  --border: #e4e3dd;
  --highlight: #f3ebd4;
  --chip: #eceef3;
  --grouped: #f0efea;
  --range: #f8f3e4;
  --range-cur: #f0e5c8;
  --panel: rgba(247, 246, 242, 0.98);
  --panel-soft: rgba(247, 246, 242, 0.85);
  --gl-on: rgba(39, 64, 106, 0.16);
  --menu-bg: rgba(252, 251, 250, 0.82);
  --avatar-a: #c9a75a;
  --avatar-b: #27406a;
  --mark-bg: #1f3557;
  --mark-book: #e2c27a;
  --mark-book2: #d6ba78;
  --mark-wave: #ffffff;
}

html.line-tools-on.dark[data-theme-name="zangqing"] {
  /* 积累卡片配色（2026-11-12 第二版，同色一浅一深）：收藏卡主色极浅底，错题卡主色深一档的底，错题圆标是主色淡一号 */
  --accent2: #6a82a9;
  --accent-wash: #23272e;
  --accent2-wash: #28303d;
  --bg: #12161d;
  --bg-card: #1b212b;
  --text: #e6e9ef;
  --text-muted: #9aa2b0;
  --accent: #9db6e0;
  --accent-soft: #3d4a63;
  --border: #2e3542;
  --highlight: #2e2b21;
  --chip: #232a36;
  --grouped: #0c0f14;
  --range: #18191b;
  --range-cur: #2e2b21;
  --panel: rgba(18, 22, 29, 0.98);
  --panel-soft: rgba(18, 22, 29, 0.85);
  --gl-on: rgba(157, 182, 224, 0.2);
  --menu-bg: rgba(34, 40, 49, 0.86);
  --help-bg: rgba(27, 33, 43, 0.65);
  --seg-on: #424954;
  --avatar-a: #c9a75a;
  --avatar-b: #27406a;
  --mark-bg: #1f3557;
  --mark-book: #e2c27a;
  --mark-book2: #d6ba78;
  --mark-wave: #ffffff;
}

/* 石墨 */
html.line-tools-on:not(.dark)[data-theme-name="shimo"] {
  /* 积累卡片配色（2026-11-12 第二版，同色一浅一深）：收藏卡主色极浅底，错题卡主色深一档的底，错题圆标是主色淡一号 */
  --accent2: #7a7a77;
  --accent-wash: #f6f6f2;
  --accent2-wash: #eaeae7;
  --bg: #f6f6f5;
  --bg-card: #ffffff;
  --text: #2e2e2d;
  --text-muted: #666663;
  --accent: #4a4a47;
  --accent-soft: #b6b6b2;
  --border: #e4e4e1;
  --highlight: #e6e6e3;
  --chip: #ececea;
  --grouped: #efefed;
  --range: #f2f2f0;
  --range-cur: #e7e7e4;
  --panel: rgba(246, 246, 245, 0.98);
  --panel-soft: rgba(246, 246, 245, 0.85);
  --gl-on: rgba(74, 74, 71, 0.16);
  --menu-bg: rgba(251, 251, 251, 0.82);
  --avatar-a: #9a9a96;
  --avatar-b: #4a4a47;
  --mark-bg: #3f3f3d;
  --mark-book: #f4f4f2;
  --mark-book2: #e9e9e7;
  --mark-wave: #f4f4f2;
}

html.line-tools-on.dark[data-theme-name="shimo"] {
  /* 积累卡片配色（2026-11-12 第二版，同色一浅一深）：收藏卡主色极浅底，错题卡主色深一档的底，错题圆标是主色淡一号 */
  --accent2: #9c9c99;
  --accent-wash: #272724;
  --accent2-wash: #30302d;
  --bg: #161616;
  --bg-card: #212121;
  --text: #ececeb;
  --text-muted: #9d9d9a;
  --accent: #d2d2ce;
  --accent-soft: #4b4b49;
  --border: #333332;
  --highlight: #2d2d2c;
  --chip: #2a2a29;
  --grouped: #0f0f0f;
  --range: #1c1c1c;
  --range-cur: #2d2d2c;
  --panel: rgba(22, 22, 22, 0.98);
  --panel-soft: rgba(22, 22, 22, 0.85);
  --gl-on: rgba(210, 210, 206, 0.2);
  --menu-bg: rgba(40, 40, 40, 0.86);
  --help-bg: rgba(33, 33, 33, 0.65);
  --seg-on: #494948;
  --avatar-a: #9a9a96;
  --avatar-b: #4a4a47;
  --mark-bg: #3f3f3d;
  --mark-book: #f4f4f2;
  --mark-book2: #e9e9e7;
  --mark-wave: #f4f4f2;
}

/* ---------- 三种练法并排、等级按钮写法（js/scenes.js，2026-11-09 Weiwei 看过模拟页第二版定） ---------- */
/* 收藏页「‹ 我的」下面一行：左边「共 N 句」，右边排序按钮（2026-11-11 Weiwei 看过模拟页第三版选甲） */
#favorites-page .fav-sortrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 1rem 0.3rem;
  padding-left: 0.2rem;
}

/* 排序按钮：没有底色，排序图标 + 「按时间」+ 方向箭头，主题色字。和筛选的胶囊「等级 ⌄」长得不一样，不会当成筛选。
   能点的范围 44 像素高，手指一碰就有底色 */
.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  margin-right: -0.5rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.sort-btn:active,
.sort-btn.open {
  background: var(--chip);
}

.sort-btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.sort-btn .sort-ic {
  width: 16px;
  height: 16px;
}

/* 菜单里名字下面一行灰色小字（收藏页排序：选中那项写现在的顺序） */
.pop-tx {
  display: flex;
  flex-direction: column;
  padding: 0.45rem 0;
}

.pop-note {
  margin-top: 0.1rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: normal;
}

/* 练习页大标题下面三块练法卡片（js/scenes.js，2026-11-12 Weiwei 看过模拟页选甲，卡片里不加说明，直接上线）：替换原来的分段控件。
   和积累页的卡片同一种样子：圆图标 + 名字。颜色照「卡片浅底只用主题色，一浅一深」：没选的极浅底、圆标主题色淡一号，
   选中的深一档底、圆标主题色，再加一圈 2 像素主题色细框。每块至少 44 像素高，手指一碰就变暗 */
#practice-page .way-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0.4rem 0.2rem 0.85rem;
}

.way-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  min-height: 52px;
  padding: 0.75rem 0.7rem 0.8rem;
  border: 0;
  border-radius: 14px;
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 2px transparent;
  font-family: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.1s;
}

.way-tile.on {
  background: var(--accent2-wash);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.way-tile:active {
  filter: brightness(0.94);
}

.way-ico {
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent2);
  color: var(--bg-card);
}

.way-tile.on .way-ico {
  background: var(--accent);
}

.way-ico svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.way-top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.way-name {
  font-size: 1.1rem;
  font-weight: 600;
  white-space: nowrap;
}

/* 段数：名字下面一行灰色小字，和名字第一个字对齐（圆标宽 1.9rem + 间距 0.45rem）。
   只是让卡片撑得好看、顺带告诉一共几段，主角是名字，所以不用大数字（2026-11-12 Weiwei：几百段的数字放那么大没必要，
   不像收藏是自己攒的） */
.way-num {
  padding-left: 2.35rem;
  font-size: 0.8125rem;
  line-height: 1.2;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 小屏（320 宽）三块放得下：圆标和边距小一点 */
@media (max-width: 360px) {
  .way-tile {
    padding: 0.6rem 0.5rem 0.65rem;
  }

  .way-top {
    gap: 0.35rem;
  }

  /* 小屏放不下「2674 段」对齐名字：数字从卡片左边起 */
  .way-num {
    padding-left: 0.1rem;
  }

  .way-ico {
    width: 1.65rem;
    height: 1.65rem;
  }
}

/* 选了某一档等级：按钮填上主题色（没选时写「等级」，浅底咖字） */
.pick-btn.set {
  background: var(--accent);
  color: #fff;
}

.line-tools-on.dark .pick-btn.set {
  color: var(--bg);
}


/* ---------- 积累（底部第四个入口，js/keep.js；2026-11-11 Weiwei 看过模拟页选甲）：
   和「我的」同一种底色、白卡不画线框；上面收藏、错题两块大卡片，下面「最近收藏」「最近错题」各几句，一句一行整行能点 ---------- */
#keep-page {
  padding: 1rem 1rem calc(4.5rem + var(--safe-bottom));
}

html.line-tools-on body:has(#keep-page.active),
.line-tools-on #keep-page,
html.line-tools-on body.has-tabbar:has(#keep-page.active)::before {
  background: var(--grouped);
}

.line-tools-on #keep-page .account-group {
  border-color: transparent;
  margin-bottom: 1.8rem;
}

#keep-page .large-title {
  margin-bottom: 0.75rem;
}

/* 2026-11-11 晚 Weiwei 嫌平淡，看过模拟页选甲：收藏、错题两块并排的大卡片，彩色圆图标 + 大数字（照苹果「提醒事项」首页） */
.keep-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-bottom: 1.4rem;
}

.keep-tile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 96px;
  padding: 0.8rem 0.85rem 0.85rem;
  border: 0;
  border-radius: 14px;
  background: var(--bg-card);
  font-family: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.1s;
}

/* 收藏卡用主色极浅的底，错题卡用主色深一档的底：每个主题只有一个颜色，两块分得开又融合（2026-11-12 Weiwei：#208 的辅色浅底太艳、和主题打架，看过模拟页 https://claude.ai/artifact/Lf3eqnWynhfFSJB5dvrrJP 选乙） */
.keep-tile-fav {
  background: var(--accent-wash);
}

.keep-tile-mis {
  background: var(--accent2-wash);
}

.keep-tile:active {
  filter: brightness(0.94);
}

.keep-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.keep-ico {
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--bg-card);
}

.keep-ico svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.keep-ico .keep-pen {
  fill: none;
  stroke-width: 2;
}

/* 图标和小圆点：收藏是主色（和台词旁边的星一样），错题是主色淡一号（和图标里白色笔的的对比度不低于 3） */
.keep-ico-fav,
.keep-dot-fav {
  background: var(--accent);
}

.keep-ico-mis,
.keep-dot-mis {
  background: var(--accent2);
}

.keep-name {
  flex: 1;
  font-size: 1.02rem;
  font-weight: 600;
  white-space: nowrap;
}

/* 和「我的」里能点的行一样的 ›：一看就知道能点进去 */
.keep-chev {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-muted);
}

/* 数字和名字的第一个字对齐（图标宽 1.9rem + 间距 0.5rem） */
.keep-num {
  padding-left: 2.4rem;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.keep-num small {
  margin-left: 0.2rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* 数字还没读回来时不单独露一个「句」 */
.keep-num span:empty + small {
  visibility: hidden;
}

/* 「最近收藏」「最近错题」：粗黑小标题（照苹果音乐资料库「最近添加」），把上下两块分开 */
.keep-h {
  margin: 0 0 0.6rem 0.1rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.keep-line {
  position: relative;
  display: flex;
  gap: 0.65rem;
  width: 100%;
  min-height: 44px;
  padding: 0.9rem 1rem;   /* 2026-11-12 Weiwei 觉得稍紧，看过对比图选甲：每句上下多留空，句数不变 */
  border: 0;
  background: none;
  font-family: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s;
}

/* 手指一碰整行变色 */
.keep-line:active {
  background: var(--highlight);
}

/* 行与行之间的细线从文字开始画（和「我的」一样） */
.keep-line + .keep-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1rem;
  right: 0;
  border-top: 1px solid var(--border);
}

/* 句子前面的小色点：和上面卡片的图标同色，一眼分清是收藏还是错题 */
.keep-dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.52rem;
  border-radius: 50%;
}

.keep-txt {
  flex: 1;
  min-width: 0;
}

/* 英文一行、中文一行，太长的用省略号收住（2026-11-12 Weiwei：两三行英文挤成一片，没有中文不好看） */
.keep-en,
.keep-zh {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

.keep-en {
  font-size: 1rem;
}

.keep-zh {
  margin-top: 0.12rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.keep-src {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* 错题的英文把要填的词空着（和填空的空格同一种下划线），不漏答案 */
.keep-blank {
  display: inline-block;
  min-width: 3.5em;
  border-bottom: 1.5px solid var(--accent);
  vertical-align: baseline;
}

.keep-blank::before {
  content: "\00a0";
}

/* 从积累里点了某一句进收藏页 / 错题页：这一句底色亮一下再退掉 */
.line-flash {
  animation: line-flash 1.6s ease-out;
}

@keyframes line-flash {
  0%, 35% { background: var(--highlight); }
  100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .line-flash {
    animation: none;
    background: var(--highlight);
  }
}