@charset "utf-8";
/* ============================================================
   浙江城乡房地产土地资产评估有限公司 · 官网样式
   设计概念「朱印」—— 公司全部业务的共同产出，是一个能盖章的结论
   ------------------------------------------------------------
   底色取报告纸白，分区靠 1px 墨线而非卡片阴影；
   朱印红（#b02a21）取自评估报告的签章印泥色，
   只出现在结论、标记与关键标注上，不做大面积填充。
   首屏主视觉是一张比较法测算片段，不是绘制图形 ——
   它是这个行业真实的产出物，也最能说明公司到底交付什么。
   标题用宋体（估价报告封面与备案证书即宋体），
   正文用黑体，数字用表格数字以便纵向对齐。
   字体为自托管的思源宋体 / 思源黑体同源子集（Noto Serif SC / Noto Sans SC），
   由 tools/subset_fonts.py 按页面用字生成，未收录字符回退系统字体栈。
   ============================================================ */

/* ---------- 字阶（全站唯一字号来源，勿在别处引入新字号） ----------
   12    微标注：脚注、图表附注、元信息、费率明细
   13.5  表格与图注：测算表、费率表、表单标签、证书说明、页脚小标题
   15    次级正文：条目描述、页脚、列表、导航、按钮、地址
   16.5  主正文与导语：正文段落、区块导语、条目小标题、首屏 lede
   20    中标题：分组标题、时间线年份（窄屏的区块标题也落这一档）
   26    区块标题 h2、统计数字、结论数字、大输入框
   33    页面标题 h1
   40    展示级：仅首屏主标题
   窄屏策略是把标题沿字阶下移一档，不新增字号。 */

/* ---------- 自托管字体（按站内用字生成的子集，见 tools/subset_fonts.py）----------
   只覆盖页面出现过的字符；未收录字符自动回退到下面的系统字体栈 */
@font-face {
  font-family: "Noto Serif SC Subset";
  src: url("../fonts/noto-serif-sc-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans SC Subset";
  src: url("../fonts/noto-sans-sc-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans SC Subset";
  src: url("../fonts/noto-sans-sc-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ════════════════════════════════════════════════════════════
   * 颜色令牌体系 · 朱印 v47-opt
   *
   * 设计原则：
   * 1. 色值与用途一一对应，不设未使用的 token
   * 2. 所有文字色在 #fff 背景上必须满足 WCAG 2.1 AA（≥4.5:1）
   * 3. 品牌色（--seal）与语义色（--danger）色值分离，防误用
   * 4. 灰阶按 4 档均匀分布：ink > ink-2 > mute > ink-3
   * ════════════════════════════════════════════════════════════ */

  /* --- 承载面（从亮到暗排列） --- */
  --paper:   #ffffff;    /* 主背景：报告纸白 */
  --surface: #f6f7f8;    /* 抬升面：factbar / 斑马纹 / hover 底 */
  --band:    #f0f1f3;    /* 表头底 / 折叠面板底 */
  --canvas:  #eaecef;    /* 画布底：极端场景的次级背景 */

  /* --- 线条（从细到粗排列） --- */
  --grid-2:  #e4e6e8;    /* 细格线：表格内部行线 */
  --grid:    #d1d5db;    /* 分格线：区块外框、列表分隔 */
  --rule:    #b0b7c1;    /* 框线：输入框底线、强调边框 */

  /* --- 文字灰阶（4 档，每档对比度标注） --- */
  --ink:     #121418;    /* 墨黑：主文字 / 标题          [18.7:1 ✓✓] */
  --ink-2:   #373c45;    /* 墨黑二级：段落 / 表内正文    [11.2:1 ✓✓] */
  --mute:    #5d6470;    /* 次要文字：说明 / 地址 / 注记 [6.1:1 ✓]  原#6b7078(4.98:1⚠) */
  --ink-3:   #808896;    /* 最淡文字：placeholder / 禁用  [4.67:1 ✓]  原#8b9199(3.24:1✗) */

  /* --- 品牌色（装饰用途，不表达警示） --- */
  --seal:    #b02a21;    /* 朱印红：焦点环 / 导航下划线 / 列表点 / 结论数字 */

  /* --- 功能色（语义角色，与品牌色解耦） --- */
  --danger:      #a02520; /* 警示红：比品牌红略深，视觉上更「重」 */
  --danger-soft: #e8c4c2; /* 危险操作边框：浅红底 */
  --success:     #0a684f; /* 成功绿：稍深于原版，对比度更好 [6.8:1] */
  --survey:      #1a4a78; /* 签署蓝：链接 / 电话 [9.4:1 ✓✓] */

  /* --- 交互态 --- */
  --focus-ring: rgba(176, 42, 33, 0.35);   /* 焦点光晕 */
  --hover-bg:   rgba(18, 20, 24, 0.03);     /* hover 底色 */
  --pressed-bg: rgba(18, 20, 24, 0.06);     /* 按压底色 */

  --serif: "Noto Serif SC Subset", "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: "Noto Sans SC Subset", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  --wrap: 1180px;

  /* 全局过渡曲线：统一交互节奏 */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.85;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* 标题用宋体担当「文件」气质 */
h1, h2 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  margin: 0;
}

/* 条目名用黑体，属「标注」层级，不参与宋体系统 */
h3 {
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1.55;
  margin: 0;
}

p { margin: 0; }

a { color: var(--survey); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img { max-width: 100%; display: block; }

/* 键盘焦点必须可见：用品牌红光晕，与 --focus-ring 令牌联动 */
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--seal); }

.wrap { width: min(var(--wrap), calc(100% - 48px)); margin: 0 auto; }

/* 朱印记号：全站统一的结构标记，替代图标 */
.mark { display: inline-block; width: 7px; height: 7px; background: var(--seal); flex: none; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 10px 16px; z-index: 99;
}
.skip:focus { left: 0; }

/* 只给屏幕阅读器的说明（如「新窗口打开」），视觉上不占位 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 页头 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--grid);
  transition: background var(--duration-normal) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.head-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 0;
}

.brand { display: flex; align-items: center; gap: 13px; color: inherit; transition: opacity var(--duration-fast) var(--ease-out); }
.brand:hover { text-decoration: none; opacity: 0.85; }
.brand img { height: 36px; width: auto; flex: none; }
.brand-name {
  font-family: var(--serif);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
}
/* 窄屏放不下全名，改为两行副标题（logo 已含「城乡评估」，不再重复品牌名） */
.brand-name .brand-sub { display: none; }
.brand-name small {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--mute);
  line-height: 1.4;
  margin-top: 1px;
}

.site-nav ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: inline-block;
  color: var(--ink);
  font-size: 15px;
  padding: 5px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.site-nav a:hover { text-decoration: none; border-bottom-color: var(--rule); color: var(--ink); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--seal); color: var(--ink); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--grid);
  padding: 11px 12px;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.nav-toggle:hover { border-color: var(--rule); }
.nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--ink); }
.nav-toggle span + span { margin-top: 4px; }

