/* 由 product-monitor.html 内联 <style> 抽取（P2 改造） */
/* 本页专属：核心产品卡片网格，强制响应式 */

.svc-grid{display:grid;gap:22px;grid-template-columns:repeat(3,1fr);align-items:stretch}

.svc-grid .svc-card{height:100%;display:flex;flex-direction:column}

.svc-grid .svc-card h3{font-size:17px}

.svc-grid .svc-card p{flex:1;font-size:13.5px;line-height:1.7}

@media (max-width:900px){

  .svc-grid{grid-template-columns:repeat(2,1fr);gap:18px}

}

@media (max-width:600px){

  .svc-grid{grid-template-columns:1fr;gap:16px}

  .svc-grid .svc-card h3{font-size:16px;margin:14px 16px 6px}

  .svc-grid .svc-card p{margin:0 16px 16px;font-size:13px}

}

/* 核心产品系列：4列×2行，图+文卡片 */
.prod-grid{display:grid;gap:20px;grid-template-columns:repeat(4,1fr)}
.prod-item{background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;text-align:left;box-shadow:0 2px 8px var(--c-blue-800-a06);transition:transform .25s,box-shadow .25s}
.prod-item:hover{box-shadow:0 10px 24px var(--c-blue-500-a16);transform:translateY(-4px)}
.prod-media{position:relative;width:100%;height:150px;overflow:hidden;background:var(--table-head)}
.prod-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.prod-item:hover .prod-media img{transform:scale(1.05)}
.prod-ico{position:absolute;left:12px;bottom:12px;width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--blue-mid));display:flex;align-items:center;justify-content:center;color:var(--bg);box-shadow:0 2px 8px rgba(0,80,160,.35)}
.prod-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod-item h4{font-size:15.5px;font-weight:700;color:var(--ink-deep);margin:0;line-height:1.4}
.prod-item p{font-size:12.5px;line-height:1.7;color:var(--ink-soft);margin:0;flex:1}
@media (max-width:900px){.prod-grid{grid-template-columns:repeat(2,1fr);gap:16px}.prod-media{height:140px}}
@media (max-width:600px){.prod-grid{grid-template-columns:1fr;gap:14px}.prod-media{height:180px}.prod-item h4{font-size:16px}}

/* 数据表格横向滚动兜底 */

.data-table{min-width:600px}

/* 产品优势 4 卡：桌面 4 列 / 平板 2 列 / 手机 1 列 */

.adv-grid{display:grid;gap:20px;grid-template-columns:repeat(4,1fr);align-items:stretch}

.adv-grid .adv-card{height:100%;display:flex;flex-direction:column}

.adv-grid .adv-card h3{font-size:16px}

.adv-grid .adv-card p{flex:1;font-size:13px;line-height:1.75}

@media (max-width:900px){

  .adv-grid{grid-template-columns:repeat(2,1fr);gap:16px}

}

@media (max-width:600px){

  .adv-grid{grid-template-columns:1fr;gap:14px}

  .adv-grid .adv-card h3{font-size:15px;margin:12px 16px 6px}

  .adv-grid .adv-card p{margin:0 16px 16px;font-size:13px}

}

/* 相关推荐 3 卡：桌面 3 列 / 平板 2 列 / 手机 1 列 */

.tool-grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr);align-items:stretch}

.tool-grid .adv-card{height:100%;display:flex;flex-direction:column}

.tool-grid .adv-card h3{font-size:16px}

.tool-grid .adv-card p{flex:1;font-size:13px;line-height:1.75}

@media (max-width:900px){

  .tool-grid{grid-template-columns:repeat(2,1fr);gap:16px}

}

@media (max-width:600px){

  .tool-grid{grid-template-columns:1fr;gap:14px}

  .tool-grid .adv-card h3{font-size:15px;margin:14px 16px 6px}

  .tool-grid .adv-card p{margin:0 16px 16px;font-size:13px}

}



/* 内容区紧凑化 */

.page-hero{height:380px !important}

.section{padding:32px 0}

.section.alt{padding:32px 0}

.section-head{display:none}

.sd-title h3{font-size:20px}

.sd-title{margin-bottom:20px}

.sv-main > .section:first-of-type{padding-top:0}

/* ==========================================================
   全终端防溢出加固：手机(≤480/≤380) / 平板(≤900) / PC
   目标：任何宽度下内容不超出屏幕、无横向滚动条
   ========================================================== */
html,body{max-width:100vw;overflow-x:hidden}
img,video{max-width:100%;height:auto}
/* 面包屑允许换行，避免三段文字撑破窄屏 */
.ph-breadcrumb .breadcrumb{flex-wrap:wrap;row-gap:6px}
/* 长英文/标准号/URL 断词兜底 */
.prose,.prod-item p,.adv-card p,.tool-grid p,.sd-title span{
  overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;
}
/* 表格在 sv-main 内正确收缩，iOS 平滑滚动 */
.sv-main{min-width:0;overflow:hidden}
.table-wrap{-webkit-overflow-scrolling:touch;max-width:100%}
.prod-spec-table img{display:block}
.table-swipe-hint{display:none;text-align:center;font-size:12px;color:var(--c-blue-400-3);padding:8px 0 10px;letter-spacing:.5px}
@media (max-width:600px){.table-swipe-hint{display:block}}

