/* ==========================================================================
   快测 · 统一组件层  qc-design.css
   --------------------------------------------------------------------------
   2026-11-02 重构说明（重要）：
   ① 本文件**不再定义 :root 令牌**，令牌唯一来源是 qc-layout.css。
      之前 qc-design.css 与 class-qc-front.php 的内联 CSS 各有一套同名变量
      （品牌色 #2271b1 vs #2563EB、字号 11.5~18px 若干档、边框 4 种灰），
      同名类各写一份，靠加载顺序决定谁生效 —— 这是"页面之间看起来不像一套"的根因。
   ② 同名类只在本文件定义一次，前台/后台/客户端共用。
   ③ 度量统一（前台原本更宽松可读，后台偏紧）：
      按钮 32px 高 · 徽章 2px 9px · 表格单元格 12px 14px · 边框统一 --qc-line
   ④ 断点统一为 1024 / 768 / 480 三档（原本散落 600 / 780 / 820 / 960）。
   ⑤ 保留旧修饰符别名（.sm/.ghost/.gray/.on/.bad/.warn），避免改坏历史标记。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 基础
   -------------------------------------------------------------------------- */
.qc-ui{
  font:var(--qc-f2)/var(--qc-lh) -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--qc-text);
  -webkit-font-smoothing:antialiased;
}
.qc-ui *{box-sizing:border-box}
.qc-ui h1,.qc-ui h2,.qc-ui h3,.qc-ui h4,.qc-ui p{margin:0}
.qc-ui a{color:var(--qc-brand);text-decoration:none}
.qc-ui a:hover{text-decoration:underline}
.qc-ui :focus-visible{outline:2px solid var(--qc-brand);outline-offset:2px;border-radius:3px}

/* --------------------------------------------------------------------------
   2. 卡片 / 面板
   -------------------------------------------------------------------------- */
.qc-card{
  background:var(--qc-surface);border:1px solid var(--qc-line);
  border-radius:var(--qc-r2);padding:14px var(--qc-s4);
  margin:0 0 var(--qc-s3);box-shadow:var(--qc-sh1);
}
.qc-card:last-child{margin-bottom:0}
.qc-card-title{font-size:var(--qc-f3);font-weight:600;color:var(--qc-text);margin:0 0 var(--qc-s2)}
.qc-card-sub{font-size:var(--qc-f1);color:var(--qc-text-muted);margin-top:var(--qc-s1)}
.qc-card-flat{box-shadow:none}
.qc-panel{background:var(--qc-surface-2);border:1px solid var(--qc-line);border-radius:var(--qc-r3);padding:var(--qc-s3)}
.qc-panel-inset{background:var(--qc-surface-2);border-radius:var(--qc-r3);padding:var(--qc-s3)}

/* --------------------------------------------------------------------------
   3. 键值行（标签定宽 84px，禁止 space-between）
   -------------------------------------------------------------------------- */
.qc-kv{display:flex;gap:var(--qc-s3);align-items:baseline;padding:var(--qc-s1) 0;font-size:var(--qc-f2)}
.qc-kv>dt{flex:0 0 84px;color:var(--qc-text-muted)}
.qc-kv>dd{flex:1;min-width:0;color:var(--qc-text);margin:0}
.qc-kv-list{margin:0}

/* span 版键值行（前台历史标记），与 .qc-kv 同度量 */
.qc-row{display:flex;gap:var(--qc-s3);align-items:baseline;padding:var(--qc-s1) 0;font-size:var(--qc-f2)}
.qc-row>span:first-child{flex:0 0 84px;color:var(--qc-text-muted)}
.qc-row>span:last-child{flex:1;min-width:0;color:var(--qc-text)}

/* --------------------------------------------------------------------------
   4. 按钮（32px 高统一；.sm/.ghost/.gray 为历史别名）
   -------------------------------------------------------------------------- */
