/* ============================================================
   WorkBuddy 蓝皮书 ･ 首页样式（1:1 复刻）
   源自 workbuddy.homes，Neo-Brutalism / Pixel 风格
   ============================================================ */

/* ---------- 字体 ---------- */
@font-face {
  font-family: Silkscreen;
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./silkscreen.woff2) format("woff2");
}

/* 品牌字专用：方正综艺简体（拉丁子集 4KB；本地已装则优先用系统字体） */
@font-face {
  font-family: "FZZongYi";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: local("方正综艺简体"), local("FZZongYi-M05S"),
       url(./fonts/fzzongyi-latin.woff2) format("woff2");
}

/* 数字专用切片（2026-10-13）：把 0-9 与数字标点从像素体里分流到方正综艺。
   像素字 Silkscreen 的数字小字号发糊、大字号像马赛克，用户反馈看不清；
   FZZongYi 数字方正硬朗，与 Neo-Brutalism 方块风一致。unicode-range 只接管
   数字与 , . / % - – — 等数字标点，英文字母标签仍由 Silkscreen 渲染。 */
@font-face {
  font-family: "WBNum";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: local("方正综艺简体"), local("FZZongYi-M05S"),
       url(./fonts/fzzongyi-latin.woff2) format("woff2");
  unicode-range: U+0030-0039, U+002C, U+002E, U+002F, U+0025, U+002B,
                 U+002D, U+2013, U+2014, U+00D7, U+00B7;
}

/* ---------- 主题变量 ---------- */
:root {
  --wb-acid: #d8f238;
  --wb-acid-strong: #b9e52f;
  --wb-acid-soft: #eef7bd;
  --wb-brand-b: #6b9a0f;       /* 品牌「vista」深酸绿（浅色主题） */
  --wb-accent-deep: #4a6b12;
  --wb-ink: #11130e;
  --wb-paper: #f5f7f0;
  --wb-surface: #ffffff;
  --wb-muted: #656b60;
  --wb-line: #d7dbd0;
  /* 深绿标签一族：浅色主题用深绿、深色主题自动换成亮绿（修暗色低对比） */
  --wb-label: #557b18;        /* 像素小标签 */
  --wb-label-deep: #4f7213;   /* .hl 强调图标 / 年代数字 */
  --wb-label-moss: #506d08;   /* 侧栏标题 / 链接强调 */
  --wb-label-ink: #34470b;    /* 深绿说明文字（浅底） */
  --wb-note-no: #6e7565;      /* 卡片角标装饰编号 */
  --wb-shadow: 6px 6px 0 var(--wb-ink);
  --wb-on-accent: #f5f7f0;     /* 压在深底/强调底上的前景字（浅色主题=亮纸色） */
  --wb-chip: #11130e;          /* 恒为深色的「徽章底」（其上放 --wb-on-accent 亮字）。不随主题反转 */
  --wb-on-acid: #11130e;       /* 压在 --wb-acid 底上的字：浅色主题 acid=亮荧光绿 → 深字 */
  --wb-pixel: "WBNum", "Silkscreen", monospace;
  --wb-body: "Avenir Next", Avenir, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 暖（dark）= 「华夏纪年」古纸配色：米黄纸底 + 深褐墨字 + 赭红点睛 */
html.dark {
  --wb-acid: #8c2f28;          /* 赭红（原荧光绿位置） */
  --wb-acid-strong: #b04a42;   /* 红 hover */
  --wb-acid-soft: #f7e9e7;     /* 浅红衬底 */
  --wb-brand-b: #a1453d;       /* 品牌「vista」深赭红（古纸主题） */
  --wb-accent-deep: #8c2f28;
  --wb-ink: #3a352c;           /* 深褐墨 */
  --wb-paper: #f6f1e7;         /* 米黄纸底 */
  --wb-surface: #fffdf7;       /* 卡片暖白 */
  --wb-muted: #8a8271;
  --wb-line: #e6dcc4;
  --wb-label: #8c2f28;
  --wb-label-deep: #8c2f28;
  --wb-label-moss: #8c2f28;
  --wb-label-ink: #7a5b1e;
  --wb-note-no: #a89a7c;
  --wb-shadow: 6px 6px 0 #3a352c;
  --wb-on-accent: #f6f1e7;     /* 压在深底/强调底上的前景字（古纸主题=亮纸色） */
  --wb-chip: #3a352c;          /* 恒为深色的「徽章底」（浅色/古纸下等于 --wb-ink） */
  --wb-on-acid: var(--wb-on-accent);  /* 暖/夜主题 acid=深赭红 → 亮纸字 */
}

/* 夜（ink）= 真･深色「墨色」：墨黑底 + 米白字 + 朱砂点缀（与「暖」古纸色并列）。
   变量角色与 html.dark 保持一致（paper=亮色 / ink=暗色），故全站 html.dark 修正自动复用；
   本块声明在 html.dark 之后，同特异性下后者胜，墨色覆盖暖色。 */
html.ink {
  --wb-acid: #cf5b4e;          /* 朱砂/印泥红（原赭红位，提亮以适配墨底） */
  --wb-acid-strong: #e07a6e;
  --wb-acid-soft: #2a1d1c;     /* 深红衬底（on dark） */
  --wb-brand-b: #d98b80;       /* 品牌「vista」 */
  --wb-accent-deep: #cf5b4e;
  --wb-ink: #e9e7e0;           /* 米白字（=暗色，role 同 dark 的 paper） */
  --wb-paper: #15171a;         /* 墨黑底 */
  --wb-surface: #1f2328;       /* 卡片稍亮 */
  --wb-muted: #9aa0a6;
  --wb-line: #2c3137;
  --wb-label: #d98b80;
  --wb-label-deep: #cf5b4e;
  --wb-label-moss: #cf5b4e;
  --wb-label-ink: #c9a98f;
  --wb-note-no: #6b7280;
  --wb-on-accent: #f3efe6;     /* 压在深底/强调底上的前景字（墨色主题=米白） */
  --wb-chip: #34383e;          /* 恒为深色的「徽章底」（墨色下也保持深色，才配得上米白字） */
  --wb-shadow: 6px 6px 0 #000;
}

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* 锚点定位时给吸顶导航栏留出偏移，避免目标被遮挡 */
:target,
[id] {
  scroll-margin-top: 96px;
}

body {
  margin: 0;
  color: var(--wb-ink);
  background: var(--wb-paper);
  font-family: var(--wb-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a, button { -webkit-tap-highlight-color: transparent; }

::selection { color: var(--wb-on-acid, #0c0d0a); background: var(--wb-acid); }

/* ---------- 像素图标 ---------- */
.wb-pixel-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.hl, .wb-pixel-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  overflow: visible;
  fill: currentColor;
  line-height: 1;
  vertical-align: top;
}

/* ---------- 顶部导航 ---------- */
.VPNav {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid var(--wb-line);
  background: color-mix(in srgb, var(--wb-paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
}

.VPNavBar {
  height: 70px;
  display: flex;
  align-items: center;
}

.VPNavBar__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 32px;
}

.VPNavBarTitle {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: var(--wb-ink) !important;
  font-weight: 850;
  font-size: 23px;
  letter-spacing: .01em;
  text-decoration: none !important;
  white-space: nowrap;
}

.VPNavBarTitle__mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 2px solid var(--wb-ink);
  color: var(--wb-on-acid, var(--wb-ink));
  background: var(--wb-acid);
  font-family: var(--wb-pixel);
  font-size: 10px;
}

/* 品牌字（2026-10-09 改版 / 二次调整）：Book 粗体在前 + vista 粗体在后，二者同字重（800），仅配色区分。
   原「方正综艺简体」为单字重粗体显示体，无法呈现细体；先改用无衬线族按真实字重分层
   （Avenir Next / Segoe UI 均自带 Light/Black）。用户反馈 vista 细体（300）过细，
   故二次调整让 vista 与 Book 同为 800 粗体，双色沿用站点品牌色（墨色 + 点睛色）。 */
.VPNavBarTitle__text {
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: .01em;
}
.VPNavBarTitle__text .vp-tx-a { color: var(--wb-ink); font-weight: 800; }        /* Book：墨色粗体 */
.VPNavBarTitle__text .vp-tx-b { color: var(--wb-brand-b); font-weight: 800; }  /* vista：品牌色粗体（与 Book 同粗） */

/* 「首页」导航项 2026-10-08 曾按「logo 即入口」在桌面端隐藏；
   2026-10-17 步哥要求恢复：桌面导航第一位显示「首页」（HTML 里链接本就存在，无需动）。 */

.VPNavBarMenu {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.VPNavBarMenuLink {
  position: relative;
  white-space: nowrap;
  padding: 6px 12px;
  color: var(--wb-ink) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: color .16s ease;
}

.VPNavBarMenuLink:hover { color: var(--wb-acid-strong) !important; }

.VPNavBarMenuLink.active:after {
  position: absolute;
  right: 12px;
  bottom: -2px;
  left: 12px;
  height: 2px;
  background: var(--wb-ink);
  content: "";
}

/* 交流群浮层 */
.VPFlyout { position: relative; }

.VPFlyout__button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 0;
  color: var(--wb-ink);
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.VPFlyout__chev {
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}

.VPFlyout:hover .VPFlyout__chev,
.VPFlyout__button[aria-expanded="true"] + .VPFlyout__menu ~ .VPFlyout__chev { transform: rotate(-135deg); }

.VPFlyout__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 60;
  padding: 16px;
  border: 1px solid var(--wb-line);
  background: var(--wb-surface);
  box-shadow: var(--wb-shadow);
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.VPFlyout:hover .VPFlyout__menu,
.VPFlyout:focus-within .VPFlyout__menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(2px);
}

/* 右侧工具 */
.VPNavBar__right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.VPSwitchAppearance {
  display: grid;
  width: 36px;
  height: 20px;
  padding: 0;
  place-items: center;
  border: 1.6px solid var(--wb-ink);
  border-radius: 12px;
  background: var(--wb-surface);
  cursor: pointer;
}

.VPSwitchAppearance .check {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.VPSwitchAppearance .vpi-sun,
.VPSwitchAppearance .vpi-moon {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
}

.VPSwitchAppearance .vpi-sun {
  left: 4px;
  border: 1.4px solid var(--wb-ink);
  border-radius: 50%;
  background: var(--wb-acid);
}

.VPSwitchAppearance .vpi-moon {
  right: 4px;
  border: 1.4px solid var(--wb-muted);
  border-radius: 50%;
}

html.dark .VPSwitchAppearance .vpi-sun { border-color: var(--wb-muted); background: transparent; }
html.dark .VPSwitchAppearance .vpi-moon { border-color: var(--wb-ink); background: var(--wb-acid); }

/* 主题切换：日 / 夜 / 墨 三段式（替代原太阳/月亮小开关）。
   元素同时挂 VPSwitchAppearance（兼容既有探针）与 wb-theme-switch 类。 */
.VPSwitchAppearance.wb-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: auto;
  height: auto;
  padding: 3px;
  border: 1.6px solid var(--wb-ink);
  border-radius: 999px;
  background: var(--wb-surface);
  cursor: default;
}
.wb-theme-switch .wb-ts__opt {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  padding: 3px 10px;
  font: 600 12px/1 var(--wb-body);
  letter-spacing: .04em;
  color: var(--wb-muted);
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.wb-theme-switch .wb-ts__opt:hover { color: var(--wb-ink); }
.wb-theme-switch .wb-ts__opt.is-active {
  color: var(--wb-paper);
  background: var(--wb-ink);
}
.wb-theme-switch .wb-ts__opt:focus-visible {
  outline: 2px solid var(--wb-acid);
  outline-offset: 1px;
}

.VPSocialLink {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--wb-ink);
  transition: color .16s ease;
}

.VPSocialLink:hover { color: var(--wb-acid-strong); }

/* ============================================================
   首页主体
   ============================================================ */
.wb-home {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 20px 32px 72px;
  color: var(--wb-ink);
}

/* ---------- HERO ---------- */
.wb-hero {
  overflow: hidden;
  border: 2px solid #11130e;
  border-radius: 8px;
  background: var(--wb-acid);
  box-shadow: 0 18px 60px #29301017;
}

.wb-hero__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(460px, .92fr);
  min-height: 568px;
  background: radial-gradient(circle at 75% 30%, rgba(255,255,255,.2), transparent 28%), var(--wb-acid);
}

.wb-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 70px 28px 64px 80px;
}

/* hero 底色两个主题都是亮绿（--wb-acid），文字必须锁定深墨色，
   否则暗色模式下继承 --wb-ink（白）会看不清 */
.wb-hero__copy .wb-pixel-label { color: #11130e; }

.wb-hero__copy h1,
.wb-hero__copy .wb-hero__title--main {
  max-width: 720px;
  margin: 24px 0 18px;
  color: #0d0f0a;
  font-size: clamp(52px, 4.7vw, 70px);
  font-weight: 850;
  line-height: 1.06;
  letter-spacing: -.06em;
  white-space: nowrap;
}

.wb-hero__summary {
  max-width: 680px;
  margin: 0;
  color: #1a1d13;
  font-size: 19px;
  font-weight: 540;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.wb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 28px;
}

/* 按钮（Neo-Brutalism 硬阴影） */
.wb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 210px;
  min-height: 62px;
  padding: 0 28px;
  border: 2px solid #11130e;
  border-radius: 0;
  color: #11130e !important;
  font-size: 18px;
  font-weight: 760;
  font-family: inherit;      /* <button> 版本与 <a> 版本外观一致 */
  cursor: pointer;
  text-decoration: none !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.wb-button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px #11130e;
}

.wb-button--primary { color: #fff !important; background: #0d0f0a; }

.wb-button--primary .hl { font-size: 25px; }

.wb-button--outline { background: transparent; }

.wb-button--acid { color: #fff !important; background: #11130e; }

.wb-button--dark-outline { background: transparent; }

/* HERO 右侧插画区 */
.wb-hero__art { position: relative; min-height: 568px; }

.wb-hero__metrics {
  position: absolute;
  right: 46px;
  bottom: 22px;
  display: flex;
  gap: 12px;
  color: #11130e;
  font-family: var(--wb-pixel);
  font-size: 13px;
}

.wb-hero__metrics span + span:before { margin-right: 12px; content: "/"; }

.wb-hero__metrics b { font-weight: 400; }

.wb-icon-card {
  position: absolute;
  display: grid;
  width: 126px;
  height: 126px;
  place-items: center;
  color: #11130e;
  /* 无白底：黑色像素图标直接站在绿底上 */
}

.wb-icon-card .hl { font-size: 118px; }

.wb-icon-card--buddy { top: 34px; left: 45%; transform: rotate(-7deg); animation: wb-bob 5.5s ease-in-out infinite; }
.wb-icon-card--book  { top: 196px; left: 14%; transform: rotate(8deg); animation: wb-bob 6.5s ease-in-out 1.1s infinite; }
.wb-icon-card--flow  { top: 214px; right: 17%; transform: rotate(3deg); animation: wb-bob 6s ease-in-out 2s infinite; }
.wb-icon-card--work  { bottom: 62px; left: 42%; transform: rotate(-7deg); animation: wb-bob 7s ease-in-out .5s infinite; }

/* 图标整体轻微上下浮动（translate 独立属性，不与 rotate 冲突） */
@keyframes wb-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* ---------- 价值条 ---------- */
.wb-value-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 104px;
  padding: 20px 34px;
  color: #fff;
  background: #0c0e09;
}

.wb-value-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-width: 0;
  border-right: 1px solid #777b72;
}

.wb-value-strip__item:last-child { border-right: 0; }

.wb-value-strip__item > .hl { color: var(--wb-acid); font-size: 42px; }

.wb-value-strip__item span,
.wb-value-strip__item b,
.wb-value-strip__item small { display: block; }

.wb-value-strip__item b { font-size: 19px; letter-spacing: .08em; }

.wb-value-strip__item small {
  margin-top: 3px;
  color: var(--wb-acid);
  font-family: var(--wb-pixel);
  font-size: 11px;
}

/* ---------- 实时流量条 ---------- */
/* kb 速查页：内容区不再额外垫底——数据卡与上方工具/表格区的间距由 wb-traffic 自身的 margin-top 提供
   （.wb-page 默认 padding-bottom 72px + 数据卡 22px 会叠出 ~94px 大空隙，只有 4 个 kb 页命中此结构） */
.wb-page-kb .wb-page { padding-bottom: 0; }

.wb-traffic {
  display: flex;
  width: min(1040px, calc(100% - 96px));
  min-height: 58px;
  margin: 22px auto 0;
  border: 2px solid #11130e;
  border-radius: 7px;
  color: #11130e;
  background: var(--wb-surface);
  box-shadow: 0 3px #11130e;
}

.wb-traffic__live {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 142px;
  padding: 0 24px;
  font-family: var(--wb-pixel);
  font-size: 14px;
  letter-spacing: .04em;
}

.wb-traffic__dot {
  width: 18px;
  height: 18px;
  border: 1.5px solid #11130e;
  border-radius: 50%;
  background: var(--wb-acid);
  box-shadow: inset 0 0 0 3px var(--wb-surface);
  animation: wb-pulse 2.2s ease-in-out infinite;
}

.wb-traffic--error .wb-traffic__dot { background: #a5a79f; animation: none; }

@keyframes wb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.88); }
}

