/* global.css — 全局样式
 * 依赖 tokens.css（颜色 / 字号 / 间距 / 字体）
 * 响应式断点：375px（手机）/ 768px（平板）/ 1024px（桌面）
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: var(--font-size-base); }

body {
  font-family: var(--font-sans);
  /* Day 9 迭代：底色加浓 + 与深绿 hero 自然衔接（顶部竹青更深，向下渐亮）*/
  background: linear-gradient(180deg, #CFE2CB 0%, #EEF5EA 34%, #E2EEE0 100%);
  color: var(--color-fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== 竹林装饰（页面两侧竹竿，Day 8）========== */
.bamboo-deco {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 76px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
}
.bamboo-deco.left  { left: 0; }
.bamboo-deco.right { right: 0; transform: scaleX(-1); }
@media (max-width: 900px) {
  .bamboo-deco { width: 48px; opacity: 0.5; }
}
@media (max-width: 640px) {
  .bamboo-deco { display: none; }   /* 手机宽度不占横向空间（PRD：不横向溢出）*/
}

a {
  color: var(--color-primary);
  text-decoration: none;
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
}
a:hover { text-decoration: underline; }

/* 容器：移动端单列 / 平板/桌面最多 1080px 居中 */
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ========== 站点 header ========== */
.site-header {
  background: #1B3524;
  border-bottom: 0;
  box-shadow: 0 2px 16px rgba(12, 32, 20, 0.45);
  position: sticky; top: 0; z-index: 10;
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.brand {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: #F5F9F2;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; color: var(--color-gold-warm); }
/* Day 9：header 导航链接（深绿底白字基线对齐）*/
.nav-link {
  font-size: var(--font-size-sm);
  color: rgba(245, 249, 242, 0.85);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
}
.nav-link:hover { color: #FFFFFF; }
.nav-link[aria-current="page"] {
  color: var(--color-gold-warm, #D4A24C);
  background: rgba(212, 162, 76, 0.14);
  font-weight: 600;
}

.search-box {
  flex: 1;
  max-width: 360px;
  height: var(--tap-min);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.12);
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.search-box input {
  flex: 1;
  height: 100%;
  border: 0; outline: 0; background: transparent;
  font: inherit; color: #F5F9F2;
  min-width: 0;
}
.search-box input::placeholder { color: rgba(245, 249, 242, 0.55); }
.search-box .hint {
  font-size: var(--font-size-sm);
  color: var(--color-gold-warm);
  white-space: nowrap;
}
/* Day 13：搜索框启用 —— 聚焦金色光环（键盘 Tab 可见，Skill §三.5）*/
.search-box { transition: border-color .18s ease, box-shadow .18s ease; }
.search-box:focus-within {
  border-color: var(--color-gold-warm);
  box-shadow: 0 0 0 3px rgba(212, 162, 76, 0.25);
}

/* ========== 主区 hero ========== */
.hero {
  padding: var(--space-8) 0 var(--space-6);
  position: relative;
  overflow: hidden;
  /* Day 9 迭代：更浓烈的竹林深处——径向天光 + 深墨竹绿斜向渐变 */
  background:
    radial-gradient(ellipse 55% 70% at 70% 38%, rgba(126, 198, 145, 0.28) 0%, rgba(126, 198, 145, 0) 62%),
    linear-gradient(155deg, #0F2C1D 0%, #1C4429 42%, #2E6B45 100%);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  border-bottom: 0;
  /* Day 9 迭代：内阴影减淡，竹林底缘自然收进浅色页面 */
  box-shadow: inset 0 -28px 56px rgba(9, 26, 17, 0.28), 0 8px 24px rgba(15, 44, 29, 0.22);
}
/* 多层竹林场景（HTML 内联 SVG，远景/中景/近景/雾影）*/
.hero-forest {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  position: relative;
  z-index: 2;
}
.hero-text { flex: 1; min-width: 0; }
/* 标题下的暖金→朱红渐变短横线（题字感，加粗更醒目）*/
.hero-title-accent {
  display: inline-block;
  width: 80px;
  height: 6px;
  background: linear-gradient(90deg, var(--color-gold-warm), var(--color-ink-red));
  border-radius: 3px;
  margin-bottom: var(--space-3);
}
.hero h1 {
  font-size: var(--font-size-3xl);
  line-height: 1.3;
  color: #FFFFFF;
  margin-bottom: var(--space-3);
}
.hero p {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.88);
  max-width: 640px;
}
/* 熊猫法官吉祥物（Day 9 迭代：不加任何 filter——透明 PNG 一加深色投影边缘就发暗，
   保持图片原样；浮动动画保留）*/
.hero-panda {
  width: 210px;
  height: auto;
  flex-shrink: 0;
  animation: panda-float 4s ease-in-out infinite;
}
@keyframes panda-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
/* 移动端熊猫换行到下方 */
@media (max-width: 640px) {
  .hero-inner { flex-direction: column; align-items: flex-start; }
  .hero-panda { width: 140px; align-self: center; margin-top: var(--space-4); }
  /* Day 8 修复：375px 宽下标题降级，保证不横向溢出（PRD §8.4）*/
  .hero h1 { font-size: var(--font-size-2xl); }
  .hero p { font-size: var(--font-size-base); }
  /* header 允许换行，搜索框独占一行 */
  .site-header .container { flex-wrap: wrap; }
  .search-box { order: 3; flex-basis: 100%; }
}
/* 竹叶丛装饰（hero 角落，Day 9：替代祥云，强化竹林感）
   —— Day 9 迭代：升级为整幅 .hero-forest 多层竹林场景，此规则已移除 */

/* ========== 分类区 ========== */
.categories { padding: var(--space-5) 0 var(--space-3); }
.section-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
  color: #22452E;
}
/* Day 8：标题前竹节点缀（Day 9 迭代：渐变竹节，立体感）*/
.section-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(180deg, #4A8A5C, #2C5A3D);
  margin-right: var(--space-2);
  vertical-align: -3px;
}
/* 更新时间行（Day 8 要求：顶部标题 + 更新时间）*/
.updated-line {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.80);
  margin-top: var(--space-2);
}
.updated-line time { font-weight: 600; }
.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}
.category-list .chip {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0 var(--space-4);
  height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-fg-soft);
  cursor: default;
}
/* 6 类分类色（活泼感的物理来源，整站立刻活起来）
   选择器带 .category-list 前缀压过上面的白底基础规则（优先级 0,3,0 > 0,2,0）*/
.category-list .chip.chip-labor    { background: rgba(30, 64, 175, 0.22); color: #1E3A8A;  border-color: rgba(30, 64, 175, 0.50); font-weight: 600; }
.category-list .chip.chip-consume  { background: rgba(234, 88, 12, 0.20); color: #B23E05;  border-color: rgba(234, 88, 12, 0.50); font-weight: 600; }
.category-list .chip.chip-loan     { background: rgba(212, 162, 76, 0.32); color: #8A5E1C; border-color: rgba(212, 162, 76, 0.65); font-weight: 600; }
.category-list .chip.chip-marriage { background: rgba(200, 16, 46, 0.18); color: #9C0D26;  border-color: rgba(200, 16, 46, 0.50); font-weight: 600; }
.category-list .chip.chip-traffic  { background: rgba(74, 124, 89, 0.26); color: #33593F;  border-color: rgba(74, 124, 89, 0.55); font-weight: 600; }
.category-list .chip.chip-neighbor { background: rgba(124, 58, 237, 0.18); color: #5B21B6; border-color: rgba(124, 58, 237, 0.50); font-weight: 600; }

/* Day 12：chip 变可点击按钮（原生 button 重置 + 筛选选中态 + 键盘焦点）*/
.category-list .chip {
  font: inherit;                       /* 按钮不继承字体，必须重置 */
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease;
}
.category-list .chip:hover  { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(24, 58, 37, 0.18); }
.category-list .chip:active { transform: scale(0.97); }
/* 筛选中：实底深竹绿 + 白字，与未选中一眼区分 */
.category-list .chip.is-filtered {
  background: #2C5A3D;
  color: #F2F7EF;
  border-color: #22452E;
  box-shadow: 0 6px 16px rgba(24, 58, 37, 0.30);
}
/* 键盘焦点环（Skill §三.5：Tab 可见）*/
.category-list .chip:focus-visible {
  outline: 3px solid var(--color-gold-warm);
  outline-offset: 2px;
}

/* ========== 卡片网格 ========== */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;        /* PRD §5.2 手机端单列 */
  gap: var(--space-4);
  padding: var(--space-4) 0 var(--space-7);
}
/* 卡片：圆角 14 + 鼠标悬停抬起 + 深竹绿描边（Day 9 迭代加浓）*/
.card {
  background: var(--color-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(44, 90, 61, 0.28);
}
/* Day 8：卡片顶部竹青条（信息层级 + 竹林感，Day 9 迭代：更浓的竹色）*/
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, #2C5A3D, #4A8A5C 60%, var(--color-gold-warm));
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(24, 58, 37, 0.30);
}
.card h3 {
  font-size: var(--font-size-xl);     /* Day 9：18px→20px，拉开与正文的层级 */
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: #22452E;
}
.card .summary { color: var(--color-fg-soft); margin-bottom: var(--space-3); }
.card .card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-fg-soft);
}
.card .card-tag {
  background: var(--bamboo-light);
  color: var(--bamboo-dark);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: var(--font-size-sm);
}

/* ========== Day 11：收藏按钮（交互反馈三态）========== */
.fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 2px 14px;
  margin-left: var(--space-1);
  border: 1.5px solid #2C5A3D;
  border-radius: 999px;
  background: #FFFFFF;
  color: #22452E;
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
/* 触控热区扩到 44px（PRD §5.2 tap-min），视觉保持紧凑不破坏排版 */
.fav-btn::after {
  content: "";
  position: absolute;
  inset: -6px -8px;
}
.fav-btn:hover { background: var(--bamboo-pale); }
.fav-btn:active { transform: scale(0.96); }
/* 键盘焦点环（Day 11 加练：Tab 聚焦可见）*/
.fav-btn:focus-visible {
  outline: 3px solid var(--color-gold-warm);
  outline-offset: 2px;
}
/* 已收藏：暖金实底，一眼区分 */
.fav-btn.is-on {
  background: var(--color-gold-warm);
  border-color: #B8862F;
  color: #3A2B08;
}
.fav-btn.is-on:hover { background: #C89240; }
/* 处理中：禁用态（disabled + pointer-events 双保险防连点）*/
.fav-btn:disabled {
  opacity: 0.55;
  cursor: progress;
  pointer-events: none;
}
.fav-star { font-size: 15px; line-height: 1; }

/* Day 27 试用卡点 #2：页面提示与试用脚本都写「点卡片右下角的 ☆」，
   但按钮原本紧跟在元信息后面，位置随文案长短漂移（手机上落在左下角）。
   用 margin-left:auto 把它固定推到 meta 行的最右端 = 卡片右下角。 */
.card .card-meta .fav-btn {
  margin-left: auto;
}

/* 收藏反馈 toast（成功深绿 / 失败暖红）*/
.fav-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(8px);
  background: #22452E;
  color: #F2F7EF;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(15, 44, 29, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 50;
}
.fav-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.fav-toast.is-error { background: #9A3B1E; }


/* ========== 四种页面状态（Day 8 核心要求）========== */
.state-box {
  grid-column: 1 / -1;
  border: 2px dashed var(--bamboo-mid);
  border-radius: var(--radius-md);
  padding: var(--space-7) var(--space-4);
  text-align: center;
  background: rgba(255, 255, 255, 0.85);
}
/* 加载中：竹叶旋转 spinner */
.state-loading .leaf-spinner {
  width: 44px; height: 44px;
  margin: 0 auto var(--space-3);
  animation: leaf-spin 1.1s linear infinite;
}
@keyframes leaf-spin { to { transform: rotate(360deg); } }
.state-loading p { color: var(--bamboo-dark); font-weight: 600; }

/* 成功态容器（正常渲染卡片时无盒子边框）*/
.state-success { grid-column: 1 / -1; }

/* 空状态：极简 + 引导 */
.state-empty .badge,
.state-error .badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
}
.state-empty .badge { background: var(--bamboo-light); color: var(--bamboo-dark); }
.state-empty p { color: var(--color-fg-soft); }

/* 错误状态：暖底警示 */
.state-error .badge { background: var(--color-warn-bg); color: var(--color-warn-fg); }
.state-error p { color: var(--color-warn-fg); margin-bottom: var(--space-3); }
.state-error button {
  border: 0;
  background: var(--color-bamboo);
  color: #fff;
  font: inherit;
  font-weight: 600;
  border-radius: 999px;
  padding: 0 var(--space-5);
  height: var(--tap-min);
  cursor: pointer;
}
.state-error button:hover { background: var(--bamboo-dark); }
/* Day 9 修复：键盘焦点可见（无障碍）*/
.state-error button:focus-visible,
.state-demo select:focus-visible {
  outline: 3px solid var(--color-gold-warm);
  outline-offset: 2px;
}

/* 状态演示器（DevTools 式切换，方便验收四态）*/
.state-demo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-fg-soft);
  margin-bottom: var(--space-3);
}
.state-demo select {
  font: inherit;
  font-size: var(--font-size-sm);
  height: var(--tap-min);   /* Day 9 修复：34px→44px，达到 PRD §5.2 触控最小值 */
  border: 1px solid var(--bamboo-mid);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--bamboo-dark);
  padding: 0 var(--space-2);
}

/* Day 9：最新情形工具行（从 index.html 内联样式抽出，统一间距）*/
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.toolbar .section-title { margin-bottom: 0; }

/* ========== 站点 footer ========== */
.site-footer {
  position: relative;
  border-top: 0;                       /* 用 ::before 渐变线替代脏色实线 */
  background: linear-gradient(to bottom, #22422D, #12261A);
  margin-top: var(--space-8);
  padding: var(--space-6) 0 var(--space-7);
  color: rgba(245, 249, 242, 0.88);
  font-size: var(--font-size-sm);
  line-height: 1.8;
}
/* 暖金→朱红→暖金渐变分隔线（国风题字感）*/
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-gold-warm) 20%,
    var(--color-ink-red) 50%,
    var(--color-gold-warm) 80%,
    transparent 100%);
}
.site-footer strong { color: #FFFFFF; }
.site-footer .container > div + div { margin-top: var(--space-2); }
/* Day 9 修复：opacity .6（对比度约 3.2:1，不达 WCAG AA）提到 .78 */
.site-footer .meta { opacity: .78; margin-top: var(--space-4) !important; }

/* ===== Day 26：v1.0.0 发布版本标记 =====
   作用有二：① 对外标识当前发布版本；② 回滚演练时作为「当前部署的是哪一版」的可视证据
   （旧版本没有这个徽标 → 截图对比一眼可辨）。故刻意不放在 .meta 里，避免被 .78 透明度削弱。 */
.site-footer .ver {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
}
.site-footer .ver-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: #FFFFFF;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ========== 平板 ≥ 768（PRD §5.2 双列） ========== */
@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ========== 桌面 ≥ 1024 ========== */
@media (min-width: 1024px) {
  .container { padding: 0 var(--space-5); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 36px; }
}

/* ========== Day 13：多视图共用样式 ========== */

/* 面包屑：当前位置 + 链接 */
.breadcrumbs {
  font-size: var(--font-size-sm);
  color: var(--bamboo-dark, #2C5A3D);
  padding: var(--space-4) 0 var(--space-2);
}
.breadcrumbs a {
  color: var(--bamboo-dark, #2C5A3D);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.breadcrumbs a:hover { color: var(--color-gold-warm, #D4A24C); }
.breadcrumbs span[aria-hidden] { margin: 0 6px; opacity: 0.55; }
.breadcrumbs [aria-current="page"] { font-weight: 600; }

/* 空态里跳首页的链接 */
.state-link {
  color: var(--color-gold-warm, #D4A24C);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.state-link:hover { color: var(--color-ink-red, #C8102E); }

/* ---------- 详情页（card.html）---------- */
.card-detail {
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-lg, 14px);
  padding: var(--space-5) var(--space-5);
  border-left: 4px solid var(--color-gold-warm, #D4A24C);
  margin-bottom: var(--space-5);
}
.card-detail h1 {
  font-size: 28px;
  color: var(--bamboo-dark, #2C5A3D);
  margin: 0 0 var(--space-3);
  line-height: 1.4;
}
.detail-summary {
  font-size: var(--font-size-base);
  color: var(--bamboo-dark, #2C5A3D);
  margin-bottom: var(--space-3);
  font-weight: 500;
}
.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--bamboo-dark, #2C5A3D);
  align-items: center;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(74, 124, 89, 0.15);
}
.detail-section { margin-top: var(--space-5); }
.detail-section h2 {
  font-size: 20px;
  color: var(--bamboo-dark, #2C5A3D);
  margin-bottom: var(--space-3);
  font-weight: 600;
}
.detail-section p { line-height: 1.8; color: #1F2937; }

/* 步骤列表 */
.step-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}
.step {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px dashed rgba(74, 124, 89, 0.15);
}
.step:last-child { border-bottom: none; }
.step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bamboo-dark, #2C5A3D);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}
.step-text { flex: 1; line-height: 1.7; }

/* 法条卡片 */
.law-card {
  background: rgba(74, 124, 89, 0.06);
  border-left: 3px solid var(--bamboo-dark, #2C5A3D);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
}
.law-card h4 {
  font-size: var(--font-size-base);
  color: var(--color-ink-red, #C8102E);
  margin: 0 0 var(--space-2);
  font-weight: 600;
}
.law-text {
  font-size: var(--font-size-sm);
  line-height: 1.7;
  color: #1F2937;
  margin-bottom: var(--space-2);
}
.law-source { font-size: 12px; }
.law-source a { color: var(--color-gold-warm, #D4A24C); text-decoration: none; }
.law-source a:hover { text-decoration: underline; }

.detail-foot {
  font-size: 12px;
  color: rgba(31, 41, 55, 0.6);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(74, 124, 89, 0.15);
}

/* ---------- 浏览记录（history.html）：时间胶囊 ---------- */
.history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.history-item { margin-bottom: var(--space-2); }
.history-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-md, 8px);
  text-decoration: none;
  color: inherit;
  border-left: 3px solid var(--bamboo-dark, #2C5A3D);
  transition: background 0.2s, transform 0.2s;
}
.history-link:hover {
  background: rgba(74, 124, 89, 0.10);
  transform: translateX(2px);
}
.history-time {
  flex-shrink: 0;
  display: inline-block;
  padding: 2px 8px;
  background: var(--color-gold-warm, #D4A24C);
  color: #FFFFFF;
  font-size: 12px;
  border-radius: 12px;
  font-weight: 600;
  min-width: 96px;
  text-align: center;
}
.history-title { flex: 1; color: var(--bamboo-dark, #2C5A3D); font-weight: 500; }
.history-cat {
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  color: rgba(31, 41, 55, 0.6);
  background: rgba(74, 124, 89, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
}

/* ---------- 卡片标题链接（首页列表）---------- */
.card-title-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.2s, color 0.2s;
}
.card-title-link:hover {
  color: var(--color-ink-red, #C8102E);
  border-bottom-color: var(--color-gold-warm, #D4A24C);
}
.card-title-link:focus-visible {
  outline: 2px solid var(--color-gold-warm, #D4A24C);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ========== Day 29：搜索结果分区（相关情形 / 相关法条）========== */

/* 近似匹配提示条（matchMode === 'fuzzy' 时出现） */
.search-notice {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-warn-bg);
  color: var(--color-warn-fg);
  border-left: 4px solid var(--color-gold-warm, #D4A24C);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

/* 分区标题（「相关情形」「相关法条」）*/
.result-h {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-3);
  padding-left: var(--space-3);
  border-left: 4px solid var(--bamboo-mid);
  font-size: var(--font-size-lg);
  color: var(--bamboo-dark);
}
.state-success > .result-h:first-of-type { margin-top: 0; }
.result-count {
  display: inline-block;
  min-width: 22px;
  padding: 0 6px;
  font-size: var(--font-size-sm);
  line-height: 20px;
  text-align: center;
  color: var(--color-card);
  background: var(--bamboo-mid);
  border-radius: 999px;
}
.result-none {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-fg-soft);
}

/* 相关法条列表 */
.law-result-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.law-result {
  padding: var(--space-4);
  background: var(--color-paper-cream);
  border: 1px solid var(--bamboo-light);
  border-radius: var(--radius-md);
}
.law-result-name {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--bamboo-dark);
}
.law-result-text {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.7;
  color: var(--color-ink-gray);
  text-indent: 2em;   /* 法条原文缩进，读起来像条文 */
}
.law-result-from {
  margin: 0;
  font-size: 13px;
  color: var(--color-fg-soft);
}
.law-result-from a { color: var(--bamboo-dark); }
.law-result-from a:hover { color: var(--color-ink-red, #C8102E); }

/* 空态里的「为你推荐」（搜不到时给三条现成情形，别让人撞墙）*/
.empty-recommend {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
  text-align: left;
}
.state-empty .empty-recommend-h {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--bamboo-dark);
}
.empty-recommend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.empty-recommend-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}
.empty-recommend-list a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}
.empty-recommend-list a:hover {
  color: var(--color-ink-red, #C8102E);
  border-bottom-color: var(--color-gold-warm, #D4A24C);
}
.empty-recommend-cat {
  flex: none;
  padding: 2px 8px;
  font-size: 12px;
  color: var(--bamboo-dark);
  background: var(--bamboo-light);
  border-radius: 999px;
}

/* ---------- 顶导链接：移动端不让搜索框挤压 ---------- */
@media (max-width: 640px) {
  .site-header .container {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .search-box { order: 5; flex-basis: 100%; max-width: none; }
  /* Day 32：导航从 4 项增到 5 项（加了「关于」）。375px 下 brand(约 150px) +
     5×56px + 4×8px gap 约 462px，会溢出 → 收紧到 5px/11px 间距并允许换行。
     brand 独占一行不划算，改用 flex-basis 让步：链接可折到第二行，不横向撑破。 */
  .site-header .container { gap: 4px; }
  .brand { font-size: var(--font-size-base); margin-right: var(--space-2); }
  .nav-link { padding: 6px 6px; font-size: 12.5px; }
}

/* ========== Day 20：检查台（check.html）========== */
.check-block {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.check-block h2 { font-size: 17px; margin: 0 0 var(--space-2); color: var(--bamboo-dark, #2C5A3D); }
.check-block h2 code { font-size: 13px; color: var(--color-ink-gray, #6B7280); }
.check-updated { font-size: 13px; color: var(--color-ink-gray, #6B7280); margin: 0; }
.check-note { font-size: 13px; color: var(--color-fg-soft); line-height: 1.7; margin: 0 0 var(--space-2); }
.check-note code { font-size: 12px; background: var(--bamboo-pale, #EDF3EC); padding: 1px 5px; border-radius: 4px; }
.check-status { font-size: 14px; margin: 0 0 var(--space-2); }
.check-status.is-ok { color: var(--bamboo-dark, #2C5A3D); font-weight: 600; }
.check-status.is-bad { color: var(--color-ink-red, #B4232A); font-weight: 600; }
.check-cats { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.check-cats li { font-size: 13px; background: var(--bamboo-pale, #EDF3EC); border-radius: 999px; padding: 4px 12px; }
.check-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.check-table th, .check-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--color-border); }
.check-table th { color: var(--color-ink-gray, #6B7280); font-weight: 500; white-space: nowrap; }
.check-table code { font-size: 12px; color: var(--color-ink-gray, #6B7280); }
.check-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.check-form label { font-size: 13px; color: var(--color-fg-soft); }
.check-form select, .check-form input {
  font: inherit; font-size: 13px; padding: 6px 10px;
  border: 1px solid var(--color-border); border-radius: 8px; background: #fff;
}
.check-form select { max-width: 320px; }
.check-form input { width: 130px; }
.check-btn {
  font: inherit; font-size: 14px; cursor: pointer;
  padding: 8px 18px; border-radius: 999px; border: 1px solid #22452E;
  background: #2C5A3D; color: #F2F7EF;
  transition: transform .12s ease, box-shadow .18s ease;
}
.check-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(24, 58, 37, 0.18); }
.check-btn:active { transform: scale(0.97); }
.check-btn:focus-visible { outline: 3px solid var(--color-gold-warm); outline-offset: 2px; }
.check-btn:disabled { opacity: 0.55; cursor: wait; transform: none; box-shadow: none; }
.check-result {
  font-size: 12.5px; line-height: 1.6; margin: 0; white-space: pre-wrap; word-break: break-all;
  background: var(--bamboo-pale, #EDF3EC); border-radius: 8px; padding: var(--space-3);
  max-height: 320px; overflow: auto;
}
.check-result.is-ok { border-left: 4px solid var(--bamboo-mid, #4A8A5C); }
.check-result.is-bad { border-left: 4px solid var(--color-ink-red, #B4232A); }
@media (max-width: 640px) {
  .check-form select { max-width: 100%; flex-basis: 100%; }
  .check-table th:nth-child(3), .check-table td:nth-child(3) { display: none; } /* 手机端藏分类列防溢出 */
}

/* ========== Day 22：检查台 ④ 修改与删除 + 二次确认对话框 ========== */
.fav-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.fav-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: 8px 10px; border-bottom: 1px solid var(--color-border);
}
.fav-item:last-child { border-bottom: none; }
.fav-info { flex: 1 1 240px; font-size: 13.5px; min-width: 0; }
.fav-info b { color: var(--bamboo-dark, #2C5A3D); margin-right: 4px; }
.fav-note { color: var(--color-ink-gray, #6B7280); font-size: 12.5px; }
.fav-empty { font-size: 13px; color: var(--color-ink-gray, #6B7280); padding: 6px 0; list-style: none; }

.check-btn-sm { font-size: 12.5px; padding: 5px 12px; }
.check-btn-ghost { background: #fff; color: var(--bamboo-dark, #2C5A3D); border-color: var(--color-border); }
.check-btn-ghost:hover { box-shadow: 0 2px 8px rgba(24, 58, 37, 0.12); }
.check-btn-danger { background: #B4232A; border-color: #8E1B21; color: #FFF5F5; }
.check-btn-danger:hover { box-shadow: 0 4px 12px rgba(180, 35, 42, 0.24); }
.check-btn-danger:focus-visible { outline: 3px solid var(--color-gold-warm, #D9B93C); outline-offset: 2px; }

/* 二次确认对话框（原生 <dialog>，自带焦点陷阱 + Esc 关闭） */
.confirm-dialog {
  border: none; border-radius: var(--radius-md, 12px); padding: var(--space-5, 20px) var(--space-5, 20px) var(--space-4, 16px);
  max-width: 440px; width: calc(100% - 32px); box-shadow: 0 18px 48px rgba(16, 34, 22, 0.28);
  background: var(--color-card, #fff); color: var(--color-fg, #1F2A22);
}
.confirm-dialog::backdrop { background: rgba(16, 34, 22, 0.45); }
.confirm-dialog h3 { margin: 0 0 var(--space-2); font-size: 18px; color: var(--color-ink-red, #B4232A); }
.confirm-desc { font-size: 14px; line-height: 1.65; margin: 0 0 var(--space-2); }
.confirm-warn {
  font-size: 12.5px; line-height: 1.6; color: #7A5D00; background: #FFF7E0;
  border-left: 3px solid var(--color-gold-warm, #D9B93C); border-radius: 0 6px 6px 0;
  padding: 8px 12px; margin: 0 0 var(--space-3);
}
.confirm-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
@media (max-width: 640px) {
  .fav-info { flex-basis: 100%; }
  .confirm-actions { flex-direction: column-reverse; }
  .confirm-actions .check-btn { width: 100%; }
}

/* ==================== Day 30：法条速查页 ==================== */
.law-filter-block { margin-top: var(--space-3, 12px); }
.law-filter-label {
  font-size: var(--font-size-sm, 14px); color: var(--color-fg-soft, #5A6B5E);
  margin: 0 0 var(--space-2, 8px);
}
.law-chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.law-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--color-card, #fff); color: var(--color-fg, #1F2A22);
  border: 1px solid var(--color-border, rgba(44, 90, 61, 0.28));
  border-radius: 999px; padding: 5px 12px;
  font-size: var(--font-size-sm, 14px); font-family: inherit;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.law-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(24, 58, 37, 0.18); }
.law-chip.is-active {
  background: var(--color-bamboo, #2C5A3D); color: #fff;
  border-color: var(--color-bamboo, #2C5A3D);
}
.law-chip-n { font-size: 11px; opacity: .75; }
.law-count {
  font-size: var(--font-size-sm, 14px); color: var(--bamboo-dark, #1B3524);
  margin: 0 0 var(--space-3, 12px);
}
.law-list { display: grid; grid-template-columns: 1fr; gap: var(--space-3, 12px); }
.law-item {
  background: var(--color-card, #fff); border-radius: var(--radius-md, 12px);
  border: 1px solid rgba(44, 90, 61, 0.28);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
  padding: var(--space-4, 16px);
}
.law-item-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3, 12px); flex-wrap: wrap;
}
.law-item-name { margin: 0; font-size: var(--font-size-lg, 17px); color: var(--color-primary-dark, #1B3524); }
.law-src { font-size: var(--font-size-sm, 14px); white-space: nowrap; }
.law-item-text {
  margin: var(--space-2, 8px) 0 0; font-size: var(--font-size-base, 15px);
  line-height: 1.85; color: var(--color-fg, #1F2A22);
}
.law-item-from {
  margin: var(--space-3, 12px) 0 0; font-size: var(--font-size-sm, 14px);
  color: var(--color-fg-soft, #5A6B5E);
}
.law-item-cat { margin-left: var(--space-2, 8px); opacity: .85; }
.law-hl { background: #FFF2B8; padding: 0 2px; border-radius: 2px; }
@media (max-width: 640px) {
  .law-item-head { flex-direction: column; gap: 4px; }
}

/* ==================== Day 32：关于页（about.html，合规 F7 / U-04）==================== */
.about-card {
  background: var(--color-card, #fff);
  border-radius: var(--radius-md, 12px);
  border: 1px solid rgba(44, 90, 61, 0.22);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
  padding: var(--space-4, 16px);
  margin-bottom: var(--space-4, 16px);
}
/* 免责声明：用警示色描边，让它在视觉上「抢眼」，这是合规项不能藏在正文里 */
.about-card--warn {
  background: var(--color-warn-bg, #FFF8E6);
  border-color: var(--color-warn-fg, #9A6B00);
  border-left-width: 4px;
}
.about-card--urgent {
  border-left: 4px solid var(--color-ink-red, #B3261E);
}
.about-h2 {
  margin: 0 0 var(--space-3, 12px);
  font-size: var(--font-size-lg, 17px);
  color: var(--color-primary-dark, #1B3524);
  font-weight: 600;
}
.about-card--warn .about-h2 { color: var(--color-warn-fg, #9A6B00); }
.about-p {
  margin: 0 0 var(--space-3, 12px);
  font-size: var(--font-size-base, 15px);
  line-height: 1.9;
  color: var(--color-fg, #1F2A22);
}
.about-p:last-child { margin-bottom: 0; }
.about-p--note {
  font-size: var(--font-size-sm, 14px);
  color: var(--color-fg-soft, #5A6B5E);
  line-height: 1.8;
}
.about-p a, .about-list a { color: var(--color-primary, #2C5A3D); }
.about-list {
  margin: 0;
  padding-left: 1.35em;
  font-size: var(--font-size-base, 15px);
  line-height: 1.9;
  color: var(--color-fg, #1F2A22);
}
.about-list li { margin-bottom: var(--space-2, 8px); }
.about-list li:last-child { margin-bottom: 0; }
.about-steps {
  margin: 0 0 var(--space-3, 12px);
  padding-left: 1.35em;
  font-size: var(--font-size-base, 15px);
  line-height: 1.9;
  color: var(--color-fg, #1F2A22);
}
.about-steps li { margin-bottom: var(--space-2, 8px); }
/* 紧急电话表：手机端两列会挤，直接改上下排 */
.about-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base, 15px);
  line-height: 1.8;
}
.about-table th, .about-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(44, 90, 61, 0.16);
}
.about-table th {
  width: 34%;
  font-weight: 600;
  color: var(--color-primary-dark, #1B3524);
}
.about-table td strong { color: var(--color-ink-red, #B3261E); }
.about-table tr:last-child th, .about-table tr:last-child td { border-bottom: none; }
.about-table + .about-p--note { margin-top: var(--space-3, 12px); }
@media (max-width: 640px) {
  .about-table th, .about-table td { display: block; width: auto; padding: 10px 0; }
  .about-table th { padding-bottom: 2px; border-bottom: none; }
  .about-table td { padding-top: 0; }
}