/* ===== 禾佳站点「统一组件层」v1（2026-10-31）=====
   目的：把两站 25 种按钮高度/圆角、11 种输入框样式，收成一套 token。
   性质：纯 CSS 覆盖层，只改外观与状态，不改结构、不改交互、不引 JS。
   回滚：删掉各页面对 /css/hj-ui.css 的引用，或给 <html class="hj-ui-off">。

   分级标准（以后加控件照这个，不要逐页随意写）：
     动作按钮（提交/发布/登录/拨号）  高 40 · 圆角 8 · 深底白字 或 白底描边
     筛选/标签/分段（城市/排序/Tab）   高 32 · 胶囊 · 浅底，选中=蓝底白字
     图标按钮（关闭/缩放/地图切换）     32×32 · 圆形
     输入框 / 下拉 / 多行             高 40 · 圆角 8 · 1px 边 · 聚焦蓝环
     卡片 / 弹窗 / 浮层               12 圆角 + 统一阴影

   为什么带 body 前缀 + !important：两站页面里到处是 `.xx .cat-btn{border-radius:4px}`
   这类单类规则，优先级更高；不这样压不住，"统一"就只是首页统一。
*/

:root{
  --hj-blue:#1e56a0; --hj-blue-d:#16406f; --hj-blue-l:#2f6cc0;
  --hj-orange:#f59e0b; --hj-orange-d:#d98a00;
  --hj-ink:#0f172a; --hj-body:#1f2937; --hj-muted:#6b7280; --hj-faint:#9aa4b2;
  --hj-line:#e8ecf1; --hj-line-2:#d8dee6;
  --hj-r-sm:6px; --hj-r:8px; --hj-r-lg:12px; --hj-pill:999px;
  --hj-h:40px; --hj-h-sm:32px; --hj-h-icon:32px;
  --hj-shadow-1:0 1px 2px rgba(16,42,74,.06);
  --hj-shadow-2:0 10px 30px rgba(16,42,74,.12);
  --hj-ease:cubic-bezier(.22,.61,.36,1);
  --hj-ring:0 0 0 3px rgba(30,86,160,.14);
}

/* ---------- ① 统一手感：过渡 / 指针 / 按下 / 聚焦 / 禁用 ---------- */
body button, body .btn,
body .cat-btn, body .sort-btn, body .area-btn, body .btn-publish, body .btn-cs, body .submit-btn,
body .sms-send-btn, body .login-btn, body .login-btn-primary, body .login-btn-wechat, body .wx-pc-btn,
body .map-toggle, body .hero-video-nav-btn, body .hero-custom-playbtn, body .zoom-btn,
body .menu-close, body .login-close, body .login-tab, body .context-btn, body .detail-btn, body .call-btn{
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s var(--hj-ease), border-color .18s var(--hj-ease),
              color .18s var(--hj-ease), box-shadow .18s var(--hj-ease), transform .12s ease;
}
body button:active, body .btn:active, body .cat-btn:active, body .sort-btn:active, body .area-btn:active,
body .btn-publish:active, body .btn-cs:active, body .submit-btn:active, body .sms-send-btn:active,
body .login-btn:active, body .login-btn-primary:active, body .login-btn-wechat:active, body .wx-pc-btn:active,
body .map-toggle:active, body .zoom-btn:active, body .context-btn:active, body .detail-btn:active, body .call-btn:active{
  transform: scale(.98);
}
body button:focus-visible, body .btn:focus-visible, body .cat-btn:focus-visible, body .sort-btn:focus-visible,
body .area-btn:focus-visible, body .btn-publish:focus-visible, body .btn-cs:focus-visible, body .submit-btn:focus-visible,
body .sms-send-btn:focus-visible, body .login-btn:focus-visible, body .login-btn-primary:focus-visible,
body .login-btn-wechat:focus-visible, body .wx-pc-btn:focus-visible, body .map-toggle:focus-visible,
body .zoom-btn:focus-visible, body .menu-close:focus-visible, body .login-close:focus-visible{
  outline: none !important;
  box-shadow: var(--hj-ring) !important;
}
body button:disabled, body button[disabled], body .btn:disabled, body .btn[disabled],
body .btn-publish:disabled, body .submit-btn:disabled, body .login-btn:disabled, body .sms-send-btn:disabled{
  opacity: .55 !important; cursor: not-allowed !important;
  transform: none !important; box-shadow: none !important;
}

