:root {
  color-scheme: dark;
  --bg: #070b1a;
  --surface: rgba(255, 255, 255, 0.05);
  --surface-2: rgba(255, 255, 255, 0.09);
  --border: rgba(255, 255, 255, 0.12);
  --border-2: rgba(255, 255, 255, 0.2);
  --text: #e8edf7;
  --muted: #9aa6c0;
  --primary: #5aa9ff;
  --primary-strong: #2f7fd6;
  --primary-soft: rgba(90, 169, 255, 0.14);
  --radius: 14px;
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
  --glow: 0 0 18px rgba(90, 169, 255, 0.28);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background:
    radial-gradient(1200px 720px at 82% -12%, rgba(90, 169, 255, 0.12), transparent 60%),
    radial-gradient(900px 640px at 8% 6%, rgba(150, 100, 255, 0.10), transparent 55%),
    linear-gradient(180deg, #070b1a 0%, #0a1026 58%, #070b1a 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* 星空画布：固定满屏，置于内容之下 */
#starfield {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* 顶栏 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  background: rgba(12, 18, 40, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.brand {
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 0 20px rgba(90, 169, 255, 0.5);
  text-decoration: none;
}
.brand:hover { color: #fff; text-shadow: var(--glow); }

/* 回到首页大按钮：常驻顶栏，任何页面都能看到、都能点回首页
   （用户反馈：原来只有「← 返回」按钮，不知道该点哪里回首页） */
.home-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: #eaf3ff;
  background: var(--primary-soft);
  border: 1px solid rgba(90, 169, 255, 0.55);
  border-radius: 999px;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.home-btn:hover {
  background: rgba(90, 169, 255, 0.26);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--glow);
}
.home-btn:active { transform: translateY(0); }
/* 已在首页时弱化为「当前位置」标识，仍可点（点了等于刷新） */
body.on-home .home-btn { opacity: 0.5; }
.menu-btn {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  padding: 4px 10px;
  cursor: pointer;
  color: var(--text);
}
.search {
  margin-left: auto;
  width: 240px;
  max-width: 40vw;
  padding: 9px 12px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface-2);
  color: var(--text);
}
.search:focus { outline: none; border-color: var(--primary); box-shadow: var(--glow); background: rgba(255, 255, 255, 0.12); }
.search::placeholder { color: var(--muted); }

/* 布局 */
.layout { display: flex; align-items: stretch; min-height: calc(100vh - 120px); }

/* 侧边栏 */
.sidebar {
  width: 232px;
  flex: 0 0 232px;
  background: rgba(12, 18, 40, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  overflow-y: auto;
  max-height: calc(100vh - 120px);
  position: sticky;
  top: 57px;
}
.cat { margin-bottom: 18px; }
.cat-h {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 0 10px 8px;
}
.cat-items { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nav-item:hover { background: var(--surface-2); }
.nav-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(90, 169, 255, 0.4); }

/* 主内容 */
#app { flex: 1; padding: 24px 28px; min-width: 0; }

.hero { margin-bottom: 26px; }
.hero h1 {
  font-size: 28px;
  margin: 0 0 8px;
  color: #fff;
  text-shadow: 0 0 26px rgba(90, 169, 255, 0.45);
}
.hero p { color: var(--muted); margin: 0; max-width: 640px; }

.cat-sec { margin-bottom: 28px; }
.cat-sec h2 { font-size: 18px; margin: 0 0 14px; color: #fff; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.card {
  display: block;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow), var(--glow); }
