:root{
  --fontSize: 32px; --rtScale: 0.56; --lineHeight: 2.25;
  --bg:#fff; --fg:#111; --muted:#666; --card:#f4f5f7;
  --border: rgba(0,0,0,.12); --focus: rgba(0,140,255,.32);
  --maxWidth: 980px; --btnFont: 16px; --btnPadY: 12px; --btnPadX: 14px; --radius: 14px;
}
body.dark{ --bg:#0f1115; --fg:#f2f2f2; --muted:#b7b7b7; --card:#1a1f2a; --border: rgba(255,255,255,.14); --focus: rgba(0,140,255,.45); }
*{ box-sizing:border-box; }
body{ margin:0; font-family: system-ui, -apple-system, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; background:var(--bg); color:var(--fg); }
a{ color: inherit; text-decoration: none; }
header{ position: sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--border); padding:12px 12px; }
.bar{ max-width:var(--maxWidth); margin:0 auto; display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.group{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
button, select, input{ font-size:var(--btnFont); padding:var(--btnPadY) var(--btnPadX); border-radius:var(--radius); border:1px solid var(--border); background:var(--card); color:var(--fg); min-height:44px; }
button{ cursor:pointer; } button:active{ transform: translateY(1px); }
button.primary{ border-color: rgba(0,140,255,.45); box-shadow: 0 0 0 2px var(--focus); }
main{ max-width:var(--maxWidth); margin:0 auto; padding:18px 14px 140px; }
h1{ margin:8px 0 6px; font-size:22px; }
.hint{ margin:0 0 14px; color:var(--muted); font-size:14px; line-height:1.6; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:14px 14px; margin:12px 0; }
.row{ display:flex; gap:10px; align-items:center; justify-content:space-between; }
.badge{ font-size:12px; color:var(--muted); border:1px solid var(--border); padding:6px 10px; border-radius:999px; white-space:nowrap; }
.grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
@media (max-width: 860px){ .grid{ grid-template-columns: 1fr; } }
.reader{ font-size:var(--fontSize); line-height:var(--lineHeight); letter-spacing:.5px; word-break:break-word; margin-top:10px; }
ruby{ ruby-position: over; ruby-align:center; margin:0 1px; }
rt{ font-size: calc(var(--fontSize) * var(--rtScale) * 0.7); line-height:1.05; color:var(--muted); white-space:nowrap; letter-spacing:0; }
.tok{ display:inline-block; padding:1px 0; border-radius:10px; }
.tok.active{
  background: rgba(0,140,255,.18);
  box-shadow: inset 0 0 0 2px var(--focus);
}

.note{ display:inline-block; font-size:14px; line-height:1.2; color:var(--muted); border:1px dashed var(--border); padding:2px 6px; border-radius:10px; margin:0 4px; vertical-align:middle; background: rgba(0,0,0,.02); }
body.dark .note{ background: rgba(255,255,255,.05); }
.heading{ display:block; text-align:center; font-weight:900; font-size:1.12em; letter-spacing:2px; margin:8px 0 6px; color:var(--fg); }
.dualCol{ display:inline-flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:2px 2px; min-width:1em; }
.dualTop,.dualBottom{ display:block; font-size:1em; line-height:1.15; color:var(--fg); }
.dualTop.empty{ opacity:0; }
.section.active{ outline:3px solid var(--focus); outline-offset:2px; }
mark{ padding:0 2px; border-radius:6px; background: rgba(255,200,0,.35); color:inherit; }
body.dark mark{ background: rgba(255,200,0,.28); }
#endBanner,#resumeBanner{ position:fixed; left:12px; right:12px; bottom:12px; z-index:80; display:none; }
.bannerInner{ max-width:var(--maxWidth); margin:0 auto; background:var(--bg); border:1px solid var(--border); border-radius:18px; padding:12px 12px; display:flex; gap:10px; align-items:center; justify-content:space-between; box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.bannerMsg{ font-weight:800; }
.bottomBar{ display:none; }
@media (max-width: 767px){
  :root{ --fontSize:30px; --rtScale:0.58; --lineHeight:2.35; }
  header.readerHeader{ display:none; }
  main.readerMain{ padding-bottom: calc(190px + env(safe-area-inset-bottom)); }
  .bottomBar{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--bg); border-top:1px solid var(--border); padding:10px 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .bottomInner{ max-width:var(--maxWidth); margin:0 auto; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; }
  .bottomInner .group{ flex:1 1 auto; justify-content:center; }
  select,button{ flex:1 1 auto; min-width:90px; }
}

/* 注音豎標（僅注音；拼音維持橫標） */
.rt-zhuyin{
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: normal;
  line-height: 1;
}


/* 注音容器：固定在字的右側，垂直置中 */
.zvwrap{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.02em;
  height: 1em;              /* 以中文字高度為框 */
  width: 0.75em;            /* 基本寬度 */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--muted);
}

/* 注音直排符號列 */
.zvcol{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.zsym{ display:block; line-height: 1; }

/* 聲調：二/三/四聲放右側居中 */
.ztone-side{
  position: absolute;
  right: -0.42em;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
}

/* 聲調：五聲點放上方（在容器內不超框） */
.ztone-top{
  position: absolute;
  top: 0.02em;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1;
}


/* 每個字的容器：右邊預留注音區的寬度 */
.tok.tok-char{
  position: relative;
  display: inline-block;
  padding-right: 1.15em; /* 給注音列 + 聲調更充足空間 */
}

/* 中文字 */
.han{
  display: inline-block;
}

/* 拼音：固定置頂居中 */
.py{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(-1 * var(--fontSize) * 0.62);
  font-size: calc(var(--fontSize) * var(--rtScale) * 0.7);
  line-height: 1.05;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
}

/* 注音容器：固定在字的右側、垂直置中 */
.zvwrap{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.02em;
  height: 1em;                 /* 以中文字高度為框 */
  width: 0.92em;               /* 夠放注音列 + 聲調 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.04em;
  pointer-events: none;
  color: var(--muted);
}

/* 注音直排符號列（左側） */
.zvcol{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.zsym{ display:block; line-height: 1; }

/* 二/三/四聲：右側居中（用 flex sibling，不重疊） */
.ztone-side{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1em;
  line-height: 1;
  writing-mode: horizontal-tb;
}

/* 五聲點：上方（絕對定位，不干擾直排符號列） */
.ztone-top{
  position: absolute;
  top: 0.02em;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1;
  writing-mode: horizontal-tb;
}


/* 每個字的外容器：右邊預留注音區的寬度 */
.tok.tok-char{
  position: relative;
  display: inline-block;
  padding-right: 1.15em;
}

/* 中文字本體盒：只包中文字與拼音，寬度等於中文字本體，不含右側 padding */
.hanbox{
  position: relative;
  display: inline-block;
}
.han{ display:inline-block; }

/* 拼音：固定在中文字上方、以 hanbox 水平居中 */
.py{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(-1 * var(--fontSize) * 0.62);
  font-size: calc(var(--fontSize) * var(--rtScale) * 0.7);
  line-height: 1.05;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
}

/* 注音容器：固定在字的右側、垂直置中 */
.zvwrap{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.02em;
  height: 1em;
  width: 0.92em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.04em;
  pointer-events: none;
  color: var(--muted);
}

/* 注音直排符號列（左側） */
.zvcol{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.zsym{ display:block; line-height: 1; }

/* 二/三/四聲：右側居中（不重疊） */
.ztone-side{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1em;
  line-height: 1;
  writing-mode: horizontal-tb;
}

/* 五聲點：上方 */
.ztone-top{
  position: absolute;
  top: 0.02em;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1;
  writing-mode: horizontal-tb;
}

/* ===== v13 注音距離大幅拉近（改為「緊貼中文字右側」而非靠容器右緣） =====
  問題根因：tok-char 為了預留注音使用 padding-right + 絕對定位，注音會被推到容器最右側，造成看起來像差一個字。
  解法：tok-char 改成 inline-flex，注音容器 zvwrap 直接排在 hanbox 右側（自然緊貼），不再用 padding-right/absolute 方式。
  拼音仍以 hanbox 置中顯示在上方（不受注音影響）。
*/
.tok.tok-char{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.10em;            /* 中文與注音的距離（可微調） */
  padding-right: 0;
  vertical-align: baseline;
}

.hanbox{ position: relative; display: inline-block; }
.han{ display:inline-block; }

/* 拼音：固定在中文字上方、以 hanbox 水平居中 */
.py{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(-1 * var(--fontSize) * 0.62);
  font-size: calc(var(--fontSize) * var(--rtScale) * 0.7);
  line-height: 1.05;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
}

/* 注音容器：改為正常流（非 absolute），緊貼中文字右側 */
.zvwrap{
  position: relative;
  height: 1em;
  width: 0.92em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.04em;
  pointer-events: none;
  color: var(--muted);
}

/* 注音直排符號列（左側） */
.zvcol{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.zsym{ display:block; line-height: 1; }

/* 二/三/四聲：右側居中（不重疊） */
.ztone-side{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1em;
  line-height: 1;
  writing-mode: horizontal-tb;
}

/* 五聲點：上方 */
.ztone-top{
  position: absolute;
  top: 0.02em;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1;
  writing-mode: horizontal-tb;
}

/* ===== v16 修正 =====
1) 注音大小統一：固定以中文字大小的 24% 顯示（確保 4 符號高度 <= 中文），避免大小不一。
2) 拼音模式：改回 ruby/rt 排版（自然在字上方且居中），並縮小 30%（*0.7）。
3) 播放高亮只框中文字本體（不框到拼音），避免混亂：高亮套在 .tok-step。
*/

/* 外層：中文字 + 注音並排（注音緊貼中文字） */
.tok-char{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.06em;     /* 中文與注音距離（可再微調） */
  vertical-align: baseline;
}

/* ruby：拼音在上方 */
.tok-char ruby{ ruby-position: over; ruby-align: center; }
.rt-pinyin{
  font-size: calc(var(--fontSize) * var(--rtScale) * 0.7);
  line-height: 1.05;
  color: var(--muted);
  white-space: nowrap;
}

/* 注音：固定大小（統一） */
.zvwrap{
  position: relative;
  height: 1em;
  width: 0.90em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.04em;
  pointer-events: none;
  color: var(--muted);
  font-size: calc(var(--fontSize) * 0.24);
}
.zvcol{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.zsym{ display:block; line-height: 1; }
.ztone-side{
  display:flex;
  align-items:center;
  justify-content:center;
  height:1em;
  line-height:1;
}
.ztone-top{
  position:absolute;
  top: 0.02em;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1;
}

/* 高亮只套在中文字 span.tok-step（避免框到拼音） */
.tok-step{ display:inline-block; }

/* v17 highlight fix: step-only inset border prevents boxing zhuyin */
.tok-step{ padding: 0 0.10em; }


/* ===== v18 變數填寫介面（○○ 空格） ===== */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: none;
  z-index: 120;
  padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.modal.show{ display: block; }
.modalInner{
  max-width: var(--maxWidth);
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  overflow: hidden;
}
.modalHeader{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--border);
}
.modalTitle{ font-weight: 900; font-size: 18px; }
.varsList{ padding: 12px 14px; max-height: min(60vh, 520px); overflow: auto; }
.varRow{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border);
}
.varLabel{ font-weight: 800; }
.varHint{ color: var(--muted); font-size: 13px; line-height: 1.5; }
.varInput{
  width: 100%;
  font-size: 18px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
}
.modalFooter{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
}
.varSlot{
  font-weight: 900;
  display: inline-block;
  border-bottom: 2px solid rgba(0,140,255,.45);
  padding: 0 2px;
  margin: 0 1px;
}

/* v20 named placeholders */
.varName{ display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid var(--border); font-size:12px; color:var(--muted); }

/* v28 heading playback: headings participate in autoplay and pause 3s */
.heading.headingStep{ }


/* ===== v29 直式 / 橫式閱讀模式 ===== */
.layoutVertical #content{
  overflow-x: auto;
  overflow-y: hidden;
}
.layoutVertical .section{
  min-width: max-content;
}
.layoutVertical .reader{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1.9;
  letter-spacing: 0.04em;
  max-height: 76vh;
  min-height: 60vh;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: normal;
  padding: 10px 6px;
}
.layoutVertical .reader .tok,
.layoutVertical .reader .tok-char,
.layoutVertical .reader .tok-line,
.layoutVertical .reader ruby,
.layoutVertical .reader .hanbox,
.layoutVertical .reader .han{
  writing-mode: vertical-rl;
}
.layoutVertical .reader .tok-line{
  display: inline;
  line-height: 1.9;
}
.layoutVertical .reader br{
  display: inline-block;
  width: 1.2em;
  height: 0;
  content: "";
}
.layoutVertical .py,
.layoutVertical .rt-pinyin{
  writing-mode: horizontal-tb;
}
.layoutVertical .heading.headingStep{
  display: inline-block;
  margin: 0 8px;
  padding: 4px 0;
}



/* ===== v30 直式模式：注音/拼音位置修正 =====
   1. 拼音仍在中文字上方
   2. 注音仍在中文字右邊
   只讓整個 reader 直排；每個字的內部 token 維持原本的局部座標。
*/
.layoutVertical .reader .tok,
.layoutVertical .reader .tok-char,
.layoutVertical .reader ruby,
.layoutVertical .reader .hanbox,
.layoutVertical .reader .han,
.layoutVertical .reader .zvwrap,
.layoutVertical .reader .zvcol,
.layoutVertical .reader .rt-pinyin,
.layoutVertical .reader .py{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed;
}

.layoutVertical .reader .tok-char{
  display: inline-flex;
  align-items: center;
  gap: 0.06em;
  vertical-align: top;
}

.layoutVertical .reader ruby{
  ruby-position: over;
  ruby-align: center;
}

.layoutVertical .reader .rt-pinyin{
  white-space: nowrap;
}

.layoutVertical .reader .zvwrap{
  position: relative;
}

.layoutVertical .reader .tok-line{
  writing-mode: horizontal-tb !important;
  display: inline;
  line-height: 1.9;
}



/* ===== v31 直式模式微調 =====
   1. 直式閱讀時改為「橫向捲動」
   2. 標題在直式模式也改為直排
*/
.layoutVertical{
  overflow-x: auto;
  overflow-y: hidden;
}

.layoutVertical #content{
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
}

.layoutVertical .section{
  flex: 0 0 auto;
}

.layoutVertical .reader{
  overflow-x: auto;
  overflow-y: hidden;
  max-width: none;
}

/* 標題在直式模式要直排 */
.layoutVertical .heading.headingStep{
  writing-mode: vertical-rl !important;
  text-orientation: upright;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 6em;
  line-height: 1.4;
  margin: 0 4px;
  padding: 4px 0;
}



/* ===== v32 直式模式修正 =====
   1. 段落由右向左排列
   2. 讓選單不要遮到經文
   3. 電腦版橫向卷軸固定在底部可見
*/

/* 直式時內容從右往左 */
.layoutVertical #content{
  flex-direction: row-reverse;
  align-items: stretch;
  padding-top: 6px;
  padding-bottom: 18px;
}

/* 直式時，給內容區更多上方空間，避免被桌面控制列擋住 */
@media (min-width: 901px){
  .layoutVertical main{
    padding-top: 128px;
  }
}

/* 手機直式時，底部工具列避免蓋住內容 */
@media (max-width: 900px){
  .layoutVertical main{
    padding-bottom: 110px;
  }
}

/* 電腦模式：讓橫向卷軸在底部比較容易操作 */
@media (min-width: 901px){
  .layoutVertical #content{
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: stable both-edges;
  }

  .layoutVertical .reader{
    max-height: calc(100vh - 220px);
    min-height: calc(100vh - 320px);
  }
}

/* 讓每段在直式時高度適應視窗，卷軸出現在底部 */
.layoutVertical .section{
  align-self: stretch;
}

.layoutVertical .section .reader{
  box-sizing: border-box;
}

/* 標題直式時不要被壓太扁 */
.layoutVertical .heading.headingStep{
  min-height: 7.5em;
}



/* ===== v33 直式模式：可視範圍播放 + 右側直式選單 ===== */

/* 電腦版：直式時把工具列改成靠右直式 */
@media (min-width: 901px){
  .layoutVertical .readerToolbar{
    position: fixed;
    top: 96px;
    right: 12px;
    left: auto;
    width: 86px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 80;
    padding: 10px 8px;
  }

  .layoutVertical .readerToolbar > *{
    width: 100%;
  }

  .layoutVertical main{
    padding-top: 92px;
    padding-right: 116px;
  }

  .layoutVertical #content{
    padding-right: 4px;
  }
}

/* 手機版：直式時把底部工具列改成右側直式 */
@media (max-width: 900px){
  .layoutVertical .readerMobileBar{
    position: fixed;
    top: 88px;
    right: 8px;
    bottom: 12px;
    left: auto;
    width: 72px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 85;
    border-radius: 18px;
  }

  .layoutVertical .readerMobileBar > *{
    width: 100%;
    min-width: 0;
  }

  .layoutVertical main{
    padding-right: 86px;
    padding-bottom: 24px;
  }
}

/* 直式模式中，當段落播放到時，明顯標示目前段落 */
.layoutVertical .section.active{
  outline: 2px solid rgba(0,140,255,.22);
  outline-offset: -2px;
}



/* ===== v34 直式模式：強制右側工具列 + 固定可視範圍 ===== */

/* 讓 body 成為可定位容器 */
body.layoutVertical{
  overflow-x: hidden;
}

/* 直式模式內容：固定水平卷軸，只在底部 */
.layoutVertical #content{
  display: flex !important;
  flex-direction: row-reverse !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-gutter: stable both-edges;
  width: 100%;
  box-sizing: border-box;
}

