/* fx-polish — tools.faxianai.com 版式统一层
   目标：①页头与搜索卡片同宽同边 ②整站内容轨道更宽、左右边界完全对齐
   ③页头在任何语言下都不折行错乱 ④卡片/间距/焦点态统一
   只做布局与观感，不改任何图片资源。 */

/* ---------- 1. 统一内容轨道 ---------- */
:root {
  --fx-rail: 1340px;                    /* 内容最大宽度，比原来的 1200 更舒展 */
  --fx-gut: clamp(18px, 3.2vw, 40px);   /* 左右留白 */
}

.wrap {
  max-width: var(--fx-rail) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--fx-gut) !important;
  padding-right: var(--fx-gut) !important;
}

/* 这三块是 .wrap 的兄弟节点，自带 36px 外边距，导致比正文宽一圈。
   改成与 .wrap 的内容区同宽同起止，页头/搜索框/下方内容三者左右边界对齐。
   只覆盖左右外边距，保留它们各自的上下边距（搜索卡片靠负上边距压在首屏上）。 */
.refresh-search-shell,
.v3-tool-finder,
.v3-trust-strip {
  box-sizing: border-box !important;
  width: calc(min(100%, var(--fx-rail)) - 2 * var(--fx-gut)) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- 2. 页头：任何语言都不折行 ---------- */
header.site .nav {
  gap: clamp(6px, .9vw, 16px);
  min-width: 0;
  flex-wrap: nowrap;
}

/* 中文「基础工具」被拆成「基础工/具」两行就是缺这一条 */
header.site .nav a.navlink {
  white-space: nowrap;
}

header.site .fx-brand {
  flex: 0 0 auto;
  min-width: 0;
}

header.site .fx-brand .fx-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(24vw, 230px);
}

/* 由 fx-polish.js 实测宽度后逐级收窄，俄语/越南语这类长词也放得下 */
header.site.fx-tight .nav { gap: 8px; }
header.site.fx-tight .nav a.navlink { font-size: .88rem; padding: 8px 9px; }
header.site.fx-tight .fx-brand .fx-name { display: none; }
header.site.fx-tight2 .nav { gap: 6px; }
header.site.fx-tight2 .nav a.navlink { font-size: .82rem; padding: 7px 7px; }
header.site.fx-tight2 .langsw { max-width: 108px; }
/* 实在放不下才收掉导航（站内 640px 以下本来也是这个行为） */
header.site.fx-tighter .nav a.navlink { display: none; }

/* ---------- 3. 卡片与网格 ---------- */
main .grid { gap: 18px; }

main .tool-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

main .tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(15, 15, 15, .09);
}

[data-theme="dark"] main .tool-card:hover {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}

/* ---------- 4. 锚点与可访问性 ---------- */
main section[id],
main div[id] {
  scroll-margin-top: 92px;   /* 顶栏是 sticky，锚点跳转不要被盖住 */
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent, #5b5bd6);
  outline-offset: 2px;
}

/* 宽表格/代码块自己滚，页面不横向溢出 */
main table,
main pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* ---------- 5. 栏目标题与计数 ---------- */
main .sec-head h2 .cnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  margin-left: 10px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(128, 128, 128, .13);
  color: var(--muted, #787774);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

main .sec-sub {
  margin: 8px 0 20px;
  color: var(--muted, #787774);
  font-size: 14.5px;
  line-height: 1.65;
}

/* ---------- 6. 数据条 ---------- */
main .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  margin: 10px 0 30px;
  padding: 6px 0;
}

main .stats .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 16px;
  border-left: 1px solid rgba(128, 128, 128, .22);   /* 深浅主题都能看 */
  text-align: center;
}

main .stats .stat:first-child { border-left: 0; }

main .stats .stat .n {
  font-size: clamp(21px, 1.9vw, 27px);
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.1;
}

