/* =========================================================
   问卷评估系统 · 苹果风设计系统 v2
   基于仪表盘 mockup 确认基调（2026-07-18）：
   - 克制高级感：浅灰底 + 单一蓝强调 + 大留白
   - SF / PingFang 字体气质、细腻阴影层级
   - 无渐变、无药丸、无重色块
   本文件为样式唯一来源；layout.html 仅保留最小重置。
   ========================================================= */

/* ---------- 设计变量（苹果风） ---------- */
:root {
  /* === 色彩 === */
  --primary: #0071e3;        /* 苹果蓝（替代原 #2f6bed，更干净） */
  --primary-d: #005bb5;
  --primary-l: #e8f2ff;
  --accent: #0ea5a4;
  --success: #22c55e;
  --success-l: #ecfdf5;
  --warning: #f59e0b;
  --warning-l: #fffbeb;
  --danger: #ef4444;
  --danger-l: #fef2f2;

  /* === 中性阶（苹果灰系） === */
  --bg: #f5f5f7;             /* 浅灰底（替代原 #f3f6fc，去蓝调） */
  --surface: #ffffff;
  --surface-2: #fafafa;
  --surface-3: #f0f0f5;
  --text: #1d1d1f;           /* 苹果近黑 */
  --text-2: #424245;
  --text-3: #6e6e73;         /* 三级文字（新增，用于辅助信息） */
  --muted: #86868b;          /* 更淡的 muted */
  --border: rgba(0,0,0,.08); /* 半透明边框（苹果特征） */
  --border-2: rgba(0,0,0,.12);
  --border-focus: rgba(0,113,227,.5);

  /* === 形状 === */
  --radius: 12px;            /* 收紧（原 14px → 12px，更克制） */
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* === 阴影（三层级，更细腻） === */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.10);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.12);

  /* === 字号阶梯 === */
  --text-xs: 12px;
  --text-sm: 13.5px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --text-3xl: 34px;

  /* === 间距阶梯 === */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--primary); text-decoration: none; transition: opacity .15s; }
a:hover { text-decoration: underline; opacity: .8; }
h1, h2, h3, h4 {
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -.01em;
}
h2 { font-size: var(--text-xl); margin: 0 0 var(--space-sm); }
h3 { font-size: var(--text-lg); margin: var(--space-lg) 0 var(--space-sm); }
p { margin: 0 0 var(--space-md); }

code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: var(--text-sm);
  color: var(--text-2);
}

/* ---------- 布局骨架 ---------- */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-lg);
}
.container-narrow { max-width: 480px; }

/* ---------- 顶栏（苹果式：白底+细线+毛玻璃） ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--border);
  padding: 10px var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text);
  letter-spacing: -.01em;
}
.topbar .brand-mark {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,113,227,.25);
  flex-shrink: 0;
}
.topbar .user {
  color: var(--muted);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar .user a { color: var(--text-2); }
.topbar .user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface-3);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- 卡片（白底+细边框+轻盈阴影） ---------- */
.card {
  background: var(--surface);
  border: .5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--space-md);
  transition: box-shadow .2s;
}
.card:hover { box-shadow: var(--shadow-sm); }
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.card-head h2 { margin: 0; }

