/* Monitoring — Fluent 2 组件层（Microsoft 设计语言）
   规则：只用 tokens.min.css 的官方 token；间距走 8px 栅格；控件 4px / 卡片 8px / 胶囊 circular；
   导航用中性色，主色只出现在选中指示条、当前状态与唯一主按钮上。 */

:root {
  /* tokens.min.css 未收录的少数 token 的官方等价映射 */
  --colorNeutralStrokeAccessible: var(--colorNeutralStroke1);
  --colorNeutralStrokeAccessibleHover: var(--colorNeutralStroke1Hover);
  --colorBrandForegroundLink: var(--colorBrandForeground1);
  /* Fluent presence 颜色（可用 / 离开 / 忙碌 / 离线） */
  --presenceAvailable: var(--colorPaletteLightGreenForeground3);
  --presenceAway: var(--colorPaletteMarigoldForeground3);
  --presenceBusy: var(--colorPaletteRedForeground3);
  --presenceOffline: var(--colorNeutralForeground3);
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--colorNeutralBackground2);
  color: var(--colorNeutralForeground1);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--colorBrandForegroundLink); }

:focus-visible {
  outline: 2px solid var(--colorStrokeFocus2);
  outline-offset: 2px;
  border-radius: var(--borderRadiusMedium);
}

svg.icon { flex: none; }

.mono { font-family: var(--fontFamilyMonospace); }

.caption2,
.num {
  font-variant-numeric: tabular-nums;
}

/* ---------- 排版 ---------- */
.title3 { font-size: var(--fontSizeBase600); line-height: 32px; font-weight: 600; margin: 0; }
.subtitle1 { font-size: var(--fontSizeBase500); line-height: 28px; font-weight: 600; margin: 0; }
.subtitle2 { font-size: var(--fontSizeBase400); line-height: 22px; font-weight: 600; margin: 0; }
.body1 { font-size: var(--fontSizeBase300); line-height: 20px; margin: 0; }
.body1Strong { font-size: var(--fontSizeBase300); line-height: 20px; font-weight: 600; margin: 0; }
.caption1 { font-size: var(--fontSizeBase200); line-height: 16px; color: var(--colorNeutralForeground3); margin: 0; }
.caption2 {
  font-size: var(--fontSizeBase100);
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--colorNeutralForeground3);
  margin: 0;
}
.muted { color: var(--colorNeutralForeground2); }
.muted-3 { color: var(--colorNeutralForeground3); }

/* ---------- App shell：左侧导航栏 + 命令栏 + 内容区 ---------- */
.layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--spacingVerticalXS);
  padding: var(--spacingVerticalS);
  background: var(--colorNeutralBackground2);
  border-right: 1px solid var(--colorNeutralStroke2);
}

.rail__brand {
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalS);
  height: 40px;
  padding: 0 var(--spacingHorizontalS) 0 var(--spacingHorizontalSNudge);
  margin-bottom: var(--spacingVerticalS);
  font-size: var(--fontSizeBase400);
  font-weight: 600;
}

.rail__logo {
  display: grid;
  grid-template-columns: repeat(2, 9px);
  grid-template-rows: repeat(2, 9px);
  gap: 2px;
  color: var(--colorBrandBackground);
}

.rail__logo i { background: currentColor; border-radius: var(--borderRadiusSmall); }

.rail__label {
  padding: 0 var(--spacingHorizontalS) var(--spacingVerticalXS);
  margin-top: var(--spacingVerticalM);
}

.navitem {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalM);
  height: 40px;
  padding: 0 var(--spacingHorizontalM) 0 var(--spacingHorizontalL);
  border-radius: var(--borderRadiusMedium);
  color: var(--colorNeutralForeground2);
  font-size: var(--fontSizeBase300);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--durationFaster) var(--curveEasyEase), color var(--durationFaster) var(--curveEasyEase);
}

