/* ==================================================================
   润丰项目管理台账 — v042 适配版
   基线：v039 真实数据 + app.js 业务逻辑（零修改）
   视觉：v041 expert-review 内联 CSS（12 项 v040 改进 + 2 项 P1）
   ------------------------------------------------------------------
   - :root 全部 token（v039 兼容 + v041 state-*）
   - v039 所有现有 class 全部保留（保证 app.js 选择器命中）
   - .project-row 桌面 5 列沿用 v039（app.js 实际依赖）
   - 媒体查询：1180 / 760 / 390 三档（沿用 v039 断点以兼容移动/平板）
   ================================================================== */

:root {
  /* —— 基础调色板 —— */
  --bg: #f0f4f8;
  --panel: #ffffff;
  --panel-soft: #f7f9fc;
  --panel-faint: #f5f7fa;                              /* v041 #10：列表组极浅底 */
  --line: #dfe5ec;
  --line-soft: #eef2f7;                                /* v041 #2：新增极浅描边 */
  --border-soft: #e7eef8;
  --border-mid: #dfe8f3;
  --border-strong: #dce5ef;

  /* —— 品牌 + 语义色 —— */
  --brand: #b5252d;
  --brand-soft: #fff0f2;
  --brand-deep: #982027;
  --primary: #2563eb;
  --primary-soft: #eff6ff;
  --primary-deep: #1d4ed8;
  --info: #3979df;
  --info-soft: #edf4ff;
  --info-deep: #1757b8;
  --info-bg: #e7f0ff;
  --success: #10b981;
  --success-soft: #e6f9f0;
  --success-deep: #059669;
  --success-bg: #e6f6ef;
  --warn: #f59e0b;
  --warn-soft: #fff7e6;
  --warn-deep: #d97706;
  --warn-bg: #fff1d8;
  --warn-bg-deep: #fff1d5;
  --warn-border: #fcd34d;
  --help: #ef4444;
  --help-soft: #fef2f2;
  --help-deep: #b91c1c;
  --help-bg: #fff5f6;
  --purple: #8b5cf6;
  --purple-soft: #f2effd;
  --purple-deep: #7c3aed;
  --neutral: #64748b;
  --neutral-soft: #f1f5f9;
  --neutral-deep: #475569;

  /* —— v041 新增：stage 状态语义变量（v040 #6） —— */
  --state-pending-bg: #edf4ff;        /* 设计中：蓝 */
  --state-pending-fg: #1757b8;
  --state-pending-border: rgba(57,121,223,.18);
  --state-pending-line: #3979df;

  --state-feedback-bg: #fff5e1;       /* 待反馈：琥珀 */
  --state-feedback-fg: #a46712;
  --state-feedback-border: rgba(207,131,20,.20);
  --state-feedback-line: #f59e0b;

  --state-ontrack-bg: #e6f6ef;        /* 落地中：绿 */
  --state-ontrack-fg: #059669;
  --state-ontrack-border: rgba(16,185,129,.20);
  --state-ontrack-line: #10b981;

  --state-review-bg: #f2effd;         /* 待结算：紫 */
  --state-review-fg: #7c3aed;
  --state-review-border: rgba(139,92,246,.20);
  --state-review-line: #8b5cf6;

  --state-done-bg: #f1f5f9;           /* 已完成：灰 */
  --state-done-fg: #475569;
  --state-done-border: rgba(100,116,139,.18);
  --state-done-line: #64748b;

  /* —— 文本层级 —— */
  --ink: #182433;
  --text-1: #21415f;
  --text-2: #31435a;
  --text-3: #526175;
  --muted: #687587;
  --text-faint: #97a3b0;
  --text-mute-2: #7a8797;

  /* —— v039 兼容历史变量 —— */
  --brand-2: #b5252d;
  --red: #b5252d;
  --green: #17795b;
  --amber: #a46712;

  /* —— 阴影分层（v041 弱化版 #3） —— */
  --shadow-sm: 0 1px 2px rgba(31, 48, 70, .04);
  --shadow-md: 0 2px 6px rgba(31, 48, 70, .05);
  --shadow-hover: 0 4px 14px rgba(31, 48, 70, .06);
  --shadow-float: 0 8px 22px rgba(22, 33, 47, .14);
  --shadow-sheet: 0 -10px 32px rgba(23, 32, 51, .18);
  --shadow: 0 12px 34px rgba(31, 48, 70, .08);       /* 兼容旧名 */
  --shadow-active-info: 0 16px 36px rgba(57, 121, 223, .14);
  --shadow-lg: 0 28px 70px rgba(20, 34, 52, .25);

  /* —— 圆角分层（v040 #4：卡片 8→12） —— */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-pill: 999px;

  /* —— 间距分层（v040 紧凑） —— */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;

  /* —— 字号分层（v040 #1：指标 30→26，正文 14→13） —— */
  --fs-xs: 10px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 20px;
  --fs-3xl: 26px;
  --fs-display: 34px;
}

/* ============== 基础重置 ============== */
* { box-sizing: border-box; }
html { color-scheme: light; }

* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

::selection { color: #fff; background: #2f71da; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: none;
}

