/* 需求收集进度 — Ant Design 风格 (antd 5.x design language)
   移动端优先：iPhone 15 Pro (393x852) 为目标。零外部依赖。 */
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius-s: 8px; --radius-m: 12px; --radius-l: 16px; --radius-full: 999px;
  --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px;
  --font-size-lg: 20px; --font-size-xl: 24px;
  --ring: 3px; --ease: cubic-bezier(.2, 0, 0, 1); --dur: 200ms;
  --z-header: 100; --z-fab: 200; --z-modal: 1000; --z-toast: 1100;
  /* antd 5.x 色板 */
  --antd-blue: #1677ff;
  --antd-blue-hover: #4096ff;
  --antd-blue-active: #0958d9;
  --antd-bg: #f5f5f5;
  --antd-surface: #ffffff;
  --antd-border: #d9d9d9;
  --antd-border-split: #f0f0f0;
  --antd-text: rgba(0, 0, 0, 0.88);
  --antd-text-2: rgba(0, 0, 0, 0.65);
  --antd-text-3: rgba(0, 0, 0, 0.45);
  --antd-success: #52c41a;
  --antd-error: #ff4d4f;
  --antd-fill: rgba(0, 0, 0, 0.04);
  --shadow-1: 0 1px 2px rgba(0,0,0,.03), 0 1px 6px -1px rgba(0,0,0,.02), 0 2px 4px rgba(0,0,0,.02);
  --shadow-2: 0 6px 16px 0 rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12), 0 9px 28px 8px rgba(0,0,0,.05);
  --scrim: rgba(0, 0, 0, .45);
  color-scheme: light;
}
[data-theme="dark"] {
  --antd-bg: #000000;
  --antd-surface: #1f1f1f;
  --antd-border: #424242;
  --antd-border-split: #303030;
  --antd-text: rgba(255, 255, 255, 0.88);
  --antd-text-2: rgba(255, 255, 255, 0.65);
  --antd-text-3: rgba(255, 255, 255, 0.45);
  --antd-blue: #1668dc;
  --antd-blue-hover: #3c89e8;
  --antd-blue-active: #3c9ae8;
  --antd-success: #49aa19;
  --antd-error: #dc4446;
  --antd-fill: rgba(255, 255, 255, 0.08);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 6px -1px rgba(0,0,0,.3);
  --shadow-2: 0 6px 16px 0 rgba(0,0,0,.5), 0 3px 6px -4px rgba(0,0,0,.6);
  --scrim: rgba(0, 0, 0, .65);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; min-height: 100svh;
  background: var(--antd-bg); color: var(--antd-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 16px; line-height: 1.5715;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
/* ---------- 可访问性 ---------- */
.skip-link { position: absolute; left: var(--space-3); top: -48px; z-index: var(--z-modal);
  padding: var(--space-2) var(--space-4); background: var(--antd-blue); color: #fff;
  border-radius: var(--radius-s); text-decoration: none; font-weight: 600; transition: top var(--dur) var(--ease); }
.skip-link:focus { top: var(--space-3); }
:focus-visible { outline: var(--ring) solid var(--antd-blue); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; }
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ---------- 布局 ---------- */
.app { max-width: 840px; margin: 0 auto; min-height: 100dvh; min-height: 100svh; display: flex; flex-direction: column; }
.app-header { position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--antd-surface) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--antd-border-split); }
.app-header__inner { display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  padding-top: calc(var(--space-2) + env(safe-area-inset-top, 0px));
  max-width: 840px; margin: 0 auto; width: 100%; }
.app-header__brand { display: flex; align-items: center; gap: var(--space-2); }
.app-header__logo { display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: var(--radius-s); background: var(--antd-blue); color: #fff; }
.app-header__title { font-size: 17px; font-weight: 600; letter-spacing: 0; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border: none;
  border-radius: var(--radius-s); background: transparent; color: var(--antd-text-2); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.icon-btn:hover { background: var(--antd-fill); color: var(--antd-text); }
.icon-btn .theme-icon { display: none; }
.icon-btn .theme-icon[data-icon="sun"] { display: block; }
[data-theme="dark"] .icon-btn .theme-icon[data-icon="sun"] { display: none; }
[data-theme="dark"] .icon-btn .theme-icon[data-icon="moon"] { display: block; }
.app-main { flex: 1; padding: var(--space-2) var(--space-3) var(--space-7);
  padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom, 0px)); }
