/* ============================================================
   工具岛 风格 6 · 暖橙磨砂 —— 全站主题覆盖
   设计语言：iOS 质感（毛玻璃 / 极光 / squircle 图标 / 发丝线 /
   磨砂控件 / 大字重标题）+ 暖砂底色。
   各站保留自己的品牌色（--brand* 不覆盖）：
   demo 橙 · 鹿PDF 绿 · 工具岛图片 蓝 · 工具岛视频 紫 · 工具岛 靛
   ============================================================ */

/* ---------- Token 层（暖砂质感） ---------- */
:root {
  --bg: #FBF8F5 !important;
  --surface: #fff !important;
  --text: #2B1B0C !important;
  --text-muted: #8A6B52 !important;
  --border: rgba(120, 84, 50, .13) !important;
  --border-strong: rgba(120, 84, 50, .22) !important;
  --radius: 18px !important;
  --radius-sm: 12px !important;
  --shadow-sm: 0 1px 3px rgba(160, 90, 40, .05) !important;
  --shadow: 0 4px 18px rgba(160, 90, 40, .07) !important;
  --shadow-lg: 0 14px 40px rgba(160, 90, 40, .12) !important;
  /* calc（工具岛）变量映射 */
  --ink: #2B1B0C !important;
  --ink-soft: #5C4632 !important;
  --muted: #8A6B52 !important;
  --line: rgba(120, 84, 50, .13) !important;
  --line-strong: rgba(120, 84, 50, .22) !important;
  --card: #fff !important;
  --bg-grad-1: #F7EFE7 !important;
  --shadow-md: 0 4px 18px rgba(160, 90, 40, .07) !important;
}

body {
  background: var(--bg) !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .002em;
}