button, input, select, textarea { font: inherit; }
button, select { -webkit-tap-highlight-color: transparent; }

button {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 9px 12px;
  color: var(--text-2);
  font-weight: 600;
  background: #f5f7fa;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
button:hover { background: #edf1f6; }
button:active { transform: scale(.98); }

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 9px 11px;
  color: var(--ink);
  background: #fff;
  outline: none;
}
textarea { min-height: 92px; resize: vertical; }

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* v041 P1-2：全局键盘焦点环 */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: inherit;
}
:focus:not(:focus-visible) { outline: none; }

/* ============== 登录页 ============== */
.login-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.login-card {
  display: grid;
  width: min(420px, 100%);
  gap: 14px;
  padding: 32px 30px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);                          /* v041 #4：12 */
  background: #fff;
  box-shadow: var(--shadow-md);
}

.logo, .brand {
  color: var(--brand);
  font-size: 18px;
  font-style: italic;
  font-weight: 900;
  line-height: 1.05;
}
.logo span { font-style: normal; font-size: 24px; }

.login-card h1, .topbar h1 { margin: 0; letter-spacing: 0; }
.login-card h1 { font-size: 28px; }
.login-card p, .topbar p { margin: 0; color: var(--muted); opacity: .8; }
.login-card small { min-height: 18px; color: var(--primary); }

/* v062 备案信息条（登录卡片底部） */
.beian-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  margin-top: 8px;
  font-size: 10.5px;
  line-height: 1.4;
}
.beian-bar a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-faint);
  text-decoration: none;
}
.beian-bar a:hover {
  color: var(--primary);
  text-decoration: underline;
}
.beian-bar img { display: inline-block; }

.login-card input {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font: inherit;
}

.primary, .login-card button[type="button"], .login-card button[type="submit"] {
  border: 0;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 6px 14px rgba(37, 99, 235, .16);
}
.primary:hover, .login-card button:hover {
  background: var(--primary-deep);
}

/* ============== 主布局 ============== */
.shell {
  width: min(1480px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 34px;
}

/* —— Topbar —— */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-sm);
}
.topbar .brand { color: var(--brand); font-size: 16px; font-style: italic; font-weight: 900; }
.topbar h1 { margin: 4px 0 0; font-size: var(--fs-3xl); font-weight: 700; }
.topbar > div > p { margin: 2px 0 0; color: var(--muted); font-size: 13px; opacity: .8; }
.topbar > div > p#statusText { margin: 0; opacity: 1; color: var(--text-2); font-size: 13px; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions button {
  border: 1px solid var(--line);
  background: #f5f7fa;
  border-radius: var(--r-md);
  padding: 8px 12px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}
