/* ==========================================================================
   快测 · 统一布局与排版层  qc-layout.css
   --------------------------------------------------------------------------
   职责边界（重要）：
     qc-layout.css  ← 只放「框架 / 栅格 / 排版 / 间距工具 / 响应式」
     qc-design.css  ← 只放「组件外观 / 状态 / 无障碍」
     qc-front.css   ← 只放「前台特有组件」（上传区、履约流程条等）

   加载顺序：qc-layout → qc-design → qc-front
   （同名字类只允许在 qc-design.css 定义一次，其余文件不再重定义，
     避免出现「前台一套、后台一套」的同义不同形。）

   断点统一为三档，全站只用这三个值：
     1024px  侧栏转上下 / 两栏转单栏
      768px  信息网格转单列 / 横条转竖排
      480px  表格转卡片 / 按钮加大可点区
   ========================================================================== */

:root{
  /* ---- 容器与栏宽 ---- */
  /*
   * 容器尺寸对齐主题（2026-11-03 实测）：
   *   主题 .container = 外宽 1230px + 左右各 15px 内边距 → 内容 1200px
   *   原来这里是 1240/24 → 内容 1192px，边界比主题各内缩 4~15px，
   *   表现就是"插件的卡片边框跟主题的内容边框对不齐"。
   *   现在两边同宽同留白，内容列严丝合缝。
   */
  --qc-max:1230px;          /* 内容最大宽度（与主题 .container 一致） */
  --qc-pad:15px;            /* 容器左右留白（与主题一致） */
  --qc-side-w:200px;        /* 机构端侧栏 */
  --qc-rail-w:176px;        /* 后台左栏 */
  --qc-gap:20px;            /* 栏间距 */

  /* ---- 色彩：唯一来源，组件层一律引用变量，不写字面色值 ---- */
  /*
   * 品牌色阶（2026-11-02 深度优化：全站统一到 #0088ff）
   *
   * 全部由 HSL(208, 100%, L) 派生 —— 同色相、同饱和度，只变明度，
   * 保证任何一档与另一档放在一起都协调。
   *
   * 【为什么要拆成"品牌色"和"实底色"两个】
   * #0088ff 配白字只有 3.52:1，达不到 WCAG AA 的 4.5:1（正文级）。
   * 所以拆成两个用途：
   *   --qc-brand        #0088ff —— 品牌识别色：图标、进度条、装饰条、
   *                                  大号标题、选中态左侧强调条（非文字承载）
   *   --qc-brand-solid  #0067c2 —— 实底按钮底色：配白字 5.65:1 ✅
   *   --qc-brand-ink    #0062b8 —— 链接与品牌色文字：白底 6.11:1 ✅
   * 三者同源，用户看到的是"同一个蓝"，但每一处都过对比度。
   */
  --qc-brand:#0088ff;        /* 品牌识别色（装饰，不承载小字） */
  --qc-brand-hover:#0078e0;  /* 悬停 */
  --qc-brand-active:#0067c2; /* 按下 */
  --qc-brand-solid:#0067c2;  /* 实底按钮底色（白字 5.65:1 ✅） */
  --qc-brand-ink:#0062b8;    /* 品牌色文字/链接（白底 6.11:1 ✅） */
  --qc-brand-soft:#f0f8fe;   /* 选中底 */
  --qc-brand-soft-2:#e3f1fd; /* 次级选中底 / 悬停底 */
  --qc-brand-line:#badbf7;   /* 描边 */
  --qc-brand-ring:rgba(0,136,255,.22); /* 聚焦光环 */
  --qc-brand-disabled:#9ec9f5;/* 禁用态填充 */
  --qc-brand-disabled-ink:#7f9db5; /* 禁用态文字（对白底 2.9:1，仅用于禁用，不承载信息） */

  --qc-text-strong:#111827; /* 标题 */
  --qc-text:#1d2327;        /* 正文 */
  --qc-text-muted:#6b7280;  /* 辅助（≥4.5:1，可承载信息） */
  --qc-text-faint:#9ca3af;  /* 极弱，仅装饰/占位，不承载信息 */

  --qc-bg:#f6f7f9;          /* 页面底 */
  --qc-surface:#ffffff;     /* 卡片面 */
  --qc-surface-2:#f8f9fa;   /* 次级面 */
  --qc-surface-3:#fcfcfd;   /* 三级面 */

  --qc-line:#dcdcde;        /* 主描边 */
  --qc-line-soft:#eef1f5;  /* 分割线 */

  --qc-ok:#0b7a5c;      --qc-ok-bg:#ecfdf5;   --qc-ok-line:#a7f3d0;
  --qc-warn:#92400e;    --qc-warn-bg:#fff8ed; --qc-warn-line:#fde3bd;
  --qc-danger:#b32d2e;  --qc-danger-bg:#fef2f2;--qc-danger-line:#fecaca;
  --qc-info:#0062b8;    --qc-info-bg:#f0f8fe; --qc-info-line:#badbf7;

  /* ---- 间距（4px 基数，七档封闭）---- */
  --qc-s1:4px; --qc-s2:8px; --qc-s3:12px; --qc-s4:16px; --qc-s5:24px; --qc-s6:36px; --qc-s7:48px;

  /* ---- 字阶（六档，下限 12px）---- */
  --qc-f1:12px; --qc-f2:13px; --qc-f3:14px; --qc-f4:16px; --qc-f5:18px; --qc-f6:22px;
  --qc-lh:1.7;              /* 正文行高 */
  --qc-lh-tight:1.45;       /* 标题行高 */

  /* ---- 圆角 / 阴影 ---- */
  --qc-r1:6px; --qc-r2:8px; --qc-r3:12px;
  --qc-sh1:0 1px 2px rgba(29,35,39,.06);
  --qc-sh2:0 2px 10px rgba(29,35,39,.08);

  /* ---- 层级 ---- */
  --qc-z-sticky:20; --qc-z-float:40; --qc-z-top:60;

  /* ---- 断点 ---- */
  --qc-bp-lg:1024px;
  --qc-bp-md:768px;
  --qc-bp-sm:480px;
}