.navitem:hover { background: var(--colorNeutralBackground1Hover); color: var(--colorNeutralForeground1); }
.navitem:active { background: var(--colorNeutralBackground3Pressed); }
.navitem[aria-current="page"] { background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); box-shadow: var(--shadow2); }

/* Fluent 的选中指示条：品牌色小胶囊贴在栏左侧 */
.navitem[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: var(--spacingHorizontalSNudge);
  top: 50%;
  width: 3px;
  height: 16px;
  transform: translateY(-50%);
  border-radius: var(--borderRadiusCircular);
  background: var(--colorCompoundBrandStroke);
}

.rail__spacer { flex: 1; }

.rail__me {
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalS);
  padding: var(--spacingVerticalS) var(--spacingHorizontalSNudge);
  border-top: 1px solid var(--colorNeutralStroke2);
  margin-top: var(--spacingVerticalXS);
}

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--borderRadiusCircular);
  background: var(--colorBrandBackground2);
  color: var(--colorBrandForeground2);
  font-size: var(--fontSizeBase300);
  font-weight: 600;
  text-transform: uppercase;
}

.avatar--lg { width: 48px; height: 48px; font-size: var(--fontSizeBase400); }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }

/* 命令栏 */
.commandbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalM);
  height: 48px;
  padding: 0 var(--spacingHorizontalXXL);
  background: var(--colorNeutralBackground1);
  border-bottom: 1px solid var(--colorNeutralStroke2);
}

.commandbar__title { font-size: var(--fontSizeBase400); font-weight: 600; }
.commandbar__brand { display: flex; align-items: center; gap: var(--spacingHorizontalS); }
.commandbar__nav { display: none; align-items: center; gap: var(--spacingHorizontalXXS); }
.commandbar__spacer { flex: 1; }
.commandbar__group { display: flex; align-items: center; gap: var(--spacingHorizontalXS); }

.content {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacingHorizontalXXL) var(--spacingHorizontalXXXL) var(--spacingVerticalXXXL);
}

.stack { display: flex; flex-direction: column; gap: var(--spacingVerticalL); }
.stack-s { display: flex; flex-direction: column; gap: var(--spacingVerticalS); }
.stack-xs { display: flex; flex-direction: column; gap: var(--spacingVerticalXS); }
.row { display: flex; align-items: center; gap: var(--spacingHorizontalS); flex-wrap: wrap; }
.row--top { align-items: flex-start; }
.row--between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--spacingHorizontalL);
  align-items: start;
}

/* ---------- 卡片 ---------- */
.card {
  background: var(--colorNeutralBackground1);
  border: 1px solid var(--colorNeutralStroke2);
  border-radius: var(--borderRadiusXLarge);
  padding: var(--spacingHorizontalL);
}

.card--flush { padding: 0; overflow: hidden; }

.card__head {
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalS);
  padding: var(--spacingHorizontalM) var(--spacingHorizontalL);
  border-bottom: 1px solid var(--colorNeutralStroke2);
}

.card__head svg { color: var(--colorBrandForeground1); }
.card__head .grow { display: flex; align-items: center; gap: var(--spacingHorizontalS); }

.card__title {
  font-size: var(--fontSizeBase300);
  font-weight: 600;
  color: var(--colorNeutralForeground1);
}

.card__body { padding: var(--spacingHorizontalL); }

.identity { display: flex; align-items: center; gap: var(--spacingHorizontalM); }

/* ---------- 状态（Fluent presence：圆点 + 中性文字） ---------- */
.presence {
  display: inline-flex;
  align-items: center;
  gap: var(--spacingHorizontalSNudge);
  font-size: var(--fontSizeBase200);
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--colorNeutralForeground2);
}

.presence__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--borderRadiusCircular);
  box-shadow: 0 0 0 2px var(--colorNeutralBackground1);
  background: var(--presenceOffline);
}

