/* ============================================================================
 * HF Flagship Design System · flagship.css（冻结共享基线）
 * 版本 v1.0 · 2026-10-06 (UTC+8)
 * 作用域：全部组件类以 .hf- 前缀隔离；类名禁含 "card"，容器用 panel。
 * 风格：高级简约商业化 · 中性灰白底 · indigo #4F6BED 主色 · 金色 #C2A46B 少量点缀
 * 约束：禁魔法数值，全部取自 :root token；键盘焦点可见；对比度 AA；reduced-motion。
 * ========================================================================== */

/* ---------- 1. Design Tokens（冻结值，禁止散落魔法数） ---------- */
:root {
  /* 主色 indigo */
  --hf-primary:        #4F6BED;
  --hf-primary-press:  #3D55D4;
  --hf-primary-weak-1: #F2F4FF;
  --hf-primary-weak-2: #E8EDFF;
  --hf-primary-weak-3: #C9D4FF;

  /* 中性 */
  --hf-bg:        #F5F5F7;
  --hf-surface:   #FFFFFF;
  --hf-line:      #E8E8ED;
  --hf-line-2:    #D2D2D7;
  --hf-ink:       #1D1D1F;
  --hf-ink-2:     #6E6E73;
  --hf-ink-3:     #8E8E93;

  /* 金色点缀（仅少量） */
  --hf-gold:      #C2A46B;
  --hf-gold-weak: #F5EFE2;

  /* 语义色（满足 AA） */
  --hf-success:   #1F7A5C;
  --hf-success-weak: #E6F4EE;
  --hf-warning:   #B97F14;
  --hf-warning-weak: #FBF1DC;
  --hf-danger:    #C0392B;
  --hf-danger-weak:  #FBE9E7;

  /* 圆角：控件 8 / 卡片 12（标签胶囊继续 999） */
  --hf-r-card:14px;
  --hf-r-control:14px;
  --hf-r-sm:14px;

  /* 间距（4/8 基准） */
  --hf-sp-1: 4px;
  --hf-sp-2: 8px;
  --hf-sp-3: 12px;
  --hf-sp-4: 16px;
  --hf-sp-5: 24px;

  /* 阴影：发丝级 1px 边 + 克制分层阴影（不大黑条） */
  --hf-shadow-1: 0 1px 2px rgba(15,24,39,.04), 0 2px 12px rgba(15,24,39,.06);
  --hf-shadow-2: 0 4px 16px rgba(15,24,39,.08), 0 12px 32px rgba(15,24,39,.10);

  /* 字体栈 */
  --hf-font: -apple-system, BlinkMacSystemFont, 'PingFang SC',
             'Noto Sans SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
  --hf-font-mono: 'SF Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 尺寸/层级/动效 */
  --hf-maxw: 1080px;
  --hf-z-sticky: 100;
  --hf-z-modal: 1000;
  --hf-ease: cubic-bezier(.4,0,.2,1);
  --hf-focus-ring: 0 0 0 3px rgba(79,107,237,.35);
}

/* ---------- 2. 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--hf-bg); color: var(--hf-ink);
  font-family: var(--hf-font); font-size: 13px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* 键盘焦点可见（鼠标点击不显） */
:focus-visible { outline: none; border-radius: var(--hf-r-sm); }
:focus:not(:focus-visible) { box-shadow: none; }

/* 工具 */
.hf-wrap { max-width: var(--hf-maxw); margin: 0 auto; padding: 0 var(--hf-sp-4); }
.hf-mono { font-family: var(--hf-font-mono); }
.hf-muted { color: var(--hf-ink-2); }
.hf-weak  { color: var(--hf-ink-3); }

