/* =========================================================
   六哈隐私安全工具箱 · 公共样式 common.css
   所有页面共用的设计变量、布局、组件
   ========================================================= */

/* ---------- 设计变量 ---------- */
:root {
  --bg: #f6f7f9;
  --bg-elev: #ffffff;
  --bg-soft: #f1f3f6;
  --bg-hover: #eceff3;
  --text: #1b1f26;
  --text-soft: #5a6472;
  --text-mute: #8b95a3;
  --border: #e3e7ed;
  --border-strong: #d2d8e0;
  --accent: #2f6df0;
  --accent-soft: #eaf0fe;
  --accent-text: #ffffff;
  --ok: #17936a;
  --warn: #f5a623;   /* 橙黄（警告） */
  --danger: #d64545;
  --error: #e60012;  /* 中国红（错误） */
  --radius-s: 8px;
  --radius: 12px;
  --radius-l: 18px;
  --shadow-s: 0 1px 2px rgba(20, 28, 40, .05);
  --shadow: 0 4px 18px rgba(20, 28, 40, .07);
  --shadow-l: 0 12px 40px rgba(20, 28, 40, .12);
  --maxw: 1320px;
  --header-h: 56px;
  --mono: "SFMono-Regular", Menlo, Consolas, "Cascadia Mono", "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
}

html[data-theme="dark"] {
  --bg: #14171c;
  --bg-elev: #1c2027;
  --bg-soft: #23282f;
  --bg-hover: #2a3038;
  --text: #e7eaef;
  --text-soft: #a7b0bd;
  --text-mute: #7d8794;
  --border: #2c323b;
  --border-strong: #3a414c;
  --accent: #6a9bff;
  --accent-soft: #1e2a44;
  --accent-text: #0d1015;
  --ok: #46c99b;
  --warn: #e5a648;
  --danger: #ef6a6a;
  --shadow-s: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 4px 18px rgba(0, 0, 0, .35);
  --shadow-l: 0 12px 40px rgba(0, 0, 0, .5);
}

/* ---------- 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.35; }
p { margin: 0 0 .6em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

::selection { background: var(--accent); color: #fff; }

/* 滚动条 */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- 布局 ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px;
}

.tool-main { padding: 18px 0 64px; }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flex { display: flex; gap: 10px; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.flex-1 { flex: 1; min-width: 0; }
.spacer { flex: 1; }
.hidden { display: none !important; }

/* ---------- 顶部导航（由 common.js 注入） ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-header .container { display: flex; align-items: center; gap: 12px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 20px;
  color: var(--text);
  letter-spacing: .2px;
  white-space: nowrap;
  min-width: 0;
}
.brand:hover { text-decoration: none; opacity: .82; }
.brand-mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font-size: 20px; line-height: 1;
}
.brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 12px 0 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-soft);
  font-size: 13.5px;
  white-space: nowrap;
  transition: .16s;
}
.back-btn:hover { text-decoration: none; color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.back-btn svg { width: 15px; height: 15px; }

.header-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-divider { color: var(--text-mute); }

.icon-btn {
  position: relative;
  width: 34px; height: 34px;
  display: inline-grid; place-items: center;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-soft);
  cursor: pointer;
  transition: .16s;
  flex: none;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn svg { width: 17px; height: 17px; }
/* 收藏数角标 */
.fav-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 11px; line-height: 16px; text-align: center;
  font-weight: 600;
  display: none;
}
#fav-btn.on svg, #fav-btn.on { color: #f0a020; }
#fav-btn.on svg { fill: #f0a020; }

