/* 站点外框对齐层（2026-10-11）
   背景：/yjh/、/dm/、/dashang/ 三页引用的是 原共享基础层（首页皮肤，--h-maxw:1200px、
   顶栏写死 66px 高、导航小圆角 7px/14.5px）；而其余工具页引用各自的自包含基础层
   （--wb-maxw:1320px、顶栏内容自适应高、导航 999px 药丸 15px/600、当前页白字渐变）。
   结果：这三页的顶栏宽度、导航按钮尺寸/高度与其他页不一致。

   做法：本文件在 原共享基础层 之后加载，用同特异性（.home 前缀）覆盖，
   把顶栏/导航/页脚参数对齐到与工具页基础层一致。
   注意：只统一「站点外框」，各页正文内容区宽度保持各自布局需要（工具页本身也不统一）。 */

/* 全站统一字体栈：原共享基础层 没有给 body 设 font-family，导致这三页回落到
   Times New Roman（衬线体），导航与正文都和其余工具页不是一个字体。
   取自工具页基础层（工具页基础层 → 各 {page}.css 的基础段）。 */
.home,
.home body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Helvetica Neue", Arial, sans-serif;
}

/* 🔴 几何对齐（2026-10-11 补）：原共享基础层 既没重置 body 外边距/内边距，也在
   `body.home` 里把 --page-pad-x 写死成 0px，于是这几页 body 带浏览器默认 8px 边距、
   顶栏的「负边距撑满」完全失效，顶栏容器比工具页窄 28px、左右位置也不同
   （工具页 1292px@-6px，这里 1264px@+8px）。
   ⚠️ 必须用 `body.home` 而不是 `.home` —— 原共享基础层 那条是元素+类选择器（特异性更高），
      写成 `.home` 会被它压住（实测就是这样：写了 20px 结果算出 0px）。
   下面按工具页基础层的同一组值补齐：body 内边距 0 14px 40px + --page-pad-x 20px。 */
body.home {
  margin: 0;
  padding: 0 14px 40px;
  --page-pad-x: 20px;
}

/* 正文主容器宽度：以工具页标准 1320px 为准（原共享基础层 原本是 1200px） */
.home .h-main { max-width: 1320px; padding-left: 24px; padding-right: 24px; }

/* 导航是弹性子项，默认 min-width:auto 不肯收缩到内容宽度以下，
   导航项一多（现在 11 项）就会把整页横向撑宽。置 0 后由 overflow-x:auto 内部横向滚动。 */
.home .site-nav { min-width: 0; }

/* 长 URL / 代码块在窄屏会把页面横向撑宽（yjh 的 API 文档里 fetch 示例长 693px），
   允许在任意位置折行，pre 块内部横向滚动。 */
.home code { overflow-wrap: anywhere; word-break: break-all; }
.home pre { overflow-x: auto; }

.home .site-header {
  z-index: 50;
  border-bottom: 1px solid #e7eaf1;
  box-shadow: 0 1px 12px rgba(31, 41, 55, .04);
}

/* 顶栏：1320px 宽、内容自适应高度（去掉 原共享基础层 写死的 66px） */
.home .site-header__inner {
  max-width: 1320px;
  padding: 12px 24px;
  height: auto;
  gap: 20px;
}