.app-footer { padding: var(--space-3); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  text-align: center; color: var(--antd-text-3); font-size: 12px; }
/* ---------- 按钮 (antd) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--antd-border); border-radius: var(--radius-s);
  background: var(--antd-surface); color: var(--antd-text); font-size: 14px; font-weight: 400;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: all var(--dur) var(--ease); }
.btn:hover { color: var(--antd-blue); border-color: var(--antd-blue); }
.btn:active { color: var(--antd-blue-active); border-color: var(--antd-blue-active); transform: scale(.97); }
.btn--primary { background: var(--antd-blue); border-color: var(--antd-blue); color: #fff; }
.btn--primary:hover { background: var(--antd-blue-hover); border-color: var(--antd-blue-hover); color: #fff; }
.btn--primary:active { background: var(--antd-blue-active); border-color: var(--antd-blue-active); color: #fff; transform: scale(.97); }
.btn--danger { background: var(--antd-surface); border-color: var(--antd-border); color: var(--antd-error); }
.btn--danger:hover { color: var(--antd-error); border-color: var(--antd-error); }
.btn--text { border-color: transparent; background: transparent; color: var(--antd-blue); }
.btn--text:hover { background: var(--antd-fill); border-color: transparent; }
.btn--danger-solid { background: var(--antd-error); border-color: var(--antd-error); color: #fff; }
.btn--danger-solid:hover { opacity: .88; }
.btn .icon { width: 16px; height: 16px; flex-shrink: 0; }
/* ---------- 任务页头部 ---------- */
.page-head { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); flex-wrap: wrap; }
.back-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 var(--space-2);
  border: none; border-radius: var(--radius-s); background: transparent; color: var(--antd-blue);
  font-size: 16px; cursor: pointer; flex-shrink: 0; white-space: nowrap; }
.back-btn .icon { width: 16px; height: 16px; flex-shrink: 0; }
.back-btn__text { flex-shrink: 0; white-space: nowrap; }
.back-btn:hover { background: var(--antd-fill); }
.page-title { font-size: 22px; font-weight: 600; margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.toolbar { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); }
.toolbar .btn { width: 100%; }
/* ---------- 统计 (antd Statistic) ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-3); }
.stat { background: var(--antd-surface); border: 1px solid var(--antd-border-split); border-radius: var(--radius-m);
  padding: var(--space-3) var(--space-3); text-align: center; box-shadow: var(--shadow-1); }
.stat__label { font-size: 12px; color: var(--antd-text-3); margin-bottom: 2px; }
.stat__value { font-size: 22px; font-weight: 700; color: var(--antd-blue); font-variant-numeric: tabular-nums; line-height: 1.2; }
.progress-track { height: 8px; border-radius: var(--radius-full); background: var(--antd-fill);
  overflow: hidden; margin-bottom: var(--space-4); }
.progress-fill { height: 100%; border-radius: var(--radius-full); background: var(--antd-blue);
  width: 0; transition: width 300ms var(--ease); }
/* ---------- 部门列表 (antd List/Card) ---------- */
.dept-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2);
  color: var(--antd-text-3); font-size: 13px; padding: 0 var(--space-1); }
.dept-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }.dept-row { background: var(--antd-surface); border: 1px solid var(--antd-border-split); border-radius: var(--radius-m);
  padding: var(--space-3) var(--space-3); box-shadow: var(--shadow-1); }
.dept-row__top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.dept-name { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; line-height: 1.4; }
.dept-state { flex-shrink: 0; font-size: 12px; color: #fff; background: #237804;
  padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap; font-weight: 500; }
[data-theme="dark"] .dept-state { background: #b7eb8f; color: #135200; }
.dept-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.dept-chips { display: inline-flex; gap: var(--space-2); flex-shrink: 0; }
.dept-count { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; }
.toggle-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3);
  border: 1px solid var(--antd-border); border-radius: var(--radius-s); background: var(--antd-surface);
  color: var(--antd-text-2); font-size: 13px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: all var(--dur) var(--ease); user-select: none; }
.toggle-chip:hover { border-color: var(--antd-blue); color: var(--antd-blue); }
.toggle-chip:active { transform: scale(.97); }
.toggle-chip .chip-box { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--antd-border);
  display: grid; place-items: center; transition: all var(--dur) var(--ease); flex-shrink: 0; }
.toggle-chip .chip-box svg { width: 10px; height: 10px; opacity: 0; transition: all var(--dur) var(--ease); }
.toggle-chip[aria-pressed="true"] { border-color: var(--antd-blue); background: color-mix(in srgb, var(--antd-blue) 8%, var(--antd-surface)); color: var(--antd-blue); }
.toggle-chip[aria-pressed="true"] .chip-box { border-color: var(--antd-blue); background: var(--antd-blue); }
.toggle-chip[aria-pressed="true"] .chip-box svg { opacity: 1; }
.toggle-chip[aria-pressed="true"] .chip-box svg path { stroke: #fff; }
/* 岗位计数 (antd InputNumber) */
.dept-count__label { font-size: 13px; color: var(--antd-text-3); white-space: nowrap; }
.btn, .toggle-chip, .step-btn, .count-input, .back-btn, .icon-btn, .task-card__delete, .task-card {
  touch-action: manipulation;
}
.step-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--antd-border);
  border-radius: var(--radius-s); background: var(--antd-surface); color: var(--antd-text-2); cursor: pointer;
  font-size: 16px; line-height: 1; flex-shrink: 0;
  transition: all var(--dur) var(--ease); }
