/* WAP UX Kit：阅读工具 / 朗读 / 学习面板 / 测验 / 评论 / 快捷方式 */
body.single-post {
  --ux-bg: #fff; --ux-fg: #1f2328; --ux-muted: #6b7280;
  --ux-line: #e3e6ea; --ux-card: #f7f8fa; --ux-accent: #005a9c;
  --ux-hl: #fff3bf; --ux-ok: #17864a; --ux-warn: #b45309;
}
html[data-wap-theme="dark"] body.single-post {
  --ux-bg: #12151a; --ux-fg: #e6e8ee; --ux-muted: #9aa3af;
  --ux-line: #2c323a; --ux-card: #1a1e24; --ux-accent: #6cb6ff;
  --ux-hl: #4a3f10; --ux-ok: #5dd39e; --ux-warn: #f0b429;
  background: #12151a;
}
html[data-wap-theme="dark"] body.single-post .single-post .content,
html[data-wap-theme="dark"] body.single-post .single-post .title { color: var(--ux-fg); }
html[data-wap-theme="dark"] body.single-post .single-post .content a { color: var(--ux-accent); }
html[data-wap-theme="dark"] body.single-post .single-post .content pre,
html[data-wap-theme="dark"] body.single-post .single-post .content code { background: #0d1013 !important; color: #dfe3e8; }
html[data-wap-theme="dark"] body.single-post .single-post .content table th { background: #1f242b !important; color: #e6e8ee; }
html[data-wap-theme="dark"] body.single-post .single-post .content table tbody tr:nth-child(even) { background: #171b21; }
html[data-wap-theme="dark"] body.single-post .single-post .content blockquote { background: #1a1e24; border-color: #3a424c; }
html[data-wap-theme="dark"] body.single-post #wf-main,
html[data-wap-theme="dark"] body.single-post .wap-tut,
html[data-wap-theme="dark"] body.single-post .wap-tut__tocwrap,
html[data-wap-theme="dark"] body.single-post .wap-ux-card { background: var(--ux-card); color: var(--ux-fg); }

/* ── #5 字号 / 行距 / 阅读宽度 ─────────────────────────────────────── */
html[data-wap-read-size="s"] body.single-post .single-post .content { font-size: 15px; }
html[data-wap-read-size="m"] body.single-post .single-post .content { font-size: 16.5px; }
html[data-wap-read-size="l"] body.single-post .single-post .content { font-size: 19px; }
html[data-wap-read-lh="t"] body.single-post .single-post .content p,
html[data-wap-read-lh="t"] body.single-post .single-post .content li { line-height: 1.5; }
html[data-wap-read-lh="n"] body.single-post .single-post .content p,
html[data-wap-read-lh="n"] body.single-post .single-post .content li { line-height: 1.75; }
html[data-wap-read-lh="w"] body.single-post .single-post .content p,
html[data-wap-read-lh="w"] body.single-post .single-post .content li { line-height: 2.05; }
html[data-wap-read-w="narrow"] body.single-post .single-post { max-width: 720px; margin-left: auto; margin-right: auto; }
html[data-wap-read-w="mid"] body.single-post .single-post { max-width: 900px; margin-left: auto; margin-right: auto; }

/* ── #3 进度条 + 回到顶部 ─────────────────────────────────────────── */
.wap-ux-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100002;
  background: linear-gradient(90deg, #005a9c, #41a0ff); transition: width .12s linear; }
.wap-ux-top { position: fixed; right: 18px; bottom: 18px; z-index: 100002; width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid var(--ux-line, #d6d9dd); background: #fff; color: #005a9c;
  font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.16);
  opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.wap-ux-top.is-on { opacity: 1; pointer-events: auto; transform: none; }

/* ── 文章工具条（标题下）：加深底色、白字，整块凸显出来 ─────────── */
.wap-ux-toolbar { position: relative; display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  margin: 16px 0 20px; padding: 13px 14px 14px; color: #fff;
  background: linear-gradient(135deg, #0b3d62 0%, #0f4f7d 55%, #0a6ea8 100%);
  border: 1px solid rgba(255,255,255,.18); border-left: 4px solid #ffc53d;
  border-radius: 14px; box-shadow: 0 12px 30px rgba(3,30,56,.28); }
.wap-ux-toolbar:empty, .wap-ux-toolbar:not(.is-ready) { display: none; }
.wap-ux-toolbar__label { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font-size: 14.5px; font-weight: 800; letter-spacing: .02em; color: #fff;
  padding: 0 12px 0 2px; margin-right: 4px; border-right: 1px solid rgba(255,255,255,.24); }
.wap-ux-toolbar__label::before { content: "🧰"; font-size: 16px; }
/* 顶部按钮：浅色半透明底 + 白字（仅作用于工具条**直接子**按钮，不影响「阅读设置」弹层） */
.wap-ux-toolbar > .wap-ux-btn { background: rgba(255,255,255,.14); color: #fff;
  border-color: rgba(255,255,255,.30); box-shadow: none; }
.wap-ux-toolbar > .wap-ux-btn:hover { background: rgba(255,255,255,.28); color: #fff;
  border-color: #fff; box-shadow: none; }
.wap-ux-toolbar > .wap-ux-btn.is-on { background: #fff; color: #0b3d62; border-color: #fff; }
.wap-ux-btn { font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1; padding: 10px 15px;
  cursor: pointer; border: 1px solid #cfe0f5; border-radius: 11px;
  background: #fff; color: var(--ux-fg, #1f2328); text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(16,24,40,.08);
  transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.wap-ux-btn:hover { border-color: var(--ux-accent, #005a9c); color: var(--ux-accent, #005a9c);
  background: #fff; box-shadow: 0 4px 12px rgba(0,90,156,.18); transform: translateY(-1px); }
.wap-ux-btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.wap-ux-btn:focus-visible { outline: 2px solid var(--ux-accent, #005a9c); outline-offset: 2px; }
.wap-ux-btn.is-on { background: var(--ux-accent, #005a9c); border-color: var(--ux-accent, #005a9c);
  color: #fff; box-shadow: 0 3px 12px rgba(0,90,156,.3); }
.wap-ux-btn.is-on:hover { color: #fff; }
.wap-ux-btn[disabled] { opacity: .5; cursor: not-allowed; }
.wap-ux-select { font: inherit; font-size: 13.5px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid #cfe0f5; background: #fff; color: inherit; }
.wap-ux-select:focus-visible { outline: 2px solid var(--ux-accent, #005a9c); outline-offset: 1px; }
.wap-ux-card { border: 1px solid var(--ux-line, #e3e6ea); border-radius: 12px; padding: 12px 14px;
  background: #fff; font-size: 13px; box-shadow: 0 12px 32px rgba(16,24,40,.16); }
.wap-ux-pop { position: absolute; top: calc(100% + 8px); left: 8px; z-index: 100003;
  min-width: 268px; max-width: min(92vw, 320px); box-sizing: border-box;
  box-shadow: 0 12px 32px rgba(16,24,40,.18); }
.wap-ux-pop .wap-ux-row { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.wap-ux-pop .wap-ux-row > span { width: 44px; flex: 0 0 auto; color: var(--ux-muted, #6b7280); font-size: 12.5px; }
.wap-ux-pop .wap-ux-row .wap-ux-btn { padding: 7px 12px; font-size: 13px; }
.wap-ux-muted { color: var(--ux-muted, #6b7280); }

/* ── #4 代码块复制 ───────────────────────────────────────────────── */
.wap-tut__item.wap-ux-done > a::after,
.dl-item.wap-ux-done > a::after { content: " ✓"; color: #17864a; font-weight: 700; }
.wap-tut__item.wap-ux-done > a,
.dl-item.wap-ux-done > a { color: #17864a; }
.single-post .content pre { position: relative; }
.wap-ux-copybtn { position: absolute; top: 6px; right: 6px; z-index: 3; font: inherit; font-size: 12px;
  padding: 3px 8px; cursor: pointer; border-radius: 6px; border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.42); color: #fff; opacity: .35; transition: opacity .15s; }
.single-post .content pre:hover .wap-ux-copybtn,
.wap-ux-copybtn:focus { opacity: 1; }
.wap-ux-copybtn.is-done { background: rgba(23,134,74,.9); }
.wap-ux-hl { background: #fff3bf; border-bottom: 2px solid #f0b429; cursor: help; padding: 0 1px; }
html[data-wap-theme="dark"] .wap-ux-hl { background: #4a3f10; border-bottom-color: #f0b429; color: #f3f4f6; }

/* ── #6 图片放大 ─────────────────────────────────────────────────── */
.single-post .content img { cursor: zoom-in; }
.wap-ux-lightbox { position: fixed; inset: 0; z-index: 100005; background: rgba(8,10,13,.9);
  display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; }
.wap-ux-lightbox img { max-width: 94vw; max-height: 90vh; border-radius: 6px; cursor: zoom-out;
  box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.wap-ux-lightbox .wap-ux-lb-cap { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center;
  color: #d6d9dd; font-size: 12px; }
.wap-ux-lightbox .wap-ux-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px;
  border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 20px; cursor: pointer; }
.wap-ux-lb-nav.is-prev { left: 12px; } .wap-ux-lb-nav.is-next { right: 12px; }

/* ── 提示气泡 ────────────────────────────────────────────────────── */
.wap-ux-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 100010;
  background: rgba(20,24,30,.94); color: #fff; font-size: 13px; padding: 9px 14px; border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0,0,0,.28); }

/* ── #1/#2 朗读条：播放键一组 +（模式 / 速率 / 音色）**同一行** ───── */
.wap-tts { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; flex-basis: 100%;
  margin: 9px 0 0; padding: 9px 11px; background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20); border-radius: 10px; }
.wap-tts::before { content: "🔊 朗读"; font-size: 12.5px; font-weight: 700; color: #fff; opacity: .92; margin-right: 2px; }
.wap-tts .wap-ux-btn { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.30); box-shadow: none; }
.wap-tts .wap-ux-btn:hover { background: rgba(255,255,255,.28); color: #fff; border-color: #fff; }
.wap-tts__actions { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* 主按钮（▶ 朗读 / ▶ 继续）：琥珀色实心，最醒目 */
.wap-tts__actions .wap-ux-btn:first-of-type { background: #ffc53d; border-color: #ffc53d; color: #3a2a00; font-weight: 800; }
.wap-tts__actions .wap-ux-btn:first-of-type:hover { background: #ffd76a; border-color: #ffd76a; color: #3a2a00; }
/* 三个选择框一行排布：不换行，窄屏时可横向滑动 */
.wap-tts__opts { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  flex: 1 1 auto; min-width: 0; overflow-x: auto; padding-bottom: 2px; }
/* 下拉框：**实底 + 深字**，保证「框内文字」与「展开后的选项列表」都清晰可读 */
.wap-tts__opts .wap-ux-select { flex: 0 0 auto; background: #fff; color: #12283d;
  border: 1px solid rgba(255,255,255,.6); font-size: 12.5px; font-weight: 600; padding: 6px 8px; border-radius: 9px; }
.wap-tts__opts .wap-ux-select option { background: #fff; color: #12283d; }
.wap-tts__opts .wap-ux-select:disabled { opacity: .6; }
.wap-tts__opts .wap-ux-select:focus-visible { outline: 2px solid #ffc53d; outline-offset: 1px; }
.wap-tts__mode { max-width: 190px; }
.wap-tts__rate { max-width: 86px; }
.wap-tts__voice { max-width: 160px; }
/* 「朗读进度」独立成行：标签 + 进度条 + 第几段 */
.wap-tts__progress { flex-basis: 100%; display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.wap-tts__progress-label { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #fff; opacity: .92; white-space: nowrap; }
.wap-tts__status { flex: 0 0 auto; font-size: 12px; color: rgba(255,255,255,.85); min-width: 56px; }
.wap-tts__bar { flex: 1 1 120px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.wap-tts__bar > i { display: block; height: 100%; width: 0; background: #ffc53d; }
.wap-tts__notice { flex-basis: 100%; font-size: 12px; color: #ffd88a; }
.wap-tts-cur { background: var(--ux-hl, #fff3bf) !important; border-radius: 4px;
  box-shadow: 0 0 0 3px var(--ux-hl, #fff3bf); }

/* ── 底部悬浮操作条：居中、常驻；带品牌底色 + 各按钮也有底色，整体更突出 ── */
.wap-ux-float { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 100002;
  display: flex; gap: 8px; padding: 8px; align-items: center;
  background: linear-gradient(135deg, #0b3d62 0%, #005a9c 55%, #0a6ea8 100%);
  border: 1px solid rgba(255,255,255,.22); border-radius: 18px;
  box-shadow: 0 14px 34px rgba(3,30,56,.45), inset 0 1px 0 rgba(255,255,255,.10);
  max-width: calc(100vw - 24px); overflow-x: auto; }
.wap-ux-float .wap-ux-btn { background: rgba(255,255,255,.16); color: #fff;
  border-color: rgba(255,255,255,.34); box-shadow: none; padding: 9px 14px; font-weight: 700; }
.wap-ux-float .wap-ux-btn:hover { background: rgba(255,255,255,.30); color: #fff;
  border-color: #fff; transform: none; box-shadow: none; }
.wap-ux-float .wap-ux-btn.is-on { background: #fff; color: #0b3d62; border-color: #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,.28); }
.wap-ux-float .wap-ux-btn.is-on:hover { background: #fff; color: #0b3d62; }
@media (max-width: 767px) { .wap-ux-float { bottom: 12px; gap: 6px; padding: 6px; }
  .wap-ux-float .wap-ux-btn { padding: 9px 11px; font-size: 13px; } }

/* 深色模式下的工具条 / 播放器 / 悬浮条 / 设置面板 */
html[data-wap-theme="dark"] body.single-post .wap-ux-toolbar { background: linear-gradient(135deg, #08192a 0%, #0f2740 55%, #0a3050 100%); border-color: #2c3d52; }
html[data-wap-theme="dark"] body.single-post .wap-ux-btn { background: #232a33; border-color: var(--ux-line); color: var(--ux-fg); }
html[data-wap-theme="dark"] body.single-post .wap-ux-btn:hover { background: #223244; color: var(--ux-accent); border-color: var(--ux-accent); }
/* 深色模式下，工具条内的控件保持「浅色半透明 + 白字」，与深色底一致 */
html[data-wap-theme="dark"] body.single-post .wap-ux-toolbar > .wap-ux-btn,
html[data-wap-theme="dark"] body.single-post .wap-tts .wap-ux-btn {
  background: rgba(255,255,255,.14); color: #eaf2ff; border-color: rgba(255,255,255,.28); }
html[data-wap-theme="dark"] body.single-post .wap-ux-toolbar > .wap-ux-btn:hover,
html[data-wap-theme="dark"] body.single-post .wap-tts .wap-ux-btn:hover {
  background: rgba(255,255,255,.26); color: #fff; border-color: #fff; }
html[data-wap-theme="dark"] body.single-post .wap-ux-toolbar > .wap-ux-btn.is-on { background: #fff; color: #0b3d62; border-color: #fff; }
html[data-wap-theme="dark"] body.single-post .wap-tts__actions .wap-ux-btn:first-of-type {
  background: #ffc53d; border-color: #ffc53d; color: #3a2a00; }
html[data-wap-theme="dark"] body.single-post .wap-tts { background: rgba(255,255,255,.08); border-color: #2c3d52; }
html[data-wap-theme="dark"] body.single-post .wap-tts__opts .wap-ux-select {
  background: #16222f; color: #eaf2ff; border-color: rgba(255,255,255,.28); }
html[data-wap-theme="dark"] body.single-post .wap-tts__opts .wap-ux-select option { background: #16222f; color: #eaf2ff; }
html[data-wap-theme="dark"] body.single-post .wap-tts__bar { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
html[data-wap-theme="dark"] body.single-post .wap-ux-float {
  background: linear-gradient(135deg, #08192a 0%, #0f2740 55%, #0a3050 100%); border-color: #2c3d52; }
html[data-wap-theme="dark"] body.single-post .wap-ux-float .wap-ux-btn {
  background: rgba(255,255,255,.14); color: #eaf2ff; border-color: rgba(255,255,255,.28); }
html[data-wap-theme="dark"] body.single-post .wap-ux-float .wap-ux-btn:hover {
  background: rgba(255,255,255,.26); color: #fff; border-color: #fff; }
html[data-wap-theme="dark"] body.single-post .wap-ux-float .wap-ux-btn.is-on {
  background: #fff; color: #0b3d62; border-color: #fff; }
html[data-wap-theme="dark"] body.single-post .wap-ux-card,
html[data-wap-theme="dark"] body.single-post .wap-ux-select { background: #1a1e24; color: var(--ux-fg); border-color: var(--ux-line); }

/* ── #12 学习路线图 / #16#17#19 学习面板 ─────────────────────────── */
.wap-learn-panel { position: fixed; left: 18px; bottom: 68px; z-index: 100003; width: min(92vw, 320px);
  max-height: 62vh; overflow: auto; }
.wap-learn-panel[hidden] { display: none; }
.wap-learn-stat { display: flex; gap: 12px; margin: 4px 0 10px; font-size: 13px; }
.wap-learn-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.wap-learn-list li { padding: 5px 0; border-bottom: 1px dashed var(--ux-line, #e3e6ea); }
.wap-learn-list li:last-child { border-bottom: 0; }
.wap-learn-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wap-learn-badge { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--ux-line, #e3e6ea); }
.wap-learn-badge.is-on { background: var(--ux-ok, #17864a); color: #fff; }
.wap-roadmap { display: grid; gap: 18px; }
.wap-roadmap__stage h3 { margin: 0 0 6px; font-size: 16px; }
.wap-roadmap__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wap-roadmap__list li { display: flex; gap: 8px; align-items: baseline; font-size: 14px;
  border: 1px solid var(--ux-line, #e3e6ea); border-radius: 8px; padding: 7px 10px; }
.wap-roadmap__list li.is-done { border-color: var(--ux-ok, #17864a); }
.wap-roadmap__list .wap-ux-muted { font-size: 12px; }
.wap-roadmap__bar { height: 6px; border-radius: 4px; background: var(--ux-line, #e3e6ea); overflow: hidden; margin: 6px 0 2px; }
.wap-roadmap__bar > i { display: block; height: 100%; width: 0; background: var(--ux-ok, #17864a); }

/* ── #10 本页大纲（左侧栏顶部） ──────────────────────────────────── */
.wap-ux-outline { margin: 0 0 10px; padding: 8px 8px 6px; border: 1px solid var(--ux-line, #e3e6ea);
  border-radius: 8px; background: #fff; font-size: 13px; }
.wap-ux-outline > b { display: block; font-size: 12px; color: var(--ux-muted, #6b7280); margin: 0 0 4px; }
.wap-ux-outline a { display: block; padding: 3px 6px; border-radius: 5px; color: inherit; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wap-ux-outline a:hover { background: rgba(0,90,156,.08); color: var(--ux-accent, #005a9c); }
.wap-ux-outline a.is-cur { background: var(--ux-accent, #005a9c); color: #fff; font-weight: 600; }
.wap-ux-outline a.lv3 { padding-left: 18px; }
html[data-wap-theme="dark"] .wap-ux-outline { background: var(--ux-card); }

/* ── #18 章节小测验 / 错题本 ─────────────────────────────────────── */
.wap-quiz { margin: 22px 0; border: 1px solid var(--ux-line, #e3e6ea); border-radius: 10px; padding: 12px 14px; }
.wap-quiz h3 { margin: 0 0 8px; font-size: 16px; }
.wap-quiz ol { padding-left: 20px; }
.wap-quiz li { margin: 0 0 12px; }
.wap-quiz label { display: block; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.wap-quiz label:hover { background: rgba(0,90,156,.06); }
.wap-quiz .is-right { color: var(--ux-ok, #17864a); font-weight: 600; }
.wap-quiz .is-wrong { color: #c0392b; font-weight: 600; }
.wap-quiz .wap-quiz-explain { font-size: 13px; color: var(--ux-muted, #6b7280); margin-top: 4px; }

/* ── #7 文末（相关文章 / 时长 / 更新） ───────────────────────────── */
.wap-postmeta { font-size: 13px; color: var(--ux-muted, #6b7280); margin: 10px 0 0; }
.wap-related { margin-top: 22px; border-top: 1px solid var(--ux-line, #e3e6ea); padding-top: 12px; }
.wap-related h4 { margin: 0 0 8px; font-size: 15px; }
.wap-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wap-related li a { display: block; padding: 7px 10px; border: 1px solid var(--ux-line, #e3e6ea);
  border-radius: 8px; text-decoration: none; color: inherit; font-size: 14px; }
.wap-related li a:hover { border-color: var(--ux-accent, #005a9c); color: var(--ux-accent, #005a9c); }

/* ── #20 快捷方式按钮：锚定气泡（在按钮下方弹出，含关闭/操作按钮） ─── */
.wap-pwa-pop { position: fixed; z-index: 100011; width: min(92vw, 360px); padding: 14px 14px 12px;
  max-height: min(78vh, 560px); overflow: auto;
  color: var(--ux-fg, #1f2328); font-size: 13.5px; line-height: 1.7;
  box-shadow: 0 16px 40px rgba(16,24,40,.22); }
.wap-pwa-pop__x { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; padding: 0; line-height: 1;
  border: 0; border-radius: 8px; background: transparent; color: var(--ux-muted, #6b7280);
  font-size: 20px; cursor: pointer; }
.wap-pwa-pop__x:hover { background: var(--ux-line, #e3e6ea); color: var(--ux-fg, #1f2328); }
.wap-pwa-pop__t { display: block; font-size: 14.5px; margin: 0 26px 6px 0; }
.wap-pwa-pop__hint { font-size: 13px; line-height: 1.7; color: var(--ux-fg, #1f2328); margin-bottom: 8px; }
.wap-pwa-pop__go { display: block; width: 100%; margin: 2px 0 8px;
  background: var(--ux-accent, #005a9c); border-color: var(--ux-accent, #005a9c); color: #fff; }
.wap-pwa-pop__go:hover { background: #004a80; border-color: #004a80; color: #fff; }
.wap-pwa-pop__steps { margin: 0 0 8px; padding-left: 18px; font-size: 13px; line-height: 1.75; }
.wap-pwa-pop__steps li { margin: 5px 0; }
.wap-pwa-pop__sec { margin: 10px 0 4px; padding-top: 9px; border-top: 1px dashed var(--ux-line, #e3e6ea); font-size: 13px; }
.wap-pwa-pop__sec > b { display: block; margin-bottom: 4px; }
.wap-pwa-pop__cert { display: inline-block; margin: 2px 0 2px; padding: 7px 14px; font-size: 13px; }
.wap-pwa-pop__k { padding: 1px 6px; border-radius: 4px; background: #eef2f7; color: #005a9c;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px; white-space: nowrap; }
html[data-wap-theme="dark"] body.single-post .wap-pwa-pop__k { background: #263140; color: #9ccdff; }
.wap-pwa-pop code { padding: 1px 5px; border-radius: 4px; background: #eef2f7; color: #005a9c; }
.wap-pwa-pop__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  border-top: 1px solid var(--ux-line, #e3e6ea); padding-top: 9px; }
.wap-pwa-pop__foot .wap-ux-btn { padding: 7px 14px; font-size: 13px; }

/* ── #21 评论体验 ───────────────────────────────────────────────── */
.wap-comments { margin-top: 28px; }
.wap-comments .wap-comments__title { font-size: 17px; margin: 0 0 10px; }
.wap-comments ol.comment-list { list-style: none; margin: 0; padding: 0; }
.wap-comments ol.comment-list ol.children { list-style: none; padding-left: 26px; }
.wap-comments .wap-comment { border: 1px solid var(--ux-line, #e3e6ea); border-radius: 8px;
  padding: 10px 12px; margin: 0 0 10px; background: #fff; }
.wap-comments .wap-comment__head { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ux-muted, #6b7280); }
.wap-comments .wap-comment__head img { width: 28px; height: 28px; border-radius: 50%; }
.wap-comments .wap-comment__author { font-weight: 600; color: var(--ux-fg, #1f2328); }
.wap-comments .wap-comment__role { font-size: 11px; padding: 1px 6px; border-radius: 999px;
  background: var(--ux-accent, #005a9c); color: #fff; }
.wap-comments .wap-comment__body { margin: 6px 0 0; font-size: 14px; }
.wap-comments .wap-comment__meta { margin-top: 6px; font-size: 12px; color: var(--ux-muted, #6b7280); }
.wap-comments .wap-comment__reply { float: right; }
.wap-comments .comment-respond { margin-top: 14px; }
.wap-comments .comment-form input[type=text], .wap-comments .comment-form input[type=email],
.wap-comments .comment-form input[type=url], .wap-comments .comment-form textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--ux-line, #e3e6ea); border-radius: 8px; font: inherit; }
.wap-comments .comment-form .submit { padding: 9px 16px; border: 0; border-radius: 8px;
  background: var(--ux-accent, #005a9c); color: #fff; cursor: pointer; }
.wap-comments .nav-links { display: flex; gap: 8px; margin: 10px 0; }
html[data-wap-theme="dark"] body.single-post .wap-comments .wap-comment { background: var(--ux-card); }

/* 打印：隐藏一切交互件 */
@media print {
  .wap-ux-progress, .wap-ux-top, .wap-ux-toolbar, .wap-tts, .wap-ux-float,
  .wap-learn-panel, .wap-ux-copybtn, .wap-ux-lightbox, .wap-pwa-pop { display: none !important; }
}