/* 帮助中心共用样式（/help 与 /help/<工具>）。
   ⚠️ 改了这里要同步改所有 help*.html 里的 ?v= 版本号，否则客户和 Cloudflare 拿到旧文件。 */
:root {
  --brand: #12604f; --brand-deep: #0c473b; --brand-soft: #e9f4f0; --brand-line: #d3e8df;
  --accent: #e05c39; --accent-soft: #fff1eb;
  --ink: #182328; --ink2: #46534f; --muted: #6c777b; --faint: #8b9591;
  --line: #e2e7e5; --canvas: #f4f7f6; --warn: #a16207; --warn-soft: #fefce8;
  --top-h: 108px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--top-h) + 12px); }   /* 锚点留白只设这一处，给 article 再加 scroll-margin 会叠加 */
body { margin: 0; background: var(--canvas); color: var(--ink);
  font: 15px/1.8 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: var(--brand); }

.top { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.top-in { max-width: 1180px; margin: 0 auto; padding: 12px 20px 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.brand { font: 400 20px Georgia, "Songti SC", serif; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand b { color: var(--brand); font-weight: 400; }
.search { flex: 1; min-width: 200px; max-width: 460px; position: relative; }
.search input { width: 100%; border: 1px solid var(--line); border-radius: 22px; padding: 9px 16px; font-size: 14px; outline: none; background: #f8faf9; }
.search input:focus { border-color: var(--brand); background: #fff; }
.top .back { margin-left: auto; font-size: 14px; text-decoration: none; white-space: nowrap; }
/* 工具切换：静态链接写在每个页面里（给爬虫看得见），这里只管样式 */
.prod { max-width: 1180px; margin: 0 auto; padding: 8px 20px 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.prod::-webkit-scrollbar { display: none; }
.prod a { flex: none; padding: 7px 12px 9px; font-size: 14px; color: var(--ink2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.prod a:hover { color: var(--brand); }
.prod a[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); font-weight: 700; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 22px 20px 80px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
nav.toc { position: sticky; top: calc(var(--top-h) + 14px); background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 8px; max-height: calc(100vh - var(--top-h) - 36px); overflow: auto; }
.toc h6 { margin: 12px 10px 4px; font-size: 12px; color: var(--faint); font-weight: 600; letter-spacing: .04em; }
.toc h6:first-child { margin-top: 4px; }
.toc a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--ink2); text-decoration: none; font-size: 14px; line-height: 1.5; }
.toc a:hover { background: #f0f4f2; }
.toc a.on { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.toc .none { padding: 8px 10px; font-size: 13px; color: var(--muted); }
main { min-width: 0; }
article { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px 32px 30px; margin-bottom: 18px; }
article[hidden] { display: none; }
.crumb { font-size: 12.5px; color: var(--faint); }
h1.page { font: 400 30px/1.3 Georgia, "Songti SC", serif; margin: 4px 0 8px; text-wrap: balance; }
article h2 { font: 400 26px/1.3 Georgia, "Songti SC", serif; margin: 4px 0 8px; text-wrap: balance; }
article .lede { color: var(--ink2); margin: 0 0 16px; max-width: 70ch; }
article h3 { font-size: 16px; margin: 22px 0 6px; }
article p, article li { max-width: 72ch; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.meta b { color: var(--ink); font-weight: 600; }

ol.steps { list-style: none; counter-reset: s; margin: 10px 0 6px; padding: 0; display: grid; gap: 4px; }
ol.steps > li { counter-increment: s; position: relative; padding: 10px 0 12px 46px; border-left: 2px solid var(--line); margin-left: 15px; }
ol.steps > li:last-child { border-left-color: transparent; }
ol.steps > li::before { content: counter(s); position: absolute; left: -16px; top: 8px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: #fff; font: 700 14px/30px -apple-system, sans-serif; text-align: center; }
ol.steps h4 { margin: 0 0 2px; font-size: 15.5px; }
ol.steps p { margin: 2px 0; color: var(--ink2); }
.where { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 2px; font-size: 13px; }
.where span { background: #f0f4f2; border: 1px solid #e3e9e6; border-radius: 6px; padding: 0 8px; color: var(--ink); white-space: nowrap; }
.where i { font-style: normal; color: var(--faint); }
.btnlike { display: inline-block; background: var(--brand); color: #fff; border-radius: 6px; padding: 0 8px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.btnlike.ghost { background: #fff; color: var(--brand); border: 1px solid var(--brand-line); }
.tag { display: inline-block; border-radius: 5px; padding: 0 7px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: #f0f4f2; color: var(--ink); border: 1px solid #e3e9e6; }
.tag.bad { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.tag.mid { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.tag.ok { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.tag.gray { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
kbd { font: 12.5px ui-monospace, Menlo, monospace; background: #f6f8f7; border: 1px solid #dfe5e3; border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; }
code { font: 13px ui-monospace, Menlo, monospace; background: #f6f8f7; border-radius: 4px; padding: 0 5px; }

.note { border-radius: 10px; padding: 11px 15px; margin: 14px 0; font-size: 14px; max-width: 76ch; }
.note b:first-child { display: block; margin-bottom: 2px; }
.note.tip { background: var(--brand-soft); border: 1px solid var(--brand-line); color: #1f4f43; }
.note.warn { background: var(--warn-soft); border: 1px solid #f3e3a6; color: #6b4a06; }
.note.stop { background: var(--accent-soft); border: 1px solid #f6d3c6; color: #7a2e17; }
table.kv { border-collapse: collapse; width: 100%; font-size: 14px; margin: 10px 0; }
.tbl { overflow-x: auto; }
table.kv th, table.kv td { text-align: left; border-bottom: 1px solid #eef2f1; padding: 7px 10px; vertical-align: top; }
table.kv th { font-size: 12.5px; color: var(--muted); font-weight: 600; background: #fafbfb; white-space: nowrap; }
.faq details { border-bottom: 1px solid #eef2f1; padding: 10px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: 6px 0 2px; color: var(--ink2); }
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 14px; border-top: 1px solid #eef2f1; font-size: 14px; }
.pager a { text-decoration: none; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 14px 0 4px; }
.cards a { display: block; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; text-decoration: none; color: var(--ink); background: #fff; }
.cards a:hover { border-color: var(--brand); }
.cards a b { display: block; color: var(--brand); }
.cards a span { font-size: 13px; color: var(--muted); }

/* 总入口 /help */
.hub { max-width: 1180px; margin: 0 auto; padding: 34px 20px 80px; }
.hub .lede { color: var(--ink2); max-width: 64ch; margin: 0 0 22px; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.hub-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px 16px; }
.hub-card h2 { font: 400 22px/1.3 Georgia, "Songti SC", serif; margin: 0 0 4px; }
.hub-card h2 a { color: var(--ink); text-decoration: none; }
.hub-card h2 a:hover { color: var(--brand); }
.hub-card p { margin: 0 0 10px; color: var(--ink2); font-size: 14px; }
.hub-card ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid #eef2f1; }
.hub-card li { border-bottom: 1px solid #f1f4f3; }
.hub-card li:last-child { border-bottom: 0; }
.hub-card li a { display: block; padding: 7px 0; font-size: 14px; text-decoration: none; }
.hub-card .who { font-size: 12.5px; color: var(--faint); margin: 0 0 8px; }
.foot { max-width: 1180px; margin: 0 auto; padding: 0 20px 40px; font-size: 13px; color: var(--muted); }
.foot a { color: var(--muted); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 860px) {
  :root { --top-h: 146px; }   /* 窄屏顶栏折成两行，锚点跳转和目录跟随都按它算 */
  .wrap { grid-template-columns: 1fr; }
  nav.toc { position: static; max-height: none; }
  article { padding: 20px 18px 24px; }
  .top .back { margin-left: 0; }
}