/*
Theme Name: ZaiShangYanFa
Theme URI: https://zaishangyanfa.com
Author: LexFusion Team
Author URI: https://zaishangyanfa.com
Description: 面向企业法律顾问与法律咨询平台的 WordPress 主题。融合炜衡律所（weihenglaw.com）的权威律所骨架与留白美学，内容框架对齐在商言法（zaishangyanfa.com）。内置 10 类自定义文章类型、9 个自定义分类法、21 个静态页面模板与 6 个可选版式模板，覆盖业务领域、专业团队、案例、资讯、问答、法律服务机构查询、合同模板、法律工具等完整业务链路。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zai-shang-yan-fa
Tags: law, legal, corporate, business, responsive-layout, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks, threaded-comments
*/

/* =========================================================
   0. 设计系统 / Design Tokens
   藏青为骨 · 金为饰
   ========================================================= */
:root {
  /* 调色板 */
  --c-navy:        #16213e;   /* 藏青 · 主骨 */
  --c-navy-2:      #1f2d4d;   /* 藏青深变体 */
  --c-navy-3:      #243456;   /* 藏青浅变体 */
  --c-gold:        #c9a227;   /* 金 · 主饰 */
  --c-gold-light:  #d4af37;   /* 金浅 */
  --c-gold-soft:   #f3ecd6;   /* 金极浅底 */

  --c-bg:          #ffffff;
  --c-bg-soft:     #f5f6f8;   /* 区块交替底 */
  --c-bg-navy:     #16213e;   /* 深色区块 */

  --c-ink:         #23272f;   /* 正文主色 */
  --c-ink-soft:    #5b6472;   /* 次要文字 */
  --c-ink-faint:   #8a93a3;   /* 极弱文字 */
  --c-line:        #e6e8ec;   /* 描边 */
  --c-line-strong: #d4d8df;

  /* 字体栈：衬线标题（权威感）+ 无衬线正文 */
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", Georgia, serif;
  --font-sans:  "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* 字号层级 —— 已按真实站点 CSS 校准（视觉基线校准表 §2）
     真实值：--text16/--text18/--font20/--font22/--font26/--font30/--font36/--font46/--font60/--font70
     body 基准真实为 14px（base-v3.0.min.css），ocurring 频次最高亦为 14px */
  --fs-xs:   12px;   /* 真实 12px，出现 14 次 */
  --fs-sm:   14px;   /* 真实 body 基准 */
  --fs-base: 14px;   /* 校正：原 16px → 真实 14px */
  --fs-md:   18px;   /* --text18 · 一致 */
  --fs-lg:   22px;   /* --font22 · 一致 */
  --fs-xl:   30px;   /* --font30 · 一致 */
  --fs-2xl:  36px;   /* 校正：原 40px → 真实 36px（.std-title3）*/
  --fs-3xl:  46px;   /* 校正：原 54px（真实站不存在）→ 真实 46px（.std-title2）*/
  --fs-4xl:  60px;   /* 新增：真实 --font60 */
  --fs-stat: 140px;  /* 新增：真实统计数字档 */

  /* 排版：行高改为真实站 5 档阶梯（main.css --l1h3~--l1h75）
     真实站最松为 1.75，且标题按级别递减；字距体系真实站基本不用 */
  --lh-base: 1.75;   /* 校正：原 1.85 → 真实最松档 1.75 */
  --lh-tight: 1.3;   /* 校正：原 1.35 → 真实 --l1h3 */
  --lh-h4: 1.4;      /* 新增：--l1h4 */
  --lh-h5: 1.5;      /* 新增：--l1h5 */
  --lh-h6: 1.6;      /* 新增：--l1h6 */
  --ls-base: 0;      /* 校正：真实站不设字距 */
  --ls-title: 0;     /* 校正：真实站不设字距 */
  --ls-wide: 0.18em; /* 保留：仅用于 .eyebrow 极少量英文标签，不影响正文观感 */

  /* 间距标度 —— 真实站区块留白为 100~150px 级别（视觉基线校准表 §4）
     真实值：--space40/56/70/80/100/110/120/130/150 */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 110px;  /* 校正：原 96px → 真实常用 110px */
  --sp-8: 130px;  /* 校正：原 128px → 真实 130px */
  --sp-9: 150px;  /* 新增：真实最大档 */

  /* 布局 */
  --maxw: 1200px;        /* 真实一致 */
  --maxw-wide: 1600px;   /* 新增：真实 1920 屏宽容器 */
  --maxw-narrow: 860px;
  --gutter: 24px;
  --nav-h: 80px;         /* 校正：原 72px → 真实 --head:80px */
  --anchor: 60px;        /* 新增：真实 --anchor:60px，锚点跳转偏移 */

  /* 圆角 / 阴影 / 过渡 —— 按真实站校准（视觉基线校准表 §6） */
  --radius: 2px;         /* 校正：原 6px → 真实站近直角 */
  --radius-lg: 4px;      /* 校正：原 12px → 真实站近直角 */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);    /* 校正：藏青阴影 → 中性黑 */
  --shadow:    0 12px 32px rgba(0,0,0,.10);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.16);
  --ease: cubic-bezier(.25,.46,.45,.94);     /* 校正：真实站实测曲线 */
  --ease-out: ease-out;                       /* 新增：真实站主力曲线 */
  --t: 0.3s var(--ease-out);                  /* 校正：真实 300ms */
  --t-mid: 0.36s ease;                        /* 新增：真实 360ms 档 */
  --t-slow: 0.5s var(--ease);                 /* 新增：真实 500ms 档 */
}

/* =========================================================
   1. 基础重置
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-ink);
  background: var(--c-bg);
  letter-spacing: var(--ls-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  line-height: var(--lh-h4);   /* 校正：真实站标题行高按级别分级，默认取 1.4 */
  letter-spacing: var(--ls-title);
  color: var(--c-navy);
  font-weight: 600;
  margin: 0 0 var(--sp-3);
}
/* 标题行高按真实站分级：大标题更紧、小标题更松（main.css --l1h3~--l1h6） */
h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-2xl); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-xl);  line-height: var(--lh-h4); }
h4 { font-size: var(--fs-lg);  line-height: var(--lh-h5); }
h5 { font-size: var(--fs-md);  line-height: var(--lh-h5); }
h6 { font-size: var(--fs-base); line-height: var(--lh-h6); }
p { margin: 0 0 var(--sp-3); color: var(--c-ink); }
a { color: var(--c-navy); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--c-gold); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 var(--sp-3); padding-left: 1.4em; }
blockquote {
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--c-gold);
  background: var(--c-bg-soft);
  font-family: var(--font-serif);
  color: var(--c-ink-soft);
}
table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-4); }
th, td { border: 1px solid var(--c-line); padding: 12px 14px; text-align: left; }
th { background: var(--c-bg-soft); color: var(--c-navy); }

/* =========================================================
   2. 布局工具
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
/* 锚点偏移：真实站 --anchor:60px，避免跳转后被粘性导航遮挡 */
[id] { scroll-margin-top: var(--anchor); }
.section { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
.section--soft { background: var(--c-bg-soft); }
.section--navy { background: var(--c-navy); color: #fff; }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: rgba(255,255,255,.82); }
.section--gold { background: var(--c-gold-soft); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-gold);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.section-head { text-align: center; max-width: 720px; margin: 0 auto var(--sp-5); }
.section-head .eyebrow { color: var(--c-gold); }
.section-head h2 { margin-bottom: var(--sp-2); }
.section-head p { color: var(--c-ink-soft); font-size: var(--fs-md); }

.text-center { text-align: center; }
.text-gold { color: var(--c-gold); }

/* =========================================================
   3. 按钮 / Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-base);
  padding: 13px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--t);
  line-height: 1;
}
.btn--primary { background: var(--c-gold); color: var(--c-navy); }
.btn--primary:hover { background: var(--c-gold-light); color: var(--c-navy); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--ghost { background: transparent; color: var(--c-navy); border-color: var(--c-line-strong); }
.btn--ghost:hover { border-color: var(--c-gold); color: var(--c-gold); }
.btn--light { background: #fff; color: var(--c-navy); }
.btn--light:hover { background: var(--c-gold-soft); transform: translateY(-2px); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--outline-light:hover { border-color: var(--c-gold); color: var(--c-gold); }
.btn--lg { padding: 16px 34px; font-size: var(--fs-base); }

/* =========================================================
   4. 导航 / Header
   ========================================================= */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(22,33,62,.96);
  backdrop-filter: saturate(160%) blur(8px);
  transition: background var(--t), box-shadow var(--t);
}
.site-header.is-scrolled { background: rgba(22,33,62,.98); box-shadow: 0 4px 20px rgba(0,0,0,.18); }
.nav-inner {
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.brand__mark {
  width: 38px; height: 38px; border-radius: 8px;
  background: linear-gradient(135deg, var(--c-gold), var(--c-gold-light));
  display: grid; place-items: center;
  font-family: var(--font-serif); font-weight: 700; color: var(--c-navy); font-size: 18px;
}
.brand__name { font-family: var(--font-serif); font-size: 19px; font-weight: 600; letter-spacing: var(--ls-title); line-height: 1.1; }
.brand__sub { font-size: 11px; letter-spacing: var(--ls-wide); color: rgba(255,255,255,.6); text-transform: uppercase; }

.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.main-nav > ul > li { position: relative; display: flex; align-items: center; }
.main-nav a {
  display: inline-flex; align-items: center; height: var(--nav-h);
  /* 历史：原 padding 0 16px（10 项溢出约 46px）→ 0 11px。
     现导航扩展为 11 个顶级项并新增站内搜索，再收紧到 0 8px：
     每项省 6px、gap 4→2 每项省 2px，共省约 8px/项，容纳 11 项 + 搜索框。
     点击区域不受影响（高度仍为 --nav-h = 80px）。 */
  padding: 0 8px; color: rgba(255,255,255,.86); font-size: var(--fs-sm); letter-spacing: var(--ls-base);
  position: relative;
  /* 11 个顶级项 + 搜索框后仍可能超出：允许文字在极窄桌面断点轻微压缩而不换行溢出 */
  white-space: nowrap;
}
.main-nav a::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 18px; height: 2px;
  background: var(--c-gold); transform: scaleX(0); transform-origin: left; transition: transform var(--t);
}
.main-nav a:hover, .main-nav .current_page_item > a, .main-nav .current-menu-item > a { color: #fff; }
.main-nav a:hover::after, .main-nav .current_page_item > a::after, .main-nav .current-menu-item > a::after { transform: scaleX(1); }
.main-nav .sub-menu {
  /* 横向抽屉：下拉子目录横排（用户指定），宽度按内容自适应并可折行。
     默认锚定父项左对齐；靠右的顶级项由 body 上的 .nav-edge 翻转右对齐，避免超出视口。 */
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 2px;
  position: absolute; top: var(--nav-h); left: 0; width: max-content; max-width: min(calc(100vw - 48px), 820px);
  background: #fff; box-shadow: var(--shadow); border-radius: var(--radius);
  padding: 6px 8px; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t), visibility var(--t), transform var(--t);
  z-index: 60;
}
/* 防止右侧溢出：顶级项位于视口右半区时，JS 给 .main-nav 加 .nav-drawer--edge，抽屉改为右缘对齐 */
.main-nav.nav-drawer--edge > ul > li > .sub-menu { left: auto; right: 0; }
.main-nav .sub-menu li { display: block; flex: 0 0 auto; }
/* 三级及更深下拉：改为纵向堆叠在抽屉下方，避免横向无限延伸 */
.main-nav .sub-menu .sub-menu {
  display: flex; flex-direction: row; flex-wrap: wrap; top: 100%; left: 0;
  width: max-content; max-width: min(calc(100vw - 48px), 820px);
}
/* 子项：单行不换行，横向排布的每个"格" */
.main-nav .sub-menu a {
  display: block; white-space: nowrap;
  color: var(--c-ink); height: auto; padding: 10px 14px; border-radius: 6px;
}
.main-nav .sub-menu a::after { display: none; }
.main-nav .sub-menu a:hover { background: var(--c-bg-soft); color: var(--c-gold); }
/* 展开触发：hover / 键盘焦点 / JS 维护的 .is-sub-open 三路兜底。
   必须写在 .main-nav .sub-menu 之后、767px 断点之前：
   断点内的 .main-nav.is-open .sub-menu 用 position: static 覆盖为移动端静态展开，层叠顺序不可颠倒。 */
.main-nav > ul > li:hover > .sub-menu,
.main-nav > ul > li:focus-within > .sub-menu,
.main-nav > ul > li.is-sub-open > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* =========================================================
   §1.3 下拉子目录抽屉的"展开/收起"控制
   nav-walker 为每个含子项的顶级项注入 <button class="sub-toggle">，
   它在桌面与移动端均可用；不依赖 hover，触屏与键盘均可操作。
   桌面端按钮视觉上仅作可点击的信号区，保持原有横向抽屉外观不变。
   ========================================================= */
.main-nav > ul > li.has-sub > a { position: relative; }
.main-nav .sub-toggle {
  /* 桌面端同样可见可点：hover 展开是便利，不是唯一入口。
     按钮锚定在链接尾部箭头处，不额外占用导航行高度。 */
  display: inline-flex;
  position: absolute; top: 50%; right: -14px; transform: translateY(-50%);
  width: 22px; height: 22px; padding: 0; margin: 0;
  background: none; border: 0; cursor: pointer; color: inherit;
  align-items: center; justify-content: center;
}
.main-nav .sub-toggle::before {
  content: ""; width: 5px; height: 5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--t);
}
.main-nav > ul > li.is-sub-open > .sub-toggle::before { transform: translateY(1px) rotate(-135deg); }
.main-nav .sub-toggle:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; border-radius: 4px; }