/* ---------- 极光背景（暖色光晕） ---------- */
.bg-decor, .bg-symbols {
  background:
    radial-gradient(720px 380px at 20% -12%, rgba(255, 166, 102, .30), transparent 62%),
    radial-gradient(640px 360px at 82% -8%, rgba(255, 120, 150, .18), transparent 60%),
    radial-gradient(560px 320px at 50% 12%, rgba(255, 206, 128, .22), transparent 65%) !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* ---------- 毛玻璃顶栏 ---------- */
.site-header {
  background: rgba(255, 252, 249, .72) !important;
  backdrop-filter: blur(28px) saturate(185%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(185%) !important;
  border-bottom: .5px solid var(--border) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
}
.site-header .mark, .logo-mark {
  border-radius: 11px !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .16) !important;
}
.site-header .logo { letter-spacing: -.012em; }

/* ---------- Hero：大标题 + 磨砂搜索 ---------- */
.hero h1, .hero-v2 h1, .home-brand-name, .tool-page h1 {
  font-weight: 800 !important;
  letter-spacing: -.024em !important;
  line-height: 1.14 !important;
}
.accent { letter-spacing: -.02em; }
.search-box, .home-search .search-box {
  background: rgba(120, 84, 50, .09) !important;
  border: none !important;
  border-radius: 13px !important;
  box-shadow: none !important;
}
.search-box input {
  background: transparent !important;
  border: none !important;
}
.search-box button, .search-btn {
  background: linear-gradient(135deg, #FF8A55, #E2542A) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 3px 12px rgba(226, 84, 42, .28) !important;
}

/* ---------- 磨砂胶囊 chips ---------- */
.hot-chip, .cat-chip, .tool-tab, .quicktags span {
  background: rgba(255, 255, 255, .72) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: .5px solid var(--border) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(160, 90, 40, .05) !important;
}

/* ---------- 工具卡：squircle 图标 + 柔和悬浮 ---------- */
.tool-card {
  background: var(--surface) !important;
  border: .5px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 3px rgba(160, 90, 40, .05), 0 10px 28px rgba(160, 90, 40, .06) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.tool-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 2px 6px rgba(160, 90, 40, .07), 0 18px 40px rgba(160, 90, 40, .13) !important;
}
.tool-card .icon, .icon {
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .14) !important;
}
.tool-card h3, .head-text { letter-spacing: -.012em; }
.cat-tag {
  border: none !important;
  border-radius: 8px !important;
}
.desc { line-height: 1.72; }

/* ---------- 区块标题 / 更多链接 ---------- */
.section-title, .cat-section-head h2, .section-head h2 {
  letter-spacing: -.022em !important;
  font-weight: 800 !important;
}
.cat-more, .section-head a {
  font-weight: 600;
}

/* ---------- 步骤 / 特性卡 ---------- */
.flow-step, .feature, .howto-step {
  background: var(--surface) !important;
  border: .5px solid var(--border) !important;
  border-radius: var(--radius) !important;
}
.flow-num, .howto-step .num {
  border-radius: 10px !important;
  font-weight: 700 !important;
}
.band-tint { background: #F7EFE7 !important; }
.band-surface {
  background: var(--surface) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 1px 3px rgba(160, 90, 40, .05), 0 10px 28px rgba(160, 90, 40, .05) !important;
}

/* ---------- 表单控件（calc / 工具页） ---------- */
.field input, .input-wrap input, .tool-ui input[type="text"],
.tool-ui input[type="number"], .tool-ui textarea, .tool-ui select {
  background: rgba(120, 84, 50, .07) !important;
  border: .5px solid var(--border) !important;
  border-radius: 11px !important;
}
.field input:focus, .input-wrap input:focus, .tool-ui input:focus, .tool-ui textarea:focus {
  outline: 2px solid rgba(226, 84, 42, .35) !important;
  outline-offset: 0 !important;
}
.tool-ui button, .mini-btn {
  border-radius: 11px !important;
  font-weight: 600 !important;
}

/* ---------- 正文 / FAQ ---------- */
.prose { line-height: 1.85; }
.faq-item, .guide-card {
  background: var(--surface) !important;
  border: .5px solid var(--border) !important;
  border-radius: var(--radius) !important;
}

/* ---------- 页脚：毛玻璃 ---------- */
footer, .site-footer {
  background: rgba(255, 252, 249, .68) !important;
  backdrop-filter: blur(26px) saturate(185%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(185%) !important;
  border-top: .5px solid var(--border) !important;
}
.footer-sister-link {
  border-radius: var(--radius) !important;
}

/* ---------- 字体润色 ---------- */
h1, h2, h3 { letter-spacing: -.018em; }
a { transition: opacity .15s ease; }

/* ============================================================
   可读性增强样式（配合 readability.js）
   ============================================================ */
/* 长段折叠：首句速览 + 渐隐遮罩 */
.rd-folded { position: relative; }
.rd-folded:not(.rd-open) .rd-rest {
  opacity: .55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rd-head { font-weight: 600; color: var(--text); }
.rd-more {
  background: rgba(226, 84, 42, .1) !important;
  color: #D95B2C !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 3px 12px !important;
  font-size: 12px !important;
  cursor: pointer;
  margin-left: 6px;
  vertical-align: middle;
}
.rd-more:hover { background: rgba(226, 84, 42, .18) !important; }

/* 要点列表（①②③/分号段落 → 图形化清单） */
.rd-bullets { margin: 14px 0; }
.rd-bullets ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rd-bullets li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface);
  border: .5px solid var(--border);
  border-radius: 12px;
  padding: 11px 15px;
  line-height: 1.75;
  font-size: 14.5px;
}
.rd-bi {
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: linear-gradient(135deg, #FF8A55, #E2542A);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
}

/* 步骤流程图示 */
.rd-steps { list-style: none; padding-left: 6px; }
li.rd-step { position: relative; padding-left: 40px !important; margin-bottom: 18px !important; }
li.rd-step::before {
  content: counter(step, decimal);
  counter-increment: step;
  position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8A55, #E2542A);
  color: #fff; font-size: 13px; font-weight: 700;
}
li.rd-step::after {
  content: "";
  position: absolute; left: 12.5px; top: 30px; bottom: -16px;
  width: 1.5px;
  background: linear-gradient(rgba(226, 84, 42, .35), rgba(226, 84, 42, .08));
}
li.rd-step:last-child::after { display: none; }
.rd-steps { counter-reset: step; }

/* 数字/单位高亮 */
.rd-num {
  color: #D95B2C;
  font-weight: 700;
  background: rgba(226, 84, 42, .08);
  border-radius: 5px;
  padding: 1px 5px;
}

/* ---------- 速览流程条（步骤一句话标签 + 箭头） ---------- */
.rd-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 18px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(255, 138, 85, .10), rgba(226, 84, 42, .05));
  border: .5px solid rgba(226, 84, 42, .18);
  border-radius: 14px;
}
.rd-fchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: .5px solid rgba(226, 84, 42, .22);
  border-radius: 999px;
  padding: 5px 13px 5px 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.rd-fchip b {
  flex: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8A55, #E2542A);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.rd-fchip i { font-style: normal; }
.rd-farrow {
  width: 16px; height: 2px;
  position: relative;
  background: rgba(226, 84, 42, .38);
  border-radius: 2px;
  flex: none;
}
.rd-farrow::after {
  content: "";
  position: absolute;
  right: -1px; top: -3px;
  border: 4px solid transparent;
  border-left-color: rgba(226, 84, 42, .55);
  border-right: 0;
}

/* ---------- FAQ 问答卡（💡 一句话回答 + 折叠详解） ---------- */
dl.faq > div.rd-faq {
  background: var(--surface);
  border: .5px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 12px;
}
dl.faq > div.rd-faq { display: block; }
.rd-faq-q {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 10px !important;
}
.rd-faq-q::before {
  content: "Q";
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-right: 8px;
  border-radius: 7px;
  background: linear-gradient(135deg, #FF8A55, #E2542A);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  vertical-align: -4px;
}
.rd-faq-a { margin-left: 0 !important; line-height: 1.85; }
.rd-faq-key {
  display: block;
  background: rgba(255, 138, 85, .10);
  border-left: 3px solid #E2542A;
  border-radius: 0 10px 10px 0;
  padding: 9px 13px;
  margin: 2px 0 10px;
}
.rd-faq-key em {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #D95B2C;
  margin-bottom: 3px;
}
.rd-faq-key strong { font-size: 14.5px; color: var(--text); font-weight: 600; line-height: 1.8; }
.rd-faq:not(.rd-open) .rd-faq-rest {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: .62;
  vertical-align: top;
}

/* ---------- 相关工具长描述 → 2 行截断 ---------- */
p.desc.rd-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 工具分组标题（sort-tools.js）---------- */
.tool-grid > .tool-group-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 2px;
  padding-top: 8px;
}
.tool-grid > .tool-group-title:first-child { margin-top: 2px; }
.gt-dot {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, #FF8A55, #E2542A);
  flex: none;
}
.gt-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: .01em;
}
.gt-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(120, 84, 50, .07);
  border-radius: 999px;
  padding: 2px 10px;
}