/* --------------------------------------------------------------------------
   1. 页面框架（三端共用同一套结构语义）
   --------------------------------------------------------------------------
   <div class="qc-frame">
     <header class="qc-frame__head">
       <h2 class="qc-frame__title">…</h2>
       <p class="qc-frame__sub">…</p>
       <div class="qc-frame__actions">…</div>
     </header>
     <div class="qc-frame__body">
       <aside class="qc-frame__side">…</aside>
       <main class="qc-frame__main">…</main>
     </div>
     <footer class="qc-frame__foot">…</footer>
   </div>
   -------------------------------------------------------------------------- */
.qc-frame{
  max-width:var(--qc-max);
  margin:0 auto;
  padding:0 var(--qc-pad) var(--qc-s7);
  min-width:0;
}
.qc-frame--wide{max-width:1440px}          /* 后台表格型页面 */
.qc-frame--narrow{max-width:1000px}        /* 单列表单页：760 太窄，和主题 1200 落差过大 */

/*
 * 桌面端窄页居中（2026-11-02 桌面端优化）。
 *
 * 【实测】查单页 / 报告中心的内容区只有 630~740px，
 * 而主题的内容列在 1440 视口下宽 742px 且**左对齐** ——
 * 结果页面右边空出 450px，整页看着像"没加载完"。
 *
 * 窄页（查单、报告）本来就是一个居中的输入区，
 * 现在让它在可用宽度里居中，不再贴着左边。
 */
@media (min-width:1200px){
  .qc-frame--narrow{
    margin-left:auto;margin-right:auto;
  }
  /* 框架整体在主题内容列里也居中（内容列本身左对齐时尤其需要） */
  .qc-frame{
    margin-left:auto;margin-right:auto;
  }
}