/* ---------- 首屏 ---------- */
.hero { padding: 72px 0 60px; border-bottom: 1px solid var(--grid); }

.hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 60px; align-items: start; }

.hero h1 { font-size: 40px; line-height: 1.30; max-width: 13em; letter-spacing: -0.01em; }

.hero .lede {
  margin-top: 24px;
  font-size: 16.5px;
  line-height: 1.95;
  color: var(--ink-2);
  max-width: 37em; /* 中文行长控制在 37 字以内 */
}

.hero-act { margin-top: 32px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 13px 30px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 0;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
  cursor: pointer;
}
.btn-solid { background: var(--ink); color: #fff; }
.btn-solid:hover { background: #000; text-decoration: none; transform: translateY(-1px); }
.btn-line { border: 1px solid var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: #fff; text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* 图签栏：替代「大数字 + 小标签」统计块 */
.factbar {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--grid);
  background: var(--surface);
}
.fact { padding: 18px 20px 16px; border-left: 1px solid var(--grid); transition: background var(--duration-fast) var(--ease-out); }
.fact:first-child { border-left: none; padding-left: 0; }
.fact:hover { background: var(--paper); }
.fact b {
  display: block;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
}
.fact span { display: block; font-size: 12px; color: var(--mute); line-height: 1.6; margin-top: 4px; }
.fact.is-seal b { color: var(--seal); }

/* 首屏信任条：补一条社会证明，但不挤占数据栏的四格 */
.trust-line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mute);
}
.trust-line b { font-weight: 500; color: var(--ink-2); }
.trust-line .mark { width: 6px; height: 6px; }

.hero-fig { margin: 0; }
.hero-fig figcaption {
  margin-top: 13px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mute);
}

/* 比较法测算片段：用行业真实的产出物代替绘制图形 */
.calc {
  border: 1px solid var(--grid);
  background: var(--paper);
  box-shadow: 0 1px 3px var(--hover-bg), 0 4px 12px var(--hover-bg);
  transition: box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.calc:hover { box-shadow: 0 2px 6px var(--pressed-bg), 0 8px 24px var(--hover-bg); }

.calc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--grid);
  font-size: 15px;
  line-height: 1.5;
}
.calc-head span:last-child { font-size: 12px; color: var(--mute); }

.calc-t { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13.5px; }
.calc-t caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.calc-t th,
.calc-t td {
  padding: 7px 13px;
  text-align: right;
  font-weight: 400;
  border-bottom: 1px solid var(--grid-2);
}
.calc-t thead th {
  background: var(--band);
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid var(--grid);
}
.calc-t thead th:first-child { text-align: left; border-right: 1px solid var(--grid); }
.calc-t tbody th {
  text-align: left;
  color: var(--mute);
  border-right: 1px solid var(--grid-2);
}
.calc-t tbody td { color: var(--ink-2); }
.calc-t tbody tr:nth-child(even) td { background: var(--surface); }
.calc-t tbody tr:last-child th,
.calc-t tbody tr:last-child td { border-bottom: none; }

/* 结论行：朱印红只出现在这里与签章位上 */
/* 表格下方的口径说明：删掉「待估对象」列后，用一句话交代 100 基准与权重合计 */
.calc-note {
  padding: 9px 16px 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--mute);
}

.calc-out {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px;
  border-top: 2px solid var(--ink);
}
.calc-out .k { font-size: 12px; line-height: 1.6; color: var(--mute); }
.calc-out .v {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--seal);
}
.calc-out .m { font-size: 12px; line-height: 1.6; color: var(--mute); }
.sealbox {
  flex: none;
  width: 58px;
  height: 58px;
  border: 1.5px solid var(--seal);
  color: var(--seal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  transition: background var(--duration-fast) var(--ease-out);
}
.calc:hover .sealbox { background: var(--hover-bg); }

/* ---------- 收费标准：依据文号 / 费率表与算例并置 ---------- */
/* 文号挂在分组标题右端，窄屏折到第二行 */
.fee-cite {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--mute);
  text-align: right;
}

/* 费率表与算例并置：表占左栏因此不会拉宽到行宽失控，
   算例升到右栏，结论数字是这一栏唯一的重音 */
.fee-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  padding-top: 26px;
}
.fee-tables { display: grid; gap: 22px; }
/* 调整系数表接在费率表之后，需要与上一块拉开 */
.fee-factors { margin-top: 26px; }

/* 算例栏：与测算表同族的边框语汇，结论落在朱印红 */
.fee-sum {
  border: 1px solid var(--grid);
  border-top: 2px solid var(--ink);
  padding: 16px 18px 18px;
  box-shadow: 0 1px 3px var(--hover-bg), 0 2px 8px var(--hover-bg);
}
.fee-sum .k { font-size: 12px; line-height: 1.5; color: var(--mute); }
.fee-sum .v {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--seal);
  font-variant-numeric: tabular-nums;
}
/* 提示：无圆角、单边细线，保持与测算表同族 */
.fee-sum .f {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--grid-2);
  font-size: 12px;
  line-height: 1.8;
  color: var(--mute);
  overflow-wrap: anywhere;
}

/* 输入行：数字用宋体醒目，只留一条底线 */
/* 输入(20)刻意小于结论(26)，让「填的值」服从「算出来的结果」 */
.fee-input {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.fee-input > span { flex: none; font-size: 13.5px; color: var(--mute); }
.fee-input input,
.fee-input select {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: none;
  background: transparent;
  padding: 2px 0 4px;
  color: var(--ink);
}
.fee-input select { font-family: var(--sans); font-size: 15px; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.fee-input input {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.fee-input input::-webkit-outer-spin-button,
.fee-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* 聚焦反馈落在整行底线上：input/select 自身 border 已置 none，
   在其上设 border-bottom-color 不会渲染，故用 :focus-within */
.fee-input:focus-within { border-bottom-color: var(--seal); }
.fee-input:focus-within::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--seal);
  opacity: 0.3;
  filter: blur(4px);
}
.fee-input > em { flex: none; font-style: normal; font-size: 13.5px; color: var(--mute); }

/* 逐档明细：档位与金额分列，行线用细格线 */
.fee-lines { list-style: none; margin: 14px 0 0; padding: 0; font-size: 12px; line-height: 1.7; }
.fee-lines li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--grid-2);
  color: var(--mute);
}
.fee-lines li b {
  flex: none;
  font-weight: 400;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.fee-lines li:last-child { border-bottom: none; }

/* 合计行：压一条墨线收口，数字是这一栏唯一的重音 */
.fee-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--ink);
}
/* 万元换算成元，便于小额项目核对 */
.fee-yuan { margin-top: 5px; font-size: 12px; line-height: 1.6; color: var(--mute); text-align: right; }
.fee-yuan b { font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }

@media (max-width: 1080px) {
  .fee-pair { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* 费率表列数多，窄屏收紧单元格内边距 */
@media (max-width: 820px) {
  .fee-t th, .fee-t td { padding: 6px 7px; font-size: 12px; }
  .qual-group > h2 { flex-wrap: wrap; gap: 6px 12px; }
  .fee-cite { margin-left: 0; width: 100%; text-align: left; }
}

/* 文字链接：用下划线表达「这是链接」，不加箭头 */
.more {
  display: inline-block;
  margin-top: 26px;
  font-size: 15px;
  font-weight: 500;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--survey);
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.more:hover { text-decoration: none; color: var(--seal); border-bottom-color: var(--seal); }

/* 联络收束行：不用整块色带做 CTA */
.handoff {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--grid);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 40px;
  font-size: 15px;
  color: var(--ink-2);
}
.handoff .tel { font-size: 16.5px; }

/* ---------- 区块 ---------- */
.sec { padding: 62px 0; border-bottom: 1px solid var(--grid); }
.sec:last-of-type { border-bottom: none; }
/* 首页证书图区：比常规区块多 16px 停顿，形成长页面的呼吸节奏。
   只放宽这一处，不做全站分档 —— 等距本身是「报告/文档」气质的一部分。 */
.sec--breathe { padding: 78px 0; }

.sec-head { margin-bottom: 34px; }
.sec-head h2 { font-size: 26px; }
.sec-head p {
  margin-top: 12px;
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--mute);
  max-width: 40em;
}

/* 业务条目：两列，朱印记号作标记，细线分隔 */
.biz { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; border-top: 1px solid var(--grid); }
.biz-item { display: flex; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--grid); transition: background var(--duration-fast) var(--ease-out); }
.biz-item:hover { background: var(--surface); }
.biz-item .mark { margin-top: 10px; }
/* 每个业务是「业务范围」页的一级分区，故为 h2；字号与行高沿用原来的 h3 观感 */
.biz-item h2 { font-family: var(--sans); font-size: 16.5px; font-weight: 500; line-height: 1.55; }
.biz-item p { margin-top: 5px; font-size: 15px; line-height: 1.75; color: var(--mute); }

/* 高级选项里的复选行（附属房有产权） */
.fee-check {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 0; font-size: 15px; color: var(--ink-2);
  cursor: pointer;
}
.fee-check input {
  width: 17px; height: 17px; margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}
.fee-check input:disabled { cursor: not-allowed; opacity: .4; }
.fee-check:has(input:disabled) { color: var(--mute); cursor: default; }

/* 小区联想：候选贴在输入框下方，靠边框而非阴影与页面分离 */
.fee-input.is-text { position: relative; }
.ac-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  background: var(--paper); border: 1px solid var(--ink);
  max-height: 260px; overflow-y: auto;
}
.ac-item {
  display: flex; align-items: baseline; gap: 9px;
  padding: 10px 14px; font-size: 15px; cursor: pointer;
  border-bottom: 1px solid var(--grid);
  transition: background var(--duration-fast) var(--ease-out);
}
.ac-tag {
  flex: none; font-size: 12px; line-height: 1.6; padding: 0 5px;
  color: var(--mute); border: 1px solid var(--rule);
}
.ac-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item:focus { background: var(--band); }
.ac-empty { padding: 10px 14px; font-size: 13.5px; color: var(--mute); }
@media (max-width: 760px) {
  .ac-list { max-height: 40vh; }
}

/* 首页「打电话前可以先确认的三件事」：三列、细线分隔，不用卡片与阴影 */
.vp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; border-top: 1px solid var(--grid); }
.vp-item { padding: 22px 0; border-bottom: 1px solid var(--grid); transition: background var(--duration-fast) var(--ease-out); }
.vp-item:hover { background: var(--surface); }
.vp-item h3 { font-size: 16.5px; }
.vp-item p { margin-top: 6px; font-size: 15px; line-height: 1.8; color: var(--mute); }
.vp-item .more { margin-top: 10px; font-size: 13.5px; }
@media (max-width: 760px) {
  .vp { grid-template-columns: 1fr; gap: 0; }
}

/* 沿革：内容本身是序列，用真实年份作标记是正当的 */
.tl { border-top: 1px solid var(--grid); }
.tl-row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--grid);
  transition: background var(--duration-fast) var(--ease-out);
}
.tl-row:hover { background: var(--surface); }
.tl-year {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
}
.tl-year::before { content: ""; width: 7px; height: 7px; background: var(--seal); flex: none; transform: translateY(-3px); }
.tl-row p { font-size: 15px; line-height: 1.85; color: var(--ink-2); }
.tl-row p b { font-weight: 500; color: var(--ink); }

/* 信息面板：与营业执照合用一行，填满网格 */
.info { border: 1px solid var(--grid); padding: 24px 26px; background: var(--surface); }
.info h3 { font-size: 16.5px; padding-bottom: 12px; border-bottom: 1px solid var(--grid); }
.info dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; margin: 16px 0 0; }
.info dt { font-size: 13.5px; color: var(--mute); line-height: 1.8; }
.info dd { margin: 0; font-size: 15px; line-height: 1.8; color: var(--ink); }

/* ---------- 资质证书：比例决定格子尺度 ---------- */
.qual-group { margin-top: 50px; }
.qual-group:first-of-type { margin-top: 0; }

.qual-group > h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
}
.qual-group > h2::before { content: ""; width: 8px; height: 8px; background: var(--seal); flex: none; }

.cert-grid { display: grid; gap: 30px 26px; padding-top: 26px; }
.cert-grid--4 { grid-template-columns: repeat(4, 1fr); } /* 竖版各占一列 */
.cert-grid--3 { grid-template-columns: repeat(3, 1fr); } /* 横版三连，避免落单空格 */
.cert-grid--2 { grid-template-columns: repeat(2, 1fr); } /* 横版各占一列 */

.cert { display: block; color: inherit; }
.cert:hover { text-decoration: none; }
.cert img {
  width: 100%;
  height: auto;      /* 不设固定高度，不用 object-fit —— 让证书比例决定格子高度 */
  border: 1px solid var(--grid);
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.cert:hover img { border-color: var(--rule); transform: translateY(-2px); box-shadow: 0 4px 12px var(--pressed-bg); }
.cert .cap { display: block; margin-top: 11px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.cert .cap b { display: block; font-weight: 500; color: var(--ink); }

/* 行业身份：条目列表，不是卡片墙 */
.ident {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 56px;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--grid);
}
.ident li {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--grid);
  font-size: 15px;
  line-height: 1.7;
  transition: background var(--duration-fast) var(--ease-out);
}
.ident li:hover { background: var(--surface); }
.ident li::before { content: ""; width: 7px; height: 7px; background: var(--seal); flex: none; margin-top: 10px; }

/* 备注条：无圆角、单边墨线 */
.note {
  margin-top: 20px;
  padding: 14px 0 14px 18px;
  border-left: 2px solid var(--seal);
  font-size: 15px;
  line-height: 1.75;
  color: var(--mute);
}

