/* ============================================
   在线小工具 — 样式表
   风格：Swiss / 灰白底 / 低饱和 / 排版优先
   ============================================ */

:root {
  /* 中性灰阶 —— 整套底色都在这几条里 */
  --ink:        #17181a;   /* 正文黑，不是纯黑 */
  --ink-soft:   #55575c;   /* 次级文字 */
  --ink-faint:  #9a9da3;   /* 注释、meta */
  --line:       #e8e9eb;   /* 分隔线 */
  --line-soft:  #f0f1f3;
  --paper:      #ffffff;   /* 卡片底 */
  --canvas:     #fafafa;   /* 页面底 */

  /* 唯一强调色：低饱和的靛青，只在需要时出现 */
  --accent:      #3f5f8f;
  --accent-soft: #eef1f6;

  --radius: 8px;
  --measure: 68ch;         /* 正文行宽上限 */
}

* { margin:0; padding:0; box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }

body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
              "Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--canvas);
  color:var(--ink);
  font-size:16px;
  line-height:1.78;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap { max-width:920px; margin:0 auto; padding:0 24px; }

::selection { background:var(--accent-soft); }

/* ---------- 顶栏：安静，只做导航 ---------- */
header.site-header {
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:26px 0;
}
header.site-header .wrap {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
header.site-header h1 {
  font-size:1.06rem; font-weight:650; letter-spacing:-0.01em;
  line-height:1.3;
}
header.site-header h1 a { color:var(--ink); text-decoration:none; }
header.site-header h1 .sub {
  display:block; font-size:.8rem; font-weight:400;
  color:var(--ink-faint); letter-spacing:0.02em; margin-top:3px;
}
nav.site-nav { display:flex; gap:26px; }
nav.site-nav a {
  color:var(--ink-soft); text-decoration:none;
  font-size:.9rem; letter-spacing:0.01em;
  transition:color .15s ease;
}
nav.site-nav a:hover { color:var(--ink); }

main { padding:56px 0 72px; }

/* ---------- 页面头：一句话说清这是干嘛的 ---------- */
.page-intro { margin-bottom:52px; }
.page-intro h2 {
  font-size:2.05rem; font-weight:660; line-height:1.25;
  letter-spacing:-0.022em; margin-bottom:14px;
}
.page-intro p {
  color:var(--ink-soft); font-size:1.04rem;
  max-width:56ch; line-height:1.7;
}

/* 分区标题 —— 细线条 + 小字，不用粗边条 */
h2.section-title {
  font-size:.82rem; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-faint);
  padding-bottom:12px; margin-bottom:26px;
  border-bottom:1px solid var(--line);
}