.nav-cta { margin-left: 10px; }

/* ---------- 站内搜索（header.php .nav-search）----------
   桌面端收起为 32px 图标按钮，hover / focus-within 时 input 展开至 190px；
   展开用 width + opacity 过渡，不改变 header 高度，也不推挤导航。
   ≤767px 时导航整体切到 .nav-toggle 抽屉，此处的搜索框改由移动端规则整行常显。 */
.nav-search {
  display: flex; align-items: center;
  position: relative; margin-left: 8px;
  height: 32px; border-radius: 16px;
  background: rgba(255,255,255,.1);
  transition: background var(--t), width var(--t);
}
.nav-search:hover, .nav-search:focus-within { background: rgba(255,255,255,.16); }
.nav-search__input {
  width: 0; min-width: 0; padding: 0; border: 0; outline: none;
  background: transparent; color: #fff; font-size: var(--fs-xs); font-family: inherit;
  opacity: 0; transition: width var(--t), opacity var(--t), padding var(--t);
}
.nav-search__input::placeholder { color: rgba(255,255,255,.55); }
.nav-search:hover .nav-search__input,
.nav-search:focus-within .nav-search__input { width: 190px; padding-left: 14px; opacity: 1; }
.nav-search__input:focus-visible { outline: none; }
.nav-search__btn {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 32px; height: 32px; padding: 0; margin: 0;
  background: none; border: 0; border-radius: 16px; cursor: pointer;
  color: rgba(255,255,255,.86);
}
.nav-search__btn:hover { color: var(--c-gold-light); }
.nav-search__btn:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
/* 键盘用户：聚焦输入框时保持展开（:focus-within 已覆盖），此处仅兜底无 :focus-within 的旧引擎 */
.nav-search__input:focus { width: 190px; padding-left: 14px; opacity: 1; }

/* 二级菜单指示箭头 */
.sub-caret {
  display: inline-block; width: 5px; height: 5px; margin-left: 6px; vertical-align: middle;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .7; transition: transform var(--t);
}
.main-nav li:hover > a .sub-caret { transform: translateY(0) rotate(-135deg); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 40px; height: 40px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 4px auto; transition: var(--t); }

/* =========================================================
   5. Hero
   ========================================================= */
.hero {
  position: relative;
  background: radial-gradient(1200px 600px at 70% -10%, var(--c-navy-3), var(--c-navy) 60%);
  color: #fff; overflow: hidden;
  padding-top: calc(var(--nav-h) + var(--sp-8));
  padding-bottom: var(--sp-8);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px; opacity: .5;
  mask-image: radial-gradient(700px 500px at 80% 20%, #000, transparent 70%);
}
.hero__inner { position: relative; max-width: 760px; }
/* 主标题：真实站主视觉最大档为 70px / 60px，此处 clamp 上限收敛到 60px */
.hero h1 { color: #fff; font-size: clamp(30px, 4.2vw, var(--fs-4xl)); margin-bottom: var(--sp-3); }
.hero .eyebrow { color: var(--c-gold-light); }
.hero__lead { font-size: var(--fs-md); color: rgba(255,255,255,.82); max-width: 640px; margin-bottom: var(--sp-5); }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__stats { display: flex; gap: var(--sp-6); margin-top: var(--sp-7); flex-wrap: wrap; }
/* 统计数字：真实站用 --font70 级别（140px/180px 超大档），非标题字号 */
.hero__stat .num { font-family: var(--font-serif); font-size: clamp(46px, 6vw, 76px); color: var(--c-gold-light); line-height: 1; }
.hero__stat .label { font-size: var(--fs-sm); color: rgba(255,255,255,.7); letter-spacing: var(--ls-base); }

/* =========================================================
   6. 卡片 / Cards
   ========================================================= */
.grid { display: grid; gap: var(--sp-4); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: var(--sp-4); transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  position: relative; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--c-gold); transform: scaleX(0); transform-origin: left; transition: transform var(--t);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--c-gold-soft); }
.card:hover::before { transform: scaleX(1); }
.card__icon {
  width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center;
  background: var(--c-gold-soft); color: var(--c-gold); font-family: var(--font-serif); font-size: 22px; margin-bottom: var(--sp-3);
}
.card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.card p { color: var(--c-ink-soft); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.card__more { font-size: var(--fs-sm); color: var(--c-gold); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.card__more svg { transition: transform var(--t); }
.card:hover .card__more svg { transform: translateX(4px); }

/* 律师卡片 */
.lawyer-card { text-align: center; padding: var(--sp-4) var(--sp-3); }
.lawyer-card__avatar {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto var(--sp-3);
  background: linear-gradient(135deg, var(--c-navy-2), var(--c-navy-3));
  display: grid; place-items: center; color: var(--c-gold-light);
  font-family: var(--font-serif); font-size: 30px; border: 2px solid var(--c-gold-soft);
}
.lawyer-card h3 { font-size: var(--fs-md); margin-bottom: 4px; }
.lawyer-card .role { font-size: var(--fs-sm); color: var(--c-gold); letter-spacing: var(--ls-base); }

/* 业务领域小卡（带箭头） */
.biz-card { display: block; }
.biz-card .card__more { margin-top: auto; }

/* =========================================================
   7. 区块装饰组件
   ========================================================= */
.divider-gold { width: 56px; height: 3px; background: var(--c-gold); margin: var(--sp-3) 0; }
.divider-gold--center { margin-left: auto; margin-right: auto; }

/* 服务入口大卡 */
.order-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.order-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: var(--sp-4); transition: all var(--t);
}
.order-card:hover { box-shadow: var(--shadow); border-color: var(--c-gold); transform: translateY(-4px); }
.order-card .price { font-family: var(--font-serif); color: var(--c-gold); font-size: var(--fs-xl); }
.order-card h3 { font-size: var(--fs-lg); margin: var(--sp-2) 0 6px; }
.order-card p { font-size: var(--fs-sm); color: var(--c-ink-soft); }

/* 工具箱 */
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.tool-card {
  background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: var(--sp-4); text-align: center; transition: all var(--t);
}
.tool-card:hover { background: #fff; box-shadow: var(--shadow); border-color: var(--c-gold-soft); transform: translateY(-4px); }
.tool-card__ico { font-size: 28px; margin-bottom: var(--sp-2); }
.tool-card h4 { font-size: var(--fs-md); margin-bottom: 6px; }
.tool-card p { font-size: var(--fs-xs); color: var(--c-ink-soft); margin: 0; }
.tool-card__ico {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); background: var(--c-gold-soft); color: #8a6d1a;
  font-family: var(--font-serif); font-size: 20px; margin-bottom: var(--sp-2);
}

/* 商城商品卡 */
.product-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-3); text-align: center; transition: all var(--t);
  display: flex; flex-direction: column; gap: var(--sp-2); align-items: center;
}
.product-card:hover { border-color: var(--c-gold); box-shadow: var(--shadow); transform: translateY(-4px); }
.product-card__price {
  font-family: var(--font-serif); font-size: var(--fs-xl); color: var(--c-gold);
  letter-spacing: var(--ls-base); line-height: 1.2;
}
.product-card h3 { font-size: var(--fs-md); margin: 0; min-height: 2.8em; display: flex; align-items: center; }
.btn--sm { padding: 9px 20px; font-size: var(--fs-sm); }