/* ---------- 服务网点：图例 / 点之记式排布 ---------- */
.net { border-top: 1px solid var(--grid); }
.net-row {
  display: grid;
  grid-template-columns: 176px 1fr 168px;
  gap: 28px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--grid);
  transition: background var(--duration-fast) var(--ease-out);
}
.net-row:hover { background: var(--surface); }
.net-name { display: flex; align-items: center; gap: 11px; font-size: 16.5px; font-weight: 500; }
.net-name::before { content: ""; width: 7px; height: 7px; background: var(--seal); flex: none; }
.net-row address { font-style: normal; font-size: 15px; line-height: 1.75; color: var(--mute); }
.net-tel { text-align: right; font-size: 15px; }
.net-tel a { color: var(--survey); }

/* ---------- 内页标题区 ---------- */
.page-head { padding: 52px 0 40px; border-bottom: 1px solid var(--grid); }
.page-head h1 { font-size: 33px; line-height: 1.35; }
.page-head p {
  margin-top: 16px;
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--mute);
  max-width: 40em;
}
/* 页头里的主行动按钮（目前只有 404 页用：给一个明确的回首页出口） */
.page-head .btn { margin-top: 28px; }

/* 收费页首屏：标题占整行，试算与对应费率表在下方并排。
   两者必须同屏相邻 —— 算完看不到依据，才是真正的割裂。 */
.page-head-tools {
  display: grid;
  grid-template-columns: 404px minmax(0, 1fr);
  gap: 32px;
  margin-top: 34px;
  align-items: start;
}
/* 费率表与试算器统一为「细框 + 双线顶」，只去掉投影 */
.page-head-tools .calc {
  border-top: 3px double var(--ink);
  box-shadow: none;
}
@media (max-width: 1080px) {
  /* 单列时别拉满整行：试算器一拉宽，「评估值」和「5000」之间会空出半屏 */
  .page-head-tools { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 26px; max-width: 620px; }
}

/* ---------- 正文块 ---------- */
.prose { max-width: 42em; }
.prose p { margin-bottom: 16px; font-size: 16.5px; line-height: 1.95; color: var(--ink-2); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 500; color: var(--ink); }

.dl-list { border-top: 1px solid var(--grid); margin: 0; }
.dl-list > div {
  display: grid;
  grid-template-columns: 188px 1fr;
  gap: 28px;
  padding: 15px 0;
  border-bottom: 1px solid var(--grid);
  transition: background var(--duration-fast) var(--ease-out);
}
.dl-list > div:hover { background: var(--surface); }
.dl-list dt { font-size: 15px; color: var(--mute); }
.dl-list dd { margin: 0; font-size: 15px; line-height: 1.8; color: var(--ink); }

/* ---------- 页脚：白底 + 墨线图签栏 ---------- */
.site-footer { border-top: 2px solid var(--ink); margin-top: 0; }

.foot-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: 48px;
  padding: 44px 0 38px;
}
.foot-brand img { height: 34px; width: auto; margin-bottom: 16px; }
.foot-brand p { font-size: 15px; line-height: 1.9; color: var(--mute); }
/* 页脚栏目标题用 h2：页脚是独立区域，h4 会造成页面 h2 -> h4 跳级 */
.foot h2 { font-family: var(--sans); font-size: 13.5px; font-weight: 500; line-height: 1.5; margin: 0 0 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 6px; font-size: 15px; line-height: 1.7; color: var(--mute); }
/* 页脚与网点电话是单独成行的链接，不是句子里的行内链接：
   点击高度须达 24px（WCAG 2.2 SC 2.5.8 AA）。上下各 2px 内边距，li 外边距相应收到 6px 以保持节奏不变。 */
.foot a, .net-tel a { display: inline-block; padding: 2px 0; transition: color var(--duration-fast) var(--ease-out); }
.foot a { color: var(--ink-2); }
.foot a:hover { color: var(--seal); }

/* 元信息用间距分隔，不用中点串 */
.foot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 30px;
  padding: 16px 0 20px;
  border-top: 1px solid var(--grid);
  font-size: 12px;
  line-height: 1.7;
  color: var(--mute);
}

/* 备案号按规范链到工信部备案系统。12px 字在 1.7 行高下约 20px，
   加 2px 上下内边距把点击目标撑到 24px（WCAG 2.2 SC 2.5.8）。
   极次要信息：只加下划线表意可点击，颜色仍用 --mute，hover 才转深。 */
.foot-meta a {
  display: inline-block;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease-out);
}
.foot-meta a:hover { color: var(--ink); }

/* ---------- 服务流程：内容本身是一条序列，用序号作标记是正当的 ---------- */
.steps { border-top: 1px solid var(--grid); }
.step {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--grid);
  transition: background var(--duration-fast) var(--ease-out);
}
.step:hover { background: var(--surface); }
/* 序号用宋体，与沿革的年份同族；不落朱印红，避免全页重音过多 */
.step-n { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.6; }
.step h3 { font-size: 16.5px; }
.step p { margin-top: 6px; font-size: 15px; line-height: 1.8; color: var(--mute); }

/* ---------- 常见问题：问答成对，问句用朱印记号起头 ---------- */
.qa-list { border-top: 1px solid var(--grid); }
.qa { padding: 20px 0; border-bottom: 1px solid var(--grid); transition: background var(--duration-fast) var(--ease-out); }
.qa:hover { background: var(--surface); }
.qa h3 { display: flex; gap: 12px; font-size: 16.5px; }
.qa h3::before { content: ""; width: 7px; height: 7px; background: var(--seal); flex: none; margin-top: 9px; }
.qa p { margin-top: 8px; padding-left: 19px; font-size: 15px; line-height: 1.85; color: var(--ink-2); }

/* ---------- 资料下载：一行一份文件，动作固定在右侧 ---------- */
.file-list { border-top: 1px solid var(--grid); }
.file-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--grid);
  transition: background var(--duration-fast) var(--ease-out);
}
.file-row:hover { background: var(--surface); }
.file-row h3 { font-size: 16.5px; }
.file-row p { margin-top: 6px; max-width: 40em; font-size: 15px; line-height: 1.8; color: var(--mute); }
.file-meta { display: block; margin-top: 9px; font-size: 12px; line-height: 1.7; color: var(--mute); font-variant-numeric: tabular-nums; }
.file-act { flex: none; }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero h1 { font-size: 33px; }
  .cert-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .cert-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* 页头按实测需要宽度分三档容纳：
   9 项导航全名品牌需要约 1156px、短名品牌约 966px，
   故在 1220px 与 1020px 两处切换形态，避免菜单文字被挤到折行。
   增删导航项后必须用 _probe/measure_nav.mjs 重新实测这四个数，不要沿用旧注释。 */
@media (max-width: 1219px) {
  /* 全名放不下，改挂两行副标题（logo 已含「城乡评估」，不再重复品牌名） */
  .head-in { gap: 12px; }
  .brand { gap: 10px; }
  .brand img { height: 32px; }
  .brand-name .brand-full { display: none; }
  .brand-name small { display: none; }
  .brand-name .brand-sub {
    display: block;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.42;
    color: var(--ink-2);
  }
}

