:root{
  --bg:#f4f6f8;
  --card:#ffffff;
  --line:#e4e7eb;
  --text:#1f2328;
  --muted:#6b7280;
  --blue:#185FA5;
  --blue-bg:#E6F1FB;
  --green:#0F6E56;
  --green-bg:#E1F5EE;
  --red:#A32D2D;
  --red-bg:#FCEBEB;
  --amber:#854F0B;
  --amber-bg:#FAEEDA;
  --gray-bg:#F1EFE8;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,sans-serif;
  font-size:14px;line-height:1.7;
}
.topbar{
  background:var(--card);border-bottom:1px solid var(--line);
  padding:22px 32px;
}
.topbar h1{margin:0;font-size:20px;font-weight:500;color:var(--blue)}
.topbar p{margin:4px 0 0;color:var(--muted);font-size:13px}
main{max-width:900px;margin:24px auto;padding:0 20px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:20px 22px;margin-bottom:16px;
}
.steptitle{font-size:15px;font-weight:500;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.steptitle b{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--blue-bg);
  color:var(--blue);font-size:13px;font-weight:500;
}
.tabs{display:flex;gap:6px;margin-bottom:12px}
.tab{
  border:1px solid var(--line);background:#fff;border-radius:8px;
  padding:5px 14px;font-size:13px;cursor:pointer;color:var(--muted);
  font-family:inherit;
}
.tab.active{background:var(--blue-bg);border-color:#B5D4F4;color:var(--blue);font-weight:500}
input[type=text]{
  width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;
  font-size:13px;font-family:inherit;color:var(--text);
}
input[type=text]:focus{outline:none;border-color:#85B7EB;background:#fbfdff}
input[type=file]{
  width:100%;padding:9px 12px;border:1px dashed #c8ccd2;border-radius:8px;
  font-size:13px;font-family:inherit;background:#fafbfc;cursor:pointer;
}
.hint{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
.hint b{color:var(--blue);font-weight:500}
.hidden{display:none !important}
.primary{
  width:100%;padding:13px;border:0;border-radius:10px;background:var(--blue);
  color:#fff;font-size:15px;font-weight:500;cursor:pointer;font-family:inherit;
  margin-top:4px;
}
.primary:hover{background:#13508c}
.primary:disabled{background:#9db8d1;cursor:default}
.status{text-align:center;color:var(--muted);font-size:13px;margin:12px 0 0}
.status.err{color:var(--red)}

.result{max-width:900px;margin:0 auto 40px;padding:0 20px}
.verdict{
  border-radius:12px;padding:20px 24px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.verdict.ok{background:var(--green-bg);border:1px solid #9FE1CB}
.verdict.bad{background:var(--red-bg);border:1px solid #F7C1C1}
.verdict h2{margin:0;font-size:19px;font-weight:500}
.verdict.ok h2{color:var(--green)}
.verdict.bad h2{color:var(--red)}
.verdict .counts{display:flex;gap:18px;font-size:13px;color:var(--muted)}
.verdict .counts b{display:block;font-size:20px;font-weight:500;color:var(--text)}

.block{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin-bottom:16px}
.block h3{margin:0 0 14px;font-size:15px;font-weight:500;display:flex;align-items:center;gap:8px}
.block h3::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--blue)}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:#fafbfc;color:var(--muted);font-weight:500;font-size:12px;white-space:nowrap}
tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- 判定结果表（2026-09-17 重做）----------
   之前的问题：这一表有 7 列，而「实测值」列带着 white-space:nowrap，
   十几个数字一路撑开，把其余列挤到只剩几十像素 —— 中文只能逐字竖排，
   整张表还溢出卡片（客户截图反馈「出框了」）。
   现在：固定列宽 + 正面只给最大值，全部值收进「共 N 个」点开看。 */
.restbl{table-layout:fixed}
.restbl th:nth-child(1){width:6%}      /* 判定 */
.restbl th:nth-child(2){width:12%}     /* 类别 */
.restbl th:nth-child(3){width:11%}     /* 排放口 */
.restbl th:nth-child(4){width:16%}     /* 检测项目 */
.restbl th:nth-child(5){width:14%}     /* 实测值（只放一个最大值，够用） */
.restbl th:nth-child(6){width:14%}     /* 许可限值 */
.restbl th:nth-child(7){width:27%}     /* 说明 */
.restbl td{overflow-wrap:anywhere}
.restbl td.num{white-space:normal}
/* 「共 N 个」展开 */
.restbl details.vals{margin-top:5px}
.restbl details.vals summary{
  cursor:pointer;color:var(--blue);font-size:12px;list-style:none;
  white-space:nowrap;
}
.restbl details.vals summary::-webkit-details-marker{display:none}
.restbl details.vals summary::before{content:"▸ "}
.restbl details.vals[open] summary::before{content:"▾ "}
.restbl details.vals > div{margin-top:4px;color:var(--muted);font-size:12px;line-height:1.75}
.tag{display:inline-block;padding:1px 8px;border-radius:20px;font-size:12px;white-space:nowrap}
.tag.ok{background:var(--green-bg);color:var(--green)}
.tag.bad{background:var(--red-bg);color:var(--red)}
.tag.na{background:var(--gray-bg);color:#5F5E5A}
/* 「需确认」：有值也有限值，但限值分档没法定 —— 用琥珀色，区别于达标的绿和超标的红 */
.tag.tbd{background:#FAEEDA;color:#854F0B}
.reason{color:var(--muted);font-size:12px}
.meta{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:13px;margin-bottom:6px}
.meta span{color:var(--muted)}
.meta b{font-weight:500;color:var(--text)}
.chk{display:flex;gap:9px;padding:6px 0;font-size:13px;align-items:flex-start}
.chk i{font-style:normal;flex:0 0 auto;margin-top:1px}
.chk .d{color:var(--muted);font-size:12px}
footer{text-align:center;color:#9aa1a9;font-size:12px;padding:0 20px 34px}
details{margin-top:10px}
summary{cursor:pointer;color:var(--blue);font-size:13px}
.sub{margin-top:22px;padding-top:16px;border-top:1px dashed var(--line)}
.sub:first-of-type{border-top:0;padding-top:0}
.sub .fn{font-size:13px;font-weight:500;margin-bottom:8px}

/* ---------- 页头与「要准备的」提示条 ----------
   2026-09-17：原来这里是 2×2 四张说明卡，占满首屏，客户要读完才看到输入框。
   现在收成一条横贯的单行提示 —— 只留「要准备什么」，其余三张的信息各有承接处。 */
.pagehead{padding:24px 0 16px}
.pagehead h1{margin:0;font-size:24px;font-weight:500;color:var(--blue)}
.pagehead p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.8}
.pagehead b{color:var(--text);font-weight:500}

.intro{display:block;margin-bottom:16px}
.intro .item{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:11px 18px;
}
.intro h4{margin:0;font-size:13px;font-weight:500;flex:0 0 auto;display:flex;align-items:center;gap:7px}
.intro h4::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--blue)}
.intro p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
.intro b{color:var(--text);font-weight:500}
@media(max-width:720px){.intro .item{align-items:flex-start;gap:4px 10px}}

/* ---------- 排队/识别进度 ---------- */
.progress{padding:18px 22px}
.progress .prow{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;margin-bottom:10px}
.progress .prow span:first-child{font-weight:500}
.progress .prow span:last-child{color:var(--blue);font-variant-numeric:tabular-nums;font-size:13px}
.progress .bar{height:8px;border-radius:20px;background:#e9eef3;overflow:hidden}
.progress .bar i{display:block;height:100%;border-radius:20px;
  background:linear-gradient(90deg,#4a90d9,#185FA5);transition:width .4s ease}

/* ---------- 结论后的引导 ---------- */
.callout{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:10px;padding:16px 20px;margin-bottom:16px}
.callout b{font-weight:500}
.callout p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.8}
.callout .mini{margin-top:10px;font-size:12px;color:#9aa1a9}
.callout.plain{border-left-color:#9FE1CB}

/* ---------- 检查项图标 ---------- */
.chk i.ok{color:var(--green)}
.chk i.bad{color:var(--red)}
.chk i.manual{color:#c9a227;font-weight:700}

/* ---------- 底部：数据已删除 ---------- */
.wiped{text-align:center;color:var(--muted);font-size:12px;padding:6px 0 30px}

/* ---------- 窄屏：判定结果表改成「一行一个项目」的卡片 ----------
   客户很可能用手机打开结果页；7 列的表格在手机宽度下没法看，
   无论怎么压都会挤成竖排，所以这里直接换成卡片式。
   ⚠️ td 必须 flex-wrap:wrap（2026-09-17 补）：td 里除了值还有一行小字
      （"依据：…" / 检测方法标准号），不换行的话两者并排抢宽度，
      会把「二氧化硫」压成「二氧／化硫」、「pH 值」压成「p／H 值」。 */
@media(max-width:720px){
  .restbl thead{display:none}
  .restbl, .restbl tbody, .restbl tr{display:block;width:auto}
  .restbl tr{
    border:1px solid var(--line);border-radius:10px;
    padding:11px 13px;margin-bottom:10px;
  }
  .restbl tr:last-child{margin-bottom:0}
  .restbl td{display:flex;gap:9px;border:0;padding:3px 0;align-items:flex-start;flex-wrap:wrap}
  .restbl td::before{
    content:attr(data-l);flex:0 0 58px;color:var(--muted);
    font-size:12px;line-height:1.65;
  }
  .restbl td.num{white-space:normal}
  .restbl details.vals summary{white-space:normal}
}

/* ---------- 参考报价（2026-09-17）----------
   金额与「在线报价」页必须一致 —— 两边调的是同一个 /quote/api/quote-preview。
   这里排在 .restbl 之后，为的是覆盖它那套 7 列的列宽（同特异性，后定义者胜）。 */
.qptbl{table-layout:fixed}
.qptbl th:nth-child(1){width:19%}      /* 类别 */
.qptbl th:nth-child(2){width:33%}      /* 检测项目 */
.qptbl th:nth-child(3){width:25%}      /* 怎么算的 */
.qptbl th:nth-child(4){width:23%}      /* 小计 */
.qptbl td{overflow-wrap:anywhere}
.qptbl td.num{white-space:normal}

.qptotal{
  margin-top:12px;padding:12px 16px;background:var(--blue-bg);
  border-radius:8px;font-size:14px;
}
.qptotal b{font-size:20px;color:var(--blue);font-variant-numeric:tabular-nums}
.qptotal span{color:var(--muted);font-size:12px;margin-left:8px}

.qpdeclare{
  background:#fafbfc;border:1px solid var(--line);border-radius:8px;
  padding:10px 13px;line-height:1.75;
}
.qpdeclare b{color:var(--text)}

/* 报价明细折叠：默认收起，页面只露「总价 + 报价说明」
   （志明 2026-09-17：不用显示细项价格，先折叠起来） */
.qpdetail{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}
.qpdetail summary{font-size:13.5px}
.qpdetail > p{margin-bottom:10px}
.qpdetail > table{margin-top:2px}

.qbtn{
  display:inline-block;padding:10px 24px;border-radius:8px;
  background:linear-gradient(145deg,#2a86d0,#1a5f9e);color:#fff;
  text-decoration:none;font-weight:600;font-size:14px;
}

/* ---------- 留联系方式（选填，结果页） ---------- */
.leadrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.leadrow input[type=text]{flex:1 1 180px;width:auto}
.leadbtn{border:0;cursor:pointer;font-family:inherit;white-space:nowrap}
.leadbtn:disabled{opacity:.55;cursor:default}

/* ---------- 系统没有代判的项目（2026-10-04）----------
   线上 81 个判定项里有 50 项走这条路。正面只说为什么，明细收进 details ——
   一屏「无法判定」会把真正的结论淹掉，客户只会觉得「查了个寂寞」。 */
.nafold{
  margin-top:14px;background:#fafbfc;border:1px solid var(--line);
  border-left:3px solid #c9a227;border-radius:10px;padding:14px 16px;
}
.nahead{font-size:13px;line-height:1.7}
.nahead b{color:var(--text)}
.nahead span{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.nareasons{margin:10px 0 0;padding-left:0;list-style:none}
.nareasons li{
  display:flex;justify-content:space-between;gap:12px;
  font-size:12.5px;color:var(--muted);padding:4px 0;
  border-bottom:1px dashed var(--line);
}
.nareasons li:last-child{border-bottom:0}
.nareasons .nrn{flex:0 0 auto;color:var(--text);font-variant-numeric:tabular-nums}
.nafold details{margin-top:10px}
.nafold details summary{color:var(--blue);font-size:13px}
.nafold details table{margin-top:8px}
.nacta{margin:12px 0 0;font-size:12.5px;color:var(--muted);line-height:1.75}
.nacta a{color:var(--blue);font-weight:500}

/* ---------- 平台上查不到企业 → 兜底入口（2026-10-04）----------
   只在卡住时出现 —— 平时页面还是原来那两步，不打扰。 */
#fallback{margin-top:16px}
.fbhead h3{margin:0;font-size:15px;font-weight:500}
.fbhead .hint{margin-top:8px}
.fbrow{margin-top:14px}
.fbrow label{display:block;font-size:13px;color:var(--text);margin-bottom:6px}
#fbGo{margin-top:18px}
#fallback input[type=file]{width:100%}

/* ---------------- 企业名匹配到多家：候选点选（2026-09-20） ----------------
   背景：平台企业名搜索是包含匹配，客户填全称时也会连带返回名字里包含它的企业，
   老做法只回一句「请写得更完整一些」——名字已经完整，客户无路可走。
   现在把候选摆出来，点哪家就按哪家的平台编号重跑。 */
.pick{margin-top:14px;border-left:3px solid var(--blue)}
.pickhead h3{font-size:15px;font-weight:500;margin:0 0 6px}
.picklist{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.pickitem{
  width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;cursor:pointer;font:inherit;
  display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;
  transition:border-color .2s,background .2s,transform .2s;
}
.pickitem:hover{border-color:var(--blue);background:var(--blue-bg);transform:translateX(2px)}
.pname{grid-column:1;font-size:14px;color:var(--text);font-weight:500;word-break:break-all}
.pmeta{grid-column:1;font-size:12px;color:var(--muted);word-break:break-all}
.pgo{grid-column:2;grid-row:1 / span 2;color:var(--blue);font-size:13px;white-space:nowrap}
@media(max-width:560px){
  .pickitem{grid-template-columns:1fr}
  .pgo{grid-row:auto;text-align:right}
}