/* 平板 ≤1024：容器 padding 收紧 */
@media (max-width:1024px){
  .container{padding:0 20px}
}
/* 平板竖屏 ≤992：Hero 略压、标题略缩 */
@media (max-width:992px){
  .container{padding:0 18px}
  .page-hero{height:340px !important}
  .ph-content{top:42%}
  .ph-lead{padding:0 16px}
  .sd-title h3{font-size:19px}
  /* 关键修复：.sv-wrap 全局是 align-items:flex-start，column 方向下 sv-main 不会拉伸，
     会被内部 min-width:560px 的表格撑破视口。这里强制占满容器宽，表格靠 .table-wrap 横滚 */
  .sv-wrap{align-items:stretch}
  .sv-main{width:100%;max-width:100%;flex-basis:auto}
}
/* 手机 ≤640：Hero、正文、表格、chips 全面收紧 */
@media (max-width:640px){
  .container{padding:0 14px}
  .section{padding:24px 0 !important}
  .section.alt{padding:24px 0 }
  .page-hero{height:300px !important}
  .ph-content{top:42%}
  .ph-tag{font-size:12px;padding:6px 14px;letter-spacing:1px}
  .ph-title{font-size:clamp(24px,7.5vw,32px);margin:14px 0 10px;gap:4px}
  .ph-content .ph-lead{font-size:14px;line-height:1.7;padding:0 10px}
  .sd-title h3{font-size:18px}
  .sd-title{margin-bottom:14px}
  .prose{font-size:14.5px;line-height:1.8}
  .prod-body{padding:12px 14px 14px}
  .prod-item h4{font-size:15px}
  .prod-item p{font-size:12.5px;line-height:1.65}
  .data-table{font-size:13px;min-width:480px}
  .data-table th,.data-table td{padding:10px 8px }
  .chips{gap:8px}
  .chip{font-size:12px;padding:5px 12px}
  .cc-hotline a{font-size:20px !important;letter-spacing:0}
}
/* 超小屏 ≤380：iPhone SE / 老安卓 */
@media (max-width:380px){
  .container{padding:0 12px}
  .page-hero{height:300px !important}
  .ph-title{font-size:22px }
  .ph-tag{font-size:11px;padding:5px 12px}
  .prod-media{height:160px}
  .prod-item h4{font-size:14.5px}
  .prod-item p{font-size:12px}
}
/* 隐私弹窗不超出屏幕 */
.modal-box{max-width:calc(100vw - 32px);width:92%;margin:16px}

/* ===== 监测参数一览表（深蓝 banner + 分组配色） ===== */
.dim-table-wrap{overflow-x:auto;margin:18px 0 22px;border-radius:10px;border:1.5px solid var(--c-blue-400);box-shadow:0 2px 8px var(--c-blue-800-a06);width:100%}
.dim-table{width:100% ;display:table !important;table-layout:fixed;border-collapse:collapse;font-size:14px;line-height:1.6}
.dim-table th{background:var(--blue-ink);color:var(--bg);font-weight:700;padding:11px 14px;text-align:center;border:1.5px solid var(--blue-ink);font-size:14px}
.dim-table td{padding:10px 14px;border:1.5px solid var(--c-blue-400);color:var(--c-blue-800);vertical-align:middle;text-align:center}
.dim-table tbody tr:nth-child(odd){background:var(--bg-alt)}
.dim-table tbody tr:nth-child(even){background:var(--c-blue-100-2)}
.dim-list{margin:10px 0 18px;padding-left:0;list-style:none}
.dim-list li{padding:6px 0 6px 22px;position:relative;line-height:1.75}
.dim-list li::before{content:'';position:absolute;left:5px;top:14px;width:6px;height:6px;border-radius:50%;background:var(--blue)}

.spec-banner{
  background:linear-gradient(135deg,var(--blue-ink) 0%,var(--blue-mid) 100%);
  color:var(--bg);border-radius:12px;padding:26px 28px;margin-bottom:18px;
  box-shadow:0 4px 16px var(--c-blue-700-a18);
}
.spec-banner h2{font-size:22px;font-weight:800;letter-spacing:1px;margin:0 0 8px;text-align:center;line-height:1.35}
.spec-banner p{font-size:13.5px;color:var(--c-line-50-a88);margin:0;text-align:center;line-height:1.7}
.spec-table-wrap{border-radius:12px;overflow:hidden;border:1px solid #d8e2ee;box-shadow:0 2px 10px var(--c-blue-800-a06)}
.spec-table{width:100%;min-width:960px;border-collapse:collapse;font-size:13.5px;line-height:1.6}
.spec-table thead th{
  background:var(--blue-ink);color:var(--bg);font-weight:700;padding:13px 10px;text-align:center;
  border:2px solid var(--blue-ink);letter-spacing:.5px;font-size:14px;
}
.spec-table td{
  padding:12px 12px;border:1.5px solid var(--c-blue-400);vertical-align:middle;text-align:center;color:var(--c-blue-800);
}
.spec-table .seq{font-weight:800;font-size:16px;color:var(--blue-ink);background:rgba(26,68,128,.06)}
.spec-table .dev{font-weight:700;color:var(--ink-deep);text-align:center}
/* 行分组配色 */
.spec-table .row-gate td{background:var(--c-orange-100)}
.spec-table .row-wrist td{background:var(--c-blue-100-2)}
.spec-table .row-mat td{background:var(--c-blue-100-2)}
.spec-table .row-gnd td{background:var(--c-blue-100-2)}
.spec-table .row-volt td{background:var(--c-blue-100-2)}
.spec-table .row-ion td{background:var(--c-green-100)}
.spec-table .row-plat td{background:var(--c-orange-100-2)}
/* 序号列与设备名列在 rowspan 时垂直居中 */
.spec-table td.seq,.spec-table td.dev{vertical-align:middle}
@media (max-width:600px){
  .spec-banner{padding:18px 16px}
  .spec-banner h2{font-size:17px}
  .spec-banner p{font-size:12px}
  .spec-table{font-size:12.5px;min-width:820px}
  .spec-table thead th{padding:10px 6px;font-size:12.5px}
  .spec-table td{padding:9px 7px}
}