/* 状态文字始终保持中性色，颜色只交给圆点（Fluent presence 的规矩） */
.presence--available,
.presence--away,
.presence--busy,
.presence--offline { color: var(--colorNeutralForeground2); }

.presence--available .presence__dot { background: var(--presenceAvailable); }
.presence--away .presence__dot { background: var(--presenceAway); }
.presence--busy .presence__dot { background: var(--presenceBusy); }
.presence--offline .presence__dot { background: var(--presenceOffline); }
.presence--away,
.presence--busy { color: var(--colorNeutralForeground1); }
.presence--available { color: var(--colorNeutralForeground2); }

.presence--large { font-size: var(--fontSizeBase300); }
.presence--large .presence__dot { width: 12px; height: 12px; }

/* ---------- 指标条（Microsoft 365 管理中心的度量卡片） ---------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--colorNeutralBackground1);
  border: 1px solid var(--colorNeutralStroke2);
  border-radius: var(--borderRadiusXLarge);
  overflow: hidden;
}

.metric {
  padding: var(--spacingHorizontalL);
  border-left: 1px solid var(--colorNeutralStroke2);
}

.metric:first-child { border-left: 0; }
.metric__value {
  margin-top: var(--spacingVerticalXS);
  font-family: var(--fontFamilyNumeric);
  font-size: var(--fontSizeBase600);
  line-height: 32px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacingHorizontalSNudge);
  min-height: 32px;
  padding: 0 var(--spacingHorizontalM);
  border: 1px solid transparent;
  border-radius: var(--borderRadiusMedium);
  background: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
  font-family: inherit;
  font-size: var(--fontSizeBase300);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--durationFaster) var(--curveEasyEase), color var(--durationFaster) var(--curveEasyEase), border-color var(--durationFaster) var(--curveEasyEase);
}

.btn:disabled { background: var(--colorNeutralBackgroundDisabled); color: var(--colorNeutralForegroundDisabled); cursor: not-allowed; }
.btn--primary { background: var(--colorBrandBackground); color: var(--colorNeutralForegroundOnBrand); }
.btn--primary:hover:not(:disabled) { background: var(--colorBrandBackgroundHover); }
.btn--primary:active:not(:disabled) { background: var(--colorBrandBackgroundPressed); }
.btn--primary:disabled { background: var(--colorNeutralBackgroundDisabled); color: var(--colorNeutralForegroundDisabled); }
.btn--secondary { border-color: var(--colorNeutralStroke1); }
.btn--secondary:hover:not(:disabled) { background: var(--colorNeutralBackground1Hover); }
.btn--secondary:active:not(:disabled) { background: var(--colorNeutralBackground1Pressed); }
.btn--subtle { background: transparent; color: var(--colorNeutralForeground2); }
.btn--subtle:hover:not(:disabled) { background: var(--colorNeutralBackground1Hover); color: var(--colorNeutralForeground1); }
.btn--subtle:active:not(:disabled) { background: var(--colorNeutralBackground1Pressed); }
.btn--danger { color: var(--colorPaletteRedForeground1); }
.btn--danger:hover:not(:disabled) { background: var(--colorPaletteRedBackground1); }
.btn--icon { width: 32px; padding: 0; }
.btn--large { min-height: 40px; padding: 0 var(--spacingHorizontalL); font-size: var(--fontSizeBase400); }
.btn--danger-text { color: var(--colorPaletteRedForeground1); }

/* ---------- 表单（Fluent 下划线式） ---------- */
.field { display: flex; flex-direction: column; gap: var(--spacingVerticalXS); }

.field__label {
  font-size: var(--fontSizeBase200);
  font-weight: 600;
  color: var(--colorNeutralForeground2);
}

