/* ============================================================
   在线工具网 · 首页专属样式  (tool.xinwenzhan.com)
   千纸鹤情感网 2026-10-09 重构

   设计目标（针对「AI 生成的小白站」观感）：
     1. 去 emoji —— 改用统一的线性 SVG 图标
     2. 去彩虹渐变堆砌 —— 只在 logo / 极小面积用色
     3. 去重复 —— 同一批工具链接只出现一次（导航 + 卡片），页脚不再重复罗列
     4. 建立信息层级 —— 大留白 + 明确字号对比 + 细分隔线
     5. 可点击与不可点击元素视觉上必须能区分

   本文件只服务首页；工具页仍用 /工具页基础层
   ============================================================ */

:root {
  --h-maxw: 1200px;
  --ink: #0b1220;
  --ink-2: #334155;
  --ink-3: #64748b;
  --ink-4: #94a3b8;
  --line: #e6eaf0;
  --line-2: #f1f5f9;
  --bg-soft: #f8fafc;
  --brand: #1d4ed8;
  --brand-2: #2563eb;
  --accent: #7c3aed;
}

body.home {
  --page-pad-x: 0px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 页头 ---------- */
.home .site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  align-self: stretch; width: auto;
  margin-left: calc(-1 * var(--page-pad-x, 0px));
  margin-right: calc(-1 * var(--page-pad-x, 0px));
}
.home .site-header__inner {
  max-width: var(--h-maxw);
  margin: 0 auto;
  padding: 0 28px;
  height: 66px;
  display: flex; align-items: center; gap: 28px;
}
.home .site-header .brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 18px; letter-spacing: -.2px;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  flex: 0 0 auto;
}
.home .site-header .brand .logo {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  display: grid; place-items: center;
  color: #fff; font-size: 15px; font-weight: 800;
  box-shadow: 0 3px 10px rgba(29,78,216,.28);
}
.home .site-header .brand b { color: var(--ink); }

.home .site-nav {
  display: flex; align-items: center; gap: 2px;
  flex: 1 1 auto; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  justify-content: flex-end;
}
.home .site-nav::-webkit-scrollbar { display: none; }
.home .site-nav a {
  flex: 0 0 auto;
  padding: 7px 12px; border-radius: 7px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-3);
  text-decoration: none; white-space: nowrap;
  transition: color .15s, background .15s;
}
.home .site-nav a:hover { color: var(--brand); background: var(--line-2); }
.home .site-nav a.active {
  color: var(--brand); background: #eff4ff;
  font-weight: 600;
}
@media (max-width: 1000px) {
  .home .site-nav {
    justify-content: flex-start;
    -webkit-mask-image: linear-gradient(90deg,#000 90%,transparent 100%);
    mask-image: linear-gradient(90deg,#000 90%,transparent 100%);
  }
}

/* ---------- 首屏 ---------- */
.h-hero {
  padding: 86px 28px 72px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(1000px 420px at 50% -20%, rgba(37,99,235,.07), transparent 70%),
    #fff;
  text-align: center;
}
.h-hero__in { max-width: 760px; margin: 0 auto; }

/* 眉标：小字 + 细边，不用大色块 */
.h-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px 5px 8px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fff;
  font-size: 13px; color: var(--ink-3);
  margin-bottom: 26px;
}
.h-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,.14);
}

.h-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(32px, 5.6vw, 54px);
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.18;
  color: var(--ink);
}
.h-hero h1 em {
  font-style: normal;
  /* 只给一个词上色，避免整句花掉 */
  background: linear-gradient(100deg, var(--brand), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.h-hero__lead {
  margin: 0 auto 38px;
  max-width: 588px;
  font-size: clamp(15.5px, 1.9vw, 18px);
  line-height: 1.85;
  color: var(--ink-3);
}

/* 搜索 */
.h-search {
  display: flex; align-items: center;
  max-width: 500px; margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(15,23,42,.06);
  transition: border-color .16s, box-shadow .16s;
  overflow: hidden;
}
.h-search:focus-within {
  border-color: #b6c8f5;
  box-shadow: 0 6px 26px rgba(37,99,235,.13);
}
.h-search svg { flex: 0 0 auto; margin: 0 4px 0 15px; }
.h-search input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  padding: 15px 12px 15px 8px;
  font-size: 15.5px; font-family: inherit; color: var(--ink);
}
.h-search input::placeholder { color: var(--ink-4); }
.h-search__kbd {
  flex: 0 0 auto; margin-right: 14px;
  padding: 3px 7px; border-radius: 5px;
  border: 1px solid var(--line); background: var(--bg-soft);
  font-size: 11.5px; color: var(--ink-4);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (max-width: 640px) { .h-search__kbd { display: none; } }

/* ---------- 主区 ---------- */
.h-main { max-width: var(--h-maxw); margin: 0 auto; padding: 0 28px; }

.h-sec { padding: 68px 0 0; }
.h-sec--tight { padding-top: 52px; }

/* 区块标题：左标题 + 右说明，不用居中大标题 */
.h-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: 20px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.h-head h2 {
  margin: 0;
  font-size: clamp(21px, 2.6vw, 26px);
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--ink);
}
.h-head p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-4);
}