/* 段落保持固定寬度，避免擠壓 */
.layoutVertical .section{
  flex: 0 0 auto !important;
}

/* 桌機：工具列固定右側 */
@media (min-width: 901px){
  body.layoutVertical #readerToolbar{
    position: fixed !important;
    top: 88px !important;
    right: 10px !important;
    left: auto !important;
    bottom: 12px !important;
    width: 90px !important;
    max-width: 90px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 999 !important;
    padding: 10px 8px !important;
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
  }

  body.layoutVertical #readerToolbar > *{
    width: 100% !important;
    min-width: 0 !important;
  }

  body.layoutVertical main{
    padding-top: 88px !important;
    padding-right: 118px !important;
  }
}

/* 手機 / 平板：底部工具列改右側直式 */
@media (max-width: 900px){
  body.layoutVertical #readerMobileBar{
    position: fixed !important;
    top: 78px !important;
    right: 8px !important;
    left: auto !important;
    bottom: 10px !important;
    width: 74px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 999 !important;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom)) !important;
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
  }

  body.layoutVertical #readerMobileBar > *{
    width: 100% !important;
    min-width: 0 !important;
  }

  body.layoutVertical main{
    padding-right: 86px !important;
    padding-bottom: 20px !important;
  }
}

/* 直式模式當前段明顯顯示 */
.layoutVertical .section.active{
  outline: 2px solid rgba(0,140,255,.24);
  outline-offset: -2px;
}



