/* ============================================================================
   握法网 v2.1 · 通用组件库（生产版）
   ----------------------------------------------------------------------------
   来源：docs/design/assets/proto.css 组件层同值转换。
   隔离策略：全部类名带 .wf- 前缀，不写元素选择器、不写全局 reset ——
   与旧样式（style.css）完全隔离，可全站安全挂载（docs/13 §1.5）。
   红线：--wf-cta 转化橙只允许出现在 .wf-btn-cta 上。
   ========================================================================== */

/* ---------- 按钮 ---------- */
.wf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--wf-r-s);
  font-size: var(--wf-fs-base);
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--wf-font);
  transition: .18s;
  text-decoration: none;
  line-height: 1;
}
.wf-btn-cta { background: var(--wf-cta); color: #fff; }
.wf-btn-cta:hover { background: var(--wf-cta-h); color: #fff; }
.wf-btn-primary { background: var(--wf-brand-700); color: #fff; }
.wf-btn-primary:hover { background: var(--wf-brand-800); color: #fff; }
.wf-btn-ghost { background: var(--wf-white); border-color: var(--wf-line); color: var(--wf-ink1); }
.wf-btn-ghost:hover { border-color: var(--wf-brand-500); color: var(--wf-brand-700); }
.wf-btn-line { background: var(--wf-white); border-color: var(--wf-brand-700); color: var(--wf-brand-700); }
.wf-btn-line:hover { background: var(--wf-brand-50); }
.wf-btn-lg { height: 48px; padding: 0 28px; font-size: var(--wf-fs-md); border-radius: var(--wf-r-m); }
.wf-btn-sm { height: 32px; padding: 0 14px; font-size: var(--wf-fs-sm); }
.wf-btn-block { width: 100%; }
.wf-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- 卡片 / 面板 ---------- */
.wf-card {
  background: var(--wf-white);
  border: 1px solid var(--wf-line);
  border-radius: var(--wf-r-m);
  box-shadow: var(--wf-sh1);
}
.wf-panel {
  background: var(--wf-white);
  border: 1px solid var(--wf-line);
  border-radius: var(--wf-r-m);
  padding: 22px 24px;
  box-shadow: var(--wf-sh1);
  margin-bottom: 20px;
}
.wf-panel > .wf-panel-hd {
  font-size: var(--wf-fs-lg);
  font-weight: 600;
  color: var(--wf-brand-800);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wf-panel > .wf-panel-hd::before {
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--wf-gold);
}

/* ---------- 标签 ---------- */
.wf-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--wf-r-pill);
  font-size: var(--wf-fs-xs);
  background: var(--wf-brand-100);
  color: var(--wf-brand-700);
  white-space: nowrap;
}
.wf-tag--gold  { background: var(--wf-gold-bg); color: #8A6520; }
.wf-tag--cta   { background: #FDEDE7; color: var(--wf-cta); }
.wf-tag--ok    { background: #E7F6F1; color: var(--wf-ok); }
.wf-tag--warn  { background: #FDF3E6; color: #8A6520; }
.wf-tag--plain { background: #F0F2F6; color: var(--wf-ink3); }

/* ---------- 面包屑 ---------- */
.wf-crumb { font-size: var(--wf-fs-sm); color: var(--wf-ink3); padding: 16px 0 0; }
.wf-crumb a:hover { color: var(--wf-brand-500); }
.wf-crumb .on { color: var(--wf-ink2); font-weight: 500; }

/* ---------- 频道页头（深蓝渐变 + 统计） ---------- */
.wf-pg-head {
  background: linear-gradient(135deg, #0B2249, #1B4079 60%, #26548F);
  color: #fff;
  padding: 32px 0 34px;
  position: relative;
  overflow: hidden;
}
.wf-pg-head::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
}
.wf-pg-head h1 { font-size: var(--wf-fs-h1); font-weight: 600; letter-spacing: .5px; margin-bottom: 8px; }
.wf-pg-head p { color: #B9C9E4; font-size: 13.5px; max-width: 780px; }
.wf-pg-head .wf-stat { display: flex; gap: 34px; margin-top: 18px; position: relative; }
.wf-pg-head .wf-stat b { display: block; font-size: 21px; color: var(--wf-gold); font-weight: 600; }
.wf-pg-head .wf-stat span { font-size: 12.5px; color: #9FB3D1; }

/* ---------- 全局搜索条 ---------- */
.wf-gsearch { display: flex; gap: 10px; max-width: 640px; }
.wf-gsearch input {
  flex: 1;
  height: 48px;
  border: 1px solid var(--wf-line);
  border-radius: var(--wf-r-m);
  padding: 0 18px;
  font-size: var(--wf-fs-md);
  font-family: var(--wf-font);
  outline: none;
  background: var(--wf-white);
  color: var(--wf-ink1);
}
.wf-gsearch input:focus { border-color: var(--wf-brand-500); }
.wf-gsearch .wf-btn { height: 48px; padding: 0 30px; border-radius: var(--wf-r-m); font-size: var(--wf-fs-md); }

/* ---------- 表单控件 ---------- */
.wf-input,
.wf-select,
.wf-textarea {
  width: 100%;
  border: 1px solid var(--wf-line);
  border-radius: var(--wf-r-s);
  padding: 10px 14px;
  font-size: var(--wf-fs-base);
  font-family: var(--wf-font);
  color: var(--wf-ink1);
  background: var(--wf-white);
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}
.wf-input:focus,
.wf-select:focus,
.wf-textarea:focus { border-color: var(--wf-brand-500); }
.wf-textarea { min-height: 110px; resize: vertical; line-height: 1.7; }
.wf-label { display: block; font-size: var(--wf-fs-sm); color: var(--wf-ink2); margin-bottom: 8px; }
.wf-label .req { color: var(--wf-danger); margin-left: 2px; }

/* ---------- 分页 ---------- */
.wf-pager { display: flex; justify-content: center; gap: 7px; padding: 22px 0 4px; }
.wf-pager a {
  min-width: 34px;
  height: 34px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--wf-white);
  border: 1px solid var(--wf-line);
  font-size: 13.5px;
  color: var(--wf-ink2);
  text-decoration: none;
}
.wf-pager a:hover { border-color: var(--wf-brand-500); color: var(--wf-brand-700); }
.wf-pager .on { background: var(--wf-brand-700); color: #fff; border-color: var(--wf-brand-700); }

/* ---------- 空状态 / 提示条 ---------- */
.wf-emptybox { text-align: center; padding: 56px 0; color: var(--wf-ink3); font-size: var(--wf-fs-base); }
.wf-strip {
  background: linear-gradient(160deg, var(--wf-brand-700), var(--wf-brand-900));
  color: #fff;
  border-radius: var(--wf-r-m);
  padding: 24px 28px;
}
.wf-strip p { color: #B9C9E4; font-size: 12.5px; margin-bottom: 13px; line-height: 1.7; }

/* ==========================================================================
   全站头部 v2（2026-09-20 对齐原型 01）：顶栏 / Header / 知识库条 / 主导航
   仅替换视觉，URL 与登录态结构不变；.header 为布局层旧类，此处收编重定义
   ========================================================================== */
.header { min-width: 0; height: auto; background: var(--wf-brand-900); }
.wf-topbar { background: var(--wf-brand-900); color: #8FA4C6; font-size: 12.5px; height: 36px; line-height: 36px; }
.wf-topbar .wf-wrap { display: flex; justify-content: space-between; align-items: center; }
.wf-topbar a { color: #B9C9E4; text-decoration: none; }
.wf-topbar a:hover { color: #fff; }
.wf-topbar .city { color: #fff; font-weight: 500; }
.wf-topbar .sp { color: #2C4770; margin: 0 9px; }
.wf-topbar .lft, .wf-topbar .rgt { display: flex; align-items: center; }
.wf-topbar img { display: inline-block; vertical-align: middle; margin: -2px 5px 0 0; }
.wf-topbar em { color: var(--wf-gold); font-style: normal; font-weight: 600; letter-spacing: .3px; } /* 2026-09-20 用户拍板：电话号码改金色（橙红仅用于提问/咨询 CTA） */
.wf-topbar .ic { display: inline-block; vertical-align: middle; margin: -2px 5px 0 0; flex: 0 0 auto; }
.wf-topbar .wf-userbox a, .wf-topbar .wf-guestbox a { margin-left: 8px; }

/* Header：logo + 搜索框 + 热线 */
.wf-hdr { background: #fff; padding: 18px 0 16px; }
.wf-hdr .wf-wrap { display: flex; align-items: center; gap: 30px; }
.wf-hdr .site-logo { flex: 0 0 auto; text-decoration: none; }
.wf-hdr .site-logo img { height: 52px; width: auto; display: block; }
.wf-sbox { flex: 1; min-width: 0; }
.wf-sbox .tabs { display: flex; gap: 22px; margin-bottom: 8px; }
.wf-sbox .tabs a { font-size: 14px; color: var(--wf-ink2); padding-bottom: 4px; border-bottom: 2px solid transparent; text-decoration: none; }
.wf-sbox .tabs a.on { color: var(--wf-brand-700); font-weight: 600; border-color: var(--wf-brand-700); }
.wf-sbox .bar { display: flex; height: 46px; border: 2px solid var(--wf-brand-700); border-radius: var(--wf-r-m); overflow: hidden; background: #fff; }
.wf-sbox .bar input { flex: 1; border: 0; outline: 0; padding: 0 16px; font-size: 14px; color: var(--wf-ink1); }
.wf-sbox .bar input::placeholder { color: var(--wf-ink3); }
.wf-sbox .bar .go { width: 128px; background: var(--wf-cta); color: #fff; border: 0; font-size: 15px; font-weight: 600; cursor: pointer; }
.wf-sbox .bar .go:hover { filter: brightness(1.06); }
.wf-sbox .hot { margin-top: 8px; font-size: 12.5px; color: var(--wf-ink3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wf-sbox .hot a { color: var(--wf-ink2); margin-right: 14px; text-decoration: none; }
.wf-sbox .hot a:hover { color: var(--wf-brand-500); }
.wf-hdr-tel { flex: 0 0 auto; text-align: right; }
.wf-hdr-tel .lbl { font-size: 12px; color: var(--wf-ink3); }
.wf-hdr-tel .no { font-size: 20px; font-weight: 600; color: var(--wf-brand-800); letter-spacing: .5px; }
.wf-hdr-tel .no small { font-size: 12px; font-weight: 400; color: var(--wf-ink3); letter-spacing: 0; }

/* 知识库条 */
.wf-subnav { background: #F4F7FB; border-bottom: 1px solid var(--wf-line); height: 42px; line-height: 42px; font-size: 13.5px; }
.wf-subnav .wf-wrap { display: flex; align-items: center; }
.wf-subnav .kb { font-weight: 600; color: var(--wf-brand-800); margin-right: 18px; }
.wf-subnav a { color: var(--wf-ink2); text-decoration: none; margin-right: 26px; }
.wf-subnav a:hover { color: var(--wf-brand-700); }
.wf-subnav a.on { color: var(--wf-brand-700); font-weight: 600; }
.wf-subnav .sp { margin-left: auto; }

/* 主导航 */
.wf-mnav { background: var(--wf-brand-800); height: 52px; position: relative; z-index: 60; min-width: 0; }
.wf-mnav .wf-wrap { display: flex; align-items: center; height: 52px; position: relative; }
.wf-mnav .fast { width: 210px; height: 52px; flex: 0 0 210px; background: var(--wf-brand-900); color: #fff; display: flex; align-items: center; gap: 10px; padding: 0 20px; font-size: 15px; font-weight: 500; cursor: default; }
.wf-mnav .fast .bars { display: flex; flex-direction: column; gap: 3px; }
.wf-mnav .fast .bars i { display: block; width: 15px; height: 2px; background: #fff; border-radius: 2px; }
.wf-mnav .tabs { display: flex; height: 52px; margin-left: 10px; flex: 0 0 auto; }
.wf-mnav .tabs a { display: flex; align-items: center; padding: 0 18px; color: #CBD9EE; font-size: 16px; text-decoration: none; white-space: nowrap; }
.wf-mnav .tabs a:hover { color: #fff; background: rgba(255,255,255,.07); }
.wf-mnav .tabs a.on { background: var(--wf-brand-700); color: #fff; font-weight: 600; box-shadow: inset 0 -3px 0 var(--wf-gold); }
.wf-mnav .tabs a .n { display: inline-flex; height: 16px; padding: 0 5px; margin-left: 6px; border-radius: 8px; background: var(--wf-cta); font-size: 10px; color: #fff; align-items: center; font-weight: 500; }
/* 主导航「法律知识库」下拉二级栏目（2026-09-20 栏目调整：原顶部知识库条并入此处） */
.wf-mnav .tabs .kd { position: relative; display: flex; align-items: stretch; flex: 0 0 auto; }
.wf-mnav .tabs .kd > a { display: flex; align-items: center; padding: 0 18px; color: #CBD9EE; font-size: 16px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.wf-mnav .tabs .kd > a .arr { font-size: 11px; margin-left: 5px; opacity: .75; }
.wf-mnav .tabs .kd:hover > a, .wf-mnav .tabs .kd.on > a { color: #fff; background: var(--wf-brand-700); }
.wf-mnav .tabs .kd.on > a { font-weight: 600; box-shadow: inset 0 -3px 0 var(--wf-gold); }
.wf-mnav .tabs .kdbox { display: none; position: absolute; top: 52px; left: 0; min-width: 168px; background: #fff; border: 1px solid var(--wf-line); border-radius: 0 0 var(--wf-r-m) var(--wf-r-m); box-shadow: var(--wf-sh2, 0 14px 30px rgba(18,49,95,.16)); padding: 6px 0; z-index: 70; }
.wf-mnav .tabs .kd:hover .kdbox { display: block; }
.wf-mnav .tabs .kdbox a { display: block; padding: 10px 20px; font-size: 14px; color: var(--wf-ink2); text-decoration: none; }
.wf-mnav .tabs .kdbox a:hover { background: #F0F5FB; color: var(--wf-brand-700); }
.wf-mnav .tabs .kdbox a.on { color: var(--wf-brand-700); font-weight: 600; background: #F0F5FB; }
/* 主导航右侧快捷提问入口（原知识库条右侧转化链迁移至此） */
.wf-mnav .quick-ask { margin-left: auto; padding-right: 20px; font-size: 13px; color: #FFD9A8; text-decoration: none; white-space: nowrap; flex: 0 0 auto; }
.wf-mnav .quick-ask:hover { color: #fff; }
/* mega 下拉 */
.wf-mega { display: none; position: absolute; top: 52px; left: 0; width: 860px; background: #fff; border: 1px solid var(--wf-line); border-radius: 0 0 var(--wf-r-m) var(--wf-r-m); box-shadow: var(--wf-sh2); padding: 8px 0 0; z-index: 70; }
.wf-mnav .fast:hover .wf-mega, .wf-mega:hover { display: block; }
.wf-mega .grp { display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-bottom: 1px dashed #EEF2F8; }
.wf-mega .gt { display: flex; align-items: center; gap: 7px; width: 118px; flex: 0 0 118px; font-size: 14px; font-weight: 600; color: var(--wf-brand-800); }
.wf-mega .gt i { width: 26px; height: 26px; border-radius: 7px; background: #F0F5FB; display: flex; align-items: center; justify-content: center; font-size: 13px; font-style: normal; }
.wf-mega .gl { display: flex; flex-wrap: wrap; gap: 6px 4px; }
.wf-mega .gl a { padding: 4px 11px; border-radius: var(--wf-r-s); font-size: 13px; color: var(--wf-ink2); text-decoration: none; }
.wf-mega .gl a:hover { background: #F0F5FB; color: var(--wf-brand-700); }
.wf-mega .gl a.newc { color: var(--wf-cta); font-weight: 500; }
.wf-mega .cv { background: #F0F5FB; border-radius: var(--wf-r-s); padding: 13px 18px; margin: 12px 22px 14px; display: flex; justify-content: space-between; align-items: center; }
.wf-mega .cv b { font-size: 14px; color: var(--wf-brand-800); }
.wf-mega .cv p { font-size: 12.5px; color: var(--wf-ink2); margin: 3px 0 0; }
.wf-mega .cv .btn { flex: 0 0 auto; height: 32px; padding: 0 16px; border: 0; border-radius: var(--wf-r-s); background: var(--wf-cta); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }

/* ===== 全站固定版式基线（2026-09-20 修复窄视口/系统缩放下版心错乱） =====
   1200 固定版式：视口 <1200 时出横向滚动条，页面保持完整不裁切不换行错乱 */
body { min-width: 1200px; }
/* 全站内容版心与新版头部/页脚 1200 对齐（老 .wrapper 1350px 版心弃用） */
.wrapper { width: auto; max-width: 1200px; }