/* ---------- i18n 语言切换器 ---------- */
#i18n-switch {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999;
  display: flex;
  gap: 4px;
  padding: 5px;
  background: rgba(255, 252, 249, .82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: .5px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
}
#i18n-switch button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: .15s;
}
#i18n-switch button:hover { color: var(--text); background: rgba(226, 84, 42, .10); }
#i18n-switch button.on {
  background: linear-gradient(135deg, #FF8A55, #E2542A);
  color: #fff;
}

/* ============================================================
   视觉化精简样式（配合 visual-digest.js，试点 countdown-timer）
   ============================================================ */
/* —— 1. 一图看懂摘要卡 —— */
.vd-digest {
  margin: 14px 0 18px;
  padding: 18px 20px;
  background: var(--surface);
  border: .5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(160, 90, 40, .05), 0 10px 28px rgba(160, 90, 40, .06);
}
.vd-d-lead {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; letter-spacing: -.012em;
  margin-bottom: 14px;
}
.vd-d-tag {
  flex: none;
  background: linear-gradient(135deg, #FF8A55, #E2542A);
  color: #fff; font-size: 11px; font-weight: 800;
  border-radius: 999px; padding: 3px 10px; letter-spacing: .04em;
}
.vd-d-flow {
  display: flex; align-items: stretch; gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.vd-d-step {
  flex: 1 1 150px; min-width: 140px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px;
  background: rgba(255, 138, 85, .08);
  border: .5px solid rgba(226, 84, 42, .16);
  border-radius: 13px;
}
.vd-d-step i { font-style: normal; font-size: 20px; line-height: 1.2; }
.vd-d-step b { font-size: 14px; color: var(--text); }
.vd-d-step span { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.vd-d-arrow {
  align-self: center;
  color: rgba(226, 84, 42, .55); font-size: 18px; font-weight: 700;
}
.vd-d-chips {
  font-size: 13px; color: var(--text-muted);
  background: rgba(120, 84, 50, .05);
  border-radius: 10px; padding: 8px 13px;
  margin-bottom: 12px; line-height: 1.7;
}
.vd-d-badges {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.vd-d-badges span {
  font-size: 12.5px; color: var(--text); font-weight: 600;
  background: rgba(47, 158, 68, .08);
  border: .5px solid rgba(47, 158, 68, .18);
  border-radius: 999px; padding: 6px 13px;
}

/* —— 2. 双时间轴对比图 —— */
.vd-diagram {
  margin: 10px 0 6px;
  padding: 16px 16px 12px;
  background: var(--surface);
  border: .5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(160, 90, 40, .05);
}
.vd-diagram svg { width: 100%; height: auto; display: block; }
.vd-diagram .vd-svg-title { font-size: 16px; font-weight: 800; fill: var(--text); }
.vd-diagram .vd-svg-lab   { font-size: 14px; font-weight: 700; fill: var(--text); }
.vd-diagram .vd-svg-sub   { font-size: 11px; fill: var(--text-muted); }
.vd-diagram .vd-svg-cap   { font-size: 11px; fill: var(--text-muted); }
.vd-diagram .vd-svg-note  { font-size: 11px; fill: var(--text-muted); }
.vd-diagram .vd-svg-res-bad  { font-size: 12.5px; font-weight: 700; fill: #C23A3A; }
.vd-diagram .vd-svg-res-good { font-size: 12.5px; font-weight: 700; fill: #237A35; }
.vd-diagram-note {
  margin-top: 10px;
  font-size: 13px; line-height: 1.75;
  color: var(--text);
  background: rgba(255, 138, 85, .09);
  border-left: 3px solid #E2542A;
  border-radius: 0 10px 10px 0;
  padding: 8px 13px;
}

/* —— 3. 场景卡片 —— */
.vd-scenes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 12px 0 8px;
}
.vd-scene {
  display: flex; flex-direction: column; gap: 2px;
  padding: 15px 16px;
  background: var(--surface);
  border: .5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(160, 90, 40, .05);
}
.vd-scene i { font-style: normal; font-size: 22px; line-height: 1.2; margin-bottom: 3px; }
.vd-scene b { font-size: 17px; letter-spacing: -.015em; color: var(--text); }
.vd-scene em {
  font-style: normal; font-size: 12px; font-weight: 700;
  color: #D95B2C;
  background: rgba(226, 84, 42, .08);
  border-radius: 6px; padding: 1px 7px;
  align-self: flex-start;
}
.vd-scene span { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-top: 5px; }

/* —— 4. 三工具对比表 —— */
.vd-faqtable { margin: 10px 0 6px; overflow-x: auto; }
.vd-faqtable table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13px;
  background: var(--surface);
  border: .5px solid var(--border);
  border-radius: 13px;
  overflow: hidden;
}
.vd-faqtable th, .vd-faqtable td {
  padding: 9px 13px; text-align: left; line-height: 1.65;
  border-bottom: .5px solid var(--border);
  vertical-align: top;
}
.vd-faqtable thead th {
  background: rgba(255, 138, 85, .10);
  font-weight: 700; color: var(--text);
  white-space: nowrap;
}
.vd-faqtable tbody th {
  font-weight: 700; color: var(--text-muted);
  white-space: nowrap; width: 88px;
  background: rgba(120, 84, 50, .03);
}
.vd-faqtable tbody td { color: var(--text); }
.vd-faqtable tbody td:nth-child(2) { background: rgba(255, 138, 85, .06); font-weight: 600; }
.vd-faqtable tbody tr:last-child th, .vd-faqtable tbody tr:last-child td { border-bottom: none; }
.vd-faqtable-note {
  margin: 8px 2px 2px;
  font-size: 12px; color: var(--text-muted); line-height: 1.7;
}

/* —— 折叠原文（details） —— */
details.vd-orig { margin: 10px 0 2px; }
details.vd-orig summary {
  display: inline-block;
  cursor: pointer;
  font-size: 12px;
  color: #D95B2C;
  background: rgba(226, 84, 42, .08);
  border-radius: 999px;
  padding: 3px 12px;
  list-style: none;
}
details.vd-orig summary::-webkit-details-marker { display: none; }
details.vd-orig summary::before { content: "▸ "; }
details.vd-orig[open] summary::before { content: "▾ "; }
details.vd-orig > div, details.vd-orig > dl {
  margin-top: 8px;
  font-size: 13px; line-height: 1.85; color: var(--text-muted);
  background: rgba(120, 84, 50, .04);
  border-radius: 11px; padding: 11px 14px;
}
details.vd-orig > dl { display: grid; gap: 10px; }
details.vd-orig > dl > div { display: grid; gap: 2px; }
details.vd-orig div dl, details.vd-orig div dt, details.vd-orig div dd { margin: 0; }
details.vd-orig > div dt, details.vd-orig > dl dt { font-weight: 700; color: var(--text); margin-top: 8px; }
details.vd-orig > div dd, details.vd-orig > dl dd { margin: 2px 0 0 0; }

@media (max-width: 640px) {
  .vd-d-flow { flex-direction: column; }
  .vd-d-arrow { transform: rotate(90deg); align-self: center; }
  .vd-d-lead { flex-wrap: wrap; }
}

/* ===== 新 LOGO 统一：隐藏 JS 渲染的旧品牌图标，改用 logo.png ===== */
.mark > svg,
.logo-mark > svg { display: none !important; }
.mark,
.logo-mark {
  width: 30px !important;
  height: 30px !important;
  background: url("/logo.png") center / cover no-repeat !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}