/* ---------- 按钮（扁平化、无重阴影） ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: var(--text-base);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s ease;
  white-space: nowrap;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.btn:hover { text-decoration: none; opacity: .92; }
.btn:active { transform: scale(.98); }
.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,113,227,.18);
}
.btn-primary:hover {
  background: var(--primary-d);
  box-shadow: 0 2px 6px rgba(0,113,227,.25);
  opacity: 1;
}
.btn-secondary {
  background: var(--surface);
  color: var(--text-2);
  border-color: var(--border-2);
}
.btn-secondary:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
  opacity: 1;
}
.btn-ghost {
  background: transparent;
  color: var(--primary);
  padding: 0 10px;
  font-weight: 500;
}
.btn-ghost:hover { background: var(--primary-l); opacity: 1; }
.btn-warn {
  background: var(--warning);
  color: #fff;
  box-shadow: 0 1px 3px rgba(245,158,11,.18);
}
.btn-warn:hover { background: #d97706; opacity: 1; }
.btn-danger {
  background: var(--danger);
  color: #fff;
  box-shadow: 0 1px 3px rgba(239,68,68,.18);
}
.btn-danger:hover { background: #dc2626; opacity: 1; }
.btn-sm { min-height: 33px; padding: 0 13px; font-size: var(--text-sm); border-radius: 7px; }
.btn-block { width: 100%; }
.btn:disabled,
.btn[disabled] {
  opacity: .42;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ---------- 文件选择器 ---------- */
.file-pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.file-pick .btn-secondary { cursor: pointer; }
.file-real {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.file-hint {
  font-size: var(--text-sm);
  color: var(--muted);
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
}
.file-hint.chosen {
  color: var(--primary-d);
  border-style: solid;
  border-color: var(--primary);
  background: var(--primary-l);
  font-weight: 500;
}
.file-hint.error {
  color: var(--danger);
  border-style: solid;
  border-color: var(--danger);
  background: var(--danger-l);
  font-weight: 500;
}

/* ---------- 状态徽章（小圆角矩形，非药丸） ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .01em;
}
.badge-success { background: var(--success-l); color: #15803d; }
.badge-muted {
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.badge-warning { background: var(--warning-l); color: #a16207; }
.badge-info { background: var(--primary-l); color: var(--primary); }
.badge-danger { background: var(--danger-l); color: #dc2626; }
.badge-dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- 表单 ---------- */
.field { margin-bottom: var(--space-md); }
.remember-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin: -4px 0 var(--space-md);
  color: var(--muted);
  font-size: var(--text-sm);
  cursor: pointer;
}
.remember-login input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}
.label {
  display: block;
  font-weight: 500;
  font-size: var(--text-sm);
  margin-bottom: 6px;
  color: var(--text);
  letter-spacing: .01em;
}
.input, .textarea, select.input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border-2);
  border-radius: var(--radius-sm);
  font-size: 16px; /* 防止 iOS 自动缩放 */
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
  min-height: 44px; /* WCAG 触控 ≥ 44px */
}
.input:focus,
.textarea:focus,
select.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3.5px var(--primary-l), 0 0 0 1px var(--primary);
}
.textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.55;
}
.form-error {
  background: var(--danger-l);
  color: #b91c1c;
  border: 1px solid #fecdd3;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: var(--text-sm);
  margin-bottom: var(--space-md);
}
.hint {
  color: var(--muted);
  font-size: var(--text-xs);
  margin-top: 6px;
  line-height: 1.45;
}

/* fieldset 分组（指标表单用） */
.fieldset-group {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  background: var(--surface);
}
.fieldset-legend {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-2);
  padding: 0 8px;
  display: inline-block;
  margin-bottom: var(--space-sm);
}