/* ===== v35 直式經本模式：右側工具列 + 水平可視播放 ===== */

/* 直式整體：內容區變成水平卷軸，段落由右往左 */
body.layoutVertical{
  overflow: hidden;
}
body.layoutVertical main.readerMain{
  max-width: none !important;
  margin: 0 !important;
  padding: 84px 126px 22px 14px !important;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
}
body.layoutVertical #content{
  display: flex !important;
  flex-direction: row-reverse !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 10px;
  width: 100%;
  height: calc(100vh - 132px);
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-gutter: stable both-edges;
  padding: 6px 0 16px;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
body.layoutVertical .section{
  flex: 0 0 auto !important;
  align-self: stretch;
  margin: 0;
}
body.layoutVertical .section .reader{
  max-height: none !important;
  min-height: calc(100vh - 220px) !important;
  height: calc(100vh - 220px);
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* 當前段落明顯標示 */
body.layoutVertical .section.active{
  outline: 2px solid rgba(0,140,255,.24);
  outline-offset: -2px;
}

/* 桌機：直接用既有 header 當右側直式工具列 */
@media (min-width: 901px){
  body.layoutVertical header.readerHeader{
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    width: 96px !important;
    height: calc(100vh - 20px) !important;
    z-index: 999 !important;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    padding: 10px 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--bg) !important;
  }
  body.layoutVertical header.readerHeader .bar{
    max-width: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  body.layoutVertical header.readerHeader .group{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100%;
  }
  body.layoutVertical header.readerHeader button,
  body.layoutVertical header.readerHeader select,
  body.layoutVertical header.readerHeader input,
  body.layoutVertical header.readerHeader .badge{
    width: 100% !important;
    min-width: 0 !important;
  }
  body.layoutVertical header.readerHeader .badge{
    display: block;
    text-align: center;
  }
  body.layoutVertical .bottomBar{
    display: none !important;
  }
}

/* 手機 / 平板：用既有 bottomBar 當右側直式工具列 */
@media (max-width: 900px){
  body.layoutVertical .bottomBar{
    display: block !important;
    position: fixed !important;
    top: 82px !important;
    right: 8px !important;
    left: auto !important;
    bottom: 10px !important;
    width: 76px !important;
    z-index: 999 !important;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--bg) !important;
  }
  body.layoutVertical .bottomInner{
    max-width: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  body.layoutVertical .bottomInner .group{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100%;
  }
  body.layoutVertical .bottomInner button,
  body.layoutVertical .bottomInner select{
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  body.layoutVertical main.readerMain{
    padding: 78px 90px 18px 10px !important;
    height: 100vh;
  }
  body.layoutVertical #content{
    height: calc(100vh - 116px);
  }
}

/* 直式模式標題：直排、獨立更醒目 */
body.layoutVertical .heading.headingStep{
  writing-mode: vertical-rl !important;
  text-orientation: upright;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 8em;
  line-height: 1.45;
  margin: 0 4px;
  padding: 4px 0;
}



/* ===== v36 直式經本模式完整修正 =====
1. 去掉直式內容中不必要的空白欄距
2. 填寫資料 / 雙版本切成直式
3. 找到上次紀錄視窗改到右邊
4. 桌機內容上靠頂、底部保留可操作卷軸
*/

/* 直式模式：隱藏主標題與提示，內容往上靠頂 */
body.layoutVertical main.readerMain > h1,
body.layoutVertical main.readerMain > p.hint{
  display:none !important;
}

body.layoutVertical main.readerMain{
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box;
  overflow: hidden;
  height: 100vh;
}

/* 桌機 */
@media (min-width: 901px){
  body.layoutVertical main.readerMain{
    padding: 8px 122px 8px 8px !important;
  }
}

/* 手機 / 平板 */
@media (max-width: 900px){
  body.layoutVertical main.readerMain{
    padding: 8px 86px 8px 6px !important;
  }
}

body.layoutVertical #content{
  display: flex !important;
  flex-direction: row-reverse !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 4px !important;
  width: 100%;
  height: calc(100vh - 16px);
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-gutter: stable both-edges;
  padding: 0 0 12px 0 !important;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body.layoutVertical .section{
  flex: 0 0 auto !important;
  align-self: stretch !important;
  margin: 0 !important;
}

body.layoutVertical .section .reader{
  height: calc(100vh - 42px) !important;
  min-height: calc(100vh - 42px) !important;
  max-height: calc(100vh - 42px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 2px 2px 10px !important;
  margin-top: 0 !important;
}

/* 直式內文：行距與欄距縮小，避免空白過大 */
body.layoutVertical .reader{
  letter-spacing: 0.01em !important;
  line-height: 1.55 !important;
}

body.layoutVertical .reader br{
  display: inline-block;
  width: 0.45em !important;
  height: 0 !important;
  content: "";
}

/* 直式中的全形空白不應形成整欄空隙 */
body.layoutVertical .tok-punc.tok-space{
  display: none !important;
}

/* 直式純文字 token 改為直排 */
body.layoutVertical .tok-line{
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  display: inline-block !important;
  line-height: 1.55 !important;
  padding: 0 !important;
}

/* 填寫資料內容改為直式 */
body.layoutVertical .varSlot{
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  display: inline-block !important;
  line-height: 1.2 !important;
  padding: 2px 1px !important;
  margin: 0 !important;
}

/* 雙版本資料改為直式 */
body.layoutVertical .tok-dual{
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  display: inline-block !important;
}
body.layoutVertical .dualCol{
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 1px !important;
  min-width: 1em !important;
  line-height: 1.1 !important;
}
body.layoutVertical .dualTop,
body.layoutVertical .dualBottom{
  writing-mode: horizontal-tb !important;
  line-height: 1.1 !important;
}

/* 注音 / 拼音位置維持：拼音上方、注音右邊 */
body.layoutVertical .reader .tok-char,
body.layoutVertical .reader ruby,
body.layoutVertical .reader .hanbox,
body.layoutVertical .reader .han,
body.layoutVertical .reader .zvwrap,
body.layoutVertical .reader .zvcol,
body.layoutVertical .reader .rt-pinyin,
body.layoutVertical .reader .py{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

/* 直式標題 */
body.layoutVertical .heading.headingStep{
  writing-mode: vertical-rl !important;
  text-orientation: upright !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 7.2em !important;
  margin: 0 2px !important;
  padding: 2px 0 !important;
}

/* 當前段落顯示 */
body.layoutVertical .section.active{
  outline: 2px solid rgba(0,140,255,.24);
  outline-offset: -2px;
}

/* 右側恢復進度 / 結束視窗 */
body.layoutVertical #resumeBanner,
body.layoutVertical #endBanner{
  left: auto !important;
  right: 10px !important;
  top: 12px !important;
  bottom: auto !important;
  width: 286px !important;
  z-index: 1000 !important;
}
body.layoutVertical #resumeBanner .bannerInner,
body.layoutVertical #endBanner .bannerInner{
  max-width: none !important;
  margin: 0 !important;
}



/* ===== v37 直式模式補強 =====
1. 填寫資料真正直排
2. 雙版本真正直排
3. 逐字播放以原生 scrollIntoView 帶動水平可視範圍
*/

/* 直式下：一般字維持局部水平，避免拼音/注音跑位；但 var / dual 例外改成直排 */
body.layoutVertical .varSlot{
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.05 !important;
  min-height: 2.2em !important;
  padding: 1px 0 !important;
  margin: 0 !important;
  border-bottom: none !important;
  border-left: 2px solid rgba(0,140,255,.45) !important;
}

body.layoutVertical .tok-dual{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  vertical-align: top !important;
}
body.layoutVertical .dualCol{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: auto !important;
  padding: 0 !important;
  line-height: 1 !important;
}
body.layoutVertical .dualTop,
body.layoutVertical .dualBottom{
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-height: 1em !important;
}
body.layoutVertical .dualTop{
  margin-right: 1px !important;
}
body.layoutVertical .dualTop.empty{
  opacity: 0 !important;
}

/* 直式下，目前播放字更明顯 */
body.layoutVertical .tok.active{
  box-shadow: inset 0 0 0 2px var(--focus) !important;
}

/* 右側紀錄 / 結束視窗更強制固定在右邊 */
body.layoutVertical #resumeBanner,
body.layoutVertical #endBanner{
  position: fixed !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  width: 300px !important;
  z-index: 1001 !important;
}



