@charset "utf-8";
/* ==========================================================================
thdiban.com 主题美化层 theme-2026.css (2026-10-07)
--------------------------------------------------------------------------
设计原则：
1. 只做「覆盖」，绝不改动 pintuer.css / style.css 原文 —— 删除本文件即完全回滚
2. 品牌色沿用原橙色系，仅做提纯与渐变统一
3. 统一圆角 / 阴影 / 间距，让版面更现代、更有呼吸感
========================================================================== */
:root {
--brand: #ff8a1e;
--brand-2: #ffb347;
--brand-deep: #e06d00;
--grad: linear-gradient(135deg, #ffb347 0%, #ff7a00 100%);
--ink: #131a24;
--text: #5c6673;
--line: #edf0f5;
--soft: #f6f8fb;
--r: 16px;
--r-s: 12px;
--shadow: 0 12px 34px rgba(17, 24, 39, .08);
--shadow-h: 0 18px 40px rgba(17, 24, 39, .14);
}
/* ---------------- 基础排版 ---------------- */
body {
color: var(--text);
font-family: "PingFang SC", "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { color: var(--ink); }
a { color: #4a5563; }
a:focus, a:hover { color: var(--brand); }
.bg-gray { background: var(--soft); }
/* 无障碍隐藏（供 SEO 用的 H1） */
.sr-only {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* ---------------- 容器宽度统一：头部 / 正文 / 页脚 三处对齐 ---------------- */
/* 原状：正文用 .container（750 / 1000 / 1200px），而头部与页脚用 .container-layout
（style.css 里是 1500px，且 ≤1440px 时被改成 98%），导致头尾比正文宽、左右不对齐。
此处让 .container-layout 完全套用 .container 的断点，三处容器宽度一致。 */
.container-layout { max-width: 100%; }
@media (min-width: 760px) { .container-layout { max-width: 750px; } }
@media (min-width: 1000px) { .container-layout { max-width: 1000px; } }
@media (min-width: 1200px) { .container-layout { max-width: 1200px; } }
/* ---------------- 按钮 ---------------- */
.button {
border-radius: 999px;
transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.button.radius-rounded { border-radius: 999px; }
.button.bg-yellow {
background: var(--grad) !important;
border: 0;
box-shadow: 0 10px 22px rgba(255, 122, 0, .26);
}
.button.bg-yellow:hover {
background: linear-gradient(135deg, #ffc163 0%, #ff8a1e 100%) !important;
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(255, 122, 0, .34);
}
/* ---------------- 顶部导航 ---------------- */
/* 实心白底：滚动时 .navbar 会变成 position:fixed 吸顶，
若用 rgba 半透明 + backdrop-filter，下方内容会透出来（用户反馈要求去掉）。 */
#pc-header .navbar {
background: #fff !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: 0 1px 0 var(--line), 0 8px 26px rgba(17, 24, 39, .05) !important;
}
#pc-header .logo img { max-height: 46px; }
/* ⚠️ 一级栏目必须用 > 子选择器限定。
模板结构是 ，
用后代组合器（.nav li a）会把二级菜单的 一起命中，导致两个问题：
A. 悬停二级项时冒出一条 24px 橙条（下面那条 :after 下划线指示条）；
B. 父栏目带 active 时，二级项被一起染成品牌橙（应保持深灰）。 */
#pc-header .nav > li > a {
color: #39424f;
font-weight: 500;
transition: color .25s ease;
}
#pc-header .nav > li > a:after {
content: ''; position: absolute; left: 50%; bottom: 24px;
width: 0; height: 3px; border-radius: 3px;
background: var(--grad); transform: translateX(-50%);
transition: width .3s ease;
}
#pc-header .nav > li > a:hover:after,
#pc-header .nav > li.active > a:after { width: 24px; }
#pc-header .nav > li.active > a,
#pc-header .nav > li > a:hover,
#pc-header .nav > li:hover > a.first-level { color: var(--brand) !important; }
#pc-header .nav li ul {
background: #fff;
border-radius: 0 0 14px 14px;
box-shadow: 0 18px 40px rgba(17, 24, 39, .12);
/* 横向也要留内边距：header.css 给下级 a 设了 width:100%，
若把内缩写在 a 的 margin 上，a 会比 ul 宽 16px，被 ul 的 overflow:hidden 裁掉右边 */
padding: 8px 8px;
overflow: hidden;
}
#pc-header .nav li ul li a {
line-height: 42px;
border-radius: 8px;
margin: 0;
transition: background .2s ease, color .2s ease;
}
#pc-header .nav li ul li a:hover { background: var(--grad); color: #fff !important; }
/* ---------------- 首屏轮播 ---------------- */
.slides { position: relative; overflow: hidden; }
.slides .item img { display: block; width: 100%; height: auto; }
/* 快捷咨询条（.hero-quick）已按用户要求整体移除，相关样式一并删除。 */
/* ---------------- 区块标题 ---------------- */
.title-c h3 {
font-size: 34px; font-weight: 700; letter-spacing: .5px;
color: var(--ink); margin-bottom: 52px;
}
.title-c h3:before {
width: 46px; height: 4px; border-radius: 4px; bottom: -24px;
/* style.css 原文是 margin-left:-15px（按旧 width:30px 算的居中值），
这里把宽度改成 46px 后必须同步改成 -23px，否则装饰条偏右 8px */
margin-left: -23px;
background: var(--grad);
}
.title-c .sub {
font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
/* 副标题要落在装饰条下方：h3 下边距 52px + 此处 -12px = 40px 的净间距。
原值 -34px 只留 18px，装饰条（h3 下方 20~24px 处）会压在英文上 */
color: #b6bec9; margin-top: -12px; margin-bottom: 46px;
}
.title-c.text-white h3 { color: #fff; }
.title-c.text-white .sub { color: rgba(255, 255, 255, .6); }
/* 深色背景图上的区块标题（公司简介所在区块） */
.home-about .title-c h3 { color: #fff; }
.home-about .title-c .sub { color: rgba(255, 255, 255, .55); }
/* ---------------- 解决方案卡片 ---------------- */
.solution .media-img {
border-radius: var(--r); overflow: hidden;
box-shadow: 0 6px 20px rgba(17, 24, 39, .07);
transition: transform .4s ease, box-shadow .4s ease;
}
.solution .media-img:hover { transform: translateY(-6px); box-shadow: var(--shadow-h); }
.solution .media-img img { display: block; width: 100%; transition: transform .7s ease; }
.solution .media-img:hover img { transform: scale(1.07); }
.solution .media-img .linear-link {
background: linear-gradient(to top, rgba(9, 13, 21, .9) 0%, rgba(9, 13, 21, .32) 55%, rgba(9, 13, 21, 0) 100%);
}
.solution .media-img .linear-link .subtitle { padding: 0 22px; bottom: 22px; }
.solution .media-img .linear-link h3 { font-size: 17px; font-weight: 600; }
.solution .media-img .mask {
background: linear-gradient(135deg, rgba(255, 138, 30, .95), rgba(255, 179, 71, .88));
transform: none !important;
}
.solution .media-img .mask .subtitle { padding: 26px; }
.solution .media-img .mask .subtitle h2 { font-size: 19px; font-weight: 600; }
.solution .media-img .mask .subtitle p { font-size: 13px; line-height: 1.85; opacity: .95; }
.solution .media-img:hover .mask { transform: none !important; }
/* 【卡片间距】模板 index.htm:64 用的是 pintuer 的 .line-small（列内边距 1px）
配 .margin-little-bottom（下外边距 2px）→ 卡片间距只有 2px。
2px 对「圆角 16px + 阴影」的卡片来说几乎等于贴在一起，看起来像一整块拼图；
更要命的是 hover 时卡片会上移 6px（上面 .solution .media-img:hover{translateY(-6px)}），
2px 的间距根本兜不住 —— 卡片会向上压进上一行 4px。
改法：.line-small 的列内边距 1px → 8px（相邻卡片间距 = 8+8 = 16px），
负外边距同步 -1px → -8px（否则最外侧卡片会缩进容器 8px，与版心对不齐）；
.media-img 的下外边距 2px → 16px，与横向间距一致。
改后横向 16px / 纵向 16px，hover 上移 6px 后仍有 10px 余量。
.line-small 全站只在 index.htm 这一处用（grep 已确认），改动不外溢。 */
.line-small { margin-left: -8px; margin-right: -8px; }
.line-small .x4 { padding-left: 8px; padding-right: 8px; }
.solution .media-img { margin-bottom: 16px; }
/* ---------------- 公司简介：背景罩层（学 fjzrd.cn） ---------------- */
/* 原状：indpic.jpg 是一张很平的灰调建筑图（实测均值 70 / 中位 72 / P5~P95 = 50~80，
几乎没有对比度），白卡片 + 白标题直接浮在上面 → 整块发灰、没有层次。
参考站 fjzrd.cn 的做法是「背景图 + 对角渐变罩层 + background-attachment:fixed 视差」，
这里照搬结构，配色按本站要求改成「中性暗化」：左端压到近黑拉开层次，
右端只留一点品牌橙收尾，不改变原图的灰调质感。 */
.home-about {
position: relative;
/* 视差：背景相对「视口」固定，滚动时卡片从图上滑过。
注意 fixed 之后 background-size:cover 是以视口而非区块为基准计算的，
原图 1920×954 在 1920 宽视口下刚好铺满，不会出现横向留白。 */
background-attachment: fixed;
}
/* 罩层：::before + inset:0 铺满整个区块。
刻意不给 z-index（保持 auto）→ 画在元素自身背景之上、有 z-index 的子元素之下。 */
.home-about::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(120deg,
rgba(10, 14, 20, .88) 0%,
rgba(18, 24, 32, .62) 55%,
rgba(255, 138, 30, .16) 100%);
pointer-events: none;
}
/* 把区块内所有直接子元素抬到罩层之上：区块标题、白卡片、上下占位块 */
.home-about > * { position: relative; z-index: 1; }
/* ---------------- 公司简介 ---------------- */
.home-about .line.bg-white {
border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow);
}
.home-about h2 { font-size: 26px; font-weight: 700; }
.home-about h2:before { width: 46px; height: 4px; border-radius: 4px; background: var(--grad); }
.home-about .text-sub { font-size: 15px; line-height: 2; color: var(--text); }
/* ---------------- 栅格行内「配图铺满」（公司简介 / 联系页表单区） ---------------- */
/* 根因：pintuer 的 .line 靠子项 float:left 排列，行高由更高的那一列撑出来；
而图片列只有 .img-responsive{max-width:100%;height:auto}，按原图比例渲染，
永远比行矮 → 底部露出一条行背景色（首页是白、联系页是 #cacaca 灰）。
实测缺口：首页 34px(≥1280) / 130px(1000~1100) / 369px(≤900)；
联系页 126px(1440) / 256px(1000) / 315px(800)。
修法：flex + align-items:stretch 让两列等高，图片绝对定位 + object-fit:cover 铺满。 */
.home-about .line.bg-white,
.home-contact { display: flex; align-items: stretch; }
/* float:none 必须显式写：flex 项上的 float 会被浏览器忽略，留着会误导后来人；
flex:1 1 50% 也不能省 —— float 失效后不给宽度，两列会按内容宽度收缩、整个布局散掉。 */
.home-about .line.bg-white > .x6,
.home-contact > .x6 { float: none; flex: 1 1 50%; min-width: 0; }
/* min-height 是兜底：万一另一列在某断点塌得很矮，图片列也不会被压成一条线 */
.home-about .line.bg-white > .x6:last-child,
.home-contact > .x6:last-child { position: relative; min-height: 300px; }
.home-about .line.bg-white > .x6:last-child img,
.home-contact > .x6:last-child img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* 表单容器在 style.css 里被写死 width:590px; float:right —— 列宽一旦小于 590
就向左溢出、被视口裁掉（实测 1000px 视口溢出 90px、800px 溢出 190px，输入框左边缘被切）。
改成 width:100%; max-width:590px：宽视口下 max-width 把它钳在原值（逐像素零回归），
窄视口自动收到列宽。这是处理「固定宽度容器」的通用安全改法。 */
.home-contact .gb { width: 100%; max-width: 590px; }
/* ---------------- 新闻动态 ---------------- */
/* 【裁切修复】圆角与裁切只作用于图片本身，不作用于 .media-img 容器。
style.css:108 的 .home-news-h .media-img{position:relative} 原本【没有】overflow:hidden；
style.css:109 的 .post-title{bottom:-30px} 是「白卡压在图片下缘、往下露出 30px」的原始设计。
theme 层早前为了给图片做圆角，把 overflow:hidden 加到了 .media-img 上，于是这 30px 连同
黄色箭头按钮的下半截一起被裁掉（实测 1920/1440 下：卡片超出容器 30px、按钮超出容器 8px，
按钮只剩上半截贴死在圆角边上）。把圆角下移到 ![]()
上即可两全：
· 图片照样是圆角（而且四角都圆了 —— 原先把 overflow:hidden 放在容器上时，
图片只有 537px 宽、容器 580px 宽，图片右侧两角其实根本没被裁到，是直角）；
· 卡片不再被裁，阴影也不再被切。
hover 时 style.css:110 把 bottom 改成 30px，卡片收回图片内部，行为与原设计完全一致。
注意：卡片下溢的 30px 落在区块底部 .blank-large 的留白里，实测不与下方页脚冲突。 */
.home-news-h .media-img { border-radius: 0; overflow: visible; }
.home-news-h .media-img > img { border-radius: var(--r); }
.home-news-h .media-img .post-title {
border-radius: var(--r-s); box-shadow: 0 14px 34px rgba(17, 24, 39, .12);
padding: 22px;
}
.home-news-h .media-img .post-title h3 a { font-size: 18px; font-weight: 600; }
.home-news-c {
border-radius: var(--r-s); border: 1px solid var(--line);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.home-news-c:hover {
transform: translateY(-3px); border-color: #ffe0bd;
box-shadow: 0 14px 30px rgba(255, 122, 0, .12);
}
/* 【缩略图统一宽高比 + 去掉白边】
① 盒子侧：pintuer.css:688 的 .img-new-w 只给了 max-height:95px，配合 .img-responsive 的
max-width:100%;height:auto，缩略图渲染尺寸完全由【源图宽高比】决定 —— 源图不是 145×95
时同一列里就高矮胖瘦各不相同。改法： 变成固定比例盒子，图片 width/height 100%
+ object-fit:cover，源图比例再乱也强制对齐，图片没加载时盒子也不塌陷。
② 源图侧（真正的元凶）：index.htm:163 原先写的是 thumb_img=###,145,95,2，
而易优 thumb_img 的第 4 个参数是「缩略图方式」，2 = THUMB_FILLED【填充白边】，
不是裁切！实测：源图 295×211（偏窄）→ 145×95 时左右各补白条；源图 929×564（偏宽）
→ 上下各补白条；源图比例正好时则没有白条。
于是每张图「盒子里的照片」大小都不一样，白边又和白色卡片融成一片，
看起来就像缩略图宽高不统一 —— 盒子明明是同一个尺寸（DOM 实测四张全是 144.5×94.67）。
改法：第 4 个参数 2 → 3（THUMB_CENTER 居中裁剪），尺寸 145×95 → 145×108（4:3）。
生成逻辑：application/common.php:1272 thumb_img()，命中 /uploads/thumb/145_108/ 缓存
就直接返回，否则回源 /uploads/allimg/ 原图生成（mkdir 0755 自动建目录）。
注意：改了方式但尺寸不变时，旧缓存文件会被直接复用、改动不生效 —— 必须同时换尺寸。 */
.home-news-c > .x3 > a {
display: block; width: 100%; aspect-ratio: 145 / 108;
border-radius: var(--r-s); overflow: hidden; background: #eef1f6;
}
.home-news-c > .x3 > a > img {
display: block; width: 100%; height: 100%;
max-width: none; max-height: none; object-fit: cover;
}
.home-news-c .news-time .text-sub { color: var(--brand) !important; }
.home-news-c .news-time { border-right: 0; position: relative; }
.home-news-c .news-time:after {
content: ''; position: absolute; right: 0; top: 6px; bottom: 6px;
width: 1px; background: var(--line);
}
.home-news-c .news-title h2 a { font-size: 17px; font-weight: 600; }
/* ---------------- 频道 banner ---------------- */
.channel-banner .banner-info h1,
.channel-banner .banner-info .banner-title {
font-size: 40px; font-weight: 700; color: #fff;
position: relative; margin-bottom: 30px;
}
.channel-banner .banner-info h1:before {
content: ''; display: block; position: absolute;
left: 50%; margin-left: -23px; bottom: -12px;
width: 46px; height: 4px; border-radius: 4px; background: var(--grad);
}
.channel-banner .banner-info p { font-size: 30px; letter-spacing: 4px; opacity: .72; }
.channel-banner:after {
content: ''; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(9, 13, 21, .34), rgba(9, 13, 21, .5));
}
.channel-banner .banner-info { z-index: 3; }
/* ---------------- 子栏目横向导航 ---------------- */
.nav-x { border-bottom: 1px solid var(--line); }
.nav-x li a { font-weight: 500; transition: color .25s ease; }
.nav-x li a.active { background: var(--grad) !important; }
/* ---------------- 面包屑 ---------------- */
.nav-bread a { color: #8b94a1; }
.nav-bread a:hover { color: var(--brand); }
/* ---------------- 页脚 ---------------- */
footer.bg-main {
background: #0f1622 !important;
background-image: radial-gradient(1200px 400px at 15% 0%, rgba(255, 138, 30, .10), transparent 60%) !important;
color: #9aa5b4;
}
footer .item-1, footer .item-2, footer .item-3, footer .item-4 { color: #9aa5b4; }
footer h3 { color: #fff !important; font-weight: 600; }
footer a { color: #9aa5b4; }
footer a:hover { color: var(--brand-2); }
footer .radius-circle.bg-yellow { background: var(--grad) !important; }
footer .qr { border-radius: var(--r-s); }
footer .copyright { border-top: 1px solid rgba(255, 255, 255, .08); color: #7c8794; }
footer .copyright a { color: #7c8794; }
footer .flink a { color: #9aa5b4; }
/* 页脚栏目列宽：模板已过滤掉「无子栏目」的空列（关于我们等），此处重排剩余 4 列 */
footer ul li.item-2 { width: 22%; }
footer ul li.item-3 { width: 22%; }
footer ul li.item-5 { width: 44%; }
footer ul li.item-6 { width: 12%; }
/* ---------------- 右侧悬浮工具 ---------------- */
.side-tools {
position: fixed; right: 16px; bottom: 96px; z-index: 900;
display: flex; flex-direction: column; gap: 10px;
}
.side-tools a, .side-tools .st-qr {
width: 52px; height: 52px; border-radius: 14px;
background: #fff; border: 1px solid var(--line);
box-shadow: 0 10px 26px rgba(17, 24, 39, .12);
display: flex; flex-direction: column; align-items: center; justify-content: center;
color: #5c6673; font-size: 18px; line-height: 1;
transition: transform .25s ease, background .25s ease, color .25s ease;
}
.side-tools a:hover, .side-tools .st-qr:hover {
background: var(--grad); color: #fff; border-color: transparent;
transform: translateY(-3px);
}
.side-tools .st-tel b { font-size: 11px; font-weight: 500; margin-top: 3px; }
.side-tools .st-top { display: none; }
.side-tools.show-top .st-top { display: flex; }
.side-tools .st-qr { position: relative; }
.side-tools .st-qr-pop {
position: absolute; right: 66px; top: 50%;
transform: translateY(-50%) scale(.94);
background: #fff; border-radius: 12px; box-shadow: var(--shadow);
padding: 12px; width: 152px; text-align: center;
opacity: 0; visibility: hidden;
transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.side-tools .st-qr:hover .st-qr-pop { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }
.side-tools .st-qr-pop img { width: 128px; height: 128px; object-fit: contain; display: block; margin: 0 auto; }
.side-tools .st-qr-pop span { display: block; font-size: 12px; color: var(--text); margin-top: 6px; }
.side-tools .st-qr-pop:after {
content: ''; position: absolute; right: -6px; top: 50%; margin-top: -6px;
width: 12px; height: 12px; background: #fff; transform: rotate(45deg);
}
/* ---------------- 详情页正文 ---------------- */
.post { font-size: 16px; line-height: 2; color: #48505c; }
.post h1 { font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.post img { max-width: 100%; height: auto; border-radius: var(--r-s); }
.article, .padding-large.bg-white { border-radius: var(--r); }
/* ---------------- 搜索弹层 ---------------- */
/* 原状（header.css「弹出搜索」段）：
.mask #000 + opacity:.8 → 底层内容仍透出来，首屏大标题从输入框里穿过
.form-group top:40% + translate(-50%,-200%)
→ 靠「自身高度 × 2」把自己提到 40% 线以上，
自身高度又是 70px（pintuer 给 .form-group 的 padding-bottom:10px 撑的），
最终落点 y≈257px，正好压在首屏标题上；改高度就会跑位，很脆
.input 全透明 + 只有一条 2px 下划线，color:#6E6E6E
→ 深灰字压在 80% 黑遮罩上几乎读不出来
.button 浅灰 PNG（#E0E0E0）直接贴在下划线上，看不出是按钮
> a 48px 的 ×，60×60 贴右上角
改法：① 遮罩加深 + 轻微模糊，底层彻底退后；
② 用 top:50% + translate(-50%,-50%) 真正垂直居中（不再依赖自身高度）；
③ .form-group 做成白色胶囊面板，输入框有真实底色 / 内边距 / 字号；
④ 提交按钮改成品牌橙圆形按钮 + 白色放大镜（原 PNG 是浅灰，橙底上对比不足，
新图 skin/images/ico-search-white.png 由原图 alpha 刷白生成）；
⑤ 关闭按钮收成 46px 圆形，带 hover 反馈。
注意：输入框的「假 placeholder」已在 header.htm 里改成真正的 placeholder 属性，
所以下面可以放心用 ::placeholder 上色。 */
/* ① 遮罩：加深 + 模糊（原 opacity:.8 必须归 1，否则叠加后仍是半透明） */
.searchBar-m .mask {
background: rgba(10, 14, 20, .92);
opacity: 1;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
/* ② 面板定位：真正垂直居中，与自身高度解耦 */
.searchBar-m .form-group {
width: 92%;
max-width: 640px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: auto;
padding: 0;
}
/* ③ 白色胶囊面板 */
.searchBar-m form {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border-radius: 999px;
padding: 8px 8px 8px 28px;
box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
animation: se-drop .45s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes se-drop {
from { opacity: 0; transform: translateY(-18px); }
to { opacity: 1; transform: none; }
}
/* 输入框
⚠️ pintuer 的 .input 带 box-shadow:0 1px 1px rgba(0,0,0,.075) inset，
在透明背景上会在输入框顶部渲染出一条 1px 浅灰线（实测 rgb(238,238,238)），
白胶囊里看着像「多了一条分隔线」——必须显式 box-shadow:none 清掉。
另外 .input 上有 transition:all 1s，会让字号/字色慢慢过渡，一并置 none。 */
.searchBar-m .input {
float: none;
flex: 1 1 auto;
width: auto;
min-width: 0;
height: 58px;
line-height: 58px;
background: transparent;
border: 0;
box-shadow: none;
transition: none;
padding: 0;
color: var(--ink);
font-size: 18px;
}
.searchBar-m .input:focus { outline: none; }
.searchBar-m .input::placeholder { color: #a3adba; opacity: 1; }
/* ④ 提交按钮：品牌橙圆形 + 白色放大镜 */
/* ⚠️ background-size 会作用于「所有」背景层。写成
background: var(--grad) url(icon) …; background-size: 20px 20px;
会把渐变层也压成 20×20，按钮只剩中间一小块橙色、四周露出白底。
必须逐层给 size（图标在前、渐变在后，前者在上层）。 */
.searchBar-m .button {
float: none;
flex: 0 0 auto;
width: 50px;
height: 50px;
line-height: 50px;
border: 0;
border-radius: 50%;
text-indent: 0;
color: transparent;
background-color: transparent;
background-image: url(../images/ico-search-white.png), var(--grad);
background-repeat: no-repeat, no-repeat;
background-position: center center, center center;
background-size: 20px 20px, 100% 100%;
box-shadow: 0 10px 22px rgba(255, 122, 0, .4);
cursor: pointer;
transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.searchBar-m .button:hover,
.searchBar-m .button:focus {
transform: translateY(-1px);
box-shadow: 0 14px 28px rgba(255, 122, 0, .5);
filter: brightness(1.06);
outline: none;
}
/* ⑤ 关闭按钮：46px 圆形，hover 转 90° */
.searchBar-m > a {
right: 44px;
top: 40px;
width: 46px;
height: 46px;
line-height: 46px;
font-size: 20px;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
color: #fff;
transition: background .25s ease, transform .25s ease;
}
.searchBar-m > a:hover {
background: var(--brand);
color: #fff;
transform: rotate(90deg);
}
/* 小屏：面板收窄、控件缩小 */
@media (max-width: 767px) {
.searchBar-m .form-group { width: 88%; }
.searchBar-m form { padding: 6px 6px 6px 20px; gap: 8px; }
.searchBar-m .input { height: 48px; line-height: 48px; font-size: 16px; }
.searchBar-m .button { width: 42px; height: 42px; line-height: 42px; background-size: 17px 17px, 100% 100%; }
.searchBar-m > a { right: 16px; top: 16px; width: 40px; height: 40px; line-height: 40px; font-size: 18px; }
}