.qc-frame__head{
  display:flex;align-items:flex-end;gap:var(--qc-s4);flex-wrap:wrap;
  padding:var(--qc-s5) 0 var(--qc-s3);
  margin-bottom:var(--qc-s4);
  border-bottom:1px solid var(--qc-line-soft);
}
.qc-frame__title{
  font-size:var(--qc-f5);font-weight:600;line-height:var(--qc-lh-tight);
  color:var(--qc-text-strong);margin:0;
}
/* 工作台/详情页的页头：更紧凑，标题与副标题同一行 */
.qc-frame__head--slim{
  padding:var(--qc-s2) 0 var(--qc-s3);margin-bottom:var(--qc-s3);
  align-items:baseline;
}
.qc-frame__head--slim .qc-frame__title{font-size:var(--qc-f4)}
.qc-frame__sub{
  font-size:var(--qc-f1);color:var(--qc-text-muted);margin:0;
  padding-bottom:2px;
}
.qc-frame__actions{
  margin-left:auto;display:flex;align-items:center;gap:var(--qc-s2);flex-wrap:wrap;
}

/* 主体两栏：侧栏 + 内容 */
.qc-frame__body{
  display:grid;
  grid-template-columns:var(--qc-side-w) minmax(0,1fr);
  gap:var(--qc-gap);
  align-items:start;
}
.qc-frame__body--full{grid-template-columns:minmax(0,1fr)}
.qc-frame__side{
  position:sticky;top:var(--qc-s3);align-self:start;
  background:var(--qc-surface);border:1px solid var(--qc-line);
  border-radius:var(--qc-r2);padding:var(--qc-s2);
}
.qc-frame__main{min-width:0}

/* --------------------------------------------------------------------------
   1b. 桌面端布局基线（2026-11-02 深度优化）
   --------------------------------------------------------------------------
   【实测背景】
   1440×900 视口下量到的实际值：
     · 内容区只有 952px，右侧空 150px —— 容器宽度令牌没生效
     · 侧栏 172px，菜单项 154×38，字号 13.5px
     · 主栏块的垂直间距有 7 种值（12/11/15/18/8/20/9）—— 节奏碎
     · 侧栏项间距 4 种值（6/2/3/8）
     · 主题导航链接的热区只有 48×16，订单号链接 23×18

   【桌面端策略：只在 ≥1200px 时启用】
   1. 容器真正占满可用宽度（不再被主题的内容列卡在 952px）
   2. 侧栏加宽到 208px（菜单项文字 5 字不折行）+ 吸顶
   3. 分区间距收敛到 4 档（16/24/32/48），消除"碎"
   4. 侧栏项间距统一
   5. 交互元素热区不小于 32px 高
   -------------------------------------------------------------------------- */