@media (max-width: 1019px) {
  .nav-toggle { display: block; }

  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding: 4px 24px 12px; }
  .site-nav li { border-bottom: 1px solid var(--grid); }
  .site-nav li:last-child { border-bottom: none; }
  .site-nav a { display: block; padding: 13px 0; border-bottom: none; }
  .site-nav a:hover { border-bottom: none; }
  .site-nav a[aria-current="page"] { color: var(--seal); }
}

@media (max-width: 820px) {
  .hero { padding: 44px 0 40px; }
  .hero h1 { font-size: 26px; }
  .hero .lede { font-size: 15px; }
  .hero-act { gap: 18px; }
  .btn { padding: 12px 24px; }

  .factbar { grid-template-columns: repeat(2, 1fr); }
  .fact { padding: 14px 16px 12px; }
  .fact:nth-child(odd) { border-left: none; padding-left: 0; }
  .fact b { font-size: 20px; }

  .calc-head { padding: 11px 12px; font-size: 13.5px; flex-wrap: wrap; gap: 4px 16px; }
  .calc-t { font-size: 12px; }
  .calc-t th, .calc-t td { padding: 6px 7px; }
  .calc-out { padding: 13px 12px; gap: 14px; }
  .calc-out .v { font-size: 20px; }
  .sealbox { width: 48px; height: 48px; font-size: 12px; }

  .sec { padding: 48px 0; }
  .sec-head h2 { font-size: 20px; }

  .biz, .ident { grid-template-columns: 1fr; gap: 0; }
  .tl-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .tl-year { font-size: 16.5px; }

  .cert-grid--2 { grid-template-columns: 1fr; }
  .cert-grid--3 { grid-template-columns: 1fr; }

  .net-row { grid-template-columns: 1fr; gap: 3px; }
  .net-tel { text-align: left; }

  .page-head { padding: 40px 0 30px; }
  .page-head h1 { font-size: 26px; }

  .dl-list > div { grid-template-columns: 1fr; gap: 4px; }

  .step { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }

  .file-row { grid-template-columns: 1fr; gap: 14px; }

  .foot-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 360px) {
  /* 320–360px 的老机器：缩小 logo，保证副标题第二行不折 */
  .brand { gap: 8px; }
  .brand img { height: 26px; }
  .brand-name .brand-sub { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
 * 收费页首屏 · 质感精修（v57）
 *
 * 方向：不引入装饰图形、不加新色，只把三件事做到位 ——
 * 线的精度（双线、格线）、字的比例（字号分级、字距）、
 * 数字的对位（等宽数码、右端对齐）。证书与报告这类印刷物的质感，
 * 来自规矩与比例，不来自阴影和渐变。
 * 新规则一律用令牌取色，深色模式自动跟随。
 * ═══════════════════════════════════════════════════════════════ */

/* ---------- 1. 工具区顶线改双线 ---------- */
/* 3px double = 两条 1px 墨线夹一道空隙，是公文与报告表格的分隔法；
   比 2px 实线更轻，层次却更清楚。 */
.page-head-tools .fee-sum {
  border-top: 3px double var(--ink);
  padding-top: 16px;
}

/* ---------- 3. 试算标题：朱印方点起头 ---------- *//* 与 .qual-group > h2 的方点同族，维持「方点 = 条目起点」的全站语法 */
.fee-sum > .k:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.04em;
}
.fee-sum > .k:first-child::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--seal);
  transform: translateY(-0.5px);
}

/* ---------- 4. 输入行：一条可以聚焦的底线 ---------- */
/* 悬停时底线加深、聚焦时转朱印，输入框才有「可写」的暗示 */
.fee-input { transition: border-color var(--duration-fast) var(--ease-out); }
.fee-input:hover { border-bottom-color: var(--ink-3); }
.fee-input input { caret-color: var(--seal); letter-spacing: -0.01em; }

/* ---------- 5. 逐档明细：只强调边际档位 ---------- */
/* 差额定率累进里，最后一行是「剩下的那部分按新费率算」，
   它决定这次试算的边际成本，比前面几行重半档即可，不必行行加粗。 */
.fee-lines { font-size: 12.5px; }
.page-head-tools .fee-lines li { padding: 6px 13px; }
.fee-lines li:last-child { color: var(--ink-2); }
.fee-lines li:last-child b { color: var(--ink); font-weight: 500; }

/* ---------- 5b. 面板内的一切走同一条 13px 版心 ---------- */
/* 费率表的单元格是 13px 内边距，试算面板原本贴边 —— 于是同一栏里
   「100 万元以下」出现两个左边缘、两串数字出现两个右边缘。
   统一到 13px：竖线仍然通栏（边线在外），字也都落在同一条竖线上。 */
.page-head-tools .fee-sum > .k:first-child,
.page-head-tools .fee-input,
.page-head-tools .fee-total,
.page-head-tools .fee-yuan { padding-left: 13px; padding-right: 13px; }
/* 窄屏表格单元格收到 7px，面板也必须跟着收，否则同一栏里又出现两个左边缘 */
@media (max-width: 820px) {
  .page-head-tools .fee-sum > .k:first-child,
  .page-head-tools .fee-input,
  .page-head-tools .fee-total,
  .page-head-tools .fee-yuan,
  .page-head-tools .fee-lines li { padding-left: 7px; padding-right: 7px; }
}

/* ---------- 6. 合计：数字与单位分级 ---------- */
/* 数字 28px、单位 13.5px 无衬线 —— 同一行两个字号，读起来才是「4.35 万元」，
   而不是「4.35万元」四个等大的字。 */
.page-head-tools .fee-total { border-top: 2px solid var(--ink); padding-top: 14px; }
.fee-sum .v { font-size: 28px; letter-spacing: -0.01em; }
.fee-sum .v .u {
  margin-left: 1px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--mute);
}

/* ---------- 7. 费率表：表头字距 + 整行斑马 ---------- */
.calc-t { font-variant-numeric: tabular-nums; }
.calc-t thead th {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
}
/* 表头竖线与表体同粗细：原来表头用 --grid、表体用 --grid-2，
   同一条竖线上下两截深浅不一，会显脏 */
.calc-t thead th:first-child { border-right: 1px solid var(--grid-2); }
/* 斑马纹落到整行：原来只给 td 上色，行首 th 那格是白的，行会「缺一角」 */
.calc-t tbody tr:nth-child(even) { background: var(--surface); }
.calc-t tbody tr:nth-child(even) td { background: transparent; }
/* 两列表格把数值列收到 34%：标签与数字靠得近一些，
   才像报告里的费率表，而不是拉开半屏的电子表格。
   :nth-last-child(2) 限定「恰好两列」，否则矿业权那张五列表也会被拉歪。 */
.fee-t thead th:first-child:nth-last-child(2) { width: 66%; }

