@charset "UTF-8";
/*!
 * ==========================================================================
 *  国信招标网 · 前端业务样式表
 * --------------------------------------------------------------------------
 *  架构说明
 *   1. 以 Bootstrap 5.3.3 为底座：栅格（.row/.col-）、间距（.m- / .p-）、
 *      弹性盒（.d-flex/.gap-）、表单（.form-）、按钮（.btn）、
 *      模态框（.modal）、分页（.pagination）等一律复用框架，
 *      本文件不重复实现，避免出现「第二套栅格」。
 *      （注：类名中的通配写法不写星号，避免误形成注释终止符）
 *   2. 本文件只承载 Bootstrap 无法表达的「业务组件」，是框架的补充而非替代。
 *   3. 命名规范：小写 kebab-case + BEM-lite。
 *        · 站点级组件：site- 前缀（site-header / site-nav / site-footer）
 *        · 业务组件：语义命名（entry-list / panel / region-rank）
 *        · 元素：block__element
 *        · 状态与变体：block__element--modifier 或 .is-active / .is-top
 *        · 不使用 .b1 .blk .fl 之类无语义缩写，改版时可被 grep 定位
 *   4. 颜色、圆角、阴影、间距全部走 :root 设计令牌（Design Token），
 *      换主题只改 01-DESIGN-TOKENS 一处。
 *   5. 图标统一使用 Font Awesome 4.7（字体文件已本地化到 /static/fonts/）。
 * --------------------------------------------------------------------------
 *  目录
 *   01 设计令牌（Design Tokens）
 *   02 基础层：重置 / 排版 / 链接 / Bootstrap 主色覆写
 *   03 顶部条 site-topbar
 *   04 站点头部 site-header（Logo + 全站搜索）
 *   05 主导航 site-nav（含全部栏目下拉 mega-panel）
 *   06 通用卡片容器 panel
 *   07 通用信息列表 entry-list + 标签 entry-tag
 *   08 首页三栏骨架 home（左 3 / 中 6 / 右 3）
 *   09 首页 · 左栏组件（行业导航 / 市场数据 / 全国分站 / 地区热度榜）
 *   10 首页 · 中栏组件（焦点图 / 选项卡面板 / 热门搜索）
 *   11 首页 · 右栏组件（实时播报 / 热搜榜 / 会员中标榜）
 *   12 内页容器 page + 侧边栏 side-panel
 *   13 列表筛选条 filter-bar
 *   14 空状态 empty-state
 *   15 分页
 *   16 文章详情 article + VIP 付费锁
 *   17 企业详情 company
 *   18 会员中心 user-*
 *   19 会员套餐 price-card
 *   20 底部服务条 site-cta + 页脚 site-footer
 *   21 右侧悬浮工具 float-tools
 *   22 404 错误页 error-page
 *   23 响应式适配
 * ==========================================================================
 */

/* ==========================================================================
   01 设计令牌（Design Tokens）
   ========================================================================== */
:root {
  /* --- 品牌色阶 · 红（主色） --- */
  --zb-red-50:  #fef4f4;
  --zb-red-100: #fce8e8;
  --zb-red-200: #f8caca;
  --zb-red-300: #f29d9d;
  --zb-red-400: #e56d6d;
  --zb-red-500: #dc3545;
  --zb-red-600: #c62828; /* ★ 主色 */
  --zb-red-700: #a51d1d;
  --zb-red-800: #8a1818;
  --zb-red-900: #6d1313;

  /* --- 行业辅助色（行业导航 / 热门搜索分组着色） --- */
  --zb-gold:    #c2740a;
  --zb-green:   #1a7f52;
  --zb-blue:    #1f5fbd;
  --zb-purple:  #7b3fa0;
  --zb-cyan:    #0e7490;
  --zb-orange:  #d2600a;

  /* --- 语义令牌：改主题只需改这一段 --- */
  --zb-primary:        #c62828;
  --zb-primary-hover:  #a51d1d;
  --zb-primary-active: #8a1818;
  --zb-primary-soft:   #fef4f4;
  --zb-primary-border: #f8caca;

  --zb-accent:  #c2740a;
  --zb-success: #1a7f52;
  --zb-info:    #1f5fbd;
  --zb-warn:    #c2740a;
  --zb-danger:  #dc3545;

  /* --- 文字 --- */
  --zb-text:        #2f333a;
  --zb-text-2:      #5b6472;
  --zb-text-3:      #8b95a3;
  --zb-text-invert: #ffffff;

  /* --- 背景与描边 --- */
  --zb-bg:            #f4f6f8;
  --zb-surface:       #ffffff;
  --zb-surface-2:     #fafbfc;
  --zb-border:        #ebedf0;
  --zb-border-strong: #dde1e6;

  /* --- 间距标尺（4px 基线） ---
     组件一律引用下面的语义令牌，不直接写 px；想整体调疏/调密只改语义段。 */
  --zb-sp-1: 4px;
  --zb-sp-2: 8px;
  --zb-sp-3: 12px;
  --zb-sp-4: 16px;
  --zb-sp-5: 20px;
  --zb-sp-6: 24px;

  /* --- 语义间距（★ 全站节奏的唯一来源） ---
     · 卡片内内容统一对齐在 --zb-block 这条竖线上，头 / 列表 / 图表不再各写各的
     · 卡片之间统一 --zb-gap，页面上下统一 --zb-section */
  --zb-block:     16px; /* 卡片水平内边距（内容对齐基准线） */
  --zb-gap:       12px; /* 卡片之间 */
  --zb-gap-sm:     8px; /* 卡片内小元素之间 */
  --zb-section:   24px; /* 页面级上下留白 */
  --zb-head-h:    46px; /* 卡片头高度 */
  /* 楼层列表行高：首页每个楼层内左中右三栏「等高」的计算基准。
     三栏只要列表行数一致（由 zb_home_limits 的 floor_rows 控制），
     卡片高度就一致 —— 排行榜 / 播报区也统一到这个值，才不会参差。 */
  --zb-row-h:     43px; /* = 10px 上下内边距 ×2 + 13.5px×1.7 文字行高 */
  /* 实时播报的可见行数。容器高度 = --zb-row-h × 这个值，
     与各楼层的列表行数取同一个来源（模板按 floor_rows 内联覆盖） */
  --zb-feed-rows: 10;

  /* --- 形状 --- */
  --zb-radius-sm:   6px;
  --zb-radius:      10px;
  --zb-radius-lg:   14px;
  --zb-radius-pill: 999px;

  /* --- 阴影 --- */
  --zb-shadow-xs: 0 1px 2px rgba(17, 24, 39, .05);
  --zb-shadow-sm: 0 1px 3px rgba(17, 24, 39, .06), 0 1px 2px rgba(17, 24, 39, .04);
  --zb-shadow-md: 0 4px 14px rgba(17, 24, 39, .07);
  --zb-shadow-lg: 0 10px 30px rgba(17, 24, 39, .12);

  /* --- 动效 --- */
  --zb-ease: cubic-bezier(.4, 0, .2, 1);
  --zb-dur:  .2s;
}

/* ==========================================================================
   02 基础层
   ========================================================================== */

/* 覆写 Bootstrap 5.3 主题色：按钮 / 链接 / 表单焦点/ 分页 / 导航 全部转红。
   放在 bootstrap.min.css 之后加载，同优先级后者生效。 */
:root {
  --bs-primary:                 #c62828;
  --bs-primary-rgb:             198, 40, 40;
  --bs-primary-text-emphasis:   #8a1818;
  --bs-primary-bg-subtle:       #fef4f4;
  --bs-primary-border-subtle:   #f8caca;
  --bs-link-color:              #c62828;
  --bs-link-hover-color:        #a51d1d;
  --bs-link-color-rgb:          198, 40, 40;
  --bs-link-hover-color-rgb:    165, 29, 29;
}

body {
  background: var(--zb-bg);
  color: var(--zb-text);
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--zb-text);
  font-weight: 700;
  line-height: 1.4;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--zb-dur) var(--zb-ease);
}
a:hover { color: var(--zb-primary); }

/* 图标基线微调：Font Awesome 4 默认 14px/1，与 14px 正文混排时略微下沉 */
.fa, .fas, .far, .fab {
  line-height: 1;
  vertical-align: -.05em;
}

/* 主色实心按钮（Bootstrap .btn-primary 的红色化） */
.btn-primary {
  --bs-btn-bg:                    var(--zb-primary);
  --bs-btn-border-color:          var(--zb-primary);
  --bs-btn-hover-bg:              var(--zb-primary-hover);
  --bs-btn-hover-border-color:    var(--zb-primary-hover);
  --bs-btn-active-bg:             var(--zb-primary-active);
  --bs-btn-active-border-color:   var(--zb-primary-active);
  --bs-btn-disabled-bg:           var(--zb-primary);
  --bs-btn-disabled-border-color: var(--zb-primary);
  --bs-btn-focus-shadow-rgb:      198, 40, 40;
}
.btn-outline-primary {
  --bs-btn-color:                 var(--zb-primary);
  --bs-btn-border-color:          var(--zb-primary);
  --bs-btn-hover-bg:              var(--zb-primary);
  --bs-btn-hover-border-color:    var(--zb-primary);
  --bs-btn-active-bg:             var(--zb-primary);
  --bs-btn-active-border-color:   var(--zb-primary);
  --bs-btn-disabled-color:        var(--zb-primary);
  --bs-btn-disabled-border-color: var(--zb-primary-border);
  --bs-btn-focus-shadow-rgb:      198, 40, 40;
}
.btn-link {
  --bs-btn-color:            var(--zb-primary);
  --bs-btn-hover-color:      var(--zb-primary-hover);
  --bs-btn-active-color:     var(--zb-primary-active);
  --bs-btn-focus-shadow-rgb: 198, 40, 40;
}