/* 数据条 */
.stat-row { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.stat { text-align: center; }
.stat .num { font-family: var(--font-serif); font-size: var(--fs-3xl); color: var(--c-gold-light); line-height: 1; }
.stat .label { font-size: var(--fs-sm); color: rgba(255,255,255,.75); letter-spacing: var(--ls-base); margin-top: 8px; }

/* 新闻列表 */
.news-list { display: grid; gap: var(--sp-3); }
.news-item {
  display: grid; grid-template-columns: 120px 1fr auto; gap: var(--sp-4); align-items: center;
  padding: var(--sp-3) var(--sp-4); background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius); transition: all var(--t);
}
.news-item:hover { border-color: var(--c-gold-soft); box-shadow: var(--shadow-sm); transform: translateX(4px); }
.news-item__date { font-family: var(--font-serif); color: var(--c-gold); font-size: var(--fs-sm); }
.news-item__cat { font-size: var(--fs-xs); color: var(--c-ink-faint); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.news-item h3 { font-size: var(--fs-md); margin: 4px 0 0; font-family: var(--font-sans); letter-spacing: var(--ls-base); }
.news-item__arrow { color: var(--c-gold); transition: transform var(--t); }
.news-item:hover .news-item__arrow { transform: translateX(4px); }

/* 资质/认可 */
.honor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.honor { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: var(--sp-4); }
.honor h4 { color: var(--c-gold-light); font-size: var(--fs-md); margin-bottom: var(--sp-2); font-family: var(--font-sans); }
.honor ul { margin: 0; padding-left: 1.2em; color: rgba(255,255,255,.8); font-size: var(--fs-sm); }
.honor ul li { margin-bottom: 6px; }

/* 认可要点（浅底） */
.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.pillar { text-align: center; padding: var(--sp-4) var(--sp-3); }
.pillar__ico { font-size: 30px; margin-bottom: var(--sp-2); }
.pillar h4 { font-size: var(--fs-md); margin-bottom: 6px; }
.pillar p { font-size: var(--fs-sm); color: var(--c-ink-soft); margin: 0; }

/* =========================================================
   8. 页脚 / Footer
   ========================================================= */
.site-footer { background: var(--c-navy); color: rgba(255,255,255,.78); padding-top: var(--sp-7); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--sp-5); }
.footer-col h4 { color: #fff; font-size: var(--fs-md); margin-bottom: var(--sp-3); font-family: var(--font-sans); }
.footer-col a { color: rgba(255,255,255,.72); display: block; padding: 6px 0; font-size: var(--fs-sm); }
.footer-col a:hover { color: var(--c-gold-light); padding-left: 6px; }
.footer-brand .brand { margin-bottom: var(--sp-3); }
.footer-brand p { font-size: var(--fs-sm); color: rgba(255,255,255,.7); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: var(--sp-5); padding: var(--sp-3) 0;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: var(--fs-xs); color: rgba(255,255,255,.6);
}

/* CTA 横幅 */
.cta-banner {
  background: linear-gradient(120deg, var(--c-navy-2), var(--c-navy));
  border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-5); text-align: center;
}
.cta-banner h2 { color: #fff; margin-bottom: var(--sp-2); }
.cta-banner p { color: rgba(255,255,255,.8); margin-bottom: var(--sp-4); }

/* =========================================================
   9. 单页 / 文章排版
   ========================================================= */
.page-hero {
  background: radial-gradient(900px 400px at 70% 0%, var(--c-navy-3), var(--c-navy) 60%);
  color: #fff; padding-top: calc(var(--nav-h) + var(--sp-6)); padding-bottom: var(--sp-6);
}
.page-hero h1 { color: #fff; font-size: clamp(28px, 3.4vw, var(--fs-3xl)); }
.page-hero .crumbs { font-size: var(--fs-sm); color: rgba(255,255,255,.65); margin-bottom: var(--sp-2); }
.page-hero .crumbs a { color: rgba(255,255,255,.8); }

.prose { max-width: var(--maxw-narrow); margin: 0 auto; }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--sp-5); }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--sp-4); }
.prose p, .prose li { color: var(--c-ink); }
.prose img { border-radius: var(--radius); margin: var(--sp-4) 0; }

/* 元信息 */
.meta-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; color: var(--c-ink-faint); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.meta-row span { display: inline-flex; align-items: center; gap: 6px; }

/* 筛选条 */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--sp-5); }
.filter-rows { margin-bottom: var(--sp-5); border-top: 1px solid var(--c-line); }
.filter-row {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line);
}
.filter-row__label {
  flex: 0 0 84px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-navy);
  padding-top: 7px; letter-spacing: var(--ls-title);
}
.filter-bar--inline { margin-bottom: 0; flex: 1; }
.empty-hint { text-align: center; color: var(--c-ink-faint); padding: var(--sp-5) 0; font-size: var(--fs-sm); }
.notice {
  font-size: var(--fs-sm); color: var(--c-ink-faint); background: var(--c-bg-soft);
  border-left: 3px solid var(--c-gold); padding: var(--sp-2) var(--sp-3); margin: 0;
}
.filter-chip {
  font-size: var(--fs-sm); padding: 8px 16px; border: 1px solid var(--c-line); border-radius: 999px;
  background: #fff; color: var(--c-ink-soft); cursor: pointer; transition: all var(--t);
}
.filter-chip:hover, .filter-chip.is-active { border-color: var(--c-gold); color: var(--c-navy); background: var(--c-gold-soft); }

/* 服务流程（5 步） */
.step-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); position: relative; }
.step {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-3); position: relative; transition: all var(--t);
}
.step::after {
  content: ""; position: absolute; top: 42px; right: -13px; width: 13px; height: 1px;
  background: var(--c-line-strong);
}
.step:last-child::after { display: none; }
.step:hover { border-color: var(--c-gold); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.step__num {
  font-family: var(--font-serif); font-size: var(--fs-xl); line-height: 1;
  color: var(--c-gold); margin-bottom: var(--sp-2); letter-spacing: var(--ls-base);
}
.step h4 { font-size: var(--fs-md); margin-bottom: 6px; }
.step p { font-size: var(--fs-sm); color: var(--c-ink-soft); margin: 0; }

/* 律师卡片：执业领域标签 + 办公地点 */.lawyer-card__meta {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2);
  padding-top: var(--sp-2); border-top: 1px solid var(--c-line);
}
.tag {
  font-size: 12px; line-height: 1.6; padding: 2px 9px; border-radius: 999px;
  background: var(--c-gold-soft); color: #8a6d1a; letter-spacing: 0;
}
.tag--loc { background: #eef1f7; color: var(--c-ink-soft); }
.tag--lg { font-size: var(--fs-sm); padding: 6px 16px; }

/* 律师详情布局 */
.lawyer-detail { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-6); align-items: start; }
.lawyer-side {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-3); text-align: center; position: sticky; top: calc(var(--nav-h) + 20px);
}
.lawyer-side__photo img { width: 100%; border-radius: var(--radius); display: block; }
.lawyer-card__avatar--lg { width: 140px; height: 140px; font-size: 48px; margin: 0 auto; }
.lawyer-main h2 { font-size: var(--fs-xl); }
.info-list--compact { text-align: left; margin: var(--sp-3) 0; }
.info-list--compact li { padding: 10px 0; font-size: var(--fs-sm); }
/* 侧栏信息项横向排列：办公地点 / 执业机构两项并列一行，居中折行 */
.lawyer-side .info-list--compact {
  display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;
  gap: 0 var(--sp-3); text-align: left;
}
.lawyer-side .info-list--compact li {
  display: flex; gap: 8px; align-items: flex-start;
  flex: 1 1 0; min-width: 0; border-bottom: none;
}
.area-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.link-list { list-style: none; padding: 0; margin: 0; }
.link-list li { padding: var(--sp-2) 0; border-bottom: 1px dashed var(--c-line); font-size: var(--fs-sm); }
.link-list li a { font-weight: 600; }
.link-list .desc { display: block; color: var(--c-ink-faint); font-size: var(--fs-xs); margin-top: 2px; }
/* 条目块（自测清单 / 条款清单 / 价格清单通用） */
.link-item { padding: var(--sp-3) 0; border-bottom: 1px dashed var(--c-line); }
.link-item:first-child { border-top: 1px dashed var(--c-line); }
.link-item h3 {
  font-size: var(--fs-md); color: var(--c-navy); margin: 0 0 6px;
  letter-spacing: var(--ls-title); font-weight: 700;
}
.link-item h4 { font-size: var(--fs-base); color: var(--c-navy); margin: 0 0 4px; }
.link-item p { font-size: var(--fs-sm); color: var(--c-ink-soft); margin: 0; line-height: var(--lh-base); }
.link-item .price { color: var(--c-gold); font-weight: 700; }
.link-item__meta { display: flex; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--c-ink-faint); margin-top: 6px; }
.related-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.related-block h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.chip-links { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-link {
  font-size: var(--fs-sm); padding: 6px 14px; border: 1px solid var(--c-line);
  border-radius: 999px; color: var(--c-ink-soft); background: #fff; transition: all var(--t);
}
.chip-link:hover { border-color: var(--c-gold); color: var(--c-navy); background: var(--c-gold-soft); }

/* 问答列表 */
.qa-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--c-line); }
.qa-item {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--c-line); transition: all var(--t);
}
.qa-item:hover { background: #fff; padding-left: var(--sp-3); }
.qa-item__title { font-family: var(--font-serif); font-size: var(--fs-md); color: var(--c-navy); }
.qa-item:hover .qa-item__title { color: var(--c-gold); }
.qa-item__meta { font-size: var(--fs-xs); color: var(--c-ink-faint); white-space: nowrap; }

/* 律师卡片：执业领域标签 + 办公地点 */

/* 表单 */
.form-grid { display: grid; gap: var(--sp-3); max-width: 640px; }
.field label { display: block; font-size: var(--fs-sm); color: var(--c-ink); margin-bottom: 6px; font-weight: 600; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  font-family: var(--font-sans); font-size: var(--fs-base); color: var(--c-ink); background: #fff; transition: border-color var(--t);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--c-gold); }

/* 联系人卡片 */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { display: flex; gap: 12px; padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); }
.info-list .ico { color: var(--c-gold); font-size: 18px; }

/* 目录/名录 */
.dir-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.dir-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-3); text-align: center; transition: all var(--t); }
.dir-card:hover { border-color: var(--c-gold); box-shadow: var(--shadow-sm); }
.dir-card .num { font-family: var(--font-serif); font-size: var(--fs-2xl); color: var(--c-gold); }
.dir-card .lbl { font-size: var(--fs-sm); color: var(--c-ink-soft); }

/* 机构卡（带名称 / 说明 / 查看详情，用于同城看守所等多所并列场景） */
.dir-card__name {
  font-size: var(--fs-base); color: var(--c-navy); font-weight: 600;
  letter-spacing: var(--ls-title); margin-bottom: 8px; line-height: var(--lh-tight);
}
.dir-card__meta {
  font-size: var(--fs-xs); color: var(--c-ink-faint);
  line-height: var(--lh-base); margin-bottom: var(--sp-2); min-height: 2.4em;
}
.dir-card__more {
  display: inline-block; font-size: var(--fs-xs);
  color: var(--c-gold); letter-spacing: var(--ls-title);
  transition: transform var(--t);
}
.dir-card:hover .dir-card__more { transform: translateX(4px); }