/* ===== v38 直式模式微調 =====
1. varSlot 真正直排
2. 播放時減少左右晃動
*/

/* 填寫資料：在直式模式做成真正直排細欄 */
body.layoutVertical .tok.tok-step.varSlot{
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  display: inline-block !important;
  vertical-align: top !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  padding: 2px 0 !important;
  margin: 0 !important;
  min-height: 2.4em !important;
  min-width: 1em !important;
  border-bottom: none !important;
  border-left: 2px solid rgba(0,140,255,.45) !important;
}

/* 若 varSlot 內文字較多，避免被外層壓扁 */
body.layoutVertical .tok.tok-step.varSlot.active{
  box-shadow: inset 0 0 0 2px var(--focus) !important;
}

/* 直式模式下，減少 token 與 token 之間多餘空白 */
body.layoutVertical .tok-char,
body.layoutVertical .tok.tok-step.varSlot,
body.layoutVertical .tok-dual{
  margin: 0 !important;
}



/* ===== v45 長段播放追焦補強 ===== */
body.layoutVertical .section .reader{
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}



/* ===== v46 直式：填寫資料對齊 + 拼音模式定位修正 ===== */

/* 1) 填寫資料：改成固定細欄，不要有靠右偏移的視覺 */
body.layoutVertical .tok.tok-step.varSlot,
body.layoutVertical .varSlot{
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  inline-size: 1.18em !important;
  min-width: 1.18em !important;
  max-width: 1.18em !important;
  min-height: 2.4em !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  padding: 2px 0 !important;
  margin: 0 !important;
  border-left: none !important;
  box-shadow: inset 2px 0 0 rgba(0,140,255,.45) !important;
}