/* ---------- 工具页头 ---------- */
.tool-hero { margin: 6px 0 16px; }
.tool-hero h1 { font-size: 24px; letter-spacing: -.2px; display: inline-block; vertical-align: middle; }
/* 工具详情页：工具名后的收藏按钮 */
.fav-btn-detail {
  margin-left: 12px;
  vertical-align: middle;
  width: 32px; height: 32px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-mute);
  border-radius: 9px;
  cursor: pointer;
  transition: .16s;
}
.fav-btn-detail:hover { color: var(--accent); border-color: var(--accent); }
.fav-btn-detail svg { width: 17px; height: 17px; }
.fav-btn-detail.on { color: #f0a020; border-color: #f0a020; }
.fav-btn-detail.on svg { fill: #f0a020; }
.tool-hero .tool-desc { color: var(--text-soft); font-size: 14px; margin: 6px 0 0; }
.tool-hero .tool-cat {
  display: block;
  margin-bottom: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
}

/* ---------- 工具页额外区块：使用说明 + SEO 文案 ---------- */
.tool-extra {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tool-guide,
.tool-seo {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-l);
  padding: 18px 20px;
  box-shadow: var(--shadow-s);
}
.tool-guide h2,
.tool-seo h2 {
  font-size: 17px;
  margin: 0 0 10px;
  letter-spacing: -.2px;
}
.tool-guide .guide-lead {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 12px;
}
.tool-guide .guide-steps {
  margin: 0 0 12px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tool-guide .guide-steps li {
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
}
.tool-guide .guide-tip {
  margin: 0;
  padding: 10px 12px;
  background: var(--accent-soft);
  border-radius: 10px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.6;
}
.tool-seo h3 {
  font-size: 15px;
  margin: 16px 0 8px;
}
.tool-seo p {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.75;
  margin: 0 0 10px;
}
.tool-seo .seo-points {
  margin: 0 0 10px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tool-seo .seo-points li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
/* 特性列表行首 emoji 固定宽度槽位，保证后续「：」正文统一对齐（emoji 字形宽度不一问题） */
.tool-seo .seo-points li strong { white-space: nowrap; }
.tool-seo .seo-points li strong .feat-emoji {
  display: inline-block;
  width: 1.4em;
  text-align: center;
  margin-right: .18em;
}
.tool-seo .seo-keywords {
  font-size: 12.5px;
  color: var(--muted, var(--text-soft));
  margin: 4px 0 0;
}

/* ---------- 面板 / 卡片 ---------- */
.panel {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 16px;
  box-shadow: var(--shadow-s);
  margin-bottom: 14px;
}
.panel-title {
  font-size: 14px;
  font-weight: 650;
  color: var(--text-soft);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-title .count { font-weight: 400; color: var(--text-mute); font-size: 12.5px; }

/* ---------- 表单控件 ---------- */
textarea, input[type="text"], input[type="number"], input[type="search"], input[type="password"], select {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
textarea:focus, input:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.7;
}
textarea.mono, input.mono, .mono { font-family: var(--mono); font-size: 14px; }
textarea[readonly], input[readonly] { background: var(--bg-soft); color: var(--text-soft); }
select {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a3' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px;
}
select option { background: var(--bg-elev); color: var(--text); }
label { font-size: 13.5px; color: var(--text-soft); }

.field { margin-bottom: 12px; }
.field > label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--text-soft); }
.field-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.field-hint { font-size: 12.5px; color: var(--text-mute); margin-top: 5px; }

.opt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  margin-bottom: 12px;
}
.opt-row .opt { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-soft); }
.opt-row .opt input { width: auto; }
.opt-row select, .opt-row input[type="text"], .opt-row input[type="number"] { width: auto; min-width: 90px; }

input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex: none;
}
input[type="range"] { width: 100%; accent-color: var(--accent); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  font-size: 14.5px;
  font-family: inherit;
  font-weight: 550;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  cursor: pointer;
  transition: .15s;
  white-space: nowrap;
  user-select: none;
}
.btn:hover { background: var(--bg-hover); border-color: var(--text-mute); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 86%, #000); border-color: transparent; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-soft); }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; }
.btn svg { width: 16px; height: 16px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }

/* 分段控件 */
.segment {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--bg-soft);
  border-radius: 10px;
  border: 1px solid var(--border);
  flex-wrap: wrap;
}
.segment button {
  border: none;
  background: transparent;
  color: var(--text-soft);
  font-family: inherit;
  font-size: 13.5px;
  padding: 6px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: .15s;
  white-space: nowrap;
}
.segment button:hover { color: var(--text); }
.segment button.active { background: var(--bg-elev); color: var(--accent); font-weight: 600; box-shadow: var(--shadow-s); }

/* 标签块 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-soft);
  cursor: pointer;
  transition: .14s;
}
.chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* ---------- 输入输出双栏 ---------- */
.io-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.io-col { display: flex; flex-direction: column; min-width: 0; }
.io-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  min-height: 28px;
}
.io-head .lbl { font-size: 13.5px; font-weight: 650; color: var(--text-soft); }
.io-head .acts { display: flex; gap: 6px; }
.io-grid textarea { min-height: 220px; }

/* ---------- 结果 / 统计 ---------- */
.result-box {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-all;
  min-height: 46px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.stat {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
}
.stat .num { font-size: 22px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat .lbl { font-size: 12.5px; color: var(--text-soft); margin-top: 3px; }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--border); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--bg-elev); }
table.data th, table.data td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.data th { background: var(--bg-soft); font-weight: 650; color: var(--text-soft); font-size: 13px; position: sticky; top: 0; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--bg-soft); }
table.data td.wrap { white-space: normal; }