.input,
.textarea,
.select {
  width: 100%;
  font-family: inherit;
  font-size: var(--fontSizeBase300);
  line-height: 20px;
  color: var(--colorNeutralForeground1);
  background: var(--colorNeutralBackground1);
  border: none;
  border-bottom: 1px solid var(--colorNeutralStrokeAccessible);
  border-radius: var(--borderRadiusMedium) var(--borderRadiusMedium) 0 0;
  padding: 6px var(--spacingHorizontalMNudge);
  transition: border-color var(--durationFaster) var(--curveEasyEase);
}

.textarea { min-height: 76px; resize: vertical; line-height: 22px; }

.input:hover, .textarea:hover, .select:hover { border-bottom-color: var(--colorNeutralStrokeAccessibleHover); }

.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-bottom: 2px solid var(--colorBrandStroke1);
  padding-bottom: 5px;
}

.input::placeholder, .textarea::placeholder { color: var(--colorNeutralForeground4); }

.select {
  appearance: none;
  cursor: pointer;
  background-image: none;
}

.select-wrap { position: relative; display: block; }
.select-wrap svg { position: absolute; right: var(--spacingHorizontalS); top: 8px; color: var(--colorNeutralForeground2); pointer-events: none; }

.check {
  display: inline-flex;
  align-items: center;
  gap: var(--spacingHorizontalXS);
  font-size: var(--fontSizeBase200);
  color: var(--colorNeutralForeground2);
}

.check input { accent-color: var(--colorBrandBackground); width: 14px; height: 14px; }

/* ---------- QQ 空间式发表框（用 Fluent 语言重绘） ---------- */
.composer {
  background: var(--colorNeutralBackground1);
  border: 1px solid var(--colorNeutralStroke2);
  border-radius: var(--borderRadiusXLarge);
  overflow: hidden;
}

.composer__tabs {
  display: flex;
  gap: var(--spacingHorizontalXL);
  padding: 0 var(--spacingHorizontalL);
  border-bottom: 1px solid var(--colorNeutralStroke2);
  background: var(--colorNeutralBackground1);
}

.composer__tab {
  position: relative;
  padding: var(--spacingVerticalM) 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--fontSizeBase300);
  font-weight: 600;
  color: var(--colorNeutralForeground2);
  cursor: pointer;
}

.composer__tab[aria-selected="true"] { color: var(--colorNeutralForeground1); }

.composer__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  border-radius: var(--borderRadiusCircular);
  background: var(--colorCompoundBrandStroke);
}

.composer__tab--muted { cursor: default; color: var(--colorNeutralForeground3); font-weight: 400; }

.composer__body { padding: var(--spacingHorizontalL); }

.composer__editable {
  width: 100%;
  min-height: 108px;
  max-height: 320px;
  border: none;
  outline: none;
  resize: vertical;
  background: transparent;
  color: var(--colorNeutralForeground1);
  font-family: inherit;
  font-size: var(--fontSizeBase400);
  line-height: 22px;
}

.composer__editable::placeholder { color: var(--colorNeutralForeground4); }

.composer__toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalXS);
  margin-top: var(--spacingVerticalS);
  padding-top: var(--spacingVerticalS);
  border-top: 1px solid var(--colorNeutralStroke3);
}

.tool {
  display: inline-flex;
  align-items: center;
  gap: var(--spacingHorizontalXS);
  height: 28px;
  padding: 0 var(--spacingHorizontalS);
  border: none;
  border-radius: var(--borderRadiusMedium);
  background: transparent;
  color: var(--colorNeutralForeground2);
  font-family: inherit;
  font-size: var(--fontSizeBase200);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--durationFaster) var(--curveEasyEase), color var(--durationFaster) var(--curveEasyEase);
}

.tool:hover { background: var(--colorNeutralBackground1Hover); color: var(--colorNeutralForeground1); }
.tool[aria-expanded="true"] { color: var(--colorBrandForeground1); }

.composer__panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacingHorizontalL);
  padding-top: var(--spacingVerticalM);
  margin-top: var(--spacingVerticalM);
  border-top: 1px solid var(--colorNeutralStroke3);
}