/* =========================================================
   10. 滚动揭示动画
   ---------------------------------------------------------
   渐进增强修正（重要）：
     原实现 `.reveal{opacity:0}` 无条件生效，若 JS 被禁用、被 CSP 拦截、
     或 IntersectionObserver 不支持，则 230 处 .reveal 元素（含首屏
     .hero__inner）将永久不可见 —— 首屏白屏是可直接导致跳出率飙升的
     严重缺陷。

     现改为「html.js .reveal」前置条件：只有 html 元素带 .js 类时才隐藏。
     .js 类由 header 中一段内联脚本同步添加（见 header.php），
     且该脚本在 head 内执行，不会造成 FOUC。无 JS 时元素正常显示。
   ========================================================= */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
/* JS 生效但观察器尚未扫到/脚本中途报错时的兜底：
   现代 CSS 的 animation 优先级低于 class 选择器冲突处理复杂，
   此处改用独立的 @supports 之外的简单策略 —— 由 main.js 在初始化失败时
   给 <html> 加 .no-reveal 类，届时全部元素直接可见（见 main.js 末尾） */
.js.no-reveal .reveal { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   11. 响应式（旧档位已合并至第 20 节的真实站点断点体系）
   ========================================================= */
/* 1024 档合并入 991：真实站分界为 991，此处仅保留不冲突的组件级规则 */
@media (max-width: 991px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* 768 档合并入 767：真实站分界为 767（非 768） */
@media (max-width: 767px) {
  :root { --nav-h: 62px; }
  .main-nav, .nav-cta { display: none; }
  .nav-toggle { display: block; }
  /* 站内搜索：移动端不进折叠菜单，改为 header 内常显的整行输入框。
     .nav-inner 一行的可用空间放不下 11 项导航，但搜索只占一个 36px 圆钮/输入框，
     故保持常驻，位置在 .nav-cta 之后、.nav-toggle 之前（DOM 顺序即视觉顺序）。 */
  .nav-search {
    margin: 0 8px 0 auto; height: 36px; border-radius: 18px;
    flex: 0 1 auto; max-width: 100%;
  }
  .nav-search__input {
    width: 132px; padding-left: 12px; opacity: 1; font-size: var(--fs-sm);
  }
  .nav-search:hover .nav-search__input,
  .nav-search:focus-within .nav-search__input,
  .nav-search__input:focus { width: 132px; padding-left: 12px; opacity: 1; }
  .nav-search__btn { width: 36px; height: 36px; border-radius: 18px; }
  .main-nav.is-open {
    display: block; position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--c-navy); padding: var(--sp-2) var(--gutter) var(--sp-4);
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  .main-nav.is-open > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav.is-open a { height: auto; padding: 12px 0; }
  .main-nav.is-open a::after { display: none; }
  /* 移动端下拉：静态展开、纵向排列；子项恢复左对齐块级（桌面端 width:100% 会因 padding 溢出） */
  .main-nav.is-open .sub-menu {
    position: static; display: block;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; background: transparent;
    min-width: 0; padding: 0 0 8px 12px;
  }
  .main-nav.is-open .sub-menu li { display: block; }
  /* §1.3 移动端：子目录抽屉改为可点击展开，避免只能靠 hover 的触屏死路 */
  .main-nav.is-open > ul > li.has-sub { position: relative; }
  .main-nav.is-open > ul > li.has-sub > a { padding-right: 34px; }
  .main-nav.is-open > ul > li > .sub-toggle { display: inline-flex; right: 0; position: absolute; }
  .main-nav.is-open > ul > li > .sub-menu { display: none; }
  .main-nav.is-open > ul > li.is-sub-open > .sub-menu { display: block; }
  .main-nav.is-open .sub-menu a {
    display: block; width: auto; white-space: normal;
    color: rgba(255,255,255,.8); padding: 10px 0;
  }
  .main-nav.is-open .sub-menu .sub-menu { top: auto; left: auto; }
  .grid--3, .grid--2, .grid--4, .order-grid, .tools-grid, .dir-grid, .honor-grid, .pillar-grid, .step-grid { grid-template-columns: 1fr; }
  .step::after { display: none; }
  .lawyer-detail, .related-block, .filter-row { grid-template-columns: 1fr; }
  .lawyer-side { position: static; }
  .filter-row { display: block; }
  .filter-row__label { display: block; margin-bottom: 8px; padding-top: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .news-item { grid-template-columns: 1fr; gap: 6px; }
  .hero__stats { gap: var(--sp-4); }
}

/* =========================================================
   12. WordPress 对齐 / 古腾堡
   ========================================================= */
.alignwide { max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.alignfull { width: 100%; }
.wp-block-image img { border-radius: var(--radius); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
/* .sr-only：仅供读屏与搜索引擎识别的隐藏标题（替代 wb-dup-title-dynamic 的 display:none） */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.sticky { }
.bypostauthor { }

/* =========================================================
   13. 信息表 / 表单 / 交易卡（名录详情、订单、预约）
   ========================================================= */
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-4) 0 var(--sp-5);
  font-size: .95rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.info-table th,
.info-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-line);
}
.info-table tr:last-child th,
.info-table tr:last-child td { border-bottom: 0; }
.info-table th {
  width: 132px;
  font-weight: 500;
  color: var(--c-navy);
  background: var(--c-bg-soft);
  white-space: nowrap;
}
.info-table td { color: var(--c-ink); line-height: var(--lh-base); }

/* 表单
   注意：.form-grid 有两套使用者，必须按内容区分，不能无条件下双列
     a) 双列制：子元素为 .form-field（contact-appoint / entrust / membership /
        order / orders / tools）→ 需要两列栅格
     b) 单列制：子元素为 .field（consult / contact / modal-appoint）→ 单列 + 限宽
   因此默认单列，仅当直接子元素含 .form-field 时才切两列。 */
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); max-width: 640px; }
.form-grid:has(> .form-field) {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  max-width: none;
}
/* :has() 不支持的浏览器回退：由模板追加 is-two-col 类（见下方注释） */
.form-grid.is-two-col { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); max-width: none; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: .9rem; color: var(--c-navy); font-weight: 500; }
.form-field label .req { color: var(--c-gold); margin-left: 2px; }
.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  font-size: .95rem;
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 0;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(201,162,39,.14);
}
.form-field textarea { min-height: 132px; resize: vertical; }
.form-check { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--c-ink-soft); }
.form-check input { margin-top: 4px; flex: none; }
.form-actions { margin-top: var(--sp-5); display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }

/* 订单 / 价格卡 */
.price { font-family: var(--font-serif); font-size: 1.6rem; color: var(--c-gold); letter-spacing: 0; }
.price small { font-family: var(--font-sans); font-size: .8rem; color: var(--c-ink-soft); margin-left: 4px; }
.order-card__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .86rem; color: var(--c-ink-soft); margin-top: 10px; }

/* 分类卡计数徽标 */
.cat-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  font-size: .76rem;
  color: var(--c-navy);
  background: var(--c-bg-soft);
  border-radius: 999px;
}

/* 数据带（首页统计） */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  text-align: center;
}
.stat-band__num {
  font-family: var(--font-serif);
  font-size: clamp(40px, 4vw, var(--fs-stat));
  color: var(--c-navy);
  letter-spacing: 0;   /* 校正：真实站不设字距 */
}
.stat-band__label { margin-top: 8px; font-size: .9rem; color: var(--c-ink-soft); letter-spacing: 0; }

@media (max-width: 767px) {
  .form-grid { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .info-table th { width: 96px; }
}

/* ==========================================================================
   14. 罪名库 / 工具面板 / 筛选 chip
   ========================================================================== */

/* --- 筛选 chip --- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; font-size: var(--fs-sm); font-family: inherit;
  color: var(--c-ink-soft); background: var(--c-bg);
  border: 1px solid var(--c-line); border-radius: 999px;
  cursor: pointer; transition: all .2s ease; letter-spacing: 0;
}
.chip:hover { border-color: var(--c-gold); color: var(--c-navy); background: var(--c-bg-soft); }
.chip.is-active {
  color: #fff; background: var(--c-navy); border-color: var(--c-navy);
}
.chip.is-active .cat-count { background: rgba(255,255,255,.18); color: #fff; }

/* --- 罪名卡片 --- */
.crime-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4);
}
.crime-card {
  display: flex; flex-direction: column;
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-gold);
  padding: var(--sp-4); transition: all .25s ease;
}
.crime-card:hover {
  border-left-color: var(--c-navy);
  box-shadow: 0 8px 28px rgba(22,33,62,.08);
  transform: translateY(-2px);
}
.crime-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); padding-bottom: var(--sp-3);
  border-bottom: 1px dashed var(--c-line); margin-bottom: var(--sp-3);
}
.crime-card__title {
  margin: 0; font-family: var(--font-serif); font-size: 1.18rem;
  color: var(--c-navy); letter-spacing: var(--ls-title); line-height: 1.4;
}
.crime-card__law {
  flex: 0 0 auto; font-size: .78rem; color: var(--c-gold);
  background: rgba(201,162,39,.09); padding: 3px 9px;
  border-radius: 3px; letter-spacing: 0; white-space: nowrap;
}
.crime-card__body { flex: 1; }
.crime-card__body p {
  margin: 0 0 10px; font-size: var(--fs-sm); line-height: var(--lh-base);
  color: var(--c-ink-soft);
}
.crime-card__body p:last-child { margin-bottom: 0; }
.crime-card__body strong { color: var(--c-navy); font-weight: 600; }
.crime-card__foot { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); }
.btn--sm { padding: 8px 16px; font-size: .82rem; }