/* 表单获取焦点、复选框选中、分页高亮统一主色 */
.form-control:focus,
.form-select:focus {
  border-color: var(--zb-primary-border);
  box-shadow: 0 0 0 .2rem rgba(198, 40, 40, .15);
}
.form-check-input:checked {
  background-color: var(--zb-primary);
  border-color: var(--zb-primary);
}
.page-link { color: var(--zb-primary); }
.page-item.active .page-link {
  background-color: var(--zb-primary);
  border-color: var(--zb-primary);
}
.nav-pills .nav-link.active { background-color: var(--zb-primary); }

/* 区块标题左侧红色竖条 */
.bar {
  display: inline-block;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--zb-primary);
  vertical-align: -2px;
}

/* 文字截断容器 */
.min-w-0 { min-width: 0; }

/* ==========================================================================
   03 顶部条 site-topbar
   ========================================================================== */
.site-topbar {
  height: 34px;
  font-size: 12px;
  color: #dfe3e8;
  background: var(--zb-red-900);
}
.site-topbar .container-xxl { height: 100%; }
.site-topbar__brand { margin: 0; font-size: 12px; color: #cbd0d6; }
.site-topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-topbar__nav a { color: #dfe3e8; }
.site-topbar__nav a:hover { color: #fff; }
.site-topbar__nav a.is-strong { color: #ffd666; font-weight: 600; }
.site-topbar__nav a.is-strong:hover { color: #fff; }

/* ==========================================================================
   04 站点头部 site-header
   ========================================================================== */
.site-header {
  background: var(--zb-surface);
  border-bottom: 1px solid var(--zb-border);
}
/* 站点头部是独立的"导航区"，间距比内容区大一档（28/16），
   让 Logo → 搜索 → 右侧工具 三段有明确的分段感 */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: calc(var(--zb-sp-6) + var(--zb-sp-1));
  /* 只给上下内边距。左右必须留给 container-xxl 的 gutter（--bs-gutter-x 的一半，12px）：
     写成 padding: var(--zb-block) 0 会把左右留白清零 —— 桌面端看着不明显，
     手机屏搜索区撑满到屏幕边缘、与下面导航条和正文的左边界对不齐。 */
  padding-top: var(--zb-block);
  padding-bottom: var(--zb-block);
}

/* --- Logo --- */
.site-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.site-logo__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: 10px;
  border-radius: var(--zb-radius);
  color: #fff;
  font-size: 22px;
  background: linear-gradient(135deg, var(--zb-red-600) 0%, var(--zb-red-400) 100%);
  box-shadow: 0 6px 16px rgba(198, 40, 40, .28);
}
.site-logo__text { line-height: 1.25; }
.site-logo__name {
  display: block;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--zb-primary);
}
.site-logo__slogan {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--zb-text-3);
}

/* --- 全站搜索 --- */
.site-search { flex: 1 1 auto; min-width: 0; }
.site-search__tabs {
  display: flex;
  gap: var(--zb-sp-1);
  margin: 0 0 var(--zb-sp-1);
  padding: 0;
  list-style: none;
}
.site-search__tab {
  padding: 4px 16px;
  border-radius: var(--zb-radius-pill);
  font-size: 13px;
  color: var(--zb-text-2);
  cursor: pointer;
  transition: all var(--zb-dur) var(--zb-ease);
}
.site-search__tab.is-active {
  color: #fff;
  background: var(--zb-primary);
}
.site-search__form {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 2px solid var(--zb-primary);
  border-radius: var(--zb-radius);
  overflow: hidden;
  background: #fff;
}
.site-search__field {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-1);
  padding: 0 var(--zb-sp-3);
  min-width: 0;
  border-right: 1px solid var(--zb-border);
  color: var(--zb-text-3);
}
.site-search__field:last-of-type { border-right: 0; }
.site-search__field--select { flex: 0 0 132px; }
.site-search__field--input  { flex: 1 1 auto; }
.site-search__field .form-select,
.site-search__field .form-control {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  font-size: 14px;
  box-shadow: none;
  background: transparent;
}
/* 下拉框要给右侧箭头留位，否则箭头会压在文字上 */
.site-search__field .form-select {
  padding-right: 14px;
  background-position: right center;
}
.site-search__field .form-select:focus,
.site-search__field .form-control:focus { box-shadow: none; }
.site-search__field .form-control::placeholder { color: var(--zb-text-3); }
.site-search__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--zb-sp-1);
  flex: 0 0 108px;
  border: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  background: var(--zb-primary);
  transition: background var(--zb-dur) var(--zb-ease);
}
.site-search__submit:hover { background: var(--zb-primary-hover); }

/* --- 搜索框下拉（自定义面板） ---
   原生 <select> 展开后的列表由浏览器绘制：蓝底白字的选中行、系统行高，
   CSS 只能改 option 的颜色、改不了高亮块，与整站红白配色对不上。
   桌面端（支持 hover）改由自定义面板接管，触摸设备仍用系统原生下拉 ——
   手机上原生滚轮选择比自绘面板更顺手。
   原生 select 保留：视觉透明但铺满整格，继续承担表单提交值；
   JS 失效时它就是普通原生下拉，不会变成不可用。 */
.site-search__field--select { position: relative; }
.site-search__field--select.is-enhanced .form-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;            /* 视觉隐藏，但仍在表单里 */
  pointer-events: none;  /* 点击交给面板，避免同时弹出原生下拉 */
}
.zb-select__value {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: var(--zb-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zb-select__arrow {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--zb-text-3);
  transition: transform var(--zb-dur) var(--zb-ease);
}
.site-search__field--select.is-open { background: var(--zb-primary-soft); }
.site-search__field--select.is-open .zb-select__arrow { transform: rotate(180deg); }
/* 面板用 fixed + JS 定位：.site-search__form 带着 overflow:hidden（为了裁圆角），
   absolute 子元素会被裁掉，fixed 不受它影响 */
.zb-select__menu {
  display: none;
  position: fixed;
  z-index: 1200;
  max-height: 320px;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--zb-border);
  border-radius: var(--zb-radius-sm);
  background: #fff;
  box-shadow: var(--zb-shadow-lg);
  /* 只淡入、不做位移：面板是 fixed 定位，位移会在动画期间影响翻转判定的坐标 */
  animation: zb-fade-in .12s var(--zb-ease);
}
.site-search__field--select.is-open .zb-select__menu { display: block; }
@keyframes zb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.zb-select__opt {
  padding: 7px 14px;
  font-size: 13.5px;
  color: var(--zb-text-2);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--zb-dur) var(--zb-ease);
}
.zb-select__opt:hover { color: var(--zb-primary); background: var(--zb-primary-soft); }
.zb-select__opt.is-active { color: var(--zb-primary); font-weight: 600; }

/* ==========================================================================
   05 主导航 site-nav
   ========================================================================== */
.site-nav {
  background: linear-gradient(90deg, var(--zb-red-800) 0%, var(--zb-red-600) 55%, var(--zb-red-500) 100%);
  box-shadow: 0 2px 8px rgba(140, 20, 20, .22);
}
/* 导航条高度与卡片头同高（46px），横向扫过去时头部区是整齐的一条线 */
.site-nav__inner {
  display: flex;
  align-items: center;
  height: var(--zb-head-h);
}

/* --- 左侧"全部栏目" + 下拉大面板 --- */
.site-nav__all {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 210px;
  height: 100%;
  padding: 0 var(--zb-sp-5);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  background: rgba(0, 0, 0, .16);
}
.site-nav__mega {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1030;
  width: 640px;
  padding: var(--zb-sp-5);
  border-radius: 0 0 var(--zb-radius) var(--zb-radius);
  background: #fff;
  box-shadow: var(--zb-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--zb-dur) var(--zb-ease);
}
.site-nav__all:hover .site-nav__mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* 大面板内：列间 20px 拉开分组、组内卡片 8px 抱团，
   形成"分组 > 卡片"两级层次，扫一眼就知道哪些栏目属于同一组 */
.mega-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zb-sp-3) var(--zb-sp-5);
}
.mega-panel__col { min-width: 0; }
.mega-panel__title {
  display: flex;
  align-items: center;
  margin: 0 0 var(--zb-sp-3);
  font-size: 14px;
  font-weight: 700;
  color: var(--zb-primary);
}
.mega-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zb-sp-2);
}
.mega-panel__link {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-1);
  padding: var(--zb-sp-2) var(--zb-sp-3);
  border: 1px solid var(--zb-border);
  border-radius: var(--zb-radius-sm);
  font-size: 13px;
  color: var(--zb-text-2);
  background: var(--zb-surface-2);
}
.mega-panel__link:hover {
  color: var(--zb-primary);
  border-color: var(--zb-primary-border);
  background: var(--zb-primary-soft);
}
.mega-panel__link .fa { color: var(--zb-primary); font-size: 13px; }