/* ---------- 提示条 ---------- */
.note {
  display: flex;
  gap: 8px;
  padding: 10px 13px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
  font-size: 13.5px;
  line-height: 1.6;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.note.warn { background: color-mix(in srgb, var(--warn) 12%, transparent); color: color-mix(in srgb, var(--warn) 85%, var(--text)); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.note.err { background: color-mix(in srgb, var(--error) 12%, transparent); color: var(--error); border-color: color-mix(in srgb, var(--error) 30%, transparent); }

/* 错误 / 警告 全局配色：错误=中国红，警告=橙黄 */
.err, .error { color: var(--error); }
.warn { color: var(--warn); }

/* ---------- Toast ---------- */
#toast-layer {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: rgba(24, 28, 35, .93);
  color: #fff;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14px;
  box-shadow: var(--shadow-l);
  animation: toast-in .22s ease both;
  max-width: 82vw;
  text-align: center;
}
.toast.err { background: var(--error); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }

/* ---------- 页脚 ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 24px 0 calc(28px + env(safe-area-inset-bottom));
  color: var(--text-mute);
  font-size: 13px;
  text-align: center;
  background: var(--bg-elev);
}
.site-footer a { color: var(--text-soft); }
.site-footer .sf-beian { margin: 8px 0 4px; display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.site-footer .sf-beian a { color: var(--text-soft); text-decoration: none; }
.site-footer .sf-beian a:hover { text-decoration: underline; }
.site-footer .sf-sep { color: var(--border-strong); }
.site-footer .sf-note { margin: 2px 0 0; font-size: 12px; opacity: .8; }

/* 友情链接 · 方案A：分隔线文字链（极简编辑风；公共样式，统一维护） */
.site-footer .friend-links {
  margin: 10px 0 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  color: var(--text-soft);
}
.site-footer .friend-links .fl-label {
  color: var(--text-mute);
  opacity: .85;
  margin-right: 12px;
}
.site-footer .friend-links a {
  color: var(--text-soft);
  text-decoration: none;
  padding: 0 12px;
  line-height: 1.3;
  border-left: 1px solid var(--border-strong);   /* 细分隔线 */
}
.site-footer .friend-links a:first-of-type { border-left: none; padding-left: 0; }
.site-footer .friend-links a:hover { color: var(--accent); text-decoration: underline; }
.site-footer .coop-link { margin: 0; text-align: center; }
.site-footer .coop-link a {
  color: var(--text-soft);
  text-decoration: none;
  font-size: 13px;
}
.site-footer .coop-link a:hover { color: var(--accent); text-decoration: underline; }

/* 页脚三行布局：①友情链接 ②隐私说明 ③广告合作 | 备案号 */
.site-footer .site-intro {
  margin: 8px 0 4px;
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.6;
}
.site-footer .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 8px 0 2px;
}
.site-footer .footer-bottom .sf-beian { margin: 0; }
.site-footer .footer-bottom .fb-sep { color: var(--border-strong); opacity: .7; }

/* 相关工具（位于 .tool-extra 顶部，flex column 已用 gap 控制间距） */
.related { margin: 0; }
.related h2 { font-size: 15px; color: var(--text-soft); margin-bottom: 10px; }
.related-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* 回到顶部 */
#to-top {
  position: fixed;
  right: 18px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-soft);
  box-shadow: var(--shadow);
  cursor: pointer;
  display: none;
  place-items: center;
  z-index: 50;
}
#to-top.show { display: grid; }
#to-top svg { width: 18px; height: 18px; }

/* 拖放区域 */
.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-l);
  padding: 26px 16px;
  text-align: center;
  color: var(--text-soft);
  background: var(--bg-soft);
  cursor: pointer;
  transition: .16s;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.dropzone strong { color: var(--accent); }