/* ---------- ② 动作按钮：高 40 / 圆角 8 ---------- */
body .btn-publish, body .login-btn-primary, body .login-btn, body .submit-btn, body .btn-cs,
body .sms-send-btn, body .context-btn, body .detail-btn, body .call-btn{
  height: var(--hj-h) !important;
  min-height: var(--hj-h) !important;
  border-radius: var(--hj-r) !important;
  font-size: 15px !important;
  font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 0 18px;
  border: 1px solid transparent;
  cursor: pointer;
  box-sizing: border-box;
}
body .btn-publish, body .login-btn-primary, body .submit-btn, body .login-btn, body .context-btn{
  background: var(--hj-blue); color: #fff; border-color: var(--hj-blue);
}
body .btn-publish:hover, body .login-btn-primary:hover, body .submit-btn:hover,
body .login-btn:hover, body .context-btn:hover{
  background: var(--hj-blue-d); border-color: var(--hj-blue-d);
  box-shadow: 0 4px 14px rgba(30,86,160,.22);
}
body .btn-cs, body .sms-send-btn, body .detail-btn, body .call-btn{
  background: #fff; color: var(--hj-blue); border-color: var(--hj-line-2);
}
body .btn-cs:hover, body .sms-send-btn:hover, body .detail-btn:hover, body .call-btn:hover{
  border-color: var(--hj-blue); background: #f5f9ff;
}

/* ---------- ③ 筛选 / 标签 / 分段：高 32 / 胶囊 ---------- */
body .area-btn, body .cat-btn, body .sort-btn, body .filter-chip, body .cat-item, body .login-tab{
  height: var(--hj-h-sm) !important;
  min-height: var(--hj-h-sm) !important;
  border-radius: var(--hj-pill) !important;
  font-size: 13px !important;
  line-height: var(--hj-h-sm) !important;
  padding: 0 14px !important;
  border: 1px solid var(--hj-line);
  background: #fff;
  color: var(--hj-body);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}
body .area-btn:hover, body .cat-btn:hover, body .sort-btn:hover,
body .filter-chip:hover, body .cat-item:hover, body .login-tab:hover{
  border-color: var(--hj-blue); color: var(--hj-blue); background: #f5f9ff;
}
body .area-btn.active, body .cat-btn.active, body .sort-btn.active, body .cat-item.active,
body .login-tab.active, body .area-btn.on, body .cat-btn.on{
  background: var(--hj-blue) !important; border-color: var(--hj-blue) !important;
  color: #fff !important; font-weight: 600;
}

/* ---------- ④ 图标按钮：32×32 圆形 ---------- */
body .menu-close, body .login-close, body .zoom-btn, body .map-toggle{
  width: var(--hj-h-icon) !important; height: var(--hj-h-icon) !important;
  min-width: var(--hj-h-icon) !important;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--hj-pill) !important;
  border: 1px solid var(--hj-line-2);
  background: #fff; color: var(--hj-body);
  cursor: pointer; padding: 0 !important;
  box-sizing: border-box;
}
body .menu-close:hover, body .login-close:hover, body .zoom-btn:hover, body .map-toggle:hover{
  border-color: var(--hj-blue); color: var(--hj-blue); background: #f5f9ff;
}