/* --- 主导航链接 --- */
.site-nav__list {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.site-nav__item { flex: 0 0 auto; }
.site-nav__link {
  display: flex;
  align-items: center;
  height: var(--zb-head-h);
  padding: 0 var(--zb-sp-3);
  color: #f5e9e9;
  font-size: 14px;
  white-space: nowrap;
}
.site-nav__link:hover { color: #fff; background: rgba(0, 0, 0, .14); }
.site-nav__item.is-active .site-nav__link {
  color: #fff;
  font-weight: 700;
  background: rgba(0, 0, 0, .22);
}
/* --- 右侧操作区 --- */
.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.site-nav__action {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 var(--zb-sp-3);
  border-radius: var(--zb-radius-pill);
  color: #fff;
  font-size: 13px;
  background: rgba(255, 255, 255, .14);
}
.site-nav__action:hover { color: #fff; background: rgba(255, 255, 255, .26); }
.site-nav__action--hot {
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, var(--zb-accent) 0%, #e8890b 100%);
}
.site-nav__action--hot:hover { color: #fff; }

/* ==========================================================================
   06 通用卡片容器 panel
   ========================================================================== */
.panel {
  border-radius: var(--zb-radius);
  background: var(--zb-surface);
  box-shadow: var(--zb-shadow-sm);
  overflow: hidden;
}
/* 卡片之间的间距。注意：flex 容器里 margin 不折叠，会和 gap 叠加成双倍，
   因此 .home__col 内统一走 gap，并在那里把这条 margin 归零。 */
.panel + .panel { margin-top: var(--zb-gap); }
.panel__head {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-2);
  height: var(--zb-head-h);
  padding: 0 var(--zb-block);
  border-bottom: 1px solid var(--zb-border);
  background: var(--zb-surface-2);
}
.panel__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.panel__title .fa { color: var(--zb-primary); font-size: 15px; }
.panel__sub {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--zb-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel__tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  /* 必须给 min-width:0，否则 flex 项的自动最小尺寸等于内容宽，
     页签一多就会把卡片头撑破而不是收缩 */
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  /* 窄栏里页签放不下时横向滑动，而不是被裁掉后点不到（1F/4F 中栏各有 5 个页签） */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.panel__tabs::-webkit-scrollbar { display: none; }
.panel__tab {
  padding: 3px 12px;
  border-radius: var(--zb-radius-pill);
  font-size: 13px;
  color: var(--zb-text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--zb-dur) var(--zb-ease);
}
.panel__tab:hover { color: var(--zb-primary); }
.panel__tab.is-active {
  color: #fff;
  font-weight: 600;
  background: var(--zb-primary);
}
.panel__more {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--zb-text-3);
}
.panel__more:hover { color: var(--zb-primary); }
/* 卡片内直接放结构化组件（列表/图表/宫格）时，组件自己带内边距，
   这里只作为纯文字内容的容器留白 */
.panel__body { padding: var(--zb-sp-3) var(--zb-block); }

/* ==========================================================================
   07 通用信息列表 entry-list + 标签 entry-tag
   ========================================================================== */
.entry-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 行高锁死为 --zb-row-h：楼层三栏等高的前提是「行数 × 行高」可预期，
   靠内边距 + 文字行高推算会在不同字体渲染下差 1~2px，累积 10 行就看得出来 */
.entry-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 56px;
  align-items: center;
  gap: var(--zb-sp-2);
  min-height: var(--zb-row-h);
  padding: 0 var(--zb-block);
  border-bottom: 1px dashed var(--zb-border);
  transition: background var(--zb-dur) var(--zb-ease);
}
.entry-list__item:last-child { border-bottom: 0; }
.entry-list__item:hover { background: var(--zb-primary-soft); }

/* 窄栏变体：3 列宽的卡片里，三列式会把标题挤到 100px 以内。
   改为两列（标题 + 日期）、隐去地区列 —— 楼层右栏/左栏统一用它。
   地区信息在该栏不是主要诉求，詳情页与筛选器里都能按地区检索。 */
.entry-list--narrow .entry-list__item { grid-template-columns: minmax(0, 1fr) 56px; }
.entry-list--narrow .entry-list__area { display: none; }
.entry-list__main {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.entry-list__link {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--zb-text);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-list__item:hover .entry-list__link { color: var(--zb-primary); }
.entry-list__area,
.entry-list__date {
  font-size: 12px;
  color: var(--zb-text-3);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-list__area { text-align: left; }
.entry-list__date { text-align: right; }



/* 公告类型标签 */
.entry-tag {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--zb-primary);
  background: var(--zb-primary-soft);
}
.entry-tag--win   { color: var(--zb-accent);  background: #fdf3e3; }
.entry-tag--chg   { color: var(--zb-info);    background: #eaf1fd; }
.entry-tag--info  { color: var(--zb-text-3);  background: #f1f3f5; }
.entry-tag--ind   { color: var(--zb-success); background: #eaf7f0; }

/* ==========================================================================
   08 首页楼层骨架 home（按楼层组织的 左 3 / 中 6 / 右 3）
   ========================================================================== */
/* 页面级上下留白。底部只留 section 的一半：楼层底部本就是卡片收口，
   再叠满 24px 会让页脚显得悬空，留 12px 反而更紧凑。 */
.home { padding: var(--zb-section) 0 var(--zb-sp-3); }

/* --- 楼层 --- */
.floor + .floor { margin-top: var(--zb-section); }

/* 楼层头：通栏，横跨三栏，是楼层的「招牌」 */
.floor__head {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-3);
  margin-bottom: var(--zb-gap);
  padding-bottom: var(--zb-sp-2);
  border-bottom: 2px solid var(--zb-border);
}
.floor__no {
  flex: 0 0 auto;
  padding: 0 var(--zb-sp-2);
  border-radius: var(--zb-radius-sm);
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  color: #fff;
  background: var(--zb-primary);
}
.floor__title {
  flex: 0 0 auto;
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
}
.floor__desc {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  color: var(--zb-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 三栏容器。等高的两道保险：
   ① Grid 的 stretch：卡片外框一定齐平（"看起来等高"靠这条）
   ② 各栏列表都取 floor_rows 行：内容高度本身接近，卡片被拉伸时不会留大片空白 */
/* 标准楼层：左 3 / 中 6 / 右 3，三栏等高。
   2F 只有两栏（精选商机 + 热门搜索），用 --3-9 变体把 6+3 合成 9 份。 */
.floor__grid {
  display: grid;
  grid-template-columns: 3fr 6fr 3fr;
  gap: var(--zb-gap);
  align-items: stretch;
}
.floor__grid--3-9 { grid-template-columns: 3fr 9fr; }
/* 3F 是四栏等宽（货物 / 工程 / 服务 / 设备），四栏各 10 行、严格等高 */
.floor__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 9 份宽里 6 个行业组排 3 列 × 2 行。
   这里必须改列数：沿用 2 列会变成 3 行，内容总高约 508px，
   超过左栏 10 行列表的 476px，卡片被撑破 */
.floor__grid--3-9 .keyword-group {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* 行高等分容器：2 行卡片各自长高、共同填满 430px 内容区，
     与左栏 10 条 43px 的列表严格齐平，行距维持 gap 不变 */
  grid-auto-rows: minmax(0, 1fr);
}
.floor__col {
  display: flex;
  flex-direction: column;
  gap: var(--zb-gap);
  min-width: 0;
}
/* 卡片撑满栏高 —— 三栏卡片外框齐平就是这条在起作用 */
.floor__col > .panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
/* 卡片头高度固定、不参与伸缩，否则会被压扁 */
.floor__col > .panel > .panel__head { flex: 0 0 auto; }
/* 卡片内最后一个内容块吸收剩余高度：
   行数偏少的那一栏由它吃掉空隙，卡片底部才不会突兀留白 */
.floor__col > .panel > :last-child { flex: 1 1 auto; }

/* --- 内容块如何"吃掉"剩余高度 ---
   网格类内容（关键词组）由行高吸收富余，不把富余算进行间隙：
   2F 右栏只有 2 行卡片，若用 align-content: space-between，
   430px 容器里 54px 的富余会全塞进那唯一一个行间隙（12px → 66px），
   两行卡片之间空出一大块。改成 grid-auto-rows 等分行高，
   卡片自己长高、行距保持 12px —— 视觉上块是变大了，块间却是紧的。 */
.floor__col .panel__body { display: flex; flex-direction: column; }
.floor__col .panel__body > .keyword-group { flex: 1 1 auto; }

/* ==========================================================================
   09 首页 · 左栏组件
   ========================================================================== */

/* --- 行业导航 --- */
/* 通栏平铺：30 个行业排 6 列 × 5 行，放在焦点图正下方当作全站分类入口 */
/* 1F 左栏：30 个行业排 3 列 × 10 行。
   每格高度锁死 --zb-row-h、整块不加上下内边距，
   于是 10 行正好 430px，与同层中栏的 10 条公告严格等高。 */
.industry-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0 var(--zb-block);
}
.industry-nav__item {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-1);
  height: var(--zb-row-h);
  padding: 0 var(--zb-sp-1);
  border: 1px solid transparent;
  border-radius: var(--zb-radius-sm);
  font-size: 12.5px;
  color: var(--zb-text-2);
  overflow: hidden;
}
.industry-nav__item:hover {
  color: var(--zb-primary);
  border-color: var(--zb-primary-border);
  background: var(--zb-primary-soft);
}
.industry-nav__item .fa {
  flex: 0 0 auto;
  color: var(--item-color, var(--zb-primary));
  font-size: 12.5px;
}
.industry-nav__item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 全国分站 --- */
/* 31 省 + 全国 = 32 格，3 列 × 11 行，最后一格的「全国」占两列高亮。
   每格做成标签块而不是纯文字：这一栏格子多、又窄，
   有底色块时是整齐的按钮网格，纯文字会显得散。

   高度必须锁死：11 行若按 --zb-row-h 取值会到 545px，
   把整层撑高、左右两栏底部空出一大块。这里改成
   「内容区固定 10 行高 + 11 行等分」，多出的第 11 行由各行摊薄吸收，
   卡片总高正好 46 + 430 = 476px，与左栏地区热度、中栏公告列表齐平。 */
.branch-city {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 3px var(--zb-sp-2);
  height: calc(var(--zb-row-h) * 10);
  padding: var(--zb-sp-2) var(--zb-block);
  box-sizing: border-box;
}
.branch-city__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  border-radius: var(--zb-radius-sm);
  font-size: 12.5px;
  color: var(--zb-text);
  background: var(--zb-surface-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all var(--zb-dur) var(--zb-ease);
}
.branch-city__link:hover { color: #fff; background: var(--zb-primary); }
/* 「全国」放在最后一格，占两列宽度，做成主色按钮 */
.branch-city__link.is-current {
  grid-column: span 2;
  color: #fff;
  font-weight: 600;
  background: var(--zb-primary);
}

/* --- 地区热度榜 --- */
/* 整块不留上下内边距，行高交给每一行，卡片总高才能与同楼层其它栏对齐 */
.region-rank { padding: 0 var(--zb-block); }
.region-rank__row {
  display: grid;
  grid-template-columns: 18px 56px minmax(0, 1fr);
  align-items: center;
  gap: var(--zb-sp-2);
  min-height: var(--zb-row-h);
  border-bottom: 1px dashed var(--zb-border);
}
.region-rank__row:last-child { border-bottom: 0; }
.region-rank__no {
  font-size: 12px;
  font-weight: 700;
  color: var(--zb-text-3);
  text-align: center;
}
.region-rank__no.is-top1 { color: var(--zb-red-600); }
.region-rank__no.is-top2 { color: var(--zb-red-400); }
.region-rank__no.is-top3 { color: var(--zb-accent); }
.region-rank__name {
  font-size: 12.5px;
  color: var(--zb-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.region-rank__bar {
  display: block;
  height: 6px;
  border-radius: var(--zb-radius-pill);
  background: #f1f3f5;
  overflow: hidden;
}
.region-rank__bar > i {
  display: block;
  height: 100%;
  border-radius: var(--zb-radius-pill);
  background: linear-gradient(90deg, var(--zb-red-400) 0%, var(--zb-red-600) 100%);
  transition: width .6s var(--zb-ease);
}

/* ==========================================================================
   10 首页 · 中栏组件
   ========================================================================== */

/* --- 选项卡面板内容区 --- */
.tab-pane__list { min-height: 300px; }
.tab-pane__empty {
  padding: calc(var(--zb-sp-6) + var(--zb-block)) 0;
  font-size: 13px;
  color: var(--zb-text-3);
  text-align: center;
}

/* --- 热门搜索关键词分组 --- */
/* 八组行业卡片：卡片之间 12px、卡片内 12px，与外层卡片内边距同值，
   形成"外 16 / 内 12"的稳定层次，不会里外一样宽 */
.keyword-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zb-sp-3);
  padding: var(--zb-sp-3) var(--zb-block);
}
.keyword-group__item {
  /* 行高被 grid-auto-rows 拉高后，卡片比内容略高；
     让内容垂直居中，多出的十来像素上下均分，不会全堆在底部 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--zb-border);
  border-radius: var(--zb-radius-sm);
  padding: var(--zb-sp-3);
  min-width: 0;
  background: var(--zb-surface-2);
}
.keyword-group__head {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-1);
  margin-bottom: var(--zb-sp-2);
}
.keyword-group__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: var(--zb-radius-sm);
  font-size: 13px;
  color: var(--icon-color, var(--zb-primary));
  background: var(--icon-bg, var(--zb-primary-soft));
}
.keyword-group__name {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.keyword-group__more {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--zb-text-3);
  white-space: nowrap;
}
.keyword-group__more:hover { color: var(--zb-primary); }
.keyword-group__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.keyword-group__list > li {
  display: flex;
  align-items: flex-start;
  gap: var(--zb-sp-1);
  padding: var(--zb-sp-1) 0;
}
.keyword-group__label {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--zb-text-2);
  padding-top: 2px;
}
.keyword-group__words {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  min-width: 0;
}
.keyword-group__words a {
  font-size: 12px;
  color: var(--zb-text-2);
  line-height: 1.8;
}
.keyword-group__words a:hover { color: var(--zb-primary); text-decoration: underline; }

/* ==========================================================================
   11 首页 · 右栏组件
   ========================================================================== */

/* --- 实时公告播报 --- */
/* 播报区是滚动容器：高度 = 楼层行高 × 可见行数，与同楼层左右两栏的列表行数一致。
   可见行数由模板内联 --zb-feed-rows 传入（取自 zb_home_limits 的 floor_rows），
   改条数时不必同步改 CSS。 */
.live-feed {
  position: relative;
  height: calc(var(--zb-row-h) * var(--zb-feed-rows, 10));
  overflow: hidden;
}
.live-feed__list {
  margin: 0;
  padding: 0;
  list-style: none;
  animation: live-roll 40s linear infinite;
}
.live-feed:hover .live-feed__list { animation-play-state: paused; }
/* 行高固定为 --zb-row-h，与同楼层列表行一致（滚动容器必须整除，
   否则两份内容拼接处会出现半像素跳动） */
.live-feed__item {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-1);
  height: var(--zb-row-h);
  padding: 0 var(--zb-block);
  border-bottom: 1px dashed var(--zb-border);
}
.live-feed__item:hover { background: var(--zb-primary-soft); }
.live-feed__link {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--zb-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-feed__item:hover .live-feed__link { color: var(--zb-primary); }
.live-feed__time {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--zb-text-3);
}
.live-feed__time .fa { margin-right: 2px; }
/* 内容输出两份（模板里重复渲染一次），CSS 位移 50% 即无缝循环，无需 JS 测量高度 */
@keyframes live-roll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* ==========================================================================
   12 内页容器 page + 侧边栏 side-panel
   ========================================================================== */
/* 内页容器只给上下留白，卡片内部的留白交给各组件，避免内外边距叠加 */
.page { padding: var(--zb-section) 0; }
.page__title {
  margin: 0 0 var(--zb-sp-3);
  font-size: 20px;
  font-weight: 800;
}
.page__title .fa { color: var(--zb-primary); margin-right: 6px; }

/* 侧边栏容器 */
.side-panel {
  border-radius: var(--zb-radius);
  background: var(--zb-surface);
  box-shadow: var(--zb-shadow-sm);
  overflow: hidden;
}
.side-panel__block { padding: var(--zb-sp-3) var(--zb-block); }
.side-panel__block + .side-panel__block { border-top: 1px solid var(--zb-border); }
.side-panel__title {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-1);
  margin: 0 0 var(--zb-sp-2);
  font-size: 14px;
  font-weight: 700;
}
.side-panel__title .fa { color: var(--zb-primary); }
.side-panel__more {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--zb-text-3);
}
.side-panel__more:hover { color: var(--zb-primary); }

/* 侧边栏排行列表 */
.rank-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rank-list__item {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-2);
  padding: var(--zb-sp-1) 0;
  font-size: 13px;
}
.rank-list__no {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: var(--zb-text-2);
  background: #f1f3f5;
}
.rank-list__no.is-top { color: #fff; background: var(--zb-primary); }
.rank-list__link {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--zb-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-list__item:hover .rank-list__link { color: var(--zb-primary); }
.rank-list__vip {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--zb-accent);
}
.rank-list__vip .fa { margin-right: 2px; }
.rank-list__hits {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--zb-text-3);
}

/* 侧边栏分类网格 */
.cate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zb-sp-1) var(--zb-sp-2);
}
.cate-grid__link {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-1);
  font-size: 12.5px;
  color: var(--zb-text-2);
  overflow: hidden;
}
.cate-grid__link:hover { color: var(--zb-primary); }
.cate-grid__link .fa { flex: 0 0 auto; color: var(--zb-primary-border); font-size: 10px; }
.cate-grid__link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 侧边栏省份宫格 */
.prov-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--zb-sp-2);
}
.prov-grid__link {
  padding: var(--zb-sp-1) 0;
  border-radius: var(--zb-radius-sm);
  font-size: 12px;
  color: var(--zb-text-2);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prov-grid__link:hover { color: #fff; background: var(--zb-primary); }

/* ==========================================================================
   13 列表筛选条 filter-bar
   ========================================================================== */
/* 筛选条与下方结果卡片的间距，与卡片之间同值（12px），
   否则"筛选条→列表"的缝隙会比"卡片→卡片"窄，节奏不统一 */
.filter-bar {
  padding: var(--zb-sp-3) var(--zb-block);
  margin-bottom: var(--zb-gap);
  border: 1px solid var(--zb-border);
  border-radius: var(--zb-radius);
  background: var(--zb-surface-2);
}
/* 筛选条嵌在卡片内时（.panel__body > .filter-bar）：
   用负边距抵消父级内边距、撑满卡片宽度并去掉左右圆角，变成卡片内的一条分隔带。
   这样它自带的 16px 内边距与下方列表行落在同一条竖线上；
   若不做抵消，左右会是 16+16=32px，筛选框文字与列表文字明显错开。 */
.panel__body .filter-bar {
  margin: 0 calc(-1 * var(--zb-block)) var(--zb-gap);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}
/* 筛选条是卡片内最后一块时，它到下方列表的距离由 .panel__body 的下内边距负责，
   这里的 margin-bottom 会再叠一份变成 24px，必须归零 */
.panel__body > .filter-bar:last-child { margin-bottom: 0; }
.filter-bar .form-control,
.filter-bar .form-select { font-size: 13px; }
/* 输入组内的边框由 Bootstrap 的 .input-group 负责合并，这里只调色 */
.filter-bar .input-group-text {
  color: var(--zb-text-3);
  background: #fff;
}
.filter-bar .input-group .form-control:focus { border-color: var(--zb-border-strong); box-shadow: none; }

/* ==========================================================================
   14 空状态 empty-state
   ========================================================================== */
.empty-state {
  padding: calc(var(--zb-sp-6) * 2) var(--zb-block);
  text-align: center;
}
.empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--zb-sp-3);
  border-radius: 50%;
  font-size: 28px;
  color: var(--zb-primary-border);
  background: var(--zb-primary-soft);
}
/* 标题与描述贴紧（4px）成一组，与下方按钮拉开（16px），形成"信息组 → 行动点"的层次 */
.empty-state__title { margin: 0 0 var(--zb-sp-1); font-size: 16px; }
.empty-state__desc { margin: 0 0 var(--zb-sp-4); font-size: 13px; color: var(--zb-text-3); }

