/* ============================================================
   R31-3 状态芯片（首页 #system 区块；依赖 base.css 的 L0 token）
   ============================================================ */
.sys-status { margin-top: 20px; padding: 14px 16px; border-radius: var(--radius, 6px); border: 1px solid var(--line, #1e2426); background: var(--card); }
.sys-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;  /* R22-3 */
  padding: 4px 12px; border-radius: var(--radius-pill, 999px); cursor: pointer;
  border: 1px solid var(--line-strong, #2f3739); background: transparent;
  color: var(--text, #e7ebec); font-size: var(--fs-meta, 13px); font-weight: 600;
  transition: border-color var(--dur-fast, 120ms);
}
.sys-chip--ok { border-color: color-mix(in srgb, var(--accent, #37d6a8) 45%, transparent); }
.sys-chip--warn { border-color: color-mix(in srgb, var(--warn, #e0a33e) 45%, transparent); }
.sys-chip--bad { border-color: color-mix(in srgb, var(--danger, #ff5470) 45%, transparent); }
.sys-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sys-dot.ok { background: var(--accent, #37d6a8); }
.sys-dot.warn { background: var(--warn, #e0a33e); }
.sys-dot.bad { background: var(--danger, #ff5470); }
.sys-caret { font-size: 10px; opacity: .7; }
.sys-status.sys-open .sys-caret { transform: rotate(180deg); }
.sys-detail { margin-top: 10px; border-top: 1px solid var(--line, #1e2426); padding-top: 8px; }
.sys-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: var(--fs-meta, 13px); color: var(--text-dim, #9da7ab); }
.sys-row b { color: var(--text, #e7ebec); font-weight: 500; }