/* ---------- 3. Panel（玻璃卡片，类名禁 card） ---------- */
.hf-panel {
  background: var(--hf-surface);
  border: 1px solid var(--hf-line);
  border-radius: var(--hf-r-card);
  box-shadow: var(--hf-shadow-1);
  padding: var(--hf-sp-4);
}
.hf-panel--glass {
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.hf-panel--flat { box-shadow: none; }
.hf-panel__hd { display:flex; align-items:center; justify-content:space-between; gap: var(--hf-sp-3); margin-bottom: var(--hf-sp-3); }
.hf-panel__title { font-size: 17px; font-weight: 600; color: var(--hf-ink); }
.hf-panel__sub { font-size: 13px; color: var(--hf-ink-2); margin-top: 4px; }

/* ---------- 4. 按钮（尺寸规范 sm=28 / md=34 默认 / lg=40） ----------
   卡片/列表动作用 md；工具条/标签用 sm；仅页面主 CTA 用 lg。禁止全宽超大按钮。 */
.hf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hf-sp-2);
  height: 32px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--hf-r-control);
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  cursor: pointer; white-space: nowrap; transition: all .15s var(--hf-ease);
}
.hf-btn--primary { background: var(--hf-primary); color: #fff; }
.hf-btn--primary:hover { background: var(--hf-primary-press); }
.hf-btn--primary:active { transform: scale(.98); }
.hf-btn--secondary { background: var(--hf-primary-weak-1); color: var(--hf-primary); }
.hf-btn--secondary:hover { background: var(--hf-primary-weak-2); }
.hf-btn--ghost { background: var(--hf-surface); color: var(--hf-ink-2); border-color: var(--hf-line-2); }
.hf-btn--ghost:hover { border-color: var(--hf-primary); color: var(--hf-primary); }
.hf-btn[disabled], .hf-btn--disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.hf-btn--sm { height: 32px; padding: 0 12px; font-size: 12px; }
.hf-btn--lg { height: 44px; padding: 0 16px; font-size: 13px; }
.hf-btn--block { width: 100%; }
/* loading 态 */
.hf-btn--loading { position: relative; color: transparent !important; }
.hf-btn--loading::after {
  content: ''; position: absolute; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: hfspin 0.32s linear infinite;
}
@keyframes hfspin { to { transform: rotate(360deg); } }

/* ---------- 4b. 可复用下拉（单选/多选，低耦合） ---------- */
.hf-dd { position: relative; display: inline-block; }
.hf-dd__btn { display: inline-flex; align-items: center; gap: 8px; }
.hf-dd__caret { font-size: 12px; opacity: .7; transition: transform .15s var(--hf-ease); }
.hf-dd[data-open="true"] .hf-dd__caret { transform: rotate(180deg); }
.hf-dd__count {
  background: var(--hf-primary); color: #fff; border-radius: 999px;
  font-size: 12px; font-weight: 600; padding: 0 8px; line-height: 16px; min-width: 16px; text-align: center;
}
.hf-dd__pop {
  position: absolute; top: calc(100% + 7px); left: 0; width: 268px; z-index: var(--hf-z-sticky);
  background: var(--hf-surface); border: 1px solid var(--hf-line); border-radius: var(--hf-r-card);
  box-shadow: var(--hf-shadow-2); overflow: hidden;
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: all .15s var(--hf-ease);
}
.hf-dd[data-open="true"] .hf-dd__pop { opacity: 1; transform: none; pointer-events: auto; }
.hf-dd__search { padding: 8px 12px; border-bottom: 1px solid var(--hf-line); }
.hf-dd__search input {
  width: 100%; height: 30px; border: 1px solid var(--hf-line-2); border-radius: var(--hf-r-control);
  padding: 0 8px; font-size: 13px; font-family: inherit;
}
.hf-dd__search input:focus { outline: none; border-color: var(--hf-primary); }
.hf-dd__list { max-height: 230px; overflow-y: auto; padding: 4px; }
.hf-dd__opt {
  display: flex; align-items: center; gap: 8px; padding: 8px 8px;
  border-radius: var(--hf-r-control); font-size: 13px; cursor: pointer; color: var(--hf-ink);
}
.hf-dd__opt:hover { background: var(--hf-primary-weak-1); }
.hf-dd__opt--sel { color: var(--hf-primary); font-weight: 600; }
.hf-dd__box {
  width: 15px; height: 15px; border: 1.5px solid var(--hf-line-2); border-radius: 14px; flex: 0 0 15px;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px;
}
.hf-dd--single .hf-dd__box { border-radius: 50%; }
.hf-dd__opt--sel .hf-dd__box { background: var(--hf-primary); border-color: var(--hf-primary); }
.hf-dd__foot { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-top: 1px solid var(--hf-line); font-size: 12px; }
.hf-dd__foot a { color: var(--hf-primary); cursor: pointer; font-weight: 600; }
.hf-dd__empty { padding: 16px; text-align: center; color: var(--hf-ink-3); font-size: 13px; }

/* ---------- 4c. 五角色卡（已就位=半透明灰底 · 缺口=indigo 强对比） ---------- */
.hf-roles { border: 1px solid var(--hf-line); border-radius: var(--hf-r-card); padding: var(--hf-sp-3); background: #FAFAFA; }
.hf-roles__hd { display: flex; align-items: center; justify-content: space-between; font-size: 12px; margin-bottom: var(--hf-sp-2); }
.hf-roles__hd b { color: var(--hf-ink); }
.hf-roles__prog { color: var(--hf-ink-3); font-weight: 600; font-size: 12px; }
.hf-roleline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.hf-role {
  min-width: 0; border: 1px solid var(--hf-line); border-radius: var(--hf-r-control);
  padding: 8px; background: var(--hf-surface); display: flex; flex-direction: column; gap: 4px;
}
.hf-role__n { font-size: 12px; font-weight: 600; }
.hf-role__s { font-size: 12px; color: var(--hf-ink-3); }
/* 已就位：半透明灰底（克制、不抢戏） */
.hf-role--filled { background: rgba(142,142,147,.10); border-color: rgba(142,142,147,.25); }
.hf-role--filled .hf-role__n { color: var(--hf-ink-2); }
.hf-role--filled .hf-role__s { color: var(--hf-ink-3); }
/* 缺口招募：indigo 强对比 */
.hf-role--need { background: var(--hf-primary-weak-1); border-color: var(--hf-primary-weak-3); }
.hf-role--need .hf-role__n { color: var(--hf-primary); }
.hf-role--need .hf-role__s { color: var(--hf-primary); font-weight: 600; }
@media (max-width: 480px) { .hf-roleline { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 5. 输入 ---------- */
.hf-input, .hf-textarea, .hf-select {
  width: 100%; font-family: inherit; font-size: 13px; color: var(--hf-ink);
  background: var(--hf-surface); border: 1px solid var(--hf-line-2);
  border-radius: var(--hf-r-control); padding: 0 12px; height: 40px;
  transition: border-color .15s var(--hf-ease), box-shadow .15s var(--hf-ease);
}
.hf-textarea { height: auto; min-height: 96px; padding: 8px 12px; resize: vertical; line-height:1.5; }
.hf-input::placeholder, .hf-textarea::placeholder { color: var(--hf-ink-3); }
.hf-input:hover, .hf-textarea:hover { border-color: var(--hf-ink-3); }
.hf-input:focus, .hf-textarea:focus, .hf-select:focus { border-color: var(--hf-primary); outline: none; }
.hf-input[disabled], .hf-textarea[disabled] { background: var(--hf-bg); color: var(--hf-ink-3); cursor: not-allowed; }
.hf-input--error, .hf-textarea--error { border-color: var(--hf-danger); }
.hf-input--error:focus { box-shadow: 0 0 0 3px rgba(192,57,43,.25); }
.hf-field__err { font-size: 12px; color: var(--hf-danger); margin-top: 8px; }

/* ---------- 6. 标签 / 徽章 ---------- */
.hf-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 4px 8px; border-radius: 999px;
  background: var(--hf-primary-weak-1); color: var(--hf-primary);
}
.hf-tag--neutral { background: var(--hf-bg); color: var(--hf-ink-2); }
.hf-tag--gold    { background: var(--hf-gold-weak); color: var(--hf-gold); }
.hf-tag--success { background: var(--hf-success-weak); color: var(--hf-success); }
.hf-tag--warning { background: var(--hf-warning-weak); color: var(--hf-warning); }
.hf-tag--danger  { background: var(--hf-danger-weak); color: var(--hf-danger); }
.hf-badge {
  display: inline-flex; align-items:center; justify-content:center;
  min-width: 18px; height: 18px; padding: 0 4px;
  font-size: 12px; font-weight: 600; border-radius: 999px;
  background: var(--hf-danger); color: #fff;
}

/* ---------- 7. 顶部功能 Tab / 子 Tab ---------- */
.hf-tabs {
  display: flex; gap: var(--hf-sp-2); overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  border-bottom: 1px solid var(--hf-line);
}
.hf-tabs::-webkit-scrollbar { display: none; }
.hf-tab {
  flex: 0 0 auto; display: inline-flex; align-items:center; gap: 8px;
  height: 44px; padding: 0 var(--hf-sp-3);
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--hf-ink-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s var(--hf-ease);
}
.hf-tab:hover { color: var(--hf-ink); }
.hf-tab[aria-selected="true"], .hf-tab.is-on { color: var(--hf-primary); border-bottom-color: var(--hf-primary); }
.hf-tab[disabled] { color: var(--hf-ink-3); cursor: not-allowed; }
/* 子 Tab（胶囊） */
.hf-subtabs { display: inline-flex; gap: 8px; padding: 4px; background: var(--hf-bg); border-radius: 999px; }
.hf-subtab {
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--hf-ink-2);
  padding: 8px 16px; border-radius: 999px; transition: all .15s var(--hf-ease);
}
.hf-subtab:hover { color: var(--hf-ink); }
.hf-subtab.is-on { background: var(--hf-surface); color: var(--hf-primary); box-shadow: var(--hf-shadow-1); }

/* ---------- 8. 头像 ---------- */
.hf-avatar {
  display: inline-flex; align-items:center; justify-content:center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--hf-primary-weak-2); color: var(--hf-primary);
  font-size: 13px; font-weight: 600; flex: 0 0 auto;
}
.hf-avatar--sm { width: 28px; height: 28px; font-size: 12px; }
.hf-avatar--gold { background: var(--hf-gold-weak); color: var(--hf-gold); }

/* ---------- 9. 列表项 ---------- */
.hf-list { display: flex; flex-direction: column; }
.hf-list__item {
  display: flex; align-items: center; gap: var(--hf-sp-3);
  padding: var(--hf-sp-3) 0; border-bottom: 1px solid var(--hf-line);
}
.hf-list__item:last-child { border-bottom: none; }
.hf-list__main { flex: 1; min-width: 0; }
.hf-list__title { font-size: 13px; font-weight: 600; color: var(--hf-ink); }
.hf-list__desc { font-size: 13px; color: var(--hf-ink-2); margin-top: 4px; }

/* ---------- 10. 空态 / 错误态 ---------- */
.hf-empty { text-align: center; padding: var(--hf-sp-5) var(--hf-sp-4); color: var(--hf-ink-3); }
.hf-empty__icon { font-size: 34px; margin-bottom: var(--hf-sp-2); opacity: .6; }
.hf-empty__title { font-size: 13px; font-weight: 600; color: var(--hf-ink-2); }
.hf-empty__desc { font-size: 13px; margin-top: 4px; }
.hf-error {
  display: flex; align-items: flex-start; gap: var(--hf-sp-3);
  background: var(--hf-danger-weak); border: 1px solid rgba(192,57,43,.2);
  border-radius: var(--hf-r-control); padding: var(--hf-sp-3) var(--hf-sp-4);
  color: var(--hf-danger); font-size: 13px;
}

/* ---------- 11. 看板（KPI 卡） ---------- */
.hf-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hf-sp-3); }
.hf-kpi {
  background: var(--hf-surface); border: 1px solid var(--hf-line);
  border-radius: var(--hf-r-control); padding: var(--hf-sp-4);
}
.hf-kpi__label { font-size: 13px; color: var(--hf-ink-2); }
.hf-kpi__value { font-size: 22px; font-weight: 600; color: var(--hf-ink); margin-top: 4px; font-family: var(--hf-font-mono); }
.hf-kpi__sub { font-size: 12px; color: var(--hf-ink-3); margin-top: 4px; }
@media (max-width: 480px) { .hf-kpi-grid { grid-template-columns: 1fr; } }