/* ==========================================================================
   15 分页（Bootstrap .pagination 的视觉定制）
   ========================================================================== */
.pagination { margin: 0; font-size: 13px; }
.pagination .page-link { padding: .3rem .65rem; }

/* ==========================================================================
   16 文章详情 article
   ========================================================================== */
.article__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.5;
}
/* 元信息行：上 12px 隔开大标题、下 12px + 分隔线隔开正文，
   行内换行时纵向 6px、横向 16px，不挤成一片 */
.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zb-sp-1) var(--zb-block);
  margin: var(--zb-sp-3) 0;
  padding-bottom: var(--zb-sp-3);
  border-bottom: 1px solid var(--zb-border);
  font-size: 12.5px;
  color: var(--zb-text-3);
}
.article__meta .fa { margin-right: 4px; }
.article__meta-item { display: inline-flex; align-items: center; }
.article__tag {
  padding: 1px 8px;
  border-radius: var(--zb-radius-pill);
  font-size: 11.5px;
  color: var(--zb-primary);
  background: var(--zb-primary-soft);
}
.article__tag--plan { color: var(--zb-info); background: #eaf1fd; }
.article__tag--vip  { color: var(--zb-accent); background: #fdf3e3; }
.article__body {
  font-size: 15px;
  line-height: 1.9;
  color: var(--zb-text);
  word-break: break-word;
}
.article__body img { max-width: 100%; height: auto; }
.article__body p { margin-bottom: 1em; }
/* 付费文章的前导预览：底部渐隐，暗示下方还有内容 */
.article-preview {
  position: relative;
  max-height: 320px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}

/* 前后篇导航 */
.article__nav { display: flex; gap: var(--zb-sp-3); }
.article__nav-link {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-1);
  flex: 1 1 0;
  min-width: 0;
  padding: var(--zb-sp-2) var(--zb-sp-3);
  border-radius: var(--zb-radius-sm);
  font-size: 13px;
  color: var(--zb-text-2);
  background: var(--zb-surface-2);
}
.article__nav-link:hover { color: var(--zb-primary); background: var(--zb-primary-soft); }
.article__nav-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.article__nav-link .fa { flex: 0 0 auto; color: var(--zb-primary); }

/* 相关推荐 */
.related-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rel;
}
.related-list__item { border-bottom: 1px dashed var(--zb-border); }
.related-list__item:last-child { border-bottom: 0; }
.related-list__link {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-2);
  padding: var(--zb-sp-2) 0;
}
.related-list__idx {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: var(--zb-text-2);
  background: #f1f3f5;
}
.related-list__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  color: var(--zb-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.related-list__link:hover .related-list__title { color: var(--zb-primary); }
.related-list__tag {
  flex: 0 0 auto;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--zb-success);
  background: #eaf7f0;
}
.related-list__date {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--zb-text-3);
}
.related-list__date .fa { margin-right: 3px; }