/* ---------- 9. 标题字距 ---------- */
/* 宋体在大字号下字面偏紧，加 0.015em 让四个字的呼吸均匀些 */
.page-head h1 { letter-spacing: 0.015em; }

/* ---------- 10. 分组标题与文号对基线 ---------- */
/* 20px 标题与 12px 文号原来靠 flex 居中，文号的基线会比标题高约 4px；
   改对基线后，两种字号落在同一条线上，才是排字而不是「摆框」。
   方点是空盒子，基线就是它的下边缘，必须单独居中，否则会掉到基线下面。 */
.qual-group > h2 { align-items: baseline; }
.qual-group > h2::before { align-self: center; }

/* ---------- 11. 中段试算面板：换成同一套材质 ---------- */
/* 原来带投影，像浮在纸上的一张卡；首屏工具区却是无边框的文档栏。
   同一页两种材质并列就是割裂 —— 统一成「细框 + 双线顶」的表格语汇，
   阴影去掉，深度改由线宽承担。 */
.fee-sum {
  border: 1px solid var(--grid);
  border-top: 3px double var(--ink);
  box-shadow: none;
  padding: 16px 18px;
}

/* ---------- 12. 计价方式下拉：补一个下拉标记 ---------- */
/* appearance:none 之后原生箭头没了，控件看着像一句纯文字，没人会想到去点它。
   用两个渐变画一对斜边，颜色取令牌，深色模式自动跟随。 */
.fee-input select {
  padding-right: 18px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-position: right 5px top calc(50% + 2px), right 0 top calc(50% + 2px);
  background-repeat: no-repeat;
}

/* ---------- 打印：A4 宽度会落进汉堡断点，必须显式藏掉导航与按钮 ---------- */
@media print {
  .skip, .nav-toggle, .site-nav, .hero-act, .handoff, .more, .file-act { display: none !important; }
  body { font-size: 11pt; line-height: 1.6; }
  .hero { padding: 0 0 14pt; }
  .page-head { padding: 0 0 10pt; }
  .sec { padding: 14pt 0; }
  .sec:last-of-type { border-bottom: none; }
  a { color: inherit; }
  /* 不让一个条目被切断在两页之间 */
  .step, .qa, .dl-list > div, .file-row, .tl-row, .biz-item, .cert, .factbar, .info, .note { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
 * 深色模式 · Dark Mode
 *
 * 策略：反转明暗关系，保持色相不变。
 * - 背景从白转深灰（非纯黑，减少眼睛疲劳）
 * - 文字从黑转白/浅灰
 * - 品牌红/签署蓝/成功绿 保持色相，亮度微调以适配深底
 * - 线条从灰变半透明白
 * - 阴影改用更深的底色 + 微妙边框表达层次
 * ═══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    /* --- 承载面（暗阶） --- */
    --paper:   #121418;    /* 主背景：深墨 */
    --surface: #1a1d23;    /* 抬升面 */
    --band:    #22262e;    /* 表头底 */
    --canvas:  #2a2f38;    /* 画布底 */

    /* --- 线条（暗阶用半透明白） --- */
    --grid-2:  rgba(255,255,255,0.06);  /* 细格线 */
    --grid:    rgba(255,255,255,0.10);  /* 分格线 */
    --rule:    rgba(255,255,255,0.16);  /* 框线 */

    /* --- 文字灰阶（亮阶） --- */
    --ink:     #eaecef;    /* 主文字 */
    --ink-2:   #c5c9d0;    /* 二级文字 */
    --mute:    #8b9199;    /* 次要文字（原浅色 mute 在深底上对比度足够） */
    --ink-3:   #6b7078;    /* 最淡文字 */

    /* --- 品牌与功能色（亮度微调） --- */
    --seal:        #d43d34;  /* 朱印红：提亮以在深底上醒目 */
    --danger:      #c92e28;  /* 危险红：比 seal 更暖更烈 */
    --danger-soft: rgba(201,46,40,0.15);  /* 危险边框：半透明红 */
    --success:     #10a078;  /* 成功绿：提亮 */
    --survey:      #3d8bd6;  /* 签署蓝：提亮 */

    /* --- 交互态（暗阶适配） --- */
    --focus-ring: rgba(212, 61, 52, 0.40);
    --hover-bg:   rgba(255,255,255,0.04);
    --pressed-bg: rgba(255,255,255,0.08);
  }

  /* 页头：深底 + 底线 */
  .site-header {
    background: rgba(18, 20, 24, 0.92);
    border-bottom-color: var(--grid);
  }

  /* 按钮：反色 */
  .btn-solid { background: var(--ink); color: var(--paper); }
  .btn-solid:hover { background: #fff; color: var(--ink); }
  .btn-line { border-color: var(--ink-2); color: var(--ink-2); }
  .btn-line:hover { background: var(--ink-2); color: var(--paper); }

  /* 输入框：底线用 rule 色 */
  .fee-input { border-bottom-color: var(--rule); }

  /* 表格：表头用 band */
  .calc-t thead th { background: var(--band); color: var(--ink); }

  /* 阴影在深色模式下改用边框 + 底色 */
  .calc, .sheet, .auth-card, .fee-sum {
    box-shadow: none;
    border-color: var(--rule);
  }
  .calc:hover, .cert:hover img {
    box-shadow: none;
    border-color: var(--ink-2);
  }

  /* 证书图片：加 1px 白色描边防融合 */
  .cert img { outline: 1px solid var(--grid); }

  /* factbar / 列表行 hover */
  .factbar { background: var(--surface); border-top-color: var(--ink); border-bottom-color: var(--grid); }
  .fact:hover, .biz-item:hover, .vp-item:hover, .tl-row:hover,
  .net-row:hover, .qa:hover, .file-row:hover, .step:hover,
  .dl-list > div:hover, .ident li:hover, .ac-item:hover { background: var(--band); }

  /* 链接：survey 色在深底上已够亮，hover 提亮 */
  a { color: var(--survey); }
  a:hover { color: var(--seal); }

  /* 导航当前页：seal 色 */
  .site-nav a[aria-current="page"] { color: var(--seal); }

  /* 备注/警告条：背景加深 */
  .note { border-left-color: var(--seal); }
  .sheet-warn { border-color: var(--danger); color: var(--danger); }

  /* 登录卡 / who 条 */
  .auth-card { border-color: var(--grid); border-top-color: var(--ink); }
  .who { background: var(--band); border-color: var(--grid); border-left-color: var(--survey); }

  /* 下拉列表 */
  .ac-list { background: var(--surface); border-color: var(--ink); }
  .ac-item { border-bottom-color: var(--grid); }
  .ac-item:hover { background: var(--band); }

  /* 风险评级 */
  .risk { border-color: var(--grid); }
  .risk-bars .bar { background: var(--band); border-color: var(--grid); }
  .risk-bars .bar-fill { background: var(--ink-2); }

  /* 页脚 */
  .site-footer { border-top-color: var(--ink); }
  .foot-meta { border-top-color: var(--grid); }

  /* 打印时强制回浅色（避免墨水浪费+可读性） */
  @media print {
    :root {
      --paper: #ffffff; --surface: #f6f7f8; --band: #f0f1f3;
      --ink: #121418; --ink-2: #373c45; --mute: #5d6470;
      --grid: #d1d5db; --rule: #b0b7c1;
    }
  }
}

/* ---------- 在线询价：表单、询价单 ---------- */

/* fee-input 的数值样式（宋体 20px 右对齐）只适合金额。
   小区名、地址、称呼、电话这些是文本，要回黑体左对齐，否则右对齐像填了个数字。 */
.fee-input.is-text input {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  text-align: left;
}

.inq-act {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
/* .inq-act 自带 display:flex，会盖掉 [hidden] 的 UA 默认 display:none，
   导致「生成前就显示按钮」。用属性选择器提权，不必上 !important。 */
.inq-act[hidden], .sheet[hidden] { display: none; }
/* 询价单整节在生成前也要收起：只藏单据本身会留下一个空标题加一大段空白，看着像页面坏了。
   .sec 本身没有 display 声明，但仍然显式写一条，免得将来给 .sec 加 display 时静默失效。 */
.sec[hidden] { display: none; }

.sheet {
  margin-top: 26px;
  padding: 30px 32px 26px;
  border: 1px solid var(--rule);
  background: var(--paper);
  box-shadow: 0 1px 3px var(--hover-bg), 0 2px 8px var(--hover-bg);
}
.sheet-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ink);
}
.sheet-co { font-size: 13.5px; color: var(--mute); }
.sheet-head h3 { font-family: var(--sans); font-size: 20px; margin-top: 4px; }
.sheet-meta { text-align: right; }
.sheet-meta p { font-size: 13.5px; color: var(--mute); }
.sheet-meta b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.sheet .calc-t { margin-top: 18px; }
.sheet .note { margin-top: 18px; font-size: 13.5px; }
.sheet-foot {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--grid);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  font-size: 13.5px;
  color: var(--mute);
}

