/* 配件查询商城 —— 视觉对齐 F:\铲运道路EPC查询台.html
深蓝顶栏 + 左侧机型树 + 右侧结果列表 */
:root{
--bg:#f4f6fa; --card:#ffffff; --line:#e3e8f0; --tx:#1c2333; --tx2:#5b6577; --tx3:#9099ab;
--pri:#2456e6; --pri2:#eaf0ff; --ok:#0c8a52; --warn:#b96a00; --bad:#c23a3a; --hd:#16264a;
/* 顶栏实际高度。三行电话（标题/号码/提示语）需要 62px，留 4px 余量。
★ 用变量而不是写死，是因为 #hd 的 padding 和 #shell 的 height:calc(...)
两处都要用这个值；之前一个写 padding 一个写 calc(100vh - 50px)，
电话区一高就把提示语顶出容器外（老板截图的问题 1）。 */
--hdh:68px;
/* 搜索条高度。★ 现在搜索框从顶栏移到了独立搜索条（老板反馈"搜索框不明显"），
#shell 的高度要减掉「顶栏 + 搜索条」两段，所以这个值和 --hdh 一样不能写死。 */
--sbh:62px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font:14px/1.55 "Microsoft YaHei",system-ui,sans-serif;background:var(--bg);color:var(--tx)}
button,input,textarea{font-family:inherit;font-size:14px}
/* ============ 顶栏 ============ */
/* 高度用 min-height:var(--hdh) 固定：三行电话（标题/号码/提示语）需要约 62px，
不显式给够高度，提示语会溢出到下面的白色区被吃掉（问题 1）。
min-height 而不是 height：内容真的更高时让它自己撑开，不会裁字。 */
#hd{position:sticky;top:0;z-index:40;background:var(--hd);color:#fff;
padding:8px 18px;min-height:var(--hdh);
display:flex;align-items:center;gap:20px;flex-wrap:nowrap}
/* 顶栏三段：logo | 电话 | 右侧按钮。
★ logo 与 .hd-r 都用 flex:1 做**双向等宽配重**，#tels 用 flex:0 固定宽度
夹在中间 —— 两边配重权重相同、宽度自动相等，电话区就落在整屏正中。
为什么必须这么改（登录态按钮区实测 720px 宽时暴露的）：
原来 #tels 是 position:absolute; left:50% 相对顶栏居中，
max-width 只限制它自己的宽度 —— 顶栏一变宽（登录态多了配额/身份/
退出/批量查询）就向两侧溢出压到按钮上。
实测登录态 telsRight=1037 / hdRLeft=882 → 重叠 155px。
改成单边 flex:1 会把电话区贴到 logo 左边（第四批巡检实测
中线偏移 -248px，正好等于 logo 宽度），违反"电话居中"。
auto 外边距方案也不行：.hd-r 原本也带 margin-left:auto，
两处 auto 会瓜分剩余空间（实测仍偏 -248px）。
双向 flex:1 配重不依赖 auto，是唯一能同时满足「居中 + 不重叠」的写法。 */
#hd .logo{flex:1 1 0;min-width:0;display:flex;align-items:center;
font-size:17px;font-weight:700;letter-spacing:1px;white-space:nowrap;padding-right:4px}
.hd-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
flex:1 1 0;min-width:0;justify-content:flex-end}
/* ★ logo 与 .hd-r 都用 flex:1 做**双向等宽配重**，电话区 #tels 用 flex:0
固定在中间 —— 两边配重权重相同、宽度自动相等，电话区就落在整屏正中。
为什么必须这么改：
原来 #tels 是 position:absolute; left:50% 相对顶栏居中，max-width 只限
自身宽度 —— 顶栏一变宽（登录态 .hd-r 实测约 720px）就向两侧溢出压按钮，
实测登录态 telsRight=1037 / hdRLeft=882 → 重叠 155px。
改成 flex:1 单边配重又会把电话区贴到 logo 左边（第四批巡检实测
中线偏移 -248px，正好等于 logo 宽度），违反"电话居中"。
auto 外边距方案也不行：.hd-r 原本也带 margin-left:auto，
两处 auto 会瓜分剩余空间（实测仍偏 -248px）。
flex:1 双向配重不依赖 auto，是唯一能同时满足「居中 + 不重叠」的写法。 */
.who{font-size:12px;color:#9fb0d8}
.lvhint{color:#8496c2}
.lv{display:inline-block;font-size:11px;padding:1px 6px;border-radius:4px;margin-left:4px;vertical-align:middle}
.lv.rt{background:#3d4f7a;color:#c6d3f0}
.lv.dv{background:#0c8a52;color:#fff}
/* ============ 醒目搜索条 ============ */
/* 老板反馈"搜索框不明显"。原来它挤在顶栏里，被电话区和 7 个按钮夹在中间，
只有 300px 宽、深底白字，在 27 寸屏上几乎看不见。
现在单独做成一条横贯页面的浅色高亮条：白底、大字号、居中、最多 880px 宽。
仍然是同一个 #q 输入框 —— shop.js 的事件绑定一行都不用改。 */
#sbar{position:sticky;top:var(--hdh);z-index:39;background:#fff;
border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(22,38,74,.06);
padding:10px 18px;min-height:var(--sbh);
display:flex;align-items:center;gap:10px}
#sbar .sb-ic{font-size:18px;flex:none;opacity:.5}
#q{flex:1;min-width:0;max-width:820px;height:40px;padding:0 16px;
border:2px solid var(--pri);border-radius:20px;background:#fff;color:var(--tx);
font-size:15px;outline:none;transition:.15s}
#q::placeholder{color:#a8b0c0}
#q:focus{border-color:#163ec4;box-shadow:0 0 0 4px rgba(36,86,230,.12)}
#sbar .sb-kbd{flex:none;font-size:11px;color:var(--tx3);background:#f2f5fa;
border:1px solid var(--line);border-radius:5px;padding:2px 8px;white-space:nowrap}
#sbar .sb-tip{flex:none;font-size:12px;color:var(--tx3);white-space:nowrap}
/* ============ 层级标签 ============ */
/* 老板反馈"机型下应该是系统、组件、零件，父子关系现在有点乱"。
确认口径：保留原深度、不合并同名节点，只在每个层级名前标出它是什么。
四种标签用不同底色，一眼能看出点开后会是什么粒度。 */
.lvtag{display:inline-block;flex:none;font-size:10px;line-height:16px;
padding:0 5px;border-radius:4px;margin-right:6px;font-weight:700;
letter-spacing:.5px;vertical-align:1px}
.lvtag.bk{background:#efe4d0;color:#8a5a10} /* 图册：土黄，最外层 */
.lvtag.sys{background:#dce8ff;color:#1b47b8} /* 系统：蓝，范围最大 */
.lvtag.cmp{background:#e2f3e9;color:#0c7a4a} /* 组件：绿，中间层 */
.lvtag.pt{background:#eef0f4;color:#6b7382} /* 零件：灰，最细 */
/* 顶栏剩余查询次数 */
.quota{font-size:12px}
.quota .q-n{color:#9fb0d8}
.quota .q-n b{color:#ffd479;font-size:13px}
.quota .q-ok{color:#7fd4a8}
.quota .q-0{color:#ff9d9d}
.btn{border:1px solid var(--line);background:#fff;color:var(--tx);padding:6px 13px;border-radius:8px;
cursor:pointer;font-size:13px}
.btn:hover{border-color:var(--pri);color:var(--pri)}
.btn.btn-a{background:var(--pri);border-color:var(--pri);color:#fff}
.btn.btn-a:hover{opacity:.9;color:#fff}
#hd .btn{background:transparent;color:#dfe7ff;border-color:rgba(255,255,255,.35)}
#hd .btn:hover{background:rgba(255,255,255,.12);color:#fff}
#hd .btn.btn-a{background:#fff;color:var(--hd);border-color:#fff;font-weight:700}
#hd .btn-cart b{background:var(--pri);color:#fff;border-radius:9px;padding:0 6px;font-size:12px;margin-left:3px}
#hd .btn-cart b{background:#2456e6}
.btn.sm{padding:4px 10px;font-size:12px}
.btn.wide{width:100%;padding:10px;margin-top:8px}
.btn[disabled]{opacity:.5;cursor:default}
/* ============ 主布局 ============ */
/* ★ 现在要减掉两段：顶栏 + 搜索条（搜索框已从顶栏移到独立搜索条）。
两个高度都用 CSS 变量，写死任何一个都会让内容底部被截或多出空白。 */
#shell{display:flex;height:calc(100vh - var(--hdh) - var(--sbh))}
/* ---- 左侧机型树 ---- */
#side{width:320px;flex:none;background:var(--card);border-right:1px solid var(--line);
display:flex;flex-direction:column}
#side .hd{padding:12px 12px 8px;border-bottom:1px solid var(--line)}
#side .hd b{font-size:13px;color:var(--tx2)}
#mSearch{width:100%;margin-top:8px;padding:8px 10px;border:1px solid var(--line);
border-radius:8px;font-size:14px;outline:none}
#mSearch:focus{border-color:var(--pri)}
#side .cnt{font-size:11px;color:var(--tx3);margin-top:6px}
#mlist{overflow-y:auto;flex:1;padding:4px 8px 12px}
#mlist .mi{padding:7px 10px;border-radius:8px;cursor:pointer;display:flex;
justify-content:space-between;align-items:center;gap:8px}
#mlist .mi:hover{background:var(--pri2)}
#mlist .mi.on{background:var(--pri2);color:var(--pri);font-weight:700}
#mlist .mi span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mlist .mi .ct{font-size:11px;color:var(--tx3);flex:none}
#mlist .mi.on .ct{color:var(--pri)}
/* ---- 右侧结果 ---- */
#main{flex:1;overflow-y:auto;padding:16px 20px 60px;min-width:0}
.msg{color:var(--tx2);font-size:13px;margin:0 0 10px;min-height:18px}
.msg.err{color:var(--bad)}
.welcome{max-width:640px;margin:8vh auto;color:var(--tx2)}
.welcome h2{font-size:22px;color:var(--tx);margin-bottom:12px}
.welcome ul{margin:10px 0 0 20px}
.welcome li{margin:6px 0;font-size:13px}
.loading,.mempty{color:var(--tx3);padding:40px 10px;text-align:center}
.mempty span{display:block;font-size:12px;margin-top:6px}
.lhead{font-size:13px;color:var(--tx2);padding:4px 2px 12px;border-bottom:1px solid var(--line);margin-bottom:8px}
.lhead b{color:var(--pri)}
.row{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);
border-radius:10px;background:var(--card);margin-bottom:8px}
.row:hover{border-color:var(--pri)}
.row-main{flex:1;min-width:0;cursor:pointer}
.row-main .cd{font-size:15px;font-weight:700;color:var(--pri);font-family:Consolas,monospace}
.row-main:hover .cd{text-decoration:underline}
.row-main .nm{font-size:13px;margin-top:2px}
.row-main .nm i{color:var(--tx3);font-style:normal;font-size:12px}
.row .pr{text-align:right;flex:none;min-width:112px}
.row .pr b{display:block;font-size:16px;color:var(--bad);font-weight:700}
.row .pr .lb{display:block;font-size:11px;color:var(--tx3)}
.row .pr.none b,.row .pr .nq{color:var(--tx3);font-size:13px;font-weight:400}
/* ============ 弹窗 ============ */
.mask{display:none;position:fixed;inset:0;background:rgba(12,20,40,.5);z-index:100;
align-items:center;justify-content:center;padding:20px}
.mask.on{display:flex}
.modal{background:#fff;border-radius:14px;width:680px;max-width:100%;max-height:88vh;
display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal.sm{width:420px}
.m-hd{padding:14px 18px;border-bottom:1px solid var(--line);font-weight:700;
display:flex;align-items:center;justify-content:space-between;gap:10px}
.m-hd .x{border:0;background:transparent;font-size:24px;cursor:pointer;color:var(--tx3);line-height:1}
.m-hd .x:hover{color:var(--tx)}
/* 一键复制全部（2026-10-07 老板要求：详情页整份配件内容一次复制走）
★ m-hd 是 justify-content:space-between 的 flex，现在标题栏塞了三个孩子
（标题 / 本按钮 / ×）。不加 margin-left:auto 的话 space-between 会把本按钮
甩到正中间去，所以必须让标题吃掉多余空间、按钮和 × 一起靠右。 */
.cpall{margin-left:auto;padding:4px 12px;font-size:12px;font-weight:400;line-height:1.7;
cursor:pointer;color:var(--brand);background:#f2f8ff;border:1px solid var(--brand);
border-radius:5px;white-space:nowrap;transition:.15s ease}
.cpall:hover{background:var(--brand);color:#fff}
.cpall:active{transform:translateY(1px)}
.cpall.ok{color:#0a7d3c;border-color:#0a7d3c;background:#eefaf2}
.cpall.ok:hover{color:#0a7d3c;background:#eefaf2}
.cpall:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.dtc{font-family:Consolas,monospace;font-size:17px}
.m-bd{padding:18px;overflow-y:auto}
/* 详情键值表 */
dl.kv{display:grid;grid-template-columns:110px 1fr;gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:16px}
dl.kv dt{background:#f8fafc;padding:9px 12px;font-size:13px;color:var(--tx2)}
dl.kv dd{background:#fff;padding:9px 12px;font-size:13px;word-break:break-all}
dl.kv dd.strong{font-size:17px;font-weight:700;color:var(--bad)}
dl.kv dt.psep{background:#eef2f8;font-weight:700;color:var(--tx);grid-column:1/-1}
dl.kv dd.hintbox{grid-column:2;background:#fffbf2;color:var(--warn);font-size:12px;line-height:1.7}
/* 复制按钮（2026-10-07 老板要求：重量、尺寸旁边各挂一个）
值和按钮同一行 flex 排布，值左、按钮右。
按钮做得小而克制 —— 这张表里有一半是它，不能抢重量的视觉重心。 */
dd.cp-cell{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
dd.cp-cell .cp-val{flex:1 1 auto;min-width:0;word-break:break-all}
.cp-btn{flex:0 0 auto;padding:3px 10px;font-size:12px;line-height:1.6;cursor:pointer;
color:var(--tx2);background:#fff;border:1px solid var(--line);border-radius:5px;
transition:.15s ease}
.cp-btn:hover{color:var(--brand);border-color:var(--brand);background:#f2f8ff}
.cp-btn:active{transform:translateY(1px)}
.cp-btn.ok{color:#0a7d3c;border-color:#0a7d3c;background:#eefaf2}
.cp-btn:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.m-bd h4{font-size:13px;color:var(--tx2);margin:16px 0 8px;font-weight:700}
.m-bd h4 .sub{font-weight:400;color:var(--tx3);font-size:12px}
.tags,.mchips{display:flex;flex-wrap:wrap;gap:6px}
.tag,.chip{padding:3px 9px;border-radius:6px;font-size:12px;cursor:pointer;font-family:Consolas,monospace}
.tag{background:var(--pri2);color:var(--pri)}
.tag:hover{background:var(--pri);color:#fff}
.tag.warn{background:#fdf0e0;color:var(--warn)}
.tag.warn:hover{background:var(--warn);color:#fff}
.chip{background:#f1f5f9;color:var(--tx2);font-family:inherit}
.chip:hover{background:var(--pri2);color:var(--pri)}
.chip.more{cursor:default;background:#f1f5f9;color:var(--tx3)}
.kid{color:var(--pri);cursor:pointer;font-family:Consolas,monospace}
.kid:hover{text-decoration:underline}
.dact{display:flex;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.dact .btn-a{flex:1;padding:10px}
.qtyin{width:74px;padding:9px;border:1px solid var(--line);border-radius:8px;outline:none;text-align:center}
.qtyin:focus{border-color:var(--pri)}
.sticky{position:sticky;bottom:-18px;background:#fff;padding-bottom:2px}
/* 购物车 */
.cart-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.ci{flex:1;min-width:0}
.ci .cd{font-weight:700;color:var(--pri);font-family:Consolas,monospace;cursor:pointer}
.ci .nm{font-size:12px;color:var(--tx2)}
.ci .pr{font-size:12px;color:var(--tx2);margin-top:3px}
.ci .pr b{color:var(--bad)}
.qty{display:flex;align-items:center;gap:4px;flex:none}
.qty button{width:28px;height:28px;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer}
.qty button:hover{border-color:var(--pri);color:var(--pri)}
.qty input{width:52px;height:28px;text-align:center;border:1px solid var(--line);border-radius:6px;outline:none}
.sum{display:flex;justify-content:space-between;align-items:center;padding:14px 0 0;
border-top:2px solid var(--line);margin-top:8px;font-size:14px}
.sum b{font-size:20px;color:var(--bad)}
.warnbox{margin-top:10px;padding:9px 12px;background:#fffbf2;border:1px solid #f0dcb0;
border-radius:8px;color:var(--warn);font-size:12px}
.cflex{display:flex;gap:10px;margin-top:14px}
.cflex .btn{padding:10px}
/* 订单 */
.ord{border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px}
.ord-hd{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:13px}
.st{font-size:11px;padding:2px 8px;border-radius:5px}
.st.pending{background:#fff3e0;color:var(--warn)}
.st.quoted{background:var(--pri2);color:var(--pri)}
.st.confirmed{background:#e6f6ee;color:var(--ok)}
.st.closed{background:#f1f5f9;color:var(--tx3)}
.ord ul{margin:10px 0 0 18px}
.ord li{font-size:13px;margin:4px 0}
.muted{color:var(--tx3);font-size:12px}
/* 表单 */
.fld{margin-bottom:12px}
.fld label{display:block;font-size:12px;color:var(--tx2);margin-bottom:5px}
.fld i{color:var(--bad);font-style:normal}
.fld input,.fld textarea{width:100%;padding:9px 11px;border:1px solid var(--line);
border-radius:8px;outline:none}
.fld input:focus,.fld textarea:focus{border-color:var(--pri)}
.hide{display:none}
.err{color:var(--bad);font-size:13px;min-height:18px}
.m-ft{margin-top:6px}
.empty{text-align:center;padding:40px 10px;color:var(--tx2)}
.empty span{font-size:12px;color:var(--tx3)}
/* ============ 批量查询 ============ */
.modal.wide{width:980px}
.tabs{display:flex;align-items:center;gap:8px;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:10px}
.tb{border:1px solid var(--line);background:#fff;color:var(--tx2);padding:6px 14px;
border-radius:8px;cursor:pointer;font-size:13px}
.tb:hover{border-color:var(--pri);color:var(--pri)}
.tb.on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:700}
.tbinfo{font-size:12px;color:var(--tx3);margin-left:auto}
.tabpane{display:none}
.tabpane.on{display:block}
.fld .hint{font-size:12px;color:var(--tx3);margin-top:6px;line-height:1.6}
.fld.tip{font-size:12px;color:var(--tx3);margin:-4px 0 12px;line-height:1.6;
padding:6px 9px;background:#f6f8fc;border-radius:6px}
#bFile{padding:8px 0}
/* ★ 批量查询拖放区（2026-10-08）：文件输入藏进虚线框，点击=选文件，拖拽=直接填入 */
.dropzone{border:2px dashed #b9c6d8;border-radius:10px;padding:18px 12px;cursor:pointer;
background:#fafcff;display:flex;flex-direction:column;align-items:center;gap:4px;
text-align:center;transition:border-color .15s,background .15s}
.dropzone:hover{border-color:var(--pri);background:var(--pri2)}
.dropzone.on{border-color:var(--pri);background:var(--pri2)}
.dropzone b{font-size:14px;color:var(--tx)}
.dropzone .dzsub{font-size:12px;color:var(--tx3)}
.dropzone .dzname{font-size:13px;color:var(--ok);font-weight:600;min-height:16px}
.dropzone input[type=file]{display:none}
.dropzone > *{pointer-events:none} /* 拖拽经过子元素时不触发 dragleave 闪烁，事件统一落在框上 */
.brow{display:flex;gap:10px;margin:4px 0 12px}
.brow .btn{padding:9px 20px}
.bsum{font-size:13px;color:var(--tx2);padding:10px 12px;background:var(--pri2);
border-radius:8px;margin-bottom:10px}
.bsum b{color:var(--pri);font-size:15px}
.bsum b.ok{color:var(--ok)}
.bsum b.bad{color:var(--bad)}
.btablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;max-height:52vh}
table.btable{width:100%;border-collapse:collapse;font-size:13px;min-width:820px}
.btable th{background:#f4f7fc;color:var(--tx2);font-size:12px;font-weight:700;text-align:left;
padding:9px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2}
.btable td{padding:8px 10px;border-bottom:1px solid #f0f3f8;vertical-align:top}
.btable tr:hover td{background:#fafcff}
.btable td.mono{font-family:Consolas,monospace;color:var(--pri);font-weight:700;white-space:nowrap}
.btable td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.btable td.tc,.btable th.tc{text-align:center;width:64px}
.btable td i{color:var(--tx3);font-style:normal;font-size:12px}
.padtag{display:inline-block;font-size:11px;padding:0 5px;border-radius:4px;
background:#fff3e0;color:var(--warn);border:1px solid #f0dcb0;vertical-align:1px}
/* ★ 本轮新增：认出了哪一列 + 重量尺寸列 + 导出后提示 */
.bcol{margin:-2px 0 10px;padding:8px 12px;background:#f2f7ff;border:1px solid #cfe0ff;
border-radius:8px;font-size:12.5px;color:var(--tx2);line-height:1.7}
.bcol b{color:var(--pri)}
/* 参数列：可能很长（如尺寸 "1200×800×950"），限宽换行，别把表撑到横向滚动 */
.btable td.dim{color:var(--tx2);font-size:12px;max-width:190px;line-height:1.5;
word-break:break-all}
.bnote{margin-top:8px;font-size:12px;color:var(--tx3);line-height:1.7}
.missbox{margin-top:12px;border:1px solid #f0dcb0;background:#fffbf2;border-radius:8px;padding:9px 12px}
.missbox summary{cursor:pointer;font-size:13px;color:var(--warn);font-weight:700}
.misslist{margin-top:8px;font-size:12px;color:var(--tx2);line-height:1.9;word-break:break-all;
font-family:Consolas,monospace}
/* 导出水印（后端同时会写进 Excel 底部） */
.wm{margin-top:14px;padding:9px 12px;border:1px dashed #c9d3e6;border-radius:8px;
background:#f8fafc;color:var(--tx3);font-size:12px;text-align:center}
/* ============ 顶栏客服电话（居中·加大·醒目） ============ */
/* 老板要求：电话不能挤在最左边，要放在顶栏正中间、字号加大、一眼能看见能点。
实现：#tels 用 flex:1 + text-align:center 占满中间空档；.hd-r 靠 margin-left:auto 顶到最右。
号码 22px 橙色加粗，姓名 14px 白字，两个号码之间用竖线分隔，视觉上是个"电话卡"。 */
/* ★ 用绝对定位居中，不要靠 flex:1。
flex 方案的问题是：logo 和右侧按钮宽度不等，电话块的中线会偏离视口中线
（实测偏 87px）。绝对定位以 #hd 为参照，左50% + translateX(-50%) 永远是真居中。
前提：#hd 必须 position:sticky/relative（sticky 已满足）。
★★ 问题 1 的裁切（老板截图：号码下面的提示语只露出上半截）：
#tels 绝对定位 = 不参与文档流，#hd 的高度完全由 logo/搜索框/按钮这些
在流内的元素 + padding 决定（约 50px），而 #tels 三行内容需要约 62px。
于是 .tels-tip 落在 #hd 下边界之外，被后面的白色 #shell 盖住。
两种修法都试过：
- 给 #tels 加高 / 改 top → 号码行位置会飘，不居中了；
- 只加 #hd 的 padding-bottom → #hd 变高，#shell 的 height:calc(100vh - 50px)
还是按 50px 算，底下多出一条空白。
正解：让 #hd 高度由内容本身撑出来（三行电话的高度就是它的高度），
再用 CSS 变量把同一个值给 #shell 的 calc，避免两处数字对不上。 */
#hd{--hdh:68px}
/* ★ 电话区不再用「相对整个顶栏绝对居中」，改为在 logo 与 .hd-r 之间
靠 auto 外边距自动配重，让电话区落在**视口水平中心**。
为什么必须这么改：
原来 position:absolute; left:50% + max-width 只限制了自身宽度 ——
一旦顶栏变宽（登录态多了配额/身份/退出/批量查询，.hd-r 约 720px），
居中的电话区就向两侧溢出压到按钮上。实测登录态
telsRight=1037 / hdRLeft=882 → 重叠 155px。
直接改 flex:1 又会让电话区贴到 logo 左边（第四批巡检实测中线
偏移 -248px，违反"电话居中"）。
这里给 #tels 加 margin-left/right:auto：#hd 是 flex 容器，
auto 外边距会平分剩余空间 → 电话区正好居中于 logo 与 .hd-r 之间，
而剩余空间被两侧夹住，物理上不可能重叠。
（不能用 ::before/::after 配重：#tels 自身是 flex-direction:column，
伪元素会变成竖排的 flex item，撑不出横向配重。） */
#tels{
position:static;transform:none;
/* flex:0 = 不参与配重，宽度就按内容来；两侧由 logo / .hd-r 的
flex:1 双向等宽撑开，电话区自然落在整屏正中。 */
flex:0 0 auto;min-width:0;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:1px;padding:0 6px;text-align:center;pointer-events:none
}
#tels a{pointer-events:auto}
#tels .tels-t{
font-size:11px;font-weight:600;color:#9fb0d8;letter-spacing:2px;
line-height:1.2
}
#tels .tels-row{
display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:nowrap
}
#tels .tels-i{
display:flex;align-items:baseline;gap:7px;
color:#ffd479;text-decoration:none;white-space:nowrap;
padding:1px 16px;border-radius:8px;transition:.15s
}
/* 两个号码之间的竖线分隔 */
#tels .tels-i + .tels-i{border-left:1px solid rgba(255,255,255,.28)}
#tels .tels-i b{color:#fff;font-weight:600;font-size:15px;letter-spacing:.5px}
#tels .tels-i .tels-n{font-size:23px;font-weight:800;letter-spacing:.5px;font-family:Consolas,Menlo,monospace}
#tels .tels-i:hover{background:rgba(255,212,121,.16);text-decoration:none}
#tels .tels-i:hover .tels-n{color:#fff0c4}
#tels .tels-tip{font-size:11px;color:#8496c2;line-height:1.2;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-top:1px;letter-spacing:.2px}
@media (max-width:1180px){
#tels .tels-i .tels-n{font-size:19px}
#tels .tels-i{padding:1px 10px}
#tels .tels-tip{display:none}
/* 不再需要 max-width 预留：#tels 已改成 flex:1，
空间由 logo 与 .hd-r 之间的剩余量自动决定。 */
}
@media (max-width:900px){
/* 窄屏顶栏放不下绝对居中的电话了 —— 改成电话独占第二行，仍然水平居中。
这时不能绝对定位（会压住第一行），改回 flex 整行。
★ 高度不能再用 var(--hdh)：窄屏电话变成两行内容，整栏自然撑高，
min-height 只是下限、不会把内容压扁，所以仍安全。 */
#hd{flex-wrap:wrap;gap:10px;padding:8px 12px;justify-content:center;min-height:0}
#shell{height:calc(100vh - 116px - var(--sbh))}
#hd .logo{flex:1 0 auto}
#tels{position:static;transform:none;max-width:100%;order:3;flex:1 0 100%;
padding:3px 0 0;pointer-events:auto;box-sizing:border-box;overflow:hidden}
#tels .tels-row{flex-wrap:wrap;justify-content:center;min-width:0;max-width:100%}
/* ★ 每个号码块也要限宽：.tels-i 自身有 padding:1px 16px + border-left，
两个号码并排时总宽会顶出容器（实测 right=392 / 视口 390，差 2px）。 */
#tels .tels-i{max-width:100%;box-sizing:border-box;min-width:0;padding:1px 10px}
#tels .tels-i .tels-n{font-size:20px}
#tels .tels-i b{font-size:14px}
}
/* 移动端横向溢出 2px。
★ 真因不是布局方式，而是「子元素宽度 > 容器内容宽」：
#shell 是 display:flex（不是 grid，早先写的 grid-template-columns 完全无效），
窄屏下 #side 已经 width:100%，但 border-right + box-sizing:content-box
会让它比父容器宽出 1px，#main 的 padding 再一叠加就溢出 2px。
修法：容器与子元素统一 border-box + 子元素 max-width:100% 兜底。 */
@media (max-width:820px){
html,body{max-width:100%;overflow-x:hidden}
#shell{width:100%;max-width:100vw;overflow-x:hidden}
#side{width:100%;max-width:100%;box-sizing:border-box}
#main{min-width:0;max-width:100%;box-sizing:border-box}
#mcats{grid-template-columns:repeat(auto-fit,minmax(76px,1fr))}
}
/* 留言弹窗内的电话区 */
.icall{
background:#f7f9fc;border:1px solid var(--line);border-radius:6px;
padding:9px 12px;margin:-6px 0 14px;font-size:13px;line-height:1.9
}
.icall .icall-t{color:var(--tx3);font-size:12px;margin-right:8px}
.icall a{color:var(--pri);text-decoration:none;margin-right:16px;white-space:nowrap}
.icall a b{color:var(--tx)}
.icall a:hover{text-decoration:underline}
/* Telegram 群组引导语（2026-10-14） */
.icall .icall-tip{
display:block;color:var(--tx3);font-size:12px;line-height:1.55;
margin-top:4px;padding-top:6px;border-top:1px dashed var(--line)
}
.icall .icall-tip a{color:var(--pri);margin-right:0;white-space:normal}
/* 提交成功页里的电话 */
.oktel{
margin-top:12px;padding:10px;border-top:1px dashed var(--line);
font-size:13px;color:var(--tx2);text-align:center
}
.oktel a{color:var(--pri);text-decoration:none;font-weight:600}
.oktel a:hover{text-decoration:underline}
/* ============ 响应式 ============ */
@media (max-width:820px){
#hd{padding:8px 12px;gap:8px}
#hd .logo{font-size:15px;order:1}
/* 搜索框现在在独立的 #sbar 里，这里调它自己的样式 */
#sbar{padding:8px 12px;gap:8px;min-height:0}
#q{max-width:none;height:38px;font-size:14px}
/* 窄屏放不下"回车查询""也可以点左侧"这两块提示，先藏起来，输入框占满 */
#sbar .sb-kbd,#sbar .sb-tip{display:none}
.hd-r{order:3;margin-left:0;font-size:12px;flex:1 0 100%;gap:6px}
.hd-r .who{flex:1 0 100%}
#shell{flex-direction:column;height:auto}
#side{width:100%;height:auto;border-right:0;border-bottom:1px solid var(--line)}
#mlist{max-height:180px}
#main{padding:12px;overflow:visible}
.modal{width:100%;max-height:92vh}
dl.kv{grid-template-columns:88px 1fr}
.dact{flex-wrap:wrap}
.dact .btn{width:100%}
.tabs{flex-wrap:wrap}
.tbinfo{flex:1 0 100%;margin-left:0}
.brow{flex-wrap:wrap}
.brow .btn{flex:1 0 45%}
.btablewrap{max-height:60vh}
}
/* ============ 一键留言询价 ============ */
.ihint{
background:#f0f6ff;border:1px solid #cfe0f7;border-left:3px solid var(--acc);
color:#2a4a72;font-size:13px;line-height:1.75;
padding:10px 12px;border-radius:6px;margin-bottom:14px
}
.idone{text-align:center;padding:14px 4px 6px}
.okbig{font-size:19px;font-weight:700;color:var(--ok);margin-bottom:6px}
.oksub{font-size:13px;color:var(--tx2);margin-bottom:12px}
.oksub b{font-size:15px;color:var(--tx);letter-spacing:.5px}
.oklist{
text-align:left;max-height:260px;overflow:auto;
border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:#fafbfc
}
.oklist .oi{
display:flex;align-items:center;gap:8px;
padding:6px 2px;border-bottom:1px dashed var(--line);font-size:13px
}
.oklist .oi:last-child{border-bottom:0}
.oklist .oi .kid{flex:0 0 auto}
.oklist .oi b{margin-left:auto;white-space:nowrap;color:var(--tx)}
/* 窄屏下留言按钮独占一行，避免挤在一起点不准 */
@media (max-width:820px){
.dact .btn[data-inq]{width:100%}
}
/* ============ 机型分类（一级 tab）============ */
#mcats{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:5px;
padding:8px 8px 6px;border-bottom:1px solid var(--line);background:#fafbfd}
#mcats .mcat{padding:7px 4px;border-radius:7px;cursor:pointer;text-align:center;
border:1px solid var(--line);background:#fff;transition:.13s}
#mcats .mcat .nm2{display:block;font-size:13px;font-weight:700;color:var(--tx);line-height:1.3}
#mcats .mcat .ct{display:block;font-size:10px;color:var(--tx3);margin-top:1px}
#mcats .mcat:hover{border-color:var(--pri)}
#mcats .mcat.on{background:var(--pri);border-color:var(--pri)}
#mcats .mcat.on .nm2{color:#fff}
#mcats .mcat.on .ct{color:rgba(255,255,255,.8)}
/* ============ 二级分类 ============ */
#mlist .msub{padding:5px 10px;border-radius:6px;cursor:pointer;display:flex;
align-items:center;gap:8px;font-size:12px;color:var(--tx2);margin-bottom:2px}
#mlist .msub span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mlist .msub:hover{background:#f1f4f9}
#mlist .msub.on{background:var(--pri2);color:var(--pri);font-weight:600}
#mlist .msub .ct{font-size:11px;color:var(--tx3);flex:none}
#mlist .msub.on .ct{color:var(--pri)}
#mlist .msep{height:1px;background:var(--line);margin:8px 4px}
/* ★ 机型分组标题：把"二级分类"和"具体机型"在视觉上分成两段。
老板反馈"点滑移装载机，不知道下面的才是机型"——原来两者长得一模一样，
现在用一条带图标的标题 + 缩进，明确告诉用户下面这一段才是可点的机型。 */
#mlist .mgroup{display:flex;align-items:center;gap:6px;padding:7px 10px 5px;
margin-top:2px;border-top:1px dashed var(--line)}
#mlist .mgroup .mi-ic{color:var(--pri);font-size:11px;flex:none}
#mlist .mgroup .mi-tt{flex:1;font-size:12px;font-weight:700;color:var(--tx2);letter-spacing:.5px}
#mlist .mgroup .ct{font-size:11px;color:var(--tx3);flex:none}
/* 机型项：左侧一条竖线 + 等宽字体，和上方分类的视觉层次拉开 */
#mlist .mi{border-left:2px solid transparent}
#mlist .mi .mn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-family:Consolas,Menlo,monospace;font-size:12.5px}
#mlist .mi.on{border-left-color:var(--pri)}
#mlist .mi:hover{border-left-color:var(--pri2)}
/* 有层级树的机型标个箭头，告诉用户能点进去一层层看 */
#mlist .mi .mt{color:var(--pri);font-size:10px;flex:none;opacity:.65;order:3}
#mlist .mi .ct{order:2}
/* ============ 层级下钻页 ============ */
.tpage{display:flex;flex-direction:column;height:100%}
.tbar{display:flex;align-items:center;gap:12px;padding:10px 4px 12px;
border-bottom:1px solid var(--line);flex-wrap:wrap}
.tbar b{font-size:17px;color:var(--pri)}
.tbar .tstat{font-size:12px;color:var(--tx3)}
.tbar .btn{margin-left:auto}
.tbody{display:flex;gap:14px;flex:1;min-height:0;padding-top:12px}
/* 左树 */
.ttree{width:270px;flex:none;overflow:auto;max-height:calc(100vh - 210px);
border:1px solid var(--line);border-radius:9px;padding:6px;background:#fafbfd}
.ttree .trow{display:flex;align-items:center;gap:5px;padding:5px 6px;border-radius:6px;
cursor:pointer;font-size:13px;color:var(--tx)}
.ttree .trow:hover{background:var(--pri2)}
.ttree .tcar{flex:none;width:13px;font-size:10px;color:var(--tx3)}
.ttree .tcar.sp{visibility:hidden}
.ttree .tname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ttree .tct{flex:none;font-size:11px;color:var(--tx3);font-variant-numeric:tabular-nums}
.ttree .tkids{padding-left:13px;border-left:1px dashed var(--line);margin-left:9px}
/* 右面板 */
.tpanel{flex:1;min-width:0;overflow:auto;max-height:calc(100vh - 210px)}
.tph{display:flex;align-items:baseline;gap:10px;padding:0 2px 10px;flex-wrap:wrap}
.tph b{font-size:14px;color:var(--tx)}
.tph .tstat{font-size:12px;color:var(--tx3)}
.trows{border:1px solid var(--line);border-radius:9px;overflow:hidden}
/* 层级右面板的配件行：上面一行是 编码/名称/价格，下面一行是参数 chips。
（原来是单行三列 grid，加参数后改成两行块级，grid 只作用在 .trow1 上） */
.trows .titem{display:block;padding:8px 12px;border-bottom:1px solid var(--line);
cursor:pointer;font-size:13px;background:#fff}
.trows .titem:last-child{border-bottom:0}
.trows .titem:hover{background:var(--pri2)}
.trows .titem .trow1{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center}
.trows .titem .c{font-family:Consolas,Menlo,monospace;color:var(--tx2);font-size:12px}
.trows .titem .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trows .titem .p{font-variant-numeric:tabular-nums;color:var(--pri);font-weight:600;text-align:right}
.trows .titem .p .np{color:var(--tx3);font-style:normal;font-weight:400;font-size:12px}
/* 参数 chips：重量 / 尺寸 / 材质 … 源表没填的字段不出现，不是坏了 */
.acs{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;padding-left:2px}
.ac{display:inline-flex;align-items:baseline;gap:4px;max-width:100%;
background:#f2f5f9;border:1px solid #e2e8f0;border-radius:4px;
padding:1px 6px;font-size:11px;color:var(--tx2);line-height:1.7}
.ac i{font-style:normal;color:var(--tx3);flex:none}
.ac{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:820px){
.tbody{flex-direction:column;gap:10px}
.ttree{width:100%;max-height:38vh}
.tpanel{max-height:none}
.trows .titem .trow1{grid-template-columns:96px 1fr;row-gap:2px}
.trows .titem .p{grid-column:2;text-align:right}
}
/* ==================== 2026-10-10 新数据改版补充样式 ==================== */
/* 零件分类筛选 chips（机型列表页顶部） */
.fchips{display:flex;flex-wrap:wrap;gap:7px;padding:4px 2px 12px}
.fchip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ln);
background:#fff;border-radius:14px;padding:4px 12px;font-size:12.5px;color:var(--tx2);
cursor:pointer;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fchip i{font-style:normal;color:var(--tx3);font-size:11px}
.fchip:hover{border-color:var(--pri);color:var(--pri)}
.fchip.on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:600}
.fchip.on i{color:#cdd9ff}
/* 列表行里的单位角标（经销商） */
.utag{display:inline-block;font-size:11px;color:var(--pri);background:var(--pri2);
border-radius:4px;padding:0 5px;margin-left:4px;vertical-align:1px}
/* 详情：各单位报价明细表 */
.utwrap{overflow-x:auto;border:1px solid var(--ln);border-radius:8px;margin:6px 0 10px}
table.utable{width:100%;border-collapse:collapse;font-size:12.5px;background:#fff;min-width:560px}
table.utable th,table.utable td{border-bottom:1px solid var(--ln);padding:6px 9px;text-align:left;white-space:nowrap}
table.utable th{background:#f7f8fa;font-weight:600;color:var(--tx2);font-size:12px}
table.utable tr:last-child td{border-bottom:none}
table.utable td.num{text-align:right;font-variant-numeric:tabular-nums}
table.utable td.mono{font-family:Consolas,monospace}
table.utable td.dim{color:var(--tx3)}
/* 批量查询表补充列宽 */
.btable td:nth-child(3){white-space:nowrap}
/* ============ 计划表智能匹配（2026-10-10） ============ */
.srow{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.srow label{font-size:13px;color:var(--tx2);white-space:nowrap}
select.scode{max-width:100%;min-width:230px;font-size:12.5px;padding:3px 5px;border:1px solid var(--ln);
border-radius:6px;background:#fff}
input.scode{padding:3px 6px;border:1px solid var(--ln);border-radius:6px}
.stag{display:inline-block;font-size:11px;border-radius:4px;padding:1px 6px;background:#eef0f3;color:var(--tx2);white-space:nowrap}
.stag.ok{background:#e6f6ec;color:#1a7f37;font-weight:600}
.stag.warn{background:#fff4d6;color:#9a6700;font-weight:600}
.stag.bad{background:#fdeaea;color:#c0392b}
.snote{font-size:11px;color:var(--tx3);margin-top:2px}
.stable td{vertical-align:top}