/* --- VIP 付费锁 --- */
/* 付费锁是整页的转化主视觉，留白比普通卡片大一档（24/24 vs 12/16），
   让读者明显感觉到"这里是一个独立环节" */
.vip-lock {
  padding: var(--zb-section) var(--zb-section);
  border: 1px dashed var(--zb-primary-border);
  border-radius: var(--zb-radius);
  text-align: center;
  background: var(--zb-primary-soft);
}
.vip-lock__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--zb-sp-3);
  border-radius: 50%;
  font-size: 24px;
  color: #fff;
  background: linear-gradient(135deg, var(--zb-red-500), var(--zb-red-700));
  box-shadow: 0 6px 16px rgba(198, 40, 40, .25);
}
.vip-lock__title { margin: 0 0 var(--zb-sp-1); font-size: 17px; font-weight: 700; }
.vip-lock__sub { margin: 0 0 var(--zb-sp-4); font-size: 13px; color: var(--zb-text-2); }
.vip-lock__feats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zb-sp-1) var(--zb-block);
  max-width: 520px;
  margin: 0 auto var(--zb-sp-5);
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--zb-text-2);
  text-align: left;
}
.vip-lock__feats .fa { margin-right: var(--zb-sp-1); color: var(--zb-success); }
.vip-lock__cta { display: flex; justify-content: center; gap: var(--zb-sp-3); }
.vip-lock__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--zb-sp-1);
  padding: var(--zb-sp-2) var(--zb-section);
  border-radius: var(--zb-radius-pill);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--zb-primary);
}
.vip-lock__btn:hover { color: #fff; background: var(--zb-primary-hover); }
.vip-lock__btn--ghost {
  color: var(--zb-primary);
  background: #fff;
  border: 1px solid var(--zb-primary-border);
}
.vip-lock__btn--ghost:hover { color: var(--zb-primary); background: var(--zb-primary-soft); }
.vip-lock__tip { margin: var(--zb-sp-3) 0 0; font-size: 12px; color: var(--zb-text-3); }

/* ==========================================================================
   17 企业详情 company
   ========================================================================== */
.company-hero {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-4);
  padding: var(--zb-sp-5);
  border-radius: var(--zb-radius);
  color: #fff;
  background: linear-gradient(120deg, var(--zb-red-800) 0%, var(--zb-red-600) 60%, var(--zb-red-400) 100%);
  box-shadow: var(--zb-shadow-md);
}
.company-hero__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  border-radius: var(--zb-radius);
  font-size: 28px;
  font-weight: 800;
  color: var(--zb-primary);
  background: #fff;
}
.company-hero__name {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}
.company-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zb-sp-1) var(--zb-sp-3);
  margin-top: var(--zb-sp-1);
  font-size: 12.5px;
  color: rgba(255, 255, 255, .85);
}
.company-hero__tag {
  padding: 1px 8px;
  border-radius: var(--zb-radius-pill);
  background: rgba(255, 255, 255, .18);
}
.company-hero__tag .fa { margin-right: 4px; }
.company-hero__status--ok   { color: #a7f3c4; }
.company-hero__status--warn { color: #ffd666; }

/* 企业基本信息 */
.company-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--zb-border);
}
/* 信息表格用 1px 网格 + 边框色背景模拟分隔线，
   单元格内边距与卡片基准线一致（16px 横向），视觉上与上下卡片对齐 */
.company-info__cell {
  display: flex;
  align-items: flex-start;
  gap: var(--zb-sp-2);
  padding: var(--zb-sp-3) var(--zb-block);
  background: #fff;
}
.company-info__cell--wide { grid-column: 1 / -1; }
.company-info__icon {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--zb-primary);
  font-size: 15px;
}
.company-info__key {
  font-size: 12px;
  color: var(--zb-text-3);
  line-height: 1.6;
}
.company-info__value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--zb-text);
  word-break: break-all;
}
.company-scope {
  padding: var(--zb-sp-3) var(--zb-block);
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--zb-text-2);
  word-break: break-word;
}

/* 企业列表项 */
.company-item {
  display: flex;
  align-items: flex-start;
  gap: var(--zb-sp-3);
  padding: var(--zb-sp-3) var(--zb-block);
  border-bottom: 1px dashed var(--zb-border);
  transition: background var(--zb-dur) var(--zb-ease);
}
.company-item:hover { background: var(--zb-primary-soft); }
.company-item:last-child { border-bottom: 0; }
.company-item__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--zb-red-500), var(--zb-red-700));
}
.company-item__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--zb-text);
}
.company-item:hover .company-item__name { color: var(--zb-primary); }
.company-item__status {
  padding: 0 7px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--zb-success);
  background: #eaf7f0;
}
.company-item__status--warn { color: var(--zb-warn); background: #fdf3e3; }
/* 企业名称 → 元信息 → 经营范围 三行递进，间距 4px / 4px，
   三者属于同一条记录的"一组信息"，必须抱团 */
.company-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zb-sp-1) var(--zb-sp-3);
  margin-top: var(--zb-sp-1);
  font-size: 12px;
  color: var(--zb-text-2);
}
.company-item__meta .fa { margin-right: var(--zb-sp-1); color: var(--zb-text-3); }
.company-item__scope {
  margin: var(--zb-sp-1) 0 0;
  font-size: 12px;
  color: var(--zb-text-3);
}
.company-item__hits {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--zb-text-3);
  white-space: nowrap;
}

/* 企业详情列表 */
.company-list { margin: 0; padding: 0; list-style: none; }
.company-list__item { border-bottom: 1px dashed var(--zb-border); }
.company-list__item:last-child { border-bottom: 0; }
.company-list__link {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-2);
  padding: 10px var(--zb-block);
  font-size: 13.5px;
}
.company-list__link:hover { background: var(--zb-primary-soft); }
.company-list__dot {
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--zb-primary-border);
}
.company-list__title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--zb-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.company-list__link:hover .company-list__title { color: var(--zb-primary); }
.company-list__cat {
  flex: 0 0 auto;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--zb-primary);
  background: var(--zb-primary-soft);
}
.company-list__city,
.company-list__date {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--zb-text-3);
}
.company-list__date { min-width: 82px; text-align: right; }

/* 板块小标题（企业详情 / 404 等内页共用） */
.block-title {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-1);
  margin: 0;
  padding: var(--zb-sp-3) var(--zb-block);
  border-bottom: 1px solid var(--zb-border);
  font-size: 15px;
  font-weight: 700;
  background: var(--zb-surface-2);
}
.block-title .fa { color: var(--zb-primary); }
.block-title__more {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--zb-text-3);
}

