/* 七次特会 —— 目录 / 篇目 / 阅读页的补充样式
   阅读页本体是 svkit.css, 这里只补它没有的:
     ① 纲目的层级缩进与辨识色(壹/一/1/a 各一色, 与生命读经那套一脉相承)
     ② 目录页和篇目页(它们不走 svkit)
   ⭐ 配色跟着【首页那个图标】走(Kris: 图标颜色要和之前一样) ——
      图标底色 #5DB9BA、左竖条 #347E7F。页面主色就用那条竖条的 #347E7F,
      深色处 #2c6a6b, 点缀仍用金 #c9a227(与图标的浅青拉开层次)。 */

:root{
  /* 🔴 2026-08-02「一起加深」: 原值 #3f9596(= 首页图标左竖条那个青绿) 当【实底】用时,
     压在上面的白字只有 3.53 —— 顶栏/hero/按钮共 12 处都不达标。
     ⭐ 取【刚好达标的最浅值】#347E7F(白字 4.73), 只暗一档、仍是同一个青绿,
        ⛔ 没有直接跳到色板里的深青 #2c6a6b(那个明显更沉, 会改掉他定的调子)。 */
  --cth:#347E7F;
  --cth-d:#2c6a6b;
  --cth-soft:#e9f3f3;
  --cth-gold:#c9a227;     /* 点缀金 */
  /* 🔴 2026-08-01 Kris 连点五处「字太浅」「颜色一定要醒目」「整个七次特会的字体颜色
     都重新调整一下, 都用颜色鲜明的」→ 这两档整体加深:
       --cth-ink  正文/条目标题, 一律深墨(⛔ 不许再拿 mute 当标题色)
       --cth-mute 只用于【次要说明】, 也从 #7d8f8f 加深到 #5c6f6f(白底上 5.6:1) */
  --cth-ink:#15181B;   /* 与阅读页 body.cth-read 同一个墨色, 别搞两种黑 */
  --cth-mute:#5c6f6f;
  --cth-line:#e2ebeb;
  /* 经节【引用串】专用的深赭 —— 白底上 6.5:1。
     ⭐ 它不可点, 所以【不给底色】: 靠「有没有底色」和可点的经节区分, 不靠深浅
        (Kris 两次说过文字太浅看着累)。 */
  --cth-ref:#7A5C1E;
  /* 下面这几个原来散在各条规则里写死, 现在收成变量, 好让主题能换掉它们(见紧接着的色板) */
  --cth-teal:#1c7b7c;      /* 青绿强调: 小链接/次级动作 */
  --cth-vs:#A33B34;        /* 祷读的那几节 = 红 */
  --cth-vsn:#2563EB;       /* 经节【出处链接】= 蓝(Kris 明确要过"前面蓝、后面红") */
  --cth-vnn:#A9791F;       /* 祷读经节的【节号】= 金 */
  --cth-en:#2F3A42;        /* 双语页英文那一列: 比中文淡一档 */
  --cth-warn:#96393C;      /* 告警(计时器超时) */
  /* 🔴 Kris 2026-08-02:「写的字换一种颜色, 区分是自己写的还是原文的」
     ⭐ 站上「我写的东西」本来就有专用色 = 紫(--cth-my), 划线笔记也是它 —— 沿用同一套语义,
        ⛔ 不另起一个新颜色。这里取比标题紫【深一档】的墨紫: 大段读起来不刺眼, 又一眼分得出。 */
  --cth-mine:#4A2E8C;      /* 自己写的正文 */
  --cth-rule:rgba(20,22,26,.34);   /* 稿纸横线(Kris 要黑色的) */
  --cth-mhno:#8A6518;      /* 完整纲目页篇题头的「第N篇」= 深金 */
  --cth-sec-ol:#1A3A6B;    /* 板块标题·纲目 = 深靛蓝 */
  --cth-sec-feed:#1F5C3D;  /* 板块标题·晨兴喂养 = 深墨绿 */
  --cth-sec-read:#8B3A2F;  /* 板块标题·信息选读 = 深砖红 */
  /* 压在【任何实底色块】上的字色。⚠️ 夜间那套 --cth-d/-teal/-grn/-my 全是【浅】色
     (它们主要当文字色用), 白字压上去只有 2.1~2.5 —— 夜间一律反过来用深字。 */
  --cth-on-fill:#fff;
}

/* ══ 四套主题色板 (2026-08-01) ═══════════════════════════════════════════
   🔴 Kris:「切主题的时候只有工具条换颜色, 正文/其它地方都不跟着换」—— 根因两层:
     ① mr.html / content.html 的首屏内联样式把 body 底色【写死】成 #f5efe3,
        压住了 svkit 的 `body{background:var(--bg)}`(已改成 var, 见那两个模板);
     ② 七次特会这一套 --cth-* 语义色【只有一套值】, 加上一堆写死色的 !important,
        于是主题一切: 底色变了、字色纹丝不动。夜间最糟 —— 深墨字压黑底等于看不见。
   ⭐ 值不是凭眼睛挑的: 逐个按 WCAG 算过, 压 --bg 与 --paper 都 >= 4.5(脚本 pick_colors.py)。
   ⛔ 以后再要新颜色, 一律先在上面开一个变量, 别再往规则里写死色 —— 写死的那一刻主题就废了。
   ⚠️ 必须【同时点名 body.cth-read / body.cth-body】: 那两处各自又定义了一遍同名变量,
      特异性比裸 html 高; 只写 html[data-sv-theme=x] 是盖不住的(上一版就是栽在这里)。
   ℹ️ 护眼(sepia)/绿(green) 的底仍是浅色, 原来那套深色字本来就达标 —— 只改真正需要改的,
      不为"看起来整齐"把三套全铺一遍。 */
/* ── 捐款卡在七次特会页面里的配色 (2026-08-02「一起加深」) ────────────────
   捐款卡是【全站共用组件】(donate.js 自带样式), 它那套默认色在这里都不达标:
     关闭× #a99a80 = 2.60 · 小标题 #a5761f = 3.81 · 按钮白字压金底 = 4.03。
   ⚠️ 它的颜色本来就走 var(--bk-gold/--bk-muted) —— 所以【只在七次特会的 body 上重定义】,
      ⛔ 不去改 donate.js 的默认值: 那会动到首页/诗歌/生命读经等所有页面, 不在这次范围里。
   (要不要全站一起改, 等 Kris 拍板。) */
body.cth-read, body.cth-body{
  --bk-gold:#8A6318;    /* 小标题 5.11 · 按钮白字压它 5.41 */
  --bk-muted:#7A6D55;   /* 关闭× 4.78 */
}

/* ── 导航页(目录/篇目/一周主页/主日/教学)的底色变量 ─────────────────────
   🔴 2026-08-02 Kris:「七次特会里让这些导航页也跟主题」。
   这几页【不加载 svkit】(它们没有正文, 用不着 130KB 的阅读引擎), 所以 --bg/--paper/--ink
   这套底色变量在它们身上压根没定义 —— 满页的 `var(--bg, #f2f6f6)` 一直走的是 fallback。
   ⭐ 解法不是给它们塞 svkit, 而是【就地补齐同名变量】: 一加上去, 现有那些 var(...) 全部
      自动跟主题, 不用逐条改规则。sepia/green/night 三套值【直接抄 svkit.css 行 8~10】,
      两边才是一个调子。
   ⚠️ paper(默认)那套仍用导航页原本的青白 #f2f6f6 与墨 #1b2626 ——
      Kris 只要"能跟着变", 没要求换掉默认长相。⛔ 别顺手统一成阅读页的米黄。
   ⚠️ 跟随靠各模板 <head> 里那句极小的内联脚本(读 localStorage.sv_theme 立即上属性),
      不加它会先白一下再变色。 */
body.cth-body{
  --bg:#f2f6f6; --paper:#ffffff; --ink:#1b2626; --soft:#5c6f6f; --line:#e2ebeb;
}
html[data-sv-theme="sepia"] body.cth-body{
  --bg:#f3ecda; --paper:#fdf8ee; --ink:#221a0e; --soft:#6b5836; --line:#e6d9c1;
}
html[data-sv-theme="green"] body.cth-body{
  --bg:#e6efe0; --paper:#f0f6ec; --ink:#152210; --soft:#3f5330; --line:#d5e1ce;
}
html[data-sv-theme="night"] body.cth-body{
  --bg:#15171b; --paper:#22262c; --ink:#cfc9bb; --soft:#9a9384; --line:#31353c;
}

html[data-sv-theme="sepia"],
html[data-sv-theme="sepia"] body.cth-read,
html[data-sv-theme="sepia"] body.cth-body{
  /* 护眼/绿这两套底色偏暗一点点, 原值(#6E757D / #5c6f6f)刚好卡在 4.5 线下(3.95~4.49)
     → 各加深一档。⚠️ 只在这两套里改, paper 保持原样。 */
  --cth-ink3:#5F666E; --cth-mute:#586A6A;
  --cth-soft:#EBE0C8;   /* 柔和色块底(标签/hover/浅底按钮) */
  --cth-vs:#9A352E; --cth-vsn:#1D4FD8;
}
html[data-sv-theme="green"],
html[data-sv-theme="green"] body.cth-read,
html[data-sv-theme="green"] body.cth-body{
  /* 护眼/绿这两套底色偏暗一点点, 原值(#6E757D / #5c6f6f)刚好卡在 4.5 线下(3.95~4.49)
     → 各加深一档。⚠️ 只在这两套里改, paper 保持原样。 */
  --cth-ink3:#5F666E; --cth-mute:#586A6A;
  --cth-soft:#D9E5D2;   /* 柔和色块底(标签/hover/浅底按钮) */
  --cth-vs:#93332C; --cth-vsn:#1B49CC;
}
/* 夜间: 深色底, 整套语义色都得翻到浅色一边, 否则字全糊在黑里 */
html[data-sv-theme="night"],
html[data-sv-theme="night"] body.cth-read,
html[data-sv-theme="night"] body.cth-body{
  --cth-soft:#232A2E;   /* 柔和色块底(标签/hover/浅底按钮) */
  --cth-ink:#D6D1C6;       /* 正文墨 → 浅米 */
  --cth-ink3:#9A9384;      /* 元信息 */
  --cth-mute:#9DACAC;      /* 次要说明 */
  --cth-line:#31353c;      /* 分隔线跟 svkit 的 --line 一致, 别在黑底上留亮线 */
  --cth-d:#63C2C3;         /* 深青 → 亮青 */
  --cth-teal:#5FC0C1;
  --cth-grn:#6FBFA8;
  --cth-my:#B79BF5;
  --cth-gold:#D0B070;
  --cth-ref:#C9A96A;
  --cth-on-fill:#101314;   /* 实测压在夜间那几个浅底上都是 7.4~8.9, 一个值够用 */
  --cth-vs:#E8918A;        /* 祷读经节的红 → 提亮, 仍是红调, 与别处经节区分得开 */
  --cth-vsn:#8FB6FF;
  --cth-vnn:#D8AE5E;
  --cth-en:#A8B6C0;        /* 夜间的英文: 跟 svkit 的 --en(#9fb0bb) 一个调子, 略提亮 */
  --cth-warn:#F08A82;
  --cth-mine:#CDB6FF;
  --cth-rule:rgba(214,209,198,.30);
  --cth-mhno:#D8AE5E;
  --cth-sec-ol:#8FB4E8;
  --cth-sec-feed:#6FC49A;
  --cth-sec-read:#E8938A;
}

/* 正文左右留白 —— svkit 默认 .wrap 是 16px, 手机上字快贴到屏幕边了(Kris)。
   只给七次特会加宽, 不动 svkit(九版共用)。 */
body.cth-read .wrap{ padding-left:24px; padding-right:24px; }
@media(max-width:380px){ body.cth-read .wrap{ padding-left:20px; padding-right:20px; } }

/* 晨兴页头与篇题的中英双行：语言模式只决定显示哪一行，避免纯英文模式残留中文。 */
.cth-lang-line{display:block;min-width:0}
body.m-cn .cth-lang-line--en{display:none}
body.m-en .cth-lang-line--cn{display:none}
body.m-both .cth-lang-line--en{margin-top:3px;color:var(--cth-en);font-size:.72em;font-weight:600;line-height:1.35;letter-spacing:0}
body.m-en .cth-lang-line--en{margin-top:0;color:inherit;font-size:1em;font-weight:inherit;line-height:inherit}
#svTitle .cth-lang-line--en{white-space:nowrap}
.cth-mh-no .cth-lang-line--en,.cth-mh-t .cth-lang-line--en{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

/* ══ 一、正文版式 ══════════════════════════════════════
   ⚠️ 类名是 svkit 拼的: 正文段 className = 'v' + ' v' + it.k(所以 k:'ol2' → .vol2,
      【不是】.v.ol2, 也【不看 lvl 字段】); 标题是 .h + .h{lvl}。
   版式照晨兴圣言实体书: 篇题 / 周次 / 读经 / 纲目 / 晨兴喂养 / 信息选读 / 参读 / 今日要点 */

/* 篇题(h0) —— 一天的正文从它开始 */
#app .h.h0{
  margin:.2em 0 1.2em !important; padding:0 0 .9em !important;
  background:transparent !important; border-left:0 !important;
  border-bottom:1px solid var(--cth-line) !important; border-radius:0 !important;
}
#app .h.h0 .cn{
  font-size:1.12em !important; font-weight:600 !important; line-height:1.6;
  color:var(--cth-d) !important; letter-spacing:.3px;
}
/* 周次(h6): 页眉里已经有「第N周　周X」了, 正文里再来一遍是重复(Kris) —— 藏掉。
   ⭐ 留在 DOM 里不删: 没有 JS 的浏览器和搜索引擎看到的是服务端直出那一版, 那时没有页眉。 */
#app .h.h6{ display:none !important; }
body.no-js #app .h6{ display:block; }
/* 读经范围 */
#app .vrdg{
  font-size:.92em; color:var(--cth-d); margin:0 0 1.6em !important; line-height:1.75 !important;
  padding:.6em .85em !important; background:var(--cth-soft); border-radius:8px; border:0 !important;
}
/* 小节标题: 纲目 / 晨兴喂养 / 信息选读
   —— 做成整条底色的块, 上下留够白。原来只是一行小字加根竖线, 三个板块糊在一起分不开(Kris)。 */
/* ⚠️ svkit 的主题(四套配色)会给 .h1 上背景, 优先级压得过 #app .h1 ——
   这几条要 !important 才盖得住。文字在 .cn 里, 颜色也得单独覆盖。 */
/* 板块标题(纲目 / 晨兴喂养 / 信息选读) —— ⭐ 照【定稿原型】那套:
   零底色、小字号、**每个板块一个颜色**、右边一条极淡的线延伸出去。
   🩸 之前做成了整条青绿底色块(那是更早一版为了「三个板块糊在一起分不开」加的),
      结果 ①每个分类的颜色被底色吃掉了 ②「晨 兴 喂 养」被字距拉散
      —— Kris:「文章里的每一个分类要用不同的颜色表明」「这不是你设计的吗？」
   ⛔ 中文标题不加 letter-spacing。区分靠 字号+颜色+留白+一条线, 不靠底色。 */
#app .h.h1{
  margin:2.4em 0 1.05em !important; border-radius:0 !important;
  background:transparent !important; border-left:0 !important;
  padding:0 !important; text-align:left;
  display:flex !important; align-items:center; gap:12px;
}
#app .h.h1 .cn{
  color:inherit !important; font-size:.84em !important; font-weight:600 !important;
  letter-spacing:0; flex:none;
}
/* 标题右边那条线 —— 极淡, 只用来把这一段和上一段隔开 */
#app .h.h1::after{
  content:''; flex:1; height:1px; background:currentColor; opacity:.22;
}
#app .h.h1 .en{ color:inherit !important; opacity:.62; font-size:.8em !important; }
#app .h.h1:first-of-type{ margin-top:1.4em !important; }

/* 纲目层级 —— 编号色沿用老版那套辨识色 */
#app .vol1,#app .vol2,#app .vol3,#app .vol4,#app .vol5{ margin:0 0 .95em !important; line-height:1.92 !important; }
#app .vol1{ margin-left:0;     font-weight:600; }
#app .vol2{ margin-left:1.1em; }
#app .vol3{ margin-left:2.2em; }
#app .vol4{ margin-left:3.3em; }
#app .vol5{ margin-left:4.4em; }
#app .volp{ color:var(--cth-mute); font-size:.93em; margin:0 0 1.2em !important; }

/* 晨兴喂养里的经节: 供祷读的那 2~3 节, 给它金色左边线, 一眼认得出 */
/* 祷读的那几节 —— Kris:「晨兴喂养的经节用红色字, 去掉背景的那些特效」。
   ⛔ 不要左金线、不要渐变底: 经节本来就该靠【字色】认出来, 加底块反而像划重点。
   砖红 #A33B34 在四套阅读底色上都 ≥4.5:1; 夜间要提亮(见下面 night 那条)。 */
#app .vvs{
  border-left:0 !important; padding:0 !important;
  margin:0 0 1.2em !important; background:none !important;
  color:#A33B34; font-weight:500; line-height:1.9 !important;
}
html[data-sv-theme="night"] #app .vvs{ color:#E88A80; }
html[data-sv-theme="sepia"] #app .vvs{ color:#9A352E; }
html[data-sv-theme="green"] #app .vvs{ color:#93332C; }
/* 经节【号】用蓝, 经文用红 —— Kris:「前面这里用蓝色的字, 后面经节具体内容用红色字」。
   ⛔ 原来是 color:inherit(跟着经节走全红), 那是更早的要求, 已被这条取代。 */
/* ⚠️ 下划线色: 先给一条老写法兜底, color-mix 不支持时(旧 Safari)自动用上一条。 */
#app .vvs a.bref{ color:var(--cth-vsn); border-bottom-color:rgba(37,99,235,.45);
  border-bottom-color:color-mix(in srgb, var(--cth-vsn) 45%, transparent); }
/* 参读 */
#app .vref{ color:var(--cth-mute); font-size:.9em; margin:1.8em 0 0 !important; }

/* 「今日要点」整块【不显示】—— 实测它和主日页的「官方申言示范」内容重合 97~99%,
   就是同一份东西(Kris:「这个今日要点不就是申言示范那个吗？不要在这出现」)。
   ⭐ 没有 extra 示范的那些篇, 服务端已把这份内容接到【主日页】的申言示范里, 一条都不丢。
   ⚠️ 留在 DOM 里不删: 服务端直出那一版是给搜索引擎和无 JS 浏览器看的。 */
#app .h.h7, #app .vpt{ display:none !important; }

/* ══ 正文段落 ══════════════════════════════════════
   ⚠️ svkit 的 .v 是给【圣经经节】写的: margin 0、行高 normal、靠一根细线分隔 ——
      经文一节一行那样没问题, 但晨兴的「信息选读」是一段几百字的长文,
      挤在一起只有一根细线, 读起来就是一坨(Kris:「文章怎么都不分段？看上去好累」)。
   照实体书的排法: 首行缩进两字 + 行高 1.9 + 段间拉开, 去掉那根线。 */
#app .v{
  margin:0 0 1.15em !important;
  padding:0 !important;
  border:0 !important;
  line-height:1.92 !important;
  text-indent:2em;
  letter-spacing:.2px;
}
/* 纲目条是带编号的条目, 不缩进(编号本身就是视觉起点), 但也要拉开 */
#app .vol1,#app .vol2,#app .vol3,#app .vol4,#app .vol5,#app .volp,
#app .vrdg,#app .vvs,#app .vref,#app .vpt{ text-indent:0; }

/* ⛔ 段号一律不显示 —— 晨兴是读的不是查的, 每段前面挂个 1/2/3 只会更乱 */
#app .v .vn{ display:none; }