/* ---------- 数据表格 ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}
.table th {
  text-align: left;
  font-weight: 600;
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 10px 14px;
  border-bottom: 1.5px solid var(--border-2);
  white-space: nowrap;
  background: var(--surface);
  position: sticky;
  top: 0;
}
.table td {
  padding: 12px 14px;
  border-bottom: .5px solid var(--border);
  color: var(--text);
  vertical-align: middle;
  font-size: var(--text-sm);
}
.table tbody tr { transition: background .1s; }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: none; }
.table .row-actions a { margin-right: 10px; font-size: var(--text-sm); color: var(--primary); }

/* ---------- 指标树 / 预览树 ---------- */
.tree, .preview {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tree-node {
  padding: 8px 0;
  border-left: 2px solid var(--border);
  margin-left: 6px;
  padding-left: 14px;
}
.tree-node .ind-name { font-weight: 600; }
.tree-node .ind-meta { color: var(--muted); font-size: var(--text-sm); margin-left: 6px; }
.tree-q {
  padding: 6px 0 6px 14px;
  color: var(--text-2);
  font-size: var(--text-base);
}
.tree-q .q-type {
  display: inline-block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 8px;
  font-size: var(--text-xs);
  color: var(--text-2);
  margin: 0 4px;
}
.tree-q .q-opts { color: var(--muted); font-size: var(--text-sm); }

/* ---------- 工具类 ---------- */
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.muted { color: var(--muted); }
.small { font-size: var(--text-sm); }
.spacer { flex: 1; }
.divider { height: .5px; background: var(--border); margin: var(--space-lg) 0; border: none; }
.empty {
  text-align: center;
  color: var(--muted);
  padding: var(--space-2xl) var(--space-lg);
  background: var(--surface-2);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
}
.alert {
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: var(--text-sm);
  margin-bottom: var(--space-md);
  border: 1px solid transparent;
}
.alert-info { background: var(--primary-l); color: var(--primary-d); border-color: #bfdbfe; }
.alert-warning { background: var(--warning-l); color: #a16207; border-color: #fde68a; }
.alert-warn { background: var(--warning-l); color: #a16207; border-color: #fde68a; }
.group-title {
  margin: var(--space-lg) 0 var(--space-sm);
  font-size: var(--text-base);
  color: var(--text-2);
  font-weight: 600;
}
.group-return { color: var(--warning); }

/* =========================================================
   访员端
   ========================================================= */

/* 工作台 */
.search-bar { display: flex; gap: 10px; margin-top: 14px; }
.search-bar .input { flex: 1; }
.sample-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.sample-main { min-width: 0; }
.sample-name { font-weight: 600; font-size: var(--text-lg); }
.sample-meta { color: var(--muted); font-size: var(--text-sm); margin-top: 3px; }
.sample-row .btn { white-space: nowrap; }

/* 项目列表卡片 */
.project-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.project-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}
.project-card:active { transform: translateY(1px); }
.project-main { min-width: 0; }
.project-name {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text);
}
.project-meta { font-size: var(--text-sm); color: var(--muted); margin-top: 4px; }
.project-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.cnt {
  font-size: var(--text-xs);
  padding: 3px 9px;
  border-radius: 6px;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.cnt-pending { background: var(--primary-l); color: var(--primary); border-color: transparent; }
.cnt-return  { background: var(--warning-l); color: var(--warning); border-color: transparent; }
.cnt-done    { background: var(--success-l); color: var(--success); border-color: transparent; }
.back-link {
  font-size: var(--text-sm);
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.back-link:hover { text-decoration: underline; }

/* 填卷页（移动端优先 + 可访问性增强） */
.fill-progress {
  position: sticky;
  top: 53px;
  z-index: 40;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: .5px solid var(--border);
  padding: 10px var(--space-lg);
}
.fill-progress .bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  overflow: hidden;
}
.fill-progress .bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  background: var(--primary);
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.fill-progress .label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: 7px;
}
.fill-progress .label b { color: var(--primary); font-weight: 600; }
.q-group {
  display: inline-block;
  background: var(--primary-l);
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 14px;
  letter-spacing: .01em;
}
.q-title {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 var(--space-lg);
  color: var(--text);
  letter-spacing: -.01em;
}
.q-options { display: flex; flex-direction: column; gap: 12px; }
.opt-btn {
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  font-size: var(--text-lg);
  font-family: inherit;
  border: 1.5px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all .15s ease;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 52px; /* WCAG ≥ 44px，给足余量 */
}
.opt-btn::before {
  content: "";
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-2);
  transition: all .15s ease;
  flex-shrink: 0;
}
.opt-btn:active { transform: scale(.99); }
.opt-btn.selected {
  border-color: var(--primary);
  background: var(--primary-l);
  color: var(--primary-d);
  font-weight: 600;
}
.opt-btn.selected::before {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: inset 0 0 0 3px #fff;
}
/* 键盘焦点态（可访问性 R2） */
.opt-btn:focus-visible,
.btn:focus-visible,
.input:focus-visible,
.textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.fill-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.fill-actions .btn { flex: 1; min-height: 48px; }
.submit-box { text-align: center; padding: var(--space-2xl) var(--space-lg); }
.submit-box h3 { margin-top: 0; font-size: var(--text-xl); }
.submit-box .muted { margin-bottom: var(--space-lg); }

/* role=alert 样式（可访问性 R2） */
.toast-alert {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  z-index: 9999;
  animation: toastIn .25s ease;
  box-shadow: var(--shadow-lg);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* =========================================================
   后台 · 指标树 / 操作组
   ========================================================= */
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.actions .btn { margin: 0; }

/* =========================================================
   响应式 / 触屏增强
   ========================================================= */
@media (max-width: 640px) {
  .container { padding: var(--space-md); }
  .card { padding: var(--space-md); border-radius: var(--radius); }
  .topbar { padding: 10px var(--space-md); font-size: var(--text-sm); flex-wrap: wrap; gap: 6px; }
  .topbar .user { font-size: var(--text-xs); }

  /* 按钮整行铺满，避免误触 */
  .btn, .btn-primary, .btn-secondary { width: 100%; margin: 4px 0; }
  .actions .btn { width: 100%; }
  p > .btn { width: 100%; display: flex; }

  /* 样本行纵向堆叠 */
  .sample-row { flex-direction: column; align-items: stretch; }
  .sample-row .btn { width: 100%; }

  /* 搜索条上下排 */
  .search-bar { flex-direction: column; }
  .search-bar .btn { width: 100%; }

  /* 填卷微调 */
  .opt-btn { padding: 15px 16px; min-height: 52px; }
  .q-title { font-size: var(--text-lg); line-height: 1.45; }
  .fill-progress { top: 49px; padding: 10px var(--space-md); }

  /* 表格横向滚动不破版 */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { font-size: var(--text-sm); white-space: nowrap; }
  .table th, .table td { padding: 9px 10px; }
  .table .row-actions a { margin: 0 6px 0 0; }
  .muted.small { font-size: var(--text-xs); }

  /* 统计卡移动端适配 */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat { padding: var(--space-md); }
  .stat .num { font-size: var(--text-2xl); }
}

/* =========================================================
   后台 · 项目卡片网格（替代原表格布局）
   ========================================================= */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 20px;
}
.project-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.project-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}
.project-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.project-card__name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.project-card__desc {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.project-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  color: var(--muted);
  margin-top: auto;
}
.project-card__meta b {
  color: var(--text);
  font-weight: 600;
}
.project-card__foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}
@media (max-width: 640px) {
  .project-grid { grid-template-columns: 1fr; gap: 12px; }
  .project-card { padding: 16px; }
}