/* ---------- 12. 甘特条 ---------- */
.hf-gantt { display: flex; flex-direction: column; gap: var(--hf-sp-2); }
.hf-gantt__row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: var(--hf-sp-3); }
.hf-gantt__name { font-size: 13px; color: var(--hf-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-gantt__track { position: relative; height: 22px; background: var(--hf-bg); border-radius: 999px; }
.hf-gantt__bar {
  position: absolute; top: 0; bottom: 0; border-radius: 999px;
  background: var(--hf-primary); opacity: .9; min-width: 4px;
}
.hf-gantt__bar--gold { background: var(--hf-gold); }
.hf-gantt__bar--done { background: var(--hf-success); }

/* ---------- 13. 弹窗 ---------- */
.hf-modal-overlay {
  position: fixed; inset: 0; background: rgba(29,29,31,.4);
  display: flex; align-items: center; justify-content: center; padding: var(--hf-sp-4);
  opacity: 0; pointer-events: none; transition: opacity .2s var(--hf-ease); z-index: var(--hf-z-modal);
}
.hf-modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.hf-modal {
  background: var(--hf-surface); border-radius: var(--hf-r-card);
  width: 100%; max-width: 440px; box-shadow: var(--hf-shadow-2);
  transform: translateY(10px) scale(.98); transition: transform .2s var(--hf-ease);
}
.hf-modal-overlay.is-open .hf-modal { transform: none; }
.hf-modal__hd { padding: var(--hf-sp-4); border-bottom: 1px solid var(--hf-line); font-weight: 600; }
.hf-modal__bd { padding: var(--hf-sp-4); color: var(--hf-ink-2); }
.hf-modal__ft { padding: var(--hf-sp-3) var(--hf-sp-4); display: flex; justify-content: flex-end; gap: var(--hf-sp-2); }

/* ---------- 14. 负责人 / 指派（杜绝“未挂人”空盒） ---------- */
.hf-owners { display: inline-flex; align-items: center; }
.hf-owners .hf-avatar { margin-left: -8px; border: 2px solid var(--hf-surface); }
.hf-owners .hf-avatar:first-child { margin-left: 0; }
.hf-owners__more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-left: -8px; border-radius: 50%;
  background: var(--hf-bg); border: 2px solid var(--hf-surface);
  font-size: 12px; font-weight: 600; color: var(--hf-ink-2);
}
.hf-assign {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 8px; border-radius: var(--hf-r-control);
  border: 1px dashed var(--hf-line-2); background: transparent;
  color: var(--hf-ink-3); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all .15s var(--hf-ease);
}
.hf-assign:hover { border-color: var(--hf-primary); color: var(--hf-primary); background: var(--hf-primary-weak-1); }

/* ---------- 15. 任务行（密度型，课程内页/看板通用） ---------- */
.hf-task {
  display: flex; align-items: center; gap: var(--hf-sp-3);
  padding: var(--hf-sp-2) var(--hf-sp-3); border-radius: var(--hf-r-control);
}
.hf-task:hover { background: var(--hf-bg); }
.hf-task__main { flex: 1; min-width: 0; }
.hf-task__title { font-size: 13px; font-weight: 600; color: var(--hf-ink); }
.hf-task__meta { font-size: 12px; color: var(--hf-ink-3); margin-top: 1px; }

/* ---------- 17. 房间六段组件（U2/U3 复用，全状态） ----------
   17.1 班规手风琴（可展开/编辑/逐人确认清单＋奖惩） */
.hf-acc { border: 1px solid var(--hf-line); border-radius: var(--hf-r-card); overflow: hidden; background: var(--hf-surface); }
.hf-acc__item { border-bottom: 1px solid var(--hf-line); }
.hf-acc__item:last-child { border-bottom: none; }
.hf-acc__head {
  display: flex; align-items: center; gap: var(--hf-sp-2); width: 100%;
  padding: 12px 16px; background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--hf-ink); text-align: left;
}
.hf-acc__head:hover { background: var(--hf-bg); }
.hf-acc__caret { margin-left: auto; font-size: 12px; color: var(--hf-ink-3); transition: transform .15s var(--hf-ease); }
.hf-acc__item[data-open="true"] .hf-acc__caret { transform: rotate(180deg); }
.hf-acc__body { display: none; padding: 4px 16px 16px; }
.hf-acc__item[data-open="true"] .hf-acc__body { display: block; }
.hf-check { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; font-size: 13px; color: var(--hf-ink-2); }
.hf-check__box { width: 16px; height: 16px; margin-top: 4px; border: 1.5px solid var(--hf-line-2); border-radius: 14px; flex: 0 0 16px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; }
.hf-check--on .hf-check__box { background: var(--hf-primary); border-color: var(--hf-primary); }
.hf-check--on { color: var(--hf-ink); }
.hf-punish { margin-top: 8px; font-size: 12px; color: var(--hf-ink-3); border-left: 3px solid var(--hf-primary-weak-3); padding-left: 8px; }

