/* ==========================================================================
   快测 · 前台组件层  qc-front.css
   --------------------------------------------------------------------------
   2026-11-02 重构：原 class-qc-front.php 里 194 行内联 CSS 整体迁出。
   迁出时做了三件事：
   ① 删除重复 —— .qc-ws 系列规则原本**整段写了两遍**（358–396 行与 398–425 行，
      媒体查询都重复），现在只留一份。
   ② 统一令牌 —— 原来的 #2563EB、#e5e7eb、#8c8f94、11.5px、13.5px 等散落色值/字号
      全部改为引用 qc-layout.css 的变量（品牌色统一 #0088ff（与主题 --theme-color 同源），与后台一致）。
   ③ 统一断点 —— 原来的 600 / 780 / 820 三处断点收敛为 1024 / 768 / 480。
   仅保留「前台特有」的组件：上传区、履约流程条、待办表、拒单浮层等。
   通用卡片/按钮/徽章/表格一律走 qc-design.css，本文件不再重定义。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 主题冲突清理
   --------------------------------------------------------------------------
   ① 页面标题竖条
      主题（Sage）给页面标题 h1 加了一条 3px 左侧竖条（::before），
      2026-11-01 用户明确说这种设计过时，要去掉。

      【作用域为什么是 body.qc-page 而不是 .qc-ui】
      主题的页面标题 DOM 在 ARTICLE.content > DIV.content-head.entry-head > h1，
      **位于 .qc-ui 容器之外**（.qc-ui 是快测短代码输出的内容区）。
      如果把清除规则写成 .qc-ui h1::before，主题标题根本命中不了，竖条会回来。
      如果写成全局 h1::before（= 旧代码的做法），又会把站内其它文章页的
      主题标题一起改掉 —— 属于误伤。
      所以用 body.qc-page 这个**页面级**作用域：只有快测自己的页面命中，
      站内其它文章页的主题样式原样保留。

   ② .qc-ui 内部的 h1
      插件自己输出的标题（qc-frame__title 等）字号由 qc-layout.css 控制，
      这里只压掉主题对 h1 的字号/左边框/行高，避免和设计令牌打架。
   -------------------------------------------------------------------------- */
body.qc-page h1::before{display:none !important}
body.qc-page h1{
  border-left:0 !important;
  font-size:18px !important;
  margin:0 0 14px !important;
  font-weight:600;
  background:none !important;
}
/* 插件框架内的标题（qc-frame__title 用 h2）：只清主题装饰，字号交给设计令牌 */
.qc-ui h1,.qc-ui h2,.qc-ui h3{
  border-left:0 !important;background:none !important;
}
.qc-ui h1::before,.qc-ui h2::before,.qc-ui h3::before{display:none !important}

/* WooCommerce 原生订单明细表：改用快测卡片呈现，原生表格隐藏。
   原来这段是写在 PHP 里的内联 <style>（每次请求都随页面输出），
   现移入样式层；选择器保持不变，避免"两处都要改"的坑。
   注意：钩子位置在 .woocommerce-order-details **内部**，
   所以不能整体隐藏这个 div（会把快测自己的内容一起藏掉），
   只能精确隐藏它的直接子元素 h2 和 table。 */
.woocommerce-order-details>h2,
.woocommerce-order-details>table,
.woocommerce-order-details .woocommerce-table--order-details{display:none}

/* --------------------------------------------------------------------------
   1b. 客户端订单列表的列宽（2026-11-02 桌面端优化）
   --------------------------------------------------------------------------
   【实测】正文栏撑到 1200px 后，WooCommerce 的订单表 6 列**均分**，
   变成 113/265/144/179/201/237 —— 日期列独占 265px，里头只放"2026年11月1日"，
   空得发慌；而真正要看的「检测进度」列才 179px。

   【现在】改成按内容需要分配：
     订单号(窄) / 日期(窄) / 状态(窄) / **检测进度(宽)** / 合计(中) / 操作(中)
   「检测进度」是这张表的主角 —— 它是客户唯一关心的一列，给足宽度。
   -------------------------------------------------------------------------- */