.wb-traffic__metrics {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.wb-traffic__metrics > div {
  display: grid;
  grid-template-columns: auto auto;
  align-content: center;
  align-items: baseline;
  justify-content: center;
  gap: 0 12px;
  min-width: 0;
  margin: 10px 0;
  padding: 0 20px;
  border-left: 1px solid #11130e;
}

.wb-traffic__metrics dt { font-size: 14px; white-space: nowrap; }

.wb-traffic__metrics dd {
  min-width: 7ch;
  margin: 0;
  font-family: var(--wb-pixel);
  font-size: 17px;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.wb-traffic__metrics small {
  grid-column: 1 / -1;
  color: #557b18;
  font-family: var(--wb-pixel);
  font-size: 8px;
  letter-spacing: .06em;
}

.wb-traffic--loading .wb-traffic__metrics dd { color: var(--wb-muted); }

html.dark .wb-traffic { color: var(--wb-ink); border-color: var(--wb-ink); box-shadow: 0 3px var(--wb-ink); }
html.dark .wb-traffic__metrics > div { border-left-color: var(--wb-line); }
html.dark .wb-traffic__metrics small { color: var(--wb-acid); }

/* ---------- 通用区块 ---------- */
.wb-section { padding: 64px 52px 0; }

/* 列表页专属：数据条后紧跟的内容区，标题上方留白收紧（64 → 26），
   详情页/首页的 wb-section 前面不是数据条，不受影响 */
.wb-traffic + .wb-section { padding-top: 26px; }

.wb-section__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 26px;
}

.wb-section__heading .wb-pixel-label { margin-bottom: 9px; color: var(--wb-label); }

.wb-section__heading h2,
.wb-system h2 {
  margin: 0;
  border: 0;
  font-size: clamp(30px, 3vw, 43px);
  font-weight: 820;
  line-height: 1.2;
  letter-spacing: -.045em;
}

.wb-section__heading > p {
  max-width: 540px;
  margin: 0 0 4px;
  color: var(--wb-muted);
  font-size: 15px;
  line-height: 1.7;
}

.wb-section__heading--compact {
  padding-top: 18px;
  border-top: 1px solid var(--wb-line);
}

.wb-pixel-label {
  margin: 0;
  font-family: var(--wb-pixel);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .02em;
}

/* ---------- 任务索引网格 ---------- */
.wb-task-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--wb-line);
  border-left: 1px solid var(--wb-line);
}

.wb-task-grid a {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto;
  min-height: 116px;
  padding: 24px;
  border-right: 1px solid var(--wb-line);
  border-bottom: 1px solid var(--wb-line);
  color: var(--wb-ink) !important;
  background: var(--wb-surface);
  text-decoration: none !important;
  transition: background .16s ease;
}

.wb-task-grid a:hover { background: var(--wb-acid-soft); }

.wb-task-grid .hl { grid-row: 1 / 3; align-self: center; color: var(--wb-label-deep); font-size: 35px; }

.wb-task-grid strong { font-size: 17px; }

.wb-task-grid span { color: var(--wb-muted); font-size: 13px; }

/* ---------- 系统方法论（深色区） ---------- */
.wb-system {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: 60px;
  margin-top: 72px;
  padding: 56px;
  color: #fff;
  background: #0c0e09;
}

.wb-system__intro .wb-pixel-label { margin-bottom: 18px; color: var(--wb-acid); }

.wb-system__intro > p:last-child {
  max-width: 540px;
  margin: 20px 0 0;
  color: #b6bcaf;
  line-height: 1.8;
}

.wb-system__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  background: #4a5045;
  list-style: none;
}

.wb-system__steps li {
  position: relative;
  min-height: 130px;
  padding: 24px;
  background: #151812;
}

.wb-system__steps b {
  position: absolute;
  top: 18px;
  right: 18px;
  color: var(--wb-acid);
  font-family: var(--wb-pixel);
  font-size: 11px;
  font-weight: 400;
}

.wb-system__steps strong,
.wb-system__steps span { display: block; }

.wb-system__steps strong {
  margin: 10px 0 12px;
  color: var(--wb-acid);
  font-family: var(--wb-pixel);
  font-size: 14px;
}

.wb-system__steps span { color: #e5e9df; font-size: 14px; }

/* ---------- 四大内容板块 ---------- */
.wb-channels-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
}

.wb-channel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--wb-line);
  border-radius: 7px;
  color: var(--wb-ink) !important;
  background: var(--wb-surface);
  text-decoration: none !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.wb-channel-card:hover {
  transform: translate(-3px, -3px);
  border-color: var(--wb-ink);
  box-shadow: var(--wb-shadow);
}

.wb-channel-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wb-channel-card__icon {
  display: grid;
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--wb-on-acid, #0d0f0a);
  background: var(--wb-acid);
}