/* ---------- 打印 ---------- */
@media print {
  body { background: #fff; }
  .topbar { position: static; backdrop-filter: none; }
  .card, .btn { box-shadow: none; border: 1px solid #ddd; }
}

/* ---------- 项目详情：顶部汇总指标卡（与进度看板同源） ---------- */
.kpi-row {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin: 0 0 var(--space-lg);
}
.kpi {
  flex: 1;
  min-width: 140px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-xs);
}
.kpi .num {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--primary);
  line-height: 1.05;
  letter-spacing: -0.5px;
}
.kpi .lab {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-top: 8px;
}
.kpi .sub {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 2px;
}
.kpi.warn .num { color: var(--danger); }
/* 进度卡：数字 + 细进度条 */
.kpi.prog .bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  margin-top: 12px;
  overflow: hidden;
}
.kpi.prog .bar > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--primary), #42a5f5);
  transition: width .4s ease;
}

/* ---------- P0.1 项目工作台 ---------- */
.project-workbench { max-width: 1180px; }
.workbench-hero { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin: 8px 0 18px; }
.workbench-hero h1 { margin:4px 0 7px; font-size:var(--text-3xl); }
.eyebrow { color:var(--primary); font-size:var(--text-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.workbench-stages { display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; margin-bottom:18px; }
.workbench-stage { display:flex; align-items:center; gap:9px; min-width:0; padding:11px; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-sm); color:var(--muted); }
.stage-dot { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex:0 0 24px; border-radius:50%; border:1px solid var(--border-2); font-size:var(--text-xs); font-weight:700; }
.workbench-stage b,.workbench-stage small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workbench-stage b { font-size:var(--text-sm); color:var(--text-2); }.workbench-stage small { margin-top:1px; font-size:var(--text-xs); }
.workbench-stage.is-done { background:var(--primary-l); border-color:transparent; color:var(--primary); }.workbench-stage.is-done .stage-dot { background:var(--primary); color:#fff; border-color:var(--primary); }.workbench-stage.is-done b { color:var(--primary-d); }
.next-action { display:flex; align-items:center; justify-content:space-between; gap:24px; border-color:#bfdbfe; margin-bottom:18px; }.next-action h2 { margin:3px 0 5px; }.next-action p { margin:0; }
.workbench-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }.workbench-section { margin:0; min-height:210px; display:flex; flex-direction:column; }.section-title h2 { margin:3px 0 6px; }.section-title p { font-size:var(--text-sm); }.workbench-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }.workbench-actions .btn { flex:1 1 130px; }.workbench-details { margin-top:18px; }.workbench-details summary { cursor:pointer; font-weight:600; color:var(--text-2); }.workbench-details[open] summary { margin-bottom:18px; }
.workbench-overview { margin-bottom:18px; }
.summary-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.summary-chips .chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-full);
  font-size:var(--text-xs);
  color:var(--text-3);
}
.summary-chips .chip b { color:var(--text); font-size:var(--text-sm); }
@media (max-width: 840px) { .workbench-stages { grid-template-columns:repeat(2, 1fr); }.workbench-grid { grid-template-columns:1fr; }.next-action { align-items:flex-start; flex-direction:column; }.next-action .btn { width:100%; } }
@media (max-width: 640px) { .workbench-hero { flex-direction:column; }.workbench-stages { grid-template-columns:1fr; }.workbench-actions .btn { flex-basis:100%; } }