/* --- 工具面板 --- */
.tool-panel {
  background: var(--c-bg); border: 1px solid var(--c-line);
  padding: var(--sp-6); max-width: 860px; margin: 0 auto;
}
.tool-panel__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-line);
  margin-bottom: var(--sp-5);
}
.tool-panel__ico {
  flex: 0 0 52px; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 1.4rem;
  color: var(--c-gold); background: var(--c-navy); border-radius: 4px;
}
.tool-panel__title {
  margin: 0; font-family: var(--font-serif); font-size: 1.5rem;
  color: var(--c-navy); letter-spacing: var(--ls-title); line-height: 1.3;
}
.tool-panel__group {
  display: inline-block; margin-top: 4px; font-size: .76rem;
  color: var(--c-ink-faint); letter-spacing: .1em;
}
.tool-form__actions {
  display: flex; gap: var(--sp-3); margin-top: var(--sp-5);
}
.tool-result {
  margin-top: var(--sp-5); padding: var(--sp-4);
  background: var(--c-bg-soft); border-left: 3px solid var(--c-gold);
}
.tool-result__label {
  font-size: .78rem; color: var(--c-ink-faint); letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 8px;
}
.tool-result__value {
  font-family: var(--font-serif); font-size: 1.8rem; color: var(--c-navy);
  letter-spacing: 0; line-height: 1.3;
}
.tool-result__hint {
  margin: 8px 0 0; font-size: .82rem; color: var(--c-ink-faint); line-height: 1.7;
}
.tool-note {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px dashed var(--c-line);
}
.tool-note h4 {
  margin: 0 0 8px; font-size: .9rem; color: var(--c-navy);
  letter-spacing: var(--ls-title);
}
.tool-note p {
  margin: 0; font-size: var(--fs-sm); line-height: var(--lh-base);
  color: var(--c-ink-soft);
}
.tool-card__ico {
  font-family: var(--font-serif);
}

@media (max-width: 767px) {
  .crime-grid { grid-template-columns: 1fr; }
  .tool-panel { padding: var(--sp-4); }
  .crime-card__head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* --- 归档信息条 --- */
.archive-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: var(--sp-3) 0; margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-sm); color: var(--c-ink-faint);
  letter-spacing: 0;
}
.archive-meta__count { color: var(--c-navy); font-weight: 600; }
.archive-meta__sep { color: var(--c-line); }

/* --- WordPress 分页 --- */
.pagination, .nav-links {
  display: flex; justify-content: center; align-items: center;
  gap: 8px; flex-wrap: wrap; margin-top: var(--sp-6);
}
.nav-links .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 12px;
  font-size: var(--fs-sm); color: var(--c-ink-soft);
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: 3px; text-decoration: none; transition: all .2s ease;
}
.nav-links .page-numbers:hover { border-color: var(--c-gold); color: var(--c-navy); }
.nav-links .page-numbers.current {
  color: #fff; background: var(--c-navy); border-color: var(--c-navy);
}
.nav-links .page-numbers.dots { border: none; background: none; }

/* =========================================================
   16. 法律条款文档（隐私政策 / 用户协议 / 免责声明 / 服务条款 / 律师声音）
   ========================================================= */
.page-hero__sub {
  color: rgba(255,255,255,.75); font-size: var(--fs-md);
  letter-spacing: var(--ls-wide); text-transform: uppercase; margin: 8px 0 0;
}

.legal-doc { max-width: var(--maxw-narrow); margin: 0 auto; }

.legal-doc__meta {
  display: flex; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) 0; margin-bottom: var(--sp-4);
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-sm); color: var(--c-ink-faint); letter-spacing: 0;
}
.legal-doc__meta span + span::before {
  content: "·"; margin-right: var(--sp-3); color: var(--c-line-strong);
}

.legal-doc__intro {
  font-size: var(--fs-md); color: var(--c-ink); line-height: var(--lh-base);
  padding: var(--sp-3) 0 var(--sp-4);
  text-indent: 2em;
}

/* 目录（横向行内 chips 排列：子项由纵向列改为逐项横排，随宽度自动换行） */
.legal-doc__toc {
  background: var(--c-bg-soft); border-left: 3px solid var(--c-gold);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.legal-doc__toc-title {
  font-size: var(--fs-sm); color: var(--c-navy); font-weight: 700;
  letter-spacing: var(--ls-title); margin: 0 0 var(--sp-2);
}
.legal-doc__toc ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: row; flex-wrap: wrap;
  gap: 6px var(--sp-2); align-items: center;
}
.legal-doc__toc li { padding: 0; break-inside: auto; flex: 0 0 auto; max-width: 100%; }
.legal-doc__toc a {
  display: block; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  padding: 4px 10px; border: 1px solid var(--c-line); border-radius: 999px;
  background: #fff; line-height: 1.6;
  font-size: var(--fs-sm); color: var(--c-ink-soft);
  text-decoration: none; transition: color var(--t);
}
.legal-doc__toc a:hover { color: var(--c-gold); }

/* 条款正文 */
.legal-clause {
  padding: var(--sp-4) 0;
  border-bottom: 1px dashed var(--c-line);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.legal-clause:last-child { border-bottom: none; }
.legal-clause__title {
  display: flex; align-items: baseline; gap: 12px;
  font-size: var(--fs-lg); color: var(--c-navy); margin: 0 0 var(--sp-3);
  letter-spacing: var(--ls-title); line-height: var(--lh-tight);
}
.legal-clause__num {
  flex: 0 0 auto;
  font-family: var(--font-serif); font-size: var(--fs-md);
  color: var(--c-gold); font-weight: 700; letter-spacing: 0;
}
.legal-clause__text p {
  font-size: var(--fs-base); color: var(--c-ink-soft);
  line-height: var(--lh-base); margin: 0 0 var(--sp-2);
  text-indent: 2em;
}
.legal-clause__text p:last-child { margin-bottom: 0; }
.legal-clause__text strong { color: var(--c-navy); font-weight: 600; }

.legal-doc__notice { margin-top: var(--sp-5); }

@media (max-width: 767px) {
  .legal-doc__toc ol { gap: 6px; }
  .legal-doc__toc a { white-space: normal; }
  .legal-doc__toc { padding: var(--sp-3); }
  .legal-clause__title { font-size: var(--fs-md); gap: 8px; }
  .legal-doc__intro { font-size: var(--fs-base); }
}

/* =========================================================
   17. 律师声音（/voice）观点卡片
   ========================================================= */
.voice-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3); margin-top: var(--sp-3);
}
.voice-card {
  display: flex; flex-direction: column;
  padding: var(--sp-4); background: var(--c-bg);
  border: 1px solid var(--c-line); border-radius: var(--radius);
  transition: all var(--t); position: relative; overflow: hidden;
}
.voice-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--c-gold); transform: scaleY(0);
  transform-origin: top; transition: transform var(--t);
}
.voice-card:hover {
  border-color: var(--c-line-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.voice-card:hover::before { transform: scaleY(1); }

.voice-card__top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--sp-2);
}
.voice-card__cat {
  font-size: var(--fs-xs); color: var(--c-gold);
  letter-spacing: var(--ls-title); font-weight: 600;
  background: var(--c-gold-soft); padding: 3px 10px; border-radius: 3px;
}
.voice-card__no {
  font-family: var(--font-serif); font-size: var(--fs-md);
  color: var(--c-line-strong); font-weight: 700; letter-spacing: 0;
}
.voice-card__title {
  font-size: var(--fs-md); color: var(--c-navy); line-height: var(--lh-tight);
  margin: 0 0 var(--sp-2); letter-spacing: var(--ls-title);
}
.voice-card__excerpt {
  font-size: var(--fs-sm); color: var(--c-ink-soft);
  line-height: var(--lh-base); margin: 0 0 var(--sp-3); flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.voice-card__meta {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); color: var(--c-ink-faint);
  padding-top: var(--sp-2); border-top: 1px dashed var(--c-line);
}
.voice-card__sep { color: var(--c-line-strong); }

@media (max-width: 767px) {
  .voice-grid { grid-template-columns: 1fr; }
  .voice-card { padding: var(--sp-3); }
}

/* =========================================================
   18. 案例研究详情（/case-study/{slug}）
   ========================================================= */
.case-summary-box {
  position: relative;
  background: var(--c-bg-soft);
  border-left: 3px solid var(--c-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.case-summary-box__label {
  display: inline-block; font-size: var(--fs-xs);
  color: var(--c-gold); font-weight: 700;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  margin-bottom: 8px;
}
.case-summary-box p {
  margin: 0; font-size: var(--fs-base); color: var(--c-ink);
  line-height: var(--lh-base); text-indent: 2em;
}

.case-body h2 {
  font-size: var(--fs-lg); color: var(--c-navy);
  margin-top: var(--sp-5); margin-bottom: var(--sp-2);
  padding-bottom: 10px; border-bottom: 1px solid var(--c-line);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.case-body h2:first-child { margin-top: 0; }
.case-body h3 { font-size: var(--fs-md); color: var(--c-navy); margin-top: var(--sp-4); }
.case-body p, .case-body li { font-size: var(--fs-base); color: var(--c-ink-soft); line-height: var(--lh-base); }
.case-body p { margin-bottom: var(--sp-2); }
.case-body ul, .case-body ol { padding-left: 1.6em; margin-bottom: var(--sp-3); }
.case-body li { margin-bottom: 6px; }
.case-body blockquote {
  margin: var(--sp-3) 0; padding: var(--sp-2) var(--sp-3);
  border-left: 2px solid var(--c-line-strong);
  background: var(--c-bg-soft); color: var(--c-ink-soft); font-size: var(--fs-sm);
}

/* =========================================================
   19. 用户提问详情（/qa-item/{slug}）
   ========================================================= */
.qa-detail { max-width: var(--maxw-narrow); margin: 0 auto; }

.qa-detail__question {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); background: var(--c-bg-soft);
  border-radius: var(--radius); margin-bottom: var(--sp-4);
}
.qa-detail__avatar {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-navy); color: var(--c-gold-light);
  font-family: var(--font-serif); font-size: var(--fs-md); font-weight: 700;
}
.qa-detail__qbody { flex: 1; min-width: 0; }
.qa-detail__qmeta {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--c-ink-faint); margin-bottom: 8px;
}
.qa-detail__qmeta .tag {
  color: var(--c-gold); background: var(--c-gold-soft);
  padding: 2px 8px; border-radius: 3px; font-weight: 600;
}
.qa-detail__qtext {
  font-size: var(--fs-base); color: var(--c-ink);
  line-height: var(--lh-base); margin: 0;
  white-space: pre-wrap; word-break: break-word;
}

.qa-detail__answer {
  border-top: 1px solid var(--c-line);
  padding-top: var(--sp-4);
}
.qa-detail__ahead {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-sm); color: var(--c-navy);
  font-weight: 700; letter-spacing: var(--ls-title); margin-bottom: var(--sp-3);
}
.qa-detail__ahead::before {
  content: ""; width: 22px; height: 2px; background: var(--c-gold); flex: 0 0 auto;
}
.qa-detail__abody p {
  font-size: var(--fs-base); color: var(--c-ink-soft);
  line-height: var(--lh-base); margin-bottom: var(--sp-2);
}
.qa-detail__abody h3 { font-size: var(--fs-md); color: var(--c-navy); margin: var(--sp-4) 0 var(--sp-2); }
.qa-detail__abody ul, .qa-detail__abody ol { padding-left: 1.6em; }
.qa-detail__abody li { font-size: var(--fs-base); color: var(--c-ink-soft); line-height: var(--lh-base); margin-bottom: 6px; }

