/* ═══════════════════════════════════════════════════════════════
   Apple Design System 04 — 页面专用层
   PART 74-80：律师站落地区块 / 全站导航 / 首页 v2 / 面板标题 / 计算器统一页脚 / 结果工具条 / 相关深色模式
   ---------------------------------------------------------------
   来源：apple-design-system.css v4.0 按 PART 边界物理切分（P1-4.1）
   原文件行区间：第 2657–3784 行

   ⚠ 级联敏感：本仓库的样式由 4 个子文件按文件名序号**顺序加载**，
     加载顺序即优先级顺序，不可调换。若遗漏中间任一文件，后续
     文件里对被遗漏组件的覆盖规则将失去上下文，导致样式错乱。

   加载方式（根目录页面）：
     <link rel="stylesheet" href="css/ads-01-tokens.css">
     <link rel="stylesheet" href="css/ads-02-components.css">
     <link rel="stylesheet" href="css/ads-03-extended.css">
     <link rel="stylesheet" href="css/ads-04-pages.css">

   子目录页面请把 css/ 换成 ../css/。
   全文备份：.workbuddy/dead-css-backup/apple-design-system.full.css
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PART 74: LAWYER PROFILE LANDING BLOCKS (律师个人站落地区块)
   设计稿 v1.3 · 2026-09-08
   Hero / 数据条 / 执业领域 / 深色故事段 / 工具分组 / 办案手记 / 联系 CTA

   设计约束：
   · 主色 #007AFF 与既有站严格一致，本 PART 不引入新色相
   · 工具卡继续复用既有 .dashboard-card，本 PART 只补分组容器
   · 全部为新增选择器，不覆盖既有组件；与 index.html 247 处 !important 无冲突
   · 通栏区块用 --lp-bleed 抵消 .main-content 的左右 padding
   ═══════════════════════════════════════════════════════════════ */

.panel { --lp-bleed: -40px; --lp-pad: 40px; }
@media (min-width: 768px) and (max-width: 1023px) { .panel { --lp-bleed: -24px; --lp-pad: 24px; } }
@media (max-width: 767px) { .panel { --lp-bleed: -14px; --lp-pad: 14px; } }