/* ==========================================================================
   18 会员中心 user-*
   ========================================================================== */

/* --- 用户信息卡 --- */
.user-card { border-radius: var(--zb-radius); background: var(--zb-surface); box-shadow: var(--zb-shadow-sm); overflow: hidden; }
.user-card__top {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-3);
  padding: var(--zb-block);
}
.user-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--zb-red-500), var(--zb-red-700));
}
.user-card__nick { font-size: 15px; font-weight: 700; }
.user-card__phone { font-size: 12px; color: var(--zb-text-3); }
.user-card__vip {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-2);
  padding: var(--zb-sp-3) var(--zb-block);
  border-top: 1px solid var(--zb-border);
  font-size: 12.5px;
  background: var(--zb-surface-2);
}
.user-card__vip-badge {
  padding: 1px 10px;
  border-radius: var(--zb-radius-pill);
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--zb-accent), #e8890b);
}
.user-card__vip-plain { color: var(--zb-text-3); }
.user-card__vip-open { margin-left: auto; font-size: 12px; color: var(--zb-primary); font-weight: 600; }

/* --- 会员侧边导航 --- */
.user-nav {
  border-radius: var(--zb-radius);
  background: var(--zb-surface);
  box-shadow: var(--zb-shadow-sm);
  overflow: hidden;
  padding: var(--zb-sp-1) 0;
}
.user-nav__link {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-2);
  padding: 10px var(--zb-block);
  font-size: 13.5px;
  color: var(--zb-text-2);
  border-left: 3px solid transparent;
}
.user-nav__link:hover { color: var(--zb-primary); background: var(--zb-primary-soft); }
.user-nav__link.is-active {
  color: var(--zb-primary);
  font-weight: 600;
  border-left-color: var(--zb-primary);
  background: var(--zb-primary-soft);
}
.user-nav__link .ic {
  flex: 0 0 18px;
  color: var(--zb-primary);
  text-align: center;
}
.user-nav__link em {
  margin-left: auto;
  font-style: normal;
  font-size: 11.5px;
  color: var(--zb-text-3);
}
.user-nav__link--logout { color: var(--zb-text-3); }
.user-nav__link--logout .ic { color: var(--zb-text-3); }

/* --- 数据总览 --- */
.user-stat {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--zb-sp-3);
  margin-bottom: var(--zb-gap);
}
.user-stat__item {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-3);
  padding: var(--zb-sp-3) var(--zb-block);
  border-radius: var(--zb-radius);
  background: var(--zb-surface);
  box-shadow: var(--zb-shadow-sm);
}
.user-stat__item:hover { box-shadow: var(--zb-shadow-md); }
.user-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: var(--zb-radius);
  font-size: 17px;
  color: #fff;
}
.user-stat__icon--1 { background: linear-gradient(135deg, var(--zb-red-500), var(--zb-red-700)); }
.user-stat__icon--2 { background: linear-gradient(135deg, #2f9e6b, #1a7f52); }
.user-stat__icon--3 { background: linear-gradient(135deg, #e8890b, var(--zb-accent)); }
.user-stat__value {
  display: block;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--zb-text);
  font-variant-numeric: tabular-nums;
}
.user-stat__label { font-size: 12px; color: var(--zb-text-3); }

/* --- 通用会员面板 / 列表 / 表格 --- */
.user-panel {
  border-radius: var(--zb-radius);
  background: var(--zb-surface);
  box-shadow: var(--zb-shadow-sm);
  overflow: hidden;
}
/* 会员面板之间的间距与前台卡片同值，会员中心才不会显得自成一套节奏 */
.user-panel + .user-panel { margin-top: var(--zb-gap); }
.user-panel__head {
  display: flex;
  align-items: center;
  padding: var(--zb-sp-3) var(--zb-block);
  border-bottom: 1px solid var(--zb-border);
  background: var(--zb-surface-2);
}
.user-panel__head h2,
.user-panel__head h4 {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 14.5px;
}
.user-panel__head h2::before,
.user-panel__head h4::before {
  content: "";
  width: 3px;
  height: 14px;
  margin-right: var(--zb-sp-2);
  border-radius: 2px;
  background: var(--zb-primary);
}
.user-panel__more { margin-left: auto; font-size: 12px; color: var(--zb-text-3); }

.user-list { padding: var(--zb-sp-1) 0; }
.user-list__item {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-3);
  padding: 10px var(--zb-block);
  border-bottom: 1px dashed var(--zb-border);
  font-size: 13.5px;
}
.user-list__item:last-child { border-bottom: 0; }
.user-list__item:hover { background: var(--zb-primary-soft); }
.user-list__tag {
  flex: 0 0 auto;
  padding: 0 7px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--zb-primary);
  background: var(--zb-primary-soft);
}
.user-list__title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--zb-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-list__item:hover .user-list__title { color: var(--zb-primary); }
.user-list__time { flex: 0 0 auto; font-size: 12px; color: var(--zb-text-3); }
.user-list__remove { flex: 0 0 auto; font-size: 12px; color: var(--zb-text-3); }
.user-list__remove:hover { color: var(--zb-danger); }

.user-table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* 表格单元格：横向 16px 对齐卡片基准线，纵向 8px 让行高紧凑到 38px 左右 */
.user-table thead th {
  padding: var(--zb-sp-2) var(--zb-block);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--zb-text-2);
  text-align: left;
  white-space: nowrap;
  background: var(--zb-surface-2);
  border-bottom: 1px solid var(--zb-border);
}
.user-table tbody td {
  padding: var(--zb-sp-2) var(--zb-block);
  border-bottom: 1px dashed var(--zb-border);
  color: var(--zb-text-2);
  vertical-align: middle;
}
.user-table tbody tr:last-child td { border-bottom: 0; }
.user-table tbody tr:hover { background: var(--zb-primary-soft); }
.user-table__no { font-variant-numeric: tabular-nums; }
.user-table__amount { font-weight: 600; color: var(--zb-primary); }
.user-table__time { font-size: 12px; color: var(--zb-text-3); }
.user-table__status {
  padding: 1px 8px;
  border-radius: var(--zb-radius-pill);
  font-size: 11.5px;
  white-space: nowrap;
}
.user-table__status--paid   { color: var(--zb-success); background: #eaf7f0; }
.user-table__status--wait   { color: var(--zb-warn);    background: #fdf3e3; }
.user-table__status--cancel { color: var(--zb-text-3);  background: #f1f3f5; }
.user-table__status--refund { color: var(--zb-info);    background: #eaf1fd; }

/* --- 会员表单 --- */
.user-form { padding: var(--zb-sp-1) var(--zb-block); }
.user-form__row {
  display: flex;
  align-items: flex-start;
  gap: var(--zb-block);
  padding: var(--zb-sp-3) 0;
  border-bottom: 1px solid var(--zb-border);
}
.user-form__row:last-child { border-bottom: 0; }
.user-form__label {
  flex: 0 0 110px;
  font-size: 13.5px;
  color: var(--zb-text-2);
}
.user-form__label .req { margin-right: 3px; color: var(--zb-danger); }
.user-form__control { flex: 1 1 auto; min-width: 0; }
.user-form__readonly { font-size: 13.5px; color: var(--zb-text-2); }
.user-form__readonly small {
  display: block;
  font-size: 11.5px;
  color: var(--zb-text-3);
}
.user-form__tip { margin-top: var(--zb-sp-1); font-size: 12px; color: var(--zb-text-3); }

/* 头像选择 */
.user-avatar-pick { display: flex; align-items: center; gap: var(--zb-sp-3); }
.user-avatar-pick__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  font-size: 21px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--zb-red-500), var(--zb-red-700));
}
.user-avatar-pick__preview img { width: 100%; height: 100%; object-fit: cover; }

/* 发票类型选择 */
.user-invoice-type { display: flex; gap: var(--zb-sp-3); }
.user-invoice-type__opt {
  flex: 1 1 0;
  padding: var(--zb-sp-2) var(--zb-sp-3);
  border: 1px solid var(--zb-border-strong);
  border-radius: var(--zb-radius-sm);
  cursor: pointer;
  transition: all var(--zb-dur) var(--zb-ease);
}
.user-invoice-type__opt.is-on {
  border-color: var(--zb-primary);
  background: var(--zb-primary-soft);
}
.user-invoice-type__opt b { font-size: 13.5px; }
.user-invoice-type__opt b .fa { margin-right: 4px; color: var(--zb-primary); }
.user-invoice-type__opt small { display: block; font-size: 11.5px; color: var(--zb-text-3); }

/* ==========================================================================
   19 会员套餐 price-card
   ========================================================================== */
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--zb-sp-5) var(--zb-block) var(--zb-block);
  border: 1px solid var(--zb-border);
  border-radius: var(--zb-radius);
  background: var(--zb-surface);
  transition: all var(--zb-dur) var(--zb-ease);
}
.price-card:hover { box-shadow: var(--zb-shadow-md); transform: translateY(-2px); }
.price-card--hot {
  border-color: var(--zb-primary);
  box-shadow: 0 6px 20px rgba(198, 40, 40, .12);
}
.price-card__badge {
  position: absolute;
  top: 0;
  right: var(--zb-sp-3);
  padding: 2px var(--zb-sp-3);
  border-radius: 0 0 var(--zb-radius-sm) var(--zb-radius-sm);
  font-size: 11.5px;
  color: #fff;
  background: linear-gradient(135deg, var(--zb-red-500), var(--zb-red-700));
}
.price-card__name {
  margin-bottom: var(--zb-sp-3);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: var(--zb-text);
}
.price-card__feats {
  margin: 0 0 var(--zb-block);
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--zb-text-2);
}
.price-card__feats li { padding: var(--zb-sp-1) 0; }
.price-card__feats .fa { margin-right: var(--zb-sp-1); color: var(--zb-success); }
.price-card__action { margin-top: auto; }