.wb-channel-card__icon .hl { font-size: 40px; }

.wb-channel-card__titles { min-width: 0; }

.wb-channel-card__titles small {
  display: block;
  margin-bottom: 4px;
  color: var(--wb-label-moss);
  font-family: var(--wb-pixel);
  font-size: 9px;
  letter-spacing: .04em;
}

.wb-channel-card__titles strong {
  display: block;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.wb-channel-card__count {
  position: absolute;
  top: 22px;
  right: 26px;
  color: var(--wb-muted);
  font-family: var(--wb-pixel);
  font-size: 11px;
}

.wb-channel-card__desc {
  margin: 0;
  color: var(--wb-muted);
  font-size: 14px;
  line-height: 1.7;
}

.wb-channel-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
}

.wb-channel-card__tags b {
  padding: 2px 9px;
  border: 1px solid var(--wb-line);
  font-size: 11px;
  font-weight: 600;
}

/* 含子类的卡片（地名传说）——整行展开 */
.wb-channel-card--parent {
  grid-column: 1 / -1;
  background: var(--wb-surface);
}

.wb-channel-card__children {
  display: grid;
  /* 4 列：历史知识库 4 个速查入口一行排齐（历史知识库是唯一的含子类卡片） */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 4px;
  border-top: 1px solid var(--wb-line);
  background: var(--wb-line);
}

.wb-channel-child {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 4px 4px;
  color: var(--wb-ink) !important;
  background: var(--wb-surface);
  text-decoration: none !important;
  transition: background .16s ease;
}

.wb-channel-child:hover { background: var(--wb-acid-soft); }

.wb-channel-child__top {
  display: flex;
  align-items: center;
  gap: 11px;
}

.wb-channel-child__top > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wb-channel-child__top strong {
  display: block;
  color: var(--wb-ink);
  font-size: 16px;
}

.wb-channel-child__top small {
  color: var(--wb-muted);
  font-family: var(--wb-pixel);
  font-size: 9px;
  letter-spacing: .04em;
}

.wb-channel-child__desc {
  padding-left: 45px;
  color: var(--wb-muted);
  font-size: 13px;
  line-height: 1.6;
}

.wb-channel-child__icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--wb-on-acid, #0d0f0a);
  background: var(--wb-acid);
}

.wb-channel-child__icon .hl { font-size: 22px; }

/* ---------- 地名传说独立区块 ---------- */
.wb-legend-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.wb-legend-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 26px;
  border: 2px solid var(--wb-ink);
  border-radius: 7px;
  color: var(--wb-ink) !important;
  background: var(--wb-surface);
  text-decoration: none !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.wb-legend-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--wb-shadow);
  background: var(--wb-acid-soft);
}