.qc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--qc-s1);
  height:32px;padding:0 var(--qc-s4);border:1px solid var(--qc-brand);
  border-radius:var(--qc-r1);background:var(--qc-brand);color:#fff;
  font:inherit;font-size:var(--qc-f2);cursor:pointer;white-space:nowrap;
  text-decoration:none;transition:background var(--qc-t-fast,120ms),border-color var(--qc-t-fast,120ms);
}
.qc-btn:hover{background:var(--qc-brand-hover);border-color:var(--qc-brand-hover);text-decoration:none}
.qc-btn.is-ghost,.qc-btn.ghost{background:#fff;color:var(--qc-brand);border-color:var(--qc-brand)}
.qc-btn.is-ghost:hover,.qc-btn.ghost:hover{background:var(--qc-brand-soft);text-decoration:none}
.qc-btn.is-gray,.qc-btn.gray{background:var(--qc-surface);border-color:var(--qc-line);color:var(--qc-text)}
.qc-btn.is-gray:hover,.qc-btn.gray:hover{background:var(--qc-surface-2);text-decoration:none}
.qc-btn.is-danger,.qc-btn.danger{background:var(--qc-danger);border-color:var(--qc-danger)}
.qc-btn.is-danger:hover,.qc-btn.danger:hover{filter:brightness(.94)}
.qc-btn.is-sm,.qc-btn.sm{height:26px;padding:0 var(--qc-s3);font-size:var(--qc-f1)}
.qc-btn.is-lg{height:36px;font-size:var(--qc-f3);padding:0 18px}
.qc-btn[disabled],.qc-btn.is-disabled{background:#f0f0f1;border-color:#f0f0f1;color:#a7aaad;cursor:not-allowed}
.qc-btn.is-block{width:100%}
.qc-btn-row{display:flex;flex-wrap:wrap;gap:var(--qc-s2);align-items:center}
.qc-btn-row.is-end{justify-content:flex-end}

/* --------------------------------------------------------------------------
   5. 徽章 / 芯片
   -------------------------------------------------------------------------- */
.qc-badge{
  display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;
  background:#f3f4f6;color:#374151;font-size:var(--qc-f1);line-height:1.6;white-space:nowrap;
}
.qc-badge.is-ok,.qc-badge.on{background:var(--qc-ok-bg);color:var(--qc-ok);border:1px solid var(--qc-ok-line)}
.qc-badge.is-warn,.qc-badge.warn{background:var(--qc-warn-bg);color:var(--qc-warn);border:1px solid var(--qc-warn-line)}
.qc-badge.is-danger,.qc-badge.bad{background:var(--qc-danger-bg);color:var(--qc-danger);border:1px solid var(--qc-danger-line)}
.qc-badge.is-info,.qc-badge.todo{background:var(--qc-info-bg);color:var(--qc-info);border:1px solid var(--qc-info-line)}
.qc-badge.is-muted{background:#f3f4f6;color:var(--qc-text-muted);border:1px solid var(--qc-line-soft)}

.qc-chips{display:flex;flex-wrap:wrap;gap:var(--qc-s2);align-items:center}
.qc-chip{
  display:inline-flex;align-items:center;gap:var(--qc-s1);height:28px;padding:0 var(--qc-s3);
  border:1px solid var(--qc-line);border-radius:999px;background:var(--qc-surface);
  color:var(--qc-text);font-size:var(--qc-f1);cursor:pointer;line-height:1.6;
}
.qc-chip:hover{border-color:var(--qc-brand-line);background:var(--qc-brand-soft);text-decoration:none}
.qc-chip.is-on,.qc-chip.on{border-color:var(--qc-brand);color:var(--qc-brand);background:var(--qc-brand-soft);font-weight:600}
.qc-chip.is-bad,.qc-chip-bad{color:var(--qc-danger);border-color:var(--qc-danger-line)}
.qc-chip-count{font-size:var(--qc-f1);color:var(--qc-text-muted)}

/* --------------------------------------------------------------------------
   6. 表格（通栏；窄屏横滚由 .qc-tbl-wrap / .qc-tbl-scroll 承担）
   -------------------------------------------------------------------------- */
.qc-tbl{
  width:100%;border-collapse:collapse;background:var(--qc-surface);
  font-size:var(--qc-f2);table-layout:fixed;
}
.qc-tbl th{
  background:var(--qc-surface-2);font-size:var(--qc-f1);font-weight:600;color:var(--qc-text-muted);
  text-align:left;padding:9px 14px;border-bottom:1px solid var(--qc-line);white-space:nowrap;
}
.qc-tbl td{
  padding:12px 14px;font-size:var(--qc-f2);border-bottom:1px solid #eceef0;vertical-align:top;
}
.qc-tbl tr:last-child td{border-bottom:0}
.qc-tbl th,.qc-tbl td{box-sizing:border-box}
.qc-tbl tbody tr:hover td{background:#fafbfc}
.qc-tbl .is-num,.qc-tbl .qc-num{text-align:right;font-variant-numeric:tabular-nums}
.qc-tbl .is-muted{color:var(--qc-text-muted)}
.qc-tbl .no{color:var(--qc-text-faint);font-size:var(--qc-f1)}
.qc-tbl .qc-sub{display:block;font-size:var(--qc-f1);line-height:1.6;color:var(--qc-text-muted)}
.qc-tbl-wrap,.qc-tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.qc-tbl-wrap .qc-tbl{min-width:720px}
.qc-tbl-wrap .qc-tbl th:first-child,.qc-tbl-wrap .qc-tbl td:first-child{
  position:sticky;left:0;background:inherit;z-index:1;
}
.qc-tbl-wrap .qc-tbl th:first-child{background:var(--qc-surface-2)}
.qc-tbl-hint{font-size:var(--qc-f1);color:var(--qc-text-faint);margin-top:var(--qc-s1)}

/* --------------------------------------------------------------------------
   7. 提示条（成功 / 警告 / 危险 / 信息）
   -------------------------------------------------------------------------- */
.qc-alert{
  display:flex;gap:var(--qc-s3);align-items:flex-start;padding:10px var(--qc-s3);
  border:1px solid var(--qc-line);border-radius:var(--qc-r2);background:var(--qc-surface-2);
  font-size:var(--qc-f2);line-height:var(--qc-lh);margin-bottom:var(--qc-s3);
}
.qc-alert.is-ok{background:var(--qc-ok-bg);border-color:var(--qc-ok-line);color:var(--qc-ok)}
.qc-alert.is-warn{background:var(--qc-warn-bg);border-color:var(--qc-warn-line);color:var(--qc-warn)}
.qc-alert.is-danger{background:var(--qc-danger-bg);border-color:var(--qc-danger-line);color:var(--qc-danger)}
.qc-alert.is-info{background:var(--qc-info-bg);border-color:var(--qc-info-line);color:var(--qc-info)}
.qc-alert-body{flex:1;min-width:0}
.qc-alert.is-sticky{position:sticky;top:var(--qc-s2);z-index:var(--qc-z-top);box-shadow:var(--qc-sh2)}

/* 页面级即时反馈条（原 qc-flash 内联样式） */
.qc-flash{
  position:sticky;top:var(--qc-s2);z-index:var(--qc-z-top);
  box-shadow:var(--qc-sh2);margin-bottom:var(--qc-s3);
}
.qc-flash--ok{background:var(--qc-ok-bg)!important;border-color:var(--qc-ok-line)!important;color:var(--qc-ok)!important}
.qc-flash--err{background:var(--qc-danger-bg)!important;border-color:var(--qc-danger-line)!important;color:var(--qc-danger)!important}

/* --------------------------------------------------------------------------
   8. 三态：加载 / 空 / 错误
   -------------------------------------------------------------------------- */
.qc-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--qc-s2);padding:48px var(--qc-s4);text-align:center;color:var(--qc-text-muted);
}
.qc-state-icon{
  width:40px;height:40px;border-radius:50%;background:var(--qc-surface-2);
  color:var(--qc-text-faint);display:flex;align-items:center;justify-content:center;font-size:18px;
}
.qc-state-title{font-size:var(--qc-f3);color:var(--qc-text)}
.qc-state-desc{font-size:var(--qc-f1);max-width:38em}
.qc-state.is-error .qc-state-icon{background:var(--qc-danger-bg);color:var(--qc-danger)}
.qc-state.is-error .qc-state-title{color:var(--qc-danger)}
.qc-state-actions{display:flex;gap:var(--qc-s2);margin-top:var(--qc-s1)}
.qc-empty{color:var(--qc-text-muted);font-size:var(--qc-f2);padding:20px 0;text-align:center}

.qc-skeleton{display:flex;flex-direction:column;gap:var(--qc-s2);padding:var(--qc-s3)}
.qc-skeleton-row{display:flex;gap:var(--qc-s3);align-items:center}
.qc-skeleton-bar{
  height:12px;border-radius:4px;
  background:linear-gradient(90deg,#eef0f3 25%,#e3e6ea 37%,#eef0f3 63%);
  background-size:400% 100%;animation:qc-shimmer 1.4s ease infinite;
}
.qc-skeleton-bar.w1{width:32%}.qc-skeleton-bar.w2{width:54%}.qc-skeleton-bar.w3{width:20%}
@keyframes qc-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.qc-loading{
  display:inline-flex;align-items:center;gap:var(--qc-s2);
  font-size:var(--qc-f1);color:var(--qc-text-muted);
}
.qc-loading::before{
  content:"";width:14px;height:14px;border-radius:50%;
  border:2px solid var(--qc-line);border-top-color:var(--qc-brand);animation:qc-spin .8s linear infinite;
}
@keyframes qc-spin{to{transform:rotate(360deg)}}

/* --------------------------------------------------------------------------
   9. 表单
   -------------------------------------------------------------------------- */
.qc-form{display:flex;flex-wrap:wrap;gap:var(--qc-s3);align-items:center}
.qc-field{display:inline-flex;align-items:center;gap:var(--qc-s2);font-size:var(--qc-f2);color:var(--qc-text-muted)}
.qc-input,.qc-select{
  height:32px;padding:0 10px;border:1px solid #dcdfe3;border-radius:var(--qc-r1);
  background:var(--qc-surface);color:var(--qc-text);font:inherit;font-size:var(--qc-f2);max-width:100%;
}
.qc-input:focus,.qc-select:focus{
  outline:none;border-color:var(--qc-brand);box-shadow:0 0 0 3px rgba(34,113,177,.15);
}
.qc-select{
  appearance:none;-webkit-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-check{display:inline-flex;align-items:center;gap:6px;font-size:var(--qc-f2);color:var(--qc-text);cursor:pointer}
.qc-check input{width:14px;height:14px;accent-color:var(--qc-brand);margin:0}
.qc-form-note{font-size:var(--qc-f1);color:var(--qc-text-muted)}
.qc-form-break{flex:0 0 100%;height:0}
/* 全局 input 的 width:100% 会把勾选框拉成一条，单独排掉 */
.qc-ui input[type="checkbox"],.qc-ui input[type="radio"]{width:auto;margin:0 6px 0 0;vertical-align:middle}

/* --------------------------------------------------------------------------
   10. 导航（页内导航）
   -------------------------------------------------------------------------- */
.qc-nav{display:flex;gap:var(--qc-s1);flex-wrap:wrap}
.qc-nav-item{
  display:inline-flex;align-items:center;gap:var(--qc-s1);padding:6px var(--qc-s3);
  border-radius:var(--qc-r1);color:var(--qc-text);font-size:var(--qc-f2);cursor:pointer;
}
.qc-nav-item:hover{background:var(--qc-surface-2);text-decoration:none}
.qc-nav-item.is-on{background:var(--qc-brand-soft);color:var(--qc-info);font-weight:600}
.qc-nav-count{
  font-size:var(--qc-f1);color:var(--qc-brand);background:var(--qc-brand-soft);
  border-radius:999px;padding:0 6px;
}

/* --------------------------------------------------------------------------
   11. 步骤 / 进度
   -------------------------------------------------------------------------- */
.qc-steps{display:flex;margin:var(--qc-s3) 0}
.qc-step{
  flex:1;position:relative;text-align:center;font-size:var(--qc-f1);
  color:var(--qc-text-faint);padding-top:16px;
}
.qc-step::before{
  content:"";position:absolute;top:4px;left:50%;width:9px;height:9px;border-radius:50%;
  background:#e5e7eb;transform:translateX(-50%);
}
.qc-step::after{content:"";position:absolute;top:9px;left:-50%;width:100%;height:2px;background:var(--qc-line-soft)}
.qc-step:first-child::after{display:none}
.qc-step.is-done{color:var(--qc-ok)}
.qc-step.is-done::before{background:var(--qc-ok)}
.qc-step.is-done::after{background:var(--qc-ok)}
.qc-step.is-current{color:var(--qc-info);font-weight:600}
.qc-step.is-current::before{background:var(--qc-brand);box-shadow:0 0 0 3px var(--qc-brand-soft)}

/* --------------------------------------------------------------------------
   12. 工具类（历史标记沿用）
   -------------------------------------------------------------------------- */
.qc-sm{font-size:var(--qc-f1)}
.qc-xs{font-size:var(--qc-f1)}
.qc-err{color:var(--qc-danger)}
.qc-warn{color:var(--qc-warn)}
.qc-plain{border:none}
.qc-inline{display:inline}
.qc-toolbar{margin:var(--qc-s4) 0}
.qc-money{font-size:var(--qc-f5);font-weight:700;font-variant-numeric:tabular-nums}
.qc-muted{color:var(--qc-text-muted)}
.qc-faint{color:var(--qc-text-faint)}

/* --------------------------------------------------------------------------
   13. 响应式（统一 1024 / 768 / 480）
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .qc-grid-2,.qc-grid-side{grid-template-columns:minmax(0,1fr);gap:var(--qc-s3)}
  .qc-cols--2,.qc-cols--side{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:768px){
  .qc-tbl th,.qc-tbl td{padding:9px 10px}
  .qc-card{padding:var(--qc-s3)}
}
@media (max-width:480px){
  .qc-btn,.qc-btn.is-sm,.qc-btn.sm{height:32px;padding:0 var(--qc-s3);font-size:var(--qc-f2)}
  .qc-btn-row .qc-btn{flex:1 1 auto;justify-content:center}
  .qc-chips{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .qc-chip{flex:none}
  .qc-alert.is-sticky,.qc-flash{position:static}
  .qc-state{padding:32px var(--qc-s3)}
}

/* --------------------------------------------------------------------------
   14. 无障碍 / 动效降级
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .qc-ui *,.qc-ui *::before,.qc-ui *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
.qc-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.qc-skip{position:absolute;left:-9999px;top:0;z-index:999;background:#fff;padding:8px 14px;border:1px solid var(--qc-brand)}
.qc-skip:focus{left:8px;top:8px}