.actions .primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* —— Personal strip —— */
.personal-strip {
  display: grid;
  grid-template-columns: 260px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.identity-control {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.identity-control select {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 13px;
  background: #fff;
}

.personal-strip > p { margin: 0; color: var(--muted); font-size: 12px; opacity: .8; }

.personal-stats { display: flex; align-items: stretch; gap: 4px; }
.personal-stats span,
.personal-stats button {
  display: grid;
  min-width: 72px;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
  background: #f5f7fa;
  font-weight: 600;
  cursor: pointer;
}

.personal-stats b {
  color: var(--text-1);
  font-size: var(--fs-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* v041：个人统计 active 改用 state-pending 蓝调（替代 v039 红） */
.personal-stats button.active {
  background: var(--state-pending-bg);
  border-color: var(--state-pending-border);
  color: var(--state-pending-fg);
  box-shadow: none;
}
.personal-stats button.active b { color: var(--state-pending-fg); }

/* —— 闲置天数与团队速览（v039 独有，app.js 用，v041 没写） —— */
.idle-stat { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(0,0,0,0.04); font-size: 12.5px; }
.idle-stat b { color: var(--ink); font-weight: 700; }
.idle-stat[data-level=low] { background: rgba(214,162,0,0.12); }
.idle-stat[data-level=low] b { color: #c79100; }
.idle-stat[data-level=high] { background: rgba(220,53,69,0.12); }
.idle-stat[data-level=high] b { color: var(--brand); }

.team-pulse { margin: 6px 0 0; }
.team-pulse summary { cursor: pointer; font-size: 12.5px; color: var(--muted); user-select: none; font-weight: 600; }
.team-pulse-list, #teamPulseList { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.team-pulse-item { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(0,0,0,0.04); font-size: 12.5px; }
.team-pulse-item[data-level=low] { background: rgba(214,162,0,0.12); }
.team-pulse-item[data-level=low] b { color: #c79100; }
.team-pulse-item[data-level=high] { background: rgba(220,53,69,0.12); }
.team-pulse-item[data-level=high] b { color: var(--brand); }

/* —— 提醒横幅（v039 独有，app.js 用） —— */
.reminder-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 11px 14px;
  border: 1px solid var(--brand-soft);
  border-radius: var(--r-lg);
  color: #6f2026;
  background: var(--brand-soft);
}
.reminder-banner strong { display: block; font-size: var(--fs-base); }
.reminder-banner p { margin: 2px 0 0; color: #8d565b; font-size: 11px; opacity: .9; }
.reminder-banner button { background: var(--brand); color: #fff; box-shadow: none; border-color: var(--brand); padding: 6px 12px; font-size: 12px; }

/* —— Weekly panel —— */
.weekly-panel {
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.weekly-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  text-align: left;
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: pointer;
}
.weekly-toggle:hover { background: #f8faff; }
.weekly-panel h2 { margin: 0; color: var(--text-1); font-size: var(--fs-base); font-weight: 700; }
.weekly-panel .weekly-toggle p { margin: 1px 0 0; color: var(--text-faint); font-size: 11px; opacity: .8; }
.weekly-toggle-meta { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; color: var(--info); font-weight: 700; font-size: 11px; }
.weekly-toggle-meta strong { font-size: 11px; font-weight: 800; }
.weekly-toggle-meta i {
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease-out;
}
.weekly-toggle[aria-expanded="true"] .weekly-toggle-meta i { transform: rotate(-135deg); }

.weekly-activity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 14px var(--sp-3); }
.weekly-activity[hidden] { display: none; }
.weekly-activity button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-faint);
  cursor: pointer;
  text-align: left;
}
.activity-person {
  display: grid;
  width: 26px; height: 26px;
  place-items: center;
  border-radius: 50%;
  color: var(--avatar-fg, var(--info-deep));
  font-size: 10px;
  font-weight: 700;
  background: var(--avatar-bg, var(--info-bg));
}
.activity-copy { min-width: 0; }
.activity-copy b, .activity-copy em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-copy b { color: var(--text-2); font-size: 11px; font-weight: 600; }
.activity-copy em { margin-top: 1px; color: var(--text-faint); font-size: 9px; font-style: normal; font-weight: 500; }
.activity-status, .activity-help { padding: 2px 6px; border-radius: var(--r-sm); font-size: 10px; white-space: nowrap; }
.activity-status { color: var(--text-2); background: #eaf0f6; }
.activity-help { color: var(--help); background: var(--help-soft); }
.weekly-activity time { color: #8793a2; font-size: 10px; white-space: nowrap; }

/* ============== 指标卡（v041 #1：26/600） ============== */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 12px 0;
}

/* v039 成员视角规则 */
.shell.member-view .metric[data-filter="待结算的项目"] { display: none; }
.shell.member-view #newBtn,
.shell.member-view .fab-new,
.shell.member-view .editor:not(.employee-progress-mode) { display: none; }
.shell.member-view .editor.employee-progress-mode .admin-only-field,
.shell.member-view .editor.employee-progress-mode #resetBtn { display: none; }
.shell.member-view .editor.employee-progress-mode .form-actions { grid-template-columns: 1fr; }

.metric {
  position: relative;
  min-height: 92px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);                /* v041 #2：极浅描边 */
  border-radius: var(--r-lg);                         /* v041 #4：12 */
  background: var(--panel);
  box-shadow: none;                                  /* v041 #3：弱化 */
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.metric:hover { border-color: var(--metric-border, var(--line)); background: var(--metric-soft, var(--panel-faint)); }

.metric span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  opacity: .8;                                       /* v041 #5 */
}
.metric strong {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-3xl);                          /* v041 #1：26 */
  font-weight: 600;                                  /* v041 #1：700→600 */
  line-height: 1;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}
.metric em {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  color: var(--metric-color, var(--text-2));
  background: var(--metric-soft, var(--panel-faint));
}
.metric.active {
  border-color: var(--metric-border, var(--line));
  background: var(--metric-soft, var(--panel-faint));
}

/* v041：metric 用 nth-child 而不是 data-stage（v039 DOM 没有 data-stage）*/
.metric:nth-child(1) { --metric-color: var(--brand); --metric-soft: var(--brand-soft); --metric-border: rgba(181,37,45,.28); }
.metric:nth-child(2) { --metric-color: var(--success-deep); --metric-soft: var(--success-bg); --metric-border: var(--state-ontrack-border); }
.metric:nth-child(3) { --metric-color: var(--purple-deep); --metric-soft: var(--purple-soft); --metric-border: var(--state-review-border); }
.metric:nth-child(4) { --metric-color: var(--neutral-deep); --metric-soft: var(--neutral-soft); --metric-border: var(--state-done-border); }

/* ============== Workbench ============== */
.workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 12px;
  align-items: start;
}

/* —— List panel + Editor —— */
.list-panel, .editor {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

/* —— Toolbar（v040 #9：sp-3 12px） —— */
.toolbar {
  display: grid;
  grid-template-columns: 1fr 200px 130px;
  gap: 10px;
  align-items: end;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel-faint);
}
.toolbar label { font-size: 11px; color: var(--muted); font-weight: 600; display: grid; gap: 4px; }
.toolbar input, .toolbar select {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 10px;
  background: #fff;
  font-size: 13px;
}

/* v041 P1-1：focus-pill 选中态 浅底 + 3px 左侧线 */
.focus-pill {
  display: grid;
  place-items: center;
  min-height: 36px;
  border: 1px solid rgba(181, 37, 45, .20);
  border-radius: var(--r-md);
  color: var(--brand-deep);
  background: var(--help-bg);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.focus-pill.active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary-soft);
  border-left: 3px solid var(--brand);
  box-shadow: none;
  padding-left: calc(10px - 3px);
}

.project-list { display: grid; gap: 12px; padding: 12px 14px; }

/* ============== Group（v040 #8/#10：gap 8，bg #f5f7fa） ============== */
.group {
  display: grid;
  gap: 8px;                                            /* v041 #8 */
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--panel-faint);                     /* v041 #10：极浅 */
}
.group.feedback {
  border-style: dashed;
  background: #fbf9f4;
}

.group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 2px 8px;
  border-bottom: 1px solid var(--line-soft);
}
.group-title h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.group-title h2::before {
  content: "";
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--stage-line, var(--info));
}
.group-title span {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  color: var(--stage-fg, var(--text-2));
  background: var(--stage-bg, var(--panel-soft));
}

