/* ==========================================================================
   栏目新增页专用样式（strength / faq / downloads）
   --------------------------------------------------------------------------
   只放这三页需要的组件，不改动全站既有类；随 site-fx.css 之后加载。
   ========================================================================== */

/* ---------- 1. 表格：窄屏横向滚动，不撑破版心 ---------- */
.q-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-m)}
.q-table-wrap .tbl{min-width:720px}
.q-table-wrap::-webkit-scrollbar{height:6px}
.q-table-wrap::-webkit-scrollbar-thumb{background:#D5DEE9;border-radius:6px}

/* ---------- 2. 标签网格（检测装备等） ---------- */
.chip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:9px}
.chip-grid span{
  display:flex;align-items:center;gap:8px;font-size:13.6px;color:var(--blue-ink);
  background:var(--tint-blue);border:1px solid #D6E6F6;border-radius:8px;padding:10px 13px;line-height:1.45;
}
.chip-grid span::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--blue-b)}

/* ---------- 3. 勾选列表 ---------- */
.tick-list{display:grid;gap:11px}
.tick-list li{
  position:relative;padding-left:26px;font-size:14.6px;line-height:1.75;color:var(--gray-2);
}
.tick-list li::before{
  content:"";position:absolute;left:0;top:6px;width:14px;height:8px;
  border-left:2px solid var(--green-b);border-bottom:2px solid var(--green-b);
  transform:rotate(-45deg);border-radius:1px;
}
.tick-list li b{color:var(--deep)}

/* ---------- 4. 左文右表单 ---------- */
.split-form{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.form-card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--blue-b);border-radius:var(--r-m);padding:24px 22px}
.form-card h3{font-size:17px}
.form-card form{display:grid;gap:12px;margin-top:14px}
.form-card .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-card label{display:block;font-size:12.6px;font-weight:600;color:var(--gray-3);margin-bottom:5px}
.form-card input,.form-card select,.form-card textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:14.5px;color:var(--deep);background:#FCFDFE;
}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{
  outline:none;border-color:var(--blue-b);background:#fff;box-shadow:0 0 0 3px rgba(19,108,183,.10)
}
.form-card textarea{min-height:76px;resize:vertical}
.form-card .note{font-size:12px;color:var(--gray-3);line-height:1.6}
.form-card .btn{margin-top:2px}

/* ---------- 5. FAQ 分组手风琴 ---------- */
.faq-sec{padding:46px 0}
.faq-cat{margin-top:34px}
.faq-cat:first-of-type{margin-top:0}
.faq-cat-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.faq-cat-h h2{font-size:23px;margin:0}
.faq-cat-h span{font-size:12.5px;color:var(--gray-3);font-weight:600;letter-spacing:.04em}
.faq-cat-h .cnt{color:var(--blue-b)}