/* 2) 直式 + 拼音模式：給每個字固定本體寬，不讓拼音把字位撐歪 */
body.layoutVertical.modePinyin .reader .tok-char{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.06em !important;
  vertical-align: top !important;
  padding-top: 0.9em !important;   /* 在字上方預留拼音空間 */
}

body.layoutVertical.modePinyin .reader ruby{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1em !important;
  min-width: 1em !important;
  max-width: 1em !important;
  ruby-position: over !important;
  ruby-align: center !important;
}

body.layoutVertical.modePinyin .reader .tok-step{
  display: inline-block !important;
  width: 1em !important;
  text-align: center !important;
}

body.layoutVertical.modePinyin .reader .rt-pinyin{
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  writing-mode: horizontal-tb !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* 拼音模式時，注音本來就隱藏；這裡只微調右側保留值，避免整列視覺偏移 */
body.layoutVertical.modePinyin .reader .zvwrap{
  margin-left: 0 !important;
}



/* ===== v47 直式 + 拼音模式：固定字框，避免整體跑位 =====
   根因：
   - .tok-char 仍保留注音模式的 padding-right
   - .tok-step 自身還有左右 padding
   導致切到拼音時，每個字框寬度不一致、整列漂移
*/
body.layoutVertical.modePinyin .reader .tok-char{
  position: relative !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  width: 1em !important;
  min-width: 1em !important;
  max-width: 1em !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  vertical-align: top !important;
}

body.layoutVertical.modePinyin .reader ruby{
  position: relative !important;
  display: inline-block !important;
  width: 1em !important;
  min-width: 1em !important;
  max-width: 1em !important;
  margin: 0 !important;
  padding: 0 !important;
  ruby-position: over !important;
  ruby-align: center !important;
}

body.layoutVertical.modePinyin .reader .tok-step{
  display: inline-block !important;
  box-sizing: border-box !important;
  width: 1em !important;
  min-width: 1em !important;
  max-width: 1em !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

body.layoutVertical.modePinyin .reader .rt-pinyin{
  position: absolute !important;
  left: 50% !important;
  top: -0.12em !important;
  transform: translate(-50%, -100%) !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  width: max-content !important;
  max-width: none !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

body.layoutVertical.modePinyin .reader .zvwrap{
  display: none !important;
}

/* 高亮框不要把字框撐歪 */
body.layoutVertical.modePinyin .reader .tok.active{
  box-sizing: border-box !important;
}



/* ===== v48 直式模式：拼音追焦 + 填寫資料欄修正 ===== */

/* 填寫資料：覆蓋掉拼音模式對 tok-step 的 1em 限制，避免長字串壓到隔壁欄 */
body.layoutVertical .reader .tok.tok-step.varSlot,
body.layoutVertical.modePinyin .reader .tok.tok-step.varSlot{
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 1.28em !important;
  min-width: 1.28em !important;
  max-width: 1.28em !important;
  min-height: 2.6em !important;
  padding: 2px 0 !important;
  margin: 0 0.06em !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  vertical-align: top !important;
  border-bottom: none !important;
  border-left: none !important;
  box-shadow: inset 2px 0 0 rgba(0,140,255,.45) !important;
}

body.layoutVertical .reader .tok.tok-step.varSlot.active,
body.layoutVertical.modePinyin .reader .tok.tok-step.varSlot.active{
  box-shadow:
    inset 2px 0 0 rgba(0,140,255,.45),
    inset 0 0 0 2px var(--focus) !important;
}

/* 直式 + 拼音：每個字框固定，但允許拼音在上方外露，不影響欄寬 */
body.layoutVertical.modePinyin .reader .tok-char{
  overflow: visible !important;
}
body.layoutVertical.modePinyin .reader ruby{
  overflow: visible !important;
}

/* 避免拼音模式把 varSlot 也當成普通 tok-step 壓成 1em */
body.layoutVertical.modePinyin .reader .tok.tok-step.varSlot{
  text-align: center !important;
}



/* ===== v49 直式模式補強 =====
1. 長段落追焦更緊
2. varSlot 再加寬，避免長字重疊
3. 拼音模式預留上方空間，避免被頁面裁切與重疊
*/
body.layoutVertical .section .reader{
  padding-top: 1.25em !important;
  padding-bottom: 0.8em !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

body.layoutVertical .reader .tok.tok-step.varSlot,
body.layoutVertical.modePinyin .reader .tok.tok-step.varSlot{
  width: 1.7em !important;
  min-width: 1.7em !important;
  max-width: 1.7em !important;
  margin: 0 0.14em !important;
  min-height: 3.2em !important;
  line-height: 1.02 !important;
  padding: 3px 0 !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

body.layoutVertical.modePinyin #content{
  padding-top: 1.8em !important;
}

body.layoutVertical.modePinyin .section .reader{
  padding-top: 2.4em !important;
  overflow: visible !important;
}

body.layoutVertical.modePinyin .reader .tok-char{
  position: relative !important;
  overflow: visible !important;
}

body.layoutVertical.modePinyin .reader ruby{
  position: relative !important;
  overflow: visible !important;
}

body.layoutVertical.modePinyin .reader .rt-pinyin{
  z-index: 3 !important;
  top: -0.32em !important;
  transform: translate(-50%, -100%) !important;
  background: transparent !important;
  line-height: 1 !important;
  padding: 0 0.02em !important;
}

body.layoutVertical.modePinyin .reader .tok-char,
body.layoutVertical.modePinyin .reader .tok.tok-step,
body.layoutVertical.modePinyin .reader .tok-dual{
  margin-top: 0.18em !important;
}



/* ===== v51 直式模式細修 =====
1. varSlot 再加寬、置中、避免壓到拼音
2. 拼音往自己的字靠近一點，但仍避免碰到上一列中文
3. 減少 reader 頂部空白半字
*/

/* 直式一般頂部空白縮小 */
body.layoutVertical .section .reader{
  padding-top: 0.38em !important;
  padding-bottom: 1.18em !important;
}

/* 直式 + 拼音：整體上方預留縮回來 */
body.layoutVertical.modePinyin #content{
  padding-top: 0.22em !important;
}

body.layoutVertical.modePinyin .section .reader{
  padding-top: 0.95em !important;
  padding-bottom: 1.26em !important;
  overflow: visible !important;
}

/* 拼音靠自己的字近一點，不要像上字拼音 */
body.layoutVertical.modePinyin .reader .rt-pinyin{
  top: -0.18em !important;
  transform: translate(-50%, -100%) !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

/* 每個字給一點上方辨識空間，但不要太大 */
body.layoutVertical.modePinyin .reader .tok-char,
body.layoutVertical.modePinyin .reader .tok.tok-step,
body.layoutVertical.modePinyin .reader .tok-dual{
  margin-top: 0.10em !important;
}

/* 填寫資料欄：加寬、欄間距、視覺置中 */
body.layoutVertical .reader .tok.tok-step.varSlot,
body.layoutVertical.modePinyin .reader .tok.tok-step.varSlot{
  width: 2.05em !important;
  min-width: 2.05em !important;
  max-width: 2.05em !important;
  min-height: 3.0em !important;
  margin: 0 0.22em !important;
  padding: 0.08em 0 !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  line-height: 1.0 !important;
  letter-spacing: 0 !important;
  text-orientation: upright !important;
  transform: translateX(0.14em) !important;
  background: var(--bg) !important;
  z-index: 4 !important;
  box-shadow: inset 2px 0 0 rgba(0,140,255,.45) !important;
}

/* 拼音模式時，varSlot 額外再留一點與上下拼音的距離 */
body.layoutVertical.modePinyin .reader .tok.tok-step.varSlot{
  margin-top: 0.16em !important;
  margin-bottom: 0.08em !important;
}

/* 避免普通 tok-step 規則再把 varSlot 壓回 1em */
body.layoutVertical.modePinyin .reader .tok.tok-step.varSlot{
  width: 2.05em !important;
  min-width: 2.05em !important;
  max-width: 2.05em !important;
}



/* ===== v52 直式模式再修 =====
1. varSlot 不再加寬，改成縮回欄寬 + 增加縱向高度，避免看起來偏左
2. varSlot 與下方拼音拉開，用高度與上下距離解決重疊
3. 拼音往自己的中文字再靠近一點
*/

/* 一般直式 reader 頂部與底部保持目前正常狀態，不再額外加大 */
body.layoutVertical .section .reader{
  padding-top: 0.38em !important;
  padding-bottom: 1.18em !important;
}

body.layoutVertical.modePinyin #content{
  padding-top: 0.18em !important;
}

body.layoutVertical.modePinyin .section .reader{
  padding-top: 0.78em !important;
  padding-bottom: 1.18em !important;
  overflow: visible !important;
}

/* 拼音更靠近自己的中文字 */
body.layoutVertical.modePinyin .reader .rt-pinyin{
  top: 0.04em !important;
  transform: translate(-50%, -100%) !important;
  line-height: 0.96 !important;
  letter-spacing: 0 !important;
}

/* 每個字的上方辨識空間縮小 */
body.layoutVertical.modePinyin .reader .tok-char,
body.layoutVertical.modePinyin .reader .tok.tok-step,
body.layoutVertical.modePinyin .reader .tok-dual{
  margin-top: 0.04em !important;
}

/* 填寫資料欄：縮回欄寬、取消右移、改靠欄位高度避開下方拼音 */
body.layoutVertical .reader .tok.tok-step.varSlot,
body.layoutVertical.modePinyin .reader .tok.tok-step.varSlot{
  width: 1.28em !important;
  min-width: 1.28em !important;
  max-width: 1.28em !important;
  min-height: 4.2em !important;
  margin: 0.08em 0.06em !important;
  padding: 0.18em 0 !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: center !important;
  line-height: 1.0 !important;
  letter-spacing: 0 !important;
  transform: none !important;
  background: var(--bg) !important;
  z-index: 4 !important;
  box-shadow: inset 2px 0 0 rgba(0,140,255,.45) !important;
  overflow: hidden !important;
}

/* 拼音模式時，再多留一點與下方拼音的距離 */
body.layoutVertical.modePinyin .reader .tok.tok-step.varSlot{
  margin-top: 0.18em !important;
  margin-bottom: 0.16em !important;
}



/* ===== v63 直式模式重構版（基於 v52） =====
   1. 直式模式只使用外層 #content 水平卷軸
   2. 不再使用 row-reverse，而是用 section 的 order 反轉顯示順序
   3. .reader 不再作為橫向捲動容器，所有追焦都交給 #content
*/
body.layoutVertical #content{
  overflow-x: auto !important;
  overflow-y: hidden !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 6px !important;
  scroll-behavior: auto !important;
}
body.layoutVertical .section{
  order: var(--vorder, 0);
  flex: 0 0 auto !important;
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
}
body.layoutVertical .section .reader{
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  scroll-behavior: auto !important;
}
body.layoutVertical .section::-webkit-scrollbar,
body.layoutVertical .section .reader::-webkit-scrollbar{
  display:none;
}



/* ===== v64 直式模式工具列修正 =====
   讓速度控制與所有按鈕在直式模式下變成真正的右側縱向工具列
*/
@media (min-width: 901px){
  body.layoutVertical header.readerHeader{
    position: fixed !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    bottom: 8px !important;
    width: 112px !important;
    height: auto !important;
    z-index: 999 !important;
    padding: 10px 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
  }

  body.layoutVertical header.readerHeader .bar{
    max-width: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  body.layoutVertical header.readerHeader .group{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body.layoutVertical header.readerHeader button,
  body.layoutVertical header.readerHeader select,
  body.layoutVertical header.readerHeader input,
  body.layoutVertical header.readerHeader label.badge,
  body.layoutVertical header.readerHeader .badge{
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.layoutVertical header.readerHeader label.badge{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    white-space: normal !important;
    border-radius: 14px !important;
  }

  body.layoutVertical header.readerHeader #speed{
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  body.layoutVertical main.readerMain{
    padding-right: 132px !important;
  }
}

@media (max-width: 900px){
  body.layoutVertical .bottomBar{
    display: block !important;
    position: fixed !important;
    top: 76px !important;
    right: 8px !important;
    left: auto !important;
    bottom: 8px !important;
    width: 84px !important;
    z-index: 999 !important;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
  }

  body.layoutVertical .bottomInner{
    max-width: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  body.layoutVertical .bottomInner .group{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body.layoutVertical .bottomInner button,
  body.layoutVertical .bottomInner select{
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  body.layoutVertical main.readerMain{
    padding-right: 96px !important;
  }
}



/* ===== v65 正式版：勘誤回報按鈕 ===== */
.errataBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--fg);
  font-size:16px;
  min-height:44px;
  text-decoration:none;
}
.errataBtn:active{ transform: translateY(1px); }



/* v65b: errata button in top menu */
.errataBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--fg);
  font-size:16px;
  min-height:44px;
  text-decoration:none;
  white-space:nowrap;
}
.errataBtn:active{ transform: translateY(1px); }



/* ===== v70 誦經結束分享視窗 ===== */
.endBannerInner{
  align-items: flex-start !important;
}
.endBannerMain{
  flex: 1 1 auto;
  min-width: 0;
}
.endShareTitle{
  margin: 6px 0 10px !important;
}
.shareGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.endBannerActions{
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
}
@media (max-width: 767px){
  .bannerInner.endBannerInner{
    flex-direction: column;
    align-items: stretch !important;
  }
  .shareGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .endBannerActions{
    width: 100%;
    justify-content: stretch;
  }
  .endBannerActions button{
    flex: 1 1 auto;
  }
}



/* ===== v71 誦經結束視窗強化 ===== */
#endBanner .bannerInner{
  background: linear-gradient(180deg, #fff5c8 0%, #ffe7a3 100%) !important;
  border: 2px solid #d6a239 !important;
  box-shadow: 0 14px 44px rgba(120, 80, 0, .22) !important;
}
#endBanner .bannerMsg{
  color: #7a4c00 !important;
  font-size: 20px !important;
}
#endBanner .endShareTitle{
  color: #7a4c00 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
body.dark #endBanner .bannerInner{
  background: linear-gradient(180deg, #5a4200 0%, #3f2f00 100%) !important;
  border: 2px solid #d6a239 !important;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .36) !important;
}
body.dark #endBanner .bannerMsg,
body.dark #endBanner .endShareTitle{
  color: #ffe6a8 !important;
}

/* 分享按鈕改成更寬、更高，避免桌機直式模式文字超出 */
.shareGrid{
  grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
  gap: 10px !important;
}
.shareGrid button,
.endBannerActions button{
  min-height: 50px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  padding: 12px 10px !important;
  white-space: nowrap !important;
}
.endBannerActions{
  flex-direction: column !important;
  align-items: stretch !important;
}
.endBannerActions button{
  width: 100% !important;
}

@media (max-width: 767px){
  .shareGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .shareGrid button,
  .endBannerActions button{
    min-height: 48px !important;
    font-size: 14px !important;
  }
}



/* ===== v72 直式模式結束視窗避免按鈕重疊 ===== */
@media (min-width: 768px){
  body.layoutVertical #endBanner .bannerInner.endBannerInner{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  body.layoutVertical #endBanner .endBannerMain{
    width: 100% !important;
    min-width: 0 !important;
  }
  body.layoutVertical #endBanner .shareGrid{
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.layoutVertical #endBanner .endBannerActions{
    width: 100% !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 10px !important;
  }
  body.layoutVertical #endBanner .endBannerActions button{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
}