.home .site-header .brand {
  font-size: 21px;
  line-height: 1.6;          /* 与工具页一致：否则品牌文字行高 1.75 会把顶栏撑高 2px */
  letter-spacing: .5px;
  color: #0f172a;
}
.home .site-header .brand .logo {
  width: 34px; height: 34px; border-radius: 10px;
  font-size: 18px; font-weight: 900;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .35);
}
.home .site-header .brand b {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 导航：药丸按钮 + 与工具页一致的字号字重和当前页样式 */
.home .site-nav { gap: 6px; justify-content: flex-start; }
.home .site-nav a {
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;          /* 与工具页一致：15px × 1.6 → 按钮高 42px */
  color: #475569;
}
.home .site-nav a:hover { color: #2563eb; background: #eef2ff; }
.home .site-nav a.active {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .3);
}

/* 页脚：与工具页同一宽度与栅格间距 */
.home .wb-footer { border-top: 1px solid #e7eaf1; }
.home .wb-footer__inner {
  max-width: 1320px;
  padding: 0 24px;
  gap: 36px;
  grid-template-columns: 1.35fr 1fr 1fr;
}

/* ---------- 响应式：断点与工具页一致（860 / 560） ---------- */
@media (max-width: 860px) {
  .home .site-header__inner { padding: 9px 12px; gap: 10px; }
  .home .site-header .brand { font-size: 17px; }
  .home .site-header .brand .logo { width: 28px; height: 28px; border-radius: 8px; font-size: 15px; }
  .home .site-nav a { padding: 7px 12px; font-size: 13.5px; line-height: 22px; }
  .home .wb-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  /* 小屏与工具页一致：顶栏贴边铺满（390px 视口下正好 390@0） */
  /* 小屏与工具页一致：body 左右各留 10px（标准页在此断点是 padding:0 10px），
     之前这里写成 0，导致手机端内容比标准页宽 8px。 */
  body.home { padding: 0 14px 40px; --page-pad-x: 20px; }
  .home .wrap,
  .home .pv-wrap,
  .home .ys-wrap,
  .home .fw-wrap,
  .home .dm-wrap,
  .home .ds-main { padding-left: 12px; padding-right: 12px; }
  .home .wb-footer__inner { grid-template-columns: 1fr; gap: 22px; padding: 0 14px; }
}
/* ============================================================
   导航「更多」下拉（2026-10-11）
   为什么改：11 个入口在 1280px 下已超出容器、再加工具必然被裁，
   1024px 下更是一半看不见。改为「常驻 4 项 + 更多下拉」后顶栏宽度恒定。
   导航渲染由本页 js 的 initNav() 提供，本文件只负责样式。
   ============================================================ */

/* 下拉容器：定位上下文 */
.home .site-nav,
.site-nav { position: relative; }

/* 「更多」触发按钮 —— 做成和普通导航项同样的药丸，视觉统一 */
.home .site-nav .nav-more { position: relative; flex: 0 0 auto; display: inline-flex; }

.home .site-nav .nav-more__btn,
.site-nav .nav-more__btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 0; background: transparent; cursor: pointer;
  font: 600 15px/1.6 inherit; color: #475569;
  white-space: nowrap; transition: .16s;
}
.home .site-nav .nav-more__btn:hover,
.site-nav .nav-more__btn:hover { color: #2563eb; background: #eef2ff; }
.home .site-nav .nav-more__btn svg { transition: transform .18s; }
.home .site-nav .nav-more.is-open .nav-more__btn svg { transform: rotate(180deg); }
.home .site-nav .nav-more.is-open .nav-more__btn,
.site-nav .nav-more.is-open .nav-more__btn { color: #2563eb; background: #eef2ff; }

/* 当前页在「更多」里面时，按钮保持高亮，让人知道自己在这页 */
.home .site-nav .nav-more.is-current .nav-more__btn,
.site-nav .nav-more.is-current .nav-more__btn {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .3);
}
.home .site-nav .nav-more.is-current .nav-more__btn:hover,
.site-nav .nav-more.is-current .nav-more__btn:hover { color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); }

/* 下拉面板：卡片浮层，靠右对齐避免超出屏幕 */
.home .site-nav .nav-more__menu,
.site-nav .nav-more__menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 168px; padding: 6px;
  background: #fff; border: 1px solid #e7eaf1; border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
  display: none; z-index: 60;
}
.home .site-nav .nav-more.is-open .nav-more__menu,
.site-nav .nav-more.is-open .nav-more__menu { display: block; }