.qa-detail__foot {
  margin-top: var(--sp-5); padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-line);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-3); flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--c-ink-faint);
}

@media (max-width: 767px) {
  .qa-detail__question { padding: var(--sp-3); gap: var(--sp-2); }
  .qa-detail__avatar { flex: 0 0 36px; width: 36px; height: 36px; font-size: var(--fs-base); }
  .case-summary-box { padding: var(--sp-3); }
}

/* =========================================================
   20. 响应式断点体系（按真实站点 media.css 的 11 档校准）
   真实断点全集：480 767 991 1199 1200 1280 1360 1440 1560 1680 1919
   本项目取其中对布局有实际影响的档位，逐档收敛排版与栅格。
   说明：这是「对齐真实站点断点数量与位置」的实现，非臆造。
   ========================================================= */

/* —— 1920 以上：宽屏容器放宽至真实 --maxw-wide:1600px —— */
@media (min-width: 1680px) {
  .container { max-width: var(--maxw-wide); }
  :root { --sp-7: 130px; --sp-8: 150px; }
}

/* —— 1560 ~ 1679：容器维持在 1200，留白略放大 —— */
@media (min-width: 1560px) and (max-width: 1679px) {
  :root { --sp-7: 120px; }
}

/* —— 1360 ~ 1559：真实站此档开始压缩标题字号 —— */
@media (max-width: 1559px) {
  :root { --fs-3xl: 46px; --fs-4xl: 52px; --fs-stat: 120px; }
}

/* —— 1200 以下：真实站主断点，栅格由 4 列降 3 列 —— */
@media (max-width: 1199px) {
  :root {
    --fs-3xl: 40px;
    --fs-4xl: 44px;
    --fs-stat: 100px;
    --sp-7: 96px;
    --sp-8: 110px;
  }
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 4 列栅格在 992~1199 区间降到 3 列；5 列的 step-grid 降到 3 列避免每格过窄 */
  .dir-grid, .pillar-grid, .order-grid, .tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-4); }
}

/* —— 991 以下：平板横屏，真实站分界，2 列栅格 —— */
@media (max-width: 991px) {
  :root {
    --fs-3xl: 34px;
    --fs-4xl: 38px;
    --fs-2xl: 30px;
    --fs-stat: 76px;
    --sp-7: 72px;
    --sp-8: 88px;
    --sp-9: 96px;
  }
  .grid--3, .grid--4, .order-grid, .tools-grid,
  .dir-grid, .pillar-grid, .step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-grid { row-gap: var(--sp-4); }
  .honor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* —— 767 以下：移动端，真实站分界（非 768），全部单列 —— */
@media (max-width: 767px) {
  :root {
    --fs-3xl: 28px;
    --fs-4xl: 32px;
    --fs-2xl: 24px;
    --fs-xl: 22px;
    --fs-stat: 56px;
    --sp-7: 56px;
    --sp-8: 64px;
    --sp-9: 72px;
    --gutter: 16px;
    --lh-base: 1.7;
  }
  .grid--2, .grid--3, .grid--4, .order-grid, .tools-grid, .dir-grid,
  .voice-grid, .honor-grid, .pillar-grid, .step-grid { grid-template-columns: 1fr; }
  h1 { line-height: 1.25; }
  h2 { line-height: 1.3; }
}

/* —— 480 以下：小屏，进一步压字号与留白 —— */
@media (max-width: 480px) {
  :root {
    --fs-3xl: 24px;
    --fs-4xl: 26px;
    --fs-2xl: 21px;
    --fs-stat: 44px;
    --sp-7: 44px;
    --sp-8: 52px;
    --sp-9: 56px;
  }
  .btn, .button, .chip { font-size: var(--fs-sm); }
}

/* —— 超大屏 1920+：限制正文行宽，避免长行难读 —— */
@media (min-width: 1920px) {
  .legal-clause__text > p, .case-body > p {
    max-width: var(--maxw-narrow);
  }
}

/* =========================================================
   21. 全局状态层：骨架 / 空态 / 错误 / Toast / Modal / 校验
   说明：真实站点 CSS 中未检索到 skeleton / empty / modal / toast 类名，
        本层为按现代交互规范补齐的实现，非对真实站点的复刻。
        此处标注清楚，避免与「一模一样复刻」的部分混淆。
   ========================================================= */

/* ---------- 21.1 骨架屏 ---------- */
.skeleton {
  display: block;
  background: var(--c-bg-soft);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.65) 50%,
    rgba(255,255,255,0) 100%);
  animation: zsyfShimmer 1.4s infinite;
}
@keyframes zsyfShimmer {
  100% { transform: translateX(100%); }
}
.skeleton--card { padding: var(--sp-3); }
.skeleton__media {
  display: block;
  height: 160px;
  background: var(--c-line);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.skeleton__line {
  display: block;
  height: 12px;
  background: var(--c-line);
  border-radius: 2px;
  margin-bottom: 10px;
}
.skeleton__line--short { width: 62%; }
.skeleton--line { padding: 0; background: none; }
.skeleton--line::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}

/* ---------- 21.2 空状态 ---------- */
.empty-state {
  text-align: center;
  padding: var(--sp-7) var(--sp-4);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius);
  background: var(--c-bg-soft);
}
.empty-state__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-3);
  border: 2px solid var(--c-line-strong);
  border-radius: 50%;
  position: relative;
  opacity: .8;
}
.empty-state__icon::before,
.empty-state__icon::after {
  content: "";
  position: absolute;
  background: var(--c-line-strong);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.empty-state__icon::before { width: 22px; height: 2px; }
.empty-state__icon::after { width: 2px; height: 22px; }
.empty-state__title {
  font-size: var(--fs-md);
  color: var(--c-ink);
  margin: 0 0 var(--sp-1);
  font-weight: 600;
}
.empty-state__desc {
  font-size: var(--fs-sm);
  color: var(--c-ink-faint);
  margin: 0 0 var(--sp-3);
  line-height: var(--lh-base);
}
.empty-state__action { margin-top: var(--sp-1); }

/* ---------- 21.3 Toast ---------- */
.toast-wrap {
  position: fixed;
  top: calc(var(--nav-h) + 16px);
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-ink-faint);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: var(--fs-sm);
  color: var(--c-ink);
  line-height: 1.5;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .24s var(--ease-out), transform .24s var(--ease-out);
}
.toast.is-in { opacity: 1; transform: translateY(0); }
.toast.is-out { opacity: 0; transform: translateY(-8px); }
.toast--success { border-left-color: #2e7d4f; }
.toast--error   { border-left-color: #c0392b; }
.toast--warn    { border-left-color: var(--c-gold); }
.toast--info    { border-left-color: var(--c-navy); }
.toast__icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-top: 1px;
  background: var(--c-line);
  position: relative;
}
.toast--success .toast__icon { background: #2e7d4f; }
.toast--error   .toast__icon { background: #c0392b; }
.toast--warn    .toast__icon { background: var(--c-gold); }
.toast--info    .toast__icon { background: var(--c-navy); }
.toast__text { flex: 1 1 auto; }
.toast__close {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 0 2px;
  font-size: 18px;
  line-height: 1;
  color: var(--c-ink-faint);
  cursor: pointer;
  transition: color .2s;
}
.toast__close:hover { color: var(--c-ink); }

@media (max-width: 767px) {
  .toast-wrap { top: auto; bottom: 16px; left: 16px; right: 16px; max-width: none; }
  .toast { transform: translateY(8px); }
  .toast.is-out { transform: translateY(8px); }
}

/* ---------- 21.4 Modal ---------- */
body.is-modal-open { overflow: hidden; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  transition: opacity .24s var(--ease-out);
}
.modal.is-in .modal__backdrop { opacity: 1; }
.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition: opacity .24s var(--ease-out), transform .24s var(--ease-out);
}
.modal.is-in .modal__dialog { opacity: 1; transform: translateY(0) scale(1); }
.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-line);
}
.modal__title { font-size: var(--fs-md); margin: 0; font-weight: 700; color: var(--c-navy); }
.modal__close {
  background: none;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--c-ink-faint);
  cursor: pointer;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--radius);
  transition: color .2s, background-color .2s;
}
.modal__close:hover { color: var(--c-ink); background: rgba(0,0,0,.04); }
.modal__close svg { display: block; }
.modal__body { padding: var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--c-ink-soft); }
.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--c-line);
  background: var(--c-bg-soft);
}

/* ---------- 21.5 表单状态 ---------- */
.form-error {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: #c0392b;
  line-height: 1.4;
}
.form-error[hidden] { display: none; }
.field-input,
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="url"], input[type="password"],
textarea, select {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  background: #fff;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.field-input:focus,
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(201,162,39,.16);
}
.is-invalid,
input.is-invalid, textarea.is-invalid, select.is-invalid {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,.10);
}
.is-valid,
input.is-valid, textarea.is-valid, select.is-valid {
  border-color: #2e7d4f;
}
input:disabled, textarea:disabled, select:disabled, button:disabled,
.is-disabled {
  opacity: .55;
  cursor: not-allowed;
  background: var(--c-bg-soft);
}

/* 提交按钮 loading 态 */
.btn.is-loading, .button.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: zsyfSpin .7s linear infinite;
}
@keyframes zsyfSpin { to { transform: rotate(360deg); } }

/* ---------- 21.6 图片失败占位 ---------- */
.img-fallback {
  background: var(--c-bg-soft) center/64px no-repeat;
  border: 1px dashed var(--c-line-strong);
  min-height: 80px;
  object-fit: contain;
}
img.is-broken { opacity: .6; }

/* ---------- 21.7 回到顶部 ---------- */
.back-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-navy);
  color: #fff;
  border: 0;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s;
  box-shadow: var(--shadow);
  z-index: 900;
}
.back-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-top:hover { background: var(--c-navy-2); }

/* ---------- 21.8 焦点可见性（无障碍兜底） ---------- */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .back-top { right: 14px; bottom: 14px; width: 40px; height: 40px; }
  .modal { padding: 0; align-items: flex-end; }
  .modal__dialog {
    max-width: none;
    max-height: calc(100vh - 48px);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(24px);
  }
  .modal.is-in .modal__dialog { transform: translateY(0); }
  .modal__body { padding: var(--sp-3); }
  .modal__head { padding: var(--sp-3); }
  .modal__foot { padding: var(--sp-3); }
}