/* ===== v74 播放 5 秒後自動隱藏選單，只保留停止按鈕 ===== */
header.readerHeader,
.bottomBar{
  transition: opacity .45s ease, transform .45s ease;
}
header.readerHeader .group > *,
.bottomInner .group > *{
  transition: opacity .45s ease, transform .45s ease, max-width .45s ease, max-height .45s ease, margin .45s ease, padding .45s ease, border-width .45s ease;
}

/* 桌機上方選單 */
body.auto-ui-collapsed header.readerHeader{
  opacity: 1;
}
body.auto-ui-collapsed header.readerHeader .bar{
  justify-content: flex-end !important;
  align-items: flex-end !important;
}
body.auto-ui-collapsed header.readerHeader .group{
  width: auto !important;
  align-items: flex-end !important;
}
body.auto-ui-collapsed header.readerHeader .group > *{
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-6px) !important;
  max-width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
}
body.auto-ui-collapsed header.readerHeader #toggleAuto{
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  max-width: 220px !important;
  max-height: 60px !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: var(--btnPadY) var(--btnPadX) !important;
  border-width: 1px !important;
}
body.auto-ui-collapsed header.readerHeader #toggleAuto.primary{
  box-shadow: 0 0 0 2px var(--focus) !important;
}

/* 手機底部選單 */
body.auto-ui-collapsed .bottomBar{
  opacity: 1;
}
body.auto-ui-collapsed .bottomInner{
  justify-content: flex-end !important;
}
body.auto-ui-collapsed .bottomInner .group{
  width: auto !important;
  justify-content: flex-end !important;
}
body.auto-ui-collapsed .bottomInner .group > *{
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(6px) !important;
  max-width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
}
body.auto-ui-collapsed .bottomInner #mToggleAuto{
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  max-width: 220px !important;
  max-height: 60px !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: var(--btnPadY) var(--btnPadX) !important;
  border-width: 1px !important;
}