.home .site-nav .nav-more__menu a,
.site-nav .nav-more__menu a {
  display: block; padding: 9px 12px; border-radius: 9px;
  font-size: 14.5px; font-weight: 600; color: #334155;
  text-decoration: none; white-space: nowrap; transition: .14s;
}
.home .site-nav .nav-more__menu a:hover,
.site-nav .nav-more__menu a:hover { background: #f1f5f9; color: #2563eb; }
.home .site-nav .nav-more__menu a.active,
.site-nav .nav-more__menu a.active {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}

/* 移动端：菜单项加大点击区域 */
@media (max-width: 560px) {
  .home .site-nav .nav-more__btn,
  .site-nav .nav-more__btn { padding: 7px 11px; font-size: 13.5px; }
  .home .site-nav .nav-more__menu a,
  .site-nav .nav-more__menu a { padding: 11px 12px; }
}

/* 🔴 关键修复：顶栏有 backdrop-filter 会创建层叠上下文，把下拉面板裁在头内。
   提升 .site-nav 的层叠等级并保证 header 不裁剪子元素，下拉才能正常浮出。 */
.home .site-header { overflow: visible; }
.home .site-nav { position: relative; z-index: 70; }
.home .site-nav .nav-more { z-index: 71; }
.home .site-nav .nav-more__menu { z-index: 72; }
.site-header { overflow: visible; }
.site-nav { position: relative; z-index: 70; }
.site-nav .nav-more { z-index: 71; }
.site-nav .nav-more__menu { z-index: 72; }

/* 🔴 菜单由本页 js 挂到 body 下（fixed 定位），
   因此样式必须能脱离 .site-nav 祖先命中，这里给一份独立的全局规则。 */
body > .nav-more__menu {
  position: fixed;
  min-width: 168px; padding: 6px;
  background: #fff; border: 1px solid #e7eaf1; border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
  display: none; z-index: 9999;
}
body > .nav-more__menu.is-open { display: block; }
body > .nav-more__menu a {
  display: block; padding: 9px 12px; border-radius: 9px;
  font-size: 14.5px; font-weight: 600; color: #334155;
  text-decoration: none; white-space: nowrap; transition: .14s;
}
body > .nav-more__menu a:hover { background: #f1f5f9; color: #2563eb; }
body > .nav-more__menu a.active {
  color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed);
}
@media (max-width: 560px) {
  body > .nav-more__menu a { padding: 11px 12px; }
}

/* ============================================================
   全站宽度标准（2026-10-11 大山钦定，以「视频去水印」页为唯一标准）
   内容容器：max-width 1320px + 左右 padding 24px
   ⚠️ 建新页面时直接写 .new-wrap{max-width:1320px;margin:0 auto;padding:40px 24px 24px}，
      不要自拟 980 / 900 / 860 之类（本站在 1320px 下改过一次）。
   下面这行是兜底：任何页面里的 .wrap / main 若被自设窄宽度，会被拉回标准。
   ============================================================ */
.home .wrap,
.home .pv-wrap,
.home .ys-wrap,
.home .fw-wrap,
.home .dm-wrap,
.home .ds-main { max-width: 1320px; }

/* ============================================================
   宽度兜底 · 收尾（2026-10-11）
   标准（视频去水印页）：桌面 1320px + padding 0 24px；小屏 body 左右 10px + 容器左右 12px。
   下面这组规则用 !important 盖住各页自带 CSS 的残留，
   保证任何页面（哪怕自设了 980/900/860 或小屏 padding 14/24）都会被拉回标准。
   ============================================================ */
@media (max-width: 560px) {
  body.home { padding: 0 10px 40px !important; }
  .home .wrap,
  .home main,
  .home .pv-wrap,
  .home .ys-wrap,
  .home .fw-wrap,
  .home .dm-wrap,
  .home .ds-main {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ============================================================
   全站宽度标准（2026-10-11 大山钦定，唯一事实来源 = 「视频去水印」页 qsy）
   实测 qsy 的计算值：
     body   : margin 0 / padding 0 14px 40px / --page-pad-x 20px
     header : margin-left -20px（负边距抵消 body 内边距，贴边铺满）
     .wrap  : max-width 1320px / padding 0 24px → 1080 视口下宽 1052、左边界 14
   ⚠️ 建新页面直接照抄下面这条，不要自拟 980/900/860：
       .xxx-wrap { max-width: 1320px; margin: 0 auto; padding: 40px 24px 24px; }
   ============================================================ */

/* 🔴 全站宽度标准（2026-10-11 大山钦定，唯一标准 = 「视频去水印」页 qsy）
   qsy 实测：body 0 14px 40px；.wrap{max-width:1320px; padding:0 24px}
   → 容器必须 box-sizing:border-box + 左右 24px，上下留白另用内部元素实现，
     否则 max-width 会把 padding 算进宽度，1440 宽屏下会比标准宽出 48px。 */
.home .wrap,
.home main,
.home .pv-wrap,
.home .ys-wrap,
.home .fw-wrap,
.home .dm-wrap,
.home .ds-main {
  box-sizing: border-box !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== 页脚统一为全站标准版（2026-10-16 追加：此前本文件没有通用页脚样式，qsy 等页页脚一直裸奔） ===== */
.wb-footer{margin-top:44px;border-top:1px solid #e7eaf1;background:linear-gradient(180deg,#fbfcfe,#f6f8fc);padding:44px 0 0;color:#64748b;font-size:14.5px;line-height:1.8;}
.wb-footer__inner{max-width:1320px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:36px;}
.wb-footer h4{margin:0 0 12px;font-size:15.5px;font-weight:800;color:#0f172a;display:flex;align-items:center;gap:7px;letter-spacing:0;}
.wb-footer h4::before{content:"";width:4px;height:15px;border-radius:2px;background:linear-gradient(180deg,#2563eb,#7c3aed);}
.wb-footer p{margin:0 0 10px;}
.wb-footer a{color:#64748b;text-decoration:none;display:inline-block;padding:3px 0;transition:.16s;}
.wb-footer a:hover{color:#2563eb;}
.wb-footer__tools{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;}
.wb-footer__tools a{font-size:13.5px;padding:3px 0;}
.wb-footer__bottom{max-width:1320px;margin:32px auto 0;padding:18px 24px calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid #e7eaf1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:13.5px;color:#94a3b8;}
.wb-icp{color:#64748b;text-decoration:none!important;white-space:nowrap;}
.wb-icp:hover{color:#2563eb;}
@media (max-width:900px){.wb-footer__inner{grid-template-columns:1fr 1fr;gap:28px;}}
@media (max-width:560px){.wb-footer{padding-top:32px;}.wb-footer__inner{grid-template-columns:1fr;gap:22px;padding:0 14px;}.wb-footer__bottom{padding-left:14px;padding-right:14px;justify-content:center;text-align:center;}}


/* ===== 全站导航 · 分类面板（每页独立内联，不共用 css） ===== */
.site-header__inner { position: relative; }
.site-nav .nav-more__btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 4px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--wb-blue); background: #fff; color: var(--wb-blue);
  font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.site-nav .nav-more__btn:hover { background: #eef2ff; }
.site-nav .nav-more__btn svg { transition: transform .2s; }
.site-nav .nav-more__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-mega {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  background: #fff; border-top: 1px solid var(--wb-line);
  box-shadow: 0 14px 34px rgba(15,23,42,.10);
  display: none;
}
.nav-mega.is-open { display: block; }
.nav-mega__inner {
  max-width: var(--wb-maxw); margin: 0 auto; padding: 20px var(--page-pad-x) 24px;
  display: flex; flex-wrap: wrap; gap: 30px;
}
.nav-cat { min-width: 132px; }
.nav-cat h4 {
  margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--wb-sub);
  letter-spacing: .02em;
}
.nav-cat a {
  display: block; padding: 7px 9px; border-radius: 8px;
  color: var(--wb-ink); font-size: 13.5px; text-decoration: none;
  transition: background .12s, color .12s;
}
.nav-cat a:hover { background: #eef2ff; color: var(--wb-blue); }
.nav-cat a.active { background: var(--wb-blue); color: #fff; }
.nav-cat__all {
  display: inline-block; margin-top: 10px; font-weight: 600; color: var(--wb-blue);
  text-decoration: none;
}
.nav-cat__all:hover { text-decoration: underline; }
.wb-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(10px);
  background: rgba(15,23,42,.92); color: #fff; padding: 10px 16px; border-radius: 10px;
  font-size: 13.5px; z-index: 999; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; max-width: 86vw;
}
.wb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 640px) {
  .nav-mega__inner { gap: 20px 18px; padding: 16px 14px 20px; }
  .nav-cat { min-width: 44%; }
}

/* ===== 2026-10-17 导航补丁（幂等：重复执行不会叠加）===== */
/* ① 收回按钮 flex：部分页面有全局 button{flex:1 1 0%}，会把导航按钮拉满 */
.site-nav .nav-more__btn { flex: 0 0 auto; width: auto; min-width: 0; }
/* ===== 全站导航 · 分类面板（每页独立内联，不共用 css） ===== */
.site-header__inner { position: relative; }
.site-nav .nav-more__btn {
  display: inline-flex; align-items: center; gap: 6px;
  /* 🔴 必须显式收回 flex：部分工具页 css 里有全局
     `button, .btn, .primary, .ghost { flex: 1 1 0% }`，
     会把「全部工具」按钮拉成 600px 宽的大横框（2026-10-17 修） */
  flex: 0 0 auto; width: auto; min-width: 0;
  margin-left: 4px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--wb-blue); background: #fff; color: var(--wb-blue);
  font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.site-nav .nav-more__btn:hover { background: #eef2ff; }
.site-nav .nav-more__btn svg { transition: transform .2s; }
.site-nav .nav-more__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-mega {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  background: #fff; border-top: 1px solid var(--wb-line);
  box-shadow: 0 14px 34px rgba(15,23,42,.10);
  display: none;
}
.nav-mega.is-open { display: block; }
.nav-mega__inner {
  max-width: var(--wb-maxw); margin: 0 auto; padding: 20px var(--page-pad-x) 24px;
  display: flex; flex-wrap: wrap; gap: 30px;
}
.nav-cat { min-width: 132px; --cat-dot: var(--wb-blue); }
/* 分类色块：用 nth-child 而不是 data-cat —— 老页面的 nav 由旧 js 生成，
   没有 data-cat 属性，靠序号同样能上色（2026-10-17） */
.nav-mega__inner > .nav-cat:nth-child(1) { --cat-dot: #2563eb; }
.nav-mega__inner > .nav-cat:nth-child(2) { --cat-dot: #7c3aed; }
.nav-mega__inner > .nav-cat:nth-child(3) { --cat-dot: #d97706; }
.nav-mega__inner > .nav-cat:nth-child(4) { --cat-dot: #db2777; }
.nav-mega__inner > .nav-cat:nth-child(5) { --cat-dot: #059669; }
.nav-cat h4 {
  margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--wb-sub);
  letter-spacing: .02em; display: flex; align-items: center; gap: 7px;
}
.nav-cat h4::before {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 3px;
  background: var(--cat-dot);
}
.nav-cat a {
  display: block; padding: 7px 9px; border-radius: 8px;
  color: var(--wb-ink); font-size: 13.5px; text-decoration: none;
  transition: background .12s, color .12s;
}
.nav-cat a:hover { background: #eef2ff; color: var(--wb-blue); }
.nav-cat a.active { background: var(--wb-blue); color: #fff; }
.nav-cat__all {
  display: inline-block; margin-top: 10px; font-weight: 600; color: var(--wb-blue);
  text-decoration: none;
}
.nav-cat__all:hover { text-decoration: underline; }
.wb-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(10px);
  background: rgba(15,23,42,.92); color: #fff; padding: 10px 16px; border-radius: 10px;
  font-size: 13.5px; z-index: 999; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; max-width: 86vw;
}
.wb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 640px) {
  .nav-mega__inner { gap: 20px 18px; padding: 16px 14px 20px; }
  .nav-cat { min-width: 44%; }
}

/* ===== 2026-10-17 面板高度补丁（幂等：重复执行不会叠加）===== */
/* ① 收回按钮 flex：部分页面有全局 button{flex:1 1 0%}，会把导航按钮拉满 */
.site-nav .nav-more__btn { flex: 0 0 auto; width: auto; min-width: 0; }

.nav-mega { max-height: calc(100vh - 56px); overflow-y: auto; -webkit-overflow-scrolling: touch; }