/* 通用文本样式 */
.muted { color: var(--text-mute); }
.small { font-size: 13px; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
kbd {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 5px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  body { font-size: 14.5px; }
  .container { padding: 0 12px; }
  .io-grid { grid-template-columns: 1fr; }
  .io-grid textarea { min-height: 150px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .panel { padding: 13px; border-radius: 14px; }
  .tool-hero h1 { font-size: 20px; }
  .header-title { font-size: 14px; }
  .btn { height: 40px; }          /* 移动端更好点按 */
  .btn-row .btn { flex: 1 1 auto; }
  .stat-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .stat .num { font-size: 19px; }
  #to-top { right: 12px; width: 38px; height: 38px; }
}

@media (max-width: 600px) {
  .brand { font-size: 16px; gap: 7px; }
  .brand-mark { width: 26px; height: 26px; font-size: 17px; }
}

@media (max-width: 420px) {
  /* 详情页工具标题在 .tool-hero h1 已突出展示，移动端隐藏以给站名让位 */
  .header-title { display: none; }
  .segment button { padding: 6px 10px; font-size: 13px; }
}

/* 打印 */
@media print {
  .site-header, .site-footer, .btn-row, #to-top, .related { display: none !important; }
  body { background: #fff; }
}

/* ---------- IO 元信息 ---------- */
.io-meta {
  font-size: 12.5px;
  color: var(--text-mute);
  margin-top: 6px;
  min-height: 18px;
  font-variant-numeric: tabular-nums;
}

/* ---------- 加载态 ---------- */
.tb-loading {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-mute);
  font-size: 14px;
}
.tb-loading::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: tb-spin .7s linear infinite;
}
@keyframes tb-spin { to { transform: rotate(360deg); } }

/* ---------- 工具搜索面板 ---------- */
#tb-palette { position: fixed; inset: 0; z-index: 200; }
.tb-pal-mask {
  position: absolute; inset: 0;
  background: rgba(16, 20, 28, .42);
  backdrop-filter: blur(2px);
  animation: fade-in .15s ease;
}
@keyframes fade-in { from { opacity: 0; } }
.tb-pal-panel {
  position: relative;
  width: min(640px, calc(100vw - 24px));
  margin: 10vh auto 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-l);
  overflow: hidden;
  animation: pal-in .18s ease both;
}
@keyframes pal-in { from { opacity: 0; transform: translateY(-12px) scale(.98); } }
#tb-pal-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 15px 18px;
  font-size: 16px;
  background: transparent;
}
#tb-pal-input:focus { box-shadow: none; border-color: var(--border); }
.tb-pal-list { max-height: min(52vh, 420px); overflow-y: auto; padding: 6px; }
.tb-pal-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--text);
}
.tb-pal-item:hover, .tb-pal-item.on { background: var(--accent-soft); text-decoration: none; }
.tb-pal-item .nm { font-weight: 600; white-space: nowrap; }
.tb-pal-item .ds {
  flex: 1;
  font-size: 12.5px;
  color: var(--text-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-pal-item .ct { font-size: 12px; color: var(--text-mute); white-space: nowrap; }
.tb-pal-empty { padding: 30px; text-align: center; color: var(--text-mute); }
.tb-pal-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  font-size: 12.5px;
  color: var(--text-mute);
}
.tb-pal-foot kbd { margin-right: 3px; }
@media (max-width: 720px) {
  .tb-pal-panel { margin-top: 6vh; }
  .tb-pal-item .ds { display: none; }
  .tb-pal-foot span { display: none; }
}

/* =========================================================
   左侧分类导航（首页 / 工具页 / 文档页 共用，与 index.css 同步）
   ========================================================= */
.home-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.home-content { min-width: 0; }
.home-bar { display: none; }
/* 移动端分类栏右侧快捷外链容器：默认隐藏（PC 不显示），仅在窄屏媒体查询内显示 */
.mobile-quick-links { display: none; }

.side-nav {
  position: sticky;
  top: calc(var(--header-h) + 14px);
  max-height: calc(100vh - var(--header-h) - 28px);
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-s);
  overflow: hidden;
}
.side-nav-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 8px 9px 12px;
  border-bottom: 1px solid var(--border);
}
.side-nav-head .sn-title {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 650;
  color: var(--text-soft);
}
.side-nav-head .sn-act {
  flex: none;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text-mute);
  padding: 3px 7px;
  border-radius: 7px;
  cursor: pointer;
  transition: .14s;
  white-space: nowrap;
}
.side-nav-head .sn-act:hover { color: var(--accent); background: var(--accent-soft); }
.side-nav-head .sn-close { display: none; font-size: 13px; }

.side-nav-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
}