.wb-legend-card__icon {
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  color: var(--wb-on-acid, #0d0f0a);
  background: var(--wb-acid);
}

.wb-legend-card__icon .hl { font-size: 48px; }

.wb-legend-card small {
  color: var(--wb-label-moss);
  font-family: var(--wb-pixel);
  font-size: 10px;
  letter-spacing: .04em;
}

.wb-legend-card strong { font-size: 21px; letter-spacing: -.02em; }

.wb-legend-card__desc { margin: 0; color: var(--wb-muted); font-size: 14px; line-height: 1.7; }

.wb-legend-card__go {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 13px;
  font-weight: 700;
}

.wb-legend-card__go .hl { font-size: 18px; transition: transform .16s ease; }

.wb-legend-card:hover .wb-legend-card__go .hl { transform: translateX(4px); }

/* ---------- 关于步哥 ---------- */
.wb-about {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  min-height: 220px;
  margin: 72px 52px 0;
  padding: 42px 190px 42px 46px;
  overflow: hidden;
  border: 2px solid #11130e;
  background: var(--wb-acid);
}

.wb-about .wb-pixel-label { margin-bottom: 13px; color: #34470b; }

.wb-about h2 {
  margin: 0 0 14px;
  color: #11130e;
  font-size: clamp(30px, 3vw, 43px);
  font-weight: 820;
  line-height: 1.2;
  letter-spacing: -.045em;
}

.wb-about__desc {
  max-width: 620px;
  margin: 0 0 10px;
  color: #1a1d13;
  font-size: 15px;
  line-height: 1.8;
}

.wb-about__note {
  margin: 0;
  color: #34470b;
  font-family: var(--wb-pixel);
  font-size: 11px;
}

.wb-about__actions { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; }

.wb-about .wb-button { min-width: 180px; min-height: 50px; font-size: 15px; }

.wb-about__icon {
  position: absolute;
  right: 26px;
  bottom: -25px;
  color: #11130e1f;
  font-size: 160px;
  transform: rotate(-8deg);
}

/* ---------- 页脚 ---------- */
.VPFooter {
  padding: 40px 24px 32px;
  border-top: 1px solid var(--wb-line);
}

.VPFooter .container {
  max-width: 1480px;
  margin: 0 auto;
  text-align: center;
}

.VPFooter .message {
  margin: 0 0 6px;
  color: var(--wb-muted);
  font-size: 13px;
}

.VPFooter .message a { color: var(--wb-ink); text-decoration: underline; }

.VPFooter .copyright {
  margin: 0;
  color: var(--wb-muted);
  font-size: 12px;
}

/* ICP 备案号（2026-10-26，豫ICP备2026052784号）：颜色随版权行，hover 提亮 */
.VPFooter .copyright .beian,
.wb-footm__copy .beian {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.VPFooter .copyright .beian:hover,
.wb-footm__copy .beian:hover,
.VPFooter .copyright .beian:focus-visible,
.wb-footm__copy .beian:focus-visible {
  color: var(--wb-ink);
  border-bottom-color: currentColor;
  text-decoration: none;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1200px) {
  .wb-home { padding-inline: 24px; }
  .wb-hero__stage { grid-template-columns: 1.02fr .98fr; }
  .wb-hero__copy { padding-left: 52px; }
  .wb-icon-card { width: 108px; height: 108px; }
  .wb-icon-card .hl { font-size: 98px; }
  .wb-icon-card--buddy { left: 44%; }
  .wb-icon-card--book  { left: 16%; }
  .wb-icon-card--flow  { right: 19%; }

  .wb-value-strip { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
  .wb-value-strip__item:nth-child(2) { border-right: 0; }
  .wb-traffic { width: calc(100% - 48px); }
  .wb-traffic__live { min-width: 118px; padding-inline: 18px; }
  .wb-traffic__metrics > div { gap: 0 8px; padding-inline: 12px; }
  .wb-traffic__metrics dt { font-size: 12px; }
  .wb-traffic__metrics dd { min-width: 0; font-size: 14px; }
  .wb-system { grid-template-columns: 1fr; }

  .wb-about { margin-inline: 30px; flex-direction: column; align-items: flex-start; padding-right: 170px; }
}

@media (max-width: 960px) {
  .VPNavBarMenu { display: none; }
  .wb-hero__stage { grid-template-columns: 1fr; }
  .wb-hero__copy { padding: 64px 52px 28px; }
  .wb-hero__copy h1,
  .wb-hero__copy .wb-hero__title--main { font-size: clamp(48px, 8vw, 64px); white-space: normal; }
  .wb-hero__art { min-height: 430px; }
  .wb-channel-card__children { grid-template-columns: 1fr 1fr; }
  .wb-legend-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .wb-home { padding: 12px 14px 52px; }
  .VPNavBar__inner { padding: 0 16px; gap: 12px; }
  .VPNavBarTitle__text { display: none; }
  .wb-hero__copy { padding: 46px 24px 22px; }
  .wb-hero__copy h1 { margin-top: 18px; font-size: clamp(36px, 10.8vw, 48px); }
  .wb-hero__copy .wb-hero__title--main { font-size: clamp(36px, 10.8vw, 48px); }
  .wb-hero__summary { font-size: 16px; }
  .wb-hero__actions { display: grid; grid-template-columns: 1fr; }
  .wb-button { width: 100%; min-width: 0; }
  .wb-hero__art { min-height: 380px; }

  .wb-hero__metrics { right: 16px; bottom: 18px; left: 16px; justify-content: center; gap: 6px; font-size: 9px; }
  .wb-hero__metrics span + span:before { margin-right: 6px; }
  .wb-icon-card { width: 90px; height: 90px; }
  .wb-icon-card .hl { font-size: 80px; }
  .wb-icon-card--buddy { top: 26px; left: 28%; }
  .wb-icon-card--book  { top: 140px; left: 8%; }
  .wb-icon-card--flow  { top: 135px; right: 8%; }
  .wb-icon-card--work  { bottom: 68px; left: 39%; }
  .wb-value-strip { grid-template-columns: 1fr; padding-inline: 24px; }
  .wb-value-strip__item {
    justify-content: flex-start;
    padding: 12px 0;
    border-right: 0;
    border-bottom: 1px solid #60655b;
  }
  .wb-value-strip__item:last-child { border-bottom: 0; }
  .wb-traffic { display: block; width: 100%; margin-top: 24px; } /* 数据卡已挪到页面最下方（关于步哥之上），24px 与上方内容留白 */
  .wb-page-kb .wb-page { padding-bottom: 0; } /* kb 速查页同理：别让 .wb-page 的 48px 垫底叠出大空隙 */
  .wb-traffic__live { min-height: 46px; border-bottom: 1px solid #11130e; }
  .wb-traffic__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-traffic__metrics > div { min-height: 58px; margin: 0; padding: 10px 12px; border-bottom: 1px solid #11130e; }
  .wb-traffic__metrics > div:nth-child(odd) { border-left: 0; }
  .wb-traffic__metrics > div:nth-last-child(-n+2) { border-bottom: 0; }
  .wb-traffic__metrics dt { font-size: 13px; }
  .wb-traffic__metrics dd { font-size: 14px; }
  .wb-section { padding: 48px 4px 0; }
  .wb-section__heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .wb-task-grid { grid-template-columns: 1fr; }
  .wb-task-grid { border-top: 1px solid var(--wb-line); }

  .wb-system { gap: 36px; margin-top: 52px; padding: 36px 24px; }
  .wb-system__steps { grid-template-columns: 1fr; }

  /* 四大板块 ･ 地名传说 ･ 关于 */
  .wb-channels-grid { grid-template-columns: 1fr; gap: 18px; }
  .wb-channel-card { padding: 22px; }
  .wb-channel-card__count { top: 20px; right: 22px; }
  .wb-channel-card__children { grid-template-columns: 1fr; }
  .wb-channel-child { padding: 18px 4px 4px; }
  .wb-legend-grid { grid-template-columns: 1fr; gap: 18px; }
  .wb-legend-card { padding: 24px 22px; }
  .wb-about {
    min-height: 0;
    margin: 44px 4px 0;
    padding: 34px 24px 120px;
  }
  .wb-about__actions { width: 100%; }
  .wb-about .wb-button { width: 100%; min-width: 0; }
  .wb-about__icon { right: 10px; font-size: 130px; }
}

/* ============================================================
   手机端底部固定导航（标记由 assets/app.js 注入，窄屏才显示）
   ============================================================ */
.wb-mnav { display: none; }

@media (max-width: 820px) {
  /* 留出底部空间，页面最后的内容与页脚不会被固定条压住
     （含 iPhone 底部安全区：home indicator 那一条要额外让出来） */
  html.wb-has-mnav body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  .wb-mnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 48;
    display: grid;
    /* 六个入口：首页 / 地名史 / 群英 / 古国 / 搜索 / 夜间（主题切换） */
    grid-template-columns: repeat(6, 1fr);
    background: var(--wb-paper);
    border-top: 1px solid var(--wb-ink);
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom, 0px));
    /* iOS 微信/WKWebView 打开页面时 fixed 元素背景偶发不绘制（内容透叠），
       用 translateZ(0) 提升为合成层修复。
       注意：这里刻意**不写 will-change: transform** —— iOS Safari 上 will-change
       会让元素常驻独立合成层，滚动惯性期间出现错位、闪烁甚至整块不绘制
       （2026-10-05 步哥反馈「底栏有时会动、有时会消失」的元凶之一）。 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .wb-mnav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 1px;
    border-radius: 9px;
    color: var(--wb-muted);
    text-decoration: none;
    letter-spacing: .01em;
    white-space: nowrap;
    transition: color .15s ease, background-color .15s ease;
  }
  .wb-mnav__item .wb-pixel-icon { font-size: 19px; }
  .wb-mnav__item:active { transform: translateY(1px); }
  /* 高亮：亮绿底 + 固定深色字（亮绿在明暗两套主题下都是浅色，白字会看不清） */
  .wb-mnav__item.is-active {
    background: var(--wb-acid);
    color: var(--wb-on-acid, #11130e);
    font-weight: 700;
  }
  /* 深色主题下 --wb-acid 已换成赭红，深字压红底看不清，高亮项翻浅纸色 */
  html.dark .wb-mnav__item.is-active { color: var(--wb-on-accent); }

  /* 第 6 格：主题三等分圆盘（日 / 夜 / 暖），不用文字（沿用原月相圆点思路，二等分→三等分）。
     圆盘分 3 个扇区：当前模式扇区用主题强调色实填，其余扇区用同色淡填（--tint，随模式变色，
     深色模式下呈墨色调而非刺眼白）；两条分隔线用墨色。data-mode 挂在按钮上由 applyTheme 同步；
     点一下循环切换。注意：按钮需重置浏览器默认外观，否则默认白底会把扇区衬成白块。 */
  body .wb-mnav__item--theme {
    justify-content: center;
    cursor: pointer;
    border: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
  }
  body .wb-mnav__theme-dial {
    --tint: color-mix(in srgb, var(--wb-acid) 22%, transparent);
    display: block;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    border: 0;                 /* 默认不描边：三个扇区本身已界定圆形；点按/聚焦时才临时显形 */
    border-radius: 50%;
    transition: border-color .15s ease;
  }
  /* 无障碍键盘焦点同样显形 */
  body .wb-mnav__item--theme:focus-visible .wb-mnav__theme-dial {
    border: 1.6px solid var(--wb-ink);
  }
  /* 三等分：两条分隔线 + 当前扇区实填、其余淡填（from -90deg = 12 点起顺时针；日=首扇区、夜=中扇区、暖=末扇区） */
  body .wb-mnav__item--theme[data-mode="light"] .wb-mnav__theme-dial {
    background: conic-gradient(from -90deg,
      var(--wb-acid) 0 32.1%,
      var(--wb-ink) 32.1% 33.4%,
      var(--tint) 33.4% 65.3%,
      var(--wb-ink) 65.3% 66.6%,
      var(--tint) 66.6% 100%);
  }
  body .wb-mnav__item--theme[data-mode="ink"] .wb-mnav__theme-dial {
    background: conic-gradient(from -90deg,
      var(--tint) 0 32.1%,
      var(--wb-ink) 32.1% 33.4%,
      var(--wb-acid) 33.4% 65.3%,
      var(--wb-ink) 65.3% 66.6%,
      var(--tint) 66.6% 100%);
  }
  body .wb-mnav__item--theme[data-mode="dark"] .wb-mnav__theme-dial {
    background: conic-gradient(from -90deg,
      var(--tint) 0 32.1%,
      var(--wb-ink) 32.1% 33.4%,
      var(--tint) 33.4% 65.3%,
      var(--wb-ink) 65.3% 66.6%,
      var(--wb-acid) 66.6% 100%);
  }
}

@media print { .wb-mnav { display: none !important; } }

/* ============================================================
   懒加载图片占位：图片未到位时先铺一层底色，滚动时不出现空白闪动
   （图片本身不透明，加载完成后会完整覆盖底色）
   ============================================================ */
img[loading="lazy"] { background-color: var(--wb-line); }

/* ============================================================
   动画降级：系统开启「减少动态效果」时，全站停用过渡与动画
   ------------------------------------------------------------
   站点现有 50 多处 transition / animation（卡片悬停位移、抽屉滑入、
   主题切换、进度条等），逐条列举容易漏，这里用通配一次性覆盖。
   时长压到 0.01ms 而不是 0：既等于瞬时完成，又保证依赖
   transitionend / animationend 的逻辑仍能收到事件（为 0 时部分
   浏览器不再派发）。滚动平滑一并关掉——前庭敏感用户对它更敏感。
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   手机端差异设计（2026-10-03）
   ------------------------------------------------------------
   原则：电脑版不动，手机（≤768px）按手机的习惯重新组织——
   1) 详情页砍掉站点宣传块，正文第一屏直达
   2) 列表/知识库 hero 去掉长简介与图标装饰
   3) 触控目标 ≥44px，正文密度对齐手机舒适区
   抽屉导航组件在所有断点共用（按钮仅 ≤820px 显示）。
   ============================================================ */

/* ---------- ☰ 汉堡按钮（仅窄屏显示） ---------- */
.wb-burger { display: none; }

@media (max-width: 820px) {
  .wb-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 3.5px;
    width: 38px;
    height: 38px;
    padding: 0 8px;
    border: 2px solid var(--wb-ink);
    border-radius: 9px;
    background: var(--wb-surface);
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
  }
  .wb-burger i { display: block; height: 2.5px; width: 100%; background: var(--wb-ink); border-radius: 0; }
  .wb-burger:active { transform: translateY(1px); background: var(--wb-acid); }
}

/* ---------- 全屏抽屉导航 ---------- */
.wb-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
}
.wb-drawer[hidden] { display: none; }
.wb-drawer__mask { position: absolute; inset: 0; background: rgba(17, 19, 14, .46); }
.wb-drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 86vw);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--wb-paper);
  border-left: 2px solid var(--wb-ink);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: wbDrawerIn .22s ease both;
}
@keyframes wbDrawerIn {
  from { transform: translateX(26px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.wb-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 12px;
  border-bottom: 2px solid var(--wb-ink);
}
.wb-drawer__brand { display: inline-flex; align-items: center; font-size: 17px; font-weight: 800; letter-spacing: .02em; }
.wb-drawer__brand b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px; height: 27px;
  margin-right: 7px;
  background: var(--wb-acid);
  border: 2px solid var(--wb-ink);
  border-radius: 7px;
  font-size: 13px;
}
.wb-drawer__close {
  width: 40px; height: 40px;
  border: 2px solid var(--wb-ink);
  border-radius: 9px;
  background: var(--wb-surface);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.wb-drawer__close:active { background: var(--wb-acid); }
.wb-drawer__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 2px solid transparent;
  border-radius: 12px;
  color: var(--wb-ink) !important;
  text-decoration: none !important;
}
.wb-drawer__item.is-active {
  border-color: var(--wb-ink);
  background: var(--wb-acid);
  box-shadow: 4px 4px 0 var(--wb-ink);
}
.wb-drawer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex: none;
  background: var(--wb-acid-soft);
  border: 2px solid var(--wb-ink);
  border-radius: 9px;
}
.wb-drawer__item.is-active .wb-drawer__icon { background: var(--wb-paper); }
.wb-drawer__icon .wb-pixel-icon { font-size: 20px; }
.wb-drawer__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wb-drawer__txt b { font-size: 15.5px; line-height: 1.25; }
.wb-drawer__txt small {
  font-family: var(--wb-pixel, Consolas, monospace);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--wb-muted);
}
.wb-drawer__arrow { margin-left: auto; font-size: 15px; opacity: .3; }
.wb-drawer__foot {
  margin-top: auto;
  padding: 12px 6px 2px;
  border-top: 1px solid var(--wb-line);
  font-size: 12px;
  color: var(--wb-muted);
}

/* ---------- 手机端（≤768px）页面差异 ---------- */
@media (max-width: 768px) {
  /* 详情页：砍掉宣传 hero 与站点数据条，读者直接看文章 */
  .wb-page-post .wb-hero,
  .wb-page-post .wb-traffic { display: none; }

  /* 列表 / 知识库页：hero 只留标题和按钮 */
  .wb-page-list .wb-hero__summary,
  .wb-page-kb .wb-hero__summary,
  .wb-page-list .wb-hero__art,
  .wb-page-kb .wb-hero__art { display: none; }
  .wb-page-list .wb-hero__copy,
  .wb-page-kb .wb-hero__copy { padding: 32px 18px 16px; }

  /* 首页 hero 压缩：少占一屏，像素图标气质保留 */
  body.wb-page-home .wb-hero__copy { padding: 38px 20px 16px; }
  body.wb-page-home .wb-hero__summary { font-size: 15px; }
  body.wb-page-home .wb-hero__art { min-height: 290px; }
  body.wb-page-home .wb-icon-card { width: 76px; height: 76px; }
  body.wb-page-home .wb-icon-card .hl { font-size: 66px; }

  /* 触控目标 ≥44px（手机最低标准） */
  body .VPNavBar__right { gap: 10px; }
  /* 深色模式开关：手机端去掉（用户拍板，手机只看亮色）。
     选择器加 .wb-theme-switch 提特异性，压过桌面三段式的 inline-flex（否则手机顶栏会露出） */
  body .VPSwitchAppearance.wb-theme-switch { display: none; }
  body .VPSocialLink { width: 36px; height: 36px; }
  body .VPNavBarTitle { min-height: 44px; }
  .wb-page-search .wb-search-hot__tag { padding: 9px 16px; font-size: 13.5px; }
  .wb-page-search .wb-chip,
  .wb-page-kb .wb-chip { padding: 9px 15px; font-size: 14px; }
  .wb-page-post .wb-crumbs a,
  .wb-page-post .wb-crumbs b { padding: 8px 2px; }
  body .wb-pager__btn { min-width: 42px; min-height: 42px; padding: 9px 12px; }

  /* 阅读密度：列表与知识库正文提到手机舒适区 */
  .wb-page-list main p,
  .wb-page-kb main p { font-size: 15px; line-height: 1.8; }
  .wb-page-kb .wb-chip i { font-size: 12px; }
}