@media (min-width:1200px){
  /*
   * 容器宽度（2026-11-02 桌面端优化，实测校正）。
   *
   * 【实测】1440 视口下的真实链路：
   *   .main.container  1230px
   *     → ARTICLE.content-full  1200px（左右 padding 30）
   *       → .entry / .entry-content  1140px
   *         → .qc-desk（快测框架） 1140px
   *   侧栏 172 + gap 24 → 主栏只剩 952px
   *
   * 也就是说：真正吃掉宽度的是主题 ARTICLE 的 30px padding，
   * 而不是快测自己的容器上限。
   *
   * 【现在】
   *   ① 框架撑出这 30px（--qc-frame-bleed）→ 总宽 1200px
   *   ② 侧栏保持 180px（5 个菜单够用），把宽度让给主栏
   *   → 主栏 1200 − 180 − 24 = 996px（原来 952px，+44px）
   *
   * 侧栏**不能**加宽：它是从主栏里扣的，加宽等于拿主栏的空间去填侧栏。
   */
  .qc-frame{
    max-width:none;
    /* 关键：宽度要**加上** bleed，负 margin 只是把它挪回左边。
       只写 width:100% + margin-left:-30px 会让框架左移 30px 但宽度不变（实测）。 */
    width:calc(100% + var(--qc-frame-bleed, 0px) * 2);
    margin-left:calc(-1 * var(--qc-frame-bleed, 0px));
    margin-right:calc(-1 * var(--qc-frame-bleed, 0px));
    /*
     * 2026-11-03 修正：原来这里把左右内边距归零，结果
     *   侧栏 172 + 间距 24 + 主区 1004 = 1200 —— **正好顶满容器两端**，
     * 看起来像"内容撑爆边框"，和主题标题条（内含 16px 留白）也不在一个呼吸节奏上。
     * 改成两侧各留 16px：内容净宽 1168，侧栏 172 + 24 + 主区 972。
     */
    padding-left:16px;padding-right:16px;
  }
  /* ⚠️ 窄页（查单 / 报告中心）要保留宽度上限 ——
     上面那条 .qc-frame{max-width:none} 特异性相同、位置更靠后，
     会把 .qc-frame--narrow 的 760px 上限一起干掉（实测：
     查单页输入框被拉成 900px 宽的单行框，很难用）。
     这里在它之后重新写回上限。 */
  body.qc-page .qc-frame--narrow{
    max-width:1000px;
    margin-left:auto;
    margin-right:auto;
  }
  /* 机构端短代码页：撑出主题 ARTICLE 的 30px 内边距 */
  body.qc-page .qc-frame{--qc-frame-bleed:30px}

  .qc-frame__body{
    /* 侧栏保持 172px：5 个菜单用不满 180px，加宽的部分应该给主栏。
       侧栏是从主栏里扣的 —— 加宽侧栏 = 拿主栏的空间去填侧栏（实测验证过）。 */
    grid-template-columns:172px minmax(0,1fr);
    gap:24px;
  }
  .qc-frame__side{
    padding:var(--qc-s3);
    /* 吸顶：内容滚动时导航始终可见 */
    position:sticky;
    top:var(--qc-s4);
    max-height:calc(100vh - var(--qc-s6));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  /* 页头：标题与操作区同一基线 */
  .qc-frame__head{
    padding:var(--qc-s5) 0 var(--qc-s3);
    margin-bottom:var(--qc-s5);
  }
  .qc-frame__head--slim{
    padding:var(--qc-s3) 0 var(--qc-s2);
    margin-bottom:var(--qc-s4);
  }
}

/* --------------------------------------------------------------------------
   1c. 分区间距（收敛到 4 档）
   --------------------------------------------------------------------------
   原来主栏直接子块各写各的 margin-bottom，量出来 7 种值。
   现在统一用这四个语义类，页面里不再随手写 margin-bottom。
   -------------------------------------------------------------------------- */
.qc-sect + .qc-sect{margin-top:var(--qc-s5)}   /* 24px —— 同级区块 */
.qc-sect--lead{margin-top:0}                    /* 首块不加 */
.qc-sect--major{margin-top:var(--qc-s6)}        /* 32px —— 大分界 */
.qc-sect--minor{margin-top:var(--qc-s3)}        /* 12px —— 紧密相关 */

/* 页脚条：机构工作台与客户端共用 */
.qc-frame__foot{
  margin-top:var(--qc-s6);padding-top:var(--qc-s3);
  border-top:1px solid var(--qc-line-soft);
  font-size:var(--qc-f1);color:var(--qc-text-muted);
  display:flex;gap:var(--qc-s4);flex-wrap:wrap;
}

/* 区块：卡片之间的垂直节奏统一在这里，不在页面里各写各的 */
.qc-frame__sec{margin-bottom:var(--qc-s4)}
.qc-frame__sec:last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   1d. 客户端页面桌面端（2026-11-02 新增）
   --------------------------------------------------------------------------
   【实测的问题】
     客户端三页（我的订单 / 查订单 / 报告中心）在 1440 视口下：
       · 正文栏只有 870px，右侧空出约 890px
       · 我的订单页更窄 —— 账户导航 205px 挤在 810px 的容器里，
         订单表只剩 551px，"检测进度"列被压到最窄
       · 页面底部还有一大段空白（内容撑不满视口）

     根因不是快测自己限的宽，是**主题**给"有侧栏的页面"固定了
     .content { width: 870px }（实测命中的就是这条）。
     机构端之所以是 1200px，是因为它走 page-no-sidebar 模板。

   【现在】
     ① 客户端页面在桌面端把正文栏撑到 1200px（与机构端一致）
     ② 撑出的方式同样用"负 margin + 加宽"（见 1b 节的血泪注释：
        只写 width:100% + 负 margin 不会变宽）
     ③ 我的订单页把账户导航从"占位 205px 的独立列"改成上方横排，
        订单表拿到整幅宽度 —— 进度列不再被挤扁

   ⚠️ 范围限定：只作用于 body.qc-page（快测自己的页面），
      站内其它文章页的主题布局不受影响。
   -------------------------------------------------------------------------- */
@media (min-width:1200px){
  /* ① 正文栏撑到 1200px */
  body.qc-page .content{
    width:1200px;
    max-width:none;
  }

  /* ② 我的订单页：账户导航横排，订单表拿到整幅宽度
     ⚠️ 选择器必须是 body.qc-page.woocommerce-account ——
        WooCommerce 把 .woocommerce-account 加在 **body 自身**上，
        写成后代选择器（body.qc-page .woocommerce-account）永远匹配不上
        （实测：规则命中列表里根本没有我这一条）。 */
  body.qc-page.woocommerce-account .woocommerce-MyAccount-navigation{
    width:auto;
    float:none;
    margin:0 0 var(--qc-s4);
    padding-bottom:var(--qc-s3);
    border-bottom:1px solid var(--qc-line-soft);
  }
  body.qc-page.woocommerce-account .woocommerce-MyAccount-navigation ul{
    display:flex;
    flex-wrap:wrap;
    gap:var(--qc-s3);
    margin:0;
    padding:0;
  }
  body.qc-page.woocommerce-account .woocommerce-MyAccount-navigation li{
    margin:0;
    padding:0;
    border:0;
  }
  body.qc-page.woocommerce-account .woocommerce-MyAccount-content{
    width:100%;
    float:none;
  }
}

/* --------------------------------------------------------------------------
   2. 侧栏内部结构（与后台左栏同构，不同色而已）
   --------------------------------------------------------------------------
   【间距统一】实测原来侧栏各项间距有 4 种值（6/2/3/8）——
   机构信息块 8px、菜单项 2px、退出登录 8px、其它 3px。
   现在：菜单项之间统一 2px、机构块与菜单之间 8px、退出项单独分隔。
   -------------------------------------------------------------------------- */
.qc-side__org{
  padding:var(--qc-s3) var(--qc-s3) var(--qc-s3);
  border-bottom:1px solid var(--qc-line-soft);
  margin-bottom:var(--qc-s2);
}
.qc-side__org b{display:block;font-size:var(--qc-f2);line-height:1.5;color:var(--qc-text);word-break:break-word}
.qc-side__org span{display:block;font-size:var(--qc-f1);color:var(--qc-text-muted);margin-top:2px}
.qc-side__org em{color:var(--qc-warn);font-style:normal}

.qc-side__item{
  display:flex;align-items:center;gap:var(--qc-s2);
  /* 文字与角标挤在一行时，文字会被压成"消…"。给文字 min-width:0 + 省略号，
     角标固定不缩，就不会互相抢宽度（2026-11-03 截图实测）。 */
  min-height:34px;                 /* 桌面端热区不小于 34px */
  padding:7px var(--qc-s3);
  border-radius:var(--qc-r1);
  font-size:var(--qc-f2);color:var(--qc-text);text-decoration:none;
  margin-bottom:2px;position:relative;line-height:1.5;
}
.qc-side__item:hover{background:var(--qc-surface-2);color:var(--qc-brand-ink);text-decoration:none}
.qc-side__item.is-on{background:var(--qc-brand-soft);color:var(--qc-brand-ink-on-soft);font-weight:600}
.qc-side__item.is-on::before{
  content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;
  border-radius:0 3px 3px 0;background:var(--qc-brand);
}
/* 侧栏分组标题：把菜单按"日常处理 / 商务 / 资质"分组，长列表才找得到 */
.qc-side__group{
  padding:var(--qc-s4) var(--qc-s3) var(--qc-s1);
  font-size:var(--qc-f1);color:var(--qc-text-faint);
  letter-spacing:.4px;
}
.qc-side__group:first-child{padding-top:var(--qc-s1)}
.qc-side__count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;margin-left:auto;
  border-radius:9px;background:var(--qc-brand-solid);color:#fff;
  font-size:11px;font-weight:700;line-height:18px;
}
.qc-side__out{
  display:block;padding:9px var(--qc-s3);margin-top:var(--qc-s3);
  border-top:1px solid var(--qc-line-soft);
  font-size:var(--qc-f1);color:var(--qc-text-muted);text-decoration:none;
}
.qc-side__out:hover{color:var(--qc-danger);text-decoration:none}