.composer__panel[hidden] { display: none; }

.composer__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacingHorizontalM);
  padding: var(--spacingHorizontalM) var(--spacingHorizontalL);
  border-top: 1px solid var(--colorNeutralStroke2);
  background: var(--colorNeutralBackground2);
}

.counter { font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); font-variant-numeric: tabular-nums; }
.counter--over { color: var(--colorPaletteRedForeground1); }

/* ---------- 当前状态卡 ---------- */
.hero__activity {
  font-size: var(--fontSizeBase500);
  line-height: 28px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.hero__timer {
  font-family: var(--fontFamilyNumeric);
  font-size: var(--fontSizeBase600);
  line-height: 32px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--spacingHorizontalL);
  margin: 0;
  padding-top: var(--spacingVerticalM);
  border-top: 1px solid var(--colorNeutralStroke3);
}

.meta-grid dt { font-size: var(--fontSizeBase100); font-weight: 600; letter-spacing: .6px; color: var(--colorNeutralForeground3); }
.meta-grid dd { margin: var(--spacingVerticalXS) 0 0; font-size: var(--fontSizeBase300); }

.note-box {
  padding: var(--spacingHorizontalM);
  border-radius: var(--borderRadiusMedium);
  background: var(--colorNeutralBackground2);
  color: var(--colorNeutralForeground2);
  font-size: var(--fontSizeBase300);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- 时间线 ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }

.timeline__day { margin: var(--spacingVerticalL) 0 var(--spacingVerticalS); }
.timeline__day:first-child { margin-top: 0; }

.timeline__item {
  position: relative;
  padding: 0 0 var(--spacingVerticalL) var(--spacingHorizontalXXL);
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 18px;
  bottom: 0;
  width: 1px;
  background: var(--colorNeutralStroke2);
}

.timeline__item:last-child::before { display: none; }

.timeline__dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: var(--borderRadiusCircular);
  background: var(--presenceOffline);
  box-shadow: 0 0 0 2px var(--colorNeutralBackground1);
}

.timeline__dot--available { background: var(--presenceAvailable); }
.timeline__dot--away { background: var(--presenceAway); }
.timeline__dot--busy { background: var(--presenceBusy); }
.timeline__dot--offline { background: var(--presenceOffline); }

.timeline__head { display: flex; align-items: baseline; gap: var(--spacingHorizontalS); flex-wrap: wrap; }

.timeline__note {
  margin-top: var(--spacingVerticalS);
  padding: var(--spacingHorizontalM);
  border-radius: var(--borderRadiusMedium);
  background: var(--colorNeutralBackground2);
  color: var(--colorNeutralForeground2);
  font-size: var(--fontSizeBase300);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- 数据表 ---------- */
.table { width: 100%; border-collapse: collapse; }

.table th {
  height: 32px;
  padding: var(--spacingVerticalS) var(--spacingHorizontalM);
  border-bottom: 1px solid var(--colorNeutralStroke1);
  font-size: var(--fontSizeBase200);
  font-weight: 600;
  text-align: left;
  color: var(--colorNeutralForeground3);
  white-space: nowrap;
}

.table td {
  padding: var(--spacingVerticalM);
  border-bottom: 1px solid var(--colorNeutralStroke2);
  vertical-align: top;
  font-size: var(--fontSizeBase300);
}

.table tbody tr:hover td { background: var(--colorNeutralBackground1Hover); }
.table tbody tr:last-child td { border-bottom: 0; }
.table th:last-child, .table td:last-child { text-align: right; white-space: nowrap; }

/* 窄屏下表格横向滚动，避免单元格内容与右侧操作按钮互相挤压/重叠 */
.table-scroll { overflow-x: auto; }
.table { min-width: 560px; }
.table td:first-child { min-width: 160px; }

/* 行内操作按钮：等距右对齐，不与“状态”文字挤压 */
.row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacingHorizontalXXS);
}