/* 直式模式右側工具列：收起後只留停止鍵 */
body.layoutVertical.auto-ui-collapsed header.readerHeader{
  width: auto !important;
  min-width: 0 !important;
  padding: 8px !important;
}
body.layoutVertical.auto-ui-collapsed .bottomBar{
  width: auto !important;
  min-width: 0 !important;
  padding: 8px !important;
}



/* ===== v75 播放中極簡停止鍵，釋放最大經文可視範圍 ===== */
body.auto-ui-collapsed header.readerHeader,
body.auto-ui-collapsed .bottomBar{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 桌機 / 橫式：整個上方工具列縮成 0，只留固定停止鍵 */
body.auto-ui-collapsed header.readerHeader{
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}
body.auto-ui-collapsed header.readerHeader .bar,
body.auto-ui-collapsed header.readerHeader .group{
  gap: 0 !important;
}
body.auto-ui-collapsed header.readerHeader #toggleAuto{
  position: fixed !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 1200 !important;
  pointer-events: auto !important;
  width: auto !important;
  min-width: 84px !important;
  max-width: none !important;
}
body.auto-ui-collapsed main.readerMain{
  padding-top: 8px !important;
}

/* 手機 / 平板：底部工具列縮成 0，只留固定停止鍵 */
body.auto-ui-collapsed .bottomBar{
  padding: 0 !important;
  border-top: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}
body.auto-ui-collapsed .bottomInner,
body.auto-ui-collapsed .bottomInner .group{
  gap: 0 !important;
}
body.auto-ui-collapsed .bottomInner #mToggleAuto{
  position: fixed !important;
  right: 10px !important;
  bottom: 10px !important;
  z-index: 1200 !important;
  pointer-events: auto !important;
  width: auto !important;
  min-width: 84px !important;
  max-width: none !important;
}