/* ---------- 卡片：靠间距和边框区分，不靠颜色 ---------- */
.cards {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
  gap:1px;                     /* 细线网格 —— 卡片紧贴，用线分开 */
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:56px;
}
.card {
  background:var(--paper);
  padding:26px 24px 22px;
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  transition:background .18s ease;
  position:relative;
}
.card:hover { background:#fcfcfd; }
.card h3 {
  font-size:1.02rem; font-weight:620; letter-spacing:-0.008em;
  margin-bottom:9px; color:var(--ink);
  display:flex; align-items:center; gap:9px;
}
.card h3::before {            /* 几何标记，替代彩色图标 */
  content:""; width:7px; height:7px; flex:0 0 7px;
  border:1.5px solid var(--accent); border-radius:2px;
  transform:rotate(45deg); margin-top:1px;
  transition:background .18s ease;
}
.card:hover h3::before { background:var(--accent); }
.card p { font-size:.9rem; color:var(--ink-soft); flex:1; line-height:1.68; }
.card .go {                  /* 卡片角落的箭头，hover 时滑动 */
  position:absolute; top:26px; right:22px;
  color:var(--ink-faint); font-size:.95rem;
  opacity:0; transform:translateX(-4px);
  transition:opacity .2s ease, transform .2s ease, color .2s ease;
}
.card:hover .go { opacity:1; transform:translateX(0); color:var(--accent); }

.tag {
  display:inline-block; font-size:.72rem; letter-spacing:0.04em;
  color:var(--ink-faint); border:1px solid var(--line);
  padding:1px 9px; border-radius:3px;
  margin-top:14px; align-self:flex-start;
}

/* ---------- 文章 / 工具页 ---------- */
article.tool-article, article.page-content {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:44px 46px 50px;
}
article.tool-article h1, article.page-content h1 {
  font-size:1.85rem; font-weight:660; letter-spacing:-0.02em;
  line-height:1.3; margin-bottom:10px;
}
article.tool-article .meta, article.page-content .updated {
  color:var(--ink-faint); font-size:.85rem; letter-spacing:0.01em;
  margin-bottom:34px; padding-bottom:22px; border-bottom:1px solid var(--line);
}
article.tool-article h2, article.page-content h2 {
  font-size:1.16rem; font-weight:640; letter-spacing:-0.01em;
  margin:38px 0 14px;
}
article.tool-article h3, article.page-content h3 {
  font-size:1rem; font-weight:620; margin:26px 0 10px; color:var(--ink);
}
article.tool-article p, article.page-content p {
  margin-bottom:17px; color:#2a2c30; max-width:var(--measure);
}
article.tool-article ul, article.tool-article ol,
article.page-content ul, article.page-content ol {
  margin:0 0 18px 22px; color:#2a2c30; max-width:var(--measure);
}
article.tool-article li, article.page-content li { margin-bottom:7px; }
article.tool-article code, article.page-content code {
  background:#f4f4f6; border:1px solid var(--line-soft);
  padding:1px 6px; border-radius:4px;
  font-size:.88em; font-family:ui-monospace,"SF Mono",Consolas,Monaco,monospace;
}
article.tool-article blockquote, article.page-content blockquote {
  border-left:2px solid var(--line);
  padding:4px 0 4px 20px; margin:22px 0;
  color:var(--ink-soft); font-style:normal;
}
article.tool-article a, article.page-content a {
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid rgba(63,95,143,.3);
  transition:border-color .15s ease;
}
article.tool-article a:hover, article.page-content a:hover {
  border-bottom-color:var(--accent);
}

article.page-content table {
  width:100%; border-collapse:collapse; margin:20px 0; font-size:.92rem;
}
article.page-content th, article.page-content td {
  border:1px solid var(--line); padding:11px 14px; text-align:left;
}
article.page-content th {
  background:#fafafa; font-weight:600; font-size:.85rem;
  letter-spacing:0.03em; color:var(--ink-soft);
}

.breadcrumb {
  font-size:.84rem; color:var(--ink-faint); margin-bottom:22px;
  letter-spacing:0.01em;
}
.breadcrumb a { color:var(--ink-faint); text-decoration:none; }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb span { margin:0 7px; opacity:.5; }

/* ---------- 相关链接 ---------- */
.related {
  margin-top:46px; padding-top:28px; border-top:1px solid var(--line);
}
.related h3 {
  font-size:.78rem; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px;
}
.related ul { list-style:none; margin:0; }
.related li {
  margin-bottom:2px; border-bottom:1px solid var(--line-soft);
}
.related li:last-child { border-bottom:none; }
.related a {
  color:var(--ink-soft); text-decoration:none; font-size:.94rem;
  display:block; padding:9px 0;
  transition:color .15s ease, padding-left .15s ease;
}
.related a:hover { color:var(--accent); padding-left:5px; }

/* ---------- 页脚 ---------- */
footer.site-footer {
  padding:38px 0 44px; color:var(--ink-faint);
  font-size:.84rem; border-top:1px solid var(--line);
  letter-spacing:0.01em;
}
footer.site-footer .wrap {
  display:flex; justify-content:space-between;
  gap:20px; flex-wrap:wrap; align-items:baseline;
}
footer.site-footer a { color:var(--ink-soft); text-decoration:none; }
footer.site-footer a:hover { color:var(--accent); }
footer.site-footer .footer-links { display:flex; gap:20px; }

/* ---------- 响应式 ---------- */
@media (max-width:640px) {
  .wrap { padding:0 18px; }
  main { padding:40px 0 56px; }
  .page-intro h2 { font-size:1.6rem; }
  header.site-header .wrap { flex-direction:column; gap:14px; }
  nav.site-nav { gap:20px; }
  .cards { grid-template-columns:1fr; }
  article.tool-article, article.page-content { padding:26px 20px 34px; }
  article.tool-article h1, article.page-content h1 { font-size:1.45rem; }
  footer.site-footer .wrap { flex-direction:column; gap:12px; }
}