/* v041 stage-* 同时给 --stage-bg/-fg/-line 和保留 v039 --stage-color 用于 ::before */
.group.stage-design      { --stage-bg: var(--state-pending-bg);  --stage-fg: var(--state-pending-fg);  --stage-line: var(--state-pending-line); --stage-color: var(--state-pending-line); }
.group.stage-feedback    { --stage-bg: var(--state-feedback-bg); --stage-fg: var(--state-feedback-fg); --stage-line: var(--state-feedback-line); --stage-color: var(--state-feedback-line); }
.group.stage-landing     { --stage-bg: var(--state-ontrack-bg);  --stage-fg: var(--state-ontrack-fg);  --stage-line: var(--state-ontrack-line); --stage-color: var(--state-ontrack-line); }
.group.stage-settlement  { --stage-bg: var(--state-review-bg);   --stage-fg: var(--state-review-fg);   --stage-line: var(--state-review-line); --stage-color: var(--state-review-line); }
.group.stage-done        { --stage-bg: var(--state-done-bg);     --stage-fg: var(--state-done-fg);     --stage-line: var(--state-done-line); --stage-color: var(--state-done-line); }

/* ============== Project row ============== */
.project-row {
  --stage-color: var(--info);
  --stage-soft: var(--state-pending-bg);
  --stage-border: var(--state-pending-border);
  --nature-color: #087b91;
  --nature-soft: #e8f7fa;
  position: relative;
  display: grid;
  /* 桌面 3 列布局：main | meta | actions */
  grid-template-columns: minmax(300px, 1fr) 240px 228px;
  gap: 10px;
  align-items: center;
  min-height: 90px;                                    /* v055 2x2 网格紧凑（原 v054 100） */
  padding: 10px 12px;                                 /* v041 紧凑 */
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);                         /* v041 #4：12（原 8） */
  background: #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.project-row:hover {
  border-color: var(--stage-border);
  background: var(--stage-soft);
}

/* v041 #7：Stage 顶线 2px / 36px 宽 */
.project-row::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 12px;
  width: 36px;                                        /* v039 56 → v041 36 */
  height: 2px;                                        /* v039 3 → v041 2 */
  border-radius: 0 0 2px 2px;
  background: var(--stage-color);
}

.project-row.stage-design     { --stage-color: var(--state-pending-line);  --stage-soft: var(--state-pending-bg);  --stage-border: var(--state-pending-border); }
.project-row.stage-feedback   { --stage-color: var(--state-feedback-line); --stage-soft: var(--state-feedback-bg); --stage-border: var(--state-feedback-border); }
.project-row.stage-landing    { --stage-color: var(--state-ontrack-line);  --stage-soft: var(--state-ontrack-bg);  --stage-border: var(--state-ontrack-border); }
.project-row.stage-settlement { --stage-color: var(--state-review-line);   --stage-soft: var(--state-review-bg);   --stage-border: var(--state-review-border); }
.project-row.stage-done       { --stage-color: var(--state-done-line);     --stage-soft: var(--state-done-bg);     --stage-border: var(--state-done-border); }

.project-row.nature-ad           { --nature-color: #087b91; --nature-soft: #e8f7fa; }
.project-row.nature-engineering  { --nature-color: var(--success-deep); --nature-soft: var(--success-bg); }
.project-row.nature-video        { --nature-color: var(--purple-deep); --nature-soft: var(--purple-soft); }
.project-row.nature-misc         { --nature-color: var(--warn-deep); --nature-soft: var(--warn-soft); }

/* priority 行不再加红渐变/红边框，由行内「重点」pill 承担视觉指示 */

.title-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; align-items: center; gap: 7px; }
.title-copy { display: flex; min-width: 0; align-items: center; gap: 7px; }
.project-signals { display: flex; flex: 0 0 auto; gap: 4px; }

.attention-badge {
  padding: 2px 6px;
  border-radius: var(--r-sm);
  color: var(--warn-deep);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--warn-bg);
}

.help-badge {
  padding: 2px 6px;
  border-radius: var(--r-sm);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--help);
}

