/* ============================================================
禾佳土流.cn · 全站视觉收敛层（Design Tokens + 收敛） 2026-09-25 建立
线上位置：/home/ubuntu/hejia-cms/public/css/hjt-design.css
生效方式：nginx sub_filter 在 前注入
（站点有 CSP，style-src 'self' 已放行本文件）
维护纪律：只改这一个文件即全站生效；改完把 nginx 里 ?v= 版本号 +1 破浏览器缓存
回滚：删 nginx 里注入的 （配置备份 /etc/nginx/sites-enabled/hejiatuliu.bak-design-*）
不动的：版式结构 / 区块顺序 / 主色（网站蓝 #1e56a0 ＋ 橙 #f59e0b）
只统一的：字阶 · 灰阶 · 圆角 · 阴影 · 间距 · 交互手感 · 数字排印
改前实测（7 个页面）：文字色 35 种 · 底色 24 种 · 字号 21 种（含 0px/11.6667px/
13.5px/17.55px 碎值）· 圆角 13 种（2/4/5/6/7/8/10/12/14/16/24/50%/999）· 阴影 13 种
============================================================ */
:root{
/* 文字四级（统一前页面上出现过 10 种灰） */
--ink:#111; /* 标题/主字段——不掺灰 */
--text:#333; /* 正文 */
--text-2:#666; /* 次要说明 */
--text-3:#999; /* 辅助/占位 */
/* 品牌色（沿用站点既有主色，只把跑偏的第三种蓝收敛回来） */
--brand:#1e56a0; --brand-dark:#143f78; --brand-light:#3375c9;
--accent:#f59e0b; --accent-ink:#d97706; /* 价格橙：白底可读性更好，与按钮橙同族 */
--line:#e8ebee; --line-soft:#eef0f2;
/* 圆角四档（统一前 13 种） */
--r-sm:4px; --r-md:6px; --r-lg:10px; --r-pill:999px;
/* 阴影三档（统一前 13 种） */
--sh-1:0 1px 2px rgba(16,24,40,.05);
--sh-2:0 4px 14px rgba(16,24,40,.09);
--sh-brand:0 6px 22px rgba(30,86,160,.12);
--ease:cubic-bezier(.2,.6,.25,1); --dur:.18s;
}
/* ① 基础排版：中文字体栈 + 抗锯齿 + 标题字距（原来各页各写一套） */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","HarmonyOS Sans SC","Source Han Sans SC",sans-serif}
h1,h2,h3,h4,.n-card h3,.p-price{letter-spacing:.01em}
/* 兜底：没单独设色的 不再掉进浏览器默认蓝 #0000EE（首页/关于类页面原有若干处） */
a{color:inherit}
::selection{background:rgba(30,86,160,.15)}
:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid rgba(30,86,160,.45);outline-offset:2px}
/* ② 内容宽对齐：首页原为 padding 64px（内容 1152），列表/资讯页为 40px（1200）——
页面之间左右边缘差 24px。统一 40px = 全站内容 1200，页面切换不再"跳边"。
（移动端由 mobile.css 的 !important 规则接管，不受影响；页脚 .footer-btm .wrap 等
双类选择器优先级更高，也不会被覆盖） */
.wrap{padding-left:40px;padding-right:40px}
/* ③ 灰阶收敛：把 5~6 种近似灰并到 4 档 */
.p-loc,.p-area,.tag-link,.n-card p{color:var(--text-2)}
.p-no,.n-date,.ai-note,.sms-tip,.login-hint,.login-qr-tip-wx{color:var(--text-3)}
.login-title,.status-item .title,.list-item .title{color:var(--ink)}
/* ④ 价格/数字：统一橙 + 等宽数字（上下行对齐，列表页尤其明显） */
.p-price,.hf-fm-price,.hf-adprice,[class*="price"],[class*="area"],[class*="count"]{font-variant-numeric:tabular-nums}
.p-price{color:var(--accent-ink)}
/* ⑤ 圆角收敛 */
.p-card,.n-card,.chat-panel,.mfs-body,.area-group{border-radius:var(--r-lg)}
.tag,.tag-item,.cat-btn,.area-btn,.bar-btn,.login-btn,.sms-send-btn,.cp-input button{border-radius:var(--r-sm)}
input,select,textarea{border-radius:var(--r-md)}
/* ⑥ 阴影收敛：卡片统一两档（静止 --sh-1 / 悬停 --sh-2），首页新闻卡保留原来横移手感 */
.p-card{box-shadow:var(--sh-1)}
.p-card:hover{box-shadow:var(--sh-2)}
.n-card{box-shadow:var(--sh-1)}
.n-card:hover{box-shadow:var(--sh-2)}
.chat-panel{box-shadow:var(--sh-2)}
/* ⑦ 交互手感：统一 180ms 柔和曲线（原来 transition:all .15s 或干脆没有；位移卡片单独保留） */
a,button,.tag-item,.cat-btn,.area-btn,.area-btn-sm,.bar-btn,.login-btn,.sms-send-btn,input,select,textarea{
transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
button,input[type=submit]{font-family:inherit}
/* ⑧ 表单：边框/悬停/聚焦三态统一（原输入框边框色 209,213,219 与站点 --border 不一致） */
input[type=text],input[type=tel],input[type=password],input[type=number],input[type=email],select,textarea{border-color:var(--line);background:#fff}
input[type=text]:hover,input[type=tel]:hover,input[type=password]:hover,select:hover,textarea:hover{border-color:#cfd8e3}
input[type=text]:focus,input[type=tel]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:var(--brand-light);box-shadow:0 0 0 3px rgba(51,117,201,.12)}
/* ⑨ 页脚层级（原来同一站有 #1a1a2e 与 #1f2937 两种底色；标题 18px 与正文区块标题同大；
链接 15px 行高 1.4 过散） */
.footer{background:#1f2937;color:rgba(255,255,255,.66)}
.footer h3{font-size:14px;font-weight:700;color:#fff;letter-spacing:.06em;margin-bottom:10px}
.footer ul li a{font-size:13px;line-height:2.1;color:rgba(255,255,255,.78)}
.footer ul li a:hover{color:#fff}
.footer-contact .contact-item,.footer-btm span{font-size:13px;color:rgba(255,255,255,.62)}
.footer-contact,.footer-btm{border-top-color:rgba(255,255,255,.08)}
/* ⑩ 智能客服气泡：原来用的第三种蓝 #2563eb（渐变到 #1d4ed8），收敛回站点品牌蓝 */
.chat-bubble,.chat-panel .cp-hd{background:linear-gradient(135deg,#3375c9,#1e56a0)}
.chat-bubble{box-shadow:0 6px 22px rgba(30,86,160,.34)}
.cp-msgs .msg.user .b,.cp-input button{background:var(--brand)}
.cp-input button:hover{background:var(--brand-dark)}
.cp-input input:focus{border-color:var(--brand-light)}
/* ⑪ 细节：滚动条与长文本断行（价格/面积换行不再顶破卡片） */
.p-area,.p-loc,.n-card h3{word-break:break-word}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#d7dde5;border-radius:var(--r-pill);border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#c3ccd8;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
/* ⑫ 第二轮（2026-09-25 同日追加）：首轮有 6 条规定被页面里"复合选择器 / 靠后加载的组件样式"
压住了（实测价格色仍是 #f59e0b、客服气泡仍是第三种蓝 #2563eb）。下面把选择器写成同等或
更高优先级，数值口径一律不变，只是让同一套规则真正落地。 */
body .chat-bubble{background:linear-gradient(135deg,#3375c9,#1e56a0);box-shadow:0 6px 22px rgba(30,86,160,.34)}
body .chat-panel .cp-hd{background:linear-gradient(135deg,#3375c9,#1e56a0)}
body .cp-input button{background:var(--brand)}
body .cp-input button:hover{background:var(--brand-dark)}
body .cp-input input:focus{border-color:var(--brand-light)}
body .cp-msgs .msg.user .b{background:var(--brand);border-radius:var(--r-lg)}
body .ai-note,body .cp-status{color:var(--text-3)}
.p-right .p-price,.p-right .p-price small{color:var(--accent-ink)} /* 原规则 .p-right .p-price 优先级更高 */
.n-card .n-date,.n-card .n-cat{color:var(--text-3)}
.n-cat{border-radius:var(--r-sm)}
.sort-btn{color:var(--text-2)}
input[type=text],input[type=tel],input[type=password],input[type=number],input[type=email],select,textarea{border-radius:var(--r-md)}
small{font-size:12px}