.card h3 { margin: 0 0 6px; font-size: 16px; color: #fff; }
.card p { margin: 0; color: var(--muted); font-size: 13px; }

/* 工具视图 */
/* 工具页顶部条：左「返回」，右「回到首页」大按钮 —— 让用户不必猜哪里能回首页 */
.tool-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.tool .back {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  font-weight: 500;
}
.tool .back:hover { text-shadow: var(--glow); }

/* 「回到首页」大按钮（工具页/子页内显式入口） */
.home-btn-lg {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: #eaf3ff;
  background: var(--primary-soft);
  border: 1px solid rgba(90, 169, 255, 0.55);
  border-radius: 10px;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.home-btn-lg:hover {
  background: rgba(90, 169, 255, 0.26);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--glow);
}
.home-btn-lg:active { transform: translateY(0); }
/* 「复制分享链接」按钮（工具页顶栏）。
   位置：紧跟在「返回」之后、供货 CTA 之前 —— 分享是「算完之后」的动作，
   而供货 CTA 是更强的商业动作，后者应更靠右更醒目，次序不抢。 */
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 9px;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.share-btn:hover:not(:disabled) {
  background: var(--primary-soft);
  border-color: rgba(90, 169, 255, 0.55);
  transform: translateY(-1px);
}
.share-btn:active:not(:disabled) { transform: translateY(0); }
/* 还没算出参数时禁用 —— 但仍要能看见（用户可以据此知道"算完就能分享"），
   所以用降透明度而不是 display:none。 */
.share-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.share-btn.done {
  background: rgba(46, 125, 50, 0.22);
  border-color: rgba(76, 175, 80, 0.6);
  color: #b9f0bd;
}
.share-btn .sb-ic { font-size: 14px; line-height: 1; }

/* 底部状态条：复制失败时展示可手动复制的链接。
   🔴 必须挂 body 直系 + position:fixed，绝不参与 .layout 的 flex 布局
      （静态壳改造时正是踩了这个坑，见 build_seo_shells.py）。 */
.share-bar {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 120%);
  z-index: 60;
  max-width: min(760px, 92vw);
  padding: 12px 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: rgba(18, 26, 50, 0.97);
  border: 1px solid var(--border-2);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -6px 26px rgba(0, 0, 0, 0.45);
  word-break: break-all;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s, opacity 0.22s;
}
.share-bar.show {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.share-bar.err { border-color: rgba(200, 120, 60, 0.7); }
@media (max-width: 620px) {
  .share-btn { padding: 7px 11px; font-size: 12.5px; }
  .share-bar { font-size: 12px; padding: 10px 14px; }
}
/* iframe 型工具：同源嵌入，高度由 JS 同步 */
.tool-iframe {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: block;
  min-height: 600px;
  background: #0d1330;
  box-shadow: var(--shadow);
}
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  max-width: 880px;
}
.panel h2 { margin: 0 0 18px; font-size: 20px; color: #fff; }

/* 表单 */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}
.field { display: flex; flex-direction: column; gap: 6px; min-width: 160px; flex: 1 1 160px; }
.field label { font-size: 13px; color: var(--muted); }
.field input, .field select {
  padding: 9px 10px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--primary); box-shadow: var(--glow); }

.actions { margin: 8px 0 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  background: var(--primary);
  color: #04122a;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--glow);
}
.btn:hover { background: #79bbff; }
.btn.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-2); box-shadow: none; }

.result {
  background: var(--primary-soft);
  border: 1px solid rgba(90, 169, 255, 0.35);
  border-radius: 8px;
  padding: 16px;
  font-size: 15px;
  min-height: 24px;
  color: var(--text);
}
.result .val { font-weight: 600; color: var(--primary); }
.hint { color: var(--muted); font-size: 13px; }
.note { color: var(--muted); font-size: 13px; margin-top: 12px; line-height: 1.7; }

/* 结果明细表 */
.res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 6px;
}
.res-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.res-item .k { font-size: 12px; color: var(--muted); }
.res-item .v { font-size: 18px; font-weight: 600; color: var(--primary); margin-top: 2px; }
.res-item .u { font-size: 12px; color: var(--muted); font-weight: 400; }

/* ============================================================
   静态 SEO 正文块（.seo-shell）
   由 web-apps/build_seo_shells.py 构建期生成，落在 .layout 之外、footer 之前。
   两个用途：
     ① 爬虫（不执行 JS）能读到该页专属的真实内容 —— 这是本项目 SEO 修复的核心；
     ② 访客也能看到"这个工具解决什么问题"，属于有用信息，故**不隐藏**。
   但它**不该抢首屏**：默认收起为一行「本页说明」，点击展开。
   —— 用 <details> 而不是 JS 折叠：无 JS 也能展开（爬虫与本页目的一致）。
   ============================================================ */