/* --------------------------------------------------------------------------
   3. 栅格
   -------------------------------------------------------------------------- */
.qc-cols{display:grid;gap:var(--qc-s4)}
.qc-cols--2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.qc-cols--side{grid-template-columns:260px minmax(0,1fr)}
.qc-cols--auto{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.qc-cols--cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

/* --------------------------------------------------------------------------
   4. 排版层级
   -------------------------------------------------------------------------- */
.qc-h1{font-size:var(--qc-f5);font-weight:600;line-height:var(--qc-lh-tight);color:var(--qc-text-strong);margin:0 0 var(--qc-s3)}
.qc-h2{font-size:var(--qc-f4);font-weight:600;line-height:var(--qc-lh-tight);color:var(--qc-text-strong);margin:0 0 var(--qc-s2)}
.qc-h3{font-size:var(--qc-f3);font-weight:600;line-height:var(--qc-lh-tight);color:var(--qc-text);margin:0 0 var(--qc-s2)}
.qc-lead{font-size:var(--qc-f2);line-height:var(--qc-lh);color:var(--qc-text-muted);margin:0 0 var(--qc-s3)}
.qc-body{font-size:var(--qc-f2);line-height:var(--qc-lh);color:var(--qc-text);margin:0 0 var(--qc-s3)}
.qc-cap{font-size:var(--qc-f1);line-height:1.6;color:var(--qc-text-muted);margin:0}
.qc-strong{font-weight:600;color:var(--qc-text-strong)}
.qc-num{font-variant-numeric:tabular-nums}
.qc-clamp2{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;
}

/* 段落与列表的段落间距统一 */
.qc-p{margin:0 0 var(--qc-s3);font-size:var(--qc-f2);line-height:var(--qc-lh)}
.qc-p:last-child{margin-bottom:0}
.qc-list{margin:0 0 var(--qc-s3);padding-left:var(--qc-s5);font-size:var(--qc-f2);line-height:var(--qc-lh)}
.qc-list li{margin:0 0 var(--qc-s1)}

/* --------------------------------------------------------------------------
   5. 间距工具（替代散落的内联 margin/padding）
   -------------------------------------------------------------------------- */
.qc-m-0{margin:0}
.qc-mt-0{margin-top:0}
.qc-mt-1{margin-top:var(--qc-s1)}
.qc-mt-2{margin-top:var(--qc-s2)}
.qc-mt-3{margin-top:var(--qc-s3)}
.qc-mt-4{margin-top:var(--qc-s4)}
.qc-mt-5{margin-top:var(--qc-s5)}
.qc-mb-0{margin-bottom:0}
.qc-mb-1{margin-bottom:var(--qc-s1)}
.qc-mb-2{margin-bottom:var(--qc-s2)}
.qc-mb-3{margin-bottom:var(--qc-s3)}
.qc-mb-4{margin-bottom:var(--qc-s4)}
.qc-mb-5{margin-bottom:var(--qc-s5)}
.qc-p-0{padding:0}
.qc-p-3{padding:var(--qc-s3)}
.qc-p-4{padding:var(--qc-s4)}
.qc-gap-2{gap:var(--qc-s2)}
.qc-gap-3{gap:var(--qc-s3)}
.qc-gap-4{gap:var(--qc-s4)}
.qc-flex{display:flex}
.qc-flex-wrap{flex-wrap:wrap}
.qc-block{display:block}
.qc-ta-right{text-align:right}
.qc-ta-center{text-align:center}
.qc-items-center{align-items:center}
.qc-justify-between{justify-content:space-between}
.qc-flex-1{flex:1;min-width:0}
.qc-w-full{width:100%}
.qc-nounderline{text-decoration:none}
.qc-nounderline:hover{text-decoration:none}

/* 定宽列：表格里原来用 style="width:120px" 的 20+ 处 */
.qc-w-60{width:60px} .qc-w-70{width:70px} .qc-w-74{width:74px} .qc-w-78{width:78px} .qc-w-80{width:80px}
.qc-w-84{width:84px} .qc-w-86{width:86px} .qc-w-90{width:90px} .qc-w-92{width:92px} .qc-w-94{width:94px}
.qc-w-96{width:96px} .qc-w-100{width:100px} .qc-w-104{width:104px} .qc-w-110{width:110px}
.qc-w-118{width:118px} .qc-w-120{width:120px} .qc-w-130{width:130px}
.qc-w-140{width:140px} .qc-w-150{width:150px} .qc-w-158{width:158px} .qc-w-160{width:160px}
.qc-w-170{width:170px} .qc-w-180{width:180px} .qc-w-186{width:186px} .qc-w-200{width:200px}
.qc-w-240{width:240px} .qc-w-260{width:260px} .qc-w-400{width:400px} .qc-w-420{width:420px} .qc-w-520{width:520px}
.qc-w-860{width:860px} .qc-w-full{width:100%}
.qc-w-auto{width:auto}
.qc-my-2{margin:6px 0}
.qc-pt-2{padding-top:var(--qc-s2)}
.qc-c-ok{color:var(--qc-ok)}
.qc-c-warn{color:var(--qc-warn)}
.qc-c-danger{color:var(--qc-danger)}

/* 状态小圆点（表格内 6px） */
.qc-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:5px;vertical-align:middle;background:var(--qc-text-faint);
}
.qc-dot--danger{background:var(--qc-danger)}
.qc-dot--warn{background:var(--qc-warn)}
.qc-dot--ok{background:var(--qc-ok)}
.qc-dot--lg{width:20px;height:20px;margin-right:0;color:#fff;font-size:11px;text-align:center;line-height:20px}

/* 表单宽度变体 */
.qc-input--wide{flex:1;max-width:420px;padding:7px 9px;border:1px solid #dcdfe3;border-radius:var(--qc-r2);line-height:1.7;font:inherit;font-size:var(--qc-f2)}
.qc-frame--form{max-width:860px}

/* --------------------------------------------------------------------------
   6. 响应式（三档，全站统一）
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  :root{--qc-pad:16px;--qc-gap:16px}
  .qc-frame__body{grid-template-columns:minmax(0,1fr)}
  .qc-frame__side{
    position:static;display:flex;flex-wrap:wrap;gap:var(--qc-s1);
    padding:var(--qc-s2);align-items:center;
  }
  .qc-side__org{display:none}
  .qc-side__item{margin:0;padding:7px var(--qc-s3)}
  .qc-side__out{margin:0;border-top:0;padding:7px var(--qc-s3)}
  .qc-cols--2,.qc-cols--side{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:768px){
  :root{--qc-pad:14px}
  .qc-frame__head{padding-top:var(--qc-s4)}
  .qc-frame__title{font-size:var(--qc-f4)}
  .qc-frame__actions{margin-left:0;width:100%}
  .qc-frame__actions .qc-btn{flex:1 1 auto}
}
@media (max-width:480px){
  :root{--qc-pad:12px;--qc-f5:17px;--qc-f4:15px}
  .qc-frame__head{padding-top:var(--qc-s3)}
  .qc-kv{flex-direction:column;gap:2px;align-items:stretch}
  .qc-kv>dt{flex:none}
}

/* 侧栏菜单：文字可省略、角标不缩 */
.qc-side__item>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qc-side__count{flex:0 0 auto}