/* ---------- 工具卡片 ---------- */
.h-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.h-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 24px 24px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.h-card:hover {
  border-color: #c3d3f7;
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
  transform: translateY(-2px);
}
/* 顶部细高光线：悬停时从左展开，克制但有质感 */
.h-card::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: -1px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  opacity: 0; transition: opacity .18s;
}
.h-card:hover::before { opacity: 1; }

.h-card__top {
  display: flex; align-items: center; gap: 13px;
  margin-bottom: 13px;
}
/* 图标：56px 圆角方块 + 线性 SVG，不使用 emoji */
.h-card__ic {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center;
  background: #f4f7fd;
  border: 1px solid #e6edfb;
  color: var(--brand);
  transition: background .18s, color .18s;
}
.h-card:hover .h-card__ic { background: var(--brand); color: #fff; border-color: var(--brand); }
.h-card__ic svg { display: block; }

.h-card__name {
  font-size: 16.5px; font-weight: 650; color: var(--ink);
  letter-spacing: -.2px;
  line-height: 1.4;
}
.h-card__cat {
  font-size: 12.5px; color: var(--ink-4); font-weight: 400;
  margin-top: 1px;
}

.h-card__desc {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-3);
  flex: 1 1 auto;
}

/* 能力标签：小字 + 圆点，不用粗色块 */
.h-card__tags {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-bottom: 16px;
}
.h-card__tags span {
  position: relative;
  padding-left: 12px;
  font-size: 12.5px;
  color: var(--ink-4);
}
.h-card__tags span::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 4px; height: 4px; border-radius: 50%;
  background: #cbd5e1;
}

.h-card__go {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--brand);
}
.h-card__go svg { transition: transform .18s; }
.h-card:hover .h-card__go svg { transform: translateX(3px); }

/* 搜索无结果提示 */
.h-empty {
  display: none;
  padding: 44px 20px;
  text-align: center;
  color: var(--ink-4); font-size: 14.5px;
}
.h-empty.is-on { display: block; }
.h-empty b { color: var(--ink-2); }

/* ---------- 特性条：横排分隔，不是伪卡片 ---------- */
.h-feats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.h-feat {
  padding: 28px 26px;
  border-right: 1px solid var(--line);
}
.h-feat:last-child { border-right: 0; }
.h-feat__ic {
  width: 36px; height: 36px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--bg-soft); border: 1px solid var(--line);
  color: var(--brand);
  margin-bottom: 14px;
}
.h-feat h3 {
  margin: 0 0 6px;
  font-size: 15.5px; font-weight: 650; color: var(--ink);
}
.h-feat p {
  margin: 0;
  font-size: 13.5px; line-height: 1.75; color: var(--ink-3);
}
@media (max-width: 860px) {
  .h-feats { grid-template-columns: 1fr; }
  .h-feat { border-right: 0; border-bottom: 1px solid var(--line); }
  .h-feat:last-child { border-bottom: 0; }
}