.seo-shell {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
  background: rgba(12, 18, 40, 0.35);
}
.seo-shell > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 24px;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: .3px;
  user-select: none;
}
.seo-shell > summary::-webkit-details-marker { display: none; }
.seo-shell > summary::before { content: "▸ "; }
.seo-shell[open] > summary::before { content: "▾ "; }
.seo-shell > summary:hover { color: var(--primary); }
.seo-shell h1 {
  font-size: 18px;
  margin: 4px 24px 10px;
  color: #e8eefc;
  font-weight: 600;
}
.seo-shell .seo-lead {
  margin: 0 24px 12px;
  max-width: 68ch;
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(200, 212, 236, 0.86);
}
.seo-shell .seo-points {
  margin: 0 24px 12px;
  padding-left: 20px;
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(180, 194, 220, 0.82);
}
.seo-shell .seo-points li { margin-bottom: 3px; }
.seo-shell .seo-sib {
  margin: 0 24px 16px;
  font-size: 12.5px;
  color: var(--muted);
}
.seo-shell .seo-sib a {
  color: rgba(154, 190, 240, 0.9);
  text-decoration: none;
  border-bottom: 1px solid rgba(154, 190, 240, 0.3);
  margin-right: 10px;
}
.seo-shell .seo-sib a:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* DOM 里静态正文是**展开**的（爬虫才读得到），JS 启动后收起，避免抢首屏。
   ⇒ 无 JS 时（含爬虫与 JS 失败）内容完整可读；有 JS 时访客看到的是收起态。 */