/* 经节引用: 点一下就地看经文 */
#app a.bref{
  color:var(--cth); border-bottom:1px dashed rgba(63,149,150,.5);
  text-decoration:none; cursor:pointer; padding:0 1px;
}
@media(hover:hover){ #app a.bref:hover{ background:rgba(201,162,39,.16); } }
#app a.bref:active{ background:rgba(201,162,39,.24); }

/* 经文小卡 —— Kris:「弹窗时后面不要变暗, 正好一边看文章一边看经节」
   · 遮罩【完全透明】, 只用来点一下关掉, 不压暗正文
   · 只占底部一小条(最多 40vh), 上面的正文照样看得见
   · 高度用 max-height 直接给 .bp-bd, 不用 flex:1 —— flex 在这种固定定位的盒子里
     算出来常常是 0, 结果就是「弹出来了但里面什么都没有」(Kris 截图那样) */
/* 🩸 底部那条【全站导航】(btm-nav, 手机端 fixed/bottom:0/高 56px)会把弹窗压住 ——
   Kris 截图里经节卡只露出标题和一行字。所以弹窗要从导航【上沿】起。
   ⚠️ btm-nav.js 并没有对外给 --navh 变量(cth.css 里那个 var(--navh,56px) 一直吃的是默认值),
      所以这里直接写它的真实高度; 导航只在 ≤767px 出现, 宽屏再落回 0。 */
.bref-pop{
  position:fixed; left:50%; bottom:0; transform:translate(-50%,101%);
  width:100%; max-width:520px; z-index:9997;
  /* 阅读页有四套配色 → 跟着主题走; 目录/篇目页没有这些变量, 落回原来的白 */
  background:var(--paper, #fff); color:var(--ink, #1b2626); border-radius:16px 16px 0 0;
  box-shadow:0 -4px 24px rgba(15,45,45,.18);
  border-top:2px solid var(--cth-gold);
  transition:transform .26s cubic-bezier(.32,.72,0,1);
  padding-bottom:env(safe-area-inset-bottom);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
.bref-pop.on{ transform:translate(-50%,0); }
@media(max-width:767px){
  /* 🔴 2026-08-02 Kris:「这个弹窗还是两端贴合屏幕边缘吧」——
     08-01 他嫌「看不见两端的边缘框」, 我给左右各留了 12px; 现在他改主意要贴边, 以最新的为准。
     ⭐ 贴边之后靠【上两角圆角 + 顶部那条金线 + 阴影】表明它仍是浮在上面的一层,
        不必再靠留白来区分。⛔ 下两角不要圆角: 贴着底边的卡片留圆角会露出背景的小三角。 */
  .bref-pop{ bottom:calc(56px + env(safe-area-inset-bottom, 0px));
             width:100%; border-radius:16px 16px 0 0; }
}
.bref-pop .bp-hd{
  padding:9px 18px 7px; border-bottom:1px solid var(--line, var(--cth-line));
  display:flex; align-items:center; gap:14px; position:relative;   /* gap 9→14: 两个键别挨太近 */
}
.bref-pop .bp-hd::before{
  content:''; position:absolute; top:5px; left:50%; transform:translateX(-50%);
  width:32px; height:4px; border-radius:2px; background:var(--line, #dde5e5);
}
.bref-pop .bp-t{ font-size:15px; font-weight:600; flex:1; }
/* 🔴 2026-08-02 Kris:「关闭按钮去掉背景框, 调大一点, 调整一下位置, 不要误触到旁边的按钮」
   ⭐ 去掉圆底 → 只剩图标; 热区放到 44px(iOS 的最小可点尺寸), 图标本身放大到 22px;
      再用负右边距把它推到卡片边缘, 与「在圣经里读」拉开 —— 两个键之间现在有 14px 空当。 */
.bref-pop .bp-x{
  flex:none; width:44px; height:44px; margin-right:-10px; margin-left:4px;
  border:0; background:none; color:var(--cth-mute);
  border-radius:50%; line-height:1; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.bref-pop .bp-x .bp-ic{ width:22px; height:22px; }
.bref-pop .bp-x:active{ opacity:.5; }
.bref-pop .bp-go{
  font-size:12px; color:var(--gold, var(--cth)); text-decoration:none; flex:none;
  border:1px solid var(--line, var(--cth-line)); border-radius:7px; padding:4px 9px;
}
.bref-pop .bp-bd{
  max-height:min(46vh, 340px); overflow-y:auto; padding:12px 18px 18px;
  -webkit-overflow-scrolling:touch;
  /* 弹层自己内部滚到头时别把滚动传给背后的页面(配合 bref.js 里的 body 锁) */
  overscroll-behavior:contain;
}
/* 图标一律来自图标站(Lucide), 这里只管尺寸 */
.bref-pop .bp-ic{ width:16px; height:16px; flex:0 0 auto; vertical-align:-3px; }
.bref-pop .bp-x .bp-ic{ width:17px; height:17px; vertical-align:0; }
.bref-pop .bp-v{ margin:0 0 .75em; line-height:1.8; font-size:15px; }
.bref-pop .bp-v b{
  color:var(--gold, var(--cth-gold)); font-weight:600; margin-right:6px;
  font-variant-numeric:tabular-nums; font-size:.85em;
}
.bref-pop .bp-empty{ color:var(--soft, var(--cth-mute)); font-size:14px; margin:0; }
/* ⭐ 透明遮罩: 只接点击, 不压暗 */
.bref-mask{ position:fixed; inset:0; background:transparent; z-index:9996; display:none; }
.bref-mask.on{ display:block; }

/* ══ 二、目录页 / 篇目页 ═════════════════════════════ */
.cth-body{
  /* 🔴 走变量才跟得上主题(值见文件顶部「导航页底色变量」那一段) */
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Heiti SC","Noto Sans CJK SC",sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
/* 吸顶页眉(照生命读经篇目页那个 .ls-top) —— ⭐ 要 breakout 才通栏:
   btm-nav.js 给 body 加了左右各 16px 内边距, 不抵消掉页眉两边会露白。 */
/* 🩸 手机端一滑就左右偏 28px 的根因就在这:
   width:100vw(=390) 之外还要加左右各 14px 的 padding → 实际 418px, 整页横向可滚。
   ⭐ `box-sizing:border-box` 一条就够 —— padding 算进那 100vw 里。
   ⛔ 别用 html{overflow-x:hidden} 去盖 —— 那是把溢出藏起来, 不是修好。 */
.ls-top{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px;
  background:var(--cth); color:#fff; padding:12px 14px;
  width:100vw; margin-left:calc(50% - 50vw);
  box-sizing:border-box;
}
/* ⛔ 页眉/篇题卡下沿那几条金线全撤了 —— Kris:「这个线是干什么用的？如果只是为了装饰,
   那就去掉, 太难看了, 而且容易让人误会是进度条」。层级靠留白和字重, 不靠装饰线。 */

.lt-back{ color:#fff; text-decoration:none; font-size:26px; line-height:1; width:26px; flex:none; }
.lt-mid{ min-width:0; }
.lt-t{ font-size:17px; font-weight:600; letter-spacing:.4px; }
/* ⚠️ 副标题原来带 .6 透明度 → 压在页眉青绿上只有 2.24, 是全批最不该有的一处:
   透明度纯粹是可读性损失, 去掉它不改任何设计意图。 */
.lt-s{ font-size:12.5px; color:#fff; opacity:.92; margin-top:2px;
  letter-spacing:1.2px; font-variant-numeric:tabular-nums; }

.ls-wrap{ max-width:880px; margin:0 auto; padding:20px 12px 80px; }
@media(max-width:680px){ .ls-wrap{ padding:16px 9px 80px; } }

/* —— 目录页 —— */
.ix-srch{ margin-bottom:16px; }
.ix-srch input{
  width:100%; padding:13px 15px; border:1px solid var(--cth-line); border-radius:11px;
  font-size:15px; font-family:inherit; background:var(--paper); color:inherit;
}
.ix-srch input:focus{ outline:2px solid var(--cth); outline-offset:-1px; border-color:transparent; }
.ix-year{ margin-bottom:22px; }
.ix-yt{
  font-size:13px; font-weight:600; color:var(--cth-mute); margin:0 0 10px;
  letter-spacing:3px; font-variant-numeric:tabular-nums;
  display:flex; align-items:center; gap:10px;
}
.ix-yt::after{ content:''; flex:1; height:1px; background:var(--cth-line); }
.ix-grid{ display:grid; gap:9px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.ix-card{
  position:relative; display:flex; flex-direction:column; gap:4px;
  text-decoration:none; color:inherit; background:var(--paper); border-radius:12px;
  padding:13px 15px 13px 17px; overflow:hidden;
  box-shadow:0 1px 2px rgba(20,45,45,.05); transition:box-shadow .2s, transform .2s;
}
/* 左侧一道竖线: 有晨兴的用金, 没有的用淡靛 —— 一眼看出哪几期能每天读 */
.ix-card::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--cth-line);
}
.ix-card.has-mr::before{ background:var(--cth-gold); }
@media(hover:hover){
  .ix-card:hover{ box-shadow:0 4px 16px rgba(20,45,45,.11); transform:translateY(-1px); }
}
.ix-type{ font-size:12.5px; color:var(--cth-mute); font-weight:600; letter-spacing:1.4px; }
.ix-tm{ font-size:16px; line-height:1.55; font-weight:500; letter-spacing:.2px; }
.ix-meta{ font-size:12px; color:var(--cth-mute); font-variant-numeric:tabular-nums; }
.ix-card.has-mr .ix-meta{ color:#9a7c1c; }
.ix-empty{ text-align:center; color:var(--cth-mute); font-size:14px; padding:30px 0; }

/* ══ 特会目录: 年份折叠组 ═════════════════════════════════════
   Kris:「这个页面重新设计一下, 高级一点, 实用一点, 年份都收起来,
          这样可以快速找到哪一年的, 点击就展开」。
   2385 篇 / 1997 至今一路平铺, 找某一年得一直划 —— 改成一年一组、默认收起,
   只有最新那一年展开。用站上通用的 iOS inset grouped(.lst/.lrow), 全站一套观感。
   ⛔ 不堆圆角卡片(Kris 说过「一屏五六块反而没有层级」); 层级落在【组与组之间】。 */
.ixy{ margin-bottom:10px; }
.ixy-hd{
  width:100%; display:flex; align-items:center; gap:11px;
  padding:14px 16px; background:var(--paper); border:0; border-radius:12px;
  box-shadow:0 1px 2px rgba(20,45,45,.05);
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.ixy.on .ixy-hd{ border-radius:12px 12px 0 0; box-shadow:none; }
@media(hover:hover){ .ixy-hd:hover{ background:var(--cth-soft); } }
/* 年份用等宽数字, 一列扫下来对得齐 */
.ixy-y{ flex:none; font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.5px; }
.ixy-n{ flex:1; font-size:13px; color:var(--cth-mute); font-variant-numeric:tabular-nums; }
.ixy-ar{ flex:none; width:19px; height:19px; color:#b8c4c4; transition:transform .22s ease; }
.ixy.on .ixy-ar{ transform:rotate(180deg); }
.ixy-bd{ border-radius:0 0 12px 12px; }
/* 行内: 上排是类别小标, 中间总题, 底下篇数
   (「有晨兴」标 2026-08-03 按 Kris 要求去掉, .ixr-mr 样式一并移除) */
.ixr .lmid{ display:flex; flex-direction:column; gap:3px; }
.ixr-top{ display:flex; align-items:center; gap:7px; }
.ixr-type{ font-size:12px; font-weight:600; color:var(--cth-mute); }
.ixr-go{ flex:none; width:17px; height:17px; color:var(--cth-ink3); }
/* ⚠️ .lrow 的分隔线默认从 left:53px 起(那是给带图标的行留的位置),
   这里没有图标, 线要从 16px 起, 否则左边空一大截。 */
.ixy-bd .lrow + .lrow::before{ left:16px; }

/* —— 篇目页 —— */
.cf-hero{
  background:var(--cth); color:#fff; border-radius:13px; padding:17px 18px; margin-bottom:14px;
  position:relative; overflow:hidden;
}

.cf-tm{ font-size:17px; line-height:1.6; font-weight:600; letter-spacing:.3px; }
.cf-item{
  background:var(--paper); border-radius:12px; margin-bottom:8px;
  box-shadow:0 1px 2px rgba(20,45,45,.05); overflow:hidden;
}
.cf-main{
  display:flex; align-items:baseline; gap:9px; padding:13px 15px;
  text-decoration:none; color:inherit;
}
@media(hover:hover){ .cf-main:hover{ background:var(--cth-soft); } }
.cf-main:focus-visible{ outline:2px solid var(--cth); outline-offset:-2px; }
.cf-no{
  /* ⚠️ 青绿 #347E7F 只够当【底色】, 当文字压浅底只有 3.12 —— 文字一律用深青 --cth-d */
  flex:none; font-size:12.5px; color:var(--cth-d); font-weight:600;
  background:var(--cth-soft); border-radius:5px; padding:2px 8px;
  font-variant-numeric:tabular-nums;
}
.cf-ti{ font-size:16.5px; line-height:1.6; letter-spacing:.2px; }
.cf-days{
  display:flex; align-items:center; gap:6px; padding:0 15px 12px; flex-wrap:wrap;
}
.cf-dl{ font-size:11.5px; color:var(--cth-mute); margin-right:3px; letter-spacing:1.4px; }
.cf-day{
  width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:13.5px; text-decoration:none; color:var(--cth); background:var(--cth-soft);
  font-variant-numeric:tabular-nums; transition:.16s;
}
@media(hover:hover){ .cf-day:hover{ background:var(--cth); color:var(--cth-gold); } }
.cf-day:focus-visible{ outline:2px solid var(--cth); outline-offset:1px; }

@media (prefers-reduced-motion:reduce){ *{ transition:none!important; } }

/* ══ 三、一篇 → 六天(msg 页) ═══════════════════════ */
.mg-hero{
  background:var(--cth); color:#fff; border-radius:14px; padding:18px 18px 20px;
  margin-bottom:20px; position:relative; overflow:hidden;
}

.mg-no{ font-size:12.5px; letter-spacing:0; color:#F0D68A; margin-bottom:8px; font-weight:600; }
.mg-t{ margin:0; font-size:19px; line-height:1.6; font-weight:600; letter-spacing:.3px; }

.mg-sec{ margin-bottom:22px; }
/* 分组标题 —— ⛔ 中文不加 letter-spacing: 字距是给西文大写字母的, 加在中文上
   只会把词拉散(原来 3px, 「本篇纲目」被拉成「本 篇 纲 目」)。中文靠字号+颜色+字重分层。
   ⚠️ 顺带把 11.5px/--cth-mute(3.2:1) 提到 12.5px/4.9:1 —— 次要信息也是要被读到的(Kris 说过两次字太浅)。 */
.mg-lb{ font-size:12.5px; letter-spacing:0; color:var(--cth-mute); margin-bottom:11px; font-weight:600; }

/* 时间轴 */
.tl{ list-style:none; margin:0; padding:0 0 0 4px; position:relative; }
.tl::before{
  content:''; position:absolute; left:9px; top:14px; bottom:14px; width:2px; background:var(--cth-line);
}
.tl-i{ position:relative; padding-left:30px; margin-bottom:8px; }
.tl-dot{
  position:absolute; left:3px; top:15px; width:14px; height:14px; border-radius:50%;
  background:var(--paper); border:2px solid var(--cth-line); z-index:1;
}
.tl-i.done .tl-dot{ background:var(--cth); border-color:var(--cth); }
.tl-i.done .tl-dot::after{
  content:''; position:absolute; left:3px; top:.5px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg);
}
.tl-i.today .tl-dot{ background:var(--cth-gold); border-color:var(--cth-gold); box-shadow:0 0 0 4px rgba(201,162,39,.2); }
.tl-i.off .tl-dot{ border-style:dashed; }
.tl-b{
  display:flex; align-items:center; gap:10px; background:var(--paper); border-radius:11px;
  padding:13px 15px; text-decoration:none; color:inherit;
  box-shadow:0 1px 2px rgba(20,45,45,.05); transition:.18s;
}
@media(hover:hover){ a.tl-b:hover{ box-shadow:0 3px 12px rgba(20,45,45,.1); transform:translateX(2px); } }
.tl-wd{ font-size:16px; font-weight:600; flex:1; }
.tl-i.done .tl-wd{ color:var(--cth-mute); font-weight:500; }
.tl-st{ font-size:12px; color:var(--cth-mute); }
.tl-i.today .tl-st{ color:#9a7c1c; font-weight:600; }
.tl-i.off .tl-b{ background:var(--cth-soft); box-shadow:none; }
.tl-i.off .tl-wd{ color:#aab6b6; }
.tl-i.sun .tl-b{ background:var(--cth-soft); }
.tl-i.sun .tl-dot{ border-style:dotted; }

/* 这一篇还有: 纲目 / 听抄 */
.mg-grid{ display:grid; gap:9px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.mg-card{
  display:flex; flex-direction:column; gap:4px; background:var(--paper); border-radius:12px;
  padding:14px 15px; text-decoration:none; color:inherit;
  box-shadow:0 1px 2px rgba(20,45,45,.05); border-left:3px solid var(--cth-gold);
}
@media(hover:hover){ .mg-card:hover{ box-shadow:0 3px 12px rgba(20,45,45,.1); } }
.mg-ct{ font-size:16px; font-weight:600; }
.mg-cs{ font-size:12px; color:var(--cth-mute); }

.mg-nav{ display:flex; justify-content:space-between; gap:10px; margin-top:26px; }
/* ⛔ 不要背景框(Kris) —— 照返回键那条: 零背景零边框, 按下挪 2px + 颜色加深, 不用背景反馈 */
.mg-pn{
  font-size:15px; color:var(--cth-d); text-decoration:none;   /* 同上: 当文字用深青 */
  background:none; border:0; box-shadow:none; padding:11px 2px;
  transition:transform .16s, color .16s;
}
.mg-pn:active{ color:var(--cth-d); }
.mg-nav a.mg-pn:first-child:active{ transform:translateX(-2px); }
.mg-nav a.mg-pn:last-child:active{ transform:translateX(2px); }

/* 篇目页的一行(现在整行可点, 进「篇页」) */
.cf-item{
  display:flex; align-items:center; gap:11px; background:var(--paper); border-radius:12px;
  margin-bottom:8px; padding:14px 15px; text-decoration:none; color:inherit;
  box-shadow:0 1px 2px rgba(20,45,45,.05); transition:.18s;
}
@media(hover:hover){ .cf-item:hover{ box-shadow:0 3px 12px rgba(20,45,45,.1); } }
.cf-item .cf-ti{ flex:1; min-width:0; }
.cf-item .cf-pg{ font-size:12px; color:var(--cth-mute); flex:none; }
.cf-item.done .cf-pg{ color:var(--cth); font-weight:600; }
.cf-item.ing  .cf-pg{ color:#9a7c1c; font-weight:600; }
/* 🔴 2026-08-02「一起加深」: 箭头原来 #c3cfcf 压白只有 1.60, 整批里最糟的一处 */
.cf-item .cf-go{ color:var(--cth-ink3); font-size:18px; flex:none; }
.cf-item.done .cf-ti{ color:var(--cth-mute); }

/* ══ 四、主日 · 本周总结 ═══════════════════════════ */
.sd-hero{
  background:var(--cth); color:#fff; border-radius:14px; padding:20px 18px;
  margin-bottom:22px; position:relative; overflow:hidden;
}

/* ⛔ 中文不加 letter-spacing(原来 3px, 「这一周的题目」被拉成「这 一 周 的 题 目」)。
   ⚠️ 金色 #c9a227 压在青绿底上只有 2.4:1 —— 提亮到 #F0D68A(4.5:1), 小字也要能读。 */
.sd-eyebrow{ font-size:12.5px; letter-spacing:0; color:#F0D68A; margin-bottom:9px; font-weight:600; }
.sd-t{ margin:0; font-size:19px; line-height:1.6; font-weight:600; }
.sd-note{ margin:11px 0 0; font-size:12.5px; color:rgba(255,255,255,.62); line-height:1.6; }

.sd-sec{ margin-bottom:26px; }
.sd-h{
  margin:0 0 12px; font-size:15px; font-weight:600; color:var(--cth-d);
  padding-left:11px; border-left:3px solid var(--cth-gold);
}
.sd-day{
  display:flex; gap:12px; align-items:flex-start; background:var(--paper); border-radius:11px;
  padding:13px 15px; margin-bottom:8px; text-decoration:none; color:inherit;
  box-shadow:0 1px 2px rgba(20,45,45,.05);
}
@media(hover:hover){ .sd-day:hover{ box-shadow:0 3px 12px rgba(20,45,45,.1); } }
.sd-wd{
  flex:none; font-size:12.5px; font-weight:600; color:var(--cth);
  background:var(--cth-soft); border-radius:6px; padding:3px 9px; margin-top:1px;
}
.sd-dt{ font-size:15px; line-height:1.6; flex:1; }

/* 条目本身带着「壹贰叁」编号, 再套一层 1.2.3. 就是双重编号 */
.sd-ol{ margin:0; padding:0; list-style:none; }
.sd-ol li{
  background:var(--paper); border-radius:10px; padding:12px 14px; margin-bottom:8px;
  line-height:1.75; font-size:14.5px; box-shadow:0 1px 2px rgba(20,45,45,.05);
}
.sd-say{ background:var(--paper); border-radius:11px; padding:13px 15px; margin-bottom:9px;
  box-shadow:0 1px 2px rgba(20,45,45,.05); }
.sd-say b{ display:inline-block; font-size:12.5px; color:var(--cth); background:var(--cth-soft);
  border-radius:6px; padding:2px 9px; margin-bottom:8px; font-weight:600; }
.sd-saybd{ font-size:14.5px; line-height:1.85; white-space:pre-wrap; }
.sd-vs{ background:var(--paper); border-radius:11px; padding:14px 16px; box-shadow:0 1px 2px rgba(20,45,45,.05); }
.sd-vs p{ margin:0 0 .9em; line-height:1.85; font-size:15px;
  border-left:3px solid var(--cth-gold); padding-left:.8em; }
.sd-vs p:last-child{ margin-bottom:0; }

.sd-note-in{
  width:100%; border:1px solid var(--cth-line); border-radius:12px; padding:14px;
  font-size:15px; line-height:1.8; font-family:inherit; color:inherit; background:var(--paper); resize:vertical;
}
.sd-note-in:focus{ outline:2px solid var(--cth); outline-offset:-1px; border-color:transparent; }
.sd-noterow{ display:flex; align-items:center; gap:12px; margin-top:10px; justify-content:flex-end; }
.sd-saved{ font-size:12.5px; color:var(--cth); }
.sd-save{
  border:0; background:var(--cth); color:#fff; border-radius:10px; padding:10px 22px;
  font-size:14.5px; font-weight:600; cursor:pointer; font-family:inherit;
}
.sd-save:hover{ background:var(--cth-d); }

/* ══ 五、完成今天追求 ═══════════════════════════════ */
/* ⛔ 不再浮在半空 —— Kris:「底部的完成今天追求的按钮要固定在本篇文章末尾」。
   浮动那版会一直盖住正文(截图里正好压在句子中间), 而且「读完了」这个动作
   本来就该在读到末尾时才出现。 */
.cth-donebar{
  max-width:var(--svw, 720px); margin:34px auto 0; padding:0 24px 8px;
  box-sizing:border-box; width:100%;
}
@media(max-width:380px){ .cth-donebar{ padding:0 20px 8px; } }
.cth-donebar .cd-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:9px;
  border:0; border-radius:14px; padding:14px; cursor:pointer;
  background:var(--cth); color:#fff; font-size:15.5px; font-weight:600; letter-spacing:2px;
  font-family:inherit; box-shadow:0 4px 18px rgba(20,60,60,.24);
  transition:background .2s, opacity .2s;
}
.cth-donebar .cd-btn svg{
  width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round; opacity:.55;
}
.cth-donebar.on .cd-btn{ background:var(--paper); color:var(--cth); box-shadow:0 2px 10px rgba(20,60,60,.14); }
.cth-donebar.on .cd-btn svg{ opacity:1; stroke:var(--cth-gold); }
/* 按钮已经在文末了, 正文不用再给浮动按钮留 150px */
body.cth-read .wrap{ padding-bottom:8px; }

/* 绿勾动画 */
.cth-cheer{
  position:fixed; left:50%; top:42%; transform:translate(-50%,-50%) scale(.86);
  z-index:9999; background:rgba(28,58,58,.94); color:#fff; border-radius:18px;
  padding:26px 34px; text-align:center; opacity:0; transition:opacity .3s, transform .3s;
  pointer-events:none; backdrop-filter:blur(3px);
}
.cth-cheer.on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.cth-cheer .cc-ring{
  width:52px; height:52px; margin:auto; display:grid; place-items:center;
  border:2.5px solid rgba(255,255,255,.28); border-radius:50%;
}
.cth-cheer .cc-ring svg{
  width:31px; height:31px; stroke:var(--cth-gold); stroke-width:2.6;
  opacity:0; transform:scale(.72);
}
.cth-cheer.on .cc-ring svg{ animation:ccDraw .5s .12s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes ccDraw{ to{ opacity:1; transform:scale(1); } }
.cth-cheer .cc-tx{ margin-top:12px; font-size:15.5px; font-weight:600; letter-spacing:1px; }
.cth-cheer .cc-tx span{ display:block; font-size:12.5px; color:var(--cth-gold); margin-top:5px; letter-spacing:3px; }
@media (prefers-reduced-motion:reduce){
  .cth-cheer, .cth-cheer .cc-ring svg{ transition:none; animation:none; opacity:1; transform:none; }
}

/* ══ 六、一篇的其它材料 ════════════════════════════
   话语服事 / 祷研背讲 / 要点交通 / 五分钟鸟瞰 / 职事文摘… 都是 notion 上的音视频,
   点开才加载(preload=none), 播放走 /7cth/media 现签名跳转, 我们不存文件。 */
.rs{ background:var(--paper); border-radius:12px; margin-bottom:8px; box-shadow:0 1px 2px rgba(20,45,45,.05); overflow:hidden; }
.rs-hd{
  display:flex; align-items:center; gap:10px; padding:14px 15px; cursor:pointer;
  list-style:none; font-size:15.5px; font-weight:600;
}
.rs-hd::-webkit-details-marker{ display:none; }
.rs-hd::after{ content:'▾'; margin-left:auto; color:var(--cth-mute); font-size:13px; transition:transform .2s; }
.rs[open] .rs-hd::after{ transform:rotate(180deg); }
.rs-t{ flex:1; min-width:0; }
.rs-n{
  flex:none; font-size:11.5px; font-weight:600; color:var(--cth);
  background:var(--cth-soft); border-radius:20px; padding:2px 9px;
  font-variant-numeric:tabular-nums;
}
.rs-bd{ padding:0 15px 14px; }
.rs-i{ padding:11px 0; border-top:1px solid var(--cth-line); }
.rs-nm{ font-size:13.5px; color:var(--cth-d); margin-bottom:8px; line-height:1.5; word-break:break-all; }
.rs-nm b{
  display:inline-block; font-size:11.5px; color:#fff; background:var(--cth);
  border-radius:5px; padding:1px 8px; margin-right:7px; font-weight:600;
}
.rs-md{ width:100%; display:block; border-radius:9px; background:#000; }
audio.rs-md{ background:transparent; height:40px; }
.rs-dl{
  display:inline-block; font-size:13.5px; color:var(--cth); text-decoration:none;
  border:1px solid var(--cth-line); border-radius:8px; padding:7px 14px;
}


/* ══════ 每个板块一个标题色 ══════════════════════════════════
   Kris:「每一天里，每一个分类的标题颜色要不一样，这样容易区分」
   ⚠️ 不是随手上色 —— 取同一明度层级的低饱和色, 各自贴合板块的性质, 都压得够深
      (浅底上对比度 ≥4.5:1), 远看是一排同重量的标题, 不是彩虹。
   ⛔ 只染【标题】, 正文一律墨色。
   data-sec 由 mr.html 的 cthSecColor() 在 svkit 渲染完之后打上(svkit 九版共用不能改)。 */
#app .h.h1{ color:var(--cth-mute); }                /* 没认出板块的兜底色 */
#app .h[data-sec="ol"]  { color:#2B5795 }   /* 靛蓝 · 纲目, 这一天的骨架 */
#app .h[data-sec="feed"]{ color:#8E6A17 }   /* 赭金 · 晨兴喂养, 和经节的金同族 */
#app .h[data-sec="read"]{ color:#96393C }   /* 砖红 · 信息选读, 长文 */
#app .h[data-sec="pt"]  { color:#6440BE }   /* 紫   · 今日要点 */
/* 深色底上这几个会发闷, 提亮并降饱和 */
html[data-sv-theme="night"] #app .h[data-sec="ol"]  { color:#7FA8DD }
html[data-sv-theme="night"] #app .h[data-sec="feed"]{ color:#C9A44E }
html[data-sv-theme="night"] #app .h[data-sec="read"]{ color:#D98A8C }
html[data-sv-theme="night"] #app .h[data-sec="pt"]  { color:#A78BFA }
/* 米黄/护眼底偏暖偏绿, 靛蓝和砖红各压一档才协调 */
html[data-sv-theme="sepia"] #app .h[data-sec="ol"]  { color:#28507F }
html[data-sv-theme="sepia"] #app .h[data-sec="read"]{ color:#8A3538 }
html[data-sv-theme="green"] #app .h[data-sec="ol"]  { color:#274B78 }
html[data-sv-theme="green"] #app .h[data-sec="read"]{ color:#853236 }

/* ══ 七、一篇页的 7cth 特有内容(讲台音频 / 诗歌 / 纲目大点 / 白话讲一遍) ════
   ⚠️ 这一层是【概览】不是细读: 正文 14.5px/1.86, 比每天页的信息选读(15.5/1.94)小一档 ——
      同字号铺 1000 字, 光这一块就要滚三屏。 */

/* —— 图标 —— 真下载的 Lucide 原样 path, 中文界面把线宽从 2 压到 1.6 ——
   🩸 类名【必须带前缀】: 原来叫 .ic, 而 svkit 的长按菜单 `#svAct .svact-b .ic` 和
      btm-nav.js 也用 .ic —— 我这条 width:1em;height:1em 把它们的图标容器压成了一个小方块,
      复制/笔记/纠错 三个键的图标和文字叠在一起(Kris 截图)。
   ⛔ 两三个字母的通用类名一律别用: 这一页同时加载 svkit.css/svvocab.css/mybook/btm-nav/
      donate/sharecard/hl 七八个全站文件, 撞名是必然的。 */
.cth-ic{
  width:1em; height:1em; flex:none; display:inline-block; vertical-align:-.14em;
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
/* 返回键: 零背景零边框, 就一个细箭头; 按下不用背景反馈, 挪 2px + 颜色加深。
   负外边距把 SVG 自带的光学空白吃掉, 让箭头和底下标题的左边缘真正对齐。 */
.lt-back{ font-size:26px; display:flex; align-items:center; margin-left:-7px; transition:transform .16s; }
.lt-back:active{ transform:translateX(-2px); }

/* —— 媒体卡: 讲台信息 / 本周诗歌 —— 两块同形, 一套样式 —— */
.md-card{
  background:var(--paper); border-radius:12px; padding:14px 15px;
  box-shadow:0 1px 2px rgba(20,45,45,.05);
}
.md-hd{ display:flex; align-items:center; gap:11px; margin-bottom:11px; }
/* ⛔ 图标不刷青绿: 那个色在这页专指「可点/进度」, 一排全刷等于把含义用废 —— 中性内容用墨色 */
.md-ic{ font-size:20px; color:var(--cth-mute); }
.md-tx{ min-width:0; }
.md-t{ font-size:15px; font-weight:600; line-height:1.5; }
.md-s{ font-size:12.5px; color:var(--cth-mute); margin-top:2px; }
.md-au{ width:100%; display:block; height:38px; }

/* —— 本篇纲目(只出大点) —— */
.ol-card{
  background:var(--paper); border-radius:12px; padding:4px 16px;
  box-shadow:0 1px 2px rgba(20,45,45,.05);
}
.ol-i{ padding:14px 0; }
.ol-i + .ol-i{ border-top:1px solid var(--cth-line); }
.ol-t{
  margin:0; font-size:14.5px; line-height:1.86; letter-spacing:.2px;
  /* 「壹　贰　叁」那个编号后面是全角空格, 天然就是视觉起点, 不缩进 */
}
.ol-r{ margin:7px 0 0; font-size:12.5px; line-height:1.75; color:var(--cth-ref); }

/* —— 入口组: iOS inset grouped list ——
   同一组共用一个容器, 内部 1px 线分隔, 线从图标右缘起、不通栏。
   层级落在【组与组之间】, 不在每一行之间。
   ⚠️ 容器 overflow:hidden 会裁掉 outline → 选中态用背景色, 别用 outline。 */
.lst{ background:var(--paper); border-radius:12px; overflow:hidden; box-shadow:0 1px 2px rgba(20,45,45,.05); }
.lrow{
  display:flex; align-items:center; gap:13px; padding:13px 15px;
  position:relative; text-decoration:none; color:inherit;
}
.lrow + .lrow::before{
  content:''; position:absolute; left:53px; right:0; top:0; height:1px; background:var(--cth-line);
}
@media(hover:hover){ .lrow:hover{ background:var(--cth-soft); } }
.lrow:focus-visible{ background:var(--cth-soft); }
.lic{ font-size:21px; color:var(--cth-mute); display:flex; flex:none; }
.lmid{ flex:1; min-width:0; }
/* Kris 对着「完整纲目 / 听抄」那一组说「这里还是保留吧, 划线部分的字大一点」→ 各加一档 */
.lrow-t{ display:block; font-size:17px; font-weight:600; line-height:1.45; }
.lrow-s{ display:block; font-size:13.5px; color:var(--cth-mute); margin-top:3px; line-height:1.5; }

/* 祷研背讲里的【视频】条目: 跨境内嵌拉不动, 做成一行「打开」 */
.dy-v{
  display:flex; align-items:center; gap:12px; padding:13px 2px;
  text-decoration:none; color:inherit;
}
.dy-v + .dy-v{ border-top:1px solid var(--cth-line); }
.dy-ic{ flex:none; width:22px; height:22px; color:var(--cth-d); }
.dy-t{ flex:1; min-width:0; font-size:15.5px; font-weight:600; }
.dy-t em{
  font-style:normal; font-size:11.5px; font-weight:600; margin-left:8px;
  color:var(--cth-mute); background:var(--cth-soft); border-radius:5px; padding:2px 7px;
}
.dy-go{ flex:none; width:17px; height:17px; color:#c3cfcf; }
@media(hover:hover){ .dy-v:hover .dy-t{ color:var(--cth-d); } }
.lgo{ font-size:17px; color:#c3cfcf; }

/* —— 白话讲一遍(负担应用) —— */
.fd-card{
  background:var(--paper); border-radius:12px; padding:16px 16px 14px;
  box-shadow:0 1px 2px rgba(20,45,45,.05);
}
.fd-h{
  margin:20px 0 9px; font-size:14.5px; font-weight:600; line-height:1.7;
  color:var(--cth-d);
  /* ⛔ 中文标题不加 letter-spacing —— 字距是给西文大写字母的, 加中文上只会把词拉散 */
}
.fd-card > .fd-h:first-child{ margin-top:2px; }
.fd-l2{ font-size:14px; padding-left:.9em; }
.fd-l3{ font-size:13.5px; padding-left:1.8em; font-weight:500; }
.fd-p{
  margin:0 0 .9em; font-size:14.5px; line-height:1.86; text-indent:2em; letter-spacing:.2px;
}
.fd-p:last-of-type{ margin-bottom:0; }
/* 出处交代: 一条上边线 + 更小的字, 不做成说明卡(正文零底块, 别自己先破例) */
.fd-src{
  margin:16px 0 0; padding-top:11px; border-top:1px solid var(--cth-line);
  font-size:12px; color:var(--cth-mute); letter-spacing:1.4px;
}

/* 上/下篇: 图标和文字对齐 */
.mg-pn{ display:inline-flex; align-items:center; gap:4px; }
.mg-pn .cth-ic{ font-size:16px; color:#a9bcbc; }
.rs-dl{ display:inline-flex; align-items:center; gap:3px; }
.rs-dl .cth-ic{ font-size:14px; }

/* ══ 八、主日: 申言稿四格 + 三分钟操练 ═══════════════════
   官方申言格式就是「有主题·有话·有光·有经历」四项 —— 做成四格而不是一个大输入框:
   空白框让人不知道从哪写起, 四格本身就是提纲。 */
.sd-sub{ margin:-6px 0 12px; font-size:12.5px; color:var(--cth-mute); line-height:1.6; }

.sy-f{
  background:var(--paper); border-radius:12px; padding:12px 14px 13px; margin-bottom:9px;
  box-shadow:0 1px 2px rgba(20,45,45,.05);
}
.sy-lb{ display:flex; align-items:baseline; gap:8px; margin-bottom:9px; flex-wrap:wrap; }
.sy-lb > span{ font-size:14.5px; font-weight:600; color:var(--cth-d); flex:none; }
/* 序号: 和标题同体量, 不抢戏 */
.sy-lb i{ font-style:normal; color:var(--cth-d); margin-right:5px; }   /* 序号①②③④: 当文字用深青 */
.sy-lb em{ font-style:normal; font-size:12.5px; color:var(--cth-mute); flex:1; min-width:0; }
/* 「带入本周经节」—— 这是可动作的, 用青绿(这套里青绿=可点/进度) */
.sy-fill{
  flex:none; border:1px solid var(--cth-line); background:var(--cth-soft); color:var(--cth-d);
  border-radius:8px; padding:5px 11px; font-size:12.5px; font-family:inherit; cursor:pointer;
}
.sy-fill:active{ background:var(--cth); color:#fff; border-color:transparent; }
/* 申言稿也是【自己写的】—— 同一套语义色, 和上面「我的亮光」一致(Kris 2026-08-02) */
.sy-in{
  width:100%; box-sizing:border-box; border:1px solid var(--cth-line); border-radius:10px;
  padding:11px 12px; font-size:15px; line-height:1.8; font-family:inherit; color:var(--cth-mine);
  background:var(--paper); resize:vertical;
}
.sy-in:focus{ outline:2px solid var(--cth); outline-offset:-1px; border-color:transparent; }
.sy-row{ display:flex; justify-content:flex-end; min-height:18px; margin-top:2px; }

/* 三分钟操练 */
.sy-tm{
  background:var(--paper); border-radius:12px; padding:20px 16px 18px; text-align:center;
  box-shadow:0 1px 2px rgba(20,45,45,.05);
}
.sy-tmn{
  font-size:40px; font-weight:600; line-height:1.1; color:var(--cth-d);
  font-variant-numeric:tabular-nums;   /* 数字等宽, 秒变化时不左右跳 */
}
/* 超时态: 红。⛔ 原来写死 #96393C, 夜间压黑底只有 2.x —— 走变量。
   「超时」两字小一号, 免得把 40px 的大数字挤到换行。 */
.sy-tmn.over{ color:var(--cth-warn); }
.sy-tmn i{ font-style:normal; font-size:.5em; font-weight:600; margin-right:.18em;
  vertical-align:.16em; letter-spacing:.02em; }
.sy-tms{ margin:9px 0 15px; font-size:12.5px; color:var(--cth-mute); line-height:1.6; }
.sy-tmb{
  display:inline-flex; align-items:center; gap:7px;
  border:0; background:var(--cth); color:#fff; border-radius:11px;
  padding:11px 30px; font-size:15px; font-weight:600; font-family:inherit; cursor:pointer;
}
.sy-tmb .cth-ic{ font-size:17px; }
.sy-tmb:active{ background:var(--cth-d); }
/* 走起来之后并排两个键(暂停 / 停止)。停止是"结束这一轮"的次要动作 —— 描边不实底,
   免得两个同样重的实心键抢, 分不清哪个是主。 */
.sy-tmbs{ display:flex; justify-content:center; gap:10px; }
.sy-tmb-2{
  background:transparent; color:var(--cth-d);
  box-shadow:inset 0 0 0 1.5px var(--cth-line); padding:11px 22px;
}
.sy-tmb-2:active{ background:var(--cth-line); }

/* 「开头的话」音频下面的文字稿折叠(2026-08-03)。复用 .rs 那套, 只把外边距收一收 ——
   它嵌在「每天」列表的第一行里, 不该再有自己的白卡片(Kris:「不要白的背景框套白的背景框」)。 */
.tl-otx{ margin:10px 0 2px; background:none; box-shadow:none; }
.tl-otx .rs-hd{ padding-left:0; padding-right:0; }
.tl-otx .rs-bd{ padding-left:0; padding-right:0; }

/* 纲目页页签的【直出占位】(2026-08-03 治闪屏用, 见 content.html 那段注释)。
   ⚠️⚠️ 值全部照抄 svkit.css 的 `#svTabs` / `#svTabs button` —— 两边必须【等高】,
        差一个像素就还是会跳。改了 svkit.css 那两条, 这里要跟着改。
   ⛔ 不能直接复用 id="svTabs": 那样页面上会同时有两个同 id 的元素(不合法),
      而且 cthTabs() 的 getElementById 会拿到占位、把真页签漏掉。 */
#cthTabsPh{ display:flex; gap:0; width:calc(100% - 32px); max-width:1000px; margin:14px auto 4px;
  border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper); }
#cthTabsPh button{ flex:1; font:inherit; font-size:15.5px; font-weight:600; line-height:1.5;
  padding:11px 6px; border:0; background:none; color:var(--soft); cursor:default; }
#cthTabsPh button.on{ background:var(--barbg,#1c7b7c); color:#fff; }
@media(max-width:420px){ #cthTabsPh button{ font-size:14.5px; padding:10px 4px; } }

/* 官方申言示范正文(在 .rs 折叠里) */
.sy-demo p{
  margin:0 0 .85em; font-size:14.5px; line-height:1.86; letter-spacing:.2px;
}
.sy-demo p:last-child{ margin-bottom:0; }
/* 「主题：」「经文：」「要点：」这些提示行本身就是短句, 不缩进; 长段落缩进两字 */
.sy-demo p{ text-indent:2em; }
.sy-demo p:first-child{ text-indent:0; font-weight:600; color:var(--cth-d); }

/* 六天那一行右边补个箭头(原来只有文字, 看不出可点) */
.sd-day{ align-items:center; }
.sd-go{ font-size:17px; color:#c3cfcf; flex:none; }

/* 申言示范的折叠条: 右边那个数字在「其它材料」里是条目数(有意义), 在这里是段落数(没意义) → 藏掉 */
.sd-sec .rs .rs-n{ display:none; }

/* ══ 九、每天页: 我的亮光 ═══════════════════════════════
   ⚠️⚠️ 这一块在【svkit 阅读页】里, 那里有四套配色(纸白/米黄/护眼/夜间) ——
      ⛔ 不能写死 #fff/#1b2626, 夜间会白得晃眼。一律用 svkit 的主题变量:
      --paper(卡片底) --ink(正文) --soft(次要) --line(分隔) --gold(强调),
      切主题时自动跟着走。 */
/* 🩸 donate.js 的卡片写死 margin-top:-150px, 靠吃掉前一个元素的 150px 留白来贴合。
   7cth 这几页正文后面还接着「我的亮光」和「完成今天追求」, 那 -150px 会直接压在它们身上
   (实测捐款卡盖住输入框, 字都打不进去)。
   ✅ 统一在下面用 `#dnt-end{margin-top:28px}` 把那个负边距盖掉, 各页就都不用预留 150px 了。 */
.lg-box{
  max-width:var(--svw, 720px); margin:6px auto 0; padding:15px 16px 13px;
  box-sizing:border-box;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:13px;
}
/* 正文两侧留白与 .wrap 对齐(cth-read 那边是 24px / 窄屏 20px) */
/* 🩸 这条 `width:calc(100% - 48px)` 是亮光块比奉献卡窄的真正原因(实测 318 vs 386)——
   我先加了负 margin, 左边对齐了、宽度却还是被它按住。⭐ 改造既有区块要把老规则全找出来。 */
body.cth-read .lg-box{ width:auto; }
@media(max-width:380px){ body.cth-read .lg-box{ width:auto; } }

.lg-hd{ display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.lg-t{ font-size:14.5px; font-weight:600; flex:1; }
/* 字数: 常驻但不喧宾夺主; 到 90% 变警示色。⛔ 不弹任何提示打断书写(Kris) */
.lg-n{ font-size:12px; color:var(--soft); font-variant-numeric:tabular-nums; }
.lg-n.near{ color:var(--gold); font-weight:600; }
.lg-in{
  width:100%; box-sizing:border-box; display:block;
  background:transparent; color:inherit;
  border:1px solid var(--line); border-radius:10px; padding:11px 12px;
  font-size:15px; line-height:1.85; font-family:inherit; resize:vertical;
}
.lg-in::placeholder{ color:var(--soft); opacity:.85; }
.lg-in:focus{ outline:2px solid var(--gold); outline-offset:-1px; border-color:transparent; }
.lg-ft{ display:flex; justify-content:flex-end; min-height:17px; margin-top:5px; }
.lg-tip{ font-size:12px; color:var(--gold); }

/* 🩸 donate.js 的卡片写死了 margin-top:-150px —— 那是为【阅读页】设计的:
   阅读页 .wrap 有 padding-bottom:150px, 负边距正好抵消。
   但目录/篇目/一篇/主日这几页没有那 150px, 负边距就把卡片直接拽到正文屁股上
   (Kris:「奉献卡片距离太近了」)。这几页把间距还原成正常的一段留白。 */
.cth-body #dnt-end, body.cth-read #dnt-end{ margin-top:28px !important; }

/* ══ 十、首屏: svkit 接管【之前】别留一大片空白 ═══════════════
   🩸 根因: svkit.css 给 .bar 设了 visibility:hidden(等 JS 把工具条重建好再显示),
      可它【仍然占着位置】—— 而且没重建时里面的控件是三行堆叠的 144px。
      跨境加载慢的时候, 用户看到的就是大半屏空白 + 半天不出来的工具条(Kris 截图)。
   ⭐ 重建前把它压成和成品同高(56px)、同色的一条: 看到的是「顶栏在那儿, 内容马上来」,
      而不是「这页是不是坏了」。正文也跟着上移 88px, 首屏多露一段。
   ⚠️ svkit 重建完会给它加上 .sv-navbar —— 那一刻这条规则自动让位, 不会和成品打架。 */
body.cth-read .bar:not(.sv-navbar){
  visibility:visible !important;
  height:56px; min-height:56px; overflow:hidden;
  background:var(--cth); border-bottom:0;
}
/* 里面那些控件仍旧藏着 —— JS 没到位时它们点了也没反应, 露出来只会误导 */
body.cth-read .bar:not(.sv-navbar) > *{ visibility:hidden; }

/* 目录里按周分的那条标题 —— 复用 svkit 的 .pk-sec(旧约/新约就是用它分的),
   但它原本只在【卷列表】里用过, 篇/天列表里要自己给一份同款样式。
   Kris:「区分的要明显」→ 上面留够白 + 一条线, 让每一周自成一块。 */
#svPkChaps .pk-sec.cth-wk{
  display:block; margin:18px 2px 8px; padding:0 0 7px;
  font-size:12.5px; font-weight:600; color:var(--soft, #7d8f8f);
  border-bottom:1px solid var(--line, #e2ebeb);
}
#svPkChaps .pk-sec.cth-wk:first-child{ margin-top:2px; }

/* 诗歌那一行整块可点 → 站内那首诗歌的页面(歌词/曲谱都在那儿) */
.md-go{ text-decoration:none; color:inherit; }
.md-go .lgo{ margin-left:auto; }
@media(hover:hover){ .md-go:hover .md-t{ color:var(--cth-d); } }

/* ══ 十一、每天开头那两块音频(五分钟好时光 / 今日晨兴音频) ═══════
   ⭐ 定稿原型里一天就是从这两块开始的。区标题的做法和正文里的板块标题一致:
      小字号 + 颜色 + 右边一条淡线, 零底色零卡片。
   ⚠️ 在 svkit 阅读页里 → 颜色一律走它的主题变量, 别写死。 */
.cth-au{
  max-width:var(--svw, 720px); margin:0 auto; padding:0 24px;
  box-sizing:border-box;
}
.cth-au[hidden]{ display:none !important; }
.cth-au:first-of-type{ margin-top:14px; }
@media(max-width:380px){ .cth-au{ padding:0 20px; } }
.cth-au-t{
  display:flex; align-items:center; gap:12px;
  margin:18px 0 10px; font-size:12.5px; font-weight:600;
  color:#2f7d6f;                       /* 绿 = 进度与动作(音频是「做」不是「读」) */
  letter-spacing:0;                    /* ⛔ 中文标题不加字距 */
}
.cth-au-t::after{ content:''; flex:1; height:1px; background:currentColor; opacity:.22; }
html[data-sv-theme="night"] .cth-au-t{ color:#6FBFA8; }
.cth-au-p{ width:100%; display:block; height:38px; }

/* ══════════════════════════════════════════════════════════════════════
   十二、【定稿原型的版式】落到 svkit 阅读页上
   ──────────────────────────────────────────────────────────────────────
   🔴 Kris 三次说「和当初定稿的那一版不一样」。原因见 [[feedback_ui_design]] #26:
      「不重复造轮子」只该管【控件】(字号/配色/搜索这些 svkit 已有的),
      【版式和内容怎么长】必须照定稿原型 —— 我之前把它扩大套用, 把定稿丢了。
   ⭐ 落地原则: **字体/尺寸/行高/结构照定稿, 颜色走主题变量** ——
      这样四套阅读配色(纸白/米黄/护眼/夜间)都不会坏。
   ⭐ 定稿的骨架: 衬线体正文 + 零卡片零底色 + 三个语义色
      (绿=进度与动作 / 金=可点的经节 / 紫=我写的东西), 除此以外一律墨色。
   ══════════════════════════════════════════════════════════════════════ */

body.cth-read{
  /* 定稿的正文衬线体。⚠️ 安卓没有 Songti SC, 要一路兜到 Noto Serif CJK */
  --cth-serif:"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC","Noto Serif SC",serif;
  --cth-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  /* 定稿色板 —— ⚠️ 比 svkit 默认的更深: Kris 两次说过「文字普遍有点浅, 看着累」
     「都用深色字, 要和背景颜色高对比」。#15181B 对纸白 17.2:1, 但不是纯黑(纯黑长文会发刺)。 */
  --cth-ink:#15181B;
  --cth-ink3:#5C636B;      /* 元信息: 出处 / 时长。2026-08-02 由 #6E757D 加深(原来 4.07 不达标) */
  --cth-grn:#2A6E50;       /* 绿 = 进度、当前、动作 */
  --cth-my:#7C3AED;        /* 紫 = 我写的东西 */
}
/* 夜间/深色底下换成浅色一套, 否则深墨字直接看不见 */
html[data-sv-theme="night"] body.cth-read{
  --cth-ink:#D6D1C6; --cth-ink3:#9A9384; --cth-grn:#6FBFA8; --cth-my:#B79BF5;
}

/* ── 板块标题(纲目 / 晨兴喂养 / 信息选读) = 定稿的 .sech ──
   衬线 17.5px、墨色、右边一条淡线。⛔ 不是整条底色块, 也不是 12.5px 小标签。
   颜色仍按板块分(data-sec), 那是 Kris 另外定的「每个分类颜色不一样」。 */
#app .h.h1{
  margin:2.2em 0 .9em !important; padding:0 !important;
  background:transparent !important; border:0 !important; border-radius:0 !important;
  display:flex !important; align-items:center; gap:10px; text-align:left;
}
#app .h.h1 .cn{
  font-family:var(--cth-serif) !important;
  font-size:17.5px !important; font-weight:600 !important;
  letter-spacing:0; flex:none; color:inherit !important;
}
#app .h.h1::after{ content:''; flex:1; height:1px; background:currentColor; opacity:.2; }

/* ── 篇题(h0) ── 定稿里是「一条 34px 细金线 + 衬线大字」 */
#app .h.h0{
  margin:.2em 0 1.3em !important; padding:0 !important;
  border:0 !important; background:transparent !important;
}
#app .h.h0::before{
  content:''; display:block; width:34px; height:1.5px;
  background:var(--gold, #8A6518); margin:0 0 15px;
}
/* 🔴 2026-08-02 Kris:「篇题换行要与标题的第一个字对齐(除序号)」—— 和纲目条同一条规矩。
   🩸 根因: svkit.css 有 `.h0 .cn{text-align:center}`(圣经版篇题居中是对的), 我们没覆盖它。
      而【居中和"与首字对齐"天然互斥】—— 悬挂缩进(svHangIndent 已给 .h0 写了
      paddingLeft/textIndent)在居中文本上等于白写, 所以看着完全没生效。
   ⭐ 已核对【定稿原型 7cth-proto.html 的 vTODAY()】: 那里篇题就是**左对齐**大字
      (`font-family:var(--serif);font-size:21px;line-height:1.58`, 没有 text-align)——
      也就是说居中本来就是偏离定稿的。 */
#app .h.h0 .cn, #app .h.h0 .en{ text-align:left !important; }
#app .h.h0 .cn{
  font-family:var(--cth-serif) !important;
  font-size:21px !important; font-weight:600 !important; line-height:1.58 !important;
  color:var(--cth-ink) !important; letter-spacing:.01em;
}

/* ── 正文段落(晨兴喂养 / 信息选读) = 定稿的 .feed / .read ──
   衬线 16.5px / 行高 1.98 / 首行缩进两字。 */
/* 🔴 正文字号原来写死 `16.5px !important` —— 它盖掉了 svkit 动态写的那条(`#app .v{17px}`,
   那条才是跟着 --fs 走的), 结果【用户调字号对正文根本不生效】。
   这也是 Kris 说「为什么英文的字这么小」的另一半原因: 他把字号调到 20, 中文却卡在 16.5。
   ⭐ 铁律: 凡要跟正文走的一律 calc(var(--fs)*n)。 */
#app .v{
  font-family:var(--cth-serif) !important;
  font-size:calc(var(--fs, 17px) * 1) !important; line-height:1.98 !important;
  color:var(--cth-ink) !important;
  margin:0 0 1.05em !important; padding:0 !important; border:0 !important;
  text-indent:2em; letter-spacing:0;
}

/* ── 纲目条 = 定稿的 .dolo ── 衬线 15.5px / 1.82; 编号用无衬线小一号 */
#app .vol1,#app .vol2,#app .vol3,#app .vol4,#app .vol5{
  font-family:var(--cth-serif) !important;
  font-size:15.5px !important; line-height:1.82 !important;
  margin:0 0 13px !important; text-indent:0;
  color:var(--cth-ink) !important;
}
#app .vol1{ font-weight:600; }

/* ── 读经范围 ── 定稿里是元信息, 不是一块底色卡 */
#app .vrdg{
  background:none !important; border:0 !important; border-radius:0 !important;
  padding:0 !important; margin:0 0 1.6em !important;
  font-family:var(--cth-sans) !important; font-size:12.5px !important;
  line-height:1.75 !important; color:var(--cth-ink3) !important; text-indent:0;
}

/* ── 祷读的那几节 ── Kris 最新要求: 红字, 去掉一切背景特效
      (定稿里这里是「金色药丸 + 左金线」, 他今天改口要红字, 以他最新的为准)
   🔴 2026-08-01 Kris:「你别太过了, 颜色也要随着主题颜色变化, 目的就是【醒目一点、
      高对比度、和其他的经节颜色有一个区分】」—— 于是这里只做两件事:
        · 色值一律走 var(--cth-vs)(四套主题各一个值), ⛔ 不再写死 + !important 锁死;
        · 只染【真正承载中文经文的那一层】, 见下面 .vt 那条。 */
#app .vvs{
  font-family:var(--cth-serif) !important;
  border:0 !important; padding:0 !important; background:none !important;
  margin:0 0 13px !important; text-indent:0;
  color:var(--cth-vs) !important; font-weight:500; line-height:1.86 !important;
}
/* 🩸 这一条原来是 color:inherit !important —— 它比 `#app a.bref{color:#2563EB}` 更具体,
   于是把经节号一起拉成红色, 第 ④ 节那条蓝色规则【从来没生效过】。
   Kris:「前面这里用蓝色的字, 后面经节具体内容用红色字」→ 经节号单独给蓝。 */
#app .vvs a.bref{ color:var(--cth-vsn) !important;
  border-bottom-color:rgba(37,99,235,.45) !important;
  border-bottom-color:color-mix(in srgb, var(--cth-vsn) 45%, transparent) !important; }

/* ── 参读 = 定稿的 .src ── 一条上边线 + 更小的字 */
#app .vref{
  font-family:var(--cth-sans) !important; font-size:11.5px !important;
  color:var(--cth-ink3) !important; text-indent:0;
  margin:1.8em 0 0 !important; padding-top:12px !important;
  border-top:1px solid var(--line, #e6dcc8) !important;
}

/* ── 可点的经节 = 金 ── 定稿: 金色只给「可点的经节」这一个含义 */
#app a.bref{
  color:var(--gold, #8A6518); border-bottom:1px dashed currentColor;
  text-decoration:none; padding:0 1px; opacity:.95;
}
@media(hover:hover){ #app a.bref:hover{ background:rgba(138,101,24,.12); } }

/* ── 英文(中英对照时) ── 定稿里英文用无衬线, 和中文拉开 */
/* 🩸 原来写死 font-size:14.5px —— 而正文字号是 svkit 写在 <html> 上的 --fs(用户调字号改的
   就是它)。Kris 调大字号后中文 20px 而英文永远 14.5px, 所以他问「为什么英文的字这么小」。
   ⭐ 铁律: 凡要跟正文走的一律 calc(var(--fs)*n), ⛔ 写死 px 或用 em 都不行(父级是 16px)。
   Kris:「应该和中文一样大」→ 1 倍。 */
/* 🩸 第一版写成 calc(var(--fs)*1) —— 那是【全局一个值】, 于是:
   · 正文段(20px) 的英文 20px ✓
   · 但【纲目条】中文只有 15.5px, 英文却也是 20px → 英文反而比中文大。
   我当时只量了正文段就说"通过", 抽样不全。
   ⭐ 正解: 1em = 继承【它所在那一条】的中文字号, 每一层都自动对齐。
   ⚠️ 这里用 em 是对的(父级就是那条 .v); 记忆里「用 em 也不行」说的是【标题】——
      那些的父级是 #app(16px), 拿不到 --fs, 两回事。 */
#app .en{
  font-family:var(--cth-sans) !important;
  font-size:1em !important;
  line-height:1.8 !important; text-indent:0;
}

/* ── 两块音频 = 定稿的区标题 + .aud ──
   区标题和正文里的板块标题同款(衬线 17.5px), 别一个大一个小。 */
.cth-au-t{
  font-family:var(--cth-serif); font-size:17.5px; font-weight:600;
  color:var(--cth-grn);                 /* 绿 = 动作 */
  margin:22px 0 13px; gap:10px;
}
.cth-au-t::after{ opacity:.2; }

/* ── 我的亮光 = 定稿的 .mine ── 左侧一条紫线, 零卡片零底色 */
.lg-box{
  background:none; border:0; border-left:2px solid var(--cth-my);
  border-radius:0; padding:0 0 0 13px; margin:22px auto 0;
}
.lg-hd{ margin-bottom:10px; }
/* 🩸 标题原来写死 11px —— 正文 17~21px 时它小得像脚注(Kris:「我的亮光字太小了」)。
   ⭐ 跟正文走: calc(var(--fs)*n), ⛔ 别写死 px。⛔ 中文标题不加 letter-spacing(会拉散)。 */
.lg-t{
  font-family:var(--cth-sans); font-size:calc(var(--fs, 17px) * .95); font-weight:700;
  color:var(--cth-my);
}
.lg-n{ font-size:calc(var(--fs, 17px) * .78); color:var(--cth-ink3); }
/* 输入区: Kris「太小了, 也太窄了。应该和奉献卡片一样宽, 长度也长一点」
   · 宽: 奉献卡内层 .dnt-card 实测 386/414(左右各 14), 而这里原来只有 318(左右各 48)
     → 用负 margin 把 .wrap 的 24px 内边距吃掉 10px, 两边就都落在 14 上。
   · 高: 原来 rows=3 只有 106px, 写两三句就要滚 → 给 min-height 约六行。 */
.lg-in{
  font-family:var(--cth-serif); font-size:calc(var(--fs, 17px) * .92); line-height:1.82;
  border:1px solid var(--line, #e6dcc8); border-radius:11px;
  background:var(--paper, #fff);
  min-height:calc(var(--fs, 17px) * 1.82 * 6 + 26px);
}
/* 自己写的内容用【墨紫】, 和原文的墨色分开(Kris) —— 只读态也一样, 所以写在 .lg-in 上 */
.lg-in{ color:var(--cth-mine) !important; }
.lg-in::placeholder{ color:var(--cth-mute); opacity:.75; }
.lg-in:focus{ outline:2px solid var(--cth-my); outline-offset:-1px; border-color:transparent; }
.lg-tip{ color:var(--cth-my); }

/* ── 只读 / 编辑 两态 (2026-08-02 Kris:「加编辑保存键, 保存后不点编辑不能继续写」) ──
   ⭐ 只读态就该【像一段读物】, 不像一个空着的输入框: 去掉框线与底色, 高度由 JS 撑到全长。
   ⚠️ 仍然是 <textarea readOnly>(不是 disabled) —— 能选中复制, 字色也正常。 */
.lg-ro .lg-in{
  border-color:transparent; background-color:transparent; padding-left:0; padding-right:0;
  min-height:0; resize:none; overflow:hidden; cursor:default;
}
.lg-ro .lg-in:focus{ outline:none; }

/* 🔴 2026-08-02 Kris:「我的亮光里面最好是有横线, 就是字写在横线上的感觉,
   横线是黑色的就行。显示的时候也是这样。」
   🩸 第一版线的位置错了(他截图: 线穿过字的下半部)。两个原因:
     ① 背景从 padding box 顶端开始画, 而文本行是从 padding-top 之后才开始 —— 整体错开 11px;
     ② 线画在每行的【最底部】, 而中文字在行框里是垂直居中的 —— 字底离行底还有一截。
   ✅ 现在: 背景整体下移一个 padding-top, 线画在【字底再往下约 2px】处, 字就正好坐在线上。
   ⭐ 行高、线距、线的位置【全部由同一组变量算出来】—— 只要字号变(用户调 --fs), 三者一起变,
      ⛔ 不会出现"字号一大字就骑到线上"。 */
.lg-box{
  --lg-fs:calc(var(--fs, 17px) * .92);        /* 亮光正文字号 */
  --lg-line:calc(var(--lg-fs) * 2.05);        /* 行高 = 横线间距 */
  --lg-rule:calc(var(--lg-fs) * 1.62);        /* 线距行框顶部: 落在字底下方一点点 */
  --lg-pad:11px;                              /* = .lg-in 的 padding-top */
}
.lg-in{
  line-height:var(--lg-line) !important;
  padding-top:var(--lg-pad);
  background-image:repeating-linear-gradient(to bottom,
    transparent 0,
    transparent calc(var(--lg-rule) - 1px),
    var(--cth-rule) calc(var(--lg-rule) - 1px),
    var(--cth-rule) var(--lg-rule),
    transparent var(--lg-rule),
    transparent var(--lg-line));
  background-attachment:local;   /* ⭐ 跟着内容滚, 不然一滚字就离开线 */
  background-position:0 var(--lg-pad);   /* ⭐ 和文本第一行对齐 */
  background-repeat:repeat;
}
.lg-in::placeholder{ line-height:var(--lg-line); }

.lg-ft{ align-items:center; gap:12px; margin-top:14px; }
.lg-tip{ flex:1; }                     /* 「已保存」占左边, 按钮靠右 */
/* 🔴 Kris:「保存键太小, 而且离下面的完成键太近」→ 加大到能一指按准, 并把两者拉开。 */
.lg-btn{
  flex:none; border:1.5px solid var(--cth-my); background:none; color:var(--cth-my);
  border-radius:11px; padding:11px 26px; font-size:15px; font-weight:600;
  font-family:inherit; cursor:pointer; letter-spacing:.04em; min-width:96px;
}
.lg-btn:active{ opacity:.65; }
/* 编辑态: 实心, 一眼看出「现在按下去是保存」 */
.lg-box:not(.lg-ro) .lg-btn{
  background:var(--cth-my); color:var(--cth-on-fill); border-color:transparent;
}
/* 「完成今日晨兴」离亮光块远一点 —— 两个都是"按一下"的键, 挨太近容易点错 */
.cth-donebar{ margin-top:48px !important; }

/* ── 完成今天追求 = 定稿的 .btn ── 绿底、圆角 12、带一点投影 */
.cth-donebar .cd-btn{
  background:var(--cth-grn); border-radius:12px; padding:15px;
  font-family:var(--cth-sans); font-size:15.5px; letter-spacing:0;
  box-shadow:0 5px 14px rgba(42,110,80,.22);
  /* ⚠️ 夜间的 --cth-grn 是【浅】绿, 白字压上去只有 2.17 —— 那一套里换成深字(见色板) */
  color:var(--cth-on-fill);
}
.cth-donebar.on .cd-btn{
  background:var(--paper, #fff); color:var(--cth-grn);
  box-shadow:0 2px 10px rgba(42,110,80,.14);
}

/* ── 定稿的播放器: 34px 圆形描边绿键 + 一条 1px 进度线 + 两端时间 ── */
.cth-au .aud{ display:flex; align-items:center; gap:14px; margin:0 0 4px; }
.cth-au .play{
  flex:0 0 34px; height:34px; border-radius:50%;
  background:none; color:var(--cth-grn); border:1px solid var(--cth-grn);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  padding:0; transition:background .18s, color .18s;
}
.cth-au .play.on, .cth-au .play:active{ background:var(--cth-grn); color:var(--cth-on-fill); }
.cth-au .audm{ flex:1; min-width:0; }
.cth-au .audb{
  height:1px; background:currentColor; opacity:.16; overflow:hidden; margin:0 0 8px;
  cursor:pointer; color:var(--cth-ink);
}
.cth-au .audb i{ display:block; height:100%; width:0; background:var(--cth-grn); opacity:1; }
.cth-au .audt{
  font-family:var(--cth-sans); font-size:10.5px; color:var(--cth-ink3);
  display:flex; justify-content:space-between;
  font-variant-numeric:tabular-nums; letter-spacing:.04em;
}
/* 进度线本体要实, 容器那条才是淡的 */
.cth-au .audb{ position:relative; }
.cth-au .audb::before{ content:''; position:absolute; inset:0; background:currentColor; opacity:0; }

/* ══ 十三、工具条的「目录」及其底部 sheet ═══════════════════════
   定稿原型里工具条第一个键就是「目录」—— 点开列出这一天的每个分类, 点一下定位过去。
   ⚠️ 形态照站上: 底部 sheet, 圆角只在上两角, 从下往上滑, 遮罩很淡
      (Kris 说过看经节时后面不要变暗 —— 同一个道理, 能点外面关掉就够)。 */
.cth-scrim{
  position:fixed; inset:0; background:rgba(20,24,20,.16); z-index:9990;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.cth-scrim.on{ opacity:1; pointer-events:auto; }
.cth-sheet{
  position:fixed; left:50%; bottom:0; z-index:9991;
  width:100%; max-width:520px; transform:translate(-50%,101%);
  background:var(--paper, #fff); color:var(--ink, #1b2626);
  border-radius:16px 16px 0 0; box-shadow:0 -4px 24px rgba(15,45,45,.18);
  padding:0 0 calc(10px + env(safe-area-inset-bottom, 0px));
  transition:transform .26s cubic-bezier(.32,.72,0,1);
  max-height:min(72vh, 560px); overflow-y:auto;
}
.cth-sheet.on{ transform:translate(-50%,0); }
.cth-grip{
  width:32px; height:4px; border-radius:2px; background:var(--line, #dde5e5);
  margin:8px auto 4px;
}
.cth-sheet-t{
  margin:6px 18px 4px; font-family:var(--cth-sans);
  font-size:12.5px; font-weight:600; color:var(--soft, #7d8f8f);
}
/* ── 「我的亮光」面板 (2026-08-02 Kris:「点开要直接显示亮光内容, 不是滚过去」) ──
   ⭐ 复用上面这套 sheet, 只补内边距 —— 里面装的是 #cthLg【本体】(cthtb.js 搬进来的),
      所以亮光块自己那套样式原样生效, 这里【不重复定义】它的字体/颜色。
   ⚠️ 它有输入框: 键盘弹起来时要留得下, 所以比默认 sheet 高一档。 */
.cth-lgsheet{ max-height:min(86vh, 680px); }
/* 🩸 站上有个固定底部导航 #_bnav(手机端 56px + 安全区, btm-nav.js 注入) ——
   面板贴着视口底边, 「保存」键正好被它压在下面(实测按钮在 744~776, 导航从 744 起)。
   ⛔ 别只看截图"好像没有按钮"就去找 JS 的毛病, 先量一下它是不是被别的东西盖住了。 */
@media(max-width:767px){
  .cth-lgsheet{ padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px)); }
}
.cth-lgs-bd{ padding:4px 18px 14px; }
/* 亮光块在正文里是「左边一条紫竖线」的形态; 进了面板它自己就是主体, 去掉那条线更干净 */
.cth-lgs-bd .lg-box{ border-left:0; padding-left:0; margin:0; }
.cth-lgs-bd .lg-in{ max-height:46vh; }
/* 面板开着时锁住背景滚动 —— 否则手指在面板边缘滑会带着正文一起走 */
body.cth-lg-open{ overflow:hidden; }

.cth-menu{ padding:4px 8px 6px; }
.cth-menu-b{
  display:flex; align-items:center; gap:12px; width:100%;
  background:none; border:0; cursor:pointer; text-align:left;
  padding:13px 12px; border-radius:10px;
  font-family:var(--cth-serif); font-size:16px; color:inherit;
}
/* 小圆点标当前读到哪一段 —— 绿 = 进度(定稿里就是这个含义) */
.cth-menu-b i{
  flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--line, #dde5e5); transition:background .2s;
}
.cth-menu-b.on{ color:var(--cth-grn, #2A6E50); font-weight:600; }
.cth-menu-b.on i{ background:var(--cth-grn, #2A6E50); }
@media(hover:hover){ .cth-menu-b:hover{ background:var(--bg, #f2f6f6); } }
.cth-menu-b:active{ background:var(--bg, #f2f6f6); }

/* ══════════════════════════════════════════════════════════════════════
   十四、一篇页(msg) / 主日页(sunday) —— 照【定稿原型】的版式
   ──────────────────────────────────────────────────────────────────────
   ⛔ 动手前逐块对过定稿(test.logos-rhema.com/7cth-proto.html 的 vWEEK / vSUN)。

   ⚠️ 上一版笔记里写着「一篇页/主日页定稿是【零卡片】」——【那是记错的】:
      零卡片只有【每天页】(vTODAY 用 .sec/.sech); 一篇页 vWEEK 本来就用 .card,
      主日页 vSUN 的计时器也用。→ 所以这里【不动卡片】, 只改真正对不上的三处:

   ① 字体 —— 定稿:「正文/标题一律衬线; 编号/元信息/英文才用无衬线」。
      而 --cth-serif 原来只定义在 body.cth-read(晨兴阅读页) 上, 这两页的 body
      是 .cth-body, 根本取不到那个变量 → 至今整页全是无衬线。
      ⚠️ .cth-body 与 .cth-read 互斥(阅读页是 `m-cn cth-read`), 不会互相覆盖。
   ② 播放器 —— 定稿:「34px 圆形描边绿键 + 1px 进度线 + 两端时间」, ⛔ 明写着
      不用原生 <audio controls>(安卓/iOS 长得完全不一样, 在衬线版式里是块突兀的灰控件)。
      样式在第十二节 .cth-au 那组已经有了, 这里只负责让 msg 页也能用上。
   ③ 篇题 —— 定稿是浅底 + 衬线; 真实站是【青绿实底白字圆角块】。
      同一类问题每天页已经改过一轮(Kris:「用红色字, 去掉背景的那些特效」)。
   ══════════════════════════════════════════════════════════════════════ */

/* ── ① 字体与色板 ────────────────────────────────────────────────
   和第十二节(每天页)同一套值 —— 两页并排看时字体和墨色必须是一个调子。 */
body.cth-body{
  --cth-serif:"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC","Noto Serif SC",serif;
  --cth-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --cth-ink:#15181B;      /* 定稿色板: 深墨, ⛔ 不用纯黑(纯黑长文会发刺) */
  --cth-ink3:#5C636B;     /* 元信息: 出处 / 时长 / 编号。2026-08-02 由 #6E757D 加深(原来 4.07 不达标) */
  --cth-grn:#2A6E50;      /* 绿 = 进度、当前、动作 */
  --cth-gold:#8A6518;     /* 金 = 可点的经节、篇题那条线 */
  --cth-my:#7C3AED;       /* 紫 = 我写的东西 */
}

/* ── ② 篇题: 零底色 + 一条 34px 细金线 + 衬线大字 ──────────────────
   ⛔ 去掉青绿实底: 它是整页第一眼, 一块实色 + 圆角在这套衬线版式里过重,
      而且金色小字(#F0D68A)只有压在深底上才成立。 */
.mg-hero{
  background:none; color:inherit; border-radius:0;
  padding:2px 0 0; margin-bottom:26px; overflow:visible;
}
.mg-hero::before{
  content:''; display:block; width:34px; height:1.5px;
  background:var(--cth-gold); margin:0 0 15px;
}
.mg-no{
  font-family:var(--cth-sans); font-size:12px; font-weight:600;
  color:var(--cth-ink3); letter-spacing:.04em; margin-bottom:9px;
}
.mg-t{
  font-family:var(--cth-serif); font-size:21px; line-height:1.58;
  font-weight:600; letter-spacing:.01em; color:var(--cth-ink);
}

/* 主日页篇题同款 —— 两页是上下级关系, 头部不能一个实底一个不实底 */
.sd-hero{
  background:none; color:inherit; border-radius:0;
  padding:2px 0 0; margin-bottom:24px; overflow:visible;
}
.sd-hero::before{
  content:''; display:block; width:34px; height:1.5px;
  background:var(--cth-gold); margin:0 0 15px;
}
.sd-eyebrow{
  font-family:var(--cth-sans); font-size:12px; font-weight:600;
  color:var(--cth-ink3); letter-spacing:.04em; margin-bottom:9px;
}
.sd-t{
  font-family:var(--cth-serif); font-size:21px; line-height:1.58;
  font-weight:600; letter-spacing:.01em; color:var(--cth-ink);
}
/* 这段引言原来是白底上的半透明白字, 换到浅底必须给回实色 */
.sd-note{
  font-family:var(--cth-serif); font-size:14px; line-height:1.8;
  color:var(--cth-ink3); margin-top:13px;
}
.sd-note b{ color:var(--cth-ink); font-weight:600; }

/* ── ③ 正文改衬线 ─────────────────────────────────────────────────
   定稿的分寸: 【读的】走衬线, 【标的】(区标题/编号/时长/出处/按钮)留无衬线。
   ⛔ 所以这里不碰 .mg-lb/.sd-h/.md-s/.fd-src/.lrow-t —— 它们在定稿里
      对应 .zt/.ls/.src/.lt, 本来就是无衬线的小字。 */
.ol-t, .ol-r,                     /* 本篇纲目: 大点 + 末尾引用串 */
.fd-h, .fd-p,                     /* 白话讲一遍 */
.md-t,                            /* 讲台信息 / 本周诗歌 的标题 */
.rs-nm,                           /* 其它材料每一条的名字 */
.sd-dt, .sd-ol li, .sd-saybd,     /* 主日: 六天讲什么 / 主要真理 / 官方要点 */
.sd-vs p, .sy-demo p,             /* 主日: 祷读经节 / 官方申言示范 */
.sy-in{                           /* 主日: 申言稿四格 —— 定稿 .pfi 就是衬线 */
  font-family:var(--cth-serif);
}
/* 衬线的字面比无衬线小一点, 正文那几处补半档回来 */
.ol-t, .fd-p{ font-size:15px; }
.sy-in{ font-size:15.5px; }
.sd-vs p, .sy-demo p{ font-size:15px; }

/* ── ④ 媒体卡: 换成定稿播放器之后的收尾 ───────────────────────────
   .cth-au 那套样式在第十二节, 这里只补两页特有的间距。
   ⚠️ 原生 controls 自带 38px 高度和内建留白, 自定义播放器没有 —— 不补会贴太紧。 */
.md-card .cth-au{ margin-top:2px; }
.rs-i .cth-au{ margin-top:2px; }
/* 取不到时长/放不出来时, 别让那一行看着像坏了 */
.cth-au .audt .t1{ font-variant-numeric:tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════
   十五、Kris 点名的三处（2026-07-31）—— 都是「和定稿不一致」
   ⛔ 逐条从定稿原型抠出来的, 不是凭印象:
      .zt(区标题) / .fdt(白话小标题) / .dl+.dr(六天) 三段原样在下面注释里。
   ══════════════════════════════════════════════════════════════════════ */

/* ── ① 青绿小标题改回墨色 ─────────────────────────────────────────
   定稿的规矩:「三个语义色(绿=进度/金=经节/紫=我写的)之外一律墨色」。
   `.fd-h`/`.rs-nm` 原来用 var(--cth-d) 青绿 —— 那是站点主色, 铺在小标题上
   等于把「主色」这个含义用废(和 Kris 说过的「一排全刷绿=语义用废」同一个毛病)。
   ⭐ 定稿 `.fdt` 本身【没有 color】(继承墨色), 只有编号 `.fdn` 是绿的。 */
.fd-h{ color:var(--cth-ink); }
.rs-nm{ color:var(--cth-ink); }

/* ── ② 主日区标题: 去掉竖条, 和一篇页统一 ─────────────────────────
   定稿 `.zt{font-size:12px;font-weight:600;color:var(--ink2);padding-left:2px}`
   —— 纯文字小标签, ⛔ 零竖条零底色。
   而真实站 `.sd-h` 是「青绿字 + 3px 金色竖条 + 15px」, 一篇页 `.mg-lb` 却是
   「12.5px 灰字无竖条」——【同一套页面两种区标题】, 上下级页面必须一个样子。 */
.sd-h{
  font-family:var(--cth-sans); font-size:12.5px; font-weight:600;
  color:var(--cth-mute); letter-spacing:0;
  margin:0 0 11px; padding-left:0; border-left:0;
}

/* ── ③ 六天: 时间轴 → 定稿的 .dl/.dr(iOS inset grouped) ───────────
   定稿原样:
     .dl{background:var(--card);border-radius:14px;overflow:hidden}
     .dr{display:flex;gap:12px;padding:13px 15px}
     .dr+.dr::before{left:54px;right:0;height:1px}      ← 线从文字起, 不通栏
     .dn{27px 圆序号}  .dwk{11px 小字「周一」}  .dtt{14px 那天的主题}
     .dr.cur{background:var(--grn-w)}
   ⛔ 原来是左侧竖线的时间轴, 而且每行只有「周一」—— 认不出今天要读什么。 */
.tl{
  list-style:none; margin:0; padding:0;
  background:var(--paper); border-radius:12px; overflow:hidden;
  box-shadow:0 1px 2px rgba(20,45,45,.05);
}
.tl::before{ content:none; }          /* ⛔ 干掉原来那条左侧竖线 */
.tl-i{ position:relative; margin:0; padding:0; }
.tl-b{
  display:flex; align-items:center; gap:12px; position:relative;
  padding:13px 15px; text-decoration:none; color:inherit;
}
/* 分隔线从序号右缘起, 不通栏 —— 层级落在【组与组之间】不在每一行之间 */
.tl-i + .tl-i .tl-b::before{
  content:''; position:absolute; left:54px; right:0; top:0; height:1px;
  background:var(--cth-line);
}
.tl-n{
  flex:0 0 27px; height:27px; border-radius:50%;
  background:rgba(30,36,29,.055); color:var(--cth-ink3);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--cth-sans); font-size:12px; font-weight:600;
}
.tl-mid{ flex:1; min-width:0; }
.tl-wd{
  display:block; font-family:var(--cth-sans); font-size:11px; font-weight:600;
  color:var(--cth-ink3); margin-bottom:3px;
}
.tl-tp{
  display:block; font-family:var(--cth-serif); font-size:14px; line-height:1.55;
  color:var(--cth-ink);
}
.tl-st{
  flex:none; font-family:var(--cth-sans); font-size:11px; font-weight:600;
  color:var(--cth-ink3);
}
/* 读过的 / 今天 —— 绿 = 进度与当前(定稿里金绿紫各有分工, 别乱用) */
.tl-i.done .tl-n{ background:rgba(42,110,80,.12); color:var(--cth-grn); }
.tl-i.done .tl-st{ color:var(--cth-grn); }
.tl-i.today .tl-b{ background:rgba(42,110,80,.07); }
.tl-i.today .tl-n{ background:var(--cth-grn); color:var(--cth-on-fill); }
.tl-i.today .tl-wd, .tl-i.today .tl-st{ color:var(--cth-grn); }
/* 有底色的那行, 上下两条分隔线要让开(否则线压在色块上很脏) —— 定稿也是这么处理的 */
.tl-i.today .tl-b::before, .tl-i.today + .tl-i .tl-b::before{ background:transparent; }
/* 暂缺的那天(老特会没有晨兴): 不可点 */
.tl-i.off .tl-b{ cursor:default; }
.tl-i.off .tl-n, .tl-i.off .tl-wd, .tl-i.off .tl-st{ opacity:.5; }
/* 主日不是晨兴的第七天 —— 用金色区分(金在这套里是「另一类内容」) */
.tl-i.sun .tl-n{ background:rgba(138,101,24,.12); color:var(--cth-gold); }
.tl-i.sun .lgo{ flex:none; }
@media(hover:hover){ .tl-b[href]:hover{ background:var(--cth-soft); } }
.tl-b[href]:active{ background:var(--cth-soft); }

/* 六天: 状态(今天/已读/暂缺)跟在「周五」后面, 不做右侧独立标签 ——
   定稿 vWEEK 就是 `d.wk + " · 今天"` 这么写的。
   🩸 我先做成了 flex 末尾的右侧标签: 主题占三行时它垂直居中, 正好飘在正文中间挤着字。 */
.tl-hd{ display:flex; align-items:baseline; gap:7px; margin-bottom:3px; }
.tl-wd{ margin-bottom:0; }
.tl-st{ flex:none; }
/* 状态那几个字比「周五」再小半档 —— 它是注解, 不该和星期抢 */
.tl-i.today .tl-st, .tl-i.done .tl-st{ font-size:10.5px; }
.tl-i.today .tl-st::before, .tl-i.done .tl-st::before{ content:'· '; opacity:.55; }

/* 🩸 旧时间轴那一版的规则还活着, 和 inset grouped 打架 —— 一次收全。
   （我先只改了新类, 结果旧的 .tl-wd{flex:1} 把「今天」一路推到行尾,
     .tl-b 的白底+11px 圆角+阴影又让每行变回一张独立卡片。
     ⭐ 改造既有区块时: 先把老选择器【全列一遍】再动手, 别只写新规则。） */

/* ① 状态跟在「周五」后面, 不被推到行尾 */
.tl-hd .tl-wd{ flex:0 0 auto; }

/* ② 行不再是独立卡片 —— inset grouped 的层级落在【组与组之间】,
      每行各自带圆角和影子, 就又回到 Kris 批评过的「一屏五六块、反而没有层级」。 */
.tl-b, .tl-i.off .tl-b, .tl-i.sun .tl-b{
  background:none; border-radius:0; box-shadow:none;
}
/* 整行底色铺满, ⛔ 不带圆角(定稿 .dr.cur 就是整行) */
.tl-i.today .tl-b{ background:rgba(42,110,80,.07); }
.tl-i.sun .tl-b{ background:rgba(138,101,24,.045); }
.tl-i.off .tl-b{ background:rgba(30,36,29,.02); }

/* ③ 已读/暂缺那两行的「周X」跟着新色板走(旧规则把它改成了另一套灰) */
.tl-i.done .tl-wd{ color:var(--cth-ink3); font-weight:600; }
.tl-i.off .tl-wd{ color:var(--cth-ink3); }

/* ══════════════════════════════════════════════════════════════════════
   十六、纲目「经文 N 节 ⌄」就地展开 —— 照【定稿原型】的 .olvb / .olv
   定稿原样:
     .olvb{inline-flex;gap:5px;background:var(--gold-w);border-radius:14px;
           padding:3px 10px;margin:7px 0 0;11.5px;600;color:var(--gold)}
     .olvb.on i{transform:rotate(180deg)}
     .olv{background:rgba(30,36,29,.035);border-radius:10px;padding:12px 13px;margin:9px 0 0}
     .olvr{flex;gap:9px;serif;13.5px/1.78}  .olvn{sans;11.5px;600;gold;min-width:52px}
   ⚠️ 这是 svkit 阅读页, 颜色一律走它的变量 —— 四套配色(纸白/米黄/护眼/夜间)都不能坏。
   ⚠️ 按钮的文字是 content:attr(data-n) 生成的, ⛔ 不许改成 DOM 文本 ——
      #app 里多一个文本节点, 后面所有划线笔记的偏移就都顶掉了(见 olv.js 文件头)。
   ══════════════════════════════════════════════════════════════════════ */

.cth-olvb{
  /* ⚠️ 定稿是 `<br>` + inline-flex; 这里挂在 .cn 里, .vt 是 inline —— 用块级 flex
     + fit-content 让它自己另起一行又不撑满整行(效果同定稿, 少一个 <br>)。 */
  display:flex; width:fit-content; align-items:center; gap:5px;
  background:rgba(138,101,24,.11); color:var(--gold, #8A6518);
  border:0; border-radius:14px; padding:3px 10px; margin:7px 0 0;
  font:inherit; font-family:var(--cth-sans, -apple-system, sans-serif);
  font-size:11.5px; font-weight:600; line-height:1.5; cursor:pointer;
}
.cth-olvb::before{ content:attr(data-n); }
.cth-olvb:focus-visible{ outline:2px solid var(--gold, #8A6518); outline-offset:2px; }
.cth-olvb i{ font-style:normal; line-height:0; display:flex; transition:transform .2s; }
.cth-olvb.on i{ transform:rotate(180deg); }
@media(hover:hover){ .cth-olvb:hover{ background:rgba(138,101,24,.17); } }
@media (prefers-reduced-motion:reduce){ .cth-olvb i{ transition:none; } }

/* 经文块 —— 定稿里全站唯一允许带底色的地方(它是插进来的引用, 要和纲目正文分开)。
   ⭐ 用中性灰的半透明: 四套主题下都看得出是一块, 又不会像写死的 #f5f5f5 那样在夜间发白。 */
.cth-olv{
  background:rgba(128,128,128,.09); border-radius:10px;
  padding:12px 13px; margin:9px 0 0;
}
.cth-olvr{
  display:flex; gap:9px;
  font-family:var(--cth-serif, serif); font-size:13.5px; line-height:1.78;
  margin:0 0 7px;
}
.cth-olvr:last-child{ margin:0; }
.cth-olvn{
  flex:0 0 auto; font-family:var(--cth-sans, -apple-system, sans-serif);
  font-size:11.5px; font-weight:600; color:var(--gold, #8A6518);
  padding-top:2px; min-width:52px; font-variant-numeric:tabular-nums;
}
.cth-olvt{ flex:1; min-width:0; }
.cth-olv-wait{
  margin:0; font-family:var(--cth-sans, -apple-system, sans-serif);
  font-size:12px; color:var(--soft, #7d8f8f);
}
/* 夜间: 金色底要提亮一档, 否则在深底上几乎看不见 */
html[data-sv-theme="night"] .cth-olvb{ background:rgba(220,183,101,.16); }
@media(hover:hover){ html[data-sv-theme="night"] .cth-olvb:hover{ background:rgba(220,183,101,.24); } }

/* ══════════════════════════════════════════════════════════════════════
   十七、页眉与工具条【服务端直出】—— 根治「加载慢 / 工具条不统一 / 朗读又冒出来」
   ──────────────────────────────────────────────────────────────────────
   🩸 病根（三个症状同一个原因）:
      工具条是 svkit 建的, 建完 cthui.js 再【事后改造】(摘朗读、插目录/语言/字号)。
      于是用户依次看到: ①青绿空白条 ②svkit 原生工具条(带「朗读」「书签」)
      ③改造后的定稿工具条 —— 慢、闪、每次看到的还不一样。
      而页眉那片青绿空白, 正是 .bar 未被接管时我让它「藏内容+铺主色」造出来的。
   ⭐ 正解(也是我早写进笔记却没照做的那条):【去掉 X 要从源头去掉, 别用 JS 事后摘】
      → 工具条由服务端直出成【最终形态】, svkit 那套 #svtb 永久隐藏、只借它的功能。
      → 页眉不再藏内容, 服务端就把「篇目 / 标题 / 前后」按最终样子摆好。
   ══════════════════════════════════════════════════════════════════════ */

/* ── ① svkit 自己的工具条不再露面 ────────────────────────────────
   ⛔ 不能 display:none —— cthui 要借它的按钮(搜索/亮光/字号/更多)派发点击。
      挪出视口即可, svkit 自己也是这么藏原按钮的。 */
body.cth-read #svtb, body.cth-body #svtb{
  position:absolute !important; left:-9999px !important; top:0 !important;
  visibility:hidden !important; height:0 !important;
}

/* ── ② 直出的工具条: 尺寸与 svkit 的 #svtb 一比一 ──────────────── */
.cth-tb{
  position:sticky; top:56px; z-index:29;
  display:flex; gap:0; height:55px; padding:0 3px;
  background:var(--paper, #fbf7ee);
  border-bottom:1px solid var(--line, #e6dcc8);
}
.cth-tb-b{
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:0 1px; background:none; border:0; cursor:pointer;
  color:var(--ink, #2a2622); font:inherit;
}
.cth-tb-b svg{ width:23px; height:23px; display:block; }
.cth-tb-b .lbl{
  font-family:var(--cth-sans, -apple-system, sans-serif);
  font-size:10.5px; font-weight:500; color:var(--soft, #6b6258); line-height:1;
}
.cth-tb-b:active{ opacity:.55; }
/* 亮光有条数时的角标 —— 和 svkit 的 .svtb-badge 同款(紫=我写的) */
.cth-tb-b{ position:relative; }
.cth-tb-badge{
  position:absolute; top:2px; left:50%; margin-left:4px;
  min-width:15px; height:15px; padding:0 4px; border-radius:8px;
  background:var(--cth-my, #7C3AED); color:var(--cth-on-fill);
  font-family:var(--cth-sans, sans-serif); font-size:10px; font-weight:700;
  line-height:15px; text-align:center;
}
/* 工具条跟着 svkit 的收起手势一起收起 */
/* 🔴 2026-08-02 Kris:「去看恢复本圣经的工具条, 隐藏起来的时候怎么把它召唤出来?
   不是有一个下拉按钮吗? 你这里有吗?」—— 没有。
   🩸 根因: svkit 那个箭头 `#svPull` 是【挂在它自己的 #svtb 上】的, 而七次特会把 #svtb
      整个挪出了视口(工具条改成服务端直出的 .cth-tb), 箭头当然跟着一起没了;
      再加上这里原来写的是 `display:none` —— 工具条一收起, 页面上【一个入口都不剩】。
   ✅ 照 svkit 那一套原样做一个(同样 52×19、下两角圆、贴在工具条下沿正中), 只换前缀。
   ⛔ 不用 display:none 了: 改成上移, 和 svkit 的 `#svtb{transform:translateY(-100%)}` 一致,
      这样箭头能贴着它一起动。 */
.cth-tb{ transition:transform .24s cubic-bezier(.32,.72,0,1); }
body.sv-tbhide .cth-tb{ transform:translateY(-100%); }
.cth-pull{
  position:absolute; left:50%; bottom:-19px; transform:translateX(-50%); z-index:2;
  width:52px; height:19px; padding:0; border:0; border-radius:0 0 11px 11px;
  background:var(--paper, #fbf7ee); color:var(--soft, #6b6258); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,.13);
}
.cth-pull svg{ width:17px; height:17px; }
/* 工具条露着时不用这个箭头(和 svkit 同一条规矩): 只在收起时出现 */
body:not(.sv-tbhide) .cth-pull{ display:none; }
.cth-pull:active{ filter:brightness(.94); }

/* ── ③ 页眉: 未被 svkit 接管时也是【最终样子】, ⛔ 不再藏内容铺色块 ──
   svkit 接管后会给它加 .sv-navbar 并自己重排, 这里的规则只作用于接管前。 */
body.cth-read .bar:not(.sv-navbar){
  position:sticky; top:0; z-index:30;
  height:56px; box-sizing:border-box; padding:7px 10px;
  background:var(--cth-bar, #347E7F); color:#fff;
  display:flex; align-items:center; gap:8px;
  border-bottom:0;
}
body.cth-read .bar:not(.sv-navbar) > *{ visibility:visible; }
/* 繁简小开关和 A± 是 svkit 的旧控件, 定稿里不在页眉上 —— 接管前后都不出现 */
body.cth-read .bar:not(.sv-navbar) .seg,
body.cth-read .bar:not(.sv-navbar) .bar-ctrl{ display:none !important; }
/* 🔴 2026-08-02 Kris:「这里不叫篇目, 很容易误导人, 和下面的目录弄混,
   直接换成返回按钮, 不要有背景框的。」
   ⭐ 只留一个左箭头: 顶栏左上角的箭头是全平台通认的「返回」, 不需要文字;
      文字「篇目」和工具条第一个键「目录」并排出现, 确实分不清谁是谁。
   ⛔ 不给底色/边框(他明说不要背景框) —— 靠 44px 的点击热区保证好按。 */
body.cth-read .bar:not(.sv-navbar) .topback{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:40px; height:44px; margin-left:-8px;   /* 负边距: 图标视觉上对齐屏幕左边距 */
  color:#fff; text-decoration:none; background:none; border:0;
}
body.cth-read .bar:not(.sv-navbar) .topback .tb-ic{ width:24px; height:24px; }
body.cth-read .bar:not(.sv-navbar) .topback:active{ opacity:.6; }
body.cth-read .bar:not(.sv-navbar) .bar-nav{
  flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:6px;
}
/* 接管前用直出的两行标题(.cth-hd2), svkit 那两个下拉按钮先不出现 ——
   它们的文字是占位的「…」, 露出来就是一行省略号。 */
body.cth-read .bar:not(.sv-navbar) .dd{ display:none; }
/* 🩸 2026-08-02: 这里原来只写 flex:none —— 但 .bar-nav 里那两个下拉(.dd)虽然 display:none,
   它自己仍按【内容最大宽度】撑到 370px, 于是 40+330+370 溢出 390 的顶栏,
   两个翻页键被 overflow:hidden 裁到屏幕外 ⇒ 首屏看不到 ‹ ›, 等 svkit 接管才冒出来(又一处闪)。
   ✅ 明确给它 flex:0 0 auto + width:auto, 让它只占两个键的宽度。 */
body.cth-read .bar:not(.sv-navbar) .bar-nav{ flex:0 0 auto; width:auto; gap:0; }
body.cth-read .bar:not(.sv-navbar) .iconbtn{
  flex:none; background:none; border:0; color:#fff; font-size:20px; cursor:pointer;
  width:32px; height:32px; line-height:1;
}
body.cth-read .bar:not(.sv-navbar) .ddmenu{ display:none; }
/* 直出的两行标题(服务端填好, 接管后 svkit 用自己的 #svTitle) */
/* 🔴 2026-08-02 Kris:「总是先出现第一张图, 然后过了几秒钟再变成第二张图」——
   顶栏最后一处闪: 直出的 .cth-hd2 是【纯两行文字】, 而 svkit 7.9 秒后接管时换成
   `<button id="svTitle" class="two">…<svg>⌄</svg></button>`(标题旁多一个下拉箭头)。
   🩸 svkit 那个按钮是【无条件新建】的(bar.appendChild), 没法让它复用我们直出的节点,
      所以只能让直出版【长得和它一模一样】—— 同款 ⌄、同样位置, 交接时看不出来。
   ⚠️ 文字两行仍包在 .hd2-lines 里, cthfix.js 的跑马灯选择器(.cth-hd2 i)不受影响。 */
.cth-hd2{
  flex:1; min-width:0; color:#fff; line-height:1.25;
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.cth-hd2 .hd2-lines{ min-width:0; text-align:center; }
.cth-hd2 .hd2-ar{ flex:none; width:18px; height:18px; opacity:.9; }
.cth-hd2 b{ display:block; font-size:13px; font-weight:400; opacity:.9; }
/* 长篇名【不换行, 来回滚】(Kris)。动画帧 @keyframes svmq 与 .mq 的写法都在 svkit.css 里,
   ⛔ 不重复造 —— 这里只把容器改成单行, 由 cthfix.js 量出溢出量后加 .run。 */
.cth-hd2 i{
  display:block; font-size:16px; font-weight:600; font-style:normal;
  white-space:nowrap; overflow:hidden;
}
.cth-hd2 i .mq{ display:inline-block; white-space:nowrap; font-style:normal; }
.cth-hd2 i.run .mq{ animation:svmq var(--mqd,12s) linear infinite; }
@media(prefers-reduced-motion:reduce){ .cth-hd2 i.run .mq{ animation:none; } }
.bar.sv-navbar .cth-hd2{ display:none; }      /* svkit 接管后让位给它自己的标题 */

/* ══════════════════════════════════════════════════════════════════════
   十八、Kris 2026-07-31 实测反馈 · 视觉一批（字号 / 颜色 / 对齐）
   ⭐ 一条贯穿全部的根因: 板块标题、篇题这些【写死了 px】, 而正文跟着用户字号缩放。
      Kris 把字号调到 21 之后, 正文 20px 而「纲目」还是 17.5px —— 标题比正文还小,
      当然「不够醒目」。→ 这一节里凡是随正文走的, 一律改成 em。
   ══════════════════════════════════════════════════════════════════════ */

/* ── ① 板块标题(纲目/晨兴喂养/信息选读): 跟着正文放大 + 加深 ────────
   Kris:「纲目这一层级的字太小了, 不够醒目」「颜色太浅, 要深色高对比」 */
#app .h.h1 .cn{
  font-size:1.12em !important;      /* 比正文大一档, ⛔ 不再写死 px */
  font-weight:700 !important;
  letter-spacing:0;
}
#app .h.h1{ margin:2.4em 0 1em !important; }
/* 分色保留(Kris 要过「每个分类颜色不一样」), 但一律换成【深色】:
   ⛔ 晨兴喂养不再用金色 —— 和正文里可点的经节撞色(Kris 点名)。 */
#app .h.h1[data-sec="ol"]   .cn,
#app .h.h1[data-sec="纲目"] .cn{ color:var(--cth-sec-ol) !important; }     /* 深靛蓝 */
#app .h.h1[data-sec="mr"]   .cn,
#app .h.h1[data-sec="晨兴喂养"] .cn{ color:var(--cth-sec-feed) !important; } /* 深墨绿, 原来是金色 */
#app .h.h1[data-sec="rd"]   .cn,
#app .h.h1[data-sec="信息选读"] .cn{ color:var(--cth-sec-read) !important; } /* 深砖红 */

/* ── ② 篇题: 换行左对齐(⛔ 不居中) + 去掉上方那条装饰线 ──────────
   Kris:「篇名换行要左对齐, 和上面的篇名对齐」「把那个装饰用的线去掉」 */
#app .h.h0{
  text-align:left !important;
  font-size:1.18em !important; font-weight:700 !important;
  line-height:1.55 !important;
}
#app .h.h0::before, #app .h.h0::after{ content:none !important; }   /* 装饰金线 */

/* ── ③ 页内那份「…·第7天 / 第二周 周一」整块【去掉】 ──────────────
   Kris:「下面画圈的部分去掉, 重复了」——「第二周　周一」实测在页面上出现【三次】:
     ① 顶栏(svkit 的两行标题)  ② 这里的 .svmsg-hd  ③ 正文里的 .h.h6
   保留 ①(他要的, 字要更大) 和 ③(在音频与纲目之间, 起分段作用), 去掉 ②。
   ⭐ 为什么用 CSS 而不是从源头: 它由 svkit 的 `titleMode:'two'` 触发, 而那个配置
     同时管着顶栏的两行标题(正是 ① 要保留的那份), 去不得。
     CSS 写在 <head> 里、渲染前就生效, ⛔ 不是「JS 加完再 remove」那种会闪的做法。 */
body.cth-mr .svmsg-hd{ display:none !important; }
/* 完整纲目页(content.html)【保留】这一块, 而且字要更大 ——
   Kris 对着那一页说「这里还是保留吧, 划线部分的字大一点」。
   ⚠️ 两页的 body class 一模一样(m-cn cth-read), 只能靠 mr 页专属的 .cth-mr 分开。 */
body.cth-read:not(.cth-mr) .svmsg-hd .mh-no{
  font-size:calc(var(--fs, 17px) * .82) !important; font-weight:700 !important;
  color:var(--cth-mhno) !important; margin-bottom:8px !important;
}
body.cth-read:not(.cth-mr) .svmsg-hd .mh-cn{
  font-size:calc(var(--fs, 17px) * 1.25) !important; font-weight:800 !important;
}
/* 「第一周　周五」也要醒目 */
#app .h.h6{
  font-size:1.15em !important; font-weight:700 !important;
  color:var(--cth-ink, #15181B) !important;
}

/* ── ④ 经节引用改【蓝】, 经文保持【红】 ────────────────────────
   Kris:「下面的经节内容是红色, 经节用蓝色字」。
   ⚠️ 蓝要比板块标题那个深靛蓝亮一档, 两者才分得开。 */
#app a.bref{
  /* ⭐ 走变量, 四套主题各一个值 —— 夜间 #2563EB 压黑底只有 3.47, 读着累。 */
  color:var(--cth-vsn) !important;
  text-decoration-color:rgba(37,99,235,.45) !important;
  text-decoration-color:color-mix(in srgb, var(--cth-vsn) 45%, transparent) !important;
}
/* ⛔ 这里原来有两条 `.v.vvs .vt` / `.v.vvs .vn` —— 【死规则, 已删】:
   .vn/.vt 是【圣经阅读器】的结构(节号+节文两个 span), 而晨兴喂养这一条的真实 DOM 是
     <p class="v vvs"><a class="bref">创六8~9</a> 经文…<span class="en">…</span></p>
   压根没有 .vn/.vt, 所以从来没生效过。经节号的蓝色改在上面 `.vvs a.bref` 那条。
   ⭐ 又一次印证: 写选择器前先把真实 DOM 打出来看。 */

/* ── ⑤ 正文一律深色高对比 ─────────────────────────────────────
   Kris 说过两次「文字普遍有点浅」「都用深色字, 要和背景颜色高对比」。 */
body.cth-read #app .v .vt{ color:var(--cth-ink, #15181B); }
/* 英文那一列: 比中文淡一档, 但仍要跟着主题走 ——
   原来写死 #2F3A42, 夜间就是深灰压黑底(看不见)。⭐ 用 --cth-en 一处定义四套。 */
body.cth-read #app .v .en, body.cth-read #app .enline{ color:var(--cth-en) !important; }
/* 「参读」那行是出处, 该比正文小 —— Kris:「上面参读的字不用那么大」 */
#app .v.vref, #app .vref, #app .v[data-k="ref"]{
  font-size:.8em !important; color:var(--cth-ink3, #6E757D) !important;
}

/* ── ⑥ 「经文 N 节」展开区: 字号跟正文 + 左对齐 ────────────────
   Kris:「这些经文的字太小了, 而且没左对齐」 */
.cth-olvr{ font-size:.92em !important; align-items:flex-start; }
.cth-olvn{
  font-size:.72em !important; min-width:0 !important;
  flex:0 0 auto; padding-top:.28em;
}
.cth-olvt{ text-align:left !important; text-indent:0 !important; color:var(--cth-ink, #15181B); }

/* ── ⑦ 我的亮光: 去掉那条紫竖线(Kris 点名) ───────────────────── */
.lg-box, #cthLg{ border-left:0 !important; padding-left:0 !important; }
/* 与奉献卡同宽(实测 .dnt-card 是 386/414, 左右各 14; 而 .wrap 的内边距是 24)
   → 左右各借 10px 出去。⚠️ 用负 margin 而不是写死宽度, 换屏幕宽度照样对齐。 */
body.cth-read #cthLg{ margin-left:-10px !important; margin-right:-10px !important; }
@media(max-width:380px){ body.cth-read #cthLg{ margin-left:-6px !important; margin-right:-6px !important; } }

/* ── 十八节·修正 ────────────────────────────────────────────────
   🩸 两处没打中:
   ① 用 em 不管用 —— 正文字号是 svkit 写在 <html> 上的 `--fs`(用户调字号改的就是它),
      而 .h1/.h0 的父级还是 16px, 1.12em 只有 17.9px, 照样比正文小。
      ✅ 一律 calc(var(--fs) * n), 这才是"跟着正文走"。
   ② data-sec 的真实取值是 ol / feed / read, 我按「mr / 中文」写的选择器全落空,
      所以晨兴喂养还是金色。⭐ 改样式前先把属性的真实值打出来看。 */
#app .h.h1 .cn{ font-size:calc(var(--fs, 17px) * 1.08) !important; }
#app .h.h1 .en{ font-size:calc(var(--fs, 17px) * .8) !important; }
#app .h.h0{ font-size:calc(var(--fs, 17px) * 1.15) !important; }
#app .h.h0 .cn{ font-size:1em !important; }
#app .h.h6{ font-size:calc(var(--fs, 17px) * 1.06) !important; }
/* .svmsg-hd 已整块隐藏(见第 ③ 节), 这里不再给字号 */

/* 板块分色 —— 按【真实的 data-sec】: ol / feed / read
   🔴 原来这三条写死色 + !important, 特异性 (0,4,1) 把上面那批
      `html[data-sv-theme=night] #app .h[data-sec=ol]`(0,3,1, 无 important) 全压死了 ——
      夜间实测对比度只有 1.59 / 2.27 / 2.34, 三个板块标题等于隐形。改走变量。 */
#app .h.h1[data-sec="ol"]   .cn{ color:var(--cth-sec-ol) !important; }     /* 纲目: 深靛蓝 */
#app .h.h1[data-sec="feed"] .cn{ color:var(--cth-sec-feed) !important; }   /* 晨兴喂养: 深墨绿(⛔ 原来是金色, 和经节撞) */
#app .h.h1[data-sec="read"] .cn{ color:var(--cth-sec-read) !important; }   /* 信息选读: 深砖红 */

/* 展开经文也跟着正文缩放 */
.cth-olvr{ font-size:calc(var(--fs, 17px) * .88) !important; }
.cth-olvn{ font-size:calc(var(--fs, 17px) * .66) !important; }
/* 「参读」那一行 */
#app .v.vrd .cn, #app .vrdg{ font-size:calc(var(--fs, 17px) * .82) !important; }

/* ══════════════════════════════════════════════════════════════════════
   十九、播放器重做（Kris:「设计的不好看, 不要那么多没用的线, 进度条可以稍微粗一点,
        在播放键后面的位置, 两个音频要区分开, 播放键的颜色可以不一样, 但是要统一」）
   ⭐ 形态统一(同一套圆键+同一根进度条), 只有【色相】不同:
      五分钟好时光 = 绿   /   今日晨兴音频 = 深青
   ══════════════════════════════════════════════════════════════════════ */

/* ⛔ 标题后面那条装饰横线去掉 —— 就是「没用的线」 */
.cth-au-t::after{ content:none !important; }
.cth-au-t{
  font-size:calc(var(--fs, 17px) * .82) !important; font-weight:700;
  margin-bottom:10px; display:block;
}

/* 一行: 圆播放键 + 右边一根粗进度条(时间压在两端) */
.cth-au .aud{ display:flex; align-items:center; gap:13px; margin:0; }
.cth-au .play{
  flex:0 0 38px; height:38px; border-radius:50%;
  border:0; background:var(--cthau-c, #2A6E50); color:var(--cth-on-fill);
  display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer;
  box-shadow:0 1px 4px rgba(20,45,45,.18);
  transition:transform .15s;
}
.cth-au .play:active{ transform:scale(.93); }
.cth-au .play svg{ width:15px; height:15px; }
.cth-au .audm{ flex:1; min-width:0; }
/* 进度条: 5px 圆角实心, ⛔ 不再是那根 1px 细线 */
.cth-au .audb{
  height:5px !important; border-radius:3px; overflow:hidden; cursor:pointer;
  background:rgba(128,128,128,.22) !important; opacity:1 !important;
  margin:0 0 5px !important; position:relative;
}
.cth-au .audb::before{ content:none !important; }
.cth-au .audb i{
  display:block; height:100%; width:0; border-radius:3px;
  background:var(--cthau-c, #2A6E50); opacity:1;
}
.cth-au .audt{
  display:flex; justify-content:space-between;
  font-family:var(--cth-sans, sans-serif); font-size:11px;
  color:var(--cth-ink3, #6E757D); font-variant-numeric:tabular-nums;
}

/* ── 两块的色相 ── 形态完全一样, 一眼能分开是哪一段 */
.cth-au[data-k="five"]{ --cthau-c:#2A6E50; }   /* 五分钟好时光: 绿 */
.cth-au[data-k="mra"] { --cthau-c:#1F6470; }   /* 今日晨兴音频: 深青 */
.cth-au[data-k="five"] .cth-au-t{ color:#2A6E50 !important; }
.cth-au[data-k="mra"]  .cth-au-t{ color:#1F6470 !important; }
/* 夜间提亮, 否则深色底上两个都发黑 */
html[data-sv-theme="night"] .cth-au[data-k="five"]{ --cthau-c:#5FB392; }
html[data-sv-theme="night"] .cth-au[data-k="mra"] { --cthau-c:#5AA9B8; }
html[data-sv-theme="night"] .cth-au[data-k="five"] .cth-au-t{ color:#5FB392 !important; }
html[data-sv-theme="night"] .cth-au[data-k="mra"]  .cth-au-t{ color:#5AA9B8 !important; }

/* 「完成今天追求」挪到前/后一天之上(见 cthfix.js), 这里去掉它原来贴底的浮动感 */
.cth-donebar{ position:static !important; margin:26px 0 8px !important; padding:0 !important; }

/* 长按「记下亮光」写进来时闪一下, 让用户看见「记到哪儿了」 */
.lg-box.lg-flash{ animation:cthLgFlash 1.2s ease; }
@keyframes cthLgFlash{
  0%,100%{ background:transparent; }
  25%{ background:rgba(124,58,237,.14); }
}
.lg-box{ border-radius:10px; transition:background .3s; }
@media (prefers-reduced-motion:reduce){ .lg-box.lg-flash{ animation:none; } }

/* ══════════════════════════════════════════════════════════════════════
   二十、照定稿把面板分家 + 目录改左侧抽屉（Kris 2026-07-31）
   定稿原样(proto 的 shHTML):
     · 语言键 → 【语言】(中文/中英/EN) + 【字体】(简/繁)
     · 字号键 → 【字号】(A− 值 A+) + 【配色】(白/米黄/护眼/夜间)
     · 目录键 → drawer(true) = 【左侧抽屉】, ⛔ 不是底部 sheet
   ⭐ 做法: svkit 的设置面板照旧打开(不重建、零风险), 只按当前入口【显示该显示的那两组】。
      分组由 cthtb.js 按 .svcap 的文字打上 data-cth-sec, ⛔ 不用 nth-of-type(顺序会变)。
   ⛔ 只作用在 7cth 这两页(body.cth-read/.cth-body), 不影响其他八个版本。
   ══════════════════════════════════════════════════════════════════════ */
body.cth-set-aa   #svSheet .svsec[data-cth-sec="lang"],
body.cth-set-aa   #svSheet .svsec[data-cth-sec="sc"],
body.cth-set-lang #svSheet .svsec[data-cth-sec="th"],
body.cth-set-lang #svSheet .svsec[data-cth-sec="fs"]{ display:none !important; }

/* ── 目录: 底部 sheet → 左侧抽屉(定稿 .drw: 左侧、73% 宽、从左滑入) ── */
body.cth-read .cth-sheet.cth-drawer,
body.cth-body .cth-sheet.cth-drawer{
  left:0; right:auto; bottom:0; top:0;
  width:80%; max-width:300px; height:100%; max-height:100%;
  border-radius:0 14px 14px 0;
  transform:translateX(-101%);
  transition:transform .26s cubic-bezier(.32,.72,0,1);
  padding:0 0 calc(10px + env(safe-area-inset-bottom, 0px));
  overflow-y:auto;
  box-shadow:4px 0 24px rgba(15,45,45,.18);
}
body.cth-read .cth-sheet.cth-drawer.on,
body.cth-body .cth-sheet.cth-drawer.on{ transform:translateX(0); }
/* 抽屉里不需要那条「往下拖」的握把 */
.cth-sheet.cth-drawer .cth-grip{ display:none; }
.cth-sheet.cth-drawer .cth-sheet-t{
  margin:0; padding:16px 18px 10px;
  border-bottom:1px solid var(--line, #e6dcc8);
  font-size:13px; position:sticky; top:0; background:inherit; z-index:1;
}
.cth-sheet.cth-drawer .cth-menu{ padding:6px 8px 10px; }

/* ══════════════════════════════════════════════════════════════════════
   二十一、一篇页「本篇纲目」重排（Kris:「这种排版感觉好丑, 看起来也不清楚,
        而且经文也查看不了, 还占太多位置了, 想办法设计一个更方便用户阅读的」）
   ⭐ 照定稿 vWEEK 的 .ol/.onum/.otx: 编号单独一列、正文一列, 行距收紧。
   ⭐ 「经文查看不了」的根因在服务端 strip_tags 掉了经节链接 —— 已改成保留(见 Cth::msg)。
   ══════════════════════════════════════════════════════════════════════ */
.ol-card{ padding:6px 15px !important; }
.ol-i{
  display:flex; gap:10px; align-items:baseline;
  padding:11px 0 !important;                 /* 原来 14px 上下, 收紧 */
}
.ol-n{
  flex:0 0 auto; min-width:1.5em;
  font-family:var(--cth-serif, serif); font-weight:700;
  font-size:15px; color:#1A3A6B;             /* 和纲目板块标题同一个深靛蓝 */
  line-height:1.7;
}
.ol-t{
  flex:1; min-width:0;
  font-family:var(--cth-serif, serif);
  font-size:15px; line-height:1.72;          /* 原来 1.86, 收紧一档 */
  letter-spacing:0; color:var(--cth-ink, #15181B);
}
/* 经节: 蓝色可点(和晨兴页一致), 点开就地看经文 */
.ol-t a.bref{
  color:var(--cth-vsn); text-decoration:underline;
  text-decoration-style:dotted; text-underline-offset:3px;
}
/* 末尾那串引用比正文小半档, 但不再是死文字 */
.ol-t{ word-break:normal; }

/* ══ 祷研背讲: 这一篇的图 + 教学入口 (2026-08-01 Kris) ═══════════════════════
   「点进去就有这些图片, 把这些弄到我们网站, 然后对应好」——118 张已落地 static/7cth/dyimg/。
   ⛔ 不再套白卡片(他同一批说的「不要白的背景框套白的背景框」): 图直接排在板块里, 横着滑。 */
.mg-lb-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.mg-help{ font-size:13px; font-weight:500; color:var(--cth-teal,#1c7b7c); text-decoration:none;
  white-space:nowrap; letter-spacing:0; }
.mg-help:active{ opacity:.6; }
.dyi-strip{ display:flex; gap:10px; overflow-x:auto; padding:2px 0 10px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.dyi-strip::-webkit-scrollbar{ display:none; }
.dyi-th{ flex:0 0 auto; scroll-snap-align:start; padding:0; border:0; background:none; cursor:pointer;
  border-radius:10px; overflow:hidden; line-height:0;
  box-shadow:0 1px 3px rgba(20,40,40,.10), 0 0 0 1px rgba(20,40,40,.06); }
.dyi-th img{ display:block; height:132px; width:auto; max-width:78vw; object-fit:cover; }
.dyi-th:active{ transform:scale(.985); }
/* 点开看大图: 全屏、可捏合放大 —— 这些图是纲目表格, 缩略图看不清字 */
.dyi-lb{ position:fixed; inset:0; z-index:9998; background:rgba(12,20,20,.92);
  display:none; align-items:center; justify-content:center; }
.dyi-lb.on{ display:flex; }
.dyi-lb img{ max-width:100%; max-height:100%; object-fit:contain; }
.dyi-x{ position:absolute; top:calc(10px + env(safe-area-inset-top,0px)); right:12px;
  width:38px; height:38px; border:0; border-radius:50%; background:rgba(255,255,255,.14);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.dyi-x svg{ width:20px; height:20px; }

/* ══ 「过祷研背讲的生活」教学页 /7cth/psrp ══════════════════════════════════
   5 段官方教学, 全站只此一份(Kris:「不要每次祷研背讲的都放」)。 */
.ps-hero{ padding:18px 2px 4px; }
.ps-lead{ margin:0 0 8px; font-size:15.5px; line-height:1.85; color:var(--cth-ink,#1b2626); }
.ps-note{ margin:0; font-size:13.5px; line-height:1.8; color:var(--cth-mute,#7b8a8a); }
.ps-item{ margin:22px 0 0; }
.ps-hd{ display:flex; align-items:flex-start; gap:11px; margin:0 0 10px; }
.ps-n{ flex:0 0 auto; width:24px; height:24px; margin-top:2px; border-radius:50%;
  background:var(--cth-teal,#1c7b7c); color:var(--cth-on-fill); font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
.ps-tx{ flex:1; min-width:0; }
.ps-t{ margin:0; font-size:17px; font-weight:700; line-height:1.5; color:var(--cth-ink,#1b2626); }
.ps-s{ margin:3px 0 0; font-size:13.5px; line-height:1.7; color:var(--cth-mute,#7b8a8a); }
.ps-v{ display:block; width:100%; border-radius:12px; background:#0d1717;
  box-shadow:0 1px 3px rgba(20,40,40,.10), 0 0 0 1px rgba(20,40,40,.06); }
.ps-empty{ color:var(--cth-mute,#7b8a8a); font-size:14px; padding:30px 0; text-align:center; }

/* ══════════════════════════════════════════════════════════════════════
   一周主页重排 (2026-08-01, Kris 确认过结构)
   一篇 = 一周。第一屏只留【今天】和【每天】; 六样参考材料收进折叠区。
   ⛔ 统一规矩: 一个板块 = 一个容器 + 内部分隔线, 【不再白框套白框】。
   ══════════════════════════════════════════════════════════════════════ */

/* ① 「今天」直达 —— 这一页唯一的重色块, 一眼就知道该点哪 */
.wk-today{ display:flex; align-items:center; gap:12px; margin:2px 0 22px; padding:16px 18px;
  border-radius:14px; text-decoration:none; color:var(--cth-on-fill);
  background:linear-gradient(135deg,#1c7b7c 0%,#186a6b 100%);
  box-shadow:0 6px 18px rgba(24,106,107,.22); }
.wk-today:active{ transform:translateY(1px); }
.wk-tl{ flex:1; min-width:0; }
.wk-eyebrow{ display:block; font-size:12.5px; letter-spacing:.08em; opacity:.82; margin-bottom:3px; }
.wk-tt{ display:block; font-size:17px; font-weight:700; line-height:1.5; }
.wk-go{ flex:0 0 auto; width:20px; height:20px; opacity:.9; }

/* ② 「每天」容器里新增的两种行 */
.tl-open .tl-b{ cursor:default; }
.tl-bcol{ display:block; }
.tl-note{ font-size:12.5px; color:var(--cth-mute,#7b8a8a); margin-left:9px; font-weight:400; }
/* 当天有申言示范的小标记 —— 只是个提示, 点整行进去看 */
.tl-dm{ flex:0 0 auto; display:flex; align-items:center; color:var(--cth-teal,#1c7b7c); opacity:.62; }
.tl-dm svg{ width:16px; height:16px; }

/* ③ 「这一周的材料」折叠区 */
.wk-more{ margin:24px 0 6px; background:var(--paper); border-radius:14px; overflow:hidden;
  box-shadow:0 1px 3px rgba(20,40,40,.08), 0 0 0 1px rgba(20,40,40,.05); }
.wk-mh{ display:flex; align-items:center; gap:10px; width:100%; padding:15px 16px;
  border:0; background:none; font-family:inherit; color:var(--cth-ink,#1b2626); text-align:left; cursor:pointer; }
.wk-mh:active{ background:var(--cth-soft); }
.wk-mt{ flex:1; min-width:0; font-size:16px; font-weight:600; }
.wk-mn{ flex:0 0 auto; font-size:13px; color:var(--cth-mute,#7b8a8a); }
.wk-ma{ flex:0 0 auto; width:19px; height:19px; color:var(--cth-mute,#7b8a8a); transition:transform .18s; }
.wk-more.on .wk-ma{ transform:rotate(180deg); }
.wk-mb{ border-top:1px solid var(--cth-line,#e6ecec); padding:4px 16px 16px; }
/* 折叠区里每一样: 靠【小标题 + 分隔线】分, ⛔ 不再各自套一个白卡片 */
/* 🔴 2026-08-03 Kris:「有很多重复的, 而且都是一种颜色的样式, 看着眼花, 各板块区分的不够明显。」
   重复那一半是模板里真写了两遍(已删)。剩下「区分不够明显」这一半:
   ⛔ 没有照定稿原型 `.zt` 把板块标题改成 12px 灰 —— 他上一轮刚点名「字太浅」「颜色一定要醒目」,
      色板注释里还立着「不许再拿 mute 当标题色」。往浅里改等于把上一轮的账再翻一遍。
   ✅ 改用站上【已有】的板块标题样式: 主日页 `.sd-h` 那款「左侧 3px 金竖条」——
      Kris 看过也没提过意见, 两页从此一个调子; 颜色一个字都没动, 纯粹多一个视觉锚点。
      于是折叠区里两类块一眼分得开: 带金竖条的 = 一个板块, 整行带箭头的 = 点进去的入口。 */
.wk-blk{ padding:16px 0 18px; }
.wk-blk + .wk-blk{ border-top:1px solid var(--cth-line,#e6ecec); }
.wk-bt{ font-size:14px; font-weight:600; color:var(--cth-ink,#1b2626); margin:0 0 10px; letter-spacing:.02em;
  padding-left:11px; border-left:3px solid var(--cth-gold); }
.wk-bt em{ font-style:normal; font-weight:400; font-size:12.5px; color:var(--cth-mute,#7b8a8a); margin-left:8px; }
.wk-bt-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
/* 折叠区里的既有块: 把它们自己那层白底和边框脱掉(这就是「白框套白框」的来源) */
.ol-flat, .fd-flat, .lst-flat{ background:none!important; border:0!important; box-shadow:none!important;
  border-radius:0!important; padding:0!important; }
.lst-flat .lrow{ padding-left:0; padding-right:0; }
.wk-hy{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; padding:2px 0 10px; }
.wk-hy > .cth-ic{ flex:0 0 auto; width:20px; height:20px; color:var(--cth-teal,#1c7b7c); }
.wk-hyt{ flex:1; min-width:0; font-size:15px; font-weight:600; }
.wk-hyt em{ display:block; font-style:normal; font-weight:400; font-size:12.5px;
  color:var(--cth-mute,#7b8a8a); margin-top:2px; }

/* ══ 今天的申言示范(每天页, #app 之后) ══════════════════════════════════
   Kris 2026-08-01:「每一天的晨兴就要能联动到当天的申言示范」。
   ⛔ 不套白卡片 —— 用一条左侧色线 + 纸底把它和上面的正文分开就够。 */
.dm-sec{ margin:26px 16px 8px; padding:16px 16px 14px; border-radius:12px;
  background:var(--paper,#faf7f0); border:1px solid var(--line,#e8e3d8); }
.dm-hd{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; margin:0 0 10px; }
.dm-ic{ width:18px; height:18px; color:var(--cth-teal,#1c7b7c); flex:0 0 auto; }
.dm-t{ font-size:15.5px; font-weight:700; color:var(--ink,#2c2a26); }
.dm-s{ flex:1 0 100%; font-size:12.5px; color:var(--soft,#8c8475); line-height:1.6; }
.dm-bd p{ margin:0 0 .7em; font-size:15px; line-height:1.9; color:var(--ink,#2c2a26); }
.dm-bd p:last-child{ margin-bottom:0; }
.dm-go{ display:inline-block; margin-top:12px; font-size:13.5px; font-weight:600;
  color:var(--cth-teal,#1c7b7c); text-decoration:none; }

/* ══ 播放器重做 (2026-08-01 Kris:「播放器也不要背景框, 设计的高级一点。
   要可以调速, 也可以快进和后退15秒」) ═══════════════════════════════════
   ⛔ 整块不带底色不带描边 —— 它是内容的一部分, 不是一个控件盒子。
   图标全部来自图标站(Lucide)。 */
.aud{ background:none!important; border:0!important; box-shadow:none!important; padding:0!important;
  /* ⛔ 必须 block: 原来的 .aud 是横向 flex, 主行和副行会被当成同一排的两个 item
     → 进度条被挤扁、两端时间粘成「1:4027:20」 */
  display:block!important; }
/* ══ 播放器布局：播放 / ±15 秒 / 可拖动进度 / 倍速 ══════════════════════ */
.aud{ background:none!important; border:0!important; box-shadow:none!important; padding:0!important; }
.aud-main{ display:flex; align-items:center; gap:14px; }
/* ① 播放键: 左边, 实心圆 */
.cth-au .aud-main .play{ flex:0 0 46px; width:46px; height:46px; border-radius:50%;
  border:0; background:var(--cthau-c,#2A6E50); color:var(--cth-on-fill);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.cth-au .aud-main .play svg{ width:18px; height:18px; }
.cth-au .aud-main .play:active{ opacity:.82; }
/* ② 中间: 进度条 + 两端时间 */
.audm{ flex:1; min-width:0; display:block; }
.aud-seek{ --aud-progress:0%; width:100%; height:22px; margin:0 0 1px; padding:0;
  appearance:none; -webkit-appearance:none; cursor:pointer; background:transparent; }
.aud-seek::-webkit-slider-runnable-track{ height:5px; border-radius:3px;
  background:linear-gradient(var(--cthau-c,#2A6E50),var(--cthau-c,#2A6E50)) no-repeat rgba(128,128,128,.22);
  background-size:var(--aud-progress) 100%; }
.aud-seek::-webkit-slider-thumb{ width:15px; height:15px; margin-top:-5px; border:0; border-radius:50%;
  -webkit-appearance:none; background:var(--cthau-c,#2A6E50); }
.aud-seek::-moz-range-track{ height:5px; border:0; border-radius:3px; background:rgba(128,128,128,.22); }
.aud-seek::-moz-range-progress{ height:5px; border-radius:3px; background:var(--cthau-c,#2A6E50); }
.aud-seek::-moz-range-thumb{ width:15px; height:15px; border:0; border-radius:50%; background:var(--cthau-c,#2A6E50); }
.aud-skip{ flex:0 0 32px; width:32px; height:36px; padding:0; border:0; background:none;
  color:var(--cth-mute,#7b8a8a); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.aud-skip svg{ width:25px; height:25px; fill:currentColor; }
.aud-skip text{ font:700 7.4px Helvetica,Arial,sans-serif; fill:currentColor; }
.aud-skip:active{ color:var(--cth-teal,#1c7b7c); }
.aud-skip:disabled,.aud-seek:disabled{ opacity:.4; cursor:default; }
/* ③ 调速: 进度条【后面】, 弱色小字 */
.aud-rate{ flex:0 0 auto; min-width:46px; height:30px; padding:0 4px; border:0;
  background:none; color:var(--cth-mute,#7b8a8a); cursor:pointer; text-align:right;
  font-family:inherit; font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.aud-rate.on{ color:var(--cth-teal,#1c7b7c); }
.aud-rate:active{ opacity:.6; }
/* 旧版控件残留不占位。 */
.aud-sk, .aud-ctr, .aud-sp{ display:none !important; }

/* ══════════════════════════════════════════════════════════════════════
   2026-08-01 第三批反馈: 扁平化 + 颜色鲜明 + 字号加大
   Kris 原话:「把特效去掉, 我发现你很喜欢用这种特效, 以后不要用这种特效, 就用纯色的,
   扁平化设计」「这些字用黑色字, 不要这么浅的颜色」「整个所有七次特会的字体颜色你都
   重新调整一下, 都用颜色鲜明的」
   ══════════════════════════════════════════════════════════════════════ */

/* ── ① 去特效: 渐变 / 彩色发光阴影 一律不要 ───────────────────── */
.wk-today{ background:var(--cth-d,#2c6a6b)!important; box-shadow:none!important; }
.wk-today:active{ background:#245859!important; transform:none!important; }
.cd-btn{ box-shadow:none!important; background-image:none!important; }
.cd-btn:active{ opacity:.88; }
.sy-tmb, .sd-day, .lrow, .md-card, .ol-card, .fd-card{ box-shadow:none!important; background-image:none!important; }
.dyi-th{ box-shadow:0 0 0 1px rgba(20,40,40,.10)!important; }
.wk-more{ box-shadow:0 0 0 1px rgba(20,40,40,.08)!important; }

/* ── ② 一周主页「每天」: 字加大加深, 周几标签醒目 ───────────── */
.mg-lb{ font-size:14.5px!important; color:var(--cth-ink)!important; font-weight:700!important; }
.tl-wd{ font-size:15px!important; font-weight:700!important; color:var(--cth-d)!important; }
.tl-tp{ font-size:16.5px!important; color:var(--cth-ink)!important; font-weight:500; }
.tl-st{ font-size:12.5px!important; color:var(--cth-d)!important; font-weight:600; }
.tl-note{ color:var(--cth-mute)!important; font-size:13px!important; }
.wk-mt{ color:var(--cth-ink)!important; }
.wk-mn, .wk-ma{ color:var(--cth-mute)!important; }
.wk-bt{ font-size:15px!important; color:var(--cth-ink)!important; }
.wk-bt em, .lrow-s, .wk-hyt em{ color:var(--cth-mute)!important; font-size:13px!important; }
.lrow-t, .wk-hyt{ color:var(--cth-ink)!important; font-size:16px!important; }
.cth-au-t{ color:var(--cth-ink)!important; }

/* ── ③ 主日页: 六天列表字黑+大, 周几标签醒目 ─────────────────── */
.sd-h{ font-size:16px!important; color:var(--cth-ink)!important; }
.sd-sub, .sd-note{ color:var(--cth-mute)!important; font-size:13.5px!important; }
.sd-wd{ font-size:13px!important; color:var(--cth-on-fill)!important; background:var(--cth-d)!important; font-weight:700!important; }
.sd-dt{ font-size:16.5px!important; color:var(--cth-ink)!important; line-height:1.65!important; }
.sd-ol li, .sd-vs p, .sd-saybd{ color:var(--cth-ink)!important; font-size:15.5px!important; }
.rs-t{ color:var(--cth-ink)!important; font-size:15.5px!important; }
.sy-lb span{ color:var(--cth-ink)!important; }
.sy-lb em{ color:var(--cth-mute)!important; }

/* ══ 晨兴喂养的经节 = 红 ══════════════════════════════════════════════
   根因(2026-08-01 抓到): svkit 重建后文字在 .v.vvs > .cols > .cn > 【.vt】里,
   而 .vt 自己有颜色规则, 把从 .vvs 继承下来的红盖掉了(服务端直出没有这层包裹,
   所以直出是红的、svkit 一接管就变黑)。⭐ 所以必须点名到 .vt。

   🔴 Kris 当天回头又说:「你别太过了, 颜色也要随着主题颜色变化, 目的就是醒目一点、
      高对比度、和其他的经节颜色有一个区分」。上一版做过头在两处, 这里一并改掉:
      ① 写死色值 + !important 把四套主题锁死了 → 一律改走 var(--cth-vs);
      ② 连 .cols / .cn 一起染红 → 双语那些天的【英文那一列(.en)是 .cn 的兄弟】,
         底色一继承就跟着整段变红。现在【只点 .vt】(中文经文真正所在的那一层),
         英文列保持正文色系, 红只用来标出"这几节是祷读的"。 */
#app .v.vvs, #app .vvs, #app .vvs .vt{ color:var(--cth-vs) !important; }
#app .vvs a.bref, #app .vvs .vt a.bref{ color:var(--cth-vsn) !important; }
#app .vvs .vn{ color:var(--cth-vnn) !important; }   /* 节号: 金, 保持原值不动 */
/* 🔴 2026-08-02 Kris:「这里也是晨兴喂养的经节啊, 前面的 21 应该是蓝色, 后面是红色」——
   祷读经节的【续节】开头是纯文本节号(不是 <a class="bref">, 所以吃不到蓝色那条规则)。
   ⭐ 已在【数据侧】把开头那个节号包成 <span class="vsn">(与 bref 同样是数据的一部分,
      ⛔ 不是运行时 JS 插标签 —— 那会切碎文本节点, 划线/搜索/朗读全靠数节点)。
   ⚠️ 与经节出处同色 = 一眼看出「前面是出处、后面是经文」这条规律在续节上也成立。 */
#app .vvs .vsn, #app .vvs .vt .vsn{ color:var(--cth-vsn) !important; font-weight:600; }

/* ══ 晨兴每天页的篇题头 (2026-08-02 Kris:「每一天的篇题就用这个图片的这种排版样式」) ══
   照【完整纲目页】那个 .svmsg-hd 的样子: 金色小字 + 大黑标题 + 一条分隔线。
   ⛔ 数据里的 h0(「第三篇　正题」写在一行、靠悬挂缩进对齐)不再显示 —— 那是上一版的排法,
      两个一起出现就是同一句话说两遍。 */
.cth-mh{ max-width:720px; margin:0 auto; padding:18px 24px 0; box-sizing:border-box; }
@media(max-width:380px){ .cth-mh{ padding-left:20px; padding-right:20px; } }
.cth-mh-no{
  font-family:var(--cth-sans); font-size:calc(var(--fs, 17px) * .82); font-weight:700;
  color:var(--cth-mhno); margin-bottom:8px; letter-spacing:.01em;
}
.cth-mh-t{
  font-family:var(--cth-serif); font-size:calc(var(--fs, 17px) * 1.45); font-weight:800;
  line-height:1.45; color:var(--cth-ink); margin:0 0 .85em;
  padding-bottom:.7em; border-bottom:1px solid var(--cth-line);
}
/* 篇题已经由上面那块显示了, 正文里数据自带的 h0 收起来 */
body.cth-mr #app .h.h0{ display:none !important; }

/* ══ 两个独立页 (2026-08-02 Kris 重定的结构) ═══════════════════════════════
   · /7cth/demo/{期}-{篇}-{天}  今日申言示范 —— 按【天】
   · /7cth/dy/{期}-{篇}         祷研背讲     —— 按【篇/周】(音频与图的文件名都没有"天")
   ⛔ 两页都不套白卡片: 正文本身就是内容, 一个容器 + 分隔线就够。 */
.dmp{ padding:18px 2px 6px; }
.dmp p{
  margin:0 0 1.05em; font-family:var(--cth-serif);
  font-size:calc(var(--fs, 17px) * .95); line-height:1.95; color:var(--cth-ink);
}
.dmp-none{ padding:40px 4px; text-align:center; color:var(--cth-mute); font-size:14.5px; }

/* ══ 主日页: 官方申言示范做成【默认收起】的折叠 ════════════════════════════
   Kris:「主日申言页面也要有集合起来的, 但…不要占太多空间, 要折叠和展开」
   ⭐ 收起时只占一行; 形态照这一套已有的折叠(一周主页 .wk-more), ⛔ 不另造。 */
.sd-fold{ background:var(--paper); border-radius:14px; margin:0 0 18px;
  box-shadow:0 0 0 1px rgba(20,40,40,.06); overflow:hidden; }
.sd-fold-hd{ display:flex; align-items:center; gap:10px; padding:15px 16px;
  cursor:pointer; list-style:none; color:var(--cth-ink); }
.sd-fold-hd::-webkit-details-marker{ display:none; }
.sd-fold-t{ flex:1; min-width:0; font-size:16px; font-weight:600; }
.sd-fold-n{ flex:0 0 auto; font-size:13px; color:var(--cth-mute); }
.sd-fold-ar{ flex:0 0 auto; width:19px; height:19px; color:var(--cth-mute); transition:transform .18s; }
.sd-fold[open] .sd-fold-ar{ transform:rotate(180deg); }
.sd-fold-bd{ border-top:1px solid var(--cth-line); padding:6px 12px 12px; }

/* ══ 2026-08-03 稳定页眉 + 主日静默仪表 ═══════════════════════════════ */
/* 首屏已经直出最终 #svTitle；接管前也必须保持可见、可点击且尺寸一致。 */
body.cth-read .bar:not(.sv-navbar)>#svTitle,
body.cth-read .bar:not(.sv-navbar)>.topback,
body.cth-read .bar:not(.sv-navbar)>.bar-nav{ visibility:visible; }
body.cth-read .bar:not(.sv-navbar)>#svTitle{ pointer-events:none; }

/* 本周真理是一份连续纲目，不再把每个一级条目拆成独立白卡。 */
.sd-truth{
  background:var(--paper); border:1px solid var(--cth-line); border-radius:16px;
  padding:4px 18px; box-shadow:0 8px 28px rgba(25,54,54,.055); overflow:hidden;
}
.sd-truth-group{ padding:17px 0 18px; border-bottom:1px solid var(--cth-line); }
.sd-truth-group:last-child{ border-bottom:0; }
.sd-truth-group h3{
  margin:0; color:var(--cth-ink); font-family:var(--cth-serif); font-size:16.5px;
  line-height:1.85; font-weight:700;
}
.sd-truth-group ul{ margin:10px 0 0; padding:0 0 0 1.35em; color:var(--cth-ink); }
.sd-truth-group li{
  margin:.46em 0; padding-left:.25em; font-family:var(--cth-serif); font-size:15.5px; line-height:1.85;
}
.sd-truth-group li::marker{ color:var(--cth-mute); }
.sd-truth-group li[data-depth="3"]{ margin-left:1.05em; }
.sd-truth-group li[data-depth="4"]{ margin-left:2.1em; }
.sd-truth-group li[data-depth="5"],.sd-truth-group li[data-depth="6"]{ margin-left:3.15em; }
.cth-sr-only{
  position:absolute !important; width:1px !important; height:1px !important; padding:0 !important;
  margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important;
  white-space:nowrap !important; border:0 !important;
}

/* 静默仪表：用留白、细环和材质阴影建立层级，数字始终稳定不跳。 */
.sy-tm{
  --tm-progress:0; --tm-offset:100; position:relative; padding:24px 18px 20px;
  border:1px solid var(--cth-line); border-radius:18px; background:var(--paper);
  box-shadow:0 14px 38px rgba(25,54,54,.075), inset 0 1px 0 rgba(255,255,255,.45);
}
.sy-dial{ width:184px; height:184px; margin:0 auto; position:relative; }
.sy-dial>svg{ width:100%; height:100%; display:block; transform:rotate(-90deg); overflow:visible; }
.sy-dial circle{ fill:none; stroke-width:3.25; }
.sy-dial .track{ stroke:var(--cth-line); }
.sy-dial .progress{
  stroke:var(--cth); stroke-linecap:round; stroke-dasharray:100;
  stroke-dashoffset:var(--tm-offset);
  transition:stroke-dashoffset .24s linear,stroke .2s ease;
  filter:drop-shadow(0 2px 4px rgba(42,126,111,.16));
}
.sy-tm[data-mode="pause"] .progress{ stroke:var(--cth-gold); }
.sy-tm[data-mode="done"] .progress{ stroke:var(--cth-d); }
.sy-dial-core{
  position:absolute; inset:18px; border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; background:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(90,120,116,.06),0 5px 18px rgba(25,54,54,.045);
}
.sy-tm-state{
  min-height:18px; color:var(--cth-mute); font-size:12px; line-height:1.4; font-weight:600;
}
.sy-tmn{
  margin:5px 0 4px; color:var(--cth-d); font-family:ui-rounded,"SF Pro Rounded","Avenir Next",sans-serif;
  font-size:42px; font-weight:600; line-height:1; letter-spacing:-.035em; font-variant-numeric:tabular-nums;
}
.sy-tmn.over{ color:var(--cth-warn); }
.sy-tm-goal{ color:var(--cth-mute); font-size:11px; line-height:1.4; }
.sy-tms{ max-width:360px; margin:15px auto 18px; font-size:12.5px; line-height:1.7; }
.sy-tmbs{ gap:12px; }
.sy-tmb{
  min-width:132px; min-height:48px; justify-content:center; border-radius:13px; padding:12px 24px;
  box-shadow:0 7px 18px rgba(42,126,111,.18); transition:transform .12s ease,background .15s ease;
}
.sy-tmb:active{ transform:scale(.975); }
.sy-tmb[hidden]{ display:none !important; }
.sy-tmb-2{ min-width:104px; box-shadow:inset 0 0 0 1px var(--cth-line); }
.sy-tmb svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
@media(prefers-reduced-motion:reduce){ .sy-dial .progress,.sy-tmb{ transition:none; } }

/* 经节选择器：移动端底部面板；没有勾选时主动作不可用。 */
.sy-vpick-scrim{ z-index:10020; }
.sy-vpick{
  position:fixed; z-index:10021; left:50%; bottom:0; width:min(100%,680px); max-height:min(76vh,620px);
  display:flex; flex-direction:column; box-sizing:border-box; color:var(--cth-ink); background:var(--paper);
  border:1px solid var(--cth-line); border-bottom:0; border-radius:22px 22px 0 0;
  box-shadow:0 -20px 60px rgba(20,40,40,.2); transform:translate(-50%,105%);
  transition:transform .28s cubic-bezier(.22,.8,.3,1);
  padding-bottom:calc(var(--navh,56px) + env(safe-area-inset-bottom,0px));
}
.sy-vpick.on{ transform:translate(-50%,0); }
.sy-vpick-grip{ width:38px; height:4px; border-radius:9px; background:var(--cth-line); margin:9px auto 4px; }
.sy-vpick header{ display:flex; align-items:center; gap:16px; padding:12px 18px 13px; border-bottom:1px solid var(--cth-line); }
.sy-vpick header>div{ flex:1; min-width:0; }
.sy-vpick header b{ display:block; font-size:16px; }
.sy-vpick header span{ display:block; margin-top:3px; color:var(--cth-mute); font-size:12px; }
.sy-vpick header button{ width:44px; height:44px; border:0; border-radius:50%; background:var(--cth-soft); color:var(--cth-d); }
.sy-vpick header svg,.sy-vpick-row svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; }
.sy-vpick-list{ flex:1; overflow:auto; padding:6px 18px 10px; overscroll-behavior:contain; }
.sy-vpick-row{ display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--cth-line); cursor:pointer; }
.sy-vpick-row:last-child{ border-bottom:0; }
.sy-vpick-row input{ position:absolute; opacity:0; pointer-events:none; }
.sy-vpick-row .check{
  flex:0 0 24px; width:24px; height:24px; display:grid; place-items:center; box-sizing:border-box;
  border:1.5px solid var(--cth-line); border-radius:7px; color:#fff; background:var(--paper);
}
.sy-vpick-row input:checked+.check{ border-color:var(--cth); background:var(--cth); }
.sy-vpick-row input:focus-visible+.check{ outline:3px solid rgba(42,126,111,.2); outline-offset:2px; }
.sy-vpick-row .text{ font-family:var(--cth-serif); font-size:15.5px; line-height:1.75; }
.sy-vpick footer{ display:flex; gap:10px; padding:12px 18px 14px; border-top:1px solid var(--cth-line); }
.sy-vpick footer button{ flex:1; min-height:46px; border:1px solid var(--cth-line); border-radius:12px;
  background:var(--paper); color:var(--cth-d); font:600 14px/1 var(--cth-sans); }
.sy-vpick footer .primary{ flex:1.6; border-color:var(--cth); background:var(--cth); color:#fff; }
.sy-vpick footer .primary:disabled{ opacity:.42; }
body.sy-vpick-open{ overflow:hidden; }
@media(min-width:700px){ .sy-vpick{ bottom:20px; border-bottom:1px solid var(--cth-line); border-radius:22px; padding-bottom:0; }
  .sy-vpick.on{ transform:translate(-50%,0); } }
@media(prefers-reduced-motion:reduce){ .sy-vpick{ transition:none; } }
/* Seven-conference readers use the persistent toolbar entry, not a duplicate floating chip. */
body.cth-read #sc-entry,
body.cth-read #sc-hint{display:none!important}

/* 金句卡进入反馈：共享提示会遮住七次特会的居中标题，因此使用短时状态提示。 */
#cth-card-notice{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:2147482999;
  display:flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:calc(100vw - 32px);
  padding:11px 16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(20,30,30,.94);
  box-shadow:0 12px 32px rgba(11,28,28,.2);
  color:#f5f7f4;
  font:500 14px/1.35 var(--cth-sans);
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,12px) scale(.98);
  transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.2,1);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
}
#cth-card-notice strong{color:#e8c879;font-weight:650}
#cth-card-notice.on{opacity:1;transform:translate(-50%,0) scale(1)}
@media(max-width:767px){
  #cth-card-notice{
    bottom:calc(72px + env(safe-area-inset-bottom,0px));
    gap:6px;
    max-width:calc(100vw - 24px);
    padding:10px 14px;
    font-size:13px;
  }
}
@media(max-width:390px){
  #cth-card-notice{white-space:normal;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  #cth-card-notice{transition:none}
}

/* Sunday prophecy 2026-08-08 */
body.cth-sunday {
  --sd-ink: #102f2c;
  --sd-muted: #647b77;
  --sd-line: #dbe6e3;
  --sd-paper: #ffffff;
  --sd-soft: #f4f7f6;
  --sd-accent: #167c73;
}

body.cth-sunday .sd-hero {
  margin: 0 auto 28px;
  padding: 14px 4px 8px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.cth-sunday .sd-eyebrow {
  margin-bottom: 12px;
  color: var(--sd-accent);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .08em;
}

body.cth-sunday .sd-t {
  max-width: 820px;
  margin: 0;
  color: var(--sd-ink);
  font-size: clamp(28px, 4.2vw, 42px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.02em;
}

body.cth-sunday .sd-note {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--sd-muted);
  font-size: 17px;
  line-height: 1.75;
}

body.cth-sunday .sd-sec,
body.cth-sunday .sd-fold,
body.cth-sunday .sd-truth {
  margin: 0 auto 22px;
  background: var(--sd-paper);
  border: 1px solid var(--sd-line);
  border-radius: 22px;
  box-shadow: none;
}

body.cth-sunday .sd-sec {
  padding: 30px 32px;
}

body.cth-sunday .sd-h {
  margin: 0 0 22px;
  color: var(--sd-ink);
  font-size: 22px;
  font-weight: 680;
  line-height: 1.4;
}

body.cth-sunday .sy-f {
  padding: 24px 0;
  border-top: 1px solid var(--sd-line);
}

body.cth-sunday .sy-f:first-of-type {
  padding-top: 4px;
  border-top: 0;
}

body.cth-sunday .sy-fl {
  color: var(--sd-ink);
  font-weight: 620;
}

body.cth-sunday .sy-f textarea {
  width: 100%;
  margin-top: 14px;
  padding: 18px 20px;
  color: var(--sd-ink);
  background: var(--sd-soft);
  border: 1px solid transparent;
  border-radius: 16px;
  box-shadow: none;
  line-height: 1.65;
  transition: border-color .16s ease, background-color .16s ease;
}

body.cth-sunday .sy-f textarea:focus {
  background: #fff;
  border-color: #83b8b2;
  outline: 0;
}

body.cth-sunday .sy-row {
  margin-top: 12px;
}

body.cth-sunday .sy-compose-actions,
body.cth-sunday .sy-compose-preview {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--sd-line);
}

body.cth-sunday .sy-compose-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

body.cth-sunday .sy-compose-actions button,
body.cth-sunday .sy-compose-preview button {
  min-height: 44px;
  padding: 0 18px;
  color: var(--sd-accent);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-weight: 620;
}

body.cth-sunday .sy-compose-preview {
  color: var(--sd-ink);
}

body.cth-sunday .sy-compose-preview > p:first-child {
  margin: 0 0 18px;
  color: var(--sd-accent);
  font-size: 15px;
  font-weight: 680;
  letter-spacing: .08em;
}

body.cth-sunday .sy-compose-copy {
  font-size: 18px;
  line-height: 1.9;
  white-space: pre-wrap;
}

body.cth-sunday .sd-day {
  display: grid;
  grid-template-columns: minmax(72px, auto) 1fr 24px;
  align-items: center;
  min-height: 72px;
  padding: 0 6px;
  color: var(--sd-ink);
  border-top: 1px solid var(--sd-line);
  text-decoration: none;
}

body.cth-sunday .sd-day:first-of-type {
  border-top: 0;
}

body.cth-sunday .sd-wd {
  justify-self: start;
  color: var(--sd-accent);
  font-weight: 650;
}

body.cth-sunday .sd-day .sd-go {
  grid-column: 3;
  justify-self: end;
  color: #8ca39f;
}

body.cth-sunday .sd-resource-fold {
  overflow: hidden;
}

body.cth-sunday .sd-resource-fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 0 30px;
  color: var(--sd-ink);
  cursor: pointer;
  list-style: none;
  font-size: 21px;
  font-weight: 680;
}

body.cth-sunday .sd-resource-fold > summary::-webkit-details-marker {
  display: none;
}

body.cth-sunday .sd-resource-fold > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: 16px;
  border-right: 1.8px solid var(--sd-muted);
  border-bottom: 1.8px solid var(--sd-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}

body.cth-sunday .sd-resource-fold[open] > summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

body.cth-sunday .sd-resource-meta {
  margin-left: auto;
  color: var(--sd-muted);
  font-size: 14px;
  font-weight: 450;
}

body.cth-sunday .sd-resource-body {
  margin: 0;
  padding: 4px 30px 30px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.cth-sunday .sd-resource-body .sd-truth-group {
  padding: 22px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--sd-line);
  border-radius: 0;
  box-shadow: none;
}

body.cth-sunday .sd-resource-body .sd-truth-group:first-child {
  border-top: 0;
}

body.cth-sunday .sd-resource-body.sd-vs p {
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid var(--sd-line);
}

body.cth-sunday .sd-resource-body.sd-vs p:first-child {
  border-top: 0;
}

body.cth-sunday .sd-fold:not(.sd-resource-fold) {
  overflow: hidden;
}

body.cth-sunday .sd-fold:not(.sd-resource-fold) > summary {
  padding: 22px 28px;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 700px) {
  body.cth-sunday .sd-hero {
    margin-bottom: 22px;
    padding: 10px 2px 2px;
  }

  body.cth-sunday .sd-t {
    font-size: 28px;
    line-height: 1.3;
  }

  body.cth-sunday .sd-note {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.7;
  }

  body.cth-sunday .sd-sec,
  body.cth-sunday .sd-fold,
  body.cth-sunday .sd-truth {
    margin-bottom: 16px;
    border-radius: 18px;
  }

  body.cth-sunday .sd-sec {
    padding: 24px 20px;
  }

  body.cth-sunday .sd-h {
    margin-bottom: 16px;
    font-size: 20px;
  }

  body.cth-sunday .sy-f {
    padding: 20px 0;
  }

  body.cth-sunday .sy-f textarea {
    padding: 16px;
    border-radius: 14px;
  }

  body.cth-sunday .sy-compose-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  body.cth-sunday .sy-compose-actions button {
    align-self: flex-end;
  }

  body.cth-sunday .sy-compose-copy {
    font-size: 17px;
    line-height: 1.85;
  }

  body.cth-sunday .sd-day {
    min-height: 64px;
  }

  body.cth-sunday .sd-resource-fold > summary {
    min-height: 68px;
    padding: 0 20px;
    font-size: 19px;
  }

  body.cth-sunday .sd-resource-body {
    padding: 2px 20px 22px;
  }

  body.cth-sunday .sd-resource-meta {
    font-size: 13px;
  }
}