/* 标签胶囊：重点 / 关注 */
.pill-tag,
.pill-tag-important,
.pill-tag-attention,
.priority-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
}
.pill-tag-important,
.priority-badge {
  background: var(--brand);
  color: #fff;
}
.pill-tag-attention {
  background: var(--warn-soft);
  color: var(--warn-deep);
  border: 1px solid var(--warn-border);
}
.next-action b {
  margin-right: 5px;
  color: var(--stage-color);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* v039 类名（v041 demo 用 .project-title） */
.project-title-button {
  display: block;
  width: auto;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 3px;
  border: 0;
  color: var(--ink);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.project-title-button:hover { color: var(--stage-color); background: transparent; }

.project-main p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-main .next-action { color: #42546a; }

.tag {
  width: fit-content;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  color: var(--nature-color);
  font-size: 11px;
  font-weight: 700;
  background: var(--nature-soft);
}

.meta {
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
}

.project-main { grid-column: 1; min-width: 0; }
/* v055：项目信息改为 2x2 网格（左：时间/类型，右：负责人/客户） */
.project-meta {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 4px;
  min-width: 0;
  align-content: center;
  align-items: center;                    /* v055 让 tag(带 padding) 与 client(纯文字) 在 cell 内垂直居中对齐 */
}
.project-meta .running-days {
  justify-self: start;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.project-meta .tag { justify-self: start; }
.project-meta .meta {
  display: inline-flex;                   /* v055 让客户名与 tag 视觉同高（同 cell 居中） */
  align-items: center;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.project-meta .meta.owner {
  color: var(--text-2);
  font-weight: 600;
}
.row-actions { grid-column: 3; min-width: 0; }

/* .running（v039 兼容，app.js 不再写但保留） */
.running {
  flex: 0 0 auto;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: #8a96a6;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  background: transparent;
  opacity: .8;
}

/* ============== Row actions（v039 桌面 3 列布局，app.js 依赖） ============== */
.row-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  cursor: default;
}
.row-actions.single-action { grid-template-columns: 1fr; }
.row-actions.no-primary { grid-template-columns: 1fr 1fr; }

.secondary-actions { display: contents; }
.more-toggle { display: none; }

.row-actions [data-action="edit"] { order: 1; }
.row-actions [data-action="priority"] { order: 2; }
.row-actions .primary-action { order: 3; }
.row-actions [data-action="feedback"] { order: 4; }
.row-actions [data-action="delete"] { order: 5; }

.row-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel-faint);
  color: var(--text-2);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .08s ease;
}
.row-actions button:hover {
  border-color: var(--line-strong);
  background: #fff;
}
.row-actions button:active {
  transform: translateY(1px);
}
.row-actions .action-icon {
  display: inline-flex;
  font-size: 10px;
  line-height: 1;
  opacity: .85;
}

.row-actions .primary-action {
  background: var(--stage-color);
  border-color: var(--stage-color);
  color: #fff;
}
.row-actions .primary-action:hover {
  filter: brightness(1.06);
  background: var(--stage-color);
}
.row-actions .danger {
  color: var(--help);
  background: rgba(239, 68, 68, .08);
  border-color: rgba(239, 68, 68, .35);
}
.row-actions .danger:hover {
  background: rgba(239, 68, 68, .14);
  border-color: rgba(239, 68, 68, .55);
}

/* ============== Editor（v039 桌面 sticky 形态） ============== */
.editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.close-editor { display: none; }                      /* 桌面隐藏 */
.fab-new { display: none; }                           /* 桌面隐藏 */
.editor-overlay { display: none; }                    /* 桌面隐藏 */

.editor { position: sticky; top: 14px; padding: 16px; }
.editor h2 { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.editor form { display: grid; gap: 10px; }
.editor form label small { color: var(--text-faint); font-size: 11px; font-weight: 500; }

.member-picker {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.member-picker legend,
.member-progress-head strong {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.member-picker small,
.member-progress-head small {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 500;
}

.member-options { display: flex; flex-wrap: wrap; gap: 5px; }

.member-option { display: block; color: #435267; font-size: 11.5px; cursor: pointer; }
.member-option input { position: absolute; opacity: 0; pointer-events: none; }
.member-option span {
  display: block;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--panel-faint);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.member-option input:checked + span {
  background: var(--state-pending-bg);
  border-color: var(--state-pending-border);
  color: var(--state-pending-fg);
}

/* 成员进度编辑器（v039 独有） */
.member-progress-editor {
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.member-progress-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.member-progress-head strong { margin: 0; }
#memberProgressEditor { display: grid; gap: 6px; margin-top: var(--sp-2); }
.member-progress-field {
  display: grid;
  gap: 5px;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: #f8fafc;
}
.member-progress-person { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.member-progress-field b { color: var(--text-2); font-size: 11.5px; font-weight: 700; }
.member-progress-field time { color: var(--text-faint); font-size: 10px; font-weight: 600; }
.member-progress-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.member-progress-controls select { min-height: 32px; padding: 6px var(--sp-2); font-size: 11px; }

/* help-toggle（v039 独有） */
.help-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--help-soft);
  border-radius: var(--r-md);
  color: var(--help-deep);
  font-size: 11px;
  background: var(--help-bg);
  cursor: pointer;
}
.help-toggle input { width: 14px; height: 14px; margin: 0; accent-color: var(--help); }

.member-progress-field textarea { min-height: 56px; padding: var(--sp-2) 9px; font-size: 11.5px; background: #fff; }
.member-progress-empty {
  margin: 0;
  padding: 10px;
  color: var(--text-faint);
  font-size: var(--fs-sm);
  text-align: center;
  background: var(--panel-soft);
  border-radius: var(--r-md);
}

/* form actions */
.form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }

/* ============== Project detail dialog ============== */
.project-detail {
  position: fixed;
  z-index: 50;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100% - 28px));
  max-height: min(720px, calc(100dvh - 40px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  color: var(--ink);
  background: var(--panel-faint);
  box-shadow: var(--shadow-float);
}
.project-detail::backdrop { background: rgba(15, 23, 38, .52); backdrop-filter: blur(6px); }

.detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 13px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .96);
}
.detail-head > div > span { color: var(--info); font-size: 11px; font-weight: 700; }
.detail-head h2 { margin: 3px 0 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.detail-head > button {
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  line-height: 1;
}
.detail-head > button:hover { background: var(--panel-soft); }

.detail-surface { max-height: inherit; overflow-y: auto; }
#detailContent { display: grid; gap: 12px; padding: 16px 20px 20px; }

.detail-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: 12px;
}
.detail-summary > span:not(.tag) {
  padding-right: 8px;
  border-right: 1px solid var(--line);
}
.detail-summary > span:last-child { border-right: 0; }

.detail-block {
  padding: 10px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: #fff;
}
.detail-block h3, .detail-section-title h3 {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
}
.detail-block p { margin: 4px 0 0; color: var(--text-3); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; }
.detail-team { margin-top: 2px; }
.detail-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.detail-section-title span { color: var(--muted); font-size: 11px; }

.member-progress-list { display: grid; gap: 6px; }
.member-progress-card {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: #fff;
}
.member-avatar {
  display: grid;
  width: 32px; height: 32px;
  place-items: center;
  border-radius: 50%;
  color: var(--avatar-fg, var(--info-deep));
  font-size: 11px;
  font-weight: 700;
  background: var(--avatar-bg, var(--info-bg));
}
.member-progress-card header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.member-progress-card strong { color: var(--text-2); font-size: 12.5px; }
.member-progress-card time {
  margin-left: auto;
  color: var(--text-faint);
  font-size: 10px;
  white-space: nowrap;
}
.owner-badge {
  padding: 2px 5px;
  border-radius: var(--r-sm);
  color: var(--warn-deep);
  font-size: 9px;
  font-weight: 700;
  background: var(--warn-bg-deep);
}
.member-status {
  padding: 2px 5px;
  border-radius: var(--r-sm);
  font-size: 9px;
  font-weight: 700;
  color: var(--info-deep);
  background: var(--info-bg);
}
/* 中文状态枚举（app.js 拼出 status-等待他人 等） */
.member-status.status-等待他人 { color: var(--warn-deep); background: var(--warn-bg-deep); }
.member-status.status-我的部分已完成 { color: var(--success-deep); background: var(--success-bg); }
.member-status.status-进行中 { color: var(--info-deep); background: var(--info-bg); }
.member-status.status-overdue { color: var(--brand-deep); background: var(--brand-soft); }
.member-status.status-progress { color: var(--success-deep); background: var(--success-bg); }

.member-progress-card p {
  margin: 4px 0 0;
  color: var(--text-3);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.member-progress-card .empty-progress { color: var(--text-faint); }

/* ============== 空状态（v039 独有） ============== */
.empty-list {
  display: grid;
  gap: 10px;
  place-items: center;
  padding: 56px 14px 48px;
  color: var(--muted);
  text-align: center;
}
.empty-list-illustration {
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--panel-faint);
  border: 1px solid var(--line-soft);
}
.empty-list-title { margin: 0; color: var(--text-2); font-size: 15px; font-weight: 700; }
.empty-list-hint { margin: 0; font-size: 12.5px; color: var(--muted); }
.empty-list-hint b { color: var(--brand); font-weight: 700; }

/* ============== 媒体查询：1180 / 760 / 390 ============== */
@media (max-width: 1180px) {
  .workbench { grid-template-columns: 1fr; }
  .editor { position: static; }
  .project-row { grid-template-columns: minmax(220px, 1fr) 92px 120px; }
  .row-actions { grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(88px, 1fr)); }
}

@media (max-width: 760px) {
  body.editor-open { overflow: hidden; }

  .shell {
    width: 100%;
    padding: 8px 12px calc(28px + env(safe-area-inset-bottom));
  }

  .topbar {
    display: flex;
    padding: 12px 13px;
    border-color: var(--line-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    background: #fff;
  }
  .topbar .brand { font-size: 11px; }
  .topbar h1 { margin-top: 2px; font-size: 18px; line-height: 1.25; }
  .topbar > div > p { font-size: 11px; line-height: 1.35; }
  .topbar .actions { flex-wrap: nowrap; gap: 6px; margin-left: auto; }
  .topbar #backupBtn, .topbar #importBtn { display: none; }
  .topbar #refreshBtn { min-height: 40px; padding: 7px 12px; border-radius: var(--r-md); font-size: 11px; background: #f5f7fa; }
  .topbar #newBtn {
    display: grid;
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    place-items: center;
    font-size: 0;
    box-shadow: none;
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
  }
  .topbar #newBtn::before { content: "+"; font-size: 22px; font-weight: 500; line-height: 1; color: #fff; }

  .personal-strip {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 12px;
    margin-top: 8px;
    padding: 8px 9px;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
  }
  .identity-control { grid-template-columns: 1fr; gap: 2px; min-width: 0; font-size: 9px; }
  .identity-control select { min-height: 34px; padding: 5px 9px; font-size: 11px; }
  .personal-strip > p {
    grid-column: 1 / -1;
    grid-row: 2;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .personal-stats { gap: 3px; align-self: end; }
  .personal-stats span,
  .personal-stats button {
    min-width: 48px;
    min-height: 34px;
    padding: 3px 5px;
    font-size: 8px;
  }
  .personal-stats b { font-size: var(--fs-sm); }

  .reminder-banner { gap: 8px; margin-top: 7px; padding: 8px 10px; border-radius: var(--r-md); }
  .reminder-banner strong { font-size: 11px; }
  .reminder-banner p { font-size: 8.5px; line-height: 1.3; opacity: .85; }
  .reminder-banner button { min-height: 32px; padding: 5px 10px; font-size: 10px; }

  .weekly-panel { margin-top: 7px; border-radius: var(--r-md); }
  .weekly-toggle { padding: 9px; }
  .weekly-panel h2 { font-size: var(--fs-sm); }
  .weekly-panel .weekly-toggle p { font-size: 10px; }
  .weekly-toggle-meta strong { font-size: 9px; }
  .weekly-activity {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 9px 9px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .weekly-activity::-webkit-scrollbar { display: none; }
  .weekly-activity button { flex: 0 0 265px; grid-template-columns: auto minmax(0, 1fr) auto; scroll-snap-align: start; }
  .weekly-activity time { display: none; }

  .metrics {
    grid-template-columns: 1.28fr repeat(3, 1fr);
    gap: 0;
    margin: 8px 0 10px;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
  }
  .shell.member-view .metrics { grid-template-columns: 1.28fr repeat(2, 1fr); }
  .metric {
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    justify-items: start;
    min-height: 62px;
    padding: 7px 8px;
    border: 0;
    border-right: 1px solid var(--line-soft);
    border-radius: 0;
    background: #fff;
    box-shadow: none;
  }
  .metric:last-child { border-right: 0; }
  .metric.active { background: var(--metric-soft, var(--panel-faint)); box-shadow: inset 0 -2px 0 var(--metric-color, var(--primary)); }
  .metric span { font-size: 9px; line-height: 1.2; white-space: nowrap; opacity: .8; }
  .metric strong { margin: 3px 0 0; font-size: 20px; line-height: 1; }
  .metric em { margin-top: 3px; font-size: 7px; line-height: 1.2; white-space: nowrap; }

  .workbench { display: block; }
  .list-panel { border: 0; border-radius: 0; background: transparent; box-shadow: none; }

  .toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px 72px;
    gap: 6px;
    padding: 7px 0 9px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .toolbar label { gap: 0; min-width: 0; font-size: 0; }
  .toolbar input, .toolbar select { min-height: 40px; padding: 7px 9px; font-size: 11px; background: #fff; }
  .focus-pill {
    min-width: 0;
    min-height: 40px;
    align-self: end;
    padding: 5px 7px;
    border-radius: var(--r-md);
    font-size: 11px;
    background: var(--help-bg);
  }
  .focus-pill.active {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: var(--primary-soft);
    border-left: 3px solid var(--brand);
    padding-left: calc(7px - 3px);
  }

  .project-list { gap: 14px; padding: 8px 0 0; }
  .group {
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .group.feedback {
    margin-top: 2px;
    border: 0;
    background: transparent;
  }
  .group-title {
    min-height: 36px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--line-soft);
  }
  .group.feedback .group-title { padding-left: 2px; }
  .group-title h2 { color: var(--text-1); font-size: 14px; }
  .group-title span {
    padding: 4px 9px;
    color: var(--stage-fg, var(--text-2));
    background: var(--stage-bg, var(--panel-soft));
  }

  .project-row {
    grid-template-columns: minmax(0, 1fr) 58px;
    grid-template-areas:
      "main actions"
      "meta actions";
    gap: 2px 7px;
    min-height: 88px;
    padding: 7px 8px 7px 10px;
    border-color: var(--stage-border, var(--line-soft));
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
  }
  .project-main { grid-area: main; min-width: 0; }
  /* v055 移动端：项目信息同样改为 2x2 网格 */
  .project-meta {
    display: grid;
    grid-area: meta;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 2px;
    min-width: 0;
    align-content: center;
  }
  .project-meta .running-days { font-size: 8px; padding: 0; border: 0; background: transparent; }
  .project-meta .tag { justify-self: start; }
  .project-meta .meta { font-size: 8px; }
  .row-actions { grid-area: actions; }

  /* v041 #7 移动端保持 2px/36px（与桌面一致） */
  .project-row::after { left: 10px; width: 36px; height: 2px; }

  .title-line { gap: 5px; }
  .title-copy { gap: 5px; }
  .project-title-button { width: 100%; padding-right: 0; overflow: hidden; font-size: 13.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
  .priority-badge, .pill-tag-important, .pill-tag-attention { padding: 2px 5px; font-size: 8px; }
  .next-action b { margin-right: 4px; font-size: 8px; }
  .project-signals { gap: 3px; }
  .attention-badge { padding: 2px 4px; font-size: 7px; }
  .project-main p {
    overflow: hidden;
    margin-top: 1px;
    font-size: 9.5px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .project-main .next-action { margin-top: 1px; }

  .tag {
    padding: 2px 5px;
    font-size: 8.5px;
    background: var(--nature-soft);
  }
  .meta { overflow: hidden; color: #526071; font-size: 8.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
  .running { padding: 1px 4px; border-radius: 3px; font-size: 8px; line-height: 1.35; font-weight: 600; }

  .row-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-self: stretch;
    align-items: center;
    align-content: center;
    gap: 4px;
    margin: 0;
    padding-left: 6px;
    border-left: 1px solid var(--line-soft);
  }
  .row-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    min-height: 36px;
    padding: 4px 2px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel-faint);
    color: var(--text-2);
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
  }
  .row-actions button:hover { border-color: var(--line-strong); background: #fff; }
  .row-actions .action-icon { display: inline-flex; font-size: 9px; line-height: 1; opacity: .85; }
  .row-actions .primary-action {
    order: 1;
    min-width: 0;
    padding: 4px 2px;
    color: #fff;
    background: var(--stage-color);
    border-color: var(--stage-color);
  }
  .row-actions .primary-action:hover { filter: brightness(1.06); background: var(--stage-color); }

  .more-toggle {
    display: block;
    order: 2;
    width: 100%;
    padding: 0;
    color: var(--text-2);
    font-size: 13px;
    background: var(--panel-faint);
    border-color: var(--line-soft);
  }
  .secondary-actions { display: none; }
  .project-row:has(.row-actions.actions-open) { z-index: 20; }
  .row-actions.actions-open .secondary-actions {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    right: 0;
    display: grid;
    width: 164px;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: var(--shadow-float);
  }
  .row-actions .secondary-actions button { display: flex; min-height: 44px; border-radius: 8px; font-size: 11px; }
  .row-actions .secondary-actions .danger {
    color: var(--help);
    background: rgba(239, 68, 68, .08);
    border-color: rgba(239, 68, 68, .35);
  }
  .row-actions .secondary-actions .danger:hover { background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .55); }

  .editor {
    position: fixed;
    z-index: 30;
    inset: auto 0 0;
    max-height: 88dvh;
    overflow-y: auto;
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: var(--shadow-sheet);
    transform: translateY(105%);
    transition: transform .22s ease;
  }
  .editor.open { transform: translateY(0); }
  .editor h2 { margin: 0; font-size: 19px; }
  .editor-head { margin-bottom: 14px; }
  .close-editor {
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    font-size: 24px;
    line-height: 1;
    border-radius: 50%;
    background: var(--panel-soft);
    border-color: var(--line);
  }
  .editor-overlay {
    position: fixed;
    z-index: 20;
    inset: 0;
    background: rgba(20, 31, 48, .35);
  }
  .editor-overlay.open { display: block; }

  .member-options { gap: 5px; }
  .member-option span { padding: 6px 9px; font-size: 11px; }
  .member-progress-head { align-items: flex-start; }
  .member-progress-head small { max-width: 125px; text-align: right; }
  .member-progress-controls { grid-template-columns: minmax(0, 1fr) auto; }
  .help-toggle { padding-inline: 7px; }

  .project-detail {
    width: 100%;
    max-width: none;
    max-height: 88dvh;
    margin: auto 0 0;
    border: 0;
    border-radius: 16px 16px 0 0;
  }
  .detail-head { padding: 15px 16px 13px; }
  .detail-head h2 { max-width: 280px; font-size: 18px; }
  #detailContent { gap: 10px; padding: 13px 14px calc(20px + env(safe-area-inset-bottom)); }
  .detail-block { padding: 10px 11px; }
  .member-progress-card { padding: 10px; }
  .member-progress-card time { flex: 1 0 100%; margin-left: 0; }

  .fab-new { display: none; }                          /* 顶部已有 #newBtn 移动版 */
}

@media (max-width: 390px) {
  .shell { padding-inline: 10px; }
  .topbar { padding-inline: 11px; }
  .topbar h1 { font-size: 18px; }
  .metric { padding-inline: 9px; }
  .metric span { font-size: 10px; }
  .metric strong { font-size: 23px; }
  .metric em { font-size: 8px; }
  .project-main p { -webkit-line-clamp: 1; }
  .meta { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (min-width: 360px) and (max-width: 760px) {
  .topbar p { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}