/* 直式模式：右側工具列完全縮掉，內容區回收右側空間 */
body.layoutVertical.auto-ui-collapsed header.readerHeader{
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: auto !important;
  overflow: visible !important;
}
body.layoutVertical.auto-ui-collapsed .bottomBar{
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
body.layoutVertical.auto-ui-collapsed main.readerMain{
  padding-right: 12px !important;
}
body.layoutVertical.auto-ui-collapsed #content{
  padding-right: 0 !important;
}

@media (max-width: 767px){
  body.auto-ui-collapsed main.readerMain{
    padding-bottom: 16px !important;
  }
}



/* ===== v76 播放中停止按鈕高對比警示色 ===== */
body.auto-ui-running #toggleAuto,
body.auto-ui-running #mToggleAuto{
  background: linear-gradient(180deg, #ff4d4f 0%, #d9363e 100%) !important;
  color: #fff !important;
  border: 2px solid #7a0010 !important;
  box-shadow:
    0 0 0 3px rgba(255,77,79,.28),
    0 10px 20px rgba(140,0,10,.28) !important;
  font-weight: 900 !important;
  letter-spacing: .5px !important;
}

body.auto-ui-collapsed #toggleAuto,
body.auto-ui-collapsed #mToggleAuto{
  background: linear-gradient(180deg, #ff4d4f 0%, #d9363e 100%) !important;
  color: #fff !important;
  border: 2px solid #7a0010 !important;
  box-shadow:
    0 0 0 4px rgba(255,77,79,.34),
    0 12px 24px rgba(140,0,10,.30) !important;
  font-weight: 900 !important;
}

body.dark.auto-ui-running #toggleAuto,
body.dark.auto-ui-running #mToggleAuto,
body.dark.auto-ui-collapsed #toggleAuto,
body.dark.auto-ui-collapsed #mToggleAuto{
  background: linear-gradient(180deg, #ff6b6b 0%, #e03131 100%) !important;
  color: #fff !important;
  border: 2px solid #ffd3d3 !important;
  box-shadow:
    0 0 0 4px rgba(255,107,107,.26),
    0 12px 24px rgba(0,0,0,.42) !important;
}



/* ===== v83 iPhone Safari 直式模式避免區塊重疊 =====
   WebKit 對 flex + row-reverse + vertical-rl + max-content 的重算有機率出錯。
   Safari 改走 inline-block + rtl 的保守版面，避免「下一段」後所有區塊擠在一起。
*/
body.layoutVertical.iosSafari #content,
body.layoutVertical.safariWebkit #content{
  display: block !important;
  white-space: nowrap !important;
  direction: rtl !important;
  unicode-bidi: isolate !important;
  gap: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: auto !important;
}

body.layoutVertical.iosSafari .section,
body.layoutVertical.safariWebkit .section{
  display: inline-block !important;
  vertical-align: top !important;
  direction: ltr !important;
  white-space: normal !important;
  flex: none !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  margin: 0 0 0 10px !important;
  contain: layout paint style !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

body.layoutVertical.iosSafari .section .reader{
  display: block !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  contain: layout paint style !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}

body.layoutVertical.iosSafari .section.active{
  outline-offset: -1px !important;
}



/* ===== v88 iPhone Safari 直式：整個段落卡片改成依內容收縮寬度 =====
   根因修正：
   Safari 雖然已避免重疊，但 .section 內的 .row 仍是 block flex，會把卡片撐成近似等寬。
   因此連同 .section / .row / .reader 一起改成 shrink-to-fit。
*/
body.layoutVertical.iosSafari #content,
body.layoutVertical.safariWebkit #content{
  display: block !important;
  white-space: nowrap !important;
  direction: rtl !important;
  unicode-bidi: isolate !important;
  gap: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: auto !important;
}

/* 整張卡片：inline-flex 直向排，寬度依內容自然收縮 */
body.layoutVertical.iosSafari .section,
body.layoutVertical.safariWebkit .section{
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  vertical-align: top !important;
  direction: ltr !important;
  white-space: normal !important;
  flex: none !important;

  width: fit-content !important;
  min-width: fit-content !important;
  max-width: none !important;

  margin: 0 0 0 10px !important;

  /* 保留 v83 不重疊的優點 */
  contain: none !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* 段號列：不能再 stretch 滿整張卡片 */
body.layoutVertical.iosSafari .section > .row,
body.layoutVertical.safariWebkit .section > .row{
  display: inline-flex !important;
  width: fit-content !important;
  min-width: fit-content !important;
  max-width: none !important;
  align-self: flex-start !important;
  justify-content: flex-start !important;
  flex: none !important;
  white-space: nowrap !important;
}

/* 經文本體：真正依內容決定寬度 */
body.layoutVertical.iosSafari .section > .reader,
body.layoutVertical.safariWebkit .section > .reader{
  display: inline-block !important;
  width: fit-content !important;
  min-width: fit-content !important;
  max-width: none !important;
  align-self: flex-start !important;

  overflow: visible !important;
  contain: none !important;

  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}

/* 內部常見容器也不要再被壓成等寬 */
body.layoutVertical.iosSafari .section .heading,
body.layoutVertical.safariWebkit .section .heading,
body.layoutVertical.iosSafari .section .note,
body.layoutVertical.iosSafari .section .dualCol,
body.layoutVertical.iosSafari .section .dual,
body.layoutVertical.iosSafari .section .variant,
body.layoutVertical.iosSafari .section .fillSlot,
body.layoutVertical.iosSafari .section .tok-char,
body.layoutVertical.iosSafari .section ruby,
body.layoutVertical.iosSafari .section .hanbox{
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  inline-size: auto !important;
  max-inline-size: none !important;
}

/* 防止 Safari 仍把 badge 那列撐開 */
body.layoutVertical.iosSafari .section > .row .badge,
body.layoutVertical.safariWebkit .section > .row .badge{
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
}



/* ===== v89 Safari 全平台直式：桌機也套 shrink-to-fit fallback ===== */
body.layoutVertical.safariWebkit #content{
  display: block !important;
  white-space: nowrap !important;
  direction: rtl !important;
  unicode-bidi: isolate !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

body.layoutVertical.safariWebkit .section.active{
  outline-offset: -1px !important;
}





/* ===== v96 Safari 手機直式：改掉沿用 220px 扣高，避免底部整塊空白 =====
   根因：手機直式右側是工具列，不是底部工具列，沿用 100vh-220px 會把經文高度扣太多。
   改成接近 content 可用高度，只保留很小安全餘量，避免最後一字被切。
*/
@media (max-width: 900px){
  body.layoutVertical.iosSafari .section > .reader,
  body.layoutVertical.safariWebkit .section > .reader{
    height: calc(100vh - 136px) !important;
    min-height: calc(100vh - 136px) !important;
    max-height: calc(100vh - 136px) !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  body.layoutVertical.iosSafari #content,
  body.layoutVertical.safariWebkit #content{
    padding-bottom: 6px !important;
  }
}