/* =========================================================
   22. 补齐层：模板已使用但样式缺失的类
   ---------------------------------------------------------
   背景：交叉扫描发现 11 个类名在 PHP 模板中被实际使用，
   但 style.css 中完全没有定义，导致这些区块呈现为零样式裸元素。
   本节按设计令牌补齐，与既有 .section-head / .card / .qa-item 视觉对齐。
   ========================================================= */

/* ---------- 22.1 sec-head：section-head 的简写别名 ----------
   用于 page-crimes.php / page-tools.php / category.php
   与 .section-head 保持同一视觉语言，避免两套标题样式 */
.sec-head {
  margin-bottom: var(--sp-5);
}
.sec-head__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--sp-2);
}
.sec-head__title {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  color: var(--c-navy);
  margin: 0;
  font-weight: 700;
}
.sec-head > p {
  margin-top: var(--sp-2);
  color: var(--c-ink-soft);
  max-width: 760px;
}

/* ---------- 22.2 case-grid：案例卡片网格 ----------
   用于 archive-case.php / page-templates/tpl-cases.php
   与 .grid--3 相同的三列栅格，卡片补最小高度避免长短不一 */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}
.case-grid .dir-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 180px;
}
.case-grid .dir-card h3 {
  font-size: var(--fs-md);
  line-height: var(--lh-h5);
  margin: 0;
  color: var(--c-navy);
}
.case-grid .dir-card p {
  margin: 0;
  flex: 1 1 auto;
  color: var(--c-ink-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

/* ---------- 22.3 member-list：会员权益清单 ----------
   用于 page-membership.php <ul class="member-list"> */
.member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.member-list li {
  position: relative;
  padding-left: 26px;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--c-ink-soft);
}
.member-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--c-gold);
  border-bottom: 2px solid var(--c-gold);
  transform: rotate(-45deg);
}

/* ---------- 22.4 tool-form：法律工具表单 ----------
   用于 page-tools.php，含 __actions 操作区 */
.tool-form {
  display: block;
}
.tool-form .form-grid {
  gap: var(--sp-3);
}
.tool-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
}
.tool-form__actions .btn { min-width: 120px; }

/* ---------- 22.5 qa-item__status：问答状态标记 ----------
   用于 archive-qa.php / page-templates/tpl-qa.php，区分「已解答 / 待解答」 */
.qa-item__status {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  line-height: 1.6;
  padding: 2px 8px;
  border-radius: var(--radius);
  background: rgba(196, 147, 94, .1);
  color: var(--c-gold);
  white-space: nowrap;
}

/* ---------- 22.6 news-item__title：资讯条目标题 ----------
   用于 page-research-news.php 列表行 */
.news-item__title {
  display: block;
  font-size: var(--fs-base);
  line-height: var(--lh-h5);
  color: var(--c-navy);
  transition: color var(--t);
}
a:hover .news-item__title,
.news-item:hover .news-item__title { color: var(--c-gold); }

/* ---------- 22.7 legal-doc__body：条款正文容器 ----------
   用于 template-parts/legal-doc.php，5 个条款页共用 */
.legal-doc__body {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-ink-soft);
}
.legal-doc__body > * + * { margin-top: var(--sp-3); }
.legal-doc__body h2 {
  font-size: var(--fs-xl);
  line-height: var(--lh-h4);
  color: var(--c-navy);
  margin-top: var(--sp-6);
}
.legal-doc__body h3 {
  font-size: var(--fs-md);
  line-height: var(--lh-h5);
  color: var(--c-navy);
  margin-top: var(--sp-4);
}
.legal-doc__body ul,
.legal-doc__body ol { padding-left: 1.4em; }
.legal-doc__body li + li { margin-top: 6px; }

/* ---------- 22.8 archive-meta__page：归档分页信息 ----------
   用于 category.php，显示「第 N 页」提示 */
.archive-meta__page {
  display: inline-block;
  font-size: var(--fs-xs);
  color: var(--c-ink-faint);
  margin-left: var(--sp-2);
}

/* ---------- 22.9 响应式：补齐层在窄屏下的收敛 ---------- */
@media (max-width: 1199px) {
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .case-grid { grid-template-columns: 1fr; }
  .sec-head { margin-bottom: var(--sp-4); }
  .sec-head__title { font-size: var(--fs-xl); }
  .tool-form__actions .btn { flex: 1 1 auto; min-width: 0; }
}

/* =========================================================
   23. 本轮核查补充：缺失类定义
   ---------------------------------------------------------
   以下类名在 index.php / 404.php / search.php / single.php /
   author.php 中已使用，但 style.css 此前未定义，会导致这些页面
   出现「无样式裸元素」。此处按既有设计令牌补齐，不引入新色值。
   ========================================================= */

/* ---------- 23.1 正文行宽修正 ----------
   核查发现：.prose 原 max-width 为 860px，配合 14px 正文字号，
   中文每行约 61 字，明显超过阅读舒适上限（35~45 字）。
   860px 是「英文正文」的常见行宽（约 90 字符），中文因字宽等于字号，
   同样像素宽度容纳的字数约为英文的 1.5 倍，必须收窄。

   重要边界：.prose 在本主题被 20+ 个模板复用，其中 page-order.php、
   page-entrust.php 等是【表单页】，容器里放的是多列输入框。
   一刀切收窄会让表单在 1440 屏上被挤成窄条，反而更差。
   因此按「内容类型」分流：
     - 纯阅读型正文（文章详情 / 条款 / 关于我们）→ 720px
     - 含表单/表格的操作型页面 → 保持 860px，由内部元素控制
   ============================================================ */
.prose {
  text-wrap: pretty;
}

/* 阅读型正文：文章详情、单页、律师简介、案例、问答详情
   用 body_class() 输出的 .single / .page-id-* 作为路由依据，
   比在模板里新增 .prose--article 更可靠（无需改 20+ 个模板） */
.single .prose,
.page-template-default .prose,
.single-lawyer .prose,
.single-case .prose,
.single-news .prose,
.single-practice .prose,
.single-qa .prose {
  max-width: 720px;
}

/* 操作型容器保持原宽，避免表单被挤压 */
.page-order .prose,
.page-entrust .prose,
.page-membership .prose,
.page-contact-appoint .prose,
.prose--wide {
  max-width: var(--maxw-narrow);
}

/* 表格与代码块允许突破正文行宽，避免被判定为溢出 */
.prose > table,
.prose > pre,
.prose > .wp-block-table,
.prose > .wp-block-code {
  max-width: none;
  width: 100%;
}
@media (min-width: 1200px) {
  .single .prose,
  .page-template-default .prose,
  .single-lawyer .prose,
  .single-case .prose,
  .single-news .prose,
  .single-practice .prose,
  .single-qa .prose { max-width: 760px; }
}

/* ---------- 23.2 card__title ----------
   用于 index.php 列表项：<h2 class="card__title">
   与既有 .card h3 保持同一视觉规格，避免 H2/H3 换标签后断层 */
.card__title {
  font-size: var(--fs-lg);
  line-height: var(--lh-h4);
  margin-bottom: var(--sp-2);
}
.card__title a { color: inherit; }
.card__title a:hover { color: var(--c-gold); }

/* ---------- 23.3 news-item__title-inner ----------
   用于 search.php：<span class="news-item__title-inner">
   目的：多行标题在 hover 时给出下划线提示，同时不继承 h2 的行高 */
.news-item__title-inner {
  display: inline;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t);
}
a:hover .news-item__title-inner,
.news-item:hover .news-item__title-inner { background-size: 100% 1px; }

/* ---------- 23.4 404 页 ---------- */
.notfound-panel {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius-lg);
  background: var(--c-bg-soft);
}
.notfound-panel__lead {
  color: var(--c-ink-soft);
  font-size: var(--fs-md);
  line-height: var(--lh-h6);
  margin: var(--sp-2) 0 var(--sp-4);
}
.notfound-search {
  display: flex;
  gap: var(--sp-2);
  max-width: 520px;
  margin: 0 auto;
  align-items: stretch;
}
.notfound-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px var(--sp-2);
  font-size: var(--fs-base);
  font-family: inherit;
  color: var(--c-ink);
  background: #fff;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  transition: border-color var(--t), box-shadow var(--t);
}
.notfound-search input[type="search"]:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .15);
}
.notfound-search .btn { flex: 0 0 auto; }
@media (max-width: 480px) {
  .notfound-search { flex-direction: column; }
  .notfound-search .btn { width: 100%; justify-content: center; }
}

/* ---------- 23.5 作者卡（single.php 文末 / author.php 页首） ---------- */
.author-card {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--radius);
  background: var(--c-bg-soft);
  text-align: left;
}
.author-card--lead {
  margin-top: 0;
  margin-bottom: var(--sp-6);
  padding: var(--sp-5);
}
.author-card__avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--c-navy-2), var(--c-navy-3));
  color: var(--c-gold-light);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
}
.author-card--lead .author-card__avatar {
  width: 80px;
  height: 80px;
  font-size: var(--fs-2xl);
}
.author-card__body { flex: 1 1 auto; min-width: 0; }
.author-card__name {
  font-size: var(--fs-md);
  line-height: var(--lh-h4);
  margin: 0 0 6px;
}
.author-card__name a { color: var(--c-navy); }
.author-card__name a:hover { color: var(--c-gold); }
.author-card__bio {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--c-ink-soft);
  margin: 0 0 var(--sp-1);
}
.author-card__meta {
  font-size: var(--fs-xs);
  color: var(--c-ink-faint);
  margin: 0;
}
.author-card__meta a { color: var(--c-gold); }

/* 作者页文章列表 */
.author-posts { max-width: 860px; margin: 0 auto; }
.author-posts .news-item { margin-bottom: var(--sp-2); }

@media (max-width: 480px) {
  .author-card { flex-direction: column; align-items: center; text-align: center; }
  .author-card__body { text-align: center; }
}

/* =========================================================
   24. 无障碍：跳到主要内容（skip-link）
   ---------------------------------------------------------
   键盘 / 读屏用户按下第一个 Tab 时，应能跳过整条导航直达正文。
   header.php 中已输出 <a class="skip-link" href="#main">，
   各模板（含经 template-parts 间接引入的）均已提供 id="main"。

   视觉处理：默认移出视口（而非 display:none，后者无法获得焦点），
   获得焦点时回到左上角，用设计令牌中的藏青底 + 金边，
   与站点既有骨架一致，不引入新色值。
   ========================================================= */

