/* 工业检测设备展示站 - 全站样式 */
/* v37：后台产品编辑器 SEO 字段来源提示 */
.seo-hint { margin-top: 6px; font-size: 12px; line-height: 1.7; color: #6b7280; }
.seo-hint::before { content: "ℹ "; color: #1e5aa8; }
:root {
  --primary: #1e5aa8;
  --dark: #0f2a4a;
  --accent: #f5a623;
  --bg: #f4f6f9;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --radius: 10px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
a { color: var(--primary); text-decoration: none; }
img { max-width: 100%; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* 顶栏 */
.topbar { background: var(--dark); color: #fff; font-size: 13px; padding: 6px 0; }
.topbar .container { display: flex; justify-content: space-between; }
.navbar { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.navbar .container { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: bold; color: var(--dark); }
.logo .mark { width: 34px; height: 34px; background: var(--primary); color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.nav-links { display: flex; gap: 22px; }
.nav-links a { color: var(--text); font-size: 15px; padding: 6px 2px; border-bottom: 2px solid transparent; }
.nav-links a:hover, .nav-links a.active { color: var(--primary); border-bottom-color: var(--primary); }
.btn-admin { background: var(--primary); color: #fff !important; padding: 7px 14px; border-radius: 6px; font-size: 14px; }

/* Hero */
.hero { background: linear-gradient(120deg, var(--dark) 0%, var(--primary) 100%); color: #fff; padding: 70px 0; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 60px), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 60px); }
.hero h1 { font-size: 38px; margin-bottom: 14px; position: relative; }
.hero p { font-size: 17px; max-width: 640px; opacity: .92; position: relative; }
.hero .cta { margin-top: 26px; display: inline-block; background: var(--accent); color: #123; font-weight: bold; padding: 12px 30px; border-radius: 8px; position: relative; }

/* 统计条 */
.stats { background: #fff; border-bottom: 1px solid var(--border); }
.stats .container { display: flex; justify-content: space-around; padding: 22px 20px; flex-wrap: wrap; gap: 10px; }
.stat { text-align: center; }
.stat b { font-size: 26px; color: var(--primary); display: block; }
.stat span { font-size: 13px; color: var(--muted); }

/* 通知横幅 */
.strip { background: var(--accent); color: #3a2a00; text-align: center; padding: 12px 20px; font-weight: bold; }
.strip small { display: block; font-weight: normal; opacity: .8; }

/* 区块 */
.section { padding: 46px 0; }
.section-title { font-size: 24px; color: var(--dark); margin-bottom: 6px; position: relative; padding-left: 14px; }
.section-title::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 5px; background: var(--primary); border-radius: 3px; }
.section-sub { color: var(--muted); margin-bottom: 24px; padding-left: 14px; }

/* 分类 chips */
.cat-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.chip { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 8px 18px; cursor: pointer; font-size: 14px; transition: .15s; }
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* 搜索 */
.searchbar { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.searchbar input { flex: 1; min-width: 240px; padding: 11px 16px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; outline: none; }
.searchbar input:focus { border-color: var(--primary); }

/* 后台批量操作栏 */
/* 后台「一键批量设为推荐」栏（橙色系，与前台推荐角标同色） */
.bulk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; color: var(--dark); }
.bulk-bar .grow { flex: 1; min-width: 200px; color: #9a3412; }
.bulk-bar .grow b { color: #e8590c; font-size: 15px; }
.btn.warn { background: #e8590c; }
.btn.warn-ghost { background: #fff; color: #e8590c; border: 1px solid #e8590c; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* 后台「推荐产品」独立区块（与下方产品列表分开，不随筛选变化） */
.reco-panel { border-left: 4px solid #e8590c; }
.reco-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.reco-head h2 { font-size: 16px; color: var(--dark); }
.reco-head .reco-tip { flex: 1; min-width: 200px; font-size: 13px; color: #9a3412; }
.reco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.reco-item { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.reco-item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: #eef2f7; }
.reco-item .rb { padding: 8px 10px 10px; font-size: 13px; }
.reco-item .rb .nm { display: block; color: var(--dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reco-item .rb .md { display: block; color: #64748b; font-size: 12px; margin: 2px 0 6px; }
.reco-item .rb button { width: 100%; }
/* v57：推荐区块可折叠（默认收起）。
   原来 .reco-head 自带 margin-bottom:14px，收起后会留一条空白，故改为 0，
   由 .reco-body 展开时才产生间距。 */
.reco-head { cursor: pointer; margin-bottom: 0; user-select: none; }
.reco-head .fold-ico { display: inline-block; width: 15px; color: #9a3412; font-size: 12px; }
.reco-head:hover .fold-ico { color: #e8590c; }
.reco-body { margin-top: 14px; }
/* v58：推荐位拖拽排序 —— 卡片可拖动，左上角显示顺序号，拖动中半透明 */
.reco-item { position: relative; }
.reco-item[draggable="true"] { cursor: grab; }
.reco-item.dragging { opacity: .4; cursor: grabbing; }
.reco-item .drag-no { position: absolute; top: 6px; left: 6px; z-index: 2; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; background: rgba(232,89,12,.92); color: #fff; font-size: 12px; line-height: 20px; text-align: center; border-radius: 10px; font-weight: 500; }
.reco-item > a { display: block; }

/* v57：从已上传图片中选择 —— 图片选择弹窗 */
.pick-mask { position: fixed; inset: 0; z-index: 200; background: rgba(15,42,74,.45); display: flex; align-items: center; justify-content: center; padding: 24px; }
.pick-box { background: #fff; border-radius: 12px; width: min(980px, 100%); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.pick-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.pick-head b { font-size: 15px; color: var(--dark); }
.pick-head input { flex: 1; min-width: 140px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; }
.pick-body { flex: 1; overflow: auto; padding: 14px 18px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
.pick-cell { position: relative; aspect-ratio: 1/1; border: 2px solid var(--border); border-radius: 8px; overflow: hidden; cursor: pointer; background: #fff; }
.pick-cell img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pick-cell:hover { border-color: #94b3d8; }
.pick-cell.on { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(30,90,168,.22); }
.pick-cell.on::after { content: "✓"; position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; background: var(--primary); color: #fff; border-radius: 50%; font-size: 12px; line-height: 20px; text-align: center; }
.pick-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--border); }
.pick-foot .sp { flex: 1; min-width: 10px; }
.pick-empty { text-align: center; color: var(--muted); padding: 46px 0; font-size: 14px; }

.batch-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #eef4ff; border: 1px solid #c7d9f8; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; color: var(--dark); }
.batch-bar b { color: var(--primary); font-size: 16px; }
.batch-bar select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: #fff; outline: none; }
.table td input[type="checkbox"], .table th input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); }
.btn { background: var(--primary); color: #fff; border: none; padding: 11px 26px; border-radius: 8px; font-size: 15px; cursor: pointer; }
.btn:hover { opacity: .9; }
.btn.ghost { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
.btn.danger { background: #d93025; }
.btn.sm { padding: 6px 12px; font-size: 13px; }

/* 产品网格 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: .18s; display: block; color: var(--text); }
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(15,42,74,.12); border-color: var(--primary); }
.card .thumb { position: relative; aspect-ratio: 1/1; background: #eef2f7; overflow: hidden; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 「首页推荐产品」角标：后台勾选后，该产品在产品中心排到最前并显示此标记 */
.card .feat-flag { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 12px; line-height: 1; color: #fff; background: #e8590c; border-radius: 4px; padding: 4px 8px; letter-spacing: .5px; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.card .body { padding: 14px 16px 16px; }
.card .tag { display: inline-block; font-size: 12px; color: var(--primary); background: #e8f0fb; border-radius: 4px; padding: 2px 8px; margin-bottom: 8px; }
.card h3 { font-size: 16px; color: var(--dark); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .model { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.card .summary { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 分页 */
.pager { display: flex; justify-content: center; gap: 8px; margin-top: 30px; flex-wrap: wrap; }
.pager button { border: 1px solid var(--border); background: #fff; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.pager button.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.pager button:disabled { opacity: .4; cursor: default; }

/* 关于 / 联系 */
.about-box { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.contact-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.contact-item b { color: var(--dark); display: block; margin-bottom: 6px; }

/* 产品详情 */
/* v55：补下边距。全局 reset（* { margin:0 }）让这里原本是 0 间距，
   详情区与紧随其后的「技术参数」标题完全贴死，手机端还会被按钮压住。 */
.detail-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 30px; margin-bottom: 26px; }
@media (max-width: 860px) { .detail-wrap { grid-template-columns: 1fr; } }
.gallery-main { aspect-ratio: 1/1; background: #eef2f7; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.gallery-thumbs img { width: 62px; height: 62px; object-fit: cover; border-radius: 6px; border: 2px solid transparent; cursor: pointer; background: #eef2f7; }
.gallery-thumbs img.on { border-color: var(--primary); }
.detail-info h1 { font-size: 26px; color: var(--dark); margin-bottom: 8px; }
.detail-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* 详情页「询价 / 采购咨询」：鼠标移上去（或键盘聚焦）弹出微信二维码。
   二维码复用后台「联系我们 → 微信二维码」，未上传时给占位提示而不是空白弹层。
   锚点容器必须 position:relative，否则弹层会相对整个 .detail-actions 定位。 */
/* v55：改为 inline-flex。.btn 是行内元素，只有水平 padding 撑开宽度，
   垂直 padding 不撑开父容器 —— 原来 .ask-wrap 仅有 27px 行盒高，
   而按钮视觉高 42px，上下各溢出约 7px，直接压到下方的「技术参数」标题上。
   改成 inline-flex 后 wrap 高度 = 按钮高度，父容器高度随之正确。 */
.ask-wrap { position: relative; display: inline-flex; }
.ask-qr { position: absolute; left: 0; bottom: calc(100% + 14px); z-index: 30; width: 210px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(15,42,74,.2); padding: 14px 16px; text-align: center; display: none; }
.ask-wrap:hover .ask-qr, .ask-wrap:focus-within .ask-qr { display: block; }
/* 弹层底边离按钮顶边 14px，这段空隙不属于 .ask-wrap 的盒子（wrap 高度 = 按钮高度），
   鼠标从按钮往上移向弹层时，一穿过空隙 :hover 立即失效 → 弹层闪退，
   桌面端因此永远够不到弹层里的「复制微信号」。
   用一块透明伪元素把这段空隙纳入 hover 命中区：视觉零变化，只补命中范围。
   只对真正支持 hover 的精密指针设备生效，触屏（pointer: coarse）不生成该元素。 */
@media (hover: hover) and (pointer: fine) {
  .ask-wrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; }
}
/* 复制成功 2 秒后自动收起（由 front.js 给 .ask-wrap 加 .dismiss）。
   桌面端弹层是 :hover / :focus-within 驱动的，指针还停在 hover 区时靠失焦收不起来，
   所以用 !important 强制屏蔽 display；指针重新进出 wrap 时由 JS 解锁，下次悬停照常弹出。
   触屏端的 .open 同样被这条压住。 */
.ask-wrap.dismiss .ask-qr { display: none !important; }
@media (pointer: coarse) {
  /* 与右侧悬浮窗同一问题：tap 后 :hover 会卡住，改为 JS 的 .open 类控制 */
  .ask-wrap:hover .ask-qr, .ask-wrap:focus-within .ask-qr { display: none; }
  .ask-wrap.open .ask-qr { display: block; }
}
.ask-qr::after { content: ""; position: absolute; left: 34px; bottom: -6px; width: 10px; height: 10px; transform: rotate(45deg); background: #fff; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.ask-qr .qr-t { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--dark); }
.ask-qr img { width: 168px; height: 168px; object-fit: contain; border-radius: 6px; background: #f7fafc; display: block; margin: 0 auto 8px; }
.ask-qr .qr-holder { width: 168px; height: 168px; margin-bottom: 8px; }
.ask-qr p { margin: 0; color: var(--muted); font-size: 13px; }
/* 移动端关键段：手机扫不了自己屏幕上的二维码，复制微信号才是走得通的路径 */
.ask-qr .qr-wxid { margin: 9px 0 0; padding-top: 8px; border-top: 1px dashed var(--border); color: var(--text); font-size: 12px; }
.ask-qr .qr-wxid b { color: var(--dark); font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3px; user-select: all; -webkit-user-select: all; word-break: break-all; }
.ask-qr button.qr-copy { width: 100%; margin-top: 7px; border: 0; cursor: pointer; font-family: inherit; }
.ask-qr button.qr-copy:active { opacity: .82; }
.ask-jump { display: block; margin-top: 9px; color: var(--primary); font-size: 12px; text-decoration: none; }
.ask-jump:hover { text-decoration: underline; }
@media (max-width: 640px) {
  /* 窄屏下按钮靠页面左侧（约 x=20），居中弹层会溢出屏幕左边，改为左对齐；
     宽度按视口收敛，保证 320px 老机型也不横向溢出。 */
  .ask-qr { left: 0; transform: none; width: min(260px, calc(100vw - 40px)); }
}
/* 向上弹出时若顶到视口上沿，JS 会给 .flip，改为向下展开，避免弹层被截掉 */
.ask-qr.flip { top: calc(100% + 14px); bottom: auto; }
.ask-qr.flip::after { top: -6px; bottom: auto; transform: rotate(225deg); }
.phone-link { font-size: 17px; font-weight: 600; color: var(--primary); text-decoration: none; white-space: nowrap; }
.phone-link:hover { text-decoration: underline; }
.detail-info .model { color: var(--muted); margin-bottom: 14px; }
.detail-info .summary { background: #eef4fc; border-left: 4px solid var(--primary); padding: 12px 16px; border-radius: 0 8px 8px 0; margin-bottom: 18px; font-size: 14px; }
.desc { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; margin: 34px 0; }
.desc h3 { color: var(--dark); margin: 18px 0 10px; font-size: 18px; }
.desc p, .desc li { color: #374151; }
.desc ul, .desc ol { padding-left: 24px; margin: 8px 0; }
.desc img, .desc video, .desc iframe { max-width: 100%; }
/* 产品描述里的表格是历史录入内容，绝大多数带内联 style="width:784px"
   （线上 4189 条产品里 3656 条如此）。内联优先级高于普通 CSS，必须 !important 才压得住。
   不加这层兜底时，窄屏下整页会被撑到 835px——手机上整页横向漂移，
   position:fixed 的浮层（按 innerWidth 定位）也会连带跑出屏幕。
   只在窄屏生效，桌面端保持原有的 784px 观感不变；
   选择器用后代（.desc table）而非子代，因为部分描述的表格外面还套了一层无 class 的 <div>。 */
@media (max-width: 900px) {
  .desc table { display: block !important; width: 100% !important; max-width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .desc table th, .desc table td { padding: 8px 12px; border: 1px solid var(--border); font-size: 14px; }
}

/* ---- FAQ 文章列表 / 详情 ---- */
.art-list { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.art-item { display: flex; gap: 18px; align-items: stretch; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.art-item:hover { box-shadow: 0 8px 22px rgba(15,42,74,.12); transform: translateY(-2px); }
.art-item .cover { width: 150px; height: 100px; object-fit: cover; border-radius: 8px; flex: none; background: #eef2f7; }
.art-item .art-body { flex: 1; min-width: 0; }
.art-item h3 { margin: 0 0 6px; font-size: 17px; color: var(--dark); }
.art-item:hover h3 { color: var(--primary); }
.art-summary { color: var(--muted); font-size: 13.5px; line-height: 1.7; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.art-meta { font-size: 12px; color: var(--muted); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.art-meta .tag { font-size: 11px; color: var(--primary); background: #e8f0fb; border-radius: 4px; padding: 1px 8px; }
.article-head { padding: 26px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 26px; }
.article-head h1 { font-size: 26px; color: var(--dark); margin: 10px 0 12px; line-height: 1.5; }
.article-body { line-height: 1.95; color: #2d3748; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 34px; }
.article-body img { max-width: 100%; height: auto; border-radius: 8px; }
.article-body h2 { font-size: 20px; margin: 26px 0 12px; color: var(--dark); }
.article-body h3 { font-size: 17px; margin: 20px 0 8px; color: var(--dark); }
.article-body p { margin: 10px 0; }
.article-body ul, .article-body ol { padding-left: 24px; margin: 10px 0; }
.article-body a { color: var(--primary); }
@media (max-width: 640px) {
  .art-item { flex-direction: column; }
  .art-item .cover { width: 100%; height: 160px; }
  .article-body { padding: 20px 16px; }
}
.spec-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 34px; }
.spec-table th, .spec-table td { padding: 12px 18px; border-bottom: 1px solid var(--border); font-size: 14px; text-align: left; }
.spec-table th { background: #f0f4f9; color: var(--dark); width: 200px; }
/* 窄屏下规格表改单列堆叠：原来 th 固定 200px + 内容长文本会把整页撑到 800px 以上，
   手机上整页横向漂移，连带 position:fixed 的弹层（按 innerWidth 定位）也会跑出屏幕。 */
@media (max-width: 640px) {
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td { display: block; width: auto; }
  .spec-table thead { display: none; }
  .spec-table tr { border-bottom: 1px solid var(--border); }
  .spec-table tr:last-child { border-bottom: 0; }
  .spec-table th { background: #f0f4f9; padding: 9px 14px; font-size: 13px; }
  .spec-table td { border-bottom: 0; padding: 10px 14px 12px; font-size: 14px; word-break: break-word; overflow-wrap: anywhere; }
}

/* 页脚 */
footer { background: var(--dark); color: #cbd5e1; padding: 34px 0; margin-top: 50px; font-size: 14px; }
footer a { color: #9fc1e8; }
/* 页脚左侧对齐：版权行与备案行都从容器左边界起排（不居中），
   两行的左起点必须一致，否则看起来「跑到中间去了」 */
#footerLegal { text-align: left; }
#footerLegal #footerText { margin: 0; }

/* ---------------- 后台 ---------------- */
.admin-body { background: #eef1f5; }
.login-mask { position: fixed; inset: 0; background: rgba(15,42,74,.85); display: flex; align-items: center; justify-content: center; z-index: 999; }
.login-box { background: #fff; border-radius: 12px; padding: 36px 40px; width: 360px; }
.login-box h2 { color: var(--dark); margin-bottom: 20px; text-align: center; }
.login-box input { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 14px; font-size: 15px; outline: none; }
.login-box .hint { font-size: 12px; color: var(--muted); text-align: center; margin-top: 12px; }
.admin-layout { display: flex; min-height: 100vh; }
.sidebar { width: 210px; background: var(--dark); color: #d7e2ef; padding: 20px 0; flex-shrink: 0; }
.sidebar .brand { font-size: 17px; font-weight: bold; color: #fff; padding: 0 20px 18px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 12px; }
.sidebar a { display: block; padding: 12px 20px; color: #c3d3e6; font-size: 15px; cursor: pointer; border-left: 3px solid transparent; }
.sidebar a.on { background: rgba(255,255,255,.08); color: #fff; border-left-color: var(--accent); }
.admin-main { flex: 1; padding: 26px 30px; min-width: 0; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.admin-topbar h1 { font-size: 21px; color: var(--dark); }
.panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.table th { background: #f0f4f9; color: var(--dark); white-space: nowrap; }
.table td { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input[type=text], .field input[type=number], .field select, .field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; outline: none; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--primary); }
.field textarea { resize: vertical; }
.checkbox { display: flex; align-items: center; gap: 8px; padding-top: 26px; }
.img-uploader { display: flex; flex-wrap: wrap; gap: 12px; }
.img-item { position: relative; width: 100px; height: 100px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: #eef2f7; }
.img-item img { width: 100%; height: 100%; object-fit: cover; }
.img-item .rm { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.55); color: #fff; border: none; border-radius: 4px; width: 22px; height: 22px; cursor: pointer; font-size: 12px; }
/* v57：产品图列表的主图标记与排序（后台编辑用）。
   第一张 = 主图（前台列表/卡片取 images[0]），加蓝色描边与角标；
   其余图片 hover 时左上角出现「← 前移」「★ 设为主图」。 */
.img-item.is-main { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(30,90,168,.22); }
.img-item .main-badge { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(30,90,168,.9); color: #fff; font-size: 11px; text-align: center; padding: 2px 0; letter-spacing: .5px; }
.img-item .ops { position: absolute; top: 4px; left: 4px; display: flex; gap: 3px; opacity: 0; transition: opacity .15s; }
.img-item:hover .ops { opacity: 1; }
.img-item .ops button { width: 22px; height: 22px; padding: 0; border: none; border-radius: 4px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; }
.img-item .ops button:hover { background: var(--primary); }
.add-img { width: 120px; height: 90px; border: 2px dashed #b6c3d4; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; font-size: 26px; background: #f7fafc; }
.add-img:hover { border-color: var(--primary); color: var(--primary); }
.wm-note { font-size: 12px; color: #0a7d43; background: #e8f7ef; padding: 6px 10px; border-radius: 6px; display: inline-block; margin-top: 8px; }

/* 富文本编辑器 */
.rte { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.rte-toolbar { display: flex; flex-wrap: wrap; gap: 4px; background: #f0f4f9; padding: 8px; border-bottom: 1px solid var(--border); }
.rte-toolbar button { border: 1px solid transparent; background: transparent; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.rte-toolbar button:hover { background: #dde6f0; border-color: #c4d2e3; }
.rte-editor { min-height: 320px; padding: 16px; outline: none; font-size: 15px; background: #fff; }
.rte-editor:focus { background: #fffdf5; }
.rte-editor img { max-width: 100%; border-radius: 6px; }
.rte-editor h3 { margin: 14px 0 8px; }

/* 可视化编辑 */
.vis-wrap { background: #fff; border-radius: var(--radius); border: 2px dashed #b6c3d4; padding: 6px; }
.vis-wrap [contenteditable="true"] { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 4px; cursor: text; min-height: 1em; }
.vis-hint { font-size: 13px; color: var(--muted); background: #fff8e6; border: 1px solid #f2dfae; padding: 8px 12px; border-radius: 8px; margin-bottom: 12px; }
.color-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.color-row label { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.color-row input[type=color] { width: 40px; height: 30px; border: 1px solid var(--border); border-radius: 6px; padding: 2px; cursor: pointer; }
.toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: #123c1e; color: #b7f5c8; padding: 10px 24px; border-radius: 8px; z-index: 1000; font-size: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.toast.err { background: #4a1212; color: #ffc4c4; }
.muted { color: var(--muted); font-size: 13px; }
.row-actions { display: flex; gap: 8px; }
/* 分类管理：二级分类行 */
.cat-sub-tr { background: #f8fafc; }
.cat-sub-tr td { padding-top: 8px; padding-bottom: 8px; }
.cat-sub-branch { color: #9aa7b8; font-family: monospace; margin-right: 2px; }
.cat-sub-tr .btn.sm { padding: 5px 9px; font-size: 12px; }
/* 前台二级分类标签 */
.sub-chips { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.cat-sub-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cat-sub-row .sub-name { font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; padding: 3px 0; }
.cat-sub-row .sub-name:hover { color: var(--primary); }
.cat-sub-row .sub-name.on { color: var(--primary); }
.sub-chips .chip { font-size: 12.5px; padding: 4px 12px; }
.sub-chip-label { font-size: 13px; color: var(--muted); margin-right: 4px; align-self: center; }
/* 产品卡片分类路径 */
.card-path { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* SEO/GEO: 面包屑、AI 摘要、FAQ */
.crumbs { margin-top: 18px; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--primary); }
.ai-box { background: #f6f9fd; border: 1px solid #d8e4f2; border-left: 4px solid var(--primary); border-radius: 8px; padding: 18px 22px; margin: 18px 0; font-size: 14px; }
.ai-box h2 { font-size: 16px; color: var(--dark); margin-bottom: 10px; }
.ai-box p { margin-bottom: 8px; color: #374151; }
.ai-box b { color: var(--dark); }
/* v56：「主要技术参数」改为 <details> 折叠。
   服务端直出时带 open（展开态）—— 目的是让**不执行 JS 的爬虫与 AI 引擎**能读到完整的
   参数文字（这段本就是给 AI 摘引用的，不能用 display:none 之类的隐藏手段）；
   窄屏由 product.html 的脚本移除 open，手机端默认收起，首屏更清爽。
   折叠内容 Google 明确会正常索引，不存在隐藏文本风险。 */
.ai-specs { margin-bottom: 8px; }
.ai-specs > summary {
  cursor: pointer; list-style: none; user-select: none;
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--dark); font-weight: 500;
}
.ai-specs > summary::-webkit-details-marker { display: none; }
.ai-specs > summary::before {
  content: ""; flex: none; width: 0; height: 0;
  border-left: 5px solid var(--muted);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
.ai-specs[open] > summary::before { transform: rotate(90deg); }
.ai-specs > summary:hover { color: var(--primary); }
.ai-specs > summary:hover::before { border-left-color: var(--primary); }
.ai-specs > p { margin-top: 9px; margin-bottom: 0; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; padding: 0 18px; }
.faq-item summary { cursor: pointer; font-weight: bold; color: var(--dark); padding: 14px 0; font-size: 15px; }
.faq-item[open] summary { border-bottom: 1px solid var(--border); }
.faq-item p { padding: 12px 0; color: #374151; font-size: 14px; }
.faq-more { display: block; margin-top: 8px; text-align: center; padding: 12px 18px; border: 1px dashed var(--primary); border-radius: 8px; color: var(--primary); font-size: 14px; cursor: pointer; text-decoration: none; transition: .15s; }
.faq-more:hover { background: var(--primary); color: #fff; }

/* 右侧悬浮联系窗 */
.float-bar { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.float-btn { width: 48px; height: 48px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 14px rgba(15,42,74,.14); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; font-size: 20px; transition: .15s; user-select: none; }
.float-btn:hover { background: var(--primary); border-color: var(--primary); }
.float-btn:hover { color: #fff; }
.float-pop { position: absolute; right: 58px; top: 50%; transform: translateY(-50%); background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 26px rgba(15,42,74,.18); padding: 14px 16px; width: 190px; display: none; text-align: center; color: var(--text); font-size: 13px; }
.float-pop::after { content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 10px; height: 10px; background: #fff; border-top: 1px solid var(--border); border-right: 1px solid var(--border); }
/* 弹层与按钮之间有结构性空隙（.float-pop 的 right:58px − 按钮宽：桌面 48px → 10px，
   ≤640px 断点按钮缩到 40px → 18px）。空隙不属于任何一方的盒子，鼠标穿过时 :hover 失效
   → 弹层闪退，桌面端够不到「复制微信号」。把空隙并入弹层自己的命中区：横向 -22px / 26px
   铺满两种按钮尺寸，纵向取弹层满高。挂弹层而非按钮——按钮之间只隔 8px，挂按钮会盖住
   相邻按钮的 hover 区，鼠标一动就被抢走，反而更糟。 */
@media (hover: hover) and (pointer: fine) {
  .float-pop::before { content: ""; position: absolute; right: -22px; top: 0; bottom: 0; width: 26px; }
}
.float-btn:hover .float-pop { display: block; }
.float-qr img { width: 160px; height: 160px; object-fit: contain; border-radius: 6px; background: #f7fafc; display: block; margin: 0 auto 8px; }
.float-qr p { margin: 0; color: var(--muted); }
.qr-holder { width: 160px; height: 160px; margin: 0 auto 8px; border: 2px dashed #b6c3d4; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; background: #f7fafc; }
.pop-t { color: var(--muted); font-size: 12px; margin: 0 0 4px; }
.pop-v { color: var(--dark); font-weight: bold; font-size: 16px; margin: 0 0 8px; }
.pop-link { display: inline-block; background: var(--primary); color: #fff !important; border-radius: 6px; padding: 5px 14px; font-size: 13px; }
/* 微信号 + 一键复制。手机端扫不了自己屏幕上的二维码（截图→相册→扫一扫要五步），
   复制微信号去搜索添加才是移动端真正走得通的路径，所以这一段是移动端的关键。 */
.pop-wxid { margin: 8px 0 0 !important; padding-top: 8px; border-top: 1px dashed var(--border); color: var(--text) !important; font-size: 12px; }
.pop-wxid b { color: var(--dark); font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3px; user-select: all; -webkit-user-select: all; }
button.pop-link { width: 100%; margin-top: 6px; border: 0; cursor: pointer; font-family: inherit; }
button.pop-link:active { opacity: .82; }
/* 触屏设备：:hover 会在 tap 之后卡住不放，导致再点同一个按钮关不掉浮层。
   这里在粗指针设备上关掉 hover 显示，改由 JS 的 .open 类控制开关；桌面端不受影响。 */
@media (pointer: coarse) {
  .float-btn:hover .float-pop { display: none; }
  .float-btn.open .float-pop { display: block; }
}
@media (max-width: 640px) { .float-bar { right: 8px; } .float-btn { width: 40px; height: 40px; font-size: 16px; } }

/* 关于区图文两栏 */
.about-flex { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; align-items: stretch; margin-top: 20px; }
.about-flex .about-box { margin: 0; height: 100%; }
.about-img img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); }
@media (max-width: 800px) { .about-flex { grid-template-columns: 1fr; } }

/* 可视化编辑器 */
.vis-toolbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 16px; }
.vis-toolbar label { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.vis-toolbar input[type=color] { width: 36px; height: 28px; border: 1px solid var(--border); border-radius: 6px; padding: 2px; cursor: pointer; }
.vis-toolbar input[type=range] { width: 120px; }
.vis-toolbar .sep { width: 1px; height: 24px; background: var(--border); }
.vis-toggle { display: flex; gap: 10px; flex-wrap: wrap; }
.vis-toggle label { background: #f0f4f9; border: 1px solid var(--border); border-radius: 16px; padding: 5px 12px; cursor: pointer; }
.vis-toggle label.off { opacity: .45; text-decoration: line-through; }
.img-slot { position: relative; min-height: 120px; border: 2px dashed #b6c3d4; border-radius: var(--radius); background: #f7fafc center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; cursor: pointer; overflow: hidden; }
.img-slot:hover { border-color: var(--primary); color: var(--primary); }
.img-slot.has-img { border-style: solid; color: transparent; }
.img-slot.has-img::after { content: "📷 更换图片"; position: absolute; bottom: 0; left: 0; right: 0; background: rgba(15,42,74,.55); color: #fff; text-align: center; padding: 4px 0; font-size: 12px; opacity: 0; transition: .15s; }
/* ── 正文视频（第三方嵌入 + 本地上传）──
   16:9 自适应容器，避免不同主题下播放器被拉变形 */
.video-wrap { position: relative; width: 100%; max-width: 100%; padding-top: 56.25%; margin: 18px 0; border-radius: var(--radius); overflow: hidden; background: #0b1220; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.video-local { margin: 18px 0; text-align: center; }
.video-local video,
.article-body video,
.desc video { max-width: 100%; width: 100%; height: auto; border-radius: var(--radius); background: #0b1220; display: block; }
/* 编辑器里的 iframe 不接受鼠标事件：否则点击播放会抢走光标、无法继续排版 */
.rte-editor .video-wrap iframe,
.rte-editor video { pointer-events: none; }
/* 编辑器里给视频一个可见标记，避免用户以为没插进去 */
.rte-editor .video-wrap::after,
.rte-editor .video-local::after {
  content: "🎬 视频（保存后在前台播放）";
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(15, 42, 74, .72); color: #fff; font-size: 12px; padding: 5px 10px; text-align: center;
}
.rte-editor .video-local { position: relative; }

.img-slot.has-img:hover::after { opacity: 1; }

/* v45：页脚备案信息同行排列（ICP 在左，公安联网备案在其右侧）。
   窄屏自动换行，避免两个备案号挤出视口。 */
.beian-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 24px; margin-top: 8px; }
.beian-row p { margin: 0; font-size: 13px; line-height: 1.6; }
.beian-row a { color: #9fc1e8; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; }
.beian-row a:hover { color: #fff; text-decoration: underline; }
/* 公安徽标：官方 20x20 图标，本地托管（不依赖 beian.gov.cn 的静态资源） */
.beian-row .gongan-ico { width: 16px; height: 16px; margin-right: 5px; flex: 0 0 auto; }

/* ============================================================
   v55 手机端适配（三处既有问题，纯显示层，不改动任何数据）
   ============================================================ */

/* ① 长 URL / 长型号折行
   连续 ASCII 串（官方资料链接、超长型号名）在 word-break:normal 下不会断行，
   会把段落撑宽、进而把整页撑出横向滚动条（实测最严重 238px）；
   页面一旦被撑宽，position:fixed 的右侧悬浮按钮（按 innerWidth 定位）会一并跑出屏幕。
   overflow-wrap 可继承，设在 body 上即可覆盖全站文本；只在窄屏启用，桌面端观感不变。 */
@media (max-width: 900px) {
  body { overflow-wrap: break-word; }
}

/* ② 详情区动作行（询价按钮 + 电话）
   窄屏下右侧留出空间避让悬浮按钮，否则电话号码末尾会被悬浮按钮盖住（实测 13px）；
   并允许换行时保留行距。 */
@media (max-width: 640px) {
  .detail-actions { padding-right: 34px; row-gap: 8px; }
}

/* ③ 顶部导航窄屏适配
   .navbar .container 原本是不换行的 flex，logo 与多个导航项被硬挤在一行，
   文字被迫逐字竖排（观感异常）。窄屏改为 logo 独占一行、导航项另起一行并可横向滚动；
   桌面端不命中该媒体查询，行为零变化。 */
@media (max-width: 640px) {
  .navbar .container { height: auto; min-height: 56px; flex-wrap: wrap; row-gap: 4px; padding-top: 8px; padding-bottom: 8px; }
  .logo { font-size: 17px; gap: 8px; min-width: 0; }
  .logo .mark { width: 28px; height: 28px; font-size: 15px; flex: none; }
  .nav-links { width: 100%; gap: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nav-links a { font-size: 14px; white-space: nowrap; flex: none; }
}