/* 支付渠道 */
.pay-channel {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-2);
  padding: var(--zb-sp-3) var(--zb-block);
  border: 1px solid var(--zb-border-strong);
  border-radius: var(--zb-radius-sm);
  cursor: pointer;
  font-size: 14px;
}
.pay-channel.is-checked {
  border-color: var(--zb-primary);
  background: var(--zb-primary-soft);
}
.pay-channel input { accent-color: var(--zb-primary); }

/* ==========================================================================
   19.5 登录 / 注册 / 找回密码弹窗 auth-modal
   ========================================================================== */
.authmodal .modal-content {
  border: 0;
  border-radius: var(--zb-radius-lg);
  overflow: hidden;
}
.authmodal .btn-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}
.authmodal .modal-body { padding: 28px 24px 24px; }
.auth-head { text-align: center; margin-bottom: var(--zb-sp-5); }
.auth-head .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto var(--zb-sp-3);
  border-radius: 50%;
  font-size: 23px;
  color: #fff;
  background: linear-gradient(135deg, var(--zb-red-500), var(--zb-red-700));
  box-shadow: 0 6px 16px rgba(198, 40, 40, .22);
}
.auth-head h3 { margin: 0 0 4px; font-size: 18px; }
.auth-head p { margin: 0; font-size: 12.5px; color: var(--zb-text-3); }
.auth-tab {
  display: flex;
  margin-bottom: var(--zb-block);
  border-bottom: 1px solid var(--zb-border);
}
.auth-tab .nav-link {
  flex: 1 1 0;
  padding: var(--zb-sp-2) 0;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: 13.5px;
  color: var(--zb-text-2);
  text-align: center;
  border-radius: 0;
}
.auth-tab .nav-link.active {
  color: var(--zb-primary);
  font-weight: 600;
  border-bottom-color: var(--zb-primary);
  background: transparent;
}
.auth-field { margin-bottom: var(--zb-sp-3); }
.auth-field > label {
  display: block;
  margin-bottom: var(--zb-sp-1);
  font-size: 12.5px;
  color: var(--zb-text-2);
}
.auth-field .form-control,
.auth-field .input-group .form-control { font-size: 13.5px; }
.auth-field .btn { font-size: 13px; white-space: nowrap; }
.auth-hint { margin-top: var(--zb-sp-1); font-size: 11.5px; color: var(--zb-text-3); }
.auth-submit { padding: var(--zb-sp-2); font-size: 15px; border-radius: var(--zb-radius); }
.auth-foot {
  display: flex;
  justify-content: space-between;
  margin-top: var(--zb-sp-3);
  font-size: 12.5px;
}
.auth-foot a { color: var(--zb-primary); }

/* ==========================================================================
   20 底部服务条 site-cta + 页脚 site-footer
   ========================================================================== */
/* 服务条是页脚之前的最后一块，上下 20px 比页面留白（24px）略收，
   让它紧挨内容，读起来是"整站的一部分"而不是独立横幅 */