.skip-link {
  position: fixed;
  top: -100px;
  left: var(--sp-4, 16px);
  z-index: 10000;
  padding: 10px 18px;
  background: var(--navy, #16213e);
  color: #fff;
  font-size: var(--fs-sm, 14px);
  border-radius: var(--radius, 6px);
  border: 2px solid var(--gold, #c9a227);
  text-decoration: none;
  transition: top .2s var(--ease, ease);
}

.skip-link:focus,
.skip-link:focus-visible {
  top: var(--sp-4, 16px);
  outline: 2px solid var(--gold, #c9a227);
  outline-offset: 2px;
}

/* ==========================================================================
   25. 表单提交结果条（服务端回跳后渲染）

   为什么不用 Toast：Toast 是 JS 一次性提示，刷新即消失，且服务端回跳后
   DOM 已重建，无法可靠触发。结果条随页面一起渲染，无 JS 也可读，
   刷新可复现，符合「提交结果必须可追溯」的要求。
   ========================================================================== */
.form-notice {
  display: block;
  margin: 0 0 var(--sp-5, 24px);
  padding: 14px 18px;
  border-radius: var(--radius, 6px);
  border-left: 4px solid var(--c-navy, #16213e);
  background: var(--c-soft, #f6f7f9);
  color: var(--c-ink, #1f2430);
  font-size: var(--fs-sm, 14px);
  line-height: 1.7;
  /* 结果条首次出现时轻微下移，引导视线；尊重系统减弱动效偏好 */
  animation: formNoticeIn .28s var(--ease, ease) both;
}

.form-notice--success {
  border-left-color: #1a7f4b;
  background: #eef8f2;
  color: #14603a;
}

.form-notice--error {
  border-left-color: #c0392b;
  background: #fdf1f0;
  color: #a03024;
}

.form-notice--info {
  border-left-color: var(--c-gold, #c9a227);
  background: #fdf9ec;
  color: #7a5f10;
}

@keyframes formNoticeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .form-notice {
    animation: none;
  }
}

/* ==========================================================================
   26. SEO / GEO / AIO 语义块（AI 可读层）

   这一节的全部样式服务于同一件事：让「机器可读的结构」在视觉上也能被
   人一眼认出。类名与 inc/semantic.php、inc/entity.php、inc/source-matrix.php
   的输出严格一一对应，不做任何未在 PHP 中输出的选择器。

   刻画原则：
     - 不加圆角、不用面包屑式阴影，延续全站「近直角」的真实站基调
     - 统一左侧 2px 金色竖线作为「机器块」的视觉记号，与正文明确分层
     - 所有块的最大宽度与正文行宽对齐，避免 TOC 把正文挤成窄条
   ========================================================================== */

/* ---------- 26.1 标题统一：post-title ----------
   speakable 的 cssSelector 指向 .post-title。这个类必须落在页面唯一的 h1 上，
   否则结构化数据里的 speakable 会指向不存在的元素，AI 语音摘取直接失效。
   视觉上与原有 h1 完全一致，仅做「有类在先」的兜底确认。 */
h1.post-title {
  margin: 0 0 var(--sp-2, 16px);
}

/* ---------- 26.2 机器块公共记号 ----------
   .ai-block__title 是 TOC / TL;DR / 参考依据 / 可信度说明 / 延伸查阅
   这五块共用的小标题。尺寸压到正文之上、h2 之下，不与正文 h2 争夺层级。 */
.ai-toc,
.ai-tldr,
.ai-cite,
.ai-trust,
.ai-source {
  margin: 0 0 var(--sp-4, 32px);
  padding: var(--sp-3, 24px);
  border-left: 2px solid var(--c-gold, #c9a227);
  background: var(--c-bg-soft, #f5f6f8);
  border-radius: var(--radius, 2px);
  font-size: var(--fs-sm, 14px);
  line-height: var(--lh-base, 1.75);
  color: var(--c-ink-soft, #5b6472);
}

.ai-tldr,
.ai-toc {
  background: #fbf8ee; /* 金极浅底，与正文底拉开但不抢眼 */
}

.ai-block__title {
  margin: 0 0 var(--sp-2, 16px);
  font-family: var(--font-sans);
  font-size: var(--fs-sm, 14px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: none;
  color: var(--c-navy, #16213e);
}

/* 小标题前加金色短杠，替代图标字体，避免额外请求 */
.ai-block__title::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 2px;
  margin-right: var(--sp-1, 8px);
  vertical-align: middle;
  background: var(--c-gold, #c9a227);
}

/* ---------- 26.3 TL;DR 要点速览 ---------- */
.ai-tldr__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-tldr__list > li {
  position: relative;
  margin: 0 0 var(--sp-1, 8px);
  padding-left: var(--sp-2, 16px);
}

.ai-tldr__list > li:last-child {
  margin-bottom: 0;
}

/* 用 ::before 做项目符号，避免 list-style 在 <ul> 上的跨浏览器差异 */
.ai-tldr__list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 5px;
  height: 5px;
  background: var(--c-gold, #c9a227);
}

.ai-tldr__anchor {
  font-weight: 700;
  color: var(--c-navy, #16213e);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.ai-tldr__anchor:hover,
.ai-tldr__anchor:focus {
  color: var(--c-navy, #16213e);
  border-bottom-color: var(--c-gold, #c9a227);
}

/* 标题与摘要之间用「——」分隔，读起来像一条完整条目，而不是两个孤立片段 */
.ai-tldr__anchor::after {
  content: "——";
  margin: 0 .4em;
  font-weight: 400;
  color: var(--c-ink-faint, #8a93a3);
}

.ai-tldr__text {
  color: var(--c-ink-soft, #5b6472);
}

/* ---------- 26.4 目录 ---------- */
.ai-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ai-toc-counter;
  /* 子项横向排列：由「一行一条」的纵向列表改为行内 chips，
     宽度不足时自动折行，块本身的位置与外观不变。 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--sp-1, 8px);
}

.ai-toc__item {
  counter-increment: ai-toc-counter;
  position: relative;
  margin: 0;
  padding-left: var(--sp-3, 24px);
  flex: 0 0 auto;
  max-width: 100%;
}

.ai-toc__item > a {
  display: block;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 序号用 counter 生成纯文本，避免在 PHP 里写死数字导致增删章节时错位 */
.ai-toc__item::before {
  content: counter(ai-toc-counter) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-ink-faint, #8a93a3);
  font-variant-numeric: tabular-nums;
}

.ai-toc__item a {
  color: var(--c-ink-soft, #5b6472);
  text-decoration: none;
}

.ai-toc__item a:hover,
.ai-toc__item a:focus {
  color: var(--c-navy, #16213e);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* h3 级目录缩进并降权，与 h2 区分层级 */
.ai-toc__item--h3 {
  padding-left: var(--sp-3, 24px);
  font-size: var(--fs-xs, 12px);
}

.ai-toc__item--h3::before {
  content: "·";
  left: var(--sp-1, 8px);
}

/* ---------- 26.5 直答段 ----------
   .ai-answer 是 AEO 的核心：页面第一段直接给结论。
   视觉上略放大、加金色竖线，读者与机器都能一眼定位「这段是答案」。 */
p.ai-answer {
  margin: 0 0 var(--sp-3, 24px);
  padding: var(--sp-2, 16px) var(--sp-3, 24px);
  border-left: 2px solid var(--c-gold, #c9a227);
  background: #fbf8ee;
  font-size: var(--fs-md, 18px);
  line-height: 1.7;
  color: var(--c-ink, #23272f);
}

/* ---------- 26.6 参考依据 / 延伸查阅 ---------- */
.ai-cite__list,
.ai-source__list {
  margin: 0;
  padding-left: var(--sp-3, 24px);
  list-style: decimal;
}

.ai-cite__list > li,
.ai-source__list > li {
  margin: 0 0 6px;
}

.ai-cite__list a,
.ai-source__list a {
  color: var(--c-navy, #16213e);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line-strong, #d4d8df);
}

.ai-cite__list a:hover,
.ai-source__list a:focus,
.ai-cite__list a:focus,
.ai-source__list a:hover {
  border-bottom-color: var(--c-gold, #c9a227);
}

.ai-source__intro {
  margin: 0 0 var(--sp-2, 16px);
  color: var(--c-ink-faint, #8a93a3);
}

/* 适用范围说明做成小标签，跟链接放在同一行但不干扰阅读 */
.ai-source__scope {
  display: inline-block;
  margin-left: var(--sp-1, 8px);
  padding: 0 6px;
  border: 1px solid var(--c-line, #e6e8ec);
  border-radius: var(--radius, 2px);
  background: var(--c-bg, #fff);
  font-size: var(--fs-xs, 12px);
  line-height: 1.6;
  color: var(--c-ink-faint, #8a93a3);
  white-space: nowrap;
}

/* ---------- 26.7 可信度说明（E-E-A-T） ---------- */
.ai-trust__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-trust__list > li {
  display: flex;
  gap: var(--sp-2, 16px);
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--c-line, #e6e8ec);
}

.ai-trust__list > li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* <strong> 是固定四字标签（撰写/审校/依据/时效/免责），
   定宽能让右侧内容对齐成一条竖列，扫读成本最低 */
.ai-trust__list > li > strong {
  flex: 0 0 auto;
  width: 3em;
  color: var(--c-navy, #16213e);
  font-weight: 700;
}

.ai-trust__list a {
  color: var(--c-navy, #16213e);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line-strong, #d4d8df);
}

.ai-trust__list a:hover,
.ai-trust__list a:focus {
  border-bottom-color: var(--c-gold, #c9a227);
}

/* ---------- 26.8 正文锚点定位补偿 ----------
   全站是固定顶栏，点 TOC 跳到 #sec-1-xxx 时标题会被顶栏压住。
   用 scroll-margin-top 让浏览器自己留出空间，比 JS 修正更稳。 */
[id^="sec-"] {
  scroll-margin-top: 96px;
}

/* ---------- 26.9 窄屏收敛 ----------
   手机上金竖线保留（它是「这是机器块」的唯一记号），但内边距与缩进减半，
   否则 24px 的内边距会把可用行宽压到 30 字以下。 */
@media (max-width: 640px) {
  .ai-toc,
  .ai-tldr,
  .ai-cite,
  .ai-trust,
  .ai-source {
    padding: var(--sp-2, 16px);
    margin-bottom: var(--sp-3, 24px);
  }

  p.ai-answer {
    padding: var(--sp-2, 16px);
    font-size: var(--fs-base, 14px);
  }

  .ai-trust__list > li {
    display: block;
  }

  .ai-trust__list > li > strong {
    display: inline-block;
    width: auto;
    margin-right: .5em;
  }

  .ai-source__scope {
    display: block;
    margin: .25em 0 0;
    white-space: normal;
  }
}

/* ---------- 26.10 打印 ----------
   打印时机器块转为纯黑白描边：金色与浅底在黑白打印下变成一团灰，
   既浪费墨又降低可读性。 */
@media print {
  .ai-toc,
  .ai-tldr,
  .ai-cite,
  .ai-trust,
  .ai-source,
  p.ai-answer {
    background: transparent;
    border-left-color: #666;
  }
}