.sn-row { display: flex; align-items: center; gap: 1px; }
.sn-cat {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  transition: .13s;
}
.sn-cat:hover { background: var(--bg-soft); text-decoration: none; }
.sn-cat.active { background: var(--accent-soft); color: var(--accent); }
.sn-cat .sn-icon {
  flex: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--bg-soft);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.sn-cat.active .sn-icon { background: var(--accent); color: #fff; }
.sn-cat .sn-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-cat .sn-num {
  flex: none;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.sn-cat.active .sn-num { color: var(--accent); }

.sn-all { margin-bottom: 4px; }

.sn-fold {
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: none;
  background: transparent;
  color: var(--text-mute);
  border-radius: 6px;
  cursor: pointer;
  transition: .14s;
}
.sn-fold:hover { background: var(--bg-soft); color: var(--accent); }
.sn-fold svg { width: 13px; height: 13px; transition: transform .18s; }
.sn-group.folded .sn-fold svg { transform: rotate(-90deg); }
.sn-group.folded .sn-tools { display: none; }

.sn-tools {
  list-style: none;
  margin: 1px 0 5px;
  padding: 0 0 0 26px;
  border-left: 1px solid var(--border);
  margin-left: 17px;
}
.sn-tools a {
  display: block;
  padding: 3.5px 8px;
  border-radius: 7px;
  color: var(--text-soft);
  font-size: 12.8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sn-tools a:hover { background: var(--bg-soft); color: var(--accent); text-decoration: none; }
.sn-tools a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sn-empty { padding: 20px 10px; text-align: center; color: var(--text-mute); font-size: 12.5px; }

.side-nav-mask { display: none; }

/* 桌面端有常驻侧栏，顶部胶囊导航不再重复展示 */
@media (min-width: 981px) {
  .cat-nav { display: none; }
  .cat-section { scroll-margin-top: calc(var(--header-h) + 16px); }
}

/* 窄屏：侧栏变抽屉 */
@media (max-width: 980px) {
  .home-layout { display: block; }
  .ad-right { display: none; }
  .home-bar { display: flex; align-items: center; gap: 8px; padding: 10px 0 2px; }
  .side-nav-toggle svg { width: 15px; height: 15px; }
  /* 分类目录按钮右侧的快捷外链：靠右对齐、与按钮同水平 */
  .mobile-quick-links {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mobile-quick-links::-webkit-scrollbar { display: none; }
  .mobile-quick-links a {
    font-size: 13px;
    line-height: 1;
    color: var(--text-soft);
    text-decoration: none;
    white-space: nowrap;
    padding: 5px 10px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
  }
  .mobile-quick-links a:hover,
  .mobile-quick-links a:active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
  }
  .side-nav {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: min(286px, 84vw);
    max-height: none;
    z-index: 120;
    border-radius: 0;
    border-width: 0 1px 0 0;
    box-shadow: var(--shadow-l);
    transform: translateX(-102%);
    transition: transform .22s ease;
  }
  .side-nav.open { transform: none; }
  .side-nav-head { padding-top: calc(9px + env(safe-area-inset-top)); }
  .side-nav-head .sn-close { display: inline-block; }
  .side-nav-mask {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(16, 20, 28, .42);
    backdrop-filter: blur(2px);
    animation: fade-in .15s ease;
  }
  .side-nav-mask[hidden] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .side-nav { transition: none; }
}

/* =========================================================
   收藏面板（查看 / 导出 / 导入）
   ========================================================= */
.tb-fav-mask {
  position: fixed; inset: 0;
  background: rgba(16, 20, 28, .42);
  backdrop-filter: blur(2px);
  z-index: 2000;
  animation: fade-in .15s ease;
}
.tb-fav-panel {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  display: flex; flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  z-index: 2001;
  overflow: hidden;
  animation: fade-in .15s ease;
}
.tb-fav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.tb-fav-head h3 { font-size: 16px; margin: 0; }
.tb-fav-count { color: var(--text-mute); font-weight: 500; font-size: 13px; }
.tb-fav-close {
  border: none; background: transparent; cursor: pointer;
  font-size: 16px; color: var(--text-mute);
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; transition: .15s;
}
.tb-fav-close:hover { background: var(--bg-soft); color: var(--text-soft); }
.tb-fav-body { padding: 12px 16px; overflow-y: auto; flex: 1; }
.tb-fav-empty {
  text-align: center; color: var(--text-mute); font-size: 13.5px;
  padding: 36px 12px; line-height: 1.9;
}
.tb-fav-list { display: flex; flex-direction: column; gap: 8px; }
.tb-fav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-soft);
}
.tb-fav-link {
  flex: 1; min-width: 0;
  color: var(--text-soft); text-decoration: none;
  font-size: 14px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-fav-link:hover { color: var(--accent); }
.tb-fav-cat {
  color: var(--text-mute); font-size: 12px;
  flex: none; max-width: 40%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-fav-del {
  border: none; background: transparent; cursor: pointer;
  color: var(--text-mute); font-size: 14px;
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center; transition: .15s; flex: none;
}
.tb-fav-del:hover { background: var(--danger-soft, rgba(229,72,77,.12)); color: var(--danger); }
.tb-fav-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.tb-fav-expire { color: var(--text-mute); font-size: 12px; line-height: 1.5; }
.tb-fav-actions { display: flex; gap: 8px; flex: none; }
.tb-fav-actions .btn { min-width: 64px; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 工具版本切换横幅 + 版本徽标（极速版 / 增强版 共用） */
.tool-switch { margin:12px 0 0; padding:10px 14px; border:1px solid var(--border, rgba(127,127,127,.22)); border-radius:12px; background:var(--bg-soft); font-size:13px; color:var(--text-soft); line-height:1.6; }
.tool-switch a { color:var(--accent); font-weight:600; text-decoration:none; }
.tool-switch a:hover { text-decoration:underline; }
.vp-pro-badge { display:inline-block; font-size:12px; font-weight:700; color:#fff; background:linear-gradient(135deg,#7b2ff7,#2f6df0); padding:2px 9px; border-radius:999px; vertical-align:middle; margin-left:8px; letter-spacing:.5px; }
.vp-badge-lite { background:linear-gradient(135deg,#0fb36b,#2f9be0); }

/* ===== 统一「处理中」状态机（TB.busy） ===== */
.tb-busy {
  position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%);
  z-index: 60; display: inline-flex; align-items: center; gap: 8px; max-width: 90vw;
  padding: 8px 14px; border-radius: 999px; background: #fff; color: #1f2733;
  box-shadow: 0 6px 20px rgba(20, 30, 50, .18); font-size: 13px; line-height: 1.2;
}
.tb-busy[hidden] { display: none; }
.tb-busy .tb-spin {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid rgba(31, 39, 51, .25); border-top-color: #ff8c1a;
  display: inline-block; animation: tb-spin .7s linear infinite;
}
.tb-busy-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-busy.is-err { background: #ffecec; color: #e60012; }
.tb-busy.is-err .tb-spin { border-color: rgba(230, 0, 18, .25); border-top-color: #e60012; }
.tb-busy.is-done { background: #eafaf0; color: #1a9e4b; }
.tb-busy.is-done .tb-spin { border-color: rgba(26, 158, 75, .25); border-top-color: #1a9e4b; }
.tb-busy-bar { display: block; position: relative; width: 90px; height: 4px; border-radius: 999px; background: rgba(31, 39, 51, .12); overflow: hidden; margin-left: 2px; flex: none; }
.tb-busy-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #ff8c1a; transition: width .25s; }

/* ===== 结果区空态引导（TB.bindIO） ===== */
.io-empty {
  margin-top: 6px; padding: 14px; border: 1px dashed #d7dce6; border-radius: 10px;
  color: #8a93a6; font-size: 13px; text-align: center; background: #fafbfd;
}
.io-empty[hidden] { display: none; }

/* ===== 交互控件 z-index 安全层（防吸底条 / 浮层拦截指针事件） ===== */
.t2-tl-track, .vp-tl-track, input[type=range], .vp-tl-handle, .t2-tl-handle { position: relative; z-index: 5; }

/* ===== 窄屏：高密度工具单列堆叠，控件不溢出 ===== */
@media (max-width: 480px) {
  .io-grid { grid-template-columns: 1fr; }
  .io-head .acts { flex-wrap: wrap; }
  .tool-actions, .acts { flex-wrap: wrap; gap: 6px; }
}

/* ===== tb-seo additive (2026-09-09): breadcrumb / faq / related / category-grid ===== */
.tb-crumbs{display:flex;flex-wrap:wrap;gap:.35em;align-items:center;font-size:.82rem;color:#6b7280;margin:0 0 .9rem}
.tb-crumbs a{color:inherit;text-decoration:none}
.tb-crumbs a:hover{text-decoration:underline;color:#2f6df0}
.tb-crumbs .crumb-sep{opacity:.55}
/* .tool-faq 已改为独立 <details> 折叠块，dl 样式废弃，保留占位说明 */
.tool-related ul{list-style:none;padding:0;margin:.4rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.tool-related li{margin:0}
.tool-related a{display:inline-block;padding:.3em .8em;border:1px solid #e5e7eb;border-radius:999px;text-decoration:none;color:inherit;font-size:.9rem}
.tool-related a:hover{border-color:#2f6df0;color:#2f6df0}
.cat-grid{list-style:none;padding:0;margin:1rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.8rem}
.cat-card{display:flex;flex-direction:column;gap:.35rem;padding:.9rem 1rem;border:1px solid #e5e7eb;border-radius:.8rem;text-decoration:none;color:inherit;background:#fff;transition:border-color .15s,box-shadow .15s}
.cat-card:hover{border-color:#2f6df0;box-shadow:0 2px 10px rgba(47,109,240,.10)}
.cat-card .cc-name{font-weight:600}
.cat-card .cc-desc{font-size:.85rem;color:#6b7280;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 分类页（纯静态）专属 */
.cat-page .side-nav-toggle,.cat-page .side-nav-head .sn-act,.cat-page .sn-fold{display:none}
.cat-topbar{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem;border-bottom:1px solid #e5e7eb}
.cat-topbar .cat-brand{font-weight:700;text-decoration:none;color:inherit;font-size:1.02rem}
.cat-topbar .cat-home{font-size:.88rem;text-decoration:none;color:#2f6df0}

/* ===== tb-seo additive-2 (2026-09-09): home cat-nav / app static summary ===== */
.tb-seo-cats{margin:1.2rem 0 0}
.tb-seo-cats h2{font-size:1.02rem;margin:0 0 .5rem}
.tb-seo-cats ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.tb-seo-cats a{display:inline-block;padding:.32em .85em;border:1px solid #e5e7eb;border-radius:999px;text-decoration:none;color:inherit;font-size:.9rem;background:#fff}
.tb-seo-cats a:hover{border-color:#2f6df0;color:#2f6df0}
.tool-app-static{padding:1rem 1.2rem;border:1px dashed #e5e7eb;border-radius:.8rem;background:rgba(47,109,240,.03)}
.tool-app-static h2{margin:.1rem 0 .45rem;font-size:1.05rem}
.tool-app-static p{margin:.3rem 0;color:#6b7280;font-size:.92rem;line-height:1.65}
.tool-app-static ul{margin:.45rem 0;padding-left:1.25rem;color:#6b7280;font-size:.92rem}
.tool-app-static li{margin:.2rem 0}
.tool-app-static .tas-note{font-size:.85rem;color:#9ca3af}
.tool-app-static a{color:#2f6df0;text-decoration:none}
.tool-app-static a:hover{text-decoration:underline}

/* ===== tb-seo additive-3 (2026-09-09): home long-form SEO content ===== */
.home-intro{margin:1.4rem 0 0}
.home-intro h2{font-size:1.12rem;margin:0 0 .5rem}
.home-intro p{margin:.45rem 0;color:#4b5563;line-height:1.85;font-size:.94rem}
.home-intro b{color:#111827}
.intro-points{list-style:none;padding:0;margin:.7rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.55rem}
.intro-points li{padding:.6rem .8rem;border:1px solid #e5e7eb;border-radius:.7rem;background:#fff;font-size:.9rem;color:#4b5563}
.home-hot{margin:1.6rem 0 0}
.home-hot h2{font-size:1.12rem;margin:0 0 .5rem}
.home-hot ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.5rem}
.home-hot li{margin:0;padding:.55rem .8rem;border:1px solid #e5e7eb;border-radius:.7rem;background:#fff}
.home-hot a{display:block;font-weight:600;text-decoration:none;color:inherit}
.home-hot a:hover{color:#2f6df0}
.home-hot span{margin-top:.15rem;font-size:.83rem;color:#6b7280;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-cat-guide{margin:1.8rem 0 0}
.home-cat-guide h2{font-size:1.12rem;margin:0 0 .7rem}
.hcg-item{margin:0 0 .9rem;padding:.85rem 1rem;border:1px solid #e5e7eb;border-radius:.8rem;background:#fff}
.hcg-item h3{margin:0 0 .3rem;font-size:1rem}
.hcg-item h3 a{text-decoration:none;color:inherit}
.hcg-item h3 a:hover{color:#2f6df0}
.hcg-item p{margin:.25rem 0;color:#4b5563;font-size:.9rem;line-height:1.8}
.hcg-item p a{color:#2f6df0;text-decoration:none}
.hcg-item p a:hover{text-decoration:underline}
.hcg-more{margin-top:.35rem !important;font-size:.86rem !important}
.home-faq{margin:1.8rem 0 0}
.home-faq summary{display:flex;align-items:center;gap:.45rem;cursor:pointer;list-style:none}
.home-faq summary::-webkit-details-marker{display:none}
.home-faq summary::before{content:"＋";display:inline-block;color:#9ca3af;font-size:1rem;font-weight:600}
.home-faq details[open] summary::before{content:"－"}
.home-faq h2{display:inline-flex;align-items:center;gap:.45rem;font-size:1.12rem;margin:0;font-weight:600;color:#1f2937}
.home-faq h2::before{content:"";width:.72rem;height:.72rem;border-radius:50%;background:#2f6df0;flex:0 0 auto}
.home-faq summary h3{display:inline-block;font-size:1rem;margin:0;font-weight:600}
.home-faq .td-block{border:1px solid #e5e7eb;border-radius:.9rem;padding:.8rem 1.1rem;margin:.6rem 0;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.04);transition:border-color .15s ease}
.home-faq .td-block:hover{border-color:#d3d9e3}
.home-faq .td-ans{margin:.5rem 0 .2rem;color:#4b5563;line-height:1.85;font-size:.92rem}
.home-faq .td-ans p{margin:.25rem 0}
/* 首页 FAQ 问答：Q/A 圆标 + 平铺排版（与工具页同源） */
.home-faq .faq-list{margin:.4rem 0 0}
.home-faq .faq-list dt{display:flex;align-items:flex-start;gap:.6rem;margin:.95rem 0 .3rem;font-size:.95rem;font-weight:600;color:#1f2937;line-height:1.55}
.home-faq .faq-list dt::before{content:"Q";flex:0 0 1.45rem;height:1.45rem;border-radius:50%;background:#2f6df0;color:#fff;font-size:.74rem;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:.05rem}
.home-faq .faq-list dd{display:flex;align-items:flex-start;gap:.6rem;margin:0 0 1rem;color:#4b5563;font-size:.9rem;line-height:1.8}
.home-faq .faq-list dd::before{content:"A";flex:0 0 1.45rem;height:1.45rem;border-radius:50%;background:#eef1f6;color:#6b7280;font-size:.74rem;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:.1rem}
@media (max-width:480px){
  .home-faq .faq-list dt,.home-faq .faq-list dd{font-size:.88rem;gap:.45rem}
  .home-faq .faq-list dt::before,.home-faq .faq-list dd::before{flex-basis:1.25rem;height:1.25rem;font-size:.7rem}
}

/* ===== tb-seo additive-4 (2026-09-09): tool deep blocks / noscript ===== */
.tool-deep{margin:1.2rem 0 0}
.tool-deep .td-block{border:1px solid #e5e7eb;border-radius:.7rem;padding:.6rem .9rem;margin:.6rem 0;background:#fff}
.tool-deep summary{cursor:pointer;list-style:none}
.tool-deep summary::-webkit-details-marker{display:none}
.tool-deep summary h3{display:inline-block;font-size:1rem;margin:0}
.tool-deep summary::before{content:"＋";display:inline-block;width:1.1em;color:#9ca3af}
.tool-deep details[open] summary::before{content:"－"}
.tool-deep ul{margin:.5rem 0 .2rem;padding-left:1.2rem;color:#4b5563;font-size:.92rem;line-height:1.85}
.tool-deep li{margin:.2rem 0}
.tb-noscript{margin:1rem 0;padding:.75rem 1rem;border:1px dashed #f5a623;border-radius:.7rem;background:rgba(245,166,35,.06);color:#6b7280;font-size:.9rem;line-height:1.75}
.tb-noscript a{color:#2f6df0;text-decoration:none}
.tb-noscript a:hover{text-decoration:underline}

/* ===== tb-seo additive-5 (2026-09-09): FAQ details blocks ===== */
.tool-faq{margin:1.2rem 0 0}
.tool-faq summary{display:flex;align-items:center;gap:.45rem;cursor:pointer;list-style:none}
.tool-faq summary::-webkit-details-marker{display:none}
.tool-faq summary::before{content:"＋";display:inline-block;color:#9ca3af;font-size:1rem;font-weight:600}
.tool-faq details[open] summary::before{content:"－"}
.tool-faq h2{display:inline-flex;align-items:center;gap:.45rem;font-size:1.05rem;margin:0;font-weight:600;color:#1f2937}
.tool-faq h2::before{content:"";width:.72rem;height:.72rem;border-radius:50%;background:#2f6df0;flex:0 0 auto}
.tool-faq summary h3{display:inline-block;font-size:.96rem;margin:0;font-weight:600}
.tool-faq .td-block{border:1px solid #e5e7eb;border-radius:.9rem;padding:.8rem 1.1rem;margin:.6rem 0;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.04);transition:border-color .15s ease}
.tool-faq .td-block:hover{border-color:#d3d9e3}
.tool-faq .td-ans{margin:.5rem 0 .2rem;color:#4b5563;font-size:.92rem;line-height:1.85}
.tool-faq .td-ans p{margin:.2rem 0}
/* FAQ 问答：Q/A 圆标 + 平铺排版（结构不变，仅样式） */
.tool-faq .faq-list{margin:.4rem 0 0}
.tool-faq .faq-list dt{display:flex;align-items:flex-start;gap:.6rem;margin:.95rem 0 .3rem;font-size:.95rem;font-weight:600;color:#1f2937;line-height:1.55}
.tool-faq .faq-list dt::before{content:"Q";flex:0 0 1.45rem;height:1.45rem;border-radius:50%;background:#2f6df0;color:#fff;font-size:.74rem;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:.05rem}
.tool-faq .faq-list dd{display:flex;align-items:flex-start;gap:.6rem;margin:0 0 1rem;color:#4b5563;font-size:.9rem;line-height:1.8}
.tool-faq .faq-list dd::before{content:"A";flex:0 0 1.45rem;height:1.45rem;border-radius:50%;background:#eef1f6;color:#6b7280;font-size:.74rem;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:.1rem}
@media (max-width:480px){
  .tool-faq .faq-list dt,.tool-faq .faq-list dd{font-size:.88rem;gap:.45rem}
  .tool-faq .faq-list dt::before,.tool-faq .faq-list dd::before{flex-basis:1.25rem;height:1.25rem;font-size:.7rem}
}