@media (max-width: 820px) {
  .sheet { padding: 20px 18px 18px; }
  .sheet-meta { text-align: left; }
}

@media print {
  /* 打印询价单时只留单据本身：其余区块（页头、页脚、页标题、表单、按钮）全部藏掉，
     否则一张 A4 上会先印出导航和整页表单。用完 JS 会把这个类移除。 */
  body.print-sheet .site-header,
  body.print-sheet .site-footer,
  body.print-sheet .page-head,
  body.print-sheet .inq-act,
  body.print-sheet main > section:not(.sheet-sec) { display: none !important; }
  /* 单据上方那节标题与说明是给屏幕看的（里面有「点『打印 / 另存为 PDF』」这类界面文案），
     打印出来的单子是要交给银行或带到网点的，不该带着这些话。 */
  body.print-sheet .sheet-sec .sec-head { display: none !important; }
  body.print-sheet .sheet { border: 0; padding: 0; margin: 0; }
  body.print-sheet .sheet-sec { padding: 0; border-top: 0; }
  /* 打询价单时把快照也藏掉，避免一次打两张 */
  body.print-sheet #snapSection { display: none !important; }

  /* 打快照时反过来：只留快照 */
  body.print-snap .site-header,
  body.print-snap .site-footer,
  body.print-snap .page-head,
  body.print-snap .inq-act,
  body.print-snap main > section:not(.sheet-sec),
  body.print-snap #sheetSection { display: none !important; }
  body.print-snap .sheet-sec .sec-head { display: none !important; }
  body.print-snap .sheet { border: 0; padding: 0; margin: 0; }
  body.print-snap .sheet-sec { padding: 0; border-top: 0; }

  .sheet { break-inside: avoid; }
}

/* 四列登记表（询价结果快照）：表头列窄、内容列宽，长文本可换行 */
.snap-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.snap-t th, .snap-t td { border: 1px solid var(--rule); padding: 7px 10px; vertical-align: top; text-align: left; }
.snap-t th { width: 15%; background: var(--band); font-weight: 500; white-space: nowrap; color: var(--ink2); }
.snap-t td { width: 35%; }
.snap-t tbody tr:nth-child(even) td { background: var(--surface); }

/* 单据条款（5 条说明）：小字，编号成列，不抢正文 */
.sheet-terms { margin-top: 16px; font-size: 12px; line-height: 1.7; color: var(--ink2); }
.sheet-terms-h { font-weight: 500; margin: 0 0 5px; color: var(--ink); }
.sheet-terms ol { margin: 0; padding-left: 1.5em; }
.sheet-terms li { margin: 3px 0; }
.sheet-terms b { font-weight: 500; color: var(--ink); }

/* 小区风险评级：总评级 + 四个因素条形 */
.risk { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--grid); }
.risk-h { margin: 0 0 10px; font-size: 13.5px; color: var(--mute); }
.risk-body { display: flex; gap: 22px; align-items: flex-start; }
.risk-level { flex: none; display: flex; flex-direction: column; gap: 1px; min-width: 76px; }
.risk-level span { font-size: 12px; color: var(--mute); }
.risk-level b { font: 500 28px/1.15 var(--serif); }
.risk-level em { font-style: normal; font-size: 12px; color: var(--mute); }
.risk-bars { flex: 1; margin: 0; padding: 0; list-style: none; }
.risk-bars li {
  display: grid; grid-template-columns: 7.6em 1fr 3.2em;
  gap: 10px; align-items: center; margin: 7px 0; font-size: 12px;
}
.risk-bars .bar { display: block; height: 11px; background: var(--band); border: 1px solid var(--grid); }
.risk-bars .bar-fill { display: block; height: 100%; background: var(--ink-2); }
.risk-bars b { font-weight: 500; text-align: right; color: var(--ink); }
.risk-note { margin: 10px 0 0; font-size: 12px; color: var(--mute); }
@media (max-width: 760px) {
  .risk-body { flex-direction: column; gap: 10px; }
  .risk-bars li { grid-template-columns: 6.4em 1fr 3em; gap: 8px; }
}

/* 快照在手机上改为「标签 | 值」堆叠。
   四列（15%/35%/15%/35%）在 375px 宽下每列只剩约 90px，
   「贷款申请人」这类 5 字标签加上 nowrap 会直接溢出，表现为表格变形。
   这里用 @media screen 限定，打印与打印预览仍走四列表格。 */
@media screen and (max-width: 760px) {
  .snap-t, .snap-t tbody { display: block; }
  .snap-t tr {
    display: grid;
    grid-template-columns: 6.8em 1fr;
    gap: 2px 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--grid);
  }
  .snap-t tr:last-child { border-bottom: none; }
  .snap-t th, .snap-t td {
    display: block; width: auto; border: 0; padding: 0; background: none;
  }
  .snap-t th { white-space: normal; font-size: 12px; line-height: 1.6; }
  .snap-t td { font-size: 13.5px; line-height: 1.6; padding-bottom: 5px; word-break: break-word; }
  .snap-t td[colspan] { grid-column: 2 / -1; }
}