/* ---------- 常见问题（两栏，桌面并排） ---------- */
.h-faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 56px;
}
.h-faq details {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.h-faq summary {
  display: flex; align-items: flex-start; gap: 12px;
  cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600; color: var(--ink);
  line-height: 1.6;
}
.h-faq summary::-webkit-details-marker { display: none; }
.h-faq summary::after {
  content: ""; flex: 0 0 auto;
  width: 7px; height: 7px; margin-top: 8px;
  border-right: 1.6px solid var(--ink-4);
  border-bottom: 1.6px solid var(--ink-4);
  transform: rotate(45deg);
  transition: transform .18s;
}
.h-faq details[open] summary::after {
  transform: rotate(-135deg); margin-top: 11px;
}
.h-faq details[open] summary { color: var(--brand); }
.h-faq__a {
  margin: 11px 0 0;
  font-size: 14px; line-height: 1.8; color: var(--ink-3);
  max-width: 56ch;
}
@media (max-width: 860px) { .h-faq { grid-template-columns: 1fr; } }

/* ---------- 页脚 ---------- */
.wb-footer {
  margin-top: 84px;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 52px 0 0;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.8;
}
.wb-footer__inner {
  max-width: var(--h-maxw); margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: 1.5fr 1fr 1.1fr; gap: 44px;
}
.wb-footer h4 {
  margin: 0 0 13px;
  font-size: 14px; font-weight: 650; color: var(--ink);
  letter-spacing: .2px;
}
.wb-footer p { margin: 0 0 9px; }
.wb-footer a {
  color: var(--ink-3); text-decoration: none;
  display: inline-block; padding: 2px 0; transition: color .15s;
}
.wb-footer a:hover { color: var(--brand); }
/* 页脚工具链接：竖排紧凑，不再喧宾夺主 */
.wb-footer__tools { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.wb-footer__tools a { font-size: 13.5px; padding: 3px 0; }

.wb-footer__bottom {
  max-width: var(--h-maxw); margin: 40px auto 0;
  padding: 20px 28px calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  font-size: 13px; color: var(--ink-4);
}
.wb-icp { color: var(--ink-3); text-decoration: none !important; white-space: nowrap; }
.wb-icp:hover { color: var(--brand); }
.wb-footer__badges { display: flex; gap: 18px; flex-wrap: wrap; }
.wb-footer__badges span { display: inline-flex; align-items: center; gap: 6px; }
.wb-footer__badges svg { flex: 0 0 auto; }

@media (max-width: 900px) {
  .wb-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 620px) {
  .home .site-header__inner { height: 58px; padding: 0 16px; gap: 14px; }
  .home .site-header .brand { font-size: 16px; }
  .home .site-header .brand .logo { width: 28px; height: 28px; font-size: 13px; }
  .h-hero { padding: 56px 18px 48px; }
  .h-main { padding: 0 16px; }
  .h-sec { padding-top: 50px; }
  .h-tools { grid-template-columns: 1fr; gap: 13px; }
  .h-card { padding: 20px 19px 19px; }
  .h-head { margin-bottom: 24px; }
  .wb-footer { margin-top: 60px; }
  .wb-footer__inner { grid-template-columns: 1fr; gap: 26px; padding: 0 16px; }
  .wb-footer__bottom { padding-left: 16px; padding-right: 16px; justify-content: center; text-align: center; }
  .wb-footer__badges { justify-content: center; }
}

/* ---------- 微信提示条 / 分享按钮 / toast ---------- */
.wb-wxbar {
  position: relative; display: none;
  align-items: flex-start; gap: 10px;
  max-width: 660px; margin: 16px auto 0;
  padding: 12px 16px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
  color: #92400e; font-size: 13.5px; line-height: 1.7;
}
body.is-wechat .wb-wxbar { display: flex; }
.wb-wxbar b { color: #78350f; }
.wb-wxbar__close {
  margin-left: auto; flex: 0 0 auto; cursor: pointer;
  background: none; border: 0; color: #b45309; font-size: 17px; line-height: 1; padding: 2px 4px;
}
.wb-footer__share {
  max-width: var(--h-maxw); margin: 28px auto 0; padding: 0 28px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.wb-share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 22px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink-2);
  font-size: 14.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: border-color .16s, color .16s;
}
.wb-share-btn:hover { border-color: #c3d3f7; color: var(--brand); }
.wb-share-btn svg { flex: 0 0 auto; }
.wb-share-tip { color: var(--ink-4); font-size: 13.5px; }

.wb-toast {
  position: fixed; left: 50%; bottom: 40px;
  transform: translate(-50%, 14px);
  z-index: 999; max-width: min(88vw, 420px);
  padding: 11px 20px;
  background: rgba(11,18,32,.93); color: #fff;
  font-size: 14px; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(11,18,32,.28);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  text-align: center;
}
.wb-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 无障碍隐藏 ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media print {
  .site-header, .h-hero, .h-sec, .wb-footer, .wb-toast { display: none !important; }
}

/* ===== 页脚统一为全站标准版（2026-10-16，覆盖本文件旧页脚样式，必须放文件末尾） ===== */
.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;}}

/* 站点外框对齐层（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; }