.site-cta {
  padding: var(--zb-sp-5) 0;
  color: #fff;
  background: linear-gradient(90deg, var(--zb-red-800) 0%, var(--zb-red-600) 50%, var(--zb-red-500) 100%);
}
.site-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zb-block);
}
.site-cta__left { display: flex; align-items: center; gap: var(--zb-sp-3); }
.site-cta__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 19px;
  background: rgba(255, 255, 255, .16);
}
.site-cta__phone { font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.site-cta__tip { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.site-cta__right { display: flex; gap: var(--zb-sp-3); }
.site-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--zb-sp-1);
  padding: var(--zb-sp-2) var(--zb-sp-5);
  border-radius: var(--zb-radius-pill);
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, .16);
}
.site-cta__btn:hover { color: #fff; background: rgba(255, 255, 255, .28); }
.site-cta__btn--solid { color: var(--zb-primary); background: #fff; }
.site-cta__btn--solid:hover { color: var(--zb-primary); background: #fdeced; }

/* --- 页脚 --- */
/* 页脚顶部 40px 比页面留白（24px）大一档，把深色页脚从浅色内容里"切"出来 */
.site-footer {
  padding: calc(var(--zb-sp-6) + var(--zb-block)) 0 0;
  color: #b9c2cd;
  background: #23272e;
}
.footer-col__title {
  margin: 0 0 var(--zb-sp-3);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.footer-col__about { margin: 0; font-size: 13px; line-height: 1.9; color: #b9c2cd; }
.footer-col__contact {
  margin-top: var(--zb-sp-1);
  font-size: 13px;
  color: #b9c2cd;
}
.footer-col__contact .fa { margin-right: 5px; color: var(--zb-red-400); }
.footer-col__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-col__list li { margin-bottom: var(--zb-sp-2); }
.footer-col__list a { font-size: 13px; color: #b9c2cd; }
.footer-col__list a:hover { color: #fff; }
/* 备案区上方 28px + 上方 1px 分隔线，是页脚内最大的一处留白，
   用来把"导航区"和"版权区"明确切成两段 */
.site-footer__bottom {
  margin-top: calc(var(--zb-sp-6) + var(--zb-sp-1));
  padding: var(--zb-sp-3) 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 12.5px;
  color: #8b939d;
  text-align: center;
  line-height: 2;
}
.site-footer__bottom a { color: #b9c2cd; }
.site-footer__bottom a:hover { color: #fff; }
.site-footer__sitemap { display: block; }
.site-footer__sitemap .fa { margin-right: 4px; }

/* ==========================================================================
   21 右侧悬浮工具 float-tools
   ========================================================================== */
/* 悬浮工具条：按钮之间 4px 抱团，整体距右 12px、距底 96px（避开移动端浏览器工具栏） */
.float-tools {
  position: fixed;
  right: var(--zb-sp-3);
  bottom: calc(var(--zb-sp-6) * 4);
  z-index: 1020;
  display: flex;
  flex-direction: column;
  gap: var(--zb-sp-1);
}
.float-tools__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 48px;
  height: 48px;
  border-radius: var(--zb-radius);
  font-size: 11px;
  color: var(--zb-text-2);
  background: #fff;
  box-shadow: var(--zb-shadow-md);
  transition: all var(--zb-dur) var(--zb-ease);
}
.float-tools__btn:hover {
  color: #fff;
  background: var(--zb-primary);
}
.float-tools__btn .fa { font-size: 16px; }
.float-tools__btn--top { color: var(--zb-primary); }
.float-tools__btn--top:hover { color: #fff; background: var(--zb-primary); }

/* ==========================================================================
   22 404 错误页 error-page
   ========================================================================== */
/* 404 页上下留白比常规内页大一档（40/48），让错误页在视觉上"单独成页" */
.error-page {
  padding:
    calc(var(--zb-sp-6) + var(--zb-block))
    var(--zb-section)
    calc(var(--zb-sp-6) * 2);
  text-align: center;
}
.error-page__code {
  margin: 0;
  font-size: 78px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 4px;
  color: var(--zb-primary-border);
}
.error-page__title { margin: var(--zb-sp-3) 0 var(--zb-sp-2); font-size: 21px; }
.error-page__desc { margin: 0 0 var(--zb-section); font-size: 13.5px; color: var(--zb-text-3); }
.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--zb-sp-3);
  margin-bottom: var(--zb-sp-5);
}
.error-page__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--zb-sp-1);
  padding: var(--zb-sp-2) var(--zb-sp-5);
  border: 1px solid var(--zb-border-strong);
  border-radius: var(--zb-radius-pill);
  font-size: 13.5px;
  color: var(--zb-text-2);
}
.error-page__btn:hover { color: var(--zb-primary); border-color: var(--zb-primary); }
.error-page__btn--primary {
  color: #fff;
  border-color: var(--zb-primary);
  background: var(--zb-primary);
}
.error-page__btn--primary:hover { color: #fff; background: var(--zb-primary-hover); }
.error-page__search { max-width: 480px; margin: 0 auto var(--zb-sp-5); }
.error-page__hot {
  max-width: 760px;
  margin: 0 auto var(--zb-sp-3);
  font-size: 13px;
}
.error-page__hot-label {
  margin-right: var(--zb-sp-2);
  font-weight: 600;
  color: var(--zb-primary);
}
/* 热词标签组：横向 8px、纵向 4px，让一排标签连成一条而不是散点 */
.error-page__hot a {
  display: inline-block;
  margin: 0 var(--zb-sp-2) var(--zb-sp-1) 0;
  color: var(--zb-text-2);
}
.error-page__hot a:hover { color: var(--zb-primary); }

/* 搜索风云榜 */
.hot-hero {
  padding: var(--zb-sp-5) var(--zb-section);
  border-radius: var(--zb-radius);
  color: #fff;
  background: linear-gradient(120deg, var(--zb-red-800) 0%, var(--zb-red-600) 60%, var(--zb-red-400) 100%);
  box-shadow: var(--zb-shadow-md);
}
.hot-hero__title { margin: 0; font-size: 24px; font-weight: 800; color: #fff; }
.hot-hero__title .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: var(--zb-sp-3);
  border-radius: var(--zb-radius);
  font-size: 17px;
  background: rgba(255, 255, 255, .18);
}
.hot-hero__sub { margin: var(--zb-sp-2) 0 0; font-size: 13px; color: rgba(255, 255, 255, .85); }
.hot-hero__stats { margin-top: var(--zb-sp-3); font-size: 12.5px; color: rgba(255, 255, 255, .85); }
.hot-hero__stats .it { margin-right: var(--zb-sp-5); }
.hot-hero__stats b { color: #ffd666; }

.hot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zb-sp-2);
}
.hot-grid__item {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-2);
  padding: var(--zb-sp-2) var(--zb-sp-3);
  border: 1px solid var(--zb-border);
  border-radius: var(--zb-radius-sm);
  background: var(--zb-surface-2);
}
.hot-grid__item:hover { border-color: var(--zb-primary-border); background: var(--zb-primary-soft); }
.hot-grid__rank {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  color: var(--zb-text-2);
  background: #f1f3f5;
}
.hot-grid__rank.is-top1 { color: #fff; background: var(--zb-red-600); }
.hot-grid__rank.is-top2 { color: #fff; background: var(--zb-red-400); }
.hot-grid__rank.is-top3 { color: #fff; background: var(--zb-accent); }
.hot-grid__keyword {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  color: var(--zb-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hot-grid__item:hover .hot-grid__keyword { color: var(--zb-primary); }
.hot-grid__rec {
  flex: 0 0 auto;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 11px;
  color: #fff;
  background: var(--zb-accent);
}
.hot-empty { padding: calc(var(--zb-sp-6) * 2) 0; text-align: center; color: var(--zb-text-3); font-size: 13.5px; }
.hot-empty .fa { display: block; margin-bottom: var(--zb-sp-3); font-size: 30px; color: var(--zb-primary-border); }

/* 网站地图链接 */
.sitemap-link {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-1);
  padding: var(--zb-sp-2) var(--zb-sp-3);
  border: 1px solid var(--zb-border);
  border-radius: var(--zb-radius-sm);
  font-size: 13px;
  color: var(--zb-text-2);
  background: var(--zb-surface-2);
}
.sitemap-link:hover { color: var(--zb-primary); border-color: var(--zb-primary-border); background: var(--zb-primary-soft); }
.sitemap-link .fa { color: var(--zb-primary); }
.sitemap-badge {
  padding: var(--zb-sp-1) var(--zb-sp-3);
  border-radius: var(--zb-radius-pill);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--zb-text-2);
  background: var(--zb-surface-2);
  border: 1px solid var(--zb-border);
}
.sitemap-badge:hover { color: var(--zb-primary); border-color: var(--zb-primary-border); background: var(--zb-primary-soft); }
.sub-title {
  display: flex;
  align-items: center;
  gap: var(--zb-sp-1);
  margin: 0 0 var(--zb-sp-3);
  font-size: 15px;
  font-weight: 700;
}

/* ==========================================================================
   22.5 语义间距工具类
   --------------------------------------------------------------------------
   Bootstrap 的 spacing scale 是 4/8/16/24，恰好缺 12px 这一档，
   而 12px 正是本站"卡片之间"的标准间距。补这两个工具类，
   模板里就不用拿 mt-3(16px) 或 mt-2(8px) 凑，也不会因改令牌而失同步。
   ========================================================================== */
.mt-gap { margin-top: var(--zb-gap); }

/* ==========================================================================
   23 响应式适配
   ========================================================================== */

/* 大屏：导航链接区更宽松 */
@media (min-width: 1400px) {
  .container-xxl { max-width: 1360px; }
}

/* 中屏（笔记本 / 平板横屏）：隐藏 Logo 副标题，压缩搜索区 */
@media (max-width: 1199.98px) {
  .site-search__field--select { flex: 0 0 112px; }
  /* 中屏搜索框整体收窄，下拉前置图标在这里让位给文字（「全部分类」4 个字
     加上箭头要占 70px 左右，留着图标就只能显示「全部…」）。
     要排除 .zb-select__arrow：它也是 .fa 的直接子元素，一刀切会把箭头一起藏掉 */
  .site-search__field--select > .fa:not(.zb-select__arrow) { display: none; }
  .site-search__submit { flex: 0 0 88px; letter-spacing: 1px; }
  .site-nav__list { display: none; }
  .mega-panel__grid { grid-template-columns: repeat(3, 1fr); }
  /* 楼层：中栏整行置顶，左右两栏各占一半并排在下面 */
  .floor__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .floor__col--main { grid-column: 1 / -1; order: -1; }
  /* 2F 只有两栏，中屏保持 3:9 即可，不必拆成上下两行 */
  .floor__grid--3-9 { grid-template-columns: 3fr 9fr; }
  /* 3F 四栏在中屏降到 2×2，每栏约 480px，比挤成 4 个 240px 窄栏好读 */
  .floor__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 全国分站在中屏只占半宽（约 480px），3 列格子会被拉得过宽，改 5 列；
     高度交回 flex 拉伸，不再锁 10 行 —— 此时它已不与中栏同排，无需等高 */
  .branch-city {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: auto;
  }
  .branch-city__link { height: 38px; }
  /* 行业入口保持 3 列：中屏时它与右栏「实时播报」并排，
     10 行 × 43px 才与播报区的 430px 等高，改成 4/6 列会矮一截 */
}

/* 中小屏：搜索区与 Logo 换行，卡片内两列布局降级 */
@media (max-width: 991.98px) {
  .site-header__inner { flex-wrap: wrap; gap: var(--zb-sp-3); }
  .site-search { flex: 1 1 100%; }
  .company-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-stat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vip-lock__feats { grid-template-columns: 1fr; }
  .hot-hero__title { font-size: 20px; }
}

/* 小屏（手机）：单列铺开，隐藏非核心装饰 */
@media (max-width: 767.98px) {
  /* 手机屏窄，页面级 24px 上下留白占比过大，收到 16px 把位置让给内容 */
  .home,
  .page { padding: var(--zb-block) 0; }
  /* 手机屏：楼层全部摊成单列，中栏不再置顶，保持 中→左→右 的文档顺序 */
  .floor__grid { grid-template-columns: 1fr; }
  .floor__col--main { grid-column: auto; order: 0; }
  /* 两个变体网格必须在这里显式降为单列：--3-9 / --4 与 .floor__grid 同权重但定义更靠后，
     只改 .floor__grid 的话它们会赢，手机屏就变成 3:9（左栏被压到 25%）或 4 栏并排 */
  .floor__grid--3-9,
  .floor__grid--4 { grid-template-columns: 1fr; }
  /* 全国分站：手机屏不再参与等高，改为自然高度，格子固定 38px 即可 */
  .branch-city {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: auto;
  }
  .branch-city__link { height: 38px; }
  /* 导航「全部」大面板固定 640px 宽、靠 hover 弹出，
     触摸设备既没有 hover、也必然溢出屏幕，小屏直接不渲染 */
  .site-nav__mega { display: none; }
  /* 手机上一列放 6 组要滚很久，退到 2 列 */
  .floor__grid--3-9 .keyword-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .floor__head { flex-wrap: wrap; gap: var(--zb-sp-2); }
  .floor__desc { display: none; }
  /* 手机屏三栏摊平，不再需要等高对齐，行业入口可以放宽到 4 列 */
  .industry-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-search__form { flex-wrap: wrap; border-width: 1px; }
  /* 手机屏搜索区：DOM 顺序是 分类 → 输入框 → 地区 → 按钮，flex-wrap 下
     输入框（basis 100%）必然另起一行，把两个下拉挤成各自一行，
     整块从 2 行被撑到 4 行、占掉首屏近三分之一。
     用 order 重排成「两个下拉一行 / 输入框 + 按钮一行」，高度 4×44 降到 2×46。 */
  .site-search__field--select {
    order: 1;
    flex: 1 1 50%;
    min-height: 44px;
    border-bottom: 1px solid var(--zb-border);
  }
  /* 手机上两个下拉各占半宽，横向空间足够，把中屏让位的分类/地区图标放回来 */
  .site-search__field--select > .fa:not(.zb-select__arrow) { display: inline-block; }
  .site-search__field--input {
    order: 2;
    /* basis 必须是 0 不能是 auto：auto 会按 placeholder 那串长文本的
       内容宽度算基准，把同一行的搜索按钮直接顶出容器（被 overflow 裁掉） */
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
    padding: var(--zb-sp-2) var(--zb-sp-3);
    border-bottom: 0;
  }
  .site-search__submit {
    order: 3;
    flex: 0 0 auto;
    min-width: 92px;
    min-height: 46px;
    padding: 0 var(--zb-sp-4);
  }
  .site-nav__all { flex: 1 1 auto; }
  .site-nav__actions { display: none; }
  .entry-list__item { grid-template-columns: minmax(0, 1fr) 70px 50px; }
  .company-info { grid-template-columns: 1fr; }
  .company-hero { flex-direction: column; align-items: flex-start; }
  .user-stat { grid-template-columns: 1fr; }
  .keyword-group { grid-template-columns: 1fr; }
  .hot-grid { grid-template-columns: 1fr; }
  .float-tools { right: var(--zb-sp-2); bottom: calc(var(--zb-sp-6) * 3); }
  .float-tools__btn { width: 42px; height: 42px; }
  .site-cta__inner { flex-direction: column; align-items: flex-start; gap: var(--zb-sp-3); }
  /* 会员表单：手机屏改为标签在上、控件在下。
     110px 的固定标签列在 375px 宽屏上会占掉近三分之一，输入区只剩 200px 出头 */
  .user-form__row { flex-direction: column; gap: var(--zb-sp-1); }
  .user-form__label { flex: 0 0 auto; }
  /* 付费锁在手机上退回普通卡片留白，否则 24px 四周会把文案挤成窄条 */
  .vip-lock { padding: var(--zb-section) var(--zb-block); }
  .vip-lock__feats { gap: var(--zb-sp-1); }
  .vip-lock__cta { flex-direction: column; }
  /* 页脚版权行：375px 宽要折成三行，把页脚拖得很长，手机屏不显示。
     ICP 备案号是法规要求必须展示的，模板里已让它独立于版权文本，
     不会被这条规则带走 —— 有备案号时这一行仍会留着备案号。 */
  .site-footer__copy { display: none; }
}