/* ---------- P0.2B 发布前检查 ---------- */
.preflight-page { max-width: 960px; }.preflight-hero { display:flex; justify-content:space-between; align-items:center; gap:20px; border-left:4px solid var(--warning); }.preflight-hero.is-ready { border-left-color:var(--success); }.preflight-hero h1 { margin:3px 0 7px; font-size:var(--text-2xl); }.preflight-hero p { margin:0; }.preflight-counts { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }.preflight-list { display:flex; flex-direction:column; gap:10px; }.preflight-item { display:flex; align-items:center; gap:16px; margin:0; }.preflight-icon { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex:0 0 32px; border-radius:50%; background:var(--surface-3); color:var(--text-2); font-weight:700; }.preflight-error .preflight-icon { background:var(--danger-l); color:var(--danger); }.preflight-warning .preflight-icon { background:var(--warning-l); color:var(--warning); }.preflight-info .preflight-icon { background:var(--success-l); color:var(--success); }.preflight-copy { flex:1; }.preflight-copy h2 { margin:0 0 4px; font-size:var(--text-lg); }.preflight-copy p { margin:0; }@media (max-width:640px) { .preflight-hero,.preflight-item { align-items:flex-start; flex-direction:column; }.preflight-counts { justify-content:flex-start; }.preflight-item .btn { width:100%; } }