.step-btn:hover { border-color: var(--antd-blue); color: var(--antd-blue); }
.step-btn:active { background: var(--antd-fill); transform: scale(.92); }
.count-input { width: 56px; min-height: 44px; padding: 0; border: 1px solid var(--antd-border); border-radius: var(--radius-s);
  font-size: 16px; text-align: center; background: var(--antd-surface); color: var(--antd-text);
  font-variant-numeric: tabular-nums; flex-shrink: 0; }
.count-input:hover { border-color: var(--antd-blue); }
.count-input:focus { border-color: var(--antd-blue); box-shadow: 0 0 0 2px rgba(22, 119, 255, .2); outline: none; }
/* ---------- 首页任务列表 (antd List 条目式, 无盒子) ---------- */
.card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.task-card { display: block; text-decoration: none; color: inherit; padding: var(--space-3) var(--space-1);
  border-bottom: 1px solid var(--antd-border-split); transition: background var(--dur) var(--ease); }
.card-list li:last-child .task-card { border-bottom: none; }
.task-card:hover { background: var(--antd-fill); }
.task-card:active { background: color-mix(in srgb, var(--antd-fill) 70%, var(--antd-surface)); }
.task-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.task-card__name { font-size: var(--font-size-lg); font-weight: 600; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.task-card__delete { display: grid; place-items: center; width: 44px; height: 44px; border: none;
  border-radius: var(--radius-s); background: transparent; color: var(--antd-text-3); cursor: pointer; flex-shrink: 0;
  transition: all var(--dur) var(--ease); opacity: .75; }
.task-card__delete:hover { opacity: 1; color: var(--antd-error); background: var(--antd-fill); }
.task-card__meta { color: var(--antd-text-3); font-size: 13px; margin-top: 2px; }
.task-card__bar { height: 6px; border-radius: var(--radius-full); background: var(--antd-fill); overflow: hidden; margin-top: var(--space-2); }
.task-card__bar-fill { height: 100%; border-radius: var(--radius-full); background: var(--antd-blue); transition: width 300ms var(--ease); }
.task-card__footer { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.task-card__chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--antd-text-2);
  background: var(--antd-fill); padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap; font-variant-numeric: tabular-nums; }
.task-card__chevron { color: var(--antd-text-3); flex-shrink: 0; margin-left: auto; }
/* ---------- 新建任务 ---------- */
.add-task { margin-top: var(--space-4); }
.add-task__form { display: flex; gap: var(--space-2); align-items: center; }
.add-task__input { flex: 1 1 160px; min-width: 0; min-height: 44px; padding: 0 var(--space-3);
  border: 1px solid var(--antd-border); border-radius: var(--radius-s); font-size: 16px;
  background: var(--antd-surface); color: var(--antd-text); }
.add-task__input::placeholder { color: var(--antd-text-3); }
.add-task__input:hover { border-color: var(--antd-blue); }
.add-task__input:focus { border-color: var(--antd-blue); box-shadow: 0 0 0 2px rgba(22, 119, 255, .2); outline: none; }
.add-task__submit { flex-shrink: 0; }
/* ---------- 空状态 ---------- */
.empty { text-align: center; padding: var(--space-8) var(--space-4); color: var(--antd-text-2); }
.empty__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-l);
  background: var(--antd-fill); color: var(--antd-blue); margin-bottom: var(--space-3); }
.empty__title { font-size: var(--font-size-lg); font-weight: 600; color: var(--antd-text); margin: 0 0 var(--space-1); }
.empty__body { margin: 0 0 var(--space-5); }
/* ---------- 弹窗 (antd Modal) ---------- */
.modal { border: none; padding: 0; background: transparent; max-width: 400px; width: calc(100% - 2 * var(--space-4)); }
.modal::backdrop { background: var(--scrim); }
.modal__card { background: var(--antd-surface); border-radius: var(--radius-l); padding: var(--space-5);
  box-shadow: var(--shadow-2); }
.modal__title { margin: 0 0 var(--space-2); font-size: var(--font-size-lg); font-weight: 600; }
.modal__body { margin: 0 0 var(--space-5); color: var(--antd-text-2); }
.modal__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
/* ---------- Toast ---------- */
.toast-region { position: fixed; bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column;
  gap: var(--space-2); align-items: center; pointer-events: none; width: min(92vw, 420px); }
.toast { background: var(--antd-text); color: var(--antd-surface); border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4); font-size: 14px; box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.toast.is-visible { opacity: 1; transform: translateY(0); }
/* ---------- 桌面端 (≥768px) ---------- */
@media (min-width: 768px) {
  body { font-size: var(--font-size-md); }
  .app-main { padding: var(--space-5) var(--space-5) var(--space-8); }
  .dept-row { padding: var(--space-3) var(--space-4); }
  .dept-row__top { margin-bottom: var(--space-2); }
  .dept-name { font-size: var(--font-size-md); }
  .stats { gap: var(--space-3); }
  .toolbar { grid-template-columns: repeat(4, 1fr); }
  .add-task__input { min-height: 44px; }
}