/* ---------- 当前状态控制台 / 同步卡 ---------- */
.actions-row { display: flex; align-items: center; gap: var(--spacingHorizontalS); flex-wrap: wrap; }

.now-hint {
  display: block;
  padding: var(--spacingHorizontalS) var(--spacingHorizontalM);
  margin-bottom: var(--spacingVerticalS);
  border-radius: var(--borderRadiusMedium);
  background: var(--colorBrandBackground2);
  color: var(--colorBrandForeground2);
  font-size: var(--fontSizeBase200);
  line-height: 16px;
}

.now-hint[hidden] { display: none; }
.cell-note { margin-top: var(--spacingVerticalXS); }
.navitem--bar { height: 32px; }

/* ---------- 对话框 ---------- */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--spacingHorizontalL);
  background: rgb(0 0 0 / .4);
}

.dialog {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: var(--spacingHorizontalXXL);
  background: var(--colorNeutralBackground1);
  border-radius: var(--borderRadiusXLarge);
  box-shadow: var(--shadow64);
  animation: surface-in var(--durationNormal) var(--curveDecelerateMid);
}

@keyframes surface-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Toast（Fluent Toaster） ---------- */
.toasts {
  position: fixed;
  right: var(--spacingHorizontalXXL);
  bottom: var(--spacingVerticalXXL);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: var(--spacingVerticalS);
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--spacingHorizontalM);
  min-width: 280px;
  max-width: 380px;
  padding: var(--spacingHorizontalM) var(--spacingHorizontalL);
  border: 1px solid var(--colorNeutralStroke2);
  border-radius: var(--borderRadiusXLarge);
  background: var(--colorNeutralBackground1);
  box-shadow: var(--shadow16);
  font-size: var(--fontSizeBase300);
  color: var(--colorNeutralForeground1);
  animation: surface-in var(--durationNormal) var(--curveDecelerateMid);
}

.toast svg { margin-top: 2px; color: var(--presenceAvailable); }
.toast--error svg { color: var(--colorPaletteRedForeground1); }
.toast--info svg { color: var(--colorBrandForeground1); }

/* ---------- 空状态 / 提示条 ---------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacingVerticalM);
  padding: var(--spacingVerticalXXXL) var(--spacingHorizontalL);
  text-align: center;
}

.empty svg { color: var(--colorNeutralForeground3); }

.banner {
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalS);
  padding: var(--spacingHorizontalS) var(--spacingHorizontalM);
  border: 1px solid var(--colorPaletteMarigoldBorder1);
  border-radius: var(--borderRadiusMedium);
  background: var(--colorPaletteMarigoldBackground1);
  color: var(--colorPaletteMarigoldForeground2);
  font-size: var(--fontSizeBase200);
}

.banner[hidden] { display: none; }
.banner svg { flex: none; }
.hide { display: none !important; }
.divider { height: 1px; border: 0; margin: 0; background: var(--colorNeutralStroke3); }

/* ---------- 搜索框 / 翻页器 ---------- */
.list-toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalM);
  flex-wrap: wrap;
  margin-bottom: var(--spacingVerticalL);
}

.list-toolbar--card { margin: 0; padding: var(--spacingHorizontalL) var(--spacingHorizontalL) 0; }

.search {
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalS);
  flex: 1 1 240px;
  max-width: 420px;
  height: 32px;
  padding: 0 var(--spacingHorizontalS);
  background: var(--colorNeutralBackground1);
  border: 1px solid var(--colorNeutralStroke1);
  border-bottom-color: var(--colorNeutralStrokeAccessible);
  border-radius: var(--borderRadiusMedium);
  transition: border-color var(--durationFaster) var(--curveEasyEase);
}

.search:focus-within { border-bottom: 2px solid var(--colorBrandStroke1); padding-bottom: 1px; }
.search svg { color: var(--colorNeutralForeground2); }