/* 17.2 聊天 */
.hf-chat { display: flex; flex-direction: column; height: 360px; border: 1px solid var(--hf-line); border-radius: var(--hf-r-card); overflow: hidden; background: var(--hf-surface); }
.hf-chat__stream { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.hf-msg { display: flex; gap: 8px; align-items: flex-start; }
.hf-msg__bubble { max-width: 72%; padding: 8px 12px; border-radius: var(--hf-r-md); font-size: 13px; line-height: 1.5; background: var(--hf-bg); color: var(--hf-ink); }
.hf-msg__name { font-size: 12px; color: var(--hf-ink-3); margin-bottom: 4px; }
.hf-msg--me { flex-direction: row-reverse; }
.hf-msg--me .hf-msg__bubble { background: var(--hf-primary); color: #fff; }
.hf-chat__bar { display: flex; gap: 8px; padding: 8px; border-top: 1px solid var(--hf-line); }
.hf-chat__bar input { flex: 1; height: 36px; border: 1px solid var(--hf-line-2); border-radius: var(--hf-r-control); padding: 0 12px; font-family: inherit; font-size: 13px; }
.hf-chat__bar input:focus { outline: none; border-color: var(--hf-primary); }

/* 17.3 会议三态徽章/卡片 */
.hf-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 8px; }
.hf-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hf-pill--pending { background: var(--hf-primary-weak-1); color: var(--hf-primary); }
.hf-pill--ongoing { background: var(--hf-success-weak); color: var(--hf-success); }
.hf-pill--done { background: var(--hf-bg); color: var(--hf-ink-3); }
.hf-mtg { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border: 1px solid var(--hf-line); border-radius: var(--hf-r-md); }
.hf-mtg--done { opacity: .6; }
.hf-mtg__main { flex: 1; min-width: 0; }
.hf-mtg__title { font-size: 13px; font-weight: 600; }
.hf-mtg__meta { font-size: 12px; color: var(--hf-ink-3); margin-top: 4px; }

/* 17.4 n/5 已就位大徽章 + 渐变进度条 + 编制/任命 + 认责书 */
.hf-seatbar { display: flex; align-items: center; gap: 12px; }
.hf-seatbar__num { font-family: var(--hf-font-mono); font-size: 22px; font-weight: 600; color: var(--hf-primary); }
.hf-seatbar__num small { font-size: 13px; color: var(--hf-ink-3); font-weight: 600; }
.hf-track { flex: 1; height: 8px; border-radius: 999px; background: var(--hf-primary-weak-2); overflow: hidden; }
.hf-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--hf-primary-press), var(--hf-primary)); transition: width 0.32s var(--hf-ease); }

