:root{
    color-scheme: light;
    --bg:#ffffff; --bg-soft:#f6f8fb; --bg-elev:#ffffff; --bg-hover:#eef1f4;
    --fg:#111827; --fg-sub:#57616f; --fg-mute:#697582;
    --line:#e7ebf0; --line-soft:#f1f4f8;
    --brand:#0f62fe; --brand-ink:#0043ce; --brand-soft:#e9f1ff;
    --code-bg:#0d1117; --code-fg:#e6edf3; --code-head:#161b22;
    --shadow-sm:0 1px 2px rgba(16,24,40,.05); --shadow-md:0 6px 24px rgba(16,24,40,.09);
    --tip:#1a7f37; --tip-bg:#eaf6ec; --tip-line:#bfe6c7;
    --warn:#b25e00; --warn-bg:#fdf3e7; --warn-line:#f0d8b0;
    --note:#0f62fe; --note-bg:#e9f1ff; --note-line:#cfe0ff;
    --danger:#e5484d;
    /* 文章页「概要」块（2026-09-17） */
    --sum-bg:#f7faff; --sum-line:#e3edfc;
    /* 品牌引导（2026-09-18）：正文效率提示 / 文末效率卡 / 站点页脚 */
    --promo-bg:#f5f9ff; --promo-line:#dbe7fb; --promo-tag-bg:#e3eeff; --promo-tag-fg:#0f5fd6;
    /* 栏目页专用（2026-09-17）：对齐 noon 帮助中心 —— 135° 浅色渐变底 + 品牌黄光晕从左上角向外渐隐 */
    --cat-base:linear-gradient(135deg,#fafafa 0%,#ffffff 52%,#f4f6f8 100%);
    --cat-orb-yellow:rgba(254,238,0,.22);
    --cat-orb-violet:rgba(100,66,218,.09);
    --cat-orb-orange:rgba(240,83,35,.06);
    /* 转化按钮（品牌黄）—— 与官网头部 .sh-cta 同源；黄底深字在深浅两色模式下都成立，故不进 DARK_VARS */
    --brand-y:#FEEE00; --brand-y-d:#e6d400; --navy:#0a1a2e;
    --topbar-h:58px; --radius:10px;
    --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",sans-serif;
    --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0e1319; --bg-soft:#131a22; --bg-elev:#161e27; --bg-hover:#1c2530;
    --fg:#e3e9f0; --fg-sub:#9aa7b4; --fg-mute:#6d7b89;
    --line:#232d38; --line-soft:#1b242e;
    --brand:#4589ff; --brand-ink:#7ab4ff; --brand-soft:#122032;
    --code-bg:#0a0f15; --code-fg:#dbe4ee; --code-head:#121922;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 8px 28px rgba(0,0,0,.5);
    --tip:#5fd07f; --tip-bg:#10241a; --tip-line:#1d4029;
    --warn:#e0a458; --warn-bg:#251c10; --warn-line:#46341a;
    --note:#4589ff; --note-bg:#122032; --note-line:#1d3556;
    --danger:#ff7a7a;
    /* 文章页「概要」块（2026-09-17） */
    --sum-bg:#131c27; --sum-line:#202e3e;
    /* 品牌引导（2026-09-18）：正文效率提示 / 文末效率卡 / 站点页脚 */
    --promo-bg:#121b26; --promo-line:#22334a; --promo-tag-bg:#1a2b41; --promo-tag-fg:#8fb9ff;
    --cat-base:linear-gradient(135deg,#0b1015 0%,#131a22 52%,#0b1015 100%);
    --cat-orb-yellow:rgba(254,238,0,.10);
    --cat-orb-violet:rgba(100,66,218,.16);
    --cat-orb-orange:rgba(240,83,35,.09);
  }
  }
  :root[data-theme="dark"]{
    color-scheme: dark;
    --bg:#0e1319; --bg-soft:#131a22; --bg-elev:#161e27; --bg-hover:#1c2530;
    --fg:#e3e9f0; --fg-sub:#9aa7b4; --fg-mute:#6d7b89;
    --line:#232d38; --line-soft:#1b242e;
    --brand:#4589ff; --brand-ink:#7ab4ff; --brand-soft:#122032;
    --code-bg:#0a0f15; --code-fg:#dbe4ee; --code-head:#121922;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 8px 28px rgba(0,0,0,.5);
    --tip:#5fd07f; --tip-bg:#10241a; --tip-line:#1d4029;
    --warn:#e0a458; --warn-bg:#251c10; --warn-line:#46341a;
    --note:#4589ff; --note-bg:#122032; --note-line:#1d3556;
    --danger:#ff7a7a;
    /* 文章页「概要」块（2026-09-17） */
    --sum-bg:#131c27; --sum-line:#202e3e;
    /* 品牌引导（2026-09-18）：正文效率提示 / 文末效率卡 / 站点页脚 */
    --promo-bg:#121b26; --promo-line:#22334a; --promo-tag-bg:#1a2b41; --promo-tag-fg:#8fb9ff;
    --cat-base:linear-gradient(135deg,#0b1015 0%,#131a22 52%,#0b1015 100%);
    --cat-orb-yellow:rgba(254,238,0,.10);
    --cat-orb-violet:rgba(100,66,218,.16);
    --cat-orb-orange:rgba(240,83,35,.09);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *{transition:none!important;animation:none!important;}
  }
  body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);
    line-height:1.85;font-size:16.5px;-webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;}
  a{color:var(--brand);text-decoration:none;}
  a:hover{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px;}
  ::selection{background:var(--brand-soft);}
  :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px;}
  img{max-width:100%;}

  /* ---------- 顶部阅读进度条 ---------- */
  .reading-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
    background:linear-gradient(90deg,var(--brand),var(--brand-ink));border-radius:0 2px 2px 0;
    transition:width .12s linear;pointer-events:none;}

  /* ---------- 顶栏 ---------- */
  .topbar{position:sticky;top:0;z-index:50;height:var(--topbar-h);background:var(--bg);
    border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px;gap:14px;}
  @supports (backdrop-filter:blur(10px)){
    .topbar{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.6) blur(10px);}
  }
  .topbar .brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px;
    color:var(--fg);white-space:nowrap;}
  .topbar .brand img{width:26px;height:26px;border-radius:7px;object-fit:cover;display:block;flex:none;}
  .topbar .brand:hover{text-decoration:none;color:var(--fg);}
  .topbar .brand small{font-weight:400;color:var(--fg-sub);font-size:13px;}
  .icon-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
    flex:none;border:1px solid var(--line);background:var(--bg);color:var(--fg-sub);
    border-radius:9px;cursor:pointer;font-size:15px;line-height:1;padding:0;transition:.15s;}
  .icon-btn:hover{background:var(--bg-hover);color:var(--fg);border-color:var(--fg-mute);}
  .menu-btn{display:none;font-size:17px;}

  /* ---------- 转化入口（CTA 真源：docs/lib/site-header.mjs）----------
     2026-09-30 二次精简：顶栏的「免费试用」CTA 已撤（它与搜索框共用弹性宽度，
     窄屏会把顶栏挤乱），转化入口统一由侧栏抽屉的「站点」分组承载（见下方 .nav-site）；
     顶栏最终只留「品牌 / 搜索 / 主题」三件。
     注：.nav-site 目前默认 display:none —— 那是「顶栏还有 CTA」时的决定；若要让桌面端
     也露出站点入口/CTA，把这条隐藏去掉即可（移动端那段保持不变）。 */
  /* 两处转化按钮共用 --brand-y（Noon 品牌黄）：本文件的 .nav-site-cta 与
     docs/lib/site-header.mjs 的 .sh-cta。 */
  .nav-site{display:none;}
  .nav-site-title{font-size:11.5px;font-weight:600;color:var(--fg-mute);letter-spacing:.6px;
    padding:0 10px 8px;}
  .nav-site-cta{display:flex;align-items:center;justify-content:center;height:36px;margin:0 0 10px;
    border-radius:9px;background:var(--brand-y);color:var(--navy);font-size:14px;font-weight:700;
    text-decoration:none;}
  .nav-site-cta:hover{background:var(--brand-y-d);color:var(--navy);text-decoration:none;}

  /* ---------- 站内搜索 ---------- */
  .search{margin-left:auto;position:relative;}
  .search input{width:240px;max-width:48vw;height:34px;padding:0 12px;border:1px solid var(--line);
    border-radius:9px;font-size:14px;outline:none;background:var(--bg-soft);color:var(--fg);
    font-family:inherit;transition:.15s;}
  .search input::placeholder{color:var(--fg-mute);}
  .search input:focus{border-color:var(--brand);background:var(--bg);
    box-shadow:0 0 0 3px var(--brand-soft);}
  .search-kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%);pointer-events:none;
    font-family:var(--mono);font-size:10.5px;color:var(--fg-mute);border:1px solid var(--line);
    border-radius:5px;padding:1px 5px;background:var(--bg);letter-spacing:.02em;}
  .search input:focus ~ .search-kbd{opacity:0;}
  .search-results{position:absolute;right:0;top:46px;width:min(400px,88vw);max-height:64vh;overflow:auto;
    background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);
    display:none;z-index:55;padding:6px;}
  .search-results.show{display:block;}
  .search-results a{display:block;padding:9px 11px;border-radius:8px;font-size:14px;color:var(--fg);}
  .search-results a:hover,.search-results a.sel{background:var(--brand-soft);text-decoration:none;}
  .search-results .s-t{font-weight:600;display:flex;align-items:baseline;gap:7px;}
  .search-results .s-g{font-size:11px;font-weight:400;color:var(--fg-mute);flex:none;}
  .search-results .s-d{color:var(--fg-sub);font-size:12.5px;margin-top:3px;line-height:1.6;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .search-results mark{background:var(--brand-soft);color:var(--brand-ink);font-weight:700;
    padding:0 2px;border-radius:3px;}
  .search-empty{padding:14px 12px;color:var(--fg-sub);font-size:13.5px;line-height:1.7;}
  .search-empty a{font-weight:600;}

  /* ---------- 三栏布局：菜单贴最左，正文居中，本页目录靠右 ---------- */
  .layout{width:100%;display:grid;grid-template-columns:264px minmax(0,1fr) 232px;align-items:start;}
  .drawer-mask{display:none;}

  /* ---------- 左侧目录 ---------- */
  .sidebar{position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow:auto;
    border-right:1px solid var(--line);background:var(--bg-soft);padding:22px 14px 60px;
    overscroll-behavior:contain;scrollbar-width:thin;}
  .sidebar::-webkit-scrollbar{width:7px;}
  .sidebar::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}
  .sidebar::-webkit-scrollbar-thumb:hover{background:var(--fg-mute);}
  /* --- 导航：三层折叠（栏目 → 子栏目 → 文章）--- */
  /* 默认只展开当前文章所在的那条路径，其余折叠；这是侧栏不再超长的主因 */
  .nav-group{margin-bottom:4px;}

  /* 一级：栏目 */
  .nav-grouphead{display:flex;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer;
    padding:9px 10px;border:0;border-radius:9px;background:transparent;color:var(--fg);
    font-size:14px;font-weight:700;line-height:1.5;font-family:inherit;transition:background .13s;}
  .nav-grouphead:hover{background:var(--bg-hover);}
  .nav-grouphead.on-path{color:var(--brand);}
  .nav-groupname{flex:1;min-width:0;}

  /* 自有栏目与官方栏目之间的分隔（2026-09-18）：安静的灰色线 + 灰字，不靠颜色区分 */
  .nav-sep{display:flex;align-items:center;gap:10px;margin:6px 6px 10px;
    color:var(--fg-mute);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
  .nav-sep::before,.nav-sep::after{content:"";flex:1;height:1px;background:var(--line);}

  /* 篇数徽标 */
  .nav-badge{font-size:11.5px;font-weight:400;color:var(--fg-mute);background:var(--bg-hover);
    padding:1px 7px;border-radius:999px;flex:none;font-variant-numeric:tabular-nums;}

  /* 折叠箭头：纯 CSS 三角，零额外 DOM */
  .nav-chev{flex:none;width:12px;height:12px;position:relative;color:var(--fg-mute);}
  .nav-chev::before{content:"";position:absolute;left:3px;top:2px;width:0;height:0;
    border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;
    transition:transform .18s ease;transform-origin:2px 4px;}
  .nav-group.is-open > .nav-grouphead .nav-chev::before,
  .nav-section.is-open > .nav-sechead .nav-chev::before{transform:rotate(90deg);}
  .nav-grouphead.on-path .nav-chev,.nav-sechead.on-path .nav-chev{color:var(--brand);}

  /* 折叠动画：grid 0fr → 1fr（比 max-height 准，内容长短不同也不会产生延迟感） */
  .nav-groupbody,.nav-secbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s ease;}
  .nav-group.is-open > .nav-groupbody,
  .nav-section.is-open > .nav-secbody{grid-template-rows:1fr;}
  .nav-groupwrap,.nav-secwrap{overflow:hidden;min-height:0;}
  .nav-groupwrap{padding-left:18px;}

  /* 🚴 2026-10-02（站长定稿）：品牌分组「骆驼掌柜教程」在**桌面端初始即展开** ——
     它是主教程区（文章最多），折起来访客每次都要多点一次。
     主实现是 HTML 层给品牌组带 is-open（build.mjs 的 DESKTOP_BRAND_OPEN 开关），
     **本段是兜底**：防御 build 缓存/其它渲染路径漏带类的情况。
     🚨 只在 min-width:769px 生效：移动端侧栏是抽屉，保持「只展开当前路径分组」，行为不变。 */
  @media (min-width:769px){
    .nav-group.is-brand:not(.is-open) > .nav-groupbody{grid-template-rows:1fr;}
    .nav-group.is-brand:not(.is-open) > .nav-grouphead .nav-chev::before{transform:rotate(90deg);}
  }

  /* 一级：栏目（方案 A 侧栏只到栏目层，点击进入栏目聚合页） */
  .nav-grouplink{display:flex;align-items:center;gap:8px;width:100%;margin-bottom:2px;
    padding:10px 12px;border-radius:9px;color:var(--fg);
    font-size:14px;font-weight:600;line-height:1.5;transition:background .13s;overflow-wrap:anywhere;}
  .nav-grouplink:hover{background:var(--bg-hover);color:var(--fg);text-decoration:none;}
  .nav-grouplink.active{background:var(--brand-soft);color:var(--brand);}
  .nav-grouplink .nav-groupname{flex:1;min-width:0;}

  /* 三级：文章条目；.nav-sub 同时用于「栏目总览」入口 */
  .nav-item,.nav-sub{display:block;padding:6px 10px;border-radius:8px;color:var(--fg-sub);
    font-size:13px;line-height:1.55;transition:background .13s;overflow-wrap:anywhere;}
  .nav-item:hover,.nav-sub:hover{background:var(--bg-hover);color:var(--fg);text-decoration:none;}
  .nav-item.active,.nav-sub.active{background:var(--brand-soft);color:var(--brand);font-weight:600;}
  .nav-sub.nadir{display:flex;align-items:center;gap:8px;color:var(--fg);font-weight:600;margin-bottom:2px;}
  .nav-sub.nadir .nav-badge{margin-left:auto;}

  /* ---------- 正文 ---------- */
  .content{padding:38px 48px 90px;min-width:0;max-width:880px;margin:0 auto;}
  .content article{max-width:784px;}
  .crumb{font-size:12.5px;color:var(--fg-sub);margin:0 0 14px;line-height:1.7;}
  .crumb a{color:var(--fg-sub);}
  .crumb a:hover{color:var(--brand);}
  .crumb-sep{margin:0 7px;color:var(--fg-mute);}
  .crumb-cur{color:var(--fg);}
  h1{font-size:31px;margin:4px 0 14px;line-height:1.35;font-weight:800;letter-spacing:-.01em;}

  /* 文章元信息：最后更新 / 阅读时长 / 所属栏目 */
  /* ---------- 正文导语段：文章开头那段全文概要 ---------- */
  /* 🚨 库里正文首段本身就是概要（与后台「摘要」同源），所以只给它上样式，
     绝不能再单独渲染一块 —— 否则同一段文字会在页面上出现两遍。 */
  .doc-lead{margin:0 0 22px;padding:15px 18px;border-radius:var(--radius);
    background:var(--sum-bg);border:1px solid var(--sum-line);border-left:3px solid var(--brand);
    font-size:15.5px;line-height:1.9;color:var(--fg-sub);}
  .doc-lead strong{color:var(--fg);}
  @media (max-width:640px){
    .doc-lead{padding:12px 14px;font-size:14.5px;}
  }

  .doc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
    font-size:12.5px;color:var(--fg-sub);margin:0 0 26px;padding-bottom:16px;
    border-bottom:1px solid var(--line-soft);}
  .doc-meta .mi{display:inline-flex;align-items:center;gap:5px;}
  .doc-meta .mi svg{width:13px;height:13px;flex:none;opacity:.75;}
  .doc-meta a{color:var(--fg-sub);}
  .doc-meta a:hover{color:var(--brand);}

  h2{font-size:23px;margin:40px 0 15px;padding-bottom:9px;border-bottom:1px solid var(--line);
    font-weight:700;scroll-margin-top:calc(var(--topbar-h) + 16px);}
  h3{font-size:18.5px;margin:30px 0 11px;font-weight:700;
    scroll-margin-top:calc(var(--topbar-h) + 16px);}
  h4{font-size:16.5px;margin:24px 0 9px;font-weight:700;
    scroll-margin-top:calc(var(--topbar-h) + 16px);}
  .anchor{margin-left:9px;color:var(--fg-mute);opacity:0;font-weight:400;font-size:.82em;
    transition:opacity .15s;cursor:pointer;}
  h1:hover .anchor,h2:hover .anchor,h3:hover .anchor,h4:hover .anchor{opacity:1;}
  .anchor:hover{color:var(--brand);}
  p{margin:15px 0;}
  ul,ol{padding-left:26px;margin:15px 0;}
  li{margin:8px 0;}
  li::marker{color:var(--fg-mute);}
  strong{font-weight:700;color:var(--fg);}
  hr{border:none;border-top:1px solid var(--line);margin:34px 0;}
  code{background:var(--bg-hover);padding:2px 6px;border-radius:5px;font-size:14.5px;
    font-family:var(--mono);word-break:break-word;}
  a code{color:inherit;}
  /* 链接内的加粗文字必须继承链接色：否则会被上面的全局 strong{color:var(--fg)} 压成正文色，
     读者看不出是可点链接（如「看**这里**」「**卖家保修政策**」）。 */
  a strong,a b{color:inherit;}
  /* 行内「浏览器内部页」地址（chrome://extensions 等）：点一下复制 —— 见 assets/site.js 第 ④-b 段。
     这类地址浏览器不允许网页跳转，读者只能手打，给一个可点提示。 */
  code.code-copy-inline{cursor:pointer;border:1px dashed var(--line);
    transition:background .15s,border-color .15s,color .15s;}
  code.code-copy-inline:hover,code.code-copy-inline:focus-visible{
    background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink);outline:none;}
  code.code-copy-inline.done{background:var(--tip-bg);border:1px solid var(--tip-line);color:var(--tip);}

  pre{position:relative;background:var(--code-bg);color:var(--code-fg);padding:16px 18px;
    border-radius:var(--radius);overflow:auto;line-height:1.7;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
  pre code{background:none;padding:0;color:inherit;font-size:13.8px;font-family:var(--mono);}
  .code-copy{position:absolute;top:9px;right:9px;opacity:0;border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.08);color:#cbd5e1;font-size:11.5px;padding:4px 9px;
    border-radius:6px;cursor:pointer;transition:.15s;font-family:inherit;}
  pre:hover .code-copy,.code-copy.done{opacity:1;}
  .code-copy:hover{background:rgba(255,255,255,.18);color:#fff;}
  .code-copy.done{border-color:#2ea043;color:#56d364;}

  blockquote{margin:18px 0;padding:13px 17px;background:var(--note-bg);
    border-left:3px solid var(--brand);border-radius:0 8px 8px 0;color:var(--fg-sub);}
  blockquote p{margin:5px 0;}

  /* 图片：可点击放大（灯箱见 ui.mjs） */
  .doc-img{max-width:100%;height:auto;border-radius:var(--radius);margin:20px 0;
    border:1px solid var(--line);display:block;box-shadow:var(--shadow-sm);
    cursor:zoom-in;transition:transform .18s ease,box-shadow .18s ease;}
  .doc-img:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);}
  /* 正文里的视频（原库以 [](xxx.mp4) 记录）：与图片同一套留白/圆角，黑底播放器 */
  .doc-video{display:block;width:100%;max-width:100%;margin:20px 0;border-radius:var(--radius);
    background:#000;border:1px solid var(--line);box-shadow:var(--shadow-sm);}
  /* 正文情境内链（md.mjs 的 makeSectionLinker）：正文里首次出现的子栏目名，链到该栏目列表页。
     用淡下划线而不是只变色 —— 中文两三个字仅变色，读者极易当成正文读过去。 */
  .doc-xlink{text-decoration:underline;text-decoration-thickness:1px;
    text-decoration-color:var(--line);text-underline-offset:3px;}
  .doc-xlink:hover{text-decoration-color:currentColor;}

  /* ---------- 品牌引导①：正文效率提示 ---------- */
  /* 判定「重复劳动」段落后插在它之后（见 md.mjs 的 promo 探针）。
     用 aside + div，不进文档大纲 —— 引导块绝不能拿 h* 的层级权重。 */
  .doc-promo{margin:20px 0 24px;padding:14px 18px 15px;border-radius:var(--radius);
    background:var(--promo-bg);border:1px solid var(--promo-line);}
  .doc-promo .dp-tag{display:inline-block;margin-bottom:7px;padding:0 8px;border-radius:5px;
    background:var(--promo-tag-bg);color:var(--promo-tag-fg);font-size:11.5px;font-weight:700;
    letter-spacing:.08em;line-height:19px;}
  .doc-promo p{margin:0;font-size:15px;line-height:1.85;color:var(--fg-sub);}
  .doc-promo .dp-link{font-weight:600;}
  /* 关键词内链句：与上面的场景提示同处一块时，两句之间留一点间距 */
  .doc-promo p + .dp-erp{margin-top:7px;}

  /* ---------- 品牌引导②：文末效率卡 ---------- */
  .doc-promo-card{margin:26px 0 22px;padding:18px 20px 17px;border-radius:var(--radius);
    background:var(--promo-bg);border:1px solid var(--promo-line);}
  .doc-promo-card .dpc-h{font-size:15px;font-weight:700;color:var(--fg);}
  .doc-promo-card .dpc-p{margin:7px 0 13px;font-size:14.5px;line-height:1.8;color:var(--fg-sub);}
  /* 按钮文字用 --bg：浅色主题下是白字，深色主题下自动转深字，两套都保证对比度 */
  .doc-promo-card .dpc-btn{display:inline-block;padding:8px 16px;border-radius:8px;
    background:var(--brand);color:var(--bg);font-size:14px;font-weight:600;
    transition:opacity .18s ease,transform .18s ease;}
  .doc-promo-card .dpc-btn:hover{opacity:.88;text-decoration:none;transform:translateY(-1px);}
  @media (max-width:640px){
    .doc-promo{padding:12px 14px;}
    .doc-promo p{font-size:14.5px;}
    .doc-promo-card{padding:15px 16px;}
  }

  /* ---------- 品牌引导③：站点页脚（全站每页常驻） ---------- */
  .doc-foot{margin-top:46px;border-top:1px solid var(--line);background:var(--bg-soft);}
  .doc-foot .df-inner{max-width:1180px;margin:0 auto;padding:24px 22px 26px;
    display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;font-size:13.5px;color:var(--fg-mute);}
  .doc-foot .df-brand{display:flex;align-items:baseline;gap:8px;font-weight:700;color:var(--fg-sub);}
  .doc-foot .df-sub{font-weight:400;font-size:12.5px;color:var(--fg-mute);}
  .doc-foot .df-links{display:flex;flex-wrap:wrap;gap:18px;margin-left:auto;}
  .doc-foot .df-links a{color:var(--fg-sub);}
  .doc-foot .df-cta{font-weight:600;color:var(--brand);}
  .doc-foot .df-note{flex:1 1 100%;margin:6px 0 0;font-size:12.5px;color:var(--fg-mute);}

  .table-wrap{overflow-x:auto;margin:20px 0;border:1px solid var(--line);border-radius:var(--radius);}
  table{border-collapse:collapse;width:100%;font-size:14.5px;}
  th,td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);
    padding:10px 13px;text-align:left;vertical-align:top;
    min-width:5.5em;overflow-wrap:break-word;}
  /* 首列通常是短标签（「问题」「驳回原因」「是否重要」），
     auto 布局下会被右侧长列挤成一列单字竖排 —— 给足最小宽度兜底 */
  th:first-child,td:first-child{min-width:8em;}
  th:last-child,td:last-child{border-right:none;}
  tr:last-child td{border-bottom:none;}
  th{background:var(--bg-soft);font-weight:600;white-space:nowrap;}
  tbody tr{transition:background .12s;}
  tbody tr:hover td{background:var(--bg-soft);}

  .callout{border-radius:var(--radius);padding:14px 17px;margin:20px 0;
    border:1px solid transparent;border-left-width:3px;}
  .callout p{margin:5px 0;}
  .callout-label{font-weight:700;font-size:12.5px;margin-bottom:5px;letter-spacing:.04em;
    display:flex;align-items:center;gap:6px;}
  .callout-note{background:var(--note-bg);border-color:var(--note-line);border-left-color:var(--note);}
  .callout-note .callout-label{color:var(--note);}
  .callout-tip{background:var(--tip-bg);border-color:var(--tip-line);border-left-color:var(--tip);}
  .callout-tip .callout-label{color:var(--tip);}
  .callout-warning{background:var(--warn-bg);border-color:var(--warn-line);border-left-color:var(--warn);}
  .callout-warning .callout-label{color:var(--warn);}
  /* :::tip 容器内的列表（2026-10-13）：框内空间紧，把全局 ul 的 15px 上下外边距收到 8px，
     左缩进也略收（26→22px），让「两条入口」与上方正文读成一块，而不是被大留白切开。 */
  .callout ul{margin:8px 0 2px;padding-left:22px;}
  .callout ul li{margin:3px 0;}
  /* 提示框内的行内代码（2026-10-14 小飞反馈「这一块的样式调一下」）：
     原来沿用全局 code 的灰底（--bg-hover），叠在浅绿 / 浅黄底色上像贴了块补丁，
     长英文选项名换行后更碎。框内改为「等宽 + 同色 + 无底色」，只保留
     『这是界面上的字面文字』的语义，不再抢视觉。 */
  .callout code{background:transparent;padding:0 1px;color:inherit;border-radius:0;}
  /* 行内微信图标（2026-10-14 小飞要求「放一个微信的图标」）：
     由 markdown 的 :wechat: 短代码产出（见 lib/md.mjs 的 WECHAT_ICON）。
     🚨 这段 CSS 本身在模板字符串里，注释中**不能出现反引号**，否则会提前终止字符串（已踩）。
     尺寸随字号（1em）而不是固定 px，因此在提示框和正文里都能自动匹配行高；
     基线用 vertical-align 微沉 0.14em 对齐中文重心；颜色固定微信绿 #07C160
     —— 与后台顶栏「微信客服」按钮的图标同色，读者一眼能认出是微信入口。 */
  .ico-wechat{display:inline-block;width:1.05em;height:1.05em;vertical-align:-0.14em;fill:#07C160;flex:none;}

  /* ---------- 文章内结构化组件（2026-09-30）----------
     产出方：lib/md.mjs 的 renderBlock —— Markdown 容器语法 :::dl / :::note / :::steps / :::cta。
     起因：官网装插件落地页的「下载大按钮 / 编号步骤 / 按钮组」迁进教程站后，全退化成纯文字链接。
     🚨 色值一律走变量、不写死：品牌黄 = --brand-y（与顶栏「免费试用」同源）；
        深色模式下主按钮靠 --fg/--bg 自动反转，别再各写一套。 */
  /* 下载按钮 + 注脚：注脚贴住按钮（10px）并压到 13.5px 小灰字，让读者把两者读成一个整体，
     而不是「按钮旁边另起一段可有可无的说明」。 */
  .doc-dl{margin:24px 0 18px;}
  .doc-dl-btn{display:inline-flex;align-items:center;gap:9px;background:var(--brand-y);color:var(--navy);
    font-weight:700;font-size:15.5px;padding:14px 28px;border-radius:11px;text-decoration:none;
    transition:background .2s;}
  .doc-dl-btn:hover{background:var(--brand-y-d);color:var(--navy);text-decoration:none;}
  .doc-dl-btn svg{width:19px;height:19px;flex:none;}
  .doc-dl-note{margin:10px 0 0;font-size:13.5px;line-height:1.75;color:var(--fg-mute);}

  /* 小标签标题（:::label）：主色细竖条 + 加粗短句，替代图片上方那个「没有归属感的裸图」。 */
  .doc-label{display:flex;align-items:center;gap:9px;margin:26px 0 0;
    font-size:14px;font-weight:700;color:var(--fg);letter-spacing:.01em;line-height:1.5;}
  .doc-label::before{content:"";flex:none;width:3px;height:13px;border-radius:2px;background:var(--brand);}
  .doc-label + .doc-img{margin-top:12px;}

  /* 提示框：整段橙字太吵 —— 底色保留、正文降为次要灰，橙只留给加粗的关键词；左边框加粗到 3px。 */
  .doc-note{background:var(--warn-bg);border:1px solid var(--warn-line);border-left:3px solid var(--warn);
    border-radius:var(--radius);padding:13px 16px;margin:0 0 22px;
    color:var(--fg-sub);font-size:14.5px;line-height:1.8;}
  .doc-note strong{color:var(--warn);font-weight:700;}

  /* 编号步骤：序号原为橙色，与「警告」撞语义；改主色后橙色在站内只代表警示。 */
  .doc-steps{list-style:none;counter-reset:s;margin:18px 0 0;padding:0;}
  .doc-steps li{position:relative;padding:16px 0 16px 48px;margin:0;border-bottom:1px solid var(--line-soft);}
  .doc-steps li:last-child{border-bottom:0;}
  .doc-steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:15px;
    width:28px;height:28px;border-radius:8px;background:var(--brand-soft);color:var(--brand);
    font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;}
  .doc-steps b{display:block;font-size:15.5px;font-weight:700;color:var(--fg);margin-bottom:4px;}
  .doc-steps span{color:var(--fg-sub);font-size:15px;line-height:1.85;}

  /* 按钮组：实心主按钮统一走品牌黄（与下载按钮、顶栏 CTA 同色），
     不用「黑底反色」那套 —— 全站转化按钮只允许一个色。 */
  .doc-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:24px 0 8px;}
  .doc-cta a{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;
    border-radius:10px;border:1px solid transparent;font-size:14px;font-weight:700;text-decoration:none;
    transition:background .2s,border-color .2s;}
  .doc-cta .doc-cta-primary{background:var(--brand-y);color:var(--navy);}
  .doc-cta .doc-cta-primary:hover{background:var(--brand-y-d);color:var(--navy);text-decoration:none;}
  .doc-cta .doc-cta-ghost{background:var(--bg-soft);color:var(--fg);border-color:var(--line);}
  .doc-cta .doc-cta-ghost:hover{background:var(--bg-hover);border-color:var(--fg-mute);color:var(--fg);text-decoration:none;}

  /* 结尾行动卡（:::final）：浅蓝底圆角大卡片 + 居中收尾文字 + 蓝底主按钮，用于文章末页引导。 */
  .doc-final{background:var(--brand-soft);border-radius:var(--radius);text-align:center;padding:34px 26px;margin:28px 0 18px;}
  .doc-final-note{margin:0 0 20px;font-size:15px;line-height:1.8;color:var(--fg);}
  .doc-final-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 30px;border-radius:10px;
    background:var(--brand);color:#fff;font-weight:700;font-size:15px;text-decoration:none;transition:background .2s;}
  .doc-final-btn:hover{background:var(--brand-ink);color:#fff;text-decoration:none;}

  /* ---------- 右侧本页目录 ---------- */
  .toc{position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow:auto;
    padding:34px 16px 60px;font-size:13px;overscroll-behavior:contain;scrollbar-width:thin;}
  .toc::-webkit-scrollbar{width:7px;}
  .toc::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}
  .toc-title{font-weight:700;color:var(--fg-mute);margin-bottom:11px;font-size:11.5px;
    letter-spacing:.08em;text-transform:uppercase;}
  .toc-list{list-style:none;margin:0;padding:0;border-left:1px solid var(--line);}
  .toc-list li{margin:0;}
  .toc-list a{display:block;padding:5px 0 5px 14px;color:var(--fg-sub);
    border-left:2px solid transparent;margin-left:-1px;line-height:1.6;transition:.13s;}
  .toc-list a:hover{color:var(--brand);text-decoration:none;}
  .toc-list a.active{color:var(--brand);font-weight:600;border-left-color:var(--brand);}
  .toc-list .lvl-3 a{padding-left:26px;font-size:12.5px;}

  /* ---------- 上下篇 / 相关文章 / 反馈 ---------- */
  .prevnext{display:flex;justify-content:space-between;gap:14px;margin-top:48px;
    padding-top:24px;border-top:1px solid var(--line);max-width:784px;}
  .prevnext a{border:1px solid var(--line);border-radius:var(--radius);padding:13px 16px;
    flex:1;color:var(--fg);font-size:14px;line-height:1.5;transition:.15s;min-width:0;}
  .prevnext a:hover{border-color:var(--brand);background:var(--brand-soft);text-decoration:none;}
  .prevnext .pn-sub{display:block;color:var(--fg-mute);font-size:11.5px;margin-bottom:4px;
    letter-spacing:.03em;}
  .prevnext .pn-next{text-align:right;}
  .prevnext .pn-t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  .related{margin-top:44px;max-width:784px;}
  .related-h{font-size:14px;font-weight:700;color:var(--fg-sub);margin-bottom:12px;
    display:flex;align-items:center;gap:8px;}
  .related-h::after{content:"";flex:1;height:1px;background:var(--line);}
  .related-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;}
  .related-list a{border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;
    color:var(--fg);font-size:14px;line-height:1.55;transition:.15s;}
  .related-list a:hover{border-color:var(--brand);background:var(--brand-soft);text-decoration:none;}
  .related-list .rg-g{display:block;color:var(--fg-mute);font-size:11.5px;margin-top:5px;}

  .feedback{margin-top:38px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;
    background:var(--bg-soft);max-width:784px;display:flex;flex-wrap:wrap;align-items:center;
    gap:12px;font-size:14px;}
  .feedback .fb-q{font-weight:600;color:var(--fg);}
  .feedback .fb-btns{display:flex;gap:9px;margin-left:auto;}
  .fb-btn{border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;
    border-radius:9px;padding:7px 15px;font-size:13.5px;font-family:inherit;transition:.15s;}
  .fb-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);}
  .fb-btn.sel{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);font-weight:600;}
  .fb-thanks{color:var(--tip);font-weight:600;display:none;align-items:center;gap:6px;}
  .fb-thanks.show{display:inline-flex;}
  .fb-extra{display:none;font-size:13.5px;color:var(--fg-sub);line-height:1.7;flex-basis:100%;}
  .fb-extra.show{display:block;}

  /* ---------- 联系我们页（contact.html）：实体与联系方式清单 ---------- */
  .contact-list{display:flex;flex-direction:column;gap:0;margin:22px 0 4px;
    border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
  .contact-list .ci{display:flex;gap:16px;padding:14px 18px;border-top:1px solid var(--line-soft);}
  .contact-list .ci:first-child{border-top:0;}
  .contact-list .ci-k{flex:none;width:88px;color:var(--fg-mute);font-size:13.5px;}
  .contact-list .ci-v{flex:1;min-width:0;color:var(--fg);font-size:14px;line-height:1.75;
    word-break:break-word;}
  .contact-list .ci-v a{color:var(--brand);}

  /* ---------- 联系我们页：在线客服入口（企业微信「直接咨询」） ---------- */
  /* 🔴 2026-10-12 站长要求：「联系我们」页要能一键在线联系客服。
     数据源 = 后台「站点设置 → 直接咨询」的客服链接（directChatUrl）与客服码（directChatQr），
     与卖家后台顶栏「联系客服」浮窗同一份配置（单一真源）；两项都没配则整块不渲染（不留死按钮）。
     按钮取微信绿 #07C160（微信品牌识别，与后台客服按钮同色），深色模式下同样成立故不随主题变。 */
  .cs-online{display:flex;align-items:center;gap:20px;margin:20px 0 4px;
    padding:20px 24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);}
  .cs-main{flex:1;min-width:220px;}
  .cs-title{font-size:14px;font-weight:600;color:var(--fg);margin:0 0 5px;}
  .cs-desc{font-size:13px;color:var(--fg-mute);margin:0 0 14px;line-height:1.7;}
  .cs-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;line-height:1;
    background:#07C160;color:#fff;font-size:14.5px;font-weight:600;border-radius:9px;
    text-decoration:none;transition:background .15s,transform .05s;}
  .cs-btn:hover{background:#06AD56;color:#fff;text-decoration:none;}
  .cs-btn:active{transform:translateY(1px);}
  .cs-btn svg{display:block;flex:none;}
  /* 二维码：不再套白底与边框（图片自带浅灰底就是它的边界），只圆角收敛；
     左侧一条 1px 竖线把它和「点按钮」分成两条并列路径。 */
  .cs-qr{flex:none;display:flex;align-items:center;justify-content:center;
    border-left:1px solid var(--line);padding-left:20px;}
  .cs-qr img{display:block;width:128px;height:128px;object-fit:contain;border-radius:10px;}
  @media (max-width:560px){
    .cs-online{flex-direction:column;align-items:stretch;gap:16px;}
    .cs-main{min-width:0;}
    .cs-btn{justify-content:center;}
    .cs-qr{align-self:stretch;border-left:0;padding-left:0;
      border-top:1px solid var(--line);padding-top:16px;}
  }

  /* ---------- 联系我们页：在线反馈表单（feedbackForm） ---------- */
  .feedback-block{margin:30px 0 8px;padding:22px 22px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-soft);}
  .feedback-block h2{font-size:18px;margin:0 0 6px;color:var(--fg);}
  .feedback-sub{color:var(--fg-mute);font-size:13.5px;margin:0 0 16px;line-height:1.7;}
  .feedback-form .ff-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;overflow:hidden;}
  .feedback-form .ff-row{display:flex;gap:14px;flex-wrap:wrap;}
  .feedback-form .ff-field{flex:1;min-width:200px;margin-bottom:14px;display:flex;flex-direction:column;gap:6px;}
  .feedback-form .ff-field label{font-size:13px;color:var(--fg-mute);}
  .feedback-form .ff-opt{color:var(--fg-mute);font-weight:400;}
  .feedback-form .ff-req{color:var(--danger);}
  .feedback-form input,
  .feedback-form select,
  .feedback-form textarea{
    width:100%;box-sizing:border-box;padding:9px 11px;font-size:14px;line-height:1.5;
    color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;
    font-family:inherit;transition:border-color .15s, box-shadow .15s;
  }
  .feedback-form textarea{resize:vertical;min-height:108px;}
  .feedback-form input:focus,
  .feedback-form select:focus,
  .feedback-form textarea:focus{
    outline:none;border-color:var(--brand);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
  }
  .feedback-form .ff-actions{display:flex;align-items:center;gap:14px;margin-top:2px;}
  .feedback-form .ff-submit{
    appearance:none;border:0;cursor:pointer;padding:9px 22px;font-size:14px;font-weight:600;
    color:#fff;background:var(--brand);border-radius:8px;transition:opacity .15s, transform .05s;
  }
  .feedback-form .ff-submit:hover{opacity:.92;}
  .feedback-form .ff-submit:active{transform:translateY(1px);}
  .feedback-form .ff-submit:disabled{opacity:.55;cursor:not-allowed;}
  .feedback-form .ff-status{font-size:13px;color:var(--fg-mute);}
  .feedback-form .ff-status.ok{color:var(--tip);}
  .feedback-form .ff-status.err{color:var(--danger);}
  .feedback-form .ff-hint{margin:14px 0 0;font-size:12.5px;color:var(--fg-mute);line-height:1.6;}

  /* ---------- 返回顶部 ---------- */
  /* 🚨 2026-10-02：桌面端新增右侧贴边常驻竖条（lib/wechat-rail.mjs，贴 right:0），
     返回顶部原 right:24px 会与竖条重叠 ⇒ 让到竖条左侧（24+40+12=76px）。
     移动端另有 @media(max-width:860px) 的 62px 让位规则（避让底部底栏），互不影响。 */
  .backtop{position:fixed;right:76px;bottom:26px;width:42px;height:42px;border-radius:50%;
    border:1px solid var(--line);background:var(--bg-elev);color:var(--fg-sub);cursor:pointer;
    box-shadow:var(--shadow-md);font-size:17px;display:flex;align-items:center;
    justify-content:center;opacity:0;visibility:hidden;transform:translateY(8px);
    transition:.2s;z-index:45;}
  .backtop.show{opacity:1;visibility:visible;transform:none;}
  .backtop:hover{color:var(--brand);border-color:var(--brand);}

  /* ---------- 图片灯箱 ---------- */
  .lightbox{position:fixed;inset:0;z-index:100;background:rgba(8,11,15,.94);
    display:none;align-items:center;justify-content:center;padding:4vh 3vw;}
  .lightbox.show{display:flex;}
  .lightbox img{max-width:94vw;max-height:88vh;border-radius:8px;
    box-shadow:0 24px 70px rgba(0,0,0,.66);cursor:default;}
  .lb-btn{position:absolute;border:1px solid rgba(255,255,255,.2);background:rgba(30,36,44,.8);
    color:#e6edf3;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:17px;
    display:flex;align-items:center;justify-content:center;transition:.15s;}
  .lb-btn:hover{background:rgba(60,70,82,.95);color:#fff;}
  .lb-close{top:20px;right:22px;}
  .lb-prev{left:22px;top:50%;margin-top:-20px;}
  .lb-next{right:22px;top:50%;margin-top:-20px;}
  .lb-cap{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#c3cdd8;
    font-size:13px;padding:0 20px;line-height:1.6;}
  .lb-count{position:absolute;top:26px;left:24px;color:#c3cdd8;font-size:12.5px;
    font-family:var(--mono);}

  /* ---------- 提示气泡（锚点复制等轻提示） ---------- */
  .toast{position:fixed;left:50%;bottom:40px;transform:translate(-50%,14px);
    background:var(--fg);color:var(--bg);font-size:13.5px;padding:9px 18px;border-radius:20px;
    box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transition:.22s;z-index:110;
    pointer-events:none;}
  .toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);}

  /* ---------- 首页 ---------- */
  /* 首屏只放「这里有什么 + 怎么开始」：标题 → 一句话 → 数字 → 两个入口，然后用一条分隔线收住，
     正文的栏目卡片从第二条开始读 —— 比原来「标题 + 描述 + 一屏卡片」更有层级。 */
  .home-hero{max-width:784px;padding-bottom:30px;border-bottom:1px solid var(--line);}
  .home-hero h1{font-size:35px;margin-bottom:12px;letter-spacing:-.6px;}
  .home-hero>p{font-size:16.5px;color:var(--fg-sub);line-height:1.85;}
  .home-stats{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 26px;margin-top:20px;
    font-size:13.5px;color:var(--fg-sub);}
  .home-stats span{display:inline-flex;align-items:baseline;gap:5px;position:relative;}
  .home-stats b{color:var(--fg);font-weight:700;font-size:17px;letter-spacing:-.3px;}
  .home-stats span+span::before{content:'';position:absolute;left:-13px;top:50%;
    width:1px;height:13px;background:var(--line);transform:translateY(-50%);}
  .home-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
  .h-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:10px;
    font-size:14px;font-weight:600;border:1px solid var(--line);color:var(--fg);transition:.16s;}
  .h-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);text-decoration:none;}
  .h-btn-main{background:var(--brand);border-color:var(--brand);color:#fff;}
  .h-btn-main:hover{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff;
    filter:brightness(1.04);box-shadow:0 5px 16px rgba(22,119,255,.26);}
  .home-body{margin-top:4px;}
  .home-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px;margin-top:14px;}
  /* 卡片右侧留出箭头位；箭头平时淡、hover 时才亮起来 —— 提示「这张卡是能点进去的」 */
  .home-card{border:1px solid var(--line);border-radius:12px;padding:17px 42px 17px 18px;color:var(--fg);
    transition:.16s;background:var(--bg-elev);display:block;position:relative;}
  .home-card:hover{border-color:var(--brand);box-shadow:0 6px 20px rgba(22,119,255,.13);
    text-decoration:none;transform:translateY(-2px);}
  .home-card::after{content:'→';position:absolute;right:17px;top:50%;margin-top:-11px;
    color:var(--fg-mute);font-size:15px;opacity:.5;transition:.16s;}
  .home-card:hover::after{color:var(--brand);opacity:1;transform:translateX(3px);}
  .home-card .t{font-weight:700;font-size:15px;line-height:1.5;}
  .home-card .d{color:var(--fg-sub);font-size:12.5px;margin-top:7px;}
  /* 分区标题左侧短竖条：5 个栏目平铺时靠它分出「这是新的一节」 */
  /* scroll-margin-top：Hero 的「浏览全部教程」跳到第一节，不加这条会被吸顶栏盖住 */
  .home-sec{font-size:17px;font-weight:700;margin:36px 0 0;display:flex;align-items:center;gap:10px;
    scroll-margin-top:calc(var(--topbar-h) + 20px);}
  .home-sec::before{content:'';flex:none;width:3px;height:15px;border-radius:2px;background:var(--brand);}
  /* 栏目名旁的「N 篇」：🚨 纯文字，不用方框/胶囊（2026-09-17 站长要求） */
  .home-sec .n{font-size:12px;font-weight:500;color:var(--fg-mute);}
  .home-sec-link{margin-left:auto;font-size:13px;font-weight:500;color:var(--brand);}
  .home-recent{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
  .home-recent a{display:flex;align-items:center;gap:11px;padding:12px 16px;
    border-bottom:1px solid var(--line-soft);color:var(--fg);font-size:14px;transition:.13s;}
  .home-recent a:last-child{border-bottom:none;}
  .home-recent a:hover{background:var(--bg-soft);text-decoration:none;color:var(--brand);}
  .home-recent .r-d{margin-left:auto;color:var(--fg-mute);font-size:12px;flex:none;}

  /* ---------- 子栏目列表页（右侧竖向专题标签 + 简洁分组列表） ---------- */
  /**
   * 🚨 栏目页专用背景（2026-09-17，站长指定参考 helpcenter.noon.partners）：
   *    135° 浅色渐变底 + 三层极淡光晕 —— 左上角是品牌黄（#feee00）向外渐隐，
   *    右下淡紫、中右淡橙补层次，整层铺满视口且不随滚动（background-attachment:fixed），
   *    观感与参考站 hero 背后的光球一致。
   *    只作用于「栏目页」（栏目页模板给 <body> 加了 class="cat-body"），文章页与首页保持原样不动。
   *    光晕色值全走 --cat-orb-* 变量 ⇒ 深色主题自动换成低明度版本，不用写第二套样式。
   */
  body.cat-body{
    background:
      radial-gradient(120% 86% at -8% -14%, var(--cat-orb-yellow) 0%, transparent 62%),
      radial-gradient(94% 78% at 104% 106%, var(--cat-orb-violet) 0%, transparent 60%),
      radial-gradient(58% 48% at 80% 40%, var(--cat-orb-orange) 0%, transparent 60%),
      var(--cat-base);
    background-attachment:fixed;
  }
  body.cat-body .content{padding:28px 32px 80px;}
  /* 🚨 左右两条菜单（左：栏目导航；右：本页专题）各自保留底色，把整页背景挡住 ⇒
        渐变底与左上角品牌黄只出现在中间内容区那一条（2026-09-17 站长要求）。 */
  body.cat-body .sidebar{background:var(--bg-soft);}
  body.cat-body .toc{background:var(--bg-soft);}
  /* 内容不再包白卡，直接坐在渐变背景上 */
  body.cat-body .cat-page{padding:26px 0 18px;}
  /* 🚨 栏目列表页右侧 toc 列是空的，宽屏仍被预留 232px，导致列表偏窄、右侧一片空白。
     栏目页强制 2 栏并放宽列表上限，让列表真正变宽（2026-10 站长要求加宽）。
     🚨 这条必须锁在桌面端：body.cat-body 的特异性(0,2,1) 高于移动端媒体查询里的 .layout(0,1,0)，
     若不限制断点，移动端单列会被这条 264px 抢回两栏、把文章列表挤成 264px 宽（2026-10-02 修复）。 */
  @media (min-width:861px){
    body.cat-body .layout{grid-template-columns:264px minmax(0,1fr);}
  }
  body.cat-body .toc{display:none;}
  body.cat-body .content{max-width:1040px;}
  body.cat-body .cat-page{max-width:920px;}
  .cat-page{max-width:784px;}
  .cat-page h1{font-size:28px;line-height:1.3;letter-spacing:-.3px;margin:0 0 8px;}
  .cat-sub{margin:0 0 26px;color:var(--fg-sub);font-size:13.5px;}

  /* 右侧「本页专题」竖向标签：点一下跳到该专题，滚动自动高亮 */
  .cat-tab-list{display:flex;flex-direction:column;border-left:1px solid var(--line);}
  .cat-tab{display:flex;align-items:baseline;gap:8px;margin-left:-1px;
    padding:6px 10px 6px 13px;border-left:2px solid transparent;
    color:var(--fg-sub);font-size:13.5px;line-height:1.55;
    transition:color .15s,border-color .15s,background .15s;}
  .cat-tab b{margin-left:auto;font-size:11.5px;font-weight:500;color:var(--fg-mute);
    font-variant-numeric:tabular-nums;transition:color .15s;}
  .cat-tab:hover{color:var(--brand);background:none;text-decoration:none;}
  .cat-tab:hover b{color:var(--brand);}
  .cat-tab.active{color:var(--brand);font-weight:600;border-left-color:var(--brand);background:none;}
  .cat-tab.active b{color:var(--brand);}
  /* 内容区顶部横向条（仅当右侧栏被隐藏时出现） */
  .cat-tab-bar{display:none;}

  /* 分组区块 + 文章列表 */
  .cat-group{scroll-margin-top:calc(var(--topbar-h) + 20px);}
  .cat-group-h{display:flex;align-items:baseline;gap:9px;font-size:15.5px;font-weight:700;
    margin:32px 0 6px;padding-bottom:8px;border-bottom:1px solid var(--line);}
  .cat-group-n{margin-left:auto;font-size:12px;font-weight:400;color:var(--fg-mute);
    font-variant-numeric:tabular-nums;}
  .cat-list{display:flex;flex-direction:column;}
  .cat-item{display:flex;align-items:center;gap:14px;padding:12px 2px;
    border-bottom:1px solid var(--line-soft);color:var(--fg);transition:color .14s;}
  .cat-item:last-child{border-bottom:none;}
  .cat-item:hover{color:var(--brand);text-decoration:none;}
  .cat-item-no{flex:none;width:22px;font-family:var(--mono);font-size:12px;font-weight:500;
    color:var(--fg-mute);font-variant-numeric:tabular-nums;transition:color .14s;}
  .cat-item-t{flex:1;min-width:0;font-size:15px;font-weight:500;line-height:1.6;}
  .cat-item-read{flex:none;font-size:12px;color:var(--fg-mute);font-variant-numeric:tabular-nums;}
  .cat-item-arrow{flex:none;color:var(--fg-mute);font-size:15px;transition:transform .16s,color .16s;}
  .cat-item:hover .cat-item-no,.cat-item:hover .cat-item-read,.cat-item:hover .cat-item-arrow{color:var(--brand);}
  .cat-item:hover .cat-item-arrow{transform:translateX(3px);}

  /* ---------- 响应式 ---------- */
  @media (max-width:1240px){
    .toc{display:none;} .layout{grid-template-columns:264px minmax(0,1fr);}
    /* 右侧栏被隐藏 → 专题导航改由内容区顶部横向条承担。
       🚨 无方框（2026-09-17 站长要求）：不用胶囊/边框，纯文字排开，活跃项靠下划线指示。 */
    .cat-tab-bar{display:flex;flex-wrap:wrap;gap:2px 20px;margin:0 0 20px;
      padding-bottom:10px;border-bottom:1px solid var(--line-soft);}
    .cat-tab-bar .cat-tab{margin:0;padding:2px 0;gap:6px;
      border:0;border-bottom:1.5px solid transparent;border-radius:0;background:none;}
    .cat-tab-bar .cat-tab b{margin-left:0;background:none;border-radius:0;padding:0;
      font-size:11.5px;color:var(--fg-mute);}
    .cat-tab-bar .cat-tab:hover{color:var(--brand);background:none;border-bottom-color:var(--line);}
    .cat-tab-bar .cat-tab:hover b{color:var(--brand);}
    .cat-tab-bar .cat-tab.active{color:var(--brand);background:none;border-bottom-color:var(--brand);}
    .cat-tab-bar .cat-tab.active b{background:none;color:var(--brand);}
  }
  @media (max-width:980px){
    .content{padding:32px 32px 80px;}
    /* 栏目页白卡自带内边距，内容区相应收一收，免得左右缩进过宽 */
    body.cat-body .content{padding:24px 26px 72px;}
    body.cat-body .cat-page{padding:22px 0 14px;}
    .search input{width:190px;}
  }
  @media (max-width:860px){
    .topbar{padding:0 14px;gap:10px;}
    /* 移动端顶栏有搜索框（占很长），品牌名+图标不再显示，避免拥挤；
       搜索框 flex:1 撑满剩余空间。营销官网/合规页用 .sh 头部（无搜索框），
       其 .sh-brand 不受影响、照常显示。 */
    .topbar .brand{display:none;}
    .menu-btn{display:flex;}
    /* 站点链接与 CTA 一律交给侧栏抽屉 */
    .nav-site{display:block;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line);}
    .search{flex:1 1 auto;margin-left:0;min-width:0;}
    .search input{width:100%;max-width:none;}
    .search-kbd{display:none;}
    .search-results{right:0;left:auto;}
    .layout{grid-template-columns:1fr;}
    .content{padding:26px 20px 80px;}
    .content article,.prevnext,.related,.feedback,.home-hero,.home-cards,.home-recent{max-width:none;}
    /* 侧栏改为抽屉 */
    .sidebar{position:fixed;top:0;left:0;bottom:0;height:100vh;width:286px;max-width:86vw;z-index:75;
      transform:translateX(-102%);transition:transform .24s ease;border-right:1px solid var(--line);
      background:var(--bg-elev);padding:20px 14px 60px;box-shadow:var(--shadow-md);}
    .sidebar.open{transform:none;}
    .drawer-mask{display:block;position:fixed;inset:0;background:rgba(8,11,15,.46);z-index:70;
      opacity:0;visibility:hidden;transition:.24s;}
    .drawer-mask.show{opacity:1;visibility:visible;}
    h1{font-size:26px;}
    h2{font-size:21px;}
    h3{font-size:17.5px;}
    body{font-size:16px;}
    /* 🚨 2026-10-02：移动端有底部常驻菜单栏（高 52px，见 docs/lib/mobile-nav.mjs），
       返回顶部按钮原 bottom:18px 会被底栏压住一半 ⇒ 抬到 52+10=62px 让位。
       若底栏高度调整，此处必须同步（两边都在 ≤768px 生效）。
       🔴 right 用 16px 而非 76px：桌面端右侧有贴边竖条（lib/wechat-rail.mjs，占 0~40px），
          竖条 z-index:58 固定贴边，若移动端也让到 76px，竖条与按钮会错位分离反而不自然；
          移动端（≤768px）竖条完全不显示，两者互斥，用16px 靠边即可。 */
    .backtop{right:16px;bottom:62px;}
    /* 同上：toast 原 bottom:40px 也在底栏下方，抬到 62px */
    .toast{bottom:62px;}
    .prevnext{flex-direction:column;}
    .prevnext .pn-next{text-align:left;}
    .feedback .fb-btns{margin-left:0;width:100%;}
    .fb-btn{flex:1;}
    .lb-prev{left:10px;} .lb-next{right:10px;}
    .lb-close{top:14px;right:14px;}
    /* 子栏目页：横向条可滑动、列表收敛 */
    .cat-tab-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
      scrollbar-width:none;padding:0 0 2px;}
    .cat-tab-bar::-webkit-scrollbar{display:none;}
    .cat-tab-bar .cat-tab{flex:none;}
    .cat-page h1{font-size:23px;}
    .cat-item{gap:10px;padding:11px 0;}
    .cat-item-read{display:none;}
    .cat-item-no{width:20px;}
    /* 栏目页白卡在窄屏收边，避免内容被挤成一条 */
    body.cat-body .content{padding:16px 14px 64px;}
    body.cat-body .cat-page{padding:16px 0 10px;}
  }

  /* ---------- 打印 ---------- */
  @media print{
    .topbar,.sidebar,.toc,.backtop,.reading-progress,.prevnext,.related,.feedback,
    .lightbox,.toast,.search,.menu-btn,.anchor,.code-copy{display:none!important;}
    .layout{display:block;}
    .content{padding:0;max-width:none;}
    .content article{max-width:none;}
    body{font-size:12pt;line-height:1.6;}
    a{color:inherit;text-decoration:underline;}
    pre{background:#f5f5f5;color:#111;box-shadow:none;border:1px solid #ddd;}
    pre code{color:#111;}
    .doc-img{box-shadow:none;page-break-inside:avoid;}
    h2,h3{page-break-after:avoid;}
  }

/* ===== 前台统一页脚（唯一维护点：docs/lib/site-footer.mjs）===== */
.sf{border-top:1px solid #e7ebf0;background:#fff;padding:24px 0;color:#57616f;font-size:13px;line-height:1.7}
.sf-in{max-width:1180px;margin:0 auto;padding:0 28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.sf-brand{display:flex;align-items:center;gap:9px;color:#111827;font-weight:700;font-size:14px;text-decoration:none}
.sf-brand img{height:22px;width:22px;border-radius:5px;object-fit:cover;display:block}
.sf-links{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sf-links a{color:#57616f;text-decoration:none;transition:color .2s}
.sf-links a:hover{color:#111827}
/* 深色适配分两段：① 用户手动切过深色（html 带 data-theme="dark"）；
   ② 系统偏好深色且用户没手动切过（html 上没有任何 data-theme 属性，走媒体查询）。
   🚨 官网页面的 html 根元素已显式声明 data-theme="light"（纯浅色设计）⇒ 不会命中②，页脚保持白底。
   2026-09-30 之前只写了①，于是"系统深色 + 没手动切过"时正文已转深底、页脚仍是白底，底部留一条白带。 */
html[data-theme="dark"] .sf{background:#0e1319;border-top-color:#232d38}
html[data-theme="dark"] .sf-brand{color:#e3e9f0}
html[data-theme="dark"] .sf-links a{color:#9aa7b4}
html[data-theme="dark"] .sf-links a:hover{color:#e3e9f0}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .sf{background:#0e1319;border-top-color:#232d38}
  html:not([data-theme="light"]) .sf-brand{color:#e3e9f0}
  html:not([data-theme="light"]) .sf-links a{color:#9aa7b4}
  html:not([data-theme="light"]) .sf-links a:hover{color:#e3e9f0}
}
@media(max-width:680px){.sf-in{flex-direction:column;justify-content:center;text-align:center;gap:14px}}