/* ============================================================
   手机端差异设计 ･ 第二批（2026-10-03）
   ------------------------------------------------------------
   原则不变：电脑版完全不动，以下全部只在 ≤768px 生效。
   1) 首页黑色「实地探访…」价值条去掉
   2) 首页三个板块标题只留绿色像素标签，去掉重复的大标题与说明行
   3) 首页「短视频/图文专栏/行迹地图」三个空链卡片去掉
   4) 古国/传说/知识库等页去掉品牌 hero（绿+黑头部），
      首屏直达本页标题；古国/传说的标题升级为「地名史式」专题卡
   ============================================================ */
@media (max-width: 768px) {
  /* -- 价值条：全站手机端一律不显示 -- */
  .wb-value-strip { display: none; }

  /* -- 首页板块标题：只留绿色像素标签 -- */
  body.wb-page-home .wb-section__heading { margin-bottom: 20px; }
  body.wb-page-home .wb-section__heading h2,
  body.wb-page-home .wb-section__heading > p { display: none; }

  /* -- 首页「地名传说」：去掉标题上方的分隔线（手机上只剩标签，孤线很突兀），收紧间距 -- */
  body.wb-page-home .wb-legend > .wb-section__heading { border-top: 0; padding-top: 0; }
  body.wb-page-home .wb-legend { padding-top: 26px; }

  /* -- 子页头部：品牌 hero 只属于首页 -- */
  body.wb-mtopic .wb-hero { display: none; }

  /* 古国 / 传说：首个板块标题升级为「地名史式」白卡专题头 */
  #kingdomContent > .wb-section__heading,
  #legendContent > .wb-section__heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
    padding: 24px 20px 22px;
    border: 1px solid var(--wb-ink);
    border-radius: 9px;
    background: var(--wb-surface);
    box-shadow: var(--wb-shadow);
  }
  #kingdomContent > .wb-section__heading h2,
  #legendContent > .wb-section__heading h2 {
    font-size: 30px;
    letter-spacing: -.03em;
  }
  #kingdomContent > .wb-section__heading > p,
  #legendContent > .wb-section__heading > p { margin: 0; }

  /* 消失的古国手机端：白卡专题头保留原样（2026-10-06 步哥要求，勿再改） */
}

/* ============================================================
   手机端差异设计 ･ 第三批（2026-10-03）
   ------------------------------------------------------------
   原则不变：电脑版完全不动，以下全部只在 ≤768px 生效。
   1) 首页「地名传说三个子类」大卡改紧凑横排卡（原每张占一屏 1/3）
   2) 群英传页「群英谱」大标题与说明行去掉，只留绿色像素标签
   3) 搜索页：绿色副标题去掉；「大家都在找」去掉最后一个词；
      分页「下一页」不再整行掉下去——上一页/下一页收成箭头
   ============================================================ */
@media (max-width: 768px) {
  /* -- 首页 ･ 传说三个子类：竖排大卡 → 横排紧凑卡 -- */
  body.wb-page-home .wb-legend-grid { gap: 12px; }
  body.wb-page-home .wb-legend-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 3px;
    padding: 14px 16px;
  }
  body.wb-page-home .wb-legend-card__icon { grid-column: 1; grid-row: 1 / span 3; width: 56px; height: 56px; }
  body.wb-page-home .wb-legend-card__icon .hl { font-size: 34px; }
  body.wb-page-home .wb-legend-card small { font-size: 9px; }
  body.wb-page-home .wb-legend-card strong { font-size: 17px; }
  body.wb-page-home .wb-legend-card__desc { font-size: 13px; line-height: 1.5; }
  body.wb-page-home .wb-legend-card__go { grid-column: 3; grid-row: 1 / span 3; margin: 0; padding: 0; gap: 6px; font-size: 12px; }
  body.wb-page-home .wb-legend-card__go .hl { font-size: 15px; }

  /* -- 群英传页：大标题与说明行去掉 -- */
  #heroesContent > .wb-section__heading h2,
  #heroesContent > .wb-section__heading > p { display: none; }
  #heroesContent > .wb-section__heading { margin-bottom: 20px; }

  /* -- 搜索页：副标题与最后一个热搜词去掉 -- */
  .wb-page-search .wb-searchbar__sub { display: none; }
  .wb-page-search .wb-search-hot__tag:last-of-type { display: none; }

  /* -- 分页：上一页/下一页收成箭头，保证整行放得下 -- */
  body .wb-pager { gap: 6px; }
  body .wb-pager__btn { min-width: 38px; white-space: nowrap; }
  body .wb-pager__btn:first-child,
  body .wb-pager__btn:last-child {
    font-size: 0;
    gap: 0;
    min-width: 44px;
    min-height: 44px;
    padding: 9px 0;
  }
  body .wb-pager__btn:first-child .hl,
  body .wb-pager__btn:last-child .hl { font-size: 18px; }
  /* 搜索页的箭头是文字字符，隐藏文字后用伪元素补回单个箭头 */
  .wb-page-search .wb-pager__btn:first-child::before { content: "\2190"; font-size: 16px; line-height: 1; }
  .wb-page-search .wb-pager__btn:last-child::after { content: "\2192"; font-size: 16px; line-height: 1; }
}

/* ============================================================
   手机端差异设计 ･ 第四批（2026-10-03）
   ------------------------------------------------------------
   原则不变：电脑版完全不动，以下全部只在 ≤768px 生效。
   1) 首页「栏目入口」板块原有隐藏规则已于 2026-10-08 撤销
      （见文件末尾「2026-10-08」批——上方栏目格的过滤名单正好
      是这六个栏目，隐藏会让手机首页彻底没有它们的入口）
   2) 群英传/物产/非遗头部第 4 个统计标签去掉，保证标签一行
   3) 分页页码再收紧：非遗 7 页也稳稳一行放下
   ============================================================ */
@media (max-width: 768px) {
  /* -- 专题头统计标签：第 4 个去掉（群英传「一人一集」/ 物产「地标物产」/ 非遗「国家级非遗」） -- */
  body.wb-mtrim .wb-topic__stats > span:last-child { display: none; }

  /* -- 分页：页码数字收窄，一行容纳更多页 -- */
  body .wb-pager { gap: 4px; }
  body .wb-pager__nums { gap: 3px; }
  body .wb-pager__num { min-width: 30px; padding: 12px 3px; }
  body .wb-pager__gap { min-width: 16px; padding: 0 1px; }
}

/* ============================================================
   手机端差异设计 ･ 第四批补充（2026-10-03）
   ------------------------------------------------------------
   详情页面包屑：最后一级（文章标题/「正文」）去掉——下方已有
   完整标题，重复；面包屑字号 12px → 14px，看得更清。
   电脑版完全不动。
   ============================================================ */
@media (max-width: 768px) {
  .wb-page-post .wb-crumbs b { display: none; }
  .wb-page-post .wb-crumbs span:last-of-type { display: none; }
  body .wb-crumbs { font-size: 14px; }
  .wb-page-post .wb-crumbs a,
  .wb-page-post .wb-crumbs a:first-of-type { padding: 10px 2px; }
}

/* ============================================================
   手机端差异设计 ･ 第五批（2026-10-03）
   ------------------------------------------------------------
   1) 首页 hero 再精简：去掉「挑个栏目看/关注步哥」两个按钮、
      四个黑色像素图标；两段介绍合为一段；高度大幅缩短
   2) 专题头三块印章（绿块×2 + 白块）文字居中
   电脑版完全不动。
   ============================================================ */
@media (max-width: 768px) {
  /* -- 首页 hero -- */
  body.wb-page-home .wb-hero__actions { display: none; }
  body.wb-page-home .wb-icon-card { display: none; }
  body.wb-page-home .wb-hero__summary br { display: none; }
  body.wb-page-home .wb-hero__stage { min-height: 0; }
  body.wb-page-home .wb-hero__art { min-height: 0; }
  body.wb-page-home .wb-hero__metrics { position: static; padding: 14px 20px 4px; }
  body.wb-page-home .wb-hero__copy { padding-bottom: 6px; }

  /* -- 专题头印章：文字居中（body 前缀提特异性，pages.css 后加载） -- */
  body .wb-topic__seal {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
  }
  body .wb-topic__seal--wide { justify-content: center; }
}

/* ============================================================
   手机端差异设计 ･ 第六批（2026-10-03）
   ------------------------------------------------------------
   首页下方两块的「瘦身」：
   1)「怎么做出来的」黑块：4 步由 130px 大格 → 紧凑双行行式
   2)「关于步哥」绿块：4 个关注按钮竖排 → 2×2 网格；去掉装饰大图标
   电脑版完全不动。
   ============================================================ */
@media (max-width: 768px) {
  /* -- 怎么做出来的 -- */
  body.wb-page-home .wb-system { gap: 16px; margin-top: 34px; padding: 24px 18px; }
  body.wb-page-home .wb-system h2 { font-size: 27px; }
  body.wb-page-home .wb-system__intro .wb-pixel-label { margin-bottom: 10px; }
  body.wb-page-home .wb-system__intro > p:last-child { margin-top: 12px; font-size: 14px; line-height: 1.7; }
  body.wb-page-home .wb-system__steps li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: baseline;
    column-gap: 10px;
    min-height: 0;
    padding: 12px 14px;
  }
  body.wb-page-home .wb-system__steps b { position: static; grid-area: 1 / 1; font-size: 13px; }
  body.wb-page-home .wb-system__steps strong { grid-area: 1 / 2; margin: 0 0 4px; font-size: 12px; }
  body.wb-page-home .wb-system__steps span { grid-area: 2 / 2; font-size: 14px; }

  /* -- 关于步哥 -- */
  body .wb-about { min-height: 0; margin: 30px 4px 0; padding: 26px 20px; }
  body .wb-about h2 { margin-bottom: 10px; font-size: 27px; }
  body .wb-about__desc { margin-bottom: 8px; font-size: 14px; line-height: 1.7; }
  body .wb-about__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  body .wb-about .wb-button { width: auto; min-width: 0; min-height: 46px; padding: 0 10px; font-size: 14.5px; }
  body .wb-about__icon { display: none; }
}

/* ============================================================
   手机端差异设计 ･ 第七批（2026-10-03）
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* 1) 首页 hero 底部文案行（图文与短视频 / 地名、古国、人物 / 走不完的路）去掉 */
  body.wb-page-home .wb-hero__metrics { display: none; }
  body.wb-page-home .wb-hero__copy { padding-bottom: 18px; }

  /* 2) 黑块末句「这是「步哥看天下」给自己的规矩。」去掉 */
  body .wb-rule-note { display: none; }

  /* 3) 关于步哥：黑色大标题去掉（保留给读屏的可访问名，不用 display:none） */
  body .wb-about h2 {
    position: absolute;
    width: 1px; height: 1px;
    margin: 0; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* 4) 页脚：横线缩短居中；版权行只留「步哥看天下」与网址 */
  body .VPFooter { border-top: 0; padding: 20px 24px 22px; }
  body .VPFooter .container::before {
    content: "";
    display: block;
    width: 132px; height: 2px;
    margin: 0 auto 16px;
    background: var(--wb-line);
  }
  body .VPFooter .message .wb-foot-more { display: none; }

  /* 5) 地名史专题英文标签去掉尾段「& ONE CITY」 */
  body .wb-topic-en-tail { display: none; }
}