.search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--fontSizeBase300);
  color: var(--colorNeutralForeground1);
}

.search input::placeholder { color: var(--colorNeutralForeground4); }
.search input::-webkit-search-cancel-button { display: none; }

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacingHorizontalM);
  flex-wrap: wrap;
  margin-top: var(--spacingVerticalL);
  padding-top: var(--spacingVerticalM);
  border-top: 1px solid var(--colorNeutralStroke3);
}

.pager--card { margin: 0; padding: 0 var(--spacingHorizontalL) var(--spacingVerticalM); border-top: 0; }
.pager__pages { display: flex; align-items: center; gap: var(--spacingHorizontalXXS); }
.pager__ellipsis { padding: 0 var(--spacingHorizontalXS); color: var(--colorNeutralForeground3); }

.pagebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--spacingHorizontalS);
  border: 1px solid transparent;
  border-radius: var(--borderRadiusMedium);
  background: transparent;
  color: var(--colorNeutralForeground2);
  font-family: inherit;
  font-size: var(--fontSizeBase200);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--durationFaster) var(--curveEasyEase), color var(--durationFaster) var(--curveEasyEase);
}

.pagebtn:hover:not(:disabled) { background: var(--colorNeutralBackground1Hover); color: var(--colorNeutralForeground1); }
.pagebtn[aria-current="page"] { background: var(--colorNeutralBackground1Selected); border-color: var(--colorNeutralStroke2); color: var(--colorNeutralForeground1); }
.pagebtn:disabled { color: var(--colorNeutralForegroundDisabled); cursor: not-allowed; }

/* ---------- 页面切换：跨文档视图过渡，导航栏保持不动 ---------- */
@view-transition { navigation: auto; }

.rail { view-transition-name: rail; }