.faqwrap{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.faqwrap details{border-top:1px solid var(--line)}
.faqwrap details:first-child{border-top:0}
.faqwrap summary{
  display:flex;align-items:flex-start;gap:12px;padding:16px 20px;cursor:pointer;
  font-size:15.6px;font-weight:600;color:var(--deep);line-height:1.65;list-style:none;
  transition:background .18s var(--ease);
}
.faqwrap summary::-webkit-details-marker{display:none}
.faqwrap summary:hover{background:#FDF6E9}
.faqwrap summary .fq{
  flex:none;width:24px;height:24px;border-radius:50%;background:var(--tint-blue);color:var(--blue-b);
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.faqwrap summary .fm{flex:none;margin-left:auto;color:var(--gray-3);display:flex;transition:transform .22s var(--ease)}
.faqwrap details[open] summary .fm{transform:rotate(180deg);color:var(--blue-b)}
.faqwrap details[open] summary{background:#F7FAFD}
.faqwrap .fa{padding:0 20px 18px 56px;font-size:14.8px;line-height:1.9;color:var(--gray-2)}
.faqwrap .fa b{color:var(--deep)}
.faqwrap .fa ul{margin:10px 0 0;display:grid;gap:7px}
.faqwrap .fa li{position:relative;padding-left:16px}
.faqwrap .fa li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;background:var(--blue-b);opacity:.55}
.faqwrap .fa .fa-more{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:13.4px;font-weight:600;color:var(--blue-b)}

/* FAQ 侧栏目录 */
.faq-layout{display:grid;grid-template-columns:210px 1fr;gap:44px;align-items:start}
.faq-toc{position:sticky;top:104px;display:grid;gap:3px;border-left:2px solid var(--line);padding-left:14px}
.faq-toc a{font-size:13.8px;font-weight:600;color:var(--gray-2);padding:7px 0;transition:.16s}
.faq-toc a:hover{color:var(--orange-ink);padding-left:4px}
.faq-toc a .n{color:var(--gray-3);font-size:12px;margin-left:4px}

/* ---------- 6. 资料下载卡片 ---------- */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:26px}
.dl-card{
  display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:20px 20px 18px;transition:.22s var(--ease);position:relative;overflow:hidden;
}
.dl-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ac,var(--blue-b))}
.dl-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(10,42,74,.10);border-color:#F0CE96}
.dl-top{display:flex;align-items:center;gap:10px}
.dl-ic{flex:none;width:34px;height:34px;border-radius:9px;background:var(--ac-l,var(--tint-blue));color:var(--ac,var(--blue-b));display:flex;align-items:center;justify-content:center}
.dl-ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.dl-fmt{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--gray-3);letter-spacing:.04em}
.dl-card h3{font-size:15.8px;line-height:1.55}
.dl-card p{font-size:13.4px;line-height:1.75;color:var(--gray-2)}
.dl-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.dl-meta span{font-size:11.4px;color:var(--gray-3);background:#F4F7FA;border-radius:5px;padding:3px 8px}
.dl-act{display:flex;align-items:center;gap:8px;margin-top:12px}
.dl-act .btn{flex:1}
.dl-card:nth-child(3n+1){--ac:var(--blue-b);--ac-l:var(--tint-blue)}
.dl-card:nth-child(3n+2){--ac:var(--green-b);--ac-l:var(--tint-green)}
.dl-card:nth-child(3n+3){--ac:var(--orange-b);--ac-l:var(--tint-orange)}

/* ---------- 7. 流程三步 ---------- */
.steps-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.step-3{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 20px;position:relative}
.step-3 .no{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--blue-b);opacity:.65}
.step-3 h3{font-size:16.5px;margin-top:8px}
.step-3 p{font-size:13.6px;line-height:1.8;color:var(--gray-2);margin-top:8px}

/* ---------- 8. 移动端 ---------- */
@media (max-width:900px){
  .split-form{grid-template-columns:1fr;gap:26px}
  .faq-layout{grid-template-columns:1fr;gap:20px}
  .faq-toc{position:static;display:flex;flex-wrap:wrap;gap:8px;border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:14px}
  .faq-toc a{background:#F4F7FA;border-radius:100px;padding:7px 13px;font-size:12.8px}
  .faq-toc a:hover{padding-left:13px}
  .steps-3{grid-template-columns:1fr}
}
@media (max-width:768px){
  .faq-sec{padding:32px 0}
  .faq-cat{margin-top:26px}
  .faq-cat-h h2{font-size:19px}
  .faqwrap summary{font-size:14.4px;padding:13px 14px;gap:9px}
  .faqwrap summary .fq{width:21px;height:21px;font-size:11px}
  .faqwrap .fa{padding:0 14px 15px 44px;font-size:13.8px;line-height:1.8}
  .chip-grid{grid-template-columns:1fr 1fr;gap:7px}
  .chip-grid span{font-size:12.6px;padding:9px 10px}
  .dl-grid{grid-template-columns:1fr;gap:14px;margin-top:20px}
  .dl-card{padding:16px}
  .tick-list li{font-size:13.8px}
  .form-card{padding:18px 16px}
  .form-card .row2{grid-template-columns:1fr}
}
@media (max-width:380px){
  .chip-grid{grid-template-columns:1fr}
}