/* ============================================================
   手机版设计系统（2026-10-03）
   ------------------------------------------------------------
   只在窄屏生效，电脑版一行不动。依据 _probe/_audit-mobile-ui.js 体检：
   1) 字号下限 12px（原 58 类 8~11px 装饰小字）
   2) 正文 15px / 行高 1.75
   3) 对比度修到 WCAG AA（chip 选中态、海报片长、次要文字）
   4) 可点区域 ≥44px（WCAG 2.5.8 下限 24px 用于行内链接）
   5) 间距归 8px 栅格
   ============================================================ */

/* ---------- A. 底部导航条（与导航条同断点 ≤820px） ---------- */
@media (max-width: 820px) {
  /* 页面滚动到两端时的橡皮筋（overscroll）会把 fixed 底栏一起拖着弹动，
     手机版关掉滚动链让底栏稳定（iOS 16+/安卓 Chrome 支持；旧浏览器忽略） */
  html { overscroll-behavior-y: contain; }
  html.wb-has-mnav body { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

  .wb-mnav { padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .wb-mnav__item {
    min-height: 52px;
    gap: 4px;
    padding: 7px 2px;
    font-size: 12px;          /* 原 10.5px，底部主导航不可低于 12px */
    line-height: 1.25;
  }
}

/* ---------- B. 手机版排版 / 配色 / 触控（≤768px） ---------- */
@media (max-width: 768px) {
  :root {
    --m-fs-body: 15px;
    --m-lh-body: 1.75;
    --m-fs-meta: 13px;
    --m-fs-label: 12px;       /* 可读下限：手机上不再出现 <12px 的文字 */
    --m-tap: 44px;
    --m-gap: 12px;
    --m-pad: 16px;
  }

  /* --- 1) 全局正文刻度 --- */
  body {
    font-size: var(--m-fs-body);
    line-height: var(--m-lh-body);
  }

  /* --- 2) 字号下限：所有 8~11px 装饰小字提到 12px --- */
  body small,
  body .wb-drawer__txt small { font-size: var(--m-fs-label); }
  body .wb-mnav__item,
  body .wb-mnav__item span { font-size: var(--m-fs-label); }
  body .wb-hero__metrics,
  body .wb-hero__metrics span,
  body .wb-hero__metrics b { font-size: var(--m-fs-label); }
  body .wb-figure__tag,
  body .wb-figure__era,
  body .wb-off__cat,
  body .wb-off__cat b,
  body .wb-kind,
  body .wb-post-card__meta,
  body .wb-post-card__meta span,
  body .wb-sr__meta span,
  body .wb-sr__tags b,
  body .wb-sr__date,
  body .wb-chip b,
  body .wb-hero-filter__btn b,
  body .wb-dyn__count,
  body .wb-dyn__events summary,
  body .wb-channel-card__tags b,
  body .wb-produce-card__county,
  body .wb-produce-card__alias,
  body .wb-produce-card__cert,
  body .wb-produce-card__go,
  body .wb-rankbar__step i,
  body .wb-tier__num,
  body .wb-county-card__era,
  body .wb-county-card__en,
  body .wb-county-card__vid,
  body .wb-era__when,
  body .wb-era__former,
  body .wb-era__en,
  body .wb-era__span,
  body .wb-note__no,
  body .VPNavBarTitle__mark { font-size: var(--m-fs-label); }

  /* --- 3) 正文/说明：13px 提到 14px；版权行 12 → 13px --- */
  body .wb-pixel-label { font-size: 14px; }
  body .wb-legend-card__desc { font-size: 14px; line-height: 1.6; }
  body .wb-search-count { font-size: 14px; }
  body .VPFooter .message { font-size: 14px; line-height: 1.7; }
  body .VPFooter .copyright { font-size: var(--m-fs-meta); }

  /* --- 4) 配色：只修对比度，品牌色不动 --- */
  /* 次要文字 #656b60 → #565c50（4.36:1 → 6.3:1），深色模式不覆盖 */
  html:not(.dark) body { --wb-muted: #565c50; }
  /* 选中态分类：白字压酸绿 1.26:1 → 墨字 15.4:1 */
  body .wb-chip.is-active,
  body .wb-chip.is-active b,
  body .wb-chip.is-active span { color: var(--wb-ink); }
  /* 群英传海报角标（年代 / 片长 / 副标）：本就是白字压深底，只需补字号。
     这里不做通配改色——「拍摄制作中」徽标是深字压浅底，通配会把它变白看不见。 */
  body .wb-hero-card__era,
  body .wb-hero-card__dur,
  body .wb-hero-card__sub { font-size: var(--m-fs-label); }

  /* --- 5) 触控目标 ≥44px（行内链接按 WCAG 2.5.8 ≥24px） --- */
  /* 导航小图标：视觉保持 38 / 36 的轻巧感（此前按你的要求收窄过，不再改大），
     改用透明热区把「可点范围」撑到 44×44 —— 热区不等于视觉大小 */
  body .wb-burger { position: relative; width: 38px; height: 38px; }
  body .wb-burger::after { content: ""; position: absolute; inset: -3px; }
  body .VPSocialLink { position: relative; width: 36px; height: 36px; }
  body .VPSocialLink::after { content: ""; position: absolute; inset: -4px; }
  body .wb-chip { min-height: var(--m-tap); padding: 10px 14px; }
  body .wb-hero-filter__btn { min-height: var(--m-tap); padding: 10px 16px; }
  body .wb-search-hot__tag { min-height: var(--m-tap); padding: 10px 14px; }
  body .wb-pager__num { min-height: var(--m-tap); }   /* 只加高不加宽：非遗 7 页仍要单行 */
  body .wb-crumbs a { padding-block: 12px; }
  body .VPFooter .message a { display: inline-block; padding: 8px 6px; min-height: 24px; }

  /* --- 6) 键盘/读屏焦点可见 --- */
  body a:focus-visible,
  body button:focus-visible,
  body [tabindex]:focus-visible {
    outline: 3px solid var(--wb-accent-deep);
    outline-offset: 2px;
    border-radius: 6px;
  }

  /* --- 7) 间距归 8px 栅格（此前自建块里的 26/30/34/18 → 24/32/16） --- */
  body .wb-about { padding: 24px 20px; }
  body .wb-system { padding: 24px 16px; margin-top: 32px; }
  body .wb-about { margin: 32px 4px 0; }
}

/* ============================================================
   手机版设计系统 ･ 补充（2026-10-03）
   体检复测后补齐：pages.css 里 class+小字 的规则特异性更高，
   需要用同样带 class 的选择器（部分加 !important）才能压住。
   ============================================================ */
@media (max-width: 768px) {
  /* --- 字号下限补齐（原 8~11px） --- */
  body .wb-value-strip__item small,
  body .wb-traffic__metrics small,
  body .wb-system__steps b,
  body .wb-listbar__page,
  body .wb-search-hot__label,
  body .wb-about__note,
  body .wb-chip__n,
  body .wb-chip i,
  body .wb-pager-nav small { font-size: var(--m-fs-label); }
  /* 首页子类卡英文标签（原 9px，需与同特异性规则对齐才能覆盖） */
  body.wb-page-home .wb-legend-card small { font-size: var(--m-fs-label); }

  /* --- 对比度：分类选中态白字压酸绿 1.26:1 → 墨字 15.4:1 --- */
  body .wb-chip.is-active,
  body .wb-chip.is-active b,
  body .wb-chip.is-active span,
  body .wb-chip.is-active i { color: var(--wb-ink) !important; }
  body .wb-chip.is-active .wb-chip__n { color: var(--wb-ink) !important; border-color: rgba(17, 19, 14, .38); }

  /* --- 触控：搜索页页码按钮补到 44px --- */
  body .wb-pager__btn { min-height: var(--m-tap); }
}

/* 手机版设计系统 ･ 补充二（2026-10-03）
   首页频道卡英文标签 9px、计数 11px；知识库页统计说明 11px（kb.css 断点 760px） */
@media (max-width: 768px) {
  body .wb-channel-card__titles small,
  body .wb-channel-card__count,
  body .wb-kbhead__stats span,
  body .wb-kbhead__stats b small { font-size: var(--m-fs-label); }
}

/* 手机版设计系统 ･ 补充三（2026-10-03）：最后 9 类 8~11px 装饰小字 */
@media (max-width: 768px) {
  body .wb-chip span,
  body .wb-dyn__count span,
  body .wb-county-card__facts i,
  body .wb-figure-group__head .n,
  body .wb-topic__seal i,
  body .wb-dynjump__label,
  body .wb-channel-child__top small,
  body .wb-dynpick label,
  body .wb-rankbar__label { font-size: var(--m-fs-label); }
}

@media (max-width: 768px) {
  /* 分类 chip 的计数角标由 JS 写成 inline「font-size:11px」，只能用 !important 压到 12px */
  body .wb-chip span { font-size: var(--m-fs-label) !important; }
}

/* 手机版设计系统 ･ 补充四（2026-10-03）：知识库页剩余触控目标 */
@media (max-width: 768px) {
  body .wb-pcard__btn { min-height: var(--m-tap); }          /* 36 → 44 */
  body .wb-off__more { min-height: var(--m-tap); padding-block: 10px; }  /* 30 → 44 */
  body .wb-poff { min-height: 40px; padding-block: 9px; }     /* 32 → 40（密集标签，AA 下限 24） */
}

@media (max-width: 768px) {
  /* 深色模式下「步」logo：酸绿底 + 跟随 --wb-ink 的浅色字 = 浅压浅 1.14:1，手机端固定深字压酸绿 */
  html.dark body .VPNavBarTitle__mark { color: #0d0f0a; border-color: #0d0f0a; }
}

/* ============================================================
   手机端差异设计 ･ 第八批（2026-10-03）
   ------------------------------------------------------------
   1) 关于步哥：去掉「关注后可在第一时间收到新片更新」，
      正文与下方关注按钮之间留白加大
   2) 页脚重新设计：手机端换成有分量的站脚（品牌 + 一句话 +
      栏目入口 + 网址 / 版权），去掉那条孤零零的灰色短线
   3) 首页 hero：文字与下方板块之间的留白加大
   4) 面包屑改造：手机端换成「底部导航没覆盖到的栏目」快捷条
   5) 卡片「点两次才进页面」：首页板块卡只有标题是链接，卡身是
      死区；手机端把整张卡做成可点，并把 hover 位移/阴影换成按下反馈
   电脑版完全不动。
   ============================================================ */

/* 手机端顶部栏目快捷条：桌面端不显示（节点由 app.js 在窄屏下注入） */
.wb-chnav { display: none; }
/* 手机端专属站脚：桌面端不显示（节点由 _tools/patch-foot-mobile2.py 注入） */
.wb-footm { display: none; }

@media (max-width: 768px) {
  /* ---------- 1. 关于步哥 ---------- */
  body .wb-about__note { display: none; }
  body .wb-about__desc { margin-bottom: 22px; }

  /* ---------- 3. 首页 hero：文字与下方之间的留白 ---------- */
  body.wb-page-home .wb-hero__copy { padding-bottom: 42px; }
  /* 顶部英文标签（VIDEO & ARTICLE ･ 7 CHANNELS ･ 2026）在 390px 宽会被折成两行，
     降回 12px 一行放下（12px 是可读下限，不再往下压） */
  body.wb-page-home .wb-hero__copy .wb-pixel-label { font-size: var(--m-fs-label); }

  /* ---------- 4. 面包屑 → 栏目快捷条 ---------- */
  body .wb-crumbs { display: none; }
  .wb-chnav {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 12px 0 4px;
  }
  /* 2026-10-03 手机版去顶（收敛为整条隐藏）：「步」标记、☰ 汉堡先后去掉后，
     顶栏只剩「关注」图钉图标（.VPSocialLink）与一条空白粘性条——
     用户要求整条去掉，直接隐藏 header.VPNav（含底边线与占位高度）。 */
  header.VPNav { display: none; }
  /* 2026-10-03 搜索页：隐藏栏目筛选 chips（全部/九县地名史/天中群英传/…），
     手机端只保留搜索框、热门推荐与「属地/排序」行。
     用 body 前缀提高特异性：pages.css 后加载，同特异性会反压。 */
  body .wb-filters__chips { display: none; }
  /* 2026-10-03 第十三轮：①「更多栏目」横滑条全站手机端去掉（含首页本就不注入）；
     ②页脚只留版权行（bookvista.cn + Copyright），品牌/标语/栏目导航整块去掉。
     用 body 前缀压过同块内靠后的页脚重设计规则（同特异性后者会赢）。 */
  body .wb-chnav { display: none; }
  body .wb-footm__brand,
  body .wb-footm__tag,
  body .wb-footm__nav { display: none; }
  body .wb-footm { padding: 10px 16px 14px; }
  /* 2026-10-03 第十四轮：①ABOUT 卡四个按钮上提——卡内 flex 间距 34→14、
     简介下边距 22→6（原文案距按钮 ~56px，视觉太空）；②版权行上提——
     main 底部 padding 52→24 */
  body .wb-about { gap: 14px; }
  body .wb-about__desc { margin-bottom: 6px; }
  body .wb-home { padding-bottom: 24px; }
  /* 2026-10-03 第十五轮：列表卡片（地名传说/消失的古国）隐藏「N 分钟」阅读时长小字 */
  body .wb-post-card__readtime { display: none; }
  .wb-filters { margin-top: 0; }
  .wb-chnav__label {
    flex: 0 0 auto;
    font-family: var(--wb-pixel);
    font-size: var(--m-fs-label);
    color: var(--wb-label-moss);
    letter-spacing: .04em;
  }
  .wb-chnav__rail {
    display: flex;
    flex: 1 1 auto;
    gap: 8px;
    min-width: 0;
    padding: 4px 24px 8px 2px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
  }
  .wb-chnav__rail::-webkit-scrollbar { display: none; }
  .wb-chnav__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    min-height: 44px;          /* 独立触控目标：设计系统下限 44px */
    padding: 11px 16px;
    border: 1px solid var(--wb-line);
    border-radius: 999px;
    background: var(--wb-surface);
    color: var(--wb-ink);
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
  }
  .wb-chnav__item.is-active {
    border-color: #11130e;
    background: var(--wb-acid);
    color: var(--wb-on-acid, #11130e);
    font-weight: 700;
    box-shadow: 3px 3px 0 var(--wb-ink);
  }

  /* ---------- 2. 页脚重新设计 ---------- */
  body .VPFooter {
    /* 2026-10-03 第十四轮：版权行上提（margin-top 32→12）+ 去掉上方绿色粗线 */
    margin-top: 12px;
    padding: 0;
    border-top: 0;
    background: var(--wb-surface);
  }
  /* 去掉那条 132px 灰色短线 */
  body .VPFooter .container::before { display: none; }
  /* 电脑版那两行由手机版站脚接管 */
  body .VPFooter .message,
  body .VPFooter .copyright { display: none; }

  /* 2026-10-03 手机版页脚重设计：压缩行距、整体更轻更紧凑 */
  .wb-footm {
    display: block;
    padding: 16px 16px 18px;
    text-align: center;
  }
  .wb-footm__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 4px;
    color: var(--wb-ink);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.02em;
  }
  .wb-footm__seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid #11130e;
    background: var(--wb-acid);
    color: var(--wb-on-acid, #11130e);
    font-size: 11px;
    font-weight: 800;
  }
  .wb-footm__tag {
    margin: 0 0 8px;
    color: var(--wb-muted);
    font-size: 11.5px;
    line-height: 1.4;
  }
  .wb-footm__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 6px;
    margin: 0 0 8px;
  }
  .wb-footm__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 7px;
    color: var(--wb-muted);
    font-size: 12.5px;
    text-decoration: none;
  }
  .wb-footm__nav a:hover { color: var(--wb-ink); }
  .wb-footm__meta {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2px 10px;
    margin: 0;
    font-size: 11px;
  }
  .wb-footm__url,
  .wb-footm__about {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    color: var(--wb-label-moss);
    font-family: var(--wb-pixel);
    font-size: 11px;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .wb-footm__copy {
    color: var(--wb-muted);
    font-size: 10.5px;
  }

  /* ---------- 5. 卡片「点两次才进页面」 ---------- */
  /* 首页板块卡：整卡只有一个标题链接，卡身（描述 / 标签 / 空白）都是死区，
     点了没反应，只能再点一次标题。手机端用拉伸热区把整张卡变成可点，
     卡内的子栏目链接保持在热区之上，依旧可单独点。 */
  body.wb-page-home .wb-channel-card { position: relative; }
  body.wb-page-home .wb-channel-card__head::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  body.wb-page-home .wb-channel-card__desc,
  body.wb-page-home .wb-channel-card__tags,
  body.wb-page-home .wb-channel-card__count { pointer-events: none; }
  body.wb-page-home .wb-channel-card__children,
  body.wb-page-home .wb-channel-child { position: relative; z-index: 1; }

  /* 触摸屏没有 hover：第一下点上去卡片先位移、长出阴影（看着像点中了），
     却不进页面——这是「要点两次」的另一半原因。把 hover 的位移 / 阴影
     关掉（保住基础态），改成按下（:active）时给一次反馈。
     注：列表里都是「基础态无阴影、只有 hover 才加阴影」的卡片，
     不会误伤 kbhead / topic / filters 这类常驻阴影的块。 */
  body :where(.wb-channel-card, .wb-legend-card, .wb-post-card, .wb-county-card,
       .wb-hero-card, .wb-produce-card, .wb-sr, .wb-rel a, .wb-pcard, .wb-figure,
       .wb-off, .wb-era__node, .wb-chip, .wb-pager__num,
       .wb-pager__btn, .wb-pager-nav a):hover {
    transform: none !important;
    box-shadow: none !important;
  }
  body :where(.wb-legend-card, .wb-post-card, .wb-county-card, .wb-hero-card,
       .wb-produce-card, .wb-sr, .wb-rel a, .wb-pcard, .wb-figure,
       .wb-off, .wb-era__node, .wb-chip):active {
    transform: translate(-2px, -2px) !important;
    box-shadow: 4px 4px 0 var(--wb-ink) !important;
  }
  body.wb-page-home .wb-channel-card:active,
  body.wb-page-home .wb-channel-card:has(.wb-channel-card__head:active) {
    transform: translate(-2px, -2px) !important;
    box-shadow: 4px 4px 0 var(--wb-ink) !important;
    border-color: var(--wb-ink) !important;
  }
}

/* ============================================================
   站点数据卡位置（2026-10-04 用户拍板）
   ------------------------------------------------------------
   所有栏目页（wb-page-list）与历史知识库查询页（wb-page-kb）的站点数据卡
   （UPDATED / 视频总量…）统一放在页面最下方、「关于步哥」之上，并留间距。
   实现方式已改为**直接调整 HTML 的 DOM 顺序**（数据卡紧邻 .wb-about 之前），
   不再用 flex order 硬排——历史教训：把 order 写在 body .wb-home > .wb-traffic
   这类宽选择器上，会让所有页面一起被挪动，极易误伤（详见 2026-10-04 修复）。
   因此这里不再需要任何 order/display 规则；间距由 CSS 现有 margin 提供：
     ･ 数据卡自身 margin-top：桌面 22px / 手机 24px（见 ≤768px 段）
     ･ .wb-about 自身 margin-top：手机 32px
   古国页原先的「简介卡 ↔ 数据卡」互换也随之简化：简介卡仍在列表之前，
   数据卡与其他栏目页一样落到最下方。
   ============================================================ */

/* ============================================================
   手机端差异设计 ･ 第五批（2026-10-03）
   ------------------------------------------------------------
   原则不变：电脑版完全不动，以下全部只在 ≤768px 生效。
   首页绿色头部重设计（方案 B「绿底瘦身」）：
     ① 手机版隐藏那段 4 行长介绍（它把首屏占满 329px，多半被跳过）
     ② 换成 4 个价值标签（实地探访/考据史料/视频讲述/图文沉淀）
     ③ 加一行站点数据（198 集短视频 / 7 个栏目 / 258 处走访 / 128.6万 关注）
        —— 用 data-hstat 由 app.js 从 data/site.js 的 stats 自动填充，
           后台改数字这里跟着变，不会写死。
     ④ 首屏高度 329px → 275px，一屏能多露一张栏目卡
   两个新块桌面端 display:none，所以电脑版像素级不变。
   ============================================================ */

/* 默认（桌面）：新增的两块不参与布局 */
.wb-hero__tags,
.wb-hero__stats { display: none; }

/* 首页 hero 右上角照片（2026-10-04 新增）：仅手机版首页显示，桌面走原有像素图标区 */
.wb-hero__portrait { display: none; }

@media (max-width: 768px) {
  /* -- 首页头部：紧凑化 -- */
  body.wb-page-home .wb-hero__copy { padding: 26px 20px 22px !important; position: relative; }
  /* 右上角照片：原样显示（不调色、不抠底），深浅两版共用同一套尺寸（与深色版一致，
     收小一档保证不压上方像素标签）。锚定在 .wb-hero__head 底边 → 照片底部与标题底边对齐。
     注意：素材底部约 18% 是融入背景的渐隐区（肉眼不可见），贴底会让「看得见的人物」整体偏上；
     故按宽度等比下移 5%（轻度补偿偏上感，用户实测 9% 略低）。
     （下移覆盖到的正好是不可见的渐隐区，不会遮挡下方标签） */
  body.wb-page-home .wb-hero__head { position: relative; }
  body.wb-page-home .wb-hero__portrait {
    --wb-portrait-w: clamp(60px, 18vw, 78px);
    display: block;
    position: absolute;
    bottom: calc(var(--wb-portrait-w) * -0.05);
    right: -8px;                  /* 容器 .wb-hero__head 比 copy 内容区窄 20px（含右内边距），负偏移补回贴边 */
    width: var(--wb-portrait-w);
    height: auto;
    pointer-events: none;
    z-index: 0;
  }
  /* ≤360px：再收一档，保证不压「步哥看天下」标题文字 */
  @media (max-width: 360px) {
    body.wb-page-home .wb-hero__portrait { --wb-portrait-w: 52px; right: -10px; }
  }
  /* 深色（华夏纪年古纸配色）下 hero 是暖白纸面，换用同构图「古纸版」照片：
     默认藏古纸版，深色下互换（尺寸与浅色版完全一致） */
  body.wb-page-home .wb-hero__portrait--paper { display: none; }
  body.wb-page-home .wb-hero__portrait--ink { display: none; }
  html.dark body.wb-page-home .wb-hero__portrait--acid { display: none; }
  html.dark body.wb-page-home .wb-hero__portrait--paper { display: block; }
  /* 夜（ink，墨黑底）用「墨色版」照片（底部已是墨色，衔接墨底 hero） */
  html.ink body.wb-page-home .wb-hero__portrait--paper { display: none; }
  html.ink body.wb-page-home .wb-hero__portrait--ink { display: block; }
  body.wb-page-home .wb-hero__copy .wb-pixel-label { margin-bottom: 0; }
  body.wb-page-home .wb-hero__copy h1,
  body.wb-page-home .wb-hero__copy .wb-hero__title--main {
    margin: 10px 0 0;
    font-size: 40px;
  }
  /* 长介绍只在手机版隐藏 */
  body.wb-page-home .wb-hero__summary { display: none !important; }

  /* 站点数据条：手机版首页头部（.wb-hero__stats）已是同一组数据，去掉下方重复块。
     只作用于首页——其他栏目页手机端顶部没有这组数据，仍需保留该块。 */
  body.wb-page-home .wb-traffic { display: none !important; }

  /* -- 价值标签：固定 4 列一行（窄屏不再折成 3+1 两行） --
     原来用 flex + wrap，标签一多就在窄屏换行，视觉上参差不齐；
     改成 4 等分网格：任何手机宽度都严格一行，四块等宽、文字居中。 */
  body.wb-page-home .wb-hero__tags {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
  }
  body.wb-page-home .wb-hero__tags span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 4px;
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
    text-align: center;
    color: #11130e;
    border: 1px solid #11130e;
    background: rgba(255, 255, 255, .55);
  }

  /* -- 数据行（去掉上下两条横线） -- */
  body.wb-page-home .wb-hero__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 18px;
  }
  body.wb-page-home .wb-hero__stats span {
    padding: 9px 2px;
    text-align: center;
    font-size: 11px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--wb-ink) 62%, transparent);
  }
  body.wb-page-home .wb-hero__stats b {
    display: block;
    font-size: 18px;
    font-weight: 400;
    color: var(--wb-ink);
  }
}