main .stats .stat .l {
  font-size: 12.5px;
  color: var(--muted, #787774);
}

@media (max-width: 560px) {
  main .stats .stat:nth-child(odd) { border-left: 0; }
}

/* ---------- 7. 页脚：长词语言不再把整页撑出横向滚动 ---------- */
/* grid 子项默认 min-width:auto，德语/俄语的长工具名会把 1fr 轨道顶宽，
   整页出现横向滚动条（本来就有的老问题）。 */
footer.site .foot > * { min-width: 0; }

footer.site .foot .col a,
footer.site .foot .col h4 { overflow-wrap: anywhere; }

@media (max-width: 1080px) {
  footer.site .foot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  footer.site .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 8. 工具内页 / 教程内页：并到首页那条轨道 ---------- */

/* 工具内页：分镜块自带左右 40px 外边距，比同页其它块窄一圈 */
body.refresh-tool main.wrap > .refresh-tool-storyboard {
  width: auto;          /* 站内写死了 width:1180px */
  margin-left: 0;
  margin-right: 0;
}

/* 教程内页：外壳原本卡在 1120，比首页窄 140；放开后卡片、相关阅读一起变宽 */
body.refresh-article .article-main { max-width: none; }
body.refresh-article .article-main > h1 { max-width: 1100px; }

/* 正文列：用户要求文案跟着页面铺满整行，不再单独限宽 */
body.refresh-article .article-body,
body.refresh-tool main.wrap > .content { max-width: none !important; }

/* 工具页正文里每段还各自卡着 780px，是"莫名其妙换行"的真正来源 */
body.refresh-tool .content > p,
body.refresh-tool .content p,
body.refresh-tool .content li,
body.refresh-tool .tool-head p.sub { max-width: none !important; }

/* 正文里的图 / 表 / 代码不受正文列限制，铺到整条轨道 */
body.refresh-article .article-body > figure,
body.refresh-article .article-body > table,
body.refresh-article .article-body > pre {
  width: 100%;
  max-width: none;
}

/* ---------- 9. 配图：轨道变宽后不跟着放大 ---------- */
/* 站内配图母版都是 1200px 宽，超过就是拉伸放大，糊且不精致 */
main img { max-width: min(100%, 1200px); }

/* 教程头图：1260 宽会把首屏整个占满，收到 1100 居中 */
body.refresh-article .refresh-article-hero {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 正文插图：正文列 1060 时插图也 1060，读着像被图压着；收到 860 居中 */
/* 站内这条是 margin:42px -70px（故意往外顶），要压住得带 !important */
body.refresh-article .refresh-inline-figure {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 工具页头图同理，别顶满 */
body.refresh-tool .refresh-tool-cover img { max-width: 100%; }

/* ---------- 10. 工具内页：页面拉宽后的排版收紧 ---------- */

/* 「使用方法」：原来是竖排三行、每行只占半屏，很松。改成横向步骤卡，
   序号徽标挪进卡片内。RTL 语言徽标靠右。 */
body.refresh-tool .content .steps {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 18px 0 6px;
  padding-left: 0;   /* .content ol 的 22px 缩进会把整排卡片往右推 */
  padding-right: 0;
}

body.refresh-tool .content .steps li {
  margin: 0;
  padding: 18px 20px 18px 68px;
  border: 1.5px solid var(--border-soft, #e9e9e7);
  border-radius: 14px;
  background: var(--card, #fff);
  line-height: 1.6;
  font-size: .94rem;
}

body.refresh-tool .content .steps li::before {
  left: 18px;
  top: 16px;
}

body.refresh-tool .content .steps li b {
  margin-bottom: 4px;
  font-size: 1rem;
}

[dir="rtl"] body.refresh-tool .content .steps li { padding: 18px 68px 18px 20px; }
[dir="rtl"] body.refresh-tool .content .steps li::before { left: auto; right: 18px; }

/* 栏目间距：页面变宽后每屏能装更多，标题上方留白略收 */
body.refresh-tool .content h2 { margin-top: 40px; }
body.refresh-tool .content .tool-deep h2 { margin-top: 1.6em; }

/* 用例卡：宽轨道下走 4 列，卡片高度一致 */
body.refresh-tool .content .usecases {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
  align-items: stretch;
}

/* 优势卡：4 张正好一行 */
body.refresh-tool .content .feat {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
@media (min-width: 1100px) {
  /* 4 张优势卡在 1260 宽会被 auto-fit 切成 5 轨、空一格，钉死 4 列 */
  body.refresh-tool .content .feat { grid-template-columns: repeat(4, 1fr); }
}

/* 常见问题：宽屏下两列并排，各自展开互不影响 */
@media (min-width: 1100px) {
  body.refresh-tool .content .faq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    align-items: start;
  }
  body.refresh-tool .content .faq details { margin-bottom: 12px; }
}

/* 对比表：不再溢出滚动条，整宽铺开 */
body.refresh-tool .content .tool-deep table { display: table; }