::view-transition-old(root) { animation: vt-out var(--durationFaster) var(--curveEasyEase) both; }
::view-transition-new(root) { animation: vt-in var(--durationFast) var(--curveEasyEase) both; }
/* 导航栏在两个页面间保持原位，不参与淡入淡出 */
::view-transition-old(rail),
::view-transition-new(rail) { animation: none; }

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ---------- 响应式：窄屏折叠导航栏 ---------- */
@media (max-width: 1000px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  /* 手机端不要侧边栏：导航收进命令栏 */
  .layout { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .commandbar__nav { display: flex; }
  .content { padding: var(--spacingHorizontalL) var(--spacingHorizontalL) var(--spacingVerticalXXL); }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(3) { border-left: 0; border-top: 1px solid var(--colorNeutralStroke2); }
  .metric:nth-child(4) { border-top: 1px solid var(--colorNeutralStroke2); }
}

/* ---------- 手机排版（≤768px）：单列 / 卡片化 / 字大一号 / 触达目标 ≥ 44px ---------- */
@media (max-width: 768px) {
  body { font-size: var(--fontSizeBase400); line-height: 22px; }
  .body1, .body1Strong { font-size: var(--fontSizeBase400); line-height: 22px; }
  .caption1 { font-size: var(--fontSizeBase300); line-height: 20px; }
  .card__title { font-size: var(--fontSizeBase400); }

  .commandbar { padding: 0 var(--spacingHorizontalM); gap: var(--spacingHorizontalXS); }
  .commandbar__title { font-size: var(--fontSizeBase400); }
  .navitem--bar { display: none; }
  #me-presence { display: none; }

  .content { padding: var(--spacingHorizontalM) var(--spacingHorizontalM) var(--spacingVerticalXXXL); }
  .stack { gap: var(--spacingVerticalM); }
  .grid-2 { gap: var(--spacingVerticalM); }
  .card__head { padding: var(--spacingVerticalM) var(--spacingHorizontalM); }
  .card__body, .composer__body { padding: var(--spacingHorizontalM); }
  .composer__footer { padding: var(--spacingHorizontalM); gap: var(--spacingHorizontalM); flex-wrap: wrap; }
  .list-toolbar--card { padding: var(--spacingVerticalM) var(--spacingHorizontalM) 0; }
  .pager--card { padding: 0 var(--spacingHorizontalM) var(--spacingVerticalM); }

  /* 字号放大（仍然只用官方 6 档字号） */
  .hero__activity { font-size: var(--fontSizeBase500); line-height: 28px; }
  .hero__timer { font-size: var(--fontSizeBase600); line-height: 32px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { padding: var(--spacingHorizontalM); }
  .metric__value { font-size: var(--fontSizeBase600); line-height: 32px; }
  .meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacingHorizontalM); }
  .meta-grid dd { font-size: var(--fontSizeBase400); }
  .note-box, .timeline__note { font-size: var(--fontSizeBase400); line-height: 22px; }
  .presence { font-size: var(--fontSizeBase300); }
  .presence--large { font-size: var(--fontSizeBase400); }
  .presence--large .presence__dot { width: 14px; height: 14px; }
  .identity { gap: var(--spacingHorizontalS); }

  /* 触达目标放大 */
  .btn { min-height: 44px; padding: 0 var(--spacingHorizontalL); font-size: var(--fontSizeBase400); }
  .btn--icon { width: 44px; }
  .btn--large { min-height: 48px; }
  .tool { height: 44px; padding: 0 var(--spacingHorizontalM); font-size: var(--fontSizeBase300); }
  .pagebtn { min-width: 44px; height: 44px; font-size: var(--fontSizeBase300); }
  .check { font-size: var(--fontSizeBase300); }
  .check input { width: 18px; height: 18px; }

  .input, .textarea, .select { font-size: var(--fontSizeBase400); min-height: 44px; padding: 10px var(--spacingHorizontalM); }
  .field__label { font-size: var(--fontSizeBase300); }
  .composer__tab { font-size: var(--fontSizeBase400); padding: var(--spacingVerticalL) 0; }
  .composer__tab--muted { display: none; }
  .composer__editable { font-size: var(--fontSizeBase500); line-height: 28px; min-height: 160px; }
  .counter { font-size: var(--fontSizeBase300); }

  .search { flex: 1 1 100%; max-width: none; height: 44px; }
  .search input { font-size: var(--fontSizeBase400); }
  .list-toolbar { gap: var(--spacingHorizontalS); }
  .actions-row { width: 100%; }
  .actions-row .btn { flex: 1 1 auto; }
  .pager { justify-content: center; text-align: center; }
  .pager__pages { flex-wrap: wrap; justify-content: center; }

  .dialog { padding: var(--spacingHorizontalL); }
  .toasts { left: var(--spacingHorizontalM); right: var(--spacingHorizontalM); bottom: var(--spacingVerticalM); }
  .toast { min-width: 0; max-width: none; font-size: var(--fontSizeBase400); }

  /* 记录表格 → 卡片列表（每行一条记录） */
  .table-scroll { overflow: visible; }
  .table { min-width: 0; }
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: auto; }
  .table tbody tr {
    padding: var(--spacingHorizontalM);
    border-bottom: 1px solid var(--colorNeutralStroke2);
  }
  .table tbody tr:last-child { border-bottom: 0; }
  .table tbody tr:hover td { background: transparent; }
  .table td { padding: 0; font-size: var(--fontSizeBase400); }
  .table td + td { margin-top: var(--spacingVerticalS); }
  .table td[data-label] { display: block; text-align: right; }
  .table td[data-label]::before {
    content: attr(data-label);
    float: left;
    font-size: var(--fontSizeBase300);
    line-height: 22px;
    color: var(--colorNeutralForeground3);
  }
  .table td:last-child { white-space: normal; }
  .row-actions { justify-content: flex-end; }
  .row-actions .btn { min-height: 40px; }
}

@media (max-width: 420px) {
  .commandbar .rail__logo,
  .commandbar__title { display: none; }
}