/* ── 区块通用 ─────────────────────────────────────────── */
.lp-sec { padding: 80px 0 0; }
.lp-sec-eyebrow { font-size: 13px; font-weight: 600; color: #007AFF; letter-spacing: .01em; }
.lp-sec-title { font-size: 34px; font-weight: 600; color: #1D1D1F; margin: 10px 0 0; line-height: 1.32; letter-spacing: -0.01em; }
.lp-sec-desc { font-size: 17px; color: #6E6E73; margin: 12px 0 0; line-height: 1.6; }

/* ── 按钮（pill） ─────────────────────────────────────── */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 30px; border-radius: var(--radius-pill);
  font-size: 17px; font-weight: 600; text-decoration: none;
  transition: transform var(--dur-base) ease, background var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.lp-btn-primary { background: #007AFF; color: #fff; box-shadow: 0 6px 20px rgba(0,122,255,.26); }
.lp-btn-primary:hover { background: #0A84FF; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,122,255,.32); }
.lp-btn-primary:active { transform: scale(.97); }
.lp-btn-ghost { background: #fff; color: #007AFF; border: 1px solid rgba(0,122,255,.35); }
.lp-btn-ghost:hover { background: rgba(0,122,255,.06); transform: translateY(-1px); }

/* ── B Hero ───────────────────────────────────────────── */
.lp-hero {
  margin: 0 var(--lp-bleed);
  padding: 72px var(--lp-pad) 64px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F7 100%);
}
.lp-hero-inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 64px; align-items: center; }
.lp-hero-left { flex: 1; min-width: 0; }

.lp-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: rgba(0,122,255,.10); color: #007AFF;
  font-size: 13px; font-weight: 600;
}
.lp-dot { width: 6px; height: 6px; border-radius: 50%; background: #007AFF; flex: none; }

.lp-hero-title { font-size: 56px; line-height: 1.14; font-weight: 600; letter-spacing: -0.02em; color: #1D1D1F; margin: 20px 0 0; }
.lp-hero-sub { font-size: 19px; line-height: 1.65; color: #6E6E73; margin: 18px 0 0; max-width: 660px; }
.lp-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.lp-hero-trust { font-size: 13px; color: #8E8E93; margin: 18px 0 0; }

/* 律师照片卡（右侧）。照片：assets/lawyer-portrait.jpg
   尺寸按设计稿 420×460；左下角叠「庭审出镜」角标（280×96）。
   照片缺失时 .lp-photo 触发 onerror → 父级加 .no-photo，显示渐变占位，不会开天窗。 */
.lp-hero-right { width: 420px; flex: none; }
.lp-photo-card {
  position: relative;
  width: 100%; aspect-ratio: 420 / 460;
  border-radius: 24px; overflow: hidden;
  background: linear-gradient(160deg, #E8F1FF 0%, #D6E6FF 45%, #F2F2F7 100%);
  box-shadow: 0 12px 40px rgba(0,0,0,.10);
}
.lp-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.lp-photo-card.no-photo .lp-photo { display: none; }
.lp-photo-card.no-photo::after {
  content: "吉";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 120px; font-weight: 700; color: rgba(0,122,255,.28);
}

/* 庭审出镜角标 */
.lp-photo-badge {
  position: absolute; left: 12px; bottom: 12px;
  width: 280px; max-width: calc(100% - 24px);
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: var(--radius-md);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
}
.lp-pb-thumb { width: 72px; height: 72px; border-radius: var(--radius-sm); object-fit: cover; flex: none; }
.lp-pb-text { min-width: 0; }
.lp-pb-tag { font-size: 12px; font-weight: 600; color: #007AFF; }
.lp-pb-title { font-size: 14px; font-weight: 600; color: #1D1D1F; margin-top: 3px; }
.lp-pb-sub { font-size: 12px; color: #6E6E73; margin-top: 2px; }

/* ── C 数据条 ─────────────────────────────────────────── */
.lp-stats {
  margin: 0 var(--lp-bleed);
  padding: 52px var(--lp-pad);
  background: #F5F5F7;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.lp-stat { text-align: center; }
.lp-stat-num { font-family: Inter, 'Noto Sans SC', sans-serif; font-size: 40px; font-weight: 600; color: #1D1D1F; letter-spacing: -0.01em; line-height: 1.1; }
.lp-stat:last-child .lp-stat-num { color: #007AFF; }  /* 「16 个免费工具」设计稿为品牌蓝 */
.lp-stat-label { font-size: 14px; color: #6E6E73; margin-top: 8px; }

/* ── D 执业领域 ───────────────────────────────────────── */
.lp-areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; }
.lp-area { background: #fff; border: 1px solid #E5E5EA; border-radius: var(--radius-md); padding: 24px; transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease, border-color var(--dur-base) ease; }
.lp-area:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); border-color: rgba(0,122,255,.32); }
.lp-area-ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(0,122,255,.10); color: #007AFF; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.lp-area-t { font-size: 19px; font-weight: 600; color: #1D1D1F; margin-top: 16px; }
.lp-area-d { font-size: 14px; color: #6E6E73; margin-top: 8px; line-height: 1.65; min-height: 46px; }

/* ── E 深色故事段 ─────────────────────────────────────── */
.lp-story { margin: 80px var(--lp-bleed) 0; padding: 88px var(--lp-pad); background: #1D1D1F; }
.lp-story-inner { max-width: 1120px; margin: 0 auto; }
.lp-story-eyebrow { font-size: 13px; font-weight: 600; color: #2997FF; }
.lp-story-title { font-size: 40px; font-weight: 600; color: #F5F5F7; margin: 14px 0 0; line-height: 1.3; letter-spacing: -0.01em; }
.lp-story-body { font-size: 17px; line-height: 1.9; color: #AEAEB2; margin: 26px 0 0; max-width: 860px; }
.lp-story-body p { margin: 0 0 20px; }
.lp-story-body p:last-child { margin-bottom: 0; }
.lp-reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 38px; }
.lp-reason { background: #2A2A2C; border-radius: var(--radius-md); padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start; }
.lp-reason-n { font-family: Inter, sans-serif; font-size: 15px; font-weight: 600; color: #2997FF; flex: none; }
.lp-reason-t { font-size: 15px; color: #F5F5F7; line-height: 1.65; }

/* ── F 工具分组（分组容器；卡片本身沿用 .dashboard-card） ── */
.lp-group { margin-top: 48px; }
.lp-group:first-of-type { margin-top: 36px; }
.lp-group-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lp-group-name { font-size: 22px; font-weight: 600; color: #1D1D1F; }
.lp-group-sub { font-size: 15px; color: #6E6E73; }
.lp-group-count { margin-left: auto; font-size: 13px; color: #8E8E93; }
.lp-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 20px; margin-top: 18px; }

/* ── 首页重构 v3：统一工具卡高度 + 描述两行截断（index.html / tools.html 共用） ──
   原卡片高度随描述行数在 184/207/229/251px 间漂移，组内网格错位。
   固定 210px + desc 两行截断，组内/组间严格对齐。 */
.dashboard-card {
  height: 210px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.dashboard-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 767px) {
  .dashboard-card { height: auto; min-height: 196px; }
}


/* ── F+ 办案手记 ──────────────────────────────────────── */
.lp-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.lp-note { display: block; background: #F5F5F7; border: 1px solid transparent; border-radius: var(--radius-md); padding: 24px; text-decoration: none; transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease, border-color var(--dur-base) ease, background var(--dur-base) ease; }
.lp-note:hover { transform: translateY(-2px); background: #fff; border-color: rgba(0,122,255,.35); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.lp-note-tag { font-size: 12px; font-weight: 500; color: #007AFF; }
.lp-note-date { font-size: 12px; color: #8E8E93; margin-top: 4px; }
.lp-note-t { font-size: 19px; font-weight: 600; color: #1D1D1F; margin-top: 12px; line-height: 1.42; }
.lp-note-d { font-size: 14px; color: #6E6E73; margin-top: 10px; line-height: 1.65; }
.lp-note-more { font-size: 14px; font-weight: 600; color: #007AFF; margin-top: 14px; }
.lp-note.is-muted .lp-note-t { color: #48484A; }
.lp-note.is-muted .lp-note-tag { color: #8E8E93; }

/* ── G 联系 CTA ───────────────────────────────────────── */
.lp-cta { margin: 80px var(--lp-bleed) 0; padding: 88px var(--lp-pad); background: #fff; text-align: center; }
.lp-cta-title { font-size: 34px; font-weight: 600; color: #1D1D1F; line-height: 1.42; letter-spacing: -0.01em; }
.lp-cta-desc { font-size: 17px; color: #6E6E73; margin: 14px auto 0; max-width: 620px; line-height: 1.6; }
.lp-cta-actions { margin-top: 28px; }
.lp-cta-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 44px; margin-top: 34px; }
.lp-cta-item { text-align: center; }
.lp-cta-k { font-size: 14px; color: #8E8E93; }
.lp-cta-v { font-family: Inter, 'Noto Sans SC', sans-serif; font-size: 16px; font-weight: 600; color: #007AFF; margin-top: 6px; }
.lp-cta-v a { color: inherit; text-decoration: none; }
.lp-cta-v a:hover { text-decoration: underline; }

/* ── 个人介绍：荣誉与影响力背书条 ─────────────────────── */
.lp-cred { margin: 0 var(--lp-bleed); padding: 38px var(--lp-pad); background: #fff; border-top: 1px solid #EDEDED; border-bottom: 1px solid #EDEDED; }
.lp-cred-inner { max-width: 1200px; margin: 0 auto; }
.lp-cred-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.lp-cred-eyebrow { font-size: 13px; font-weight: 600; color: #007AFF; letter-spacing: .01em; }
.lp-cred-note { font-size: 13px; color: #8E8E93; }
.lp-cred-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.lp-cred-list li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--radius-pill);
  background: rgba(0,122,255,.06); color: #1D1D1F;
  font-size: 14px; font-weight: 500; line-height: 1.4;
}
.lp-cred-list i { color: #007AFF; font-size: 14px; flex: none; }
.lp-cred-list li a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.lp-cred-list li { transition: background var(--dur-base) ease, box-shadow var(--dur-base) ease; cursor: pointer; }
.lp-cred-list li:hover { background: rgba(0,122,255,.12); box-shadow: 0 2px 10px rgba(0,122,255,.18); }
.lp-cred-list li:hover a { color: #007AFF; }

/* ── 响应式 ───────────────────────────────────────────── */
@media (max-width: 1023px) {
  .lp-hero-inner { flex-direction: column; align-items: stretch; gap: 32px; }
  .lp-hero-right { width: 100%; max-width: 420px; }
  .lp-photo-card { aspect-ratio: 4 / 3; }
  .lp-hero-title { font-size: 40px; }
  .lp-sec { padding-top: 64px; }
  .lp-sec-title { font-size: 28px; }
  .lp-stats { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; padding: 44px var(--lp-pad); }
  .lp-areas { grid-template-columns: repeat(2, 1fr); }
  .lp-reasons { grid-template-columns: 1fr; }
  .lp-notes { grid-template-columns: 1fr; }
  .lp-story-title { font-size: 30px; }
  .lp-cta-title { font-size: 28px; }
}
@media (max-width: 767px) {
  .lp-hero { padding: 44px var(--lp-pad) 40px; }
  .lp-hero-title { font-size: 32px; line-height: 1.25; }
  .lp-hero-sub { font-size: 16px; }
  .lp-btn { height: 48px; padding: 0 24px; font-size: 16px; width: 100%; }
  .lp-hero-actions { gap: 10px; }
  .lp-sec { padding-top: 56px; }
  .lp-sec-title { font-size: 24px; }
  .lp-sec-desc { font-size: 15px; }
  .lp-areas { grid-template-columns: 1fr; }
  .lp-area-d { min-height: 0; }
  .lp-story, .lp-cta { margin-top: 56px; padding: 56px var(--lp-pad); }
  .lp-story-body { font-size: 15px; line-height: 1.85; }
  .lp-cta-contact { gap: 18px 28px; }
}

/* 尊重系统「减弱动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  .lp-area, .lp-note, .lp-btn, .dashboard-card { transition: none !important; }
  .lp-area:hover, .lp-note:hover, .lp-btn:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PART 75: SITE NAV — 全站顶部导航（Apple 式 sticky + 滚动收缩）

   为什么改：原 .sidebar 是 height:calc(100vh - 40px) + overflow-y:auto 的
   独立滚动容器，父级 .app-container 又是 overflow:hidden（令 sticky 失效），
   于是页面存在两条互不相干的滚动轴——页面滚动时侧栏不动，只有指针悬停其
   上才能滚动它，与右侧内容严重割裂。改为顶部 sticky 后全页单一滚动轴，
   导航始终跟随，次级入口收进下拉面板。

   参考 Apple.com / Tesla.com 全局导航：全宽毛玻璃、sticky 常驻、滚动后
   收缩并加投影、工具入口收进 mega menu。
   ═══════════════════════════════════════════════════════════════ */

.site-nav {
  display: none;
  /* 用 fixed 而非 sticky：body 上有 overflow-x:hidden，会使 body 成为
     滚动容器并令 sticky 相对 body 定位（等于失效）。fixed 不受影响。 */
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  transition: background var(--dur-slow) ease, box-shadow var(--dur-slow) ease;
}
@media (min-width: 1200px) {
  .site-nav { display: block; }
  /* 为 fixed 顶栏让位：原 body padding-top 40px + 顶栏 56px。
     必须限定 body.has-site-nav：本规则此前是无条件作用于所有引入本表的页面，
     导致没有顶栏的 12 个子页面在 ≥1200px 时凭空多出 96px 顶部空白。
     class 由 index.html 书写、或由 site-nav.js 注入导航时添加。 */
  body.has-site-nav { padding-top: 96px !important; }
}

.site-nav-inner {
  max-width: 1200px; margin: 0 auto;
  height: 56px; padding: 0 24px;
  display: flex; align-items: center; gap: 16px;
  transition: height var(--dur-slow) var(--ease-out-expo);
}
.site-nav.is-compact { background: rgba(255,255,255,.88); box-shadow: 0 1px 16px rgba(0,0,0,.07); }
.site-nav.is-compact .site-nav-inner { height: 48px; }

/* ── 品牌 ─────────────────────────────────────────────── */
.sn-brand { display: flex; align-items: center; gap: 8px; flex: none; text-decoration: none; }

/* 顶栏 logo：沿用侧栏 logo 的结构与特效（large-char 渐变浮动 + 连击彩蛋），
   但改为单行横排以适配 56px 高度。原 .logo-text-top/bottom 是竖排两行 26px，
   顶栏放不下，故在此覆盖为横排 17px。 */
.site-nav .logo-text { display: flex; align-items: baseline; gap: 1px; }
.site-nav .logo-text-top,
.site-nav .logo-text-bottom {
  font-size: 17px; font-weight: 700; line-height: 1.1;
  color: #007AFF; margin: 0;
}
.site-nav .large-char { font-size: 23px; }
.site-nav .logo-version { margin: 0; font-size: 10px; padding: 2px 8px; }
.site-nav .sn-logo-text { transform-origin: left center; }

/* ── 主链接（button 与 a 同形） ────────────────────────── */
.sn-links { display: flex; align-items: center; gap: 2px; }
.site-nav .sn-link {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 12px; border-radius: 8px;
  margin: 0; border: 0; background: transparent;
  font-family: inherit; font-size: 14px; color: #6E6E73;
  text-decoration: none; cursor: pointer;
  transition: color var(--dur-base) ease, background var(--dur-base) ease;
}
.site-nav .sn-link:hover { color: #007AFF; background: rgba(0,122,255,.08); }
.site-nav .sn-link.on { color: #007AFF; font-weight: 600; }
/* 压掉侧边栏遗留的 .nav-item.on::before 蓝色竖条 */
.site-nav .sn-link::before { display: none !important; }

/* ── 右侧操作 ─────────────────────────────────────────── */
.sn-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.sn-menu-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: var(--radius-pill);
  border: 1px solid rgba(0,0,0,.10); background: #fff;
  font-family: inherit; font-size: 14px; font-weight: 500; color: #1D1D1F;
  cursor: pointer; transition: border-color var(--dur-base) ease, color var(--dur-base) ease;
}
.sn-menu-btn:hover { border-color: rgba(0,122,255,.40); color: #007AFF; }
.sn-caret { font-size: 11px; transition: transform var(--dur-base) ease; }
.site-nav.menu-open .sn-menu-btn { border-color: rgba(0,122,255,.40); color: #007AFF; }
.site-nav.menu-open .sn-caret { transform: rotate(180deg); }

.sn-cta {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 16px; border-radius: var(--radius-pill);
  background: #007AFF; color: #fff;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background var(--dur-base) ease, transform var(--dur-base) ease;
}
.sn-cta:hover { background: #0A84FF; transform: translateY(-1px); }

/* ── 下拉面板：全部工具 ───────────────────────────────── */
.sn-menu {
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  animation: snMenuIn var(--dur-base) var(--ease-out-expo) both;
}
.sn-menu[hidden] { display: none; }
@keyframes snMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sn-menu-inner {
  max-width: 1200px; margin: 0 auto; padding: 26px 24px 30px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 28px;
}
.sn-mg { min-width: 0; }
.sn-mg-t { font-size: 12px; font-weight: 600; color: #8E8E93; letter-spacing: .04em; padding: 0 10px 6px; }

/* 菜单项：button（本页 tab）与 a（独立页面）同形。
   .site-nav .sn-mi 为 0,2,0，压过侧边栏遗留的 .nav-item（0,1,0）样式。 */
.site-nav .sn-mi {
  display: flex; align-items: center; gap: 10px;
  width: 100%; box-sizing: border-box;
  margin: 0 0 2px; padding: 9px 10px;
  border: 0; background: transparent; border-radius: 8px;
  font-family: inherit; font-size: 14px; line-height: 1.4; font-weight: 500;
  color: #1D1D1F; text-align: left; text-decoration: none;
  cursor: pointer; position: static;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.site-nav .sn-mi::before { display: none !important; }
.site-nav .sn-mi:hover { background: rgba(0,122,255,.08); color: #007AFF; }
.site-nav .sn-mi > i { width: 16px; flex: none; font-size: 13px; color: #8E8E93; text-align: center; }
.site-nav .sn-mi:hover > i { color: #007AFF; }
.site-nav .sn-mi.on { background: rgba(0,122,255,.10); color: #007AFF; font-weight: 600; }
.site-nav .sn-mi.on > i { color: #007AFF; }
/* 工具箱菜单项：本页 tab 入口渲染为 <button class="sn-mi nav-item">，独立页入口渲染为
   <a class="sn-mi">。.nav-item 是侧栏遗留样式（min-height:44px / font-weight:500 /
   :hover translateX(2px) / .on 内描边+毛玻璃），会让同组内两类入口在尺寸、字重、
   hover 位移上不一致。此处以更高特异度(0,3,0)把 .nav-item 形态压平为 .sn-mi 外观——
   仅统一视觉，行为不变（按钮仍按 data-tab 切页内标签页，链接仍跳独立页）。 */
.site-nav .sn-mi.nav-item {
  min-height: 0;
  font-weight: 500;
  box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transform: none;
}
.site-nav .sn-mi.nav-item:hover { transform: none; }
.site-nav .sn-mi.nav-item.on {
  font-weight: 600;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  transform: none;
}


/* 侧边栏彻底退出（原 ≤1199px 已隐藏，此处补 ≥1200px） */
@media (min-width: 1200px) {
  .sidebar { display: none !important; }
}

/* 锚点跳转时给 sticky 导航留出高度，避免标题被压在条下 */
#tools, #notes, #contact { scroll-margin-top: 76px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav-inner, .sn-caret, .sn-menu { transition: none !important; animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   PART 79: 站点导航 · 深色模式

   背景（2026-09-10 实测确认的全站级缺陷）：
   导航组件（site-nav.js 的 NAV_CSS + 本文件 PART 75）把浅色玻璃底写成字面量
   （rgba(255,255,255,.72/.82/.92)、#fff），且**只有命令面板**做过深色适配
   （NAV_CSS 内 body.dark-mode .sn-cmd-*）。结果：用户切到深色后
   body 铺底已是 rgb(0,0,0)，顶部导航条 / 工具箱面板 / 移动顶栏 / 移动抽屉
   仍是纯白 —— 页面出现一条不通主题的白带，命令面板却是深色，同一屏内两种语言。

   写法约定：
   1) 只挂在 body.dark-mode 上。该 class 是"站内当前为深色"的唯一判定标记
      （common.js applyTheme 与 site-nav.js 主题模块都会显式写 light-mode/dark-mode，
      lawyer-nav 自带开关同理），无 class 即浅色，浅色导航本就正确，无需 @media 变体。
   2) 选择器一律比 NAV_CSS 的对应规则多一层 class（body.dark-mode），
      因此不依赖样式表插入顺序即可稳定覆盖（NAV_CSS 由 site-nav.js 运行时
      追加到 head 末尾，位置在本文件之后）。
   3) 深色值沿用 PART 9 深色令牌的同一套取值：面 #1C1C1E / 隆起 rgba(44,44,46,.85) /
      文字 #F5F5F7 / 次级 #8E8E93 / 分隔 rgba(255,255,255,.10) / 主色 #0A84FF。
   ══════════════════════════════════════════════════════════════ */

/* ── 桌面导航条 ─────────────────────────────────────────── */
body.dark-mode .site-nav {
  background: rgba(28, 28, 30, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
body.dark-mode .site-nav.is-compact {
  background: rgba(28, 28, 30, 0.88);
  box-shadow: 0 1px 16px rgba(0, 0, 0, 0.44);
}
body.dark-mode .site-nav .logo-text-top,
body.dark-mode .site-nav .logo-text-bottom { color: #F5F5F7; }
body.dark-mode .site-nav .logo-version {
  color: #0A84FF; background: rgba(10, 132, 255, 0.18);
}
body.dark-mode .site-nav .sn-link { color: #F5F5F7; }
body.dark-mode .site-nav .sn-link:hover { color: #0A84FF; background: rgba(10, 132, 255, 0.16); }
body.dark-mode .site-nav .sn-link.on { color: #0A84FF; }

/* ── 右动作区按钮 ───────────────────────────────────────── */
body.dark-mode .sn-search-btn,
body.dark-mode .sn-menu-btn {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #F5F5F7;
}
body.dark-mode .sn-search-btn .sn-kbd {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.14);
  color: #8E8E93;
}
body.dark-mode .sn-menu-btn:hover { border-color: rgba(10, 132, 255, 0.55); color: #0A84FF; }
body.dark-mode .site-nav.menu-open .sn-menu-btn { border-color: rgba(10, 132, 255, 0.55); color: #0A84FF; }
body.dark-mode .sn-cta { background: #0A84FF; }

/* 主题开关（site-nav.js 注入，仅设计系统页面存在） */
body.dark-mode .sn-theme {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #F5F5F7;
}
body.dark-mode .sn-theme:hover { border-color: rgba(10, 132, 255, 0.55); color: #0A84FF; }
body.dark-mode .sn-theme-mtb { color: #0A84FF; }

/* ── 工具箱下拉面板 ─────────────────────────────────────── */
body.dark-mode .sn-menu {
  background: rgba(28, 28, 30, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
body.dark-mode .sn-mg-t { color: #8E8E93; }
body.dark-mode .site-nav .sn-mi { color: #F5F5F7; }
body.dark-mode .site-nav .sn-mi:hover { background: rgba(10, 132, 255, 0.16); color: #0A84FF; }
body.dark-mode .site-nav .sn-mi.on { background: rgba(10, 132, 255, 0.20); color: #0A84FF; }
body.dark-mode .site-nav .sn-mi.nav-item {
  min-height: 0; font-weight: 500;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  transform: none;
}
body.dark-mode .site-nav .sn-mi.nav-item:hover { transform: none; }
body.dark-mode .site-nav .sn-mi.nav-item.on {
  font-weight: 600;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  transform: none;
}


/* ── 移动顶栏 ───────────────────────────────────────────── */
body.dark-mode .sn-m-bar {
  background: rgba(28, 28, 30, 0.86);
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
body.dark-mode .sn-m-line { color: #F5F5F7; }
body.dark-mode .sn-m-title { color: #F5F5F7; }
body.dark-mode .sn-m-ver { color: #0A84FF; background: rgba(10, 132, 255, 0.18); }

/* ── 移动抽屉 ───────────────────────────────────────────── */
body.dark-mode .sn-m-drawer {
  background: #1C1C1E;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.60);
}
body.dark-mode .sn-m-dh { border-bottom-color: rgba(255, 255, 255, 0.10); }
body.dark-mode .sn-m-dh-t { color: #F5F5F7; }
body.dark-mode .sn-m-close { background: rgba(255, 255, 255, 0.10); color: #F5F5F7; }
body.dark-mode .sn-m-gt { color: #8E8E93; }
body.dark-mode .sn-m-item { color: #F5F5F7; }
body.dark-mode .sn-m-item:active { background: rgba(10, 132, 255, 0.16); }
body.dark-mode .sn-m-item.on { background: rgba(10, 132, 255, 0.20); color: #0A84FF; }
body.dark-mode .sn-m-sep { background: rgba(255, 255, 255, 0.10); }
body.dark-mode .sn-m-home { background: #0A84FF; }

/* ══════════════════════════════════════════════════════════════
   PART 76: HOMEPAGE V2 — 工具核心 Hero / 关于入口条 / 介绍弹窗
   + iOS 动效（弹簧呈现、按压回弹、错峰入场、reduced-motion 降级）

   设计口径：计算器优先。个人介绍降为「入口条 + 弹窗 + about.html」，
   完整组件结构见画布 13:2 / 13:27 / 13:35 / 13:93。
   ══════════════════════════════════════════════════════════════ */

/* ── 工具核心 Hero ─────────────────────────────────────── */
.lp-hero-tools {
  margin: 0 var(--lp-bleed);
  padding: 64px var(--lp-pad) 52px;
  background: linear-gradient(180deg, #F5F5F7 0%, #FFFFFF 100%);
  text-align: center;
}
.lp-hero-tools-inner { max-width: 720px; margin: 0 auto; }
.lp-hero-tools-title {
  margin: 22px 0 0;
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.16; font-weight: 700;
  letter-spacing: -0.022em; color: #1D1D1F;
}
.lp-hero-tools-sub {
  margin: 18px auto 0; max-width: 560px;
  font-size: 16px; line-height: 1.75; color: #6E6E73;
}
.lp-hero-tools-trust { margin: 26px 0 0; font-size: 13px; color: #8E8E93; }

/* ── iOS 搜索框 ────────────────────────────────────────── */
.lp-search { position: relative; max-width: 560px; margin: 32px auto 0; }
.lp-search-ic {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: #8E8E93; font-size: 15px; pointer-events: none;
  transition: color var(--dur-base) ease;
}
.lp-search:focus-within .lp-search-ic { color: #007AFF; }
.lp-search-input {
  width: 100%; box-sizing: border-box; height: 48px;
  margin: 0; padding: 0 44px;
  border: 1px solid transparent; border-radius: 12px;
  background: rgba(118,118,128,.10);
  font-family: inherit; font-size: 16px; color: #1D1D1F;
  outline: none; -webkit-appearance: none; appearance: none;
  transition: background var(--dur-base) ease, box-shadow var(--dur-base) ease, border-color var(--dur-base) ease;
}
.lp-search-input::placeholder { color: #8E8E93; }
.lp-search-input:focus {
  background: #fff; border-color: rgba(0,122,255,.45);
  box-shadow: 0 0 0 4px rgba(0,122,255,.12);
}
.lp-search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(118,118,128,.18); color: #6E6E73;
  font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) ease, transform var(--dur-base) ease;
}
.lp-search-clear:hover { background: rgba(118,118,128,.30); }
.lp-search-clear:active { transform: translateY(-50%) scale(.9); }
.lp-search-clear[hidden] { display: none; }
.lp-search-empty { padding: 30px 0 6px; text-align: center; font-size: 14px; color: #8E8E93; }
.lp-search-empty i { margin-right: 6px; }

/* ── 全站命令面板入口（Ctrl / ⌘ + K） ─────────────────── */
.lp-cmd-open {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 14px auto 0; padding: 8px 14px;
  border: 1px solid rgba(0,122,255,.20); border-radius: var(--radius-pill);
  background: rgba(0,122,255,.06); color: #007AFF;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--dur-base) ease, border-color var(--dur-base) ease, transform var(--dur-fast) ease;
}
.lp-cmd-open:hover { background: rgba(0,122,255,.12); border-color: rgba(0,122,255,.38); }
.lp-cmd-open:active { transform: scale(.97); }
.lp-cmd-open > i { font-size: 12px; }
/* 触摸设备无物理键盘，「Ctrl K」快捷键提示对用户无意义，
   且 10.5px 在手机上难辨。触摸档直接隐藏，不占位。 */
@media (pointer: coarse), (max-width: 767px) {
  .lp-cmd-kbd { display: none; }
}
.lp-cmd-kbd {
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: #6E6E73; background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.10); border-radius: 5px; padding: 1px 6px;
}
body.dark-mode .lp-cmd-open { background: rgba(10,132,255,.16); border-color: rgba(10,132,255,.34); color: #0A84FF; }
body.dark-mode .lp-cmd-kbd { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.16); color: #D1D1D6; }

/* ── 快捷 chips ────────────────────────────────────────── */
.lp-chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin-top: 22px;
}
.lp-chip {
  display: inline-flex; align-items: center;
  height: 36px; padding: 0 16px; margin: 0;
  border-radius: var(--radius-pill); border: 1px solid rgba(0,0,0,.08); background: #fff;
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: #1D1D1F; text-decoration: none; cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out-expo),
              border-color var(--dur-base) ease, color var(--dur-base) ease, background var(--dur-base) ease;
}
.lp-chip:hover { border-color: rgba(0,122,255,.40); color: #007AFF; }
.lp-chip.on { background: #007AFF; border-color: #007AFF; color: #fff; }
.lp-chip:active { transform: scale(.96); }

/* ── 关于律师 · 轻量入口条 ─────────────────────────────── */
.lp-about-entry { padding: 72px 0 0; }
.lp-about-entry-card {
  display: flex; align-items: center; gap: 18px;
  width: 100%; box-sizing: border-box; margin: 0;
  padding: 18px 22px;
  border: 1px solid rgba(0,0,0,.06); border-radius: 18px;
  background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.05);
  font-family: inherit; text-align: left; cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) ease;
}
.lp-about-entry-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.08); }
.lp-about-entry-card:active { transform: scale(.985); }
.lp-ae-avatar {
  width: 56px; height: 56px; flex: none;
  border-radius: 50%; object-fit: cover; background: #F2F2F7;
}
.lp-ae-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lp-ae-name { font-size: 17px; font-weight: 600; color: #1D1D1F; }
.lp-ae-role { font-style: normal; font-size: 13px; font-weight: 500; color: #007AFF; margin-left: 8px; }
.lp-ae-desc { font-size: 14px; line-height: 1.6; color: #6E6E73; }
.lp-ae-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: #007AFF;
}
.lp-ae-btn i { font-size: 12px; transition: transform var(--dur-base) ease; }
.lp-about-entry-card:hover .lp-ae-btn i { transform: translateX(3px); }

/* ── 顶栏圆形头像入口 ──────────────────────────────────── */
.sn-avatar {
  width: 36px; height: 36px; flex: none; margin: 0; padding: 0;
  border: 0; border-radius: 50%; overflow: hidden;
  background: #F2F2F7; cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) ease;
}
.sn-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sn-avatar:hover { box-shadow: 0 0 0 3px rgba(0,122,255,.18); }
.sn-avatar:active { transform: scale(.94); }

/* ── 个人介绍弹窗（桌面居中卡） ────────────────────────── */
.lp-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.lp-modal[hidden] { display: none; }
.lp-modal-mask {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.40);
  opacity: 0; transition: opacity var(--dur-slow) ease;
}
.lp-modal.show .lp-modal-mask { opacity: 1; }
.lp-modal-card {
  position: relative;
  width: min(400px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg); background: #fff;
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
  opacity: 0; transform: scale(.94) translateY(12px);
  transition: opacity var(--dur-slow) ease,
              transform .34s cubic-bezier(.175,.885,.32,1.14);
}
.lp-modal.show .lp-modal-card { opacity: 1; transform: none; }
.lp-modal-x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 30px; height: 30px; padding: 0; margin: 0;
  border: 0; border-radius: 50%;
  background: rgba(118,118,128,.12); color: #6E6E73;
  font-size: 16px; line-height: 1; cursor: pointer;
  transition: background var(--dur-base) ease, transform var(--dur-base) ease;
}
.lp-modal-x:hover { background: rgba(118,118,128,.22); }
.lp-modal-x:active { transform: scale(.92); }
.lp-modal-grab { display: none; }
.lp-modal-body { padding: 34px 28px 26px; text-align: center; }
.lp-modal-avatar {
  width: 88px; height: 88px;
  border-radius: 50%; object-fit: cover; background: #F2F2F7;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(0,122,255,.18);
}
.lp-modal-name { margin-top: 14px; font-size: 22px; font-weight: 700; color: #1D1D1F; }
.lp-modal-role { margin-top: 4px; font-size: 13px; color: #8E8E93; }
.lp-modal-chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; margin-top: 18px;
}
.lp-mc {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: var(--radius-pill);
  background: rgba(0,122,255,.08); color: #007AFF;
  font-size: 12.5px; font-weight: 500;
}
.lp-mc i { font-size: 11px; }
.lp-modal-rule { height: 1px; background: #E5E5EA; margin: 22px 0 18px; }
.lp-modal-go { width: 100%; justify-content: center; }
.lp-modal-hint { margin: 14px 0 0; font-size: 12px; color: #8E8E93; }

/* ── 移动端：底部 sheet ────────────────────────────────── */
@media (max-width: 767px) {
  .lp-modal { padding: 0; align-items: flex-end; }
  .lp-modal-card {
    width: 100%; max-width: 100%;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: opacity var(--dur-base) ease,
                transform .36s cubic-bezier(.175,.885,.32,1.08);
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .lp-modal.show .lp-modal-card { transform: none; }
  .lp-modal-grab {
    display: block;
    width: 38px; height: 5px; border-radius: 3px;
    background: rgba(0,0,0,.16); margin: 8px auto 0;
  }
  .lp-modal-body { padding-top: 22px; }
  .lp-hero-tools { padding-top: 44px; }
  .lp-about-entry-card { gap: 14px; padding: 16px; }
  .lp-ae-desc { font-size: 13px; }
  .lp-ae-btn { display: none; }
}

/* ── iOS 动效：错峰入场 ────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes lpRise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
  .lp-hero-tools-inner > * { animation: lpRise .64s var(--ease-out-expo) both; }
  .lp-hero-tools-inner > *:nth-child(1) { animation-delay: .03s; }
  .lp-hero-tools-inner > *:nth-child(2) { animation-delay: .09s; }
  .lp-hero-tools-inner > *:nth-child(3) { animation-delay: .15s; }
  .lp-hero-tools-inner > *:nth-child(4) { animation-delay: .21s; }
  .lp-hero-tools-inner > *:nth-child(5) { animation-delay: .27s; }
  .lp-hero-tools-inner > *:nth-child(6) { animation-delay: .33s; }
}

/* ── iOS 动效：reduced-motion 降级 ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lp-hero-tools-inner > *,
  .lp-modal-card, .lp-modal-mask,
  .lp-chip, .lp-about-entry-card, .sn-avatar {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PART 77: PANEL TITLE（语义降级，视觉不变）
   背景：index.html 曾用 5 个 <h1> 作各计算面板标题，违反"每页一个 h1"。
   现将面板标题改为 <h2 class="panel-h">，本规则让其保持原 h1 的视觉规格
   （含 480px 断点的字号下调，与 h1 的响应式行为一致）。
   ═══════════════════════════════════════════════════════════ */
.panel-h {
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

@media (max-width: 480px) {
  .panel-h { font-size: 1.625rem; }
}

/* ═══════════════════════════════════════════════════════════
   PART 78: SR-ONLY（对读屏可见、视觉隐藏）
   用于给"视觉上不是标题元素"的页面提供唯一的 h1，满足语义规范。
   ═══════════════════════════════════════════════════════════ */
.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;
}

/* ═══════════════════════════════════════════════════════════════
   PART 77: 计算器页统一页脚（备案与合规，2026-09-10 新增）
   8 个计算器页原先完全没有页脚，缺备案信息（合规缺口）。
   此处提供单一来源的页脚样式，页面仅需插入 .calc-footer 结构。
   配色全部走令牌，自动适配浅色/深色模式。
   ═══════════════════════════════════════════════════════════════ */
.calc-footer {
  margin: 32px auto 0;
  width: 100%;
  max-width: 1200px;
  padding: 26px 16px 20px;
  border-top: 1px solid var(--color-border-light);
  text-align: center;
  font-size: 12px;
  color: var(--color-text-light);
  line-height: 1.7;
}
.calc-footer-inner {
  max-width: 860px;
  margin: 0 auto;
}
.calc-footer-warn {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 11px 15px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-bg);
  color: var(--color-text-secondary);
  text-align: left;
  font-size: 12.5px;
  line-height: 1.7;
}
.calc-footer-warn i {
  color: var(--color-primary);
  margin-top: 3px;
  flex: none;
}
.calc-footer .beian-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 20px;
  margin: 14px 0 12px;
}
.calc-footer-copy > div {
  margin-top: 4px;
}
@media (max-width: 480px) {
  .calc-footer {
    margin-top: 24px;
    padding: 20px 12px 16px;
    font-size: 11.5px;
  }
  .calc-footer-warn {
    font-size: 12px;
  }
}
@media print {
  .calc-footer.no-print {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PART 78: 结果工具条（复制结果 / 打印导出，2026-09-10 新增）
   由 common.js 的 initResultTools() 自动挂载到 .res 容器末尾，页面零改动。
   容器 .res 默认 display:none，故未出结果时工具条天然不可见。
   ═══════════════════════════════════════════════════════════════ */
.res-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-light);
}
.res-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--btn-h-sm);
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 13px;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--btn-dur) var(--ease-standard),
              border-color var(--btn-dur) var(--ease-standard),
              color var(--btn-dur) var(--ease-standard),
              transform var(--btn-dur) var(--ease-standard);
}
.res-tool-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.res-tool-btn:active {
  transform: scale(var(--btn-press));
}
.res-tool-btn i {
  font-size: 12px;
}
@media (max-width: 480px) {
  .res-tools {
    justify-content: stretch;
  }
  .res-tool-btn {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   PART 80: 首页 v2 / 个人介绍 · lp- 组件深色模式

   背景（2026-09-10 截图实测）：PART 74 / PART 76 的 lp- 组件族把浅色面与墨色
   全部写成字面量（#fff / #F5F5F7 / #1D1D1F / #6E6E73 / #E5E5EA），
   且只有 .lp-cmd-open / .lp-cmd-kbd 两个元素做过深色适配。后果：
     · index.html 深色下 Hero 是一整块白渐变、CTA 与手记卡是白块、
       分节标题（.lp-sec-title）与分组名（.lp-group-name）是「黑底黑字」不可读；
     · about.html 深色下荣誉条 / 数据条 / 执业领域 / CTA 全为白块。
   本 PART 只做「取值替换」，不动任何尺寸、排版与动效 —— 浅色渲染逐条不变。

   取值映射（对齐 PART 9 深色令牌）：
     白面 #fff        → #1C1C1E（bg-800 面）
     #F5F5F7 面       → #1C1C1E（同一层，靠描边区分）
     浅色渐变         → #0E0E10 → #000000（Hero）/ 深蓝渐变（照片卡占位）
     #F2F2F7 占位底   → #2C2C2E
     墨色 #1D1D1F     → #F5F5F7（text-50）
     次级 #6E6E73     → #AEAEB2（text-300）
     描边 #E5E5EA/#EDEDED → rgba(255,255,255,.12) / .10
     主色 #007AFF     → #0A84FF（brand-400，深底上对比更好）
   ══════════════════════════════════════════════════════════════ */

/* ── 通用区块 ───────────────────────────────────────────── */
body.dark-mode .lp-sec-title { color: #F5F5F7; }
body.dark-mode .lp-sec-desc { color: #AEAEB2; }
body.dark-mode .lp-sec-eyebrow { color: #0A84FF; }
/* 首页工具分组的组标题/副标题（首版 PART 80 漏项，由可读性守卫抓出：
   黑底 #1D1D1F 文字 = 对比 1.2:1） */
body.dark-mode .lp-group-name { color: #F5F5F7; }
body.dark-mode .lp-group-sub { color: #AEAEB2; }
body.dark-mode .lp-group-count { color: #8E8E93; }

/* ── 按钮 ───────────────────────────────────────────────── */
body.dark-mode .lp-btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #0A84FF;
  border-color: rgba(10, 132, 255, 0.45);
}
body.dark-mode .lp-btn-ghost:hover { background: rgba(10, 132, 255, 0.16); }

/* ── B Hero（个人介绍页 .lp-hero / 首页 .lp-hero-tools） ── */
body.dark-mode .lp-hero {
  background: linear-gradient(180deg, #0E0E10 0%, #000000 100%);
}
body.dark-mode .lp-hero-tools {
  background: linear-gradient(180deg, #0E0E10 0%, #000000 100%);
}
body.dark-mode .lp-hero-title,
body.dark-mode .lp-hero-tools-title { color: #F5F5F7; }
body.dark-mode .lp-hero-sub,
body.dark-mode .lp-hero-tools-sub { color: #AEAEB2; }
body.dark-mode .lp-photo-card {
  background: linear-gradient(160deg, #12213A 0%, #0E1B2E 45%, #1C1C1E 100%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.50);
}
body.dark-mode .lp-photo-badge { background: rgba(28, 28, 30, 0.94); }
body.dark-mode .lp-pb-title { color: #F5F5F7; }
body.dark-mode .lp-pb-sub { color: #AEAEB2; }
body.dark-mode .lp-tag { background: rgba(10, 132, 255, 0.18); color: #0A84FF; }

/* ── 首页：iOS 搜索框 / 快捷 chips ─────────────────────── */
body.dark-mode .lp-search-input { color: #F5F5F7; }
body.dark-mode .lp-search-input::placeholder { color: #8E8E93; }
body.dark-mode .lp-search-input:focus {
  background: #1C1C1E;
  border-color: rgba(10, 132, 255, 0.55);
}
body.dark-mode .lp-search-clear { color: #D1D1D6; }
body.dark-mode .lp-chip {
  background: #1C1C1E;
  border-color: rgba(255, 255, 255, 0.14);
  color: #F5F5F7;
}
body.dark-mode .lp-chip:hover { border-color: rgba(10, 132, 255, 0.55); color: #0A84FF; }

/* ── 首页：关于律师入口条 + 弹窗 ────────────────────────── */
body.dark-mode .lp-about-entry-card {
  background: #1C1C1E;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
body.dark-mode .lp-about-entry-card:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); }
body.dark-mode .lp-ae-name { color: #F5F5F7; }
body.dark-mode .lp-ae-desc { color: #AEAEB2; }
body.dark-mode .lp-ae-btn { color: #0A84FF; }
body.dark-mode .lp-ae-avatar,
body.dark-mode .lp-modal-avatar,
body.dark-mode .sn-avatar { background: #2C2C2E; }
body.dark-mode .lp-modal-card { background: #1C1C1E; }
body.dark-mode .lp-modal-x { color: #D1D1D6; }
body.dark-mode .lp-modal-name { color: #F5F5F7; }
body.dark-mode .lp-modal-rule { background: rgba(255, 255, 255, 0.12); }
body.dark-mode .lp-mc { background: rgba(10, 132, 255, 0.16); color: #0A84FF; }

/* ── 个人介绍页：数据条 / 执业领域 / 荣誉条 ─────────────── */
body.dark-mode .lp-stats { background: #1C1C1E; }
body.dark-mode .lp-stat-num { color: #F5F5F7; }
body.dark-mode .lp-stat:last-child .lp-stat-num { color: #0A84FF; }
body.dark-mode .lp-stat-label { color: #AEAEB2; }
body.dark-mode .lp-area {
  background: #1C1C1E;
  border-color: rgba(255, 255, 255, 0.12);
}
body.dark-mode .lp-area-t { color: #F5F5F7; }
body.dark-mode .lp-area-d { color: #AEAEB2; }
body.dark-mode .lp-area-ic { background: rgba(10, 132, 255, 0.16); color: #0A84FF; }
body.dark-mode .lp-cred {
  background: #1C1C1E;
  border-top-color: rgba(255, 255, 255, 0.10);
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
body.dark-mode .lp-cred-eyebrow { color: #0A84FF; }
body.dark-mode .lp-cred-list li { background: rgba(10, 132, 255, 0.14); color: #F5F5F7; }
body.dark-mode .lp-cred-list li:hover { background: rgba(10, 132, 255, 0.22); }
body.dark-mode .lp-cred-list li:hover a { color: #0A84FF; }
body.dark-mode .lp-cred-list i { color: #0A84FF; }
body.dark-mode .lp-story { background: #2C2C2E; }

/* ── 首页：办案手记卡片 ─────────────────────────────────── */
body.dark-mode .lp-note { background: #1C1C1E; }
body.dark-mode .lp-note:hover {
  background: #2C2C2E;
  border-color: rgba(10, 132, 255, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
body.dark-mode .lp-note-t { color: #F5F5F7; }
body.dark-mode .lp-note-d { color: #AEAEB2; }
body.dark-mode .lp-note-tag,
body.dark-mode .lp-note-more { color: #0A84FF; }
body.dark-mode .lp-note.is-muted .lp-note-t { color: #AEAEB2; }

/* ── 首页 / 个人介绍页：联系 CTA ────────────────────────── */
body.dark-mode .lp-cta { background: #1C1C1E; }
body.dark-mode .lp-cta-title { color: #F5F5F7; }
body.dark-mode .lp-cta-desc { color: #AEAEB2; }
body.dark-mode .lp-cta-v { color: #0A84FF; }

/* ══════════════════════════════════════════════════════════════
   PART 81: 移动端 / 平板端全局样式提升（2026-09-25）
   仅改 apple-design-system.css，不动 HTML/JS。集中追加于文件末尾，
   确保对同优先级规则拥有最高源序优先级。
   ══════════════════════════════════════════════════════════════ */

/* ── 6. 断行控制（全断点）：避免长 URL / 长串溢出 ─────────── */
.lp-hero-tools-sub,
.lp-sec-desc,
.dashboard-card-desc {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── 2. 平板 640–1023px：工具卡片网格 2 列过渡 ──────────────
   index.html / tools.html 实际网格 class 为 .lp-tools
   （原规则 L2794：repeat(auto-fill, minmax(280px, 1fr))）。
   显式锁定 2 列，避免 auto-fill 在临界宽度抖动。 */
@media (min-width: 640px) and (max-width: 1023px) {
  .lp-tools, .tp-tools { grid-template-columns: repeat(2, 1fr); }
}

/* ── 1 + 3 + 4 + 6. 移动端汇总（≤768px） ─────────────────── */
@media (max-width: 768px) {
  /* 1. chips 触控目标提升至 44px（桌面端 L3267 保持 36px 不变）
     index.html 内联 .lp-hero-mini 专项修复曾以 !important 压到
     30px/12px/0 11px（L959），这里用更高特异性(4 类) + !important 覆盖，
     确保触控目标 44px、字号 15px。 */
  .lp-hero-tools.lp-hero-mini .lp-chips .lp-chip,
  .lp-chip {
    height: 44px !important;
    font-size: 15px !important;
    padding: 0 18px !important;
  }

  /* 3. 通用 padding 压缩（原 .lp-sec 移动端 padding-top:56px -> 32px） */
  .lp-sec { padding: 32px 16px; }
  .lp-group { margin-top: 24px; margin-bottom: 24px; }

  /* 4. 触控目标统一 44px
     .sn-m-btn 由 site-nav.js 注入 <style>（运行于本样式表之后），
     故以 !important 保证覆盖其 38x38 默认值。 */
  .sn-m-btn { width: 44px !important; height: 44px !important; }
  .lp-btn { min-height: 44px; }
  input, select, textarea { min-height: 44px; }

  /* 6. Hero 副标题平衡断行（渐进增强，不支持的浏览器自动忽略） */
  .lp-hero-tools-sub { text-wrap: balance; }
}
/* ═══════════════════════════════════════════════════════════
   PART 82: 快捷 chips 等宽（用户反馈：律师费/诉讼费与其他框不一样大）
   背景：.lp-chip 原为 inline-flex + padding 随内容宽度，2 字 chips
   （律师费/诉讼费）明显窄于 4 字 chips（工伤赔偿/经济补偿），视觉不齐。
   改为 Grid 等宽：桌面 6 列一行，≤1023px 3 列两行，文字居中。 */
.lp-chips {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: 100%;
}
.lp-chip {
  width: 100%;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important; /* 覆盖 .nav-item 泄漏的 2px 12px，消除 grid 错位 */
  padding: 0 13px;
  gap: 0;
  justify-content: center;
  text-align: center;
  border-radius: 999px;
}
@media (max-width: 1023px) {
  .lp-chips { grid-template-columns: repeat(3, 1fr); }
}