/* ---------- ⑤ 输入框 / 下拉 / 多行 ---------- */
body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]),
body select{
  height: var(--hj-h) !important;
  border: 1px solid var(--hj-line-2);
  border-radius: var(--hj-r) !important;
  padding: 0 12px;
  font-size: 14px;
  color: var(--hj-ink);
  background: #fff;
  box-sizing: border-box;
  transition: border-color .18s var(--hj-ease), box-shadow .18s var(--hj-ease);
}
body textarea{
  border: 1px solid var(--hj-line-2);
  border-radius: var(--hj-r) !important;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--hj-ink);
  background: #fff;
  box-sizing: border-box;
  resize: vertical;
  transition: border-color .18s var(--hj-ease), box-shadow .18s var(--hj-ease);
}
body input:not([type="checkbox"]):not([type="radio"]):hover, body select:hover, body textarea:hover{ border-color: #b9c6d6; }
body input:not([type="checkbox"]):not([type="radio"]):focus, body select:focus, body textarea:focus{
  outline: none !important;
  border-color: var(--hj-blue);
  box-shadow: var(--hj-ring) !important;
}
body input::placeholder, body textarea::placeholder{ color: var(--hj-faint); }
body input:disabled, body select:disabled, body textarea:disabled{
  background: #f7f8fa; color: var(--hj-muted); cursor: not-allowed;
}

/* ---------- ⑥ 卡片 / 弹窗 / 浮层 ---------- */
body .card, body .prop-card, body .p-card, body .hf-card, body .hint-card,
body .info-card, body .form-card, body .panel{
  border-radius: var(--hj-r-lg) !important;
  border: 1px solid var(--hj-line);
  background: #fff;
}
body [class*="modal"], body [class*="dialog"], body [class*="dlg"], body [class*="popup"]{
  border-radius: var(--hj-r-lg) !important;
}
body [class*="mask"]{ background: rgba(15,23,42,.45); }

/* ---------- ⑦ 表格行悬停 ---------- */
body table tbody tr{ transition: background-color .15s ease; }
body table tbody tr:hover{ background: #f7faff; }

/* ---------- ⑧ 骨架屏 ---------- */
body .hj-skel{ position: relative; overflow: hidden; background: #eef1f5; border-radius: var(--hj-r); }
body .hj-skel::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: hjSweep 1.2s infinite;
}
@keyframes hjSweep{ from{ transform: translateX(-100%); } to{ transform: translateX(100%); } }

/* ---------- ⑨ 减少动态效果 ---------- */
@media (prefers-reduced-motion: reduce){
  body button, body .btn, body input, body select, body textarea,
  body [class*="card"], body table tbody tr{ transition: none !important; }
  body .hj-skel::after{ animation: none; }
}

/* ---------- ⑩ 总开关 ---------- */
html.hj-ui-off body button, html.hj-ui-off body input, html.hj-ui-off body select,
html.hj-ui-off body textarea, html.hj-ui-off body [class*="btn"]{ all: revert !important; }

/* ---------- ⑪ 复核 2026-10-31：第一版漏掉的一次性控件（按真实 CSS 路径补） ---------- */
/* 顶部提示条里的 CTA、标签页、搜索按钮、分页：都按"胶囊 32"归 */
body .nd-bar .cta .btn,
body #catTags .cat-row button,
body #catBar button,
body .hero-video-nav-btn{
  height: var(--hj-h-sm) !important; min-height: var(--hj-h-sm) !important;
  border-radius: var(--hj-pill) !important;
  font-size: 13px !important; padding: 0 14px !important;
  border: 1px solid var(--hj-line) !important; background: #fff !important;
  color: var(--hj-body) !important;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}
body .hero-video-nav-btn{
  width: var(--hj-h-sm) !important; min-width: var(--hj-h-sm) !important; padding: 0 !important;
}
body #catTags .cat-row button:hover, body #catBar button:hover,
body .nd-bar .cta .btn:hover, body .hero-video-nav-btn:hover{
  border-color: var(--hj-blue) !important; color: var(--hj-blue) !important; background: #f5f9ff !important;
}
body #catBar button.on, body #catBar button.active, body #catTags .cat-row button.on,
body .hero-video-nav-btn.active{
  background: var(--hj-blue) !important; border-color: var(--hj-blue) !important; color: #fff !important;
}

/* 搜索框旁边的"搜索"、免费帮我找、微信扫码登录：动作按钮 40/8 */
body .hero-cities-left button,
body section .wrap button,
body #mapArea .map-search button,
body #wxPcBtn.wx-pc-btn{
  height: var(--hj-h) !important; min-height: var(--hj-h) !important;
  border-radius: var(--hj-r) !important;
  font-size: 15px !important; font-weight: 600;
  padding: 0 18px !important;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}
body #mapArea .map-search button{ border-radius: 0 var(--hj-r) var(--hj-r) 0 !important; }

/* 分页：32 / 8 圆角，选中蓝底 */
body #pagination button{
  height: var(--hj-h-sm) !important; min-height: var(--hj-h-sm) !important;
  min-width: var(--hj-h-sm) !important;
  border-radius: var(--hj-r) !important;
  font-size: 13px !important; padding: 0 10px !important;
  border: 1px solid var(--hj-line) !important; background: #fff !important; color: var(--hj-body) !important;
  box-sizing: border-box;
}
body #pagination button.active{
  background: var(--hj-blue) !important; border-color: var(--hj-blue) !important; color: #fff !important;
}