/* 页脚 */
.footer {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 24px;
  border-top: 1px solid var(--border);
  background: rgba(12, 18, 40, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.footer .ver {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(154, 166, 192, 0.55);
  letter-spacing: 0.5px;
}
/* 页脚次级链接：许可声明 / 联系 */
.footer > span { display: block; }
.footer .foot-links { margin-top: 8px; }
.footer .foot-links a {
  color: rgba(154, 166, 192, 0.8);
  text-decoration: none;
  border-bottom: 1px solid rgba(154, 166, 192, 0.28);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.footer .foot-links a:hover {
  color: #7fb3ff;
  border-bottom-color: #7fb3ff;
}
.footer .foot-links a + a { margin-left: 18px; }

/* 响应式：移动端侧边栏抽屉 */
@media (max-width: 760px) {
  .menu-btn { display: inline-block; }
  .layout { position: relative; }
  .sidebar {
    position: fixed;
    top: 57px;
    left: 0;
    bottom: 0;
    z-index: 15;
    width: 260px;
    flex: none;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 2px 0 18px rgba(0, 0, 0, 0.5);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  #app { padding: 18px; }
  /* 顶栏窄屏：搜索框让位，保证「首页」按钮始终可见可点 */
  .topbar { gap: 8px; padding: 10px 14px; }
  .brand { font-size: 16px; }
  .home-btn { padding: 7px 12px; font-size: 13px; }
  .search { width: 120px; }
  /* 工具页顶部条：小屏允许换行，按钮不挤压 */
  .tool-topbar { flex-wrap: wrap; }
  .home-btn-lg { padding: 8px 16px; font-size: 14px; }
  /* 展会条：小屏改为纵向堆叠，避免横向挤压换行零碎 */
  .expo-bar { flex-direction: column; gap: 2px; padding: 10px 2px; margin-bottom: 18px; }
  .expo-bar .expo-t { margin-bottom: 2px; }
  .expo-i { white-space: normal; }
}

/* 4K / 大屏：限制阅读宽度，避免过散 */
@media (min-width: 2400px) {
  #app { max-width: 1600px; }
  .topbar, .footer { max-width: 2000px; margin: 0 auto; }
}

/* 社群 / 引流板块（暖金辉光，区别于工具蓝） */
.cat-community .cat-h { color: #ffd27a; }
.nav-community { color: #ffe6a8 !important; font-weight: 600; }
.nav-community:hover { background: rgba(255, 210, 122, 0.12); }

/* ---------- v1.5.3 首页改版：社区内容优先 ---------- */
/* 侧边栏：设计工具二级分类（弱化，不与「社区」抢注意力） */
.cat-sub { margin-bottom: 10px; margin-left: 8px; }
.cat-sub .cat-h { font-size: 11px; padding-left: 8px; color: var(--muted); opacity: .85; }
.cat-sub .nav-item { font-size: 13px; padding: 7px 10px; }
.nav-tools-hub { color: var(--primary) !important; font-weight: 600; }
.nav-tools-hub:hover { background: var(--primary-soft); }

/* 区块标题行（右侧带「查看全部 →」） */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.sec-head h2 { font-size: 18px; margin: 0; color: #fff; }
.sec-more { color: var(--primary); font-size: 13px; text-decoration: none; white-space: nowrap; }
.sec-more:hover { text-shadow: var(--glow); }
.sec-sub { color: var(--muted); font-size: 13px; margin: -6px 0 16px; max-width: 760px; }

/* 首页社区动态列表 */
.feed-sec { margin-bottom: 24px; }
.feed { display: flex; flex-direction: column; gap: 12px; }
.feed-item {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.feed-item:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow), var(--glow); }
.feed-item h3 { margin: 0 0 6px; font-size: 16.5px; color: #fff; line-height: 1.45; }
.feed-item p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.feed-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.feed-meta .badge { font-size: 11px; padding: 2px 9px; border-radius: 999px; color: #fff; font-weight: 600; }
/* 徽标底色由 app.js 的 catStyle() 按分类顺序从调色板内联写入，
   这里不再逐个分类写死 .b-xxx 规则 —— 根治「新增分类漏写 CSS → 白字透明底隐形」（v1.6.7 事故） */
.feed-loading { color: var(--muted); font-size: 14px; padding: 22px 0; }
.feed-loading a { color: var(--primary); }

/* 首页展会信息条（v1.6.8）
   设计取向：简洁、低调、不抢眼 —— 单行紧凑列表，不设大标题、不用卡片、不加边框装饰。
   与下方「社区动态」刻意拉开层级：这里只是信息提示，不是内容主体。 */
.expo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin: -6px 0 22px;
  padding: 9px 2px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--muted);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.expo-bar .expo-t {
  color: var(--primary);
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 600;
  opacity: .9;
  flex: 0 0 auto;
}
/* 单条：日期加粗高亮，其余压暗 —— 一眼扫到时间，不喧哗 */
.expo-i {
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}
.expo-i b { color: var(--text); font-weight: 600; margin-right: 7px; font-variant-numeric: tabular-nums; }
.expo-i i { font-style: normal; opacity: .62; margin-left: 5px; }
a.expo-i:hover { color: var(--primary); }
a.expo-i:hover b { color: var(--primary); }
.expo-more { color: var(--muted); opacity: .68; white-space: nowrap; }

/* 首页底部设计工具区（弱化标题层级，明确「另一条线」） */
.tools-sec { margin-top: 6px; padding-top: 22px; border-top: 1px solid var(--border); }

.community-sec { margin-bottom: 30px; }
.community-card {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 210, 122, 0.10), rgba(90, 169, 255, 0.08));
  border: 1px solid rgba(255, 210, 122, 0.35);
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: var(--shadow);
}
.qr-box {
  flex: 0 0 auto;
  width: 168px;
  height: 168px;
  border-radius: 12px;
  background: #fff;
  border: 4px solid #fff;
  box-shadow: 0 0 22px rgba(255, 210, 122, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.qr-box.big { width: 240px; height: 240px; }
.qr { width: 100%; height: 100%; object-fit: contain; display: block; }
.qr-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #555;
  font-size: 13px;
  padding: 10px;
  line-height: 1.5;
}
.qr-ph small { color: #999; }
.community-info { flex: 1 1 260px; }
.community-info h3 { margin: 0 0 8px; color: #fff; font-size: 18px; }
.community-info p { margin: 0 0 8px; color: var(--muted); }
.community-info .line { color: var(--text); font-size: 15px; }
.community-info .line b { color: #ffd27a; font-size: 17px; }
.btn-join {
  display: inline-block;
  margin-top: 6px;
  background: #ffd27a;
  color: #2a1c00;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(255, 210, 122, 0.4);
}
.btn-join:hover { background: #ffe0a0; }
.community-info .hint { color: var(--muted); font-size: 13px; margin-top: 10px; }

.contact-page {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
  max-width: 720px;
}

/* ---------- 供货与定制（v1.8.0 起 / v1.9.0 细化，第三条业务线）----------
   配色取向：金色系（#ffd27a / #b45309 族），刻意与「工具蓝」区分 ——
   让访客一眼看出这是「供货 / 商务」而不是「在线工具」，避免误认为也是免费算的。
   与暖金社群卡不同的是：这里用实边 + 深底，更像「报价单」而非「社群邀请」。 */
.cat-supply .cat-h { color: #ffc86b; }
.nav-supply { color: #ffd9a0 !important; font-weight: 600; }
.nav-supply:hover { background: rgba(255, 200, 107, 0.12); }

/* 首页板块：与设计工具区之间加分隔线，表明这是「另一条线」的收尾 */
.supply-sec { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--border); }

/* 统计条（独立页顶部）：先给整体规模，再往下看细节 */
.sup-stat {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin: 0 0 22px; padding: 13px 18px;
  background: rgba(255, 200, 107, 0.07);
  border: 1px solid rgba(255, 200, 107, 0.22);
  border-radius: 10px;
  font-size: 13.5px; color: var(--muted);
}
.sup-stat b { color: #ffd27a; font-size: 16px; font-variant-numeric: tabular-nums; }

/* 大组：每组一个标题 + 组内细项网格 */
.sup-group { margin-bottom: 30px; }
.sg-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 200, 107, 0.24);
}
.sg-head h3 {
  margin: 0; font-size: 18px; color: #ffe0a8;
  padding-left: 11px; border-left: 3px solid #ffc86b;
}
.sg-sub { font-size: 12.5px; color: var(--muted); }

/* 细项卡片：规格 / 交期 / 价格三行式，信息密度高但不挤 */
.sup-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 14px; }
.supply-item {
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(255, 200, 107, 0.07), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 200, 107, 0.28);
  border-radius: var(--radius);
  padding: 15px 16px;
  box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s;
}
.supply-item:hover { border-color: rgba(255, 200, 107, 0.62); transform: translateY(-2px); }
.si-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.si-h h4 { margin: 0; font-size: 15.5px; color: #ffe0a8; }
.si-en { font-size: 11px; color: rgba(255, 200, 107, 0.6); letter-spacing: .3px; }
.si-spec {
  margin: 0 0 11px; flex: 1;
  font-size: 13px; line-height: 1.7; color: var(--muted);
}
/* 交期 + 价格：访客最先想知道的两件事，做成等宽两栏贴在卡片底部 */
.si-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px dashed rgba(255, 200, 107, 0.26);
}
.si-l { font-size: 12.5px; color: #ffd9a0; line-height: 1.5; }
.si-l em {
  /* 「交期」标签：靠背景色块与正文拉开距离，避免渲染成「交期标准 7～15 天」连成一串 */
  font-style: normal; display: inline-block;
  margin-right: 7px; padding: 1px 6px; border-radius: 4px;
  background: rgba(255, 200, 107, 0.16); color: #ffc86b; font-size: 11px;
}
.si-p {
  font-size: 13.5px; font-weight: 700; color: #ffd27a;
  font-variant-numeric: tabular-nums; text-align: right; line-height: 1.45;
}
.si-p i { font-style: normal; opacity: .6; margin-left: 4px; font-size: 11.5px; font-weight: 400; }

/* 咨询与联系块：左侧文本通道 + 右侧微信二维码并排 */
.supply-contact {
  margin-top: 20px;
  padding: 22px 26px;
  background: linear-gradient(135deg, rgba(255, 200, 107, 0.13), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 200, 107, 0.4);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.supply-contact h3 { margin: 0 0 8px; color: #fff; font-size: 17.5px; }
.supply-contact .hint { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.sc-body { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.sc-txt { flex: 1; min-width: 220px; }
.supply-contact .line { margin: 0 0 8px; color: var(--text); font-size: 15px; }
.supply-contact .line b { color: #ffd27a; font-size: 18px; letter-spacing: .5px; }
/* 微信二维码：白底 + 轻金边框，扫码区不做花哨效果，保证可扫性 */
.sqr { text-align: center; flex-shrink: 0; }
.sqr img {
  display: block; width: 168px; height: 168px; object-fit: cover;
  border-radius: 10px; background: #fff; padding: 6px;
  border: 1px solid rgba(255, 200, 107, 0.5);
  box-shadow: 0 0 20px rgba(255, 210, 122, 0.22);
}
.sqr-cap { display: block; margin-top: 8px; font-size: 12.5px; color: #ffd9a0; font-weight: 600; }

/* ============ 大二维码区（仅 /supply 页，v2.0.0）============
   目的：把「扫码能干什么」讲清楚 —— 左列用途、右放大码。
   金色系延续供应链语言，但用实底卡片提高辨识度。 */
.qr-panel {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 22px 0 26px;
  padding: 26px 30px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255, 200, 107, 0.16), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 200, 107, 0.5);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.22);
}
.qp-l { flex: 1; min-width: 0; }
.qr-panel h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: .3px;
}
.qp-lead { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.qp-list { display: flex; flex-direction: column; gap: 11px; }
.qp-item { display: flex; align-items: flex-start; gap: 11px; }
.qp-ic {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; background: rgba(255, 210, 122, 0.16);
  border: 1px solid rgba(255, 210, 122, 0.42);
}
.qp-bd { min-width: 0; }
.qp-bd b { display: block; color: #ffd9a0; font-size: 15.5px; font-weight: 700; line-height: 1.5; }
.qp-bd span { color: var(--muted); font-size: 13px; line-height: 1.65; }
.qp-steps {
  margin-top: 16px; padding: 11px 14px;
  border-radius: 9px; font-size: 13px; line-height: 1.8;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border-left: 3px solid #ffd27a;
}
.qp-steps b { color: #ffd9a0; }
.qp-r { flex: none; text-align: center; }
/* 二维码本体：纯白底 + 留白，保证任何背景下都能扫 */
.qp-qr {
  display: inline-block;
  padding: 12px 12px 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 26px rgba(255, 210, 122, 0.3);
}
.qp-qr img { display: block; width: 260px; height: 260px; border-radius: 6px; }
.qp-cap { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; color: #1c1408; }
.qp-tip { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.6; max-width: 284px; }
.btn-supply {
  display: inline-block;
  margin-top: 8px;
  background: #ffd27a;
  color: #2a1c00;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0 16px rgba(255, 210, 122, 0.38);
}
.btn-supply:hover { background: #ffe0a0; }

/* 独立页补白（怎么报价 / 为什么找我 / 价格口径） */
.supply-tips { max-width: 780px; }
.supply-tips p { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0 0 12px; }
.supply-tips b { color: var(--text); }
.supply-tips .note {
  font-size: 12.5px;
  opacity: .78;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* 对口工具页顶部 CTA：紧邻「返回」，不挤占右侧的「回到首页」
   金色实底胶囊 —— 在工具页的深蓝背景上一眼可见但不喧宾夺主 */
.supply-cta {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 15px;
  text-decoration: none;
  border-radius: 10px;
  background: rgba(255, 200, 107, 0.14);
  border: 1px solid rgba(255, 200, 107, 0.5);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.supply-cta:hover {
  background: rgba(255, 200, 107, 0.24);
  border-color: #ffc86b;
  transform: translateY(-1px);
}
.supply-cta .cta-t { color: #ffd9a0; font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.supply-cta .cta-s { color: var(--muted); font-size: 11px; line-height: 1.3; }

@media (max-width: 760px) {
  .supply-sec { margin-top: 18px; padding-top: 16px; }
  .supply-contact { padding: 18px; }
  /* 小屏：二维码居中单独一行，比并排更好扫 */
  .sc-body { gap: 18px; }
  .sc-txt { min-width: 0; width: 100%; }
  .sqr { width: 100%; }
  .sqr img { margin: 0 auto; width: 158px; height: 158px; }
  /* 大二维码区：竖排，二维码置顶（这是页面的主行动，先给码再给解释） */
  .qr-panel {
    flex-direction: column-reverse;
    gap: 20px;
    padding: 20px 18px;
    margin: 16px 0 20px;
  }
  .qr-panel h2 { font-size: 18.5px; }
  .qp-l { width: 100%; }
  .qp-r { width: 100%; }
  .qp-qr { padding: 10px 10px 7px; }
  .qp-qr img { width: 210px; height: 210px; }
  .qp-tip { max-width: none; }
  .supply-cta { padding: 5px 12px; }
  .supply-cta .cta-s { display: none; }   /* 小屏只留主文案，避免顶栏换行零碎 */
  .sup-items { grid-template-columns: 1fr; }
  .sup-stat { gap: 8px 18px; font-size: 12.5px; }
  .si-meta { justify-content: flex-start; }
  .si-p { text-align: left; }
}

/* ---------- 法律文书与主体信息（v1.21.0 合规页）----------
   取向：**正式、可读**，刻意比工具页更克制 —— 去掉卡片阴影与彩色装饰，
   用留白和字号层级建立秩序。法务文本要让读者愿意读完，而不是"像广告"。
   配色沿用全站深色变量，不引入新色系（唯一例外是 .legal-note 的琥珀色，
   因为那里面装的是**免责与义务**条款，必须比正文更醒目的"警示色"）。 */
.legal-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 4px 2px 40px;
  line-height: 1.85;          /* 长文比正文行高更大，减少跳行 */
  font-size: 15px;
}
.legal-page > h1 {
  font-size: 27px;
  margin: 0 0 6px;
  letter-spacing: .5px;
}
.legal-updated {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 18px;
}
.legal-lead {
  color: #cfd8e8;
  background: var(--surface);
  border-left: 3px solid var(--primary);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 0 0 30px;
  font-size: 14.5px;
}
.legal-sec { margin: 0 0 30px; }
.legal-sec > h2 {
  font-size: 18px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: #f0f4fc;
}
.legal-sec h3 {
  font-size: 15px;
  margin: 18px 0 8px;
  color: #dbe4f5;
  font-weight: 600;
}
.legal-sec p { margin: 0 0 12px; color: #cdd7e8; }
.legal-sec ul { margin: 0 0 12px; padding-left: 22px; }
.legal-sec li { margin: 0 0 9px; color: #cdd7e8; }
.legal-sec strong { color: #fff; font-weight: 600; }
.legal-page a { color: #7fb3ff; text-decoration: none; border-bottom: 1px solid rgba(127,179,255,.35); }
.legal-page a:hover { border-bottom-color: #7fb3ff; }

/* 免责 / 义务提示框：页面里最需要被真正读到的内容 */
.legal-note {
  background: rgba(255, 200, 107, .09);
  border: 1px solid rgba(255, 200, 107, .3);
  border-left: 3px solid #ffc86b;
  border-radius: 0 10px 10px 0;
  padding: 13px 17px;
  color: #f2ddb4 !important;
  font-size: 14.5px;
  margin: 0 0 14px;
}
.legal-note strong { color: #ffe3a8; }

.legal-contact {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 0 0 14px;
}
.legal-contact p { margin: 0 0 8px; }
.legal-contact ul { margin: 0; }

.legal-more {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13.5px;
}

/* 页脚备案号：法定义务的"主页底部中央位置标明"——因此单独成行、居中 */
.foot-icp {
  display: block;
  margin-top: 8px;
  font-size: 12px;
}
.foot-icp a {
  color: rgba(154, 166, 192, .72);
  text-decoration: none;
  border-bottom: 1px solid rgba(154, 166, 192, .25);
}
.foot-icp a:hover { color: #7fb3ff; border-bottom-color: #7fb3ff; }
/* 公安备案号链接：官方要求图标在号码之前；图标与文字基線对齐 */
.foot-icp .fsep { margin: 0 8px; opacity: .45; }
.foot-icp a.fp, .legal-page a.fp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.foot-icp a.fp img, .legal-page a.fp img {
  display: block;
  width: 20px;
  height: 22px;
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .legal-page { font-size: 14.5px; line-height: 1.8; }
  .legal-page > h1 { font-size: 22px; }
  .legal-sec > h2 { font-size: 16.5px; }
  .legal-lead { padding: 12px 14px; font-size: 14px; }
  .legal-page { padding-bottom: 28px; }
}