/* ============================================================
   AmberVouch 工具页样式
   ------------------------------------------------------------
   【2026-09-26 换肤】色值令牌已全部移交 theme.css（全站唯一设计系统，
   琥珀金 · 深墨底）。本文件不再定义 :root 色值 —— 保留两处真源必然
   导致「改一处忘一处」，这正是此前四套皮肤并存的成因。
   工具页与主站共用同一套 --gold / --surface / --line / --ink。
   此处只保留工具页独有的尺寸令牌。
   ============================================================ */
:root{
  --nav-h:60px;         /* 顶栏统一高度（全站一致，见导航统一） */
}
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
    background: var(--bg-2);
    color:var(--ink);
    line-height: 1.6;
  }
  .mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }

  /* ---------- 头部 ---------- */
  /* 【2026-10-05 去双份真源】.hd / .hd h1 / .hd .sub 原本在这里和 theme.css 各写一份，
     靠「theme.css 后加载」才拿到正确值（24px）。这是脆弱平衡：任何一页加载顺序反了，
     这里的 17px 与 height:60px 就会冒出来（后者会直接让页头说明文字被横条压住）。
     现在这一份只保留与 theme.css 不冲突的排版职责，尺寸一律以 theme.css 为准：
       · .hd 的 height 已统一改为 min-height（与 theme.css 第 423 行同口径）
       · .hd h1 / .hd .sub 的字号字重交给 theme.css 的 .hd h1{24px} / .hd .sub{13px}，
         这里不再重复声明，避免「改一处不生效」。
     保留 .hd-l / .logo / .hd-r / .pill —— 这些 theme.css 不管，是本层独有的。 */
  header { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--border); box-shadow:0 1px 3px rgba(0,0,0,.06); }
  .wrap { max-width: 1400px; margin: 0 auto; padding: 0 16px; }
  .hd { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
        padding: 0; min-height: var(--nav-h, 60px); box-sizing: border-box; }
  /* 【2026-09-19】顶栏高度统一：这一版原先实测 74px（首页 62 / 门户系 58 / 版权指南 79），
     四个值在讲同一件事。现在一律 --nav-h（60px），窄屏放行由内容撑高。 */
  @media (max-width: 640px) { .hd { height: auto; min-height: var(--nav-h, 60px); padding: 10px 0; } }
  .hd-l { display: flex; align-items: center; gap: 12px; }
  .logo { width: 38px; height: 38px; border-radius: 8px; background:rgba(255,255,255,.16);
          display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
  .hd-r { font-size: 12px; color:var(--ink-2); text-align: right; }
  .pill { display: inline-block; background:rgba(255,255,255,.16); border-radius: 999px;
          padding: 2px 10px; font-size:12px; }

  /* ---------- 工具导航 ----------
   * 【2026-10-17｜修正两处遮挡】
   * ① 原来的 top:0 是错的：全站顶栏 .u-nav（DIV，不是 <nav>，故不吃这条规则）自己就
   *    是 sticky top:0 z-index:60。页内标签条若也 top:0 且 z-index 只有 20，滚动后会
   *    **整条藏到顶栏背后**，用户看不到也点不到。正确位置是顶栏下方：top:var(--nav-h)。
   * ② 原来按 --catbar-h 定位、由 catbar.css 覆盖成 calc(--nav-h + --catbar-h)：
   *    那是「顶栏 + 横条 + 标签条」三层吸顶，桌面 164px、手机 275px（占屏 32%），
   *    用户明确反馈「下拉时标签和导航挡住内容」。现统一为两层：
   *    · 有分类横条的页面：横条吸顶，页内标签条不吸顶（见 catbar.css 的 position:static）
   *    · 没有横条的页面：标签条吸顶在顶栏下方这一层
   * ⚠️ 必须 :not(.hub-catnav-bar)：横条本身就是 <nav>，不排除会被自己这条规则改掉。 */
  nav:not(.hub-catnav-bar) { background: var(--surface); border-bottom: 1px solid var(--border);
        position: sticky; top: var(--nav-h, 60px); z-index: 20; }
  .tabs { display: flex; gap: 4px; overflow-x: auto; padding: 8px 0; }
  /* 【2026-10-06 视觉统一】原为 `border: 1px solid transparent` —— 未选中的标签
     等于「没有框」，与同排的 .tabout（有框）并排时一个有一个没有，观感碎裂。
     现统一为「实线浅边 + 浅底」，与 .tabout 完全同款；仅在选中(.on)时换成琥珀实心。
     这样整排读起来是同一族胶囊，只靠颜色区分状态。 */
  .tab { flex: 0 0 auto; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--border);
         background: var(--bg-2); color:var(--ink); font-size: 13px; cursor: pointer; white-space: nowrap;
         transition: .14s; }
  .tab:hover { background: var(--brand-light); border-color: var(--amber); }
  .tab.on { background: var(--amber); color:var(--ink); border-color: var(--amber); }
  /* 分类页顶部补全的「同类工具」外链：不在本页有面板，点了会跳到独立工具页。
   *
   * 【2026-10-06 视觉统一】原为 `1px dashed` 虚线框，与同一行相邻的 .tab
   * （透明边框、无可见框）并排时，一个虚线一个无框，观感碎裂（用户截图反馈）。
   * 现统一为「实线浅边 + 浅底」的胶囊：与 .tab 同一轮角、同一内边距、同一字号、
   * 同一底色，整排同一族；只保留末尾 ↗ 箭头作为「会跳走」的语义提示。 */
  .tabout { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px;
    border-radius: 6px; border: 1px solid var(--border); background: var(--bg-2); color: var(--muted);
    font-size: 13px; white-space: nowrap; text-decoration: none; transition: .14s; }
  .tabout:hover { background: var(--brand-light); color: var(--txt); border-color: var(--amber); }
  .tabout::after { content: '↗'; font-size:12px; opacity: .6; }

  /* 分类下拉导航：顶部只显示六大类名称，悬停/点击展开该类的工具
     注意 overflow 必须放行，否则下拉会被 .tabs 原有的 overflow-x:auto 裁掉 */
  .tabs.catnav { overflow: visible; flex-wrap: wrap; gap: 2px; }
  .cn-item { position: relative; }
  .cn-top { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 8px;
    border: 1px solid transparent; background: transparent; font-size: 13px; font-weight: 600;
    color: var(--txt); cursor: pointer; font-family: inherit; white-space: nowrap; transition: .15s; }
  .cn-item:hover .cn-top, .cn-item.open .cn-top {
    background: var(--brand-light); border-color: var(--border); }
  .cn-ic { font-size: 15px; line-height: 1; }
  .cn-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid currentColor; opacity: .45; }
  .cn-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 216px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 10px; box-shadow:0 8px 24px rgba(16,24,38,.10);
    padding: 6px; display: none; z-index: 60; }
  .cn-item:hover .cn-menu, .cn-item.open .cn-menu { display: block; }
  /* 热区桥接：菜单在按钮下方留了 4px 缝，鼠标从按钮移向菜单时会穿过这条缝，
     :hover 中断导致菜单闪退。这里铺一层不可见热区把缝补上（与首页导航同款做法）。 */
  .cn-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
  .cn-menu .tab, .cn-menu a { display: block; width: 100%; text-align: left; padding: 7px 10px;
    border-radius: 6px; border: 0; background: transparent; font-size: 13px; font-weight: 400;
    color: var(--txt); text-decoration: none; cursor: pointer; font-family: inherit; transition: .12s; }
  .cn-menu .tab:hover, .cn-menu a:hover, .cn-menu .tab:focus-visible, .cn-menu a:focus-visible {
    background: var(--amber); color: var(--ink); }
  .cn-menu .tab.on { background: var(--amber); color:var(--ink); }

  /* 窄屏适配（2026-10-05 修）：菜单默认 left:0 向右展开，靠右的分类项会让菜单
     右边界超出视口 → documentElement.scrollWidth 变大 → 出现横向滚动条。
     横向滚动只由「右侧溢出」决定，故窄屏统一改为 right:0（右边界对齐触发项），
     宽度同时受视口约束。（与 _catbar-def.js 的 CATBAR_STYLE 保持同步） */
  @media (max-width: 600px) {
    .cn-menu { left: auto; right: 0; min-width: 0; width: min(216px, calc(100vw - 24px)); }
  }

  /* 分类分组标签：把 tab 条按六大分类切开（.tcat 不是 .tab，initTabs 不受影响） */
  .tabs .tcat { display: inline-flex; align-items: center; font-size:12px; font-weight: 600;
    color: var(--muted); white-space: nowrap; padding: 0 2px 0 12px; user-select: none; }
  .tabs .tcat:first-child { padding-left: 2px; }
  .tabs .tcat::after { content: ''; width: 1px; height: 13px; background: var(--border); margin-left: 10px; }

  /* ---------- 面板 ---------- */
  main { padding: 20px 0 60px; }
  .panel { display: none; }
  .panel.on { display: block; }
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-bottom: 16px; }
  .card h2 { margin: 0 0 4px; font-size: 16px; color: var(--brand); }
  .card .desc { margin: 0 0 16px; font-size: 13px; color: var(--muted); }
  /* 【2026-10-06】.hint 与 .desc 同为「卡片下方说明文字」，此前 .hint 没有样式定义、
     走浏览器默认（14px 黑体、无下边距），与 A 类页面的 .desc 观感不一致。
     这里对齐 .desc：同样字号/颜色/下边距，仅在多段时追加段间距。 */
  .card .hint { margin: 0 0 16px; font-size: 13px; color: var(--muted); }
  .card .hint + .hint { margin-top: -8px; }

  /* ---------- 拖拽区 ---------- */
  .drop { border: 2px dashed var(--line-2); border-radius: 10px; background: var(--surface);
          padding: 28px 16px; text-align: center; cursor: pointer; transition: .15s; }
  .drop:hover, .drop.active { border-color: var(--brand); background: var(--brand-light); }
  .drop .big { font-size: 14px; color:var(--ink); }
  .drop .small { font-size: 12px; color: var(--muted); margin-top: 4px; }

  /* ---------- 表单 ---------- */
  .row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 14px; }
  .fld { display: flex; flex-direction: column; gap: 4px; }
  .fld label { font-size: 12px; color: var(--muted); }
  select, input[type=text], input[type=number] {
    border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px; font-size: 13px;
    background: var(--surface); color:var(--ink); min-width: 100px;
  }
  input[type=range] { width: 160px; }
  .btn {
    border: 1px solid var(--border); background: var(--surface); color:var(--ink);
    border-radius: 6px; padding: 8px 16px; font-size: 13px; cursor: pointer; transition: .15s;
  }
  .btn:hover { background: var(--bg-2); }
  .btn-p { background: var(--amber); border-color: var(--amber); color:var(--ink); }
  .btn-p:hover { background: var(--amber-deep); }
  .btn:disabled { opacity: .5; cursor: not-allowed; }
  .btn-sm { padding: 5px 11px; font-size: 12px; }

  /* ---------- 文件列表 ---------- */
  .files { margin-top: 14px; }
  .fitem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border);
           border-radius: 6px; margin-bottom: 6px; font-size: 13px; background: var(--surface); }
  .fitem .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fitem .sz { color: var(--muted); font-size: 12px; }

  /* ---------- 状态 ---------- */
  .status { margin-top: 14px; font-size: 13px; display: none; }
  .status.on { display: block; }
  .status.ok { color: var(--ok); }
  .status.err { color: var(--err); }
  .status.info { color: var(--brand); }
  .bar { height: 5px; background: var(--surface-3); border-radius: 3px; overflow: hidden; margin-top: 8px; display: none; }
  .bar.on { display: block; }
  .bar > i { display: block; height: 100%; width: 0; background: var(--amber); transition: width .2s; }

  /* ---------- 结果 ---------- */
  .results { margin-top: 16px; }
  .results table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 12.5px; }
  .results th, .results td { border: 1px solid var(--border); padding: 6px 10px; text-align: right; }
  .results th { background: var(--brand-light); color: var(--brand); }
  .results td:first-child, .results th:first-child { text-align: left; }
  .lsum { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 2px; }
  .lsum > div { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 9px 14px; font-size: 12.5px; color:var(--ink); }
  .lsum b { display: block; font-size: 17px; color: var(--brand); font-variant-numeric: tabular-nums; }
  .ltitle { font-weight: 600; color: var(--brand); margin: 14px 0 2px; }
  .ritem { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--border);
           border-radius: 8px; margin-bottom: 8px; background: var(--surface); flex-wrap: wrap; }
  .ritem .nm { flex: 1; min-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .save { font-size: 12px; color: var(--ok); font-weight: 600; }
  .bigger { font-size: 12px; color: var(--warn); font-weight: 600; }

  /* 固化引流按钮 */
  .fix { background: var(--surface-2); border:1px solid var(--surface-2); color:var(--gold-2); }
  .fix:hover { background: var(--surface-2); }

  /* ---------- 预览 ---------- */
  .preview { border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
             margin-top: 14px; padding: 16px; max-height: 460px; overflow: auto; }
  .preview img { max-width: 100%; height: auto; display: block; margin: 0 auto 10px;
                 box-shadow:0 1px 4px rgba(0,0,0,.12); }
  #qrOut { text-align: center; }
  #qrOut img { max-width: 260px; }

  /* 提示 */
  .note { background: var(--surface); border-left: 3px solid var(--brand-2); padding: 10px 12px;
          font-size: 12px; color:var(--ink); margin-top: 14px; border-radius: 0 6px 6px 0; }
  .note b { color: var(--brand); }

  /* 页脚 */
  footer { background: var(--surface); color:var(--ink-2); font-size: 12px; padding: 18px 0; text-align: center; }
  footer a { color:var(--ink-2); text-decoration: none; }
  footer a:hover { color:var(--ink); text-decoration: underline; }

  /* 页脚工具互链：让 7 个落地页彼此连通，也把首页权重传下去 */
  .tool-links { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center;
                margin-bottom: 12px; font-size: 12.5px; }
  .tool-links .tl-title { color:var(--ink-2); }
  .tool-links a { padding: 2px 8px; border-radius: 5px; background:rgba(255,255,255,.06); }
  .tool-links a:hover { background:rgba(255,255,255,.14); text-decoration: none; }
  .tool-links a.cur { background:rgba(255,255,255,.22); color:var(--ink); font-weight: 600; }
  .ft-note { color:var(--ink-2); }
  @media print {
    body > * { display: none !important; }
    #printArea, #printArea * { display: block !important; visibility: visible !important; }
    #printArea { position: absolute; left: 0; top: 0; width: 100%; background: var(--surface); }
    #printArea .docx { box-shadow: none !important; margin: 0 !important; }
    @page { margin: 14mm; }
  }
  /* ---------- 主站门户条（回到首页 / 存证 / 后台）---------- */
  .portal-bar { background: var(--surface); border-bottom: 1px solid var(--line); font-size: 12.5px; }
  .portal-bar .pb-in { display: flex; align-items: center; gap: 10px; min-height: 38px; flex-wrap: wrap; }
  .portal-bar .pb-brand { display: inline-flex; align-items: center; gap: 7px;
                          color:var(--ink); text-decoration: none; font-weight: 600; }
  .portal-bar .pb-brand:hover { text-decoration: none; }
  .portal-bar .pb-mark { width: 20px; height: 20px; flex: 0 0 20px; }
  .portal-bar .pb-mark svg { display: block; width: 100%; height: 100%; }
  .portal-bar .pb-nm i { color:var(--gold); font-style: normal; }
  .portal-bar .pb-sep { color:var(--line); }
  .portal-bar .pb-cur { color:var(--ink-3); }
  .portal-bar .pb-links { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
  .portal-bar .pb-links a { color:var(--ink-2); text-decoration: none; padding: 4px 10px;
                            border-radius: 6px; transition: .15s; white-space: nowrap; }
  .portal-bar .pb-links a:hover { background:rgba(245,185,66,0.08); color:var(--gold);
                                  text-decoration: none; }
  .portal-bar .pb-links a.pb-cta { background: linear-gradient(135deg,var(--gold),var(--gold-2));
                                   color:var(--ink); font-weight: 700; }
  .portal-bar .pb-links a.pb-cta:hover { filter: brightness(1.08); }
  @media (max-width: 720px) {
    .portal-bar .pb-cur { display: none; }
    .portal-bar .pb-links a { padding: 4px 7px; font-size: 12px; }
    /* 窄屏：门户条允许换行，避免整体宽度被撑破（实测 390px 下会溢出到 425px） */
    .portal-bar .pb-in { height: auto; min-height: 38px; flex-wrap: wrap; padding: 4px 0; }
    .portal-bar .pb-links { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  }
  @media (max-width: 420px) {
    /* 更窄屏幕：品牌只留标记字，链接缩小，避免横向滚动 */
    .portal-bar { font-size:12px; }
    .portal-bar .pb-nm { display: none; }
    .portal-bar .pb-sep { display: none; }
    .portal-bar .pb-links a { padding: 3px 6px; font-size:12px; }
    .ad-slot { padding: 12px 13px; }
  }
  /* ---------- 主站门户条（回到首页 / 存证 / 后台）---------- */
  .portal-bar { background: var(--surface); border-bottom: 1px solid var(--line); font-size: 12.5px; }
  .portal-bar .pb-in { display: flex; align-items: center; gap: 10px; min-height: 38px; flex-wrap: wrap; }
  .portal-bar .pb-brand { display: inline-flex; align-items: center; gap: 7px;
                          color:var(--ink); text-decoration: none; font-weight: 600; }
  .portal-bar .pb-brand:hover { text-decoration: none; }
  .portal-bar .pb-mark { width: 20px; height: 20px; flex: 0 0 20px; }
  .portal-bar .pb-mark svg { display: block; width: 100%; height: 100%; }
  .portal-bar .pb-nm i { color:var(--gold); font-style: normal; }
  .portal-bar .pb-sep { color:var(--line); }
  .portal-bar .pb-cur { color:var(--ink-3); }
  .portal-bar .pb-links { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
  .portal-bar .pb-links a { color:var(--ink-2); text-decoration: none; padding: 4px 10px;
                            border-radius: 6px; transition: .15s; white-space: nowrap; }
  .portal-bar .pb-links a:hover { background:rgba(245,185,66,0.08); color:var(--gold);
                                  text-decoration: none; }
  .portal-bar .pb-links a.pb-cta { background: linear-gradient(135deg,var(--gold),var(--gold-2));
                                   color:var(--ink); font-weight: 700; }
  .portal-bar .pb-links a.pb-cta:hover { filter: brightness(1.08); }
  @media (max-width: 720px) {
    .portal-bar .pb-cur { display: none; }
    .portal-bar .pb-links a { padding: 4px 7px; font-size: 12px; }
    /* 窄屏：门户条允许换行，避免整体宽度被撑破（实测 390px 下会溢出到 425px） */
    .portal-bar .pb-in { height: auto; min-height: 38px; flex-wrap: wrap; padding: 4px 0; }
    .portal-bar .pb-links { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  }
  @media (max-width: 420px) {
    /* 更窄屏幕：品牌只留标记字，链接缩小，避免横向滚动 */
    .portal-bar { font-size:12px; }
    .portal-bar .pb-nm { display: none; }
    .portal-bar .pb-sep { display: none; }
    .portal-bar .pb-links a { padding: 3px 6px; font-size:12px; }
    .ad-slot { padding: 12px 13px; }
  }

  /* ---------- 广告位（承接办公软件商单 / 自营导流） ---------- */
  .ad-slot {
    background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
    padding: 14px 16px; margin: 14px 0; position: relative;
  }
  .ad-slot::before {
    content: '广告'; position: absolute; top: 8px; right: 10px;
    font-size: 10px; color:var(--ink-3); border: 1px solid var(--line-2);
    border-radius: 3px; padding: 0 4px; line-height: 14px;
  }
  .ad-slot .ad-title { font-size: 13px; font-weight: 600; color:var(--ink); margin: 0 0 5px; }
  .ad-slot .ad-desc { font-size: 12px; color:var(--ink-2); line-height: 1.65; margin: 0 0 9px; }
  .ad-slot .ad-cta {
    display: inline-block; background: var(--bg); color:var(--ink); font-size: 12px;
    padding: 6px 14px; border-radius: 4px; text-decoration: none;
  }
  .ad-slot .ad-cta:hover { background:var(--surface-3); }
  .ad-slot.ad-foot { background: var(--surface); }

/* ============================================================
   运行位置徽标 · 本机处理 / 服务器处理
   ------------------------------------------------------------
   为什么要显式标注：
     「文件不上传」这种承诺，用户没法验证。而 Open Doc Tools 的做法是把每个工具
     在哪运行直接标出来，并如实公布整体比例——「悄悄漏掉一部分工具的隐私宣称，
     不是隐私宣称」。我们照这个标准做：标了就必须是准的。
     颜色语义：绿＝本机完成；琥珀＝需要上行；蓝＝主流程本地、可选步骤核验。
   ============================================================ */
.run-badge{
  display:inline-flex;align-items:center;gap:4px;
  vertical-align:middle;margin-left:8px;
  padding:2px 9px 2px 7px;border-radius:11px;
  font-size:12px;font-weight:600;line-height:1.7;
  white-space:nowrap;cursor:help;
  border:1px solid transparent;
  transition:filter .15s ease;
}
.run-badge::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex:none;
}
.run-badge:hover{filter:brightness(.94)}

.rb-local{color:#1B7A43;background:#E7F6EC;border-color:#B4E3C6}
.rb-server{color:#8A5A00;background:#FDF3E0;border-color:#F0D9A8}
.rb-hybrid{color:#1B5E8A;background:#E8F2F9;border-color:#B9D8EC}

/* 无障碍：尊重减少动效偏好 */
@media (prefers-reduced-motion:reduce){
  .run-badge{transition:none}
}

/* 手机端徽标不换行挤掉标题 */
@media (max-width:640px){
  .run-badge{margin-left:0;margin-top:4px;font-size:12px;display:flex;width:fit-content}
}

/* 打印时去掉徽标，避免出现在纸质材料上 */
@media print{
  .run-badge{display:none !important}
}

/* 徽标外层：让「本机处理」和「首次需下载库」能并排且各自独立提示 */
.run-badge-wrap{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;margin-left:8px;flex-wrap:wrap}
.run-badge-wrap .run-badge{margin-left:0}

/* 副标：需要从 CDN 取库文件时出现。
   刻意用中性灰而不是绿色——它不是运行位置，是加载提示。
   混进「本机处理」那枚绿标里会让人觉得也是本地能力的一种。 */
.run-badge-lib{
  display:inline-flex;align-items:center;
  padding:2px 7px;border-radius:11px;
  font-size:12px;font-weight:500;line-height:1.7;
  color:#5A6570;background:#EFF1F4;border:1px solid #DCE0E6;
  white-space:nowrap;cursor:help;
}
@media (max-width:640px){
  .run-badge-wrap{margin-left:0;margin-top:4px;width:100%}
}
@media print{.run-badge-lib{display:none !important}}

/* ============================================================
   PDF 涂黑脱敏页专用样式
   ------------------------------------------------------------
   要点：选中的矩形要明显盖在页面上，且鼠标样式是 crosshair，
   否则用户不知道这里可以拖动框选。
   ============================================================ */
.rd-page{position:relative;display:inline-block;margin:0 14px 18px 0;vertical-align:top}
.rd-pgno{
  font-size:12px;color:var(--muted,#5A6570);
  text-align:center;padding:3px 0 5px;
}
.rd-canvas{
  display:block;max-width:100%;height:auto;
  border:1px solid #D8DCE2;border-radius:3px;
  cursor:crosshair;touch-action:none;      /* 触屏要能拖动而不滚动页面 */
  background:#fff;
}
/* 拖动中的临时框 */
.rd-sel{
  position:absolute;pointer-events:none;
  border:1.5px dashed #C0392B;
  background:rgba(192,57,43,.16);
}
/* 已确认的涂黑块 */
.rd-page .rd-sel.done,
.rd-sel.done{
  background:rgba(0,0,0,.72);
  border:1.5px solid #C0392B;
}
.warn-box{
  background:#FFF8E6;border:1px solid #F0D9A8;border-radius:6px;
  padding:10px 12px;font-size:13px;line-height:1.7;color:#6B4E00;
}
.warn-box b{color:#8A5A00}
@media (max-width:640px){
  .rd-page{margin:0 8px 12px 0}
  .rd-canvas{max-width:100%}
}

/* ============================================================
   同类工具互链块
   ------------------------------------------------------------
   为什么要它：工具页之间原本没有横向链接，只能靠首页与工具箱进入。
   对 SEO 来说这是「孤儿页信号」—— 单页被收录却没有任何站内入链，
   排名会明显低于有内链支撑的页面。这一块就是补这个。
   ============================================================ */
.rel-tools{
  margin:0 0 14px;padding:9px 14px;
  background:#F7F9FB;border:1px solid #E4E9EF;border-radius:8px;
  font-size:13px;line-height:1.7;color:#5A6570;
}
.rel-tools span{margin-right:6px;color:#8A939E}
.rel-tools a{color:var(--brand,#C0392B);text-decoration:none;font-weight:600}
.rel-tools a:hover{text-decoration:underline}
.rel-tools a::before{content:"→ ";opacity:.6}
/* 移动端允许换行，避免一条链接挤爆整行 */
@media (max-width:640px){
  .rel-tools{font-size:12.5px;padding:8px 11px}
}