/* ============================================================
   超窄屏兜底（≤360px，如 iPhone SE / 老款安卓）
   ------------------------------------------------------------
   价值标签已是 4 等分网格，这里再把内距与字号收一档，
   确保 320~360px 宽的老机型上 4 个标签仍然严格一行、不溢出。
   ============================================================ */
@media (max-width: 360px) {
  body.wb-page-home .wb-hero__tags { gap: 6px; }
  body.wb-page-home .wb-hero__tags span {
    padding: 6px 2px;
    font-size: 11px;
    letter-spacing: -.02em;
  }
}

/* ============================================================
   深色模式 ･ 古纸配色修正（配色取自华夏纪年速查）
   米黄纸 #f6f1e7 / 暖白卡 #fffdf7 / 深褐 #3a352c / 赭红 #8c2f28
   原深色主题把深墨字硬编码在荧光绿底上，换赭红底后统一翻暖白；
   hero 改为「暖白纸面 + 赭红标题」，贴近华夏纪年页头气质。
   ============================================================ */
html.dark ::selection { color: #fffdf7; background: #8c2f28; }

/* hero：暖白纸面 + 赭红标题 + 深褐正文 */
html.dark .wb-hero,
html.dark .wb-hero__stage { background: var(--wb-surface); }
html.dark .wb-hero { border-color: var(--wb-line); box-shadow: 0 18px 60px #8a827126; }
/* hero 文字选区观感与浅色模式一致：选区透明、文字色与正文相同 → 看不出被选中（2026-10-08）
   （::selection 的 color:inherit 在 Chrome 取值异常，故显式写死与正文同色） */
html.dark .wb-hero ::selection { background: transparent; }
html.dark .wb-hero .wb-pixel-label::selection,
html.dark .wb-hero h1::selection,
html.dark .wb-hero .wb-hero__title--main::selection { color: var(--wb-acid); }
html.dark .wb-hero .wb-hero__summary::selection { color: var(--wb-ink); }
html.dark .wb-hero__copy .wb-pixel-label { color: var(--wb-acid); }
html.dark .wb-hero__copy h1,
html.dark .wb-hero__copy .wb-hero__title--main { color: var(--wb-acid); }
html.dark .wb-hero__summary { color: var(--wb-ink); }
html.dark .wb-hero__metrics { color: var(--wb-muted); }

/* 赭红底图块 / 标签：深字翻暖白 */
html.dark .VPNavBarTitle__mark,
html.dark .wb-channel-card__icon,
html.dark .wb-channel-child__icon,
html.dark .wb-legend-card__icon,
html.dark .wb-chnav__item.is-active { color: #fffdf7; }
html.dark .wb-chnav__item.is-active { border-color: #3a352c; box-shadow: 3px 3px 0 #3a352c; }

/* 关于步哥区块（同款赭红大底） */
html.dark .wb-about { border-color: #3a352c; color: #fffdf7; }
html.dark .wb-about h2,
html.dark .wb-about__desc { color: #fffdf7; }
html.dark .wb-about .wb-pixel-label,
html.dark .wb-about__note { color: #f7e9e7; }
html.dark .wb-about__icon { color: #fffdf717; }
html.dark .wb-about .wb-button { color: #fffdf7 !important; border-color: #fffdf7; }
html.dark .wb-about .wb-button:hover { box-shadow: 4px 4px #fffdf7; }
html.dark .wb-about .wb-button--primary { color: #8c2f28 !important; background: #fffdf7; border-color: #fffdf7; }
html.dark .wb-about .wb-button--primary:hover { box-shadow: 4px 4px #3a352c; }

/* 按钮：主按钮改赭红底白字（同华夏纪年按钮） */
html.dark .wb-button { border-color: var(--wb-ink); color: var(--wb-ink) !important; }
html.dark .wb-button:hover { box-shadow: 4px 4px #3a352c; }
html.dark .wb-button--primary { color: #fffdf7 !important; background: #8c2f28; border-color: #8c2f28; }
html.dark .wb-button--acid { color: #fffdf7 !important; background: #3a352c; border-color: #3a352c; }

/* 模式切换圆点：赭红柄 */
html.dark .VPSwitchAppearance .vpi-moon { border-color: var(--wb-ink); background: #8c2f28; }

/* ============================================================
   手机端差异设计 ･ 第四批（2026-10-05）
   ------------------------------------------------------------
   原则不变：电脑版完全不动，以下全部只在 ≤768px 生效。
   1) 古国页专题头上方留白收紧：.wb-section 手机版 pt 48px 是
      普通板块的节奏，但古国页首个 section 就是专题头白卡，
      48px 使它比其他栏目页（.wb-topic 组件 pt 24）多出一截
      空白。收到 24px 后与天中群英传 / 九县地名史完全一致。
   ============================================================ */
@media (max-width: 768px) {
  body.wb-page-kingdom .wb-section { padding-top: 24px; }
}

/* ============================================================
   手机端差异设计 ･ 第五批（2026-10-05）
   ------------------------------------------------------------
   原则不变：电脑版完全不动，以下全部只在 ≤768px 生效。
   1) 详情页「关于步哥」上方留白收紧：详情页 .wb-page 容器
      自带 padding-bottom（电脑 72 / 手机 48），而「关于步哥」
      紧跟其后，叠加自身 margin-top 后视觉间距（电脑约 144px、
      手机约 80px）远大于首页节奏。详情页容器贴住 about，
      间距统一由 about 的 margin-top 提供（与 kb 速查页
      .wb-page-kb .wb-page { padding-bottom: 0 } 同一先例）。
      电脑端同样命中（用户实测电脑端也偏大），故不限定屏宽。
   ============================================================ */
body.wb-page-post .wb-page { padding-bottom: 0; }

/* ============================================================
   手机端差异设计 ･ 2026-10-08（首页「深读天中」回归手机版）
   ------------------------------------------------------------
   首页「深读天中」六个入口（物产 / 非遗 / 打卡 / 之最 / 文保档案 /
   数字驻马店）回归手机版。

   背景：第四批曾把整个 #formats 板块在手机端隐藏，理由是「入口与
   上方栏目格重复」。但 #channelsGrid 的过滤名单后来扩到了
   ['best','hmap','produce','heritage','checkin','numbers']——正好
   就是这六个，于是手机首页反而一个入口也没有了。撤销隐藏。

   手机端同时做紧凑化：桌面每卡 116px 固定高、内边距 24px，六张排
   下来近 700px；手机压到内容高度（图标 26px、左右 16px 内边距），
   六张约 470px。电脑版完全不动，以下只在 ≤768px 生效。
   ============================================================ */
@media (max-width: 768px) {
  body.wb-page-home #formats { display: block; }

  /* 卡片：图标列 56 → 40px，去掉固定高，图标与标题顶部对齐 */
  body.wb-page-home #formats .wb-task-grid a {
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    min-height: 0;
    padding: 15px 16px 16px;
  }
  body.wb-page-home #formats .wb-task-grid .hl {
    grid-row: 1 / 3;
    align-self: start;
    padding-top: 1px;
    font-size: 26px;
  }
  body.wb-page-home #formats .wb-task-grid strong { font-size: 16px; line-height: 1.5; }
  body.wb-page-home #formats .wb-task-grid span { margin-top: 3px; font-size: 12.5px; line-height: 1.68; }
}

/* ============================================================
   PWA 版本更新细条（2026-10-08）
   页面长期驻留时 SW 装上新版本 → 底部弹一条，点「刷新」加载最新内容。
   手机端上移，避开固定底部导航（72px + 安全区）。
   ============================================================ */
.wb-update-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 28px);
  padding: 10px 10px 10px 16px;
  background: var(--wb-surface);
  color: var(--wb-ink);
  border: 2px solid var(--wb-ink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--wb-acid);
  font-size: 14px;
  animation: wb-update-in .22s ease;
}
@keyframes wb-update-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.wb-update-bar__txt { font-weight: 700; white-space: nowrap; }
.wb-update-bar__btn {
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 8px;
  color: var(--wb-on-acid, var(--wb-ink));
  background: var(--wb-acid);
  border: 2px solid var(--wb-ink);
  white-space: nowrap;
}
.wb-update-bar__btn:hover { box-shadow: 2px 2px 0 var(--wb-ink); }
.wb-update-bar__x {
  font: inherit;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--wb-muted);
}
@media (max-width: 820px) {
  .wb-update-bar {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 14px);
    font-size: 13px;
    gap: 9px;
  }
  .wb-update-bar__txt { white-space: normal; }
}