/* 17.5 里程碑时间轴（移动端竖向） */
.hf-timeline { position: relative; padding-left: 16px; }
.hf-timeline::before { content: ''; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--hf-line-2); }
.hf-tl { position: relative; padding: 0 0 16px 12px; }
.hf-tl::before { content: ''; position: absolute; left: -18px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--hf-surface); border: 2px solid var(--hf-line-2); }
.hf-tl--done::before { background: var(--hf-success); border-color: var(--hf-success); }
.hf-tl--cur::before { background: var(--hf-primary); border-color: var(--hf-primary); }
.hf-tl__t { font-size: 12px; color: var(--hf-ink-3); font-family: var(--hf-font-mono); }
.hf-tl__b { font-size: 13px; font-weight: 600; margin-top: 4px; }

/* 17.6 任务挂人 + 时间/质量/成本标签 */
.hf-tmeta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; border-radius: 14px; padding: 1px 8px; }
.hf-tmeta--time { background: var(--hf-primary-weak-1); color: var(--hf-primary); }
.hf-tmeta--quality { background: var(--hf-success-weak); color: var(--hf-success); }
.hf-tmeta--cost { background: var(--hf-warning-weak); color: var(--hf-warning); }

/* 17.7 轻提示条（指向“成长”板块） */
.hf-callout {
  display: flex; align-items: center; gap: 8px;
  background: var(--hf-primary-weak-1); border: 1px solid var(--hf-primary-weak-3);
  border-radius: var(--hf-r-md); padding: 8px 16px; font-size: 13px; color: var(--hf-ink-2);
}
.hf-callout b { color: var(--hf-primary); }
.hf-callout a { margin-left: auto; color: var(--hf-primary); font-weight: 600; white-space: nowrap; }

/* ---------- 16. reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
}