@media (min-width:1200px){
  /* ⚠️ 选择器要用 .woocommerce-orders-table —— 主题给账户页订单表的真实类名。
     （我先写成 .my_account_orders，不生效；实测 CSSOM 才发现真实类名是这个。）
     ⚠️ 必须配 table-layout:fixed —— 默认 auto 时浏览器按**内容**分配宽度，
        th 上的 width 只是建议值，表格宽一变列宽就跟着均分（实测 113/265/144…）。 */
  body.qc-page.woocommerce-account .woocommerce-orders-table{
    table-layout:fixed;
    width:100%;
  }
  body.qc-page.woocommerce-account .woocommerce-orders-table th,
  body.qc-page.woocommerce-account .woocommerce-orders-table td{
    width:auto;
  }
  /* ⚠️ nth-child 的百分比**必须限定在订单行内** ——
     tbody 里还有一行商品明细（4 格），如果用裸 td:nth-child(n)，
     它那 4 格会按"表头第 1~4 列"分配，整行右移一格（实测：
     「× 1」跑到了"检测进度"标题底下）。
     订单行的类名是 .woocommerce-orders-table__row。

     ⚠️ table-layout:fixed 时，**列宽以第一行（表头）为准** ——
     所以百分比必须写在 thead 的 th 上；tbody 的 td 只在
     少数浏览器里做对齐参考，写不写都行。
     ⚠️ 表头行不在 .woocommerce-orders-table__row 里（那是 tbody 的订单行），
     所以表头要单独写一份，不能跟着订单行一起限定。 */
  body.qc-page.woocommerce-account .woocommerce-orders-table thead th:nth-child(1){width:9%}
  body.qc-page.woocommerce-account .woocommerce-orders-table thead th:nth-child(2){width:12%}
  body.qc-page.woocommerce-account .woocommerce-orders-table thead th:nth-child(3){width:11%}
  body.qc-page.woocommerce-account .woocommerce-orders-table thead th:nth-child(4){width:32%}
  body.qc-page.woocommerce-account .woocommerce-orders-table thead th:nth-child(5){width:13%}
  body.qc-page.woocommerce-account .woocommerce-orders-table thead th:nth-child(6){width:23%}
  body.qc-page.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__row td:nth-child(1){width:9%}
  body.qc-page.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__row td:nth-child(2){width:12%}
  body.qc-page.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__row td:nth-child(3){width:11%}
  body.qc-page.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__row td:nth-child(4){width:32%}
  body.qc-page.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__row td:nth-child(5){width:13%}
  body.qc-page.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__row td:nth-child(6){width:23%}
  /* 固定布局下商品名列会变窄，给产品名留一行不折行 */
  body.qc-page.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__row td:nth-child(2) .woocommerce-orders-table__product-name{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* ------------------------------------------------------------------
     商品明细行（tbody 第 3 行）：4 格，**不与表头对齐**
     它是商品图 / 商品名 / 数量 / 小计，属于"上一行订单的展开明细"，
     所以不能套用表头的 6 列百分比 —— 实测套用后整行右移一格，
     「× 1」跑到了"检测进度"标题底下。
     这里按内容需要单独分配。
     ------------------------------------------------------------------ */
  body.qc-page.woocommerce-account .woocommerce-orders-table .orders-table__row-item-img{width:8%}
  body.qc-page.woocommerce-account .woocommerce-orders-table .orders-table__row-item-title{width:52%}
  body.qc-page.woocommerce-account .woocommerce-orders-table .orders-table__row-item-quantity{width:12%}
  body.qc-page.woocommerce-account .woocommerce-orders-table .orders-table__row-item-total{width:28%}
}

/* --------------------------------------------------------------------------
   2. 迷你进度条（表格内，与七步流程对应）
   -------------------------------------------------------------------------- */
.qc-mini-bar{height:5px;background:#e5e7eb;border-radius:3px;overflow:hidden}
.qc-mini-bar i{display:block;height:100%;background:var(--qc-brand)}
.qc-mini-bar i.p1{width:14.28%}
.qc-mini-bar i.p2{width:28.57%}
.qc-mini-bar i.p3{width:42.86%}
.qc-mini-bar i.p4{width:57.14%}
.qc-mini-bar i.p5{width:71.43%}
.qc-mini-bar i.p6{width:85.71%}
.qc-mini-bar i.p7{width:100%}

/* --------------------------------------------------------------------------
   3. 上传区
   -------------------------------------------------------------------------- */
.qc-upload form{display:flex;flex-wrap:wrap;gap:var(--qc-s3);align-items:center}
.qc-upload input[type=text],.qc-upload select{
  height:32px;box-sizing:border-box;padding:0 10px;border:1px solid #dcdfe3;
  border-radius:var(--qc-r1);font-size:var(--qc-f2);background:#fff;color:var(--qc-text);
}
.qc-upload input[type=text]:focus,.qc-upload select:focus{
  outline:none;border-color:var(--qc-brand-ink);box-shadow:0 0 0 3px var(--qc-brand-ring);
}
.qc-upload input[type=file]{font-size:var(--qc-f2);color:var(--qc-text-muted);width:auto;max-width:none}
.qc-upload select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:26px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#6b7280 50%),
    linear-gradient(135deg,#6b7280 50%,transparent 50%);
  background-position:calc(100% - 14px) 14px,calc(100% - 9px) 14px;
  background-size:5px 5px;background-repeat:no-repeat;
}
.qc-upload input[type=checkbox]{width:14px;height:14px;accent-color:var(--qc-brand);margin:0 6px 0 0;vertical-align:-2px;cursor:pointer}
.qc-upload .qc-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.qc-upload .qc-pick{
  display:inline-flex;align-items:center;height:34px;padding:0 18px;
  border-radius:var(--qc-r1);background:var(--qc-brand-solid);color:#fff;
  font-size:var(--qc-f2);cursor:pointer;border:1px solid var(--qc-brand-solid);
}
.qc-upload .qc-pick:hover{background:var(--qc-brand-hover);border-color:var(--qc-brand-hover)}
/*
 * 上传区的主按钮与提示（2026-11-02 补回）。
 *
 * 【为什么补】旧内联块里 .qc-pick-main / .qc-pickhint / .qc-more 都有定义，
 * 迁到 qc-front.css 时漏了 —— 结果上传按钮没有主按钮样式（看着像普通标签），
 * "更多选项"折叠区也没有样式。
 * 这类遗漏光看代码发现不了，是靠 tools/audit-css-migration.py 比对出来的。
 */
.qc-upload .qc-pick-main{background:var(--qc-brand-solid);border-color:var(--qc-brand-solid);color:#fff}
.qc-upload .qc-pick-main:hover{background:var(--qc-brand-active);border-color:var(--qc-brand-active)}
.qc-upload .qc-pickhint{font-size:var(--qc-f1);color:var(--qc-text-faint);line-height:1.6}
.qc-upload .qc-more{margin-top:var(--qc-s1)}
.qc-upload .qc-more>summary{
  font-size:var(--qc-f2);color:var(--qc-text-muted);cursor:pointer;
  list-style:none;padding:2px 0;display:inline-block;
}
.qc-upload .qc-more>summary::-webkit-details-marker{display:none}
.qc-upload .qc-more>summary:before{content:"＋ ";color:var(--qc-text-faint)}
.qc-upload .qc-more[open]>summary:before{content:"－ "}
.qc-upload .qc-more .bd{
  margin-top:var(--qc-s2);display:flex;align-items:center;flex-wrap:wrap;gap:var(--qc-s2);
}

/* --------------------------------------------------------------------------
   4. 拒单浮层（绝对定位，不改变行高）
   -------------------------------------------------------------------------- */
.qc-pop-wrap{position:relative;display:inline-block;margin-left:6px;vertical-align:middle}
.qc-pop{
  position:absolute;top:calc(100% + 6px);right:0;z-index:var(--qc-z-float);width:240px;
  background:#fff;border:1px solid var(--qc-line);border-radius:var(--qc-r1);
  box-shadow:0 6px 20px rgba(0,0,0,.14);padding:var(--qc-s3);text-align:left;
}
.qc-pop select{
  width:100%;padding:6px;border-radius:4px;border:1px solid var(--qc-line);
  font-size:var(--qc-f1);margin-bottom:var(--qc-s2);
}
.qc-pop .qc-pop-t{font-size:var(--qc-f1);color:var(--qc-text-muted);margin:0 0 6px}

/* --------------------------------------------------------------------------
   5. 横条（字段多、含表单的区块）
   -------------------------------------------------------------------------- */
.qc-bar{
  background:#fff;border:1px solid var(--qc-line);border-radius:var(--qc-r1);
  padding:14px 18px;margin:0 0 10px;display:flex;justify-content:space-between;
  align-items:flex-start;gap:20px;
}
.qc-bar .main{min-width:0;flex:1}
.qc-bar .side{flex:none;display:flex;align-items:center;gap:var(--qc-s2)}
.qc-bar .t1{font-size:var(--qc-f3);font-weight:600;margin-bottom:6px}
.qc-bar .t2{font-size:var(--qc-f1);color:var(--qc-text-muted);line-height:1.9}

/* --------------------------------------------------------------------------
   6. 两列信息网格（标签 + 值成对出现）
   -------------------------------------------------------------------------- */
.qc-grid2{
  display:grid;grid-template-columns:1fr 1fr;gap:0 44px;
  background:#fff;border:1px solid var(--qc-line);border-radius:var(--qc-r1);padding:6px 18px;
}
.qc-grid2 .item{
  display:flex;justify-content:space-between;padding:11px 0;
  border-bottom:1px solid #f0f0f1;font-size:var(--qc-f2);gap:var(--qc-s3);
}
.qc-grid2 .item:nth-last-child(-n+2){border-bottom:0}
.qc-grid2 .k{color:var(--qc-text-muted);flex:none}

/* --------------------------------------------------------------------------
   6d. 客户端「检测进行中」区块（2026-11-02 桌面端优化）
   --------------------------------------------------------------------------
   【为什么需要它】
     当前主题的订单列表表头有 6 列（含快测加的「检测进度」），
     但行内只有 5 个 td —— 表头与内容错位，那一格显示的是 Woo 的数量列（× 1）。
     结果：客户在列表页**根本看不到检测进度**。

   主题表格结构不能乱改（会跟主题其它页面打架），
   所以不动表格，在表格上方插一块自己的卡片区。
   桌面端用三段式（服务 / 进度 / 状态）横向排布，一行一单，一眼看完。
   -------------------------------------------------------------------------- */
.qc-board{
  background:var(--qc-surface);
  border:1px solid var(--qc-line);
  border-radius:var(--qc-r2);
  padding:var(--qc-s4) var(--qc-s5);
  margin:0 0 var(--qc-s5);
  box-shadow:var(--qc-sh1);
}
.qc-board__head{
  display:flex;align-items:baseline;gap:var(--qc-s3);flex-wrap:wrap;
  padding-bottom:var(--qc-s3);margin-bottom:var(--qc-s2);
  border-bottom:1px solid var(--qc-line-soft);
}
.qc-board__head b{
  font-size:var(--qc-f4);font-weight:600;color:var(--qc-text-strong);
}
.qc-board__count{
  font-size:var(--qc-f1);color:var(--qc-brand-ink);
  background:var(--qc-brand-soft);border:1px solid var(--qc-brand-line);
  padding:1px 8px;border-radius:999px;
}
.qc-board__hint{
  font-size:var(--qc-f1);color:var(--qc-text-muted);
}
.qc-board__list{list-style:none;margin:0;padding:0}
.qc-board__row{
  display:grid;
  /*
   * 【实测踩坑】原来三列写死 minmax(160px, auto)：
   *   ① auto 的最小值是**内容宽度**，徽章放不下就把这列撑到 200px 以上，整行溢出容器
   *      （实测文档宽 1482 > 视口 1440）
   *   ② 客户端账户页的内容列实测只有 486~551px 宽 —— 三列根本放不下
   *
   * 现在用 auto-fit + minmax(280px,1fr)：
   *   宽容器（机构端 1004px）→ 三列并排
   *   窄容器（客户端 551px）→ 只能放 1 列，自动降为单列堆叠，
   *     不会出现"状态徽章孤零零跑到下一行左边"的错位。
   */
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--qc-s3) var(--qc-s4);
  align-items:center;
  padding:var(--qc-s3) 0;
  border-top:1px solid var(--qc-line-soft);
}
.qc-board__row:first-child{border-top:0}
.qc-board__main{min-width:0}
.qc-board__svc{
  display:block;font-size:var(--qc-f3);font-weight:600;color:var(--qc-text-strong);
  text-decoration:none;
}
.qc-board__svc:hover{color:var(--qc-brand-ink)}
.qc-board__no{
  display:block;font-size:var(--qc-f1);color:var(--qc-text-faint);
  font-variant-numeric:tabular-nums;margin-top:2px;
}
/* 窄容器（客户端账户页）单列时，服务名与单号并排，省一行高度 */
@media (max-width:1024px){
  .qc-board__main{
    display:flex;align-items:baseline;gap:var(--qc-s2);flex-wrap:wrap;
  }
  .qc-board__no{margin-top:0}
}
.qc-board__prog{min-width:0}
.qc-board__stage{
  display:block;font-size:var(--qc-f2);color:var(--qc-text);
  margin-bottom:5px;
}
.qc-board__right{
  display:flex;align-items:center;gap:var(--qc-s2);justify-content:flex-end;
  flex-wrap:wrap;min-width:0;
}
.qc-board__due{
  font-size:var(--qc-f1);color:var(--qc-text-muted);
  white-space:nowrap;
}
/* 窄容器降级为单列时，状态与时间靠左对齐更好读 */
@media (max-width:1024px){
  .qc-board__right{justify-content:flex-start}
}

/* --------------------------------------------------------------------------
   6c. 「等待平台处理」区块（2026-11-02 桌面端优化）
   --------------------------------------------------------------------------
   报告待审/复核这类状态机构动不了，原来混在待办里，
   机构看到「有活但只有一个查看详情按钮」会以为漏做了。
   机构看到「有活但只有一个查看详情按钮」会以为漏做了。
   现在单独成块：**弱化、无操作按钮、明确写"不用你做什么"**。

   视觉上刻意做得比主待办"轻"—— 灰底、无阴影、文字更小，
   保证一眼扫过去先看到"要你动手的"，再看这个。
   -------------------------------------------------------------------------- */
.qc-waiting{
  margin-top:var(--qc-s4);
  padding:var(--qc-s3) var(--qc-s4);
  background:var(--qc-surface-2);
  border:1px solid var(--qc-line-soft);
  border-radius:var(--qc-r2);
}
.qc-waiting__head{
  display:flex;align-items:baseline;gap:var(--qc-s3);flex-wrap:wrap;
  margin-bottom:var(--qc-s2);
}
.qc-waiting__head b{
  font-size:var(--qc-f2);font-weight:600;color:var(--qc-text-muted);
}
.qc-waiting__hint{
  font-size:var(--qc-f1);color:var(--qc-text-faint);
}
.qc-waiting__list{
  list-style:none;margin:0;padding:0;
}
.qc-waiting__row{
  display:flex;align-items:center;gap:var(--qc-s3);
  /* 2026-11-03：右侧留 4px，避免"查看"贴到行右边缘 */
  padding:6px 4px;
  border-top:1px solid var(--qc-line-soft);
  font-size:var(--qc-f2);
}
.qc-waiting__row:first-child{border-top:0}
.qc-waiting__svc{
  color:var(--qc-text);font-weight:500;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:280px;
}
.qc-waiting__no{
  color:var(--qc-text-faint);font-size:var(--qc-f1);
  font-variant-numeric:tabular-nums;
}
.qc-waiting__since{
  color:var(--qc-text-faint);font-size:var(--qc-f1);
}
.qc-waiting__link{
  /*
   * 2026-11-03（#1）：原来 margin-left:auto 把它推到行最右端、孤零零一个"查看 ›"，
   * 用户反馈"单独在右侧并不合理"。改成紧跟内容，并做成小胶囊
   * ——它是一项操作，就该跟在这一行信息后面。
   */
  margin-left:var(--qc-s3);
  color:var(--qc-brand-ink);font-size:var(--qc-f1);
  padding:2px 8px;border:1px solid var(--qc-brand-line,rgba(0,136,255,.35));border-radius:6px;
  text-decoration:none;
  white-space:nowrap;
}
/* 桌面端：等待块与主待办之间给一条明确的分界，别混成一片 */
@media (min-width:1200px){
  .qc-waiting{
    margin-top:var(--qc-s5);
    padding:var(--qc-s4) var(--qc-s5);
  }
  .qc-waiting__row{padding:8px 0}
}

/* --------------------------------------------------------------------------
   6b. 详情页两栏栅格（.qc-ig / .qc-ic）
   --------------------------------------------------------------------------
   【为什么补这两个类】
   旧内联块里 .qc-ig 是 `1fr 1fr` 两栏，迁到 qc-front.css 时漏了 ——
   结果详情页的「费用 | 寄样信息」两栏塌成一列：
   左边费用卡占 551px、右边寄样卡挤成 234px 并明显偏右，
   同一行两张卡宽度不同、左边缘对不齐（2026-11-02 实测截图确认）。
   tools/audit-css-migration.py 比对旧内联块才发现是迁移遗漏。

   【比例为什么不是 1:1】
   左边是「费用」—— 5~6 行键值，每行都是短数字；
   右边是「寄样信息 + 样品 + 报告要求」—— 字段更多、地址更长。
   等分会让右边更挤、左边更空。所以改成 1:1.15（右边略宽），
   窄屏（≤900px）回到单列。
   -------------------------------------------------------------------------- */
.qc-ig{
  display:grid;
  /* 2026-11-03：等宽 1:1。原来 1:1.35 会让同页出现 405 / 547 两种卡片宽度，
     走查判为"容器尺寸不一致"。等宽后两栏各 486，视觉更规整。 */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.qc-ic{min-width:0}
.qc-ig h3{margin:var(--qc-s3) 0 var(--qc-s2)}
@media (max-width:1024px){
  /* 单列时必须保留块间距（原来 gap:0 + 卡片 margin-bottom:0 = 两张卡完全贴住，
     2026-11-03 截图实测"派单记录"和"寄样信息"黏在一起） */
  .qc-ig{grid-template-columns:minmax(0,1fr);gap:16px}
}

/* 详情页头部两栏（左信息 + 右操作区） */
.qc-head2{
  display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--qc-s5);align-items:start;
}
@media (max-width:1024px){
  .qc-head2{grid-template-columns:minmax(0,1fr);gap:16px}
}

/* 派单历史折叠区（details）
   注：summary 的具体样式在 PHP 里是内联的（背景/底边线），
   这里只补结构性规则，不与内联冲突。 */
.qc-hist{
  margin-top:var(--qc-s5);
}
.qc-hist>summary{list-style:none}
.qc-hist>summary::-webkit-details-marker{display:none}
.qc-hist .qc-tbl-scroll{margin-top:var(--qc-s3)}

/* --------------------------------------------------------------------------
   7. 「下一步」提示条（放在标题下方，第一条就被读到）
   -------------------------------------------------------------------------- */
.qc-next{
  margin:var(--qc-s3) 0 2px;padding:9px 12px;border-radius:var(--qc-r2);
  font-size:var(--qc-f2);line-height:var(--qc-lh);
  background:#f4f6f8;color:#4b5563;border:1px solid #e6e9ed;
}
.qc-next b{font-weight:600;color:#3c434a}
/* 需要用户动手的，用暖色提醒（不是报错色，避免每次都像出事了） */
.qc-next.need{background:var(--qc-warn-bg);border-color:var(--qc-warn-line);color:#7c4a03}
.qc-next.need b{color:var(--qc-warn)}

/* --------------------------------------------------------------------------
   8. 履约流程节点条（机构端 / 客户端同一套结构）
   -------------------------------------------------------------------------- */
.qc-flow{display:flex;margin:var(--qc-s3) 0 4px}
.qc-flow-step{flex:1;text-align:center;position:relative;font-size:var(--qc-f1);color:var(--qc-text-muted);min-width:0}
.qc-flow-step::before{
  content:"";position:absolute;top:11px;left:calc(-50% + 15px);
  width:calc(100% - 30px);height:2px;background:#e5e7eb;
}
.qc-flow-step:first-child::before{display:none}
.qc-flow-step .dot{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:#fff;
  border:2px solid #d5d9de;color:var(--qc-text-muted);font-size:var(--qc-f1);font-weight:600;
}
.qc-flow-step .lb{display:block;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qc-flow-step.done .dot{background:var(--qc-brand-soft-2);border-color:var(--qc-brand-line);color:var(--qc-brand-ink)}
.qc-flow-step.done::before{background:#bfdbfe}
.qc-flow-step.active .dot{background:var(--qc-brand-solid);border-color:var(--qc-brand-solid);color:#fff}
.qc-flow-step.active::before{background:#bfdbfe}
.qc-flow-step.active .lb{color:var(--qc-text);font-weight:600}

/* --------------------------------------------------------------------------
   9. 客户端注入区（订单详情页）
   -------------------------------------------------------------------------- */
.qc-progress{margin:28px 0 8px}
.qc-progress h2{font-size:var(--qc-f4);margin:0 0 14px;padding:0}
.qc-ui .qc-steps{list-style:none;margin:0;padding:0;display:flex}
.qc-ui .qc-steps li{
  flex:1 1 0;min-width:0;text-align:center;position:relative;
  font-size:var(--qc-f1);line-height:1.4;color:var(--qc-text-faint);padding:24px 2px 0;
}
.qc-ui .qc-steps li::before{
  content:"";position:absolute;top:5px;left:50%;width:11px;height:11px;
  margin-left:-5.5px;border-radius:50%;background:#e5e7eb;z-index:2;
}
.qc-ui .qc-steps li::after{
  content:"";position:absolute;top:10px;left:-50%;width:100%;height:2px;background:#e5e7eb;z-index:1;
}
.qc-ui .qc-steps li:first-child::after{display:none}
.qc-ui .qc-steps li.done{color:var(--qc-text)}
.qc-ui .qc-steps li.done::before{background:var(--qc-brand)}
.qc-ui .qc-steps li.done::after{background:var(--qc-brand)}
.qc-ui .qc-steps li.active{color:var(--qc-brand-ink);font-weight:600}
.qc-ui .qc-steps li.active::before{background:var(--qc-brand);box-shadow:0 0 0 4px var(--qc-brand-soft)}
.qc-ui .qc-steps li.active::after{background:var(--qc-brand)}
.qc-ui .qc-progress-foot{margin-top:var(--qc-s3);font-size:var(--qc-f2);color:var(--qc-text-muted)}
.qc-ui .qc-progress-tip{
  background:var(--qc-warn-bg);border:1px solid var(--qc-warn-line);color:var(--qc-warn);
  border-radius:var(--qc-r2);padding:10px 12px;font-size:var(--qc-f2);margin-top:var(--qc-s3);
}

/* --------------------------------------------------------------------------
   10. 待办队列表
   -------------------------------------------------------------------------- */
.qc-todo-tbl{table-layout:fixed;width:100%}
.qc-todo-tbl tbody td{height:58px;vertical-align:middle;padding:8px 11px}
.qc-todo-tbl tr[data-late="1"]{background:#fdf7f7}
.qc-todo-tbl td.qc-act{white-space:nowrap;text-align:right}
.qc-todo-tbl td.qc-act form{display:inline-block;margin:0 0 0 4px;vertical-align:middle}
.qc-todo-tbl td.qc-act select{
  width:86px;padding:4px 6px;font-size:var(--qc-f1);
  border:1px solid #dcdfe3;border-radius:var(--qc-r1);vertical-align:middle;
}
.qc-todo-tag{display:inline-block;font-size:var(--qc-f1);padding:2px 8px;border-radius:9px;white-space:nowrap}
.qc-tbl-scroll .qc-todo-tbl{min-width:860px}
/* 待办表有逾期红底（tr[data-late="1"]），吸附首列时要把这个底色一起带上，
   否则横滑到右侧时首列会突然变成白色，和所在行对不上。 */
@media (max-width:768px){
  .qc-tbl-scroll .qc-todo-tbl tr[data-late="1"] td:first-child{background:#fdf7f7}
}

/* --------------------------------------------------------------------------
   11. 纸质报告折叠表单
   -------------------------------------------------------------------------- */
.rd-wrap{margin-top:var(--qc-s3)}
.rd-wrap summary{list-style:none;display:inline-block;cursor:pointer}
.rd-form{display:flex;flex-wrap:wrap;gap:var(--qc-s2);margin-top:10px}
.rd-form input{
  flex:1 1 150px;min-width:120px;padding:6px 8px;border-radius:var(--qc-r1);
  border:1px solid var(--qc-line);font-size:var(--qc-f2);
}

/* --------------------------------------------------------------------------
   12. 详情浮层（已停用，保留样式不影响）
   -------------------------------------------------------------------------- */
.qc-drawer{position:fixed;inset:0;z-index:99990;display:none}
.qc-drawer.on{display:block}
.qc-drawer-mask{position:absolute;inset:0;background:rgba(15,23,42,.35)}
.qc-drawer-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(620px,94vw);
  background:#f5f6f7;box-shadow:-8px 0 24px rgba(15,23,42,.14);
  display:flex;flex-direction:column;overflow:hidden;
}
.qc-drawer-x{
  position:absolute;top:10px;right:12px;z-index:2;width:32px;height:32px;
  border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#3c434a;
  font-size:20px;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.1);
}
.qc-drawer-body{flex:1;overflow-y:auto;padding:18px 20px 28px}
.qc-drawer-load{color:var(--qc-text-muted);font-size:var(--qc-f2);text-align:center;padding:28px 0}

/* --------------------------------------------------------------------------
   13. 响应式（统一 1024 / 768 / 480）
   -------------------------------------------------------------------------- */
@media (max-width:768px){
  .qc-grid2{grid-template-columns:1fr;gap:16px}
  .qc-grid2 .item:nth-last-child(-n+2){border-bottom:1px solid #f0f0f1}
  .qc-grid2 .item:last-child{border-bottom:0}
  .qc-bar{flex-direction:column;align-items:stretch}
  .qc-flow-step .lb{font-size:11px}
}
@media (max-width:480px){
  .qc-ui .qc-steps li{font-size:11px;padding-top:22px}
  .qc-progress h2{font-size:var(--qc-f3)}
  .qc-drawer-panel{width:100vw}
  .qc-drawer-body{padding:14px 14px 24px}
}