/* 卡片：n-card 等旧类名一并归到 12 圆角 */
body .n-card, body .login-card, body .form-card, body [class*="-card"]{
  border-radius: var(--hj-r-lg) !important;
}

/* 例外（刻意不统一，写清楚原因，别再当漏改）：
   .hero-custom-playbtn = 视频封面上的大播放键，56 圆形是有意放大。
*/

/* ---------- ⑫ 房产站复核（2026-10-31）：它自己的卡片/按钮类名 ---------- */
body .hf-search-row .btn,
body .hf-find-btn{
  height: var(--hj-h) !important; min-height: var(--hj-h) !important;
  border-radius: var(--hj-r) !important;
  font-size: 15px !important; font-weight: 600;
  padding: 0 18px !important;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}
body .hf-search-row .btn{ background: var(--hj-blue) !important; color: #fff !important; border: 1px solid var(--hj-blue) !important; }
body .hf-search-row .btn:hover{ background: var(--hj-blue-d) !important; border-color: var(--hj-blue-d) !important; }
body .hf-find-btn{ background: var(--hj-orange) !important; color: #2a1c00 !important; border: 1px solid var(--hj-orange) !important; }
body .hf-find-btn:hover{ background: var(--hj-orange-d) !important; border-color: var(--hj-orange-d) !important; }

/* 卡片圆角：房产站是 6px/10px 混着来的，统一 12 */
body .hf-imgcard, body .hf-searchcard, body .hf-findcard, body .hf-adcard{
  border-radius: var(--hj-r-lg) !important;
}

/* 例外（刻意保留）：.hero-custom-playbtn 56 圆形播放键；#mapArea .map-search button 左侧 0 圆角与输入框拼成一体。 */

/* ---------- ⑬ 2026-10-31 第三轮：列表/链接的悬停特效 + 顶部服务条 ---------- */
/* 图片卡：抬一下 + 边色变蓝（原来是死的） */
body .hf-img-row .hf-link{
  border-radius: 12px !important;
  transition: transform .18s var(--hj-ease), box-shadow .18s var(--hj-ease), border-color .18s var(--hj-ease) !important;
}
body .hf-img-row .hf-link:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(16,42,74,.10);
  border-color: #cfdcee !important;
}
/* 文字列表行：悬停整行浅蓝 + 标题变蓝 */
body .hf-text-cols li{ transition: background-color .15s ease; }
body .hf-text-cols li:hover{ background: #f7faff; }
body .hf-text-cols .hf-link:hover{ color: var(--hj-blue) !important; }
/* 模块右上「更多 →」 */
body .hf-cat-mod a[style*="font-size:13px"]{ transition: color .18s ease; }
body .hf-cat-mod a[style*="font-size:13px"]:hover{ color: var(--hj-blue) !important; }
body .more:hover, body .section-more:hover{ color: var(--hj-blue) !important; }

/* 顶部服务条：里面那个 .btn 是文字链，不是按钮，把统一按钮层的尺寸压回去 */
body .nd-bar .btn, body .nd-bar .cta .btn{
  height: auto !important; min-height: 0 !important; width: auto !important;
  padding: 0 !important; border: 0 !important; background: none !important;
  color: var(--hj-blue) !important; font-size: 13px !important; font-weight: 600 !important;
  line-height: inherit !important; box-shadow: none !important;
  text-decoration: underline; text-underline-offset: 3px;
}
body .nd-bar .cta .btn:hover{ color: var(--hj-blue-d) !important; background: none !important; }

/* 留资弹窗（id 选择器，类名规则抓不到） */
body #fhModal > div{ border-radius: 12px !important; }

/* ---------- ⑭ 2026-10-31 第四轮：实测"悬停无反应"的按钮补上反馈 ----------
   用 hover 前后对比 computed style 实测出来的，不是凭感觉：
   顶栏右侧「个人中心/登录/注册」、分类导航「全部房源/厂房出租…」共 12 个之前完全没反馈。 */
body .nav-menu-right a{
  transition: color .18s var(--hj-ease), background-color .18s var(--hj-ease) !important;
}
body .nav-menu-right a:hover{
  color: #fff !important;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
body .hf-catbar a{
  transition: background-color .18s var(--hj-ease), color .18s var(--hj-ease) !important;
}
body .hf-catbar a:hover{
  background: rgba(255,255,255,.26) !important; color: #fff !important;
}
/* 顶部服务条整条：鼠标上去主文案也变蓝，明确"可以点" */
body .nd-bar .cta:hover .main{ color: var(--hj-blue) !important; }
body .nd-bar .cta{ transition: opacity .18s ease; }
body .nd-bar .cta:hover{ opacity: .92; }

/* 站点 Logo：轻微反馈，别做成"按钮" */
body a.hf-logo, body .site-brand{ transition: opacity .18s ease; }
body a.hf-logo:hover, body .site-brand:hover{ opacity: .88; }

/* ---------- ⑮ 2026-10-31 第五轮：字体一致性（type_audit.js 实测出来的） ---------- */
/* 面包屑/页内导航 div.nav-links：原来 14px/500/#555、14px/600/蓝、13px/500/#666 三套 */
body .nav-links a{
  font-size: 14px !important; font-weight: 500 !important; color: #555 !important;
  transition: color .18s var(--hj-ease) !important;
}
body .nav-links a:hover{ color: var(--hj-blue) !important; }
body .nav-links a.on, body .nav-links a.active{ color: var(--hj-blue) !important; font-weight: 600 !important; }

/* ---------- ⑯ 2026-10-31 第六轮：行业资讯模块（同一标签两种长相） ----------
   实测：大图文章里的「使用指南」是纯蓝加粗字（无框），下面两列列表里的是带框浅蓝标签（常规字重）
   → 同一个标签两种样子，看着就是"两边不一样"。统一成一种标签；灰色也只留 #999 一档。 */
body .n-cat, body .nf-cat{
  font-size: 12px !important; font-weight: 600 !important; color: #1e56a0 !important;
  background: #f4f8fd !important; border: 1px solid #d6e4f5 !important; border-radius: 4px !important;
  padding: 0 6px !important; height: 20px !important; line-height: 18px !important;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 8px 0 0 !important; flex-shrink: 0;
}
/* 次要文字统一 #999 一档（原来 #777 / #aaa / #999 三种灰混用） */
body .news-featured-card p,
body .news-featured-card .nf-desc,
body .news-featured-wrap p{ color: #999 !important; font-size: 13px !important; }
body .n-date, body .news-rich-list .n-date{ color: #999 !important; font-size: 12px !important; }
/* 列表标题和正文标题的父级色阶统一：正文级 #333 */
body .news-rich-list li a{ color: #333 !important; }
body .news-rich-list li a:hover{ color: var(--hj-blue) !important; }