/* 单据上的定位警告条：必须打印可见，不能被 @media print 隐掉 */
.sheet-warn {
  margin: 12px 0 0; padding: 7px 12px;
  border: 1px solid var(--danger); color: var(--danger);
  font-size: 12px; letter-spacing: .04em; text-align: center;
}

/* 「未计入价格」注记：跟在被排除在价格之外的项目后面 */
.no-calc {
  margin-left: 6px; padding: 0 5px;
  font-style: normal; font-size: 12px; color: var(--mute);
  border: 1px solid var(--grid);
}

/* 费用统计（仅管理员）：账期条、分组表、可编辑规则表、审计列表 */
.bill-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; font-size: 13.5px; }
.bill-pick { display: inline-flex; align-items: center; gap: 7px; color: var(--ink2); }
.bill-pick select { padding: 6px 10px; font-size: 13.5px; border: 1px solid var(--rule); background: var(--paper); }
.bill-msg { font-size: 13.5px; color: var(--mute); }
.bill-msg.is-ok { color: var(--success); }
.bill-msg.is-bad { color: var(--danger); }

.bill-h3 { font: 500 18px/1.4 var(--serif); margin: 0 0 4px; }

/* 同一区块内的二级分组间距。原先散落为内联 style="margin-top:34px"，
   34px 不是栅格倍数；统一收敛到 32px（4×8）。 */
.sec-head.is-sub { margin-top: 32px; }

.bill-sum { margin-top: 4px; }
.bill-group { margin-bottom: 22px; }
.bill-gt {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rule);
  font-size: 13.5px; font-weight: 500;
}
.bill-gt span { font-weight: 400; color: var(--ink2); }

.bill-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bill-t th, .bill-t td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--grid); text-align: left; vertical-align: top; }
.bill-t th { color: var(--mute); font-weight: 500; border-bottom-color: var(--rule); }
.bill-t tbody tr:nth-child(even) td { background: var(--surface); }
.bill-t td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bill-t td em { display: block; font-style: normal; font-size: 12px; color: var(--mute); }

.bill-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 8px; padding-top: 12px; border-top: 2px solid var(--ink);
  font-size: 15px;
}
.bill-total b { font: 500 22px/1.2 var(--serif); }

.bill-note { margin: 10px 0 0; font-size: 13.5px; color: var(--mute); }

/* 规则编辑表 */
.bill-edit input[type="number"], .bill-edit select, .bill-edit input[type="text"] {
  width: 100%; min-width: 5.5em; padding: 5px 7px; font-size: 13.5px;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
}
.bill-edit input[type="number"] { text-align: right; }
.bill-edit .bill-act { display: flex; gap: 6px; white-space: nowrap; }
.bill-edit button {
  padding: 4px 10px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.bill-edit button:hover { border-color: var(--ink); }
.bill-edit button.is-del { color: var(--danger); border-color: var(--danger-soft); }
.bill-edit tr.is-new td { border-bottom: 2px solid var(--rule); }

.bill-audit .bill-t td:last-child { color: var(--ink2); word-break: break-word; }

@media (max-width: 760px) {
  .bill-bar { gap: 10px; }
  .bill-t, .bill-t tbody, .bill-t tr, .bill-t th, .bill-t td { display: block; }
  .bill-t thead { display: none; }
  .bill-t tr { padding: 9px 0; border-bottom: 1px solid var(--grid); }
  .bill-t td { border: 0; padding: 2px 0; }
  .bill-t td.n { text-align: left; }
  .bill-edit td { padding: 5px 0; }
  .bill-edit input, .bill-edit select { max-width: 100%; }
}

/* 补充信息里「其它说明」占满两列 */
.adv-body .adv-wide { grid-column: 1 / -1; }

/* ---------- 在线询价：登录卡、账号条、高级选项 ---------- */

/* 登录页双栏：左登录卡，右侧承载「账号开通 / 密码与记录 / 网点电话」。
   桌面把原来的空白变成信任线索；窄屏回落单列，登录卡仍排在说明之前。 */
.login-grid {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.login-aside { border-left: 1px solid var(--grid); padding-left: 44px; }
.login-aside h3 { font-size: 15px; font-weight: 500; }
.login-aside p { margin-top: 6px; font-size: 15px; line-height: 1.8; color: var(--mute); }
.login-note + .login-note { margin-top: 24px; }
.login-contact { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--grid); }
.login-contact .k { margin-top: 0; font-size: 12px; color: var(--mute); }
.login-contact p { margin-top: 4px; color: var(--ink-2); }
.login-contact a { font-family: var(--serif); font-size: 18px; }
.login-contact .m { font-size: 12px; color: var(--mute); }

@media (max-width: 1080px) {
  .login-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .login-aside { border-left: 0; border-top: 1px solid var(--grid); padding-left: 0; padding-top: 22px; }
}

/* 登录卡：与 fee-sum 同族的边框语汇，上边压深一档表示这是一个可操作的区块 */
.auth-card {
  max-width: 460px;
  padding: 26px 28px 24px;
  border: 1px solid var(--grid);
  border-top: 2px solid var(--ink);
  box-shadow: 0 1px 3px var(--hover-bg), 0 2px 8px var(--hover-bg);
}
.auth-card .fee-input:first-of-type { margin-top: 0; }
.auth-card .inq-act { margin-top: 20px; }

/* 账号条：登录后显示当前身份。朱蓝左边线沿用 .note 的语汇，避免另造一种标记 */
.who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  padding: 14px 18px;
  border: 1px solid var(--grid);
  border-left: 2px solid var(--survey);
  background: var(--band);
  font-size: 13.5px;
  color: var(--mute);
}
.who b { font-weight: 500; color: var(--ink); }
.who .who-act { margin-left: auto; }
.who .who-act button {
  font: inherit;
  color: var(--survey);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--survey);
  padding: 2px 0;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.who .who-act button:hover { color: var(--seal); border-bottom-color: var(--seal); }

/* 高级选项：用原生 details，键盘与读屏都能直接用，不需要额外 JS */
.adv { margin-top: 20px; border-top: 1px solid var(--grid); }
.adv > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  list-style: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.adv > summary:hover { color: var(--ink-2); }
.adv > summary::-webkit-details-marker { display: none; }
/* 用 ASCII 的 + / - 做展开指示：中文内容不能写在 CSS content 里 ——
   字体子集是从页面文本收集的，CSS 里的中文不会被收进去，会回退系统字体。 */
.adv > summary::after {
  content: "+";
  margin-left: auto;
  font-weight: 400;
  color: var(--mute);
}
.adv[open] > summary::after { content: "-"; }
.adv > .adv-body { padding-bottom: 4px; }

/* 台账行：复核用，只读展示，不做成可点的行 */
.rec-meta { font-size: 13.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.rec-doc { font-variant-numeric: tabular-nums; color: var(--ink); }
.rec-empty { padding: 15px 0; color: var(--mute); font-size: 15px; }