/*
 * M15 Console UI 应用壳样式（design_system 五层结构 + 深色单主题 token）。
 * 所有色值/圆角/时长/层高一律引用 token.css 变量，本文件不出现任何硬编码色值（design_system :192/:247）。
 * M23 视觉抛光：补齐 Operate/Audit/Inbox 等视图样式、语义状态色、按钮焦点环与 pill/卡片语言（工程型零行为变更）。
 */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg-stage);
  color: var(--text-hi);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px; /* 正文（design_system :201；低于 11px 禁止） */
  font-weight: 400; /* 字重两档 400/500，禁 600+（design_system :202） */
  min-width: var(--win-min); /* 窄视口最小宽度锁（< --win-min 不予支持，design_system :53） */
}

/* 应用根：五层垂直结构（上下文条 / 状态灯带 / 舞台 / Dock；次级导航为舞台内左栏） */
#app {
  display: grid;
  grid-template-rows: var(--shell-context-h) var(--shell-statusbar-h) 1fr var(--shell-dock-h);
  height: 100vh;
}

/* 第 1 层：上下文条 */
.shell-context {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: var(--border-fine);
  background: var(--bg-card);
}
.shell-context .brand {
  font-weight: 500;
  color: var(--text-hi);
}
.shell-context .ctx-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--ctl-h-compact);
  padding: 0 10px;
  border: var(--border-fine);
  border-radius: var(--radius-pill);
  color: var(--text-mid);
  font-size: 12px;
}
.shell-context .ctx-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--text-low);
}
.shell-context .ctx-pill[data-mode="daily"] .dot {
  background: var(--sem-ok);
}
.shell-context .ctx-pill[data-mode="maintenance"] .dot {
  background: var(--sem-warning);
}
.shell-context .ctx-pill[data-mode="secure"] .dot {
  background: var(--sem-danger);
}
.shell-context .ctx-pill[data-mode="unknown"] .dot {
  background: var(--text-low);
}
.shell-context .spacer {
  flex: 1;
}
.shell-context .operator-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; /* ID/hash 用等宽（design_system :199） */
  color: var(--text-mid);
  font-size: 12px;
}

/* 第 2 层：状态灯带（全绿低视觉权重；任一段异常变色——walking skeleton 暂只占位高度） */
.shell-statusbar {
  border-bottom: var(--border-fine);
  background: var(--bg-stage);
}

/* 第 3 层中段：[次级导航 | 舞台]（walking skeleton 用展开宽度便于无图标库时可读；折叠/图标条留 A7） */
.shell-mid {
  display: grid;
  grid-template-columns: var(--shell-nav-expanded-w) 1fr;
  min-height: 0; /* 允许舞台在网格行内滚动 */
}

/* 第 5 层：次级导航（确定性入口兜底） */
.shell-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 8px;
  border-right: var(--border-fine);
  background: var(--bg-card);
}
.nav-item {
  height: var(--ctl-h);
  border: var(--border-fine);
  border-radius: var(--radius-ctl);
  background: transparent;
  color: var(--text-mid);
  text-align: left;
  padding: 0 10px;
  cursor: pointer;
  font-size: 13px;
}
.nav-item:hover {
  border: var(--border-active);
  color: var(--text-hi);
}
.nav-item.active {
  border: 0.5px solid var(--sem-focus); /* 当前焦点用 focus 色（design_system :225） */
  color: var(--text-hi);
}

/* 舞台 */
.shell-stage {
  overflow: auto;
  padding: 16px;
}

/* 卡片流（量化网格档位：列数随宽量化，design_system :50-53；此处用 auto-fill 近似，A7 接装箱纯函数） */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cell-min), 1fr));
  gap: var(--grid-gap);
}

/* 卡片（三级纵深之卡片态；层级靠底色 + 细边界 + 圆角，禁阴影/透明度叠加，design_system :217-220） */
.card {
  background: var(--bg-card);
  border: var(--border-fine);
  border-radius: var(--radius-card);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mid);
  margin: 0;
}
.card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 指标行（数字大字 + tabular-nums，design_system :200/:203） */
.metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.metric-label {
  color: var(--text-mid);
  font-size: 13px;
}
.metric-value {
  color: var(--text-hi);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.metric-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
  border-top: var(--border-fine);
}
.metric-group-label {
  color: var(--text-low);
  font-size: 11px;
}
.metric-empty {
  color: var(--text-low);
  font-size: 13px;
}

/* 数据四态（必须可区分；禁用空态样式呈现失败/不可用，design_system :141） */
.data-state {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 6px 0;
}
.data-state[data-state="loading"] {
  color: var(--text-mid);
}
.data-state[data-state="empty"] {
  color: var(--text-mid);
}
.data-state[data-state="unavailable"] {
  color: var(--text-low);
}
.data-state[data-state="unavailable"] .dash {
  color: var(--sem-warning);
  font-weight: 500;
}
.data-state[data-state="error"] {
  color: var(--text-hi);
}
.data-state[data-state="error"] .reason-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--sem-danger);
}

/* 第 4 层：Dock（常驻；钉住 + 活跃任务摘要 + 抽屉把手——walking skeleton 占位） */
.shell-dock {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-top: var(--border-fine);
  background: var(--bg-card);
  color: var(--text-low);
  font-size: 12px;
}

/* 登录视图（未建会话时占满舞台） */
.login-view {
  max-width: 360px;
  margin: 8vh auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-view h1 {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}
.login-view label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-mid);
  font-size: 12px;
}
.input,
.btn {
  height: var(--ctl-h);
  border-radius: var(--radius-ctl);
  font-size: 14px;
}
.input {
  background: var(--bg-raised);
  border: var(--border-fine);
  color: var(--text-hi);
  padding: 0 10px;
}
.input:focus {
  outline: none;
  border: 0.5px solid var(--sem-focus); /* 焦点环可见（design_system :225） */
}
.btn {
  border: var(--border-active);
  background: transparent;
  color: var(--text-hi);
  cursor: pointer;
  padding: 0 14px;
}
.btn-primary {
  border: 0.5px solid var(--brand); /* 主行动用气质色描边（design_system :227） */
  color: var(--brand);
}
.btn:disabled {
  color: var(--text-low);
  cursor: not-allowed;
}

/* 数据四态：失败就地结构化（原样回显 reason 码，可复制；不弹全局 toast，design_system :140/:145） */
.notice {
  border: var(--border-fine);
  border-radius: var(--radius-inner);
  padding: 10px 12px;
  font-size: 13px;
  background: var(--bg-card);
}
.notice[data-kind="info"] {
  color: var(--text-mid);
}

/* 搜索视图（命令条 + 结果） */
.search-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.search-bar {
  display: flex;
  gap: 8px;
}
.search-input {
  flex: 1;
}
.search-kind {
  color: var(--text-mid);
  font-size: 12px;
  margin-bottom: 8px;
}
.match-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.match-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-card);
  border: var(--border-fine);
  border-radius: var(--radius-inner);
}
.match-kind {
  font-size: 11px;
  color: var(--text-low);
  border: var(--border-fine);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  white-space: nowrap;
}
.match-label {
  flex: 1;
  color: var(--text-hi);
  font-size: 13px;
}

/* 详情视图 */
.detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.detail-counter {
  color: var(--text-low);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* M19 digest 工具条：日期选择 + 查询 + 导出（沿用 detail-header flex 范式）。 */
.digest-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.digest-toolbar .spacer {
  flex: 1;
}
.digest-date-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-low);
  font-size: 12px;
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cell-min), 1fr));
  gap: var(--grid-gap);
  align-items: start;
}
.card-wide {
  grid-column: 1 / -1;
}
.field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.field-label {
  color: var(--text-mid);
  font-size: 12px;
}
.field-value {
  color: var(--text-hi);
  font-size: 13px;
  text-align: right;
  word-break: break-all;
}
.field-value.dash {
  color: var(--sem-warning);
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-mid);
  word-break: break-all;
}
.tag {
  font-size: 12px;
  border-radius: var(--radius-pill);
  padding: 1px 10px;
  border: var(--border-fine);
}
.tag[data-usable="yes"] {
  color: var(--sem-ok);
  border-color: var(--sem-ok);
}
.tag[data-usable="no"] {
  color: var(--sem-danger);
  border-color: var(--sem-danger);
}
.device-row,
.timeline-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 12px;
  padding: 3px 0;
}
.timeline-at {
  color: var(--text-low);
  white-space: nowrap;
  min-width: 88px;
}
.timeline-label {
  flex: 1;
  color: var(--text-hi);
}

/* A3 模式切换控件（上下文条内） */
.mode-btn {
  height: var(--ctl-h-compact);
  padding: 0 10px;
  font-size: 12px;
}
.mode-btn[hidden] {
  display: none;
}
.mode-notice {
  color: var(--sem-danger);
  font-size: 12px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A6 动作（详情 Actions 卡 + 动作面板） */
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.replay-row {
  display: flex;
  gap: 8px;
}
.replay-row .input {
  flex: 1;
}
.action-panel-card {
  margin-top: var(--grid-gap);
}
.action-panel-host:empty {
  display: none;
}
.action-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.action-preview label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-mid);
  font-size: 12px;
}
/* 明文激活码（execute 结果，operator 转交用；等宽 + 气质色描边便于辨识/复制） */
.code-plaintext {
  color: var(--brand);
  border: 0.5px solid var(--brand);
  border-radius: var(--radius-ctl);
  padding: 2px 8px;
  font-size: 13px;
  user-select: all;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * M23 Console UI 视觉抛光（工程型零行为变更）：补齐 M17 Operate / M18 Audit /
 * M20 Inbox 缺样式视图 + 语义状态色 + 按钮焦点环 + pill/卡片语言统一。
 * 只加不改：不动既有规则、不改 token 名；色值/圆角/边框/时长一律走 token.css 变量。
 * ═══════════════════════════════════════════════════════════════════════════ */

/* 深色单主题：让原生控件（日期选择 / 下拉 / 滚动条）随主题渲染（design_system 全站深色）。 */
:root {
  color-scheme: dark;
}

/* ── 通用件补全：焦点环 / 按钮变体 / warn 提示 / 四态消息槽 ───────────────── */

/* D3 键盘焦点环（复用 --sem-focus；.btn 各变体与 .nav-item 全程可见）。 */
.btn:focus-visible,
.nav-item:focus-visible {
  outline: 2px solid var(--sem-focus);
  outline-offset: 1px;
}

/* 次级操作弱化（ghost）：比默认 .btn 更淡，hover 抬升。 */
.btn-ghost {
  border: var(--border-fine);
  color: var(--text-mid);
}
.btn-ghost:hover:not(:disabled) {
  border: var(--border-active);
  color: var(--text-hi);
}

/* 链接式按钮（登录页 bootstrap 入口）：无边框、focus 色、hover 下划线。 */
.btn-link {
  height: auto;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--sem-focus);
  text-align: left;
}
.btn-link:hover {
  color: var(--text-hi);
  text-decoration: underline;
}

/* warn 级 notice（介于 info 与 error）：左侧 warning 强调 + 高对比正文。 */
.notice[data-kind="warn"] {
  border-left: 2px solid var(--sem-warning);
  color: var(--text-hi);
}

/* 四态消息槽（dom.ts 四态助手 + digest 内联共用）：长 reason 可换行。 */
.data-state-msg {
  word-break: break-word;
}

/* ── M17 Operate 运营配置发布页 ──────────────────────────────────────────── */
.operate-mode-bar {
  margin-bottom: var(--grid-gap);
}
.mode-bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.mode-bar-label {
  color: var(--text-mid);
  font-size: 12px;
}
/* 模式徽章：对齐 shell ctx-pill 的 pill 语言（语义色见文末语义状态色区）。 */
.mode-pill {
  display: inline-flex;
  align-items: center;
  height: var(--ctl-h-compact);
  padding: 0 10px;
  border: var(--border-fine);
  border-radius: var(--radius-pill);
  color: var(--text-mid);
  font-size: 12px;
  white-space: nowrap;
}

.operate-product-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: var(--grid-gap);
}
.operate-product-bar label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-mid);
  font-size: 12px;
}

.operate-sections {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}
.section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mid);
}
.section-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 当前生效 / 历史快照 price 行卡（内层用 --bg-raised 与区段卡拉开层级）。 */
.config-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.config-row {
  gap: 8px;
  background: var(--bg-raised);
}
.config-row-price {
  padding-bottom: 6px;
  border-bottom: var(--border-fine);
}

/* 草稿编辑器（多行结构化字段 + 增删 + 保存）。 */
.draft-editor-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.draft-row-wrap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.draft-row-editor {
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--bg-raised);
}
.draft-row-editor label {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-mid);
  font-size: 12px;
}
.draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* diff 预览（新增 / 修改 / 不变 / 保留不变；语义左边框见文末语义状态色区）。 */
.diff-host:empty {
  display: none;
}
.config-diff {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.diff-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 10px;
  border-left: 2px solid var(--text-low);
}
.diff-group-title {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-mid);
}
.diff-empty {
  color: var(--text-low);
  font-size: 12px;
}
.diff-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.diff-list li {
  font-size: 12px;
  color: var(--text-hi);
}

/* 版本历史 / 排队中：条目卡（内层 --bg-raised）。 */
.history-list,
.pending-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.history-item,
.pending-item {
  gap: 8px;
  background: var(--bg-raised);
}
.history-meta,
.pending-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.history-version,
.pending-type {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-hi);
}
.history-time,
.pending-time {
  font-size: 12px;
  color: var(--text-low);
  font-variant-numeric: tabular-nums;
}
.pending-id {
  color: var(--text-mid);
}

/* operator_reason 确认面板（发布 / 回滚 / 取消 / 升档共用）。 */
.confirm-host:empty {
  display: none;
}
.confirm-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding: 10px;
  background: var(--bg-raised);
  border: var(--border-fine);
  border-radius: var(--radius-inner);
}
.confirm-panel label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-mid);
  font-size: 12px;
}

/* ── M18 Audit 审计复盘页 ────────────────────────────────────────────────── */
.audit-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.audit-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}
.audit-filters .input {
  min-width: 150px;
}
.audit-filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-mid);
  font-size: 12px;
}
.audit-filter-label {
  color: var(--text-mid);
}
.audit-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.audit-count {
  color: var(--text-mid);
  font-size: 12px;
}
.audit-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.audit-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bg-card);
  border: var(--border-fine);
  border-radius: var(--radius-card);
}
.audit-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.audit-time {
  color: var(--text-low);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.audit-field {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
}
.audit-field-label {
  color: var(--text-mid);
}
.audit-field-value {
  color: var(--text-hi);
  word-break: break-all;
}
.audit-action {
  color: var(--text-mid);
}
.audit-row-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-top: 8px;
  border-top: var(--border-fine);
}
.audit-row-actions {
  display: flex;
  gap: 8px;
}
.audit-diff-host:empty {
  display: none;
}
.audit-diff {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding: 10px;
  background: var(--bg-raised);
  border: var(--border-fine);
  border-radius: var(--radius-inner);
}
.audit-diff-head {
  color: var(--text-mid);
  font-size: 12px;
  font-weight: 500;
}
.audit-diff-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.audit-diff-label {
  color: var(--text-low);
  font-size: 11px;
}
.audit-price-row,
.audit-diff-mod {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  font-size: 12px;
}
/* 审计徽标 pill（mode / result / change）：语义色见文末语义状态色区。 */
.audit-mode,
.audit-result,
.audit-change {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: var(--border-fine);
  border-radius: var(--radius-pill);
  color: var(--text-mid);
  font-size: 11px;
  white-space: nowrap;
}

/* ── M20/M30 Action Inbox 待办 ───────────────────────────────────────────── */
.inbox-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 0;
  border-top: var(--border-fine);
}
.inbox-row:first-child {
  padding-top: 0;
  border-top: none;
}
/* 内联下钻 / 动作面板：整行独占 + 缩进从属，空态折叠（对齐 .action-panel-host:empty）。 */
.inbox-drill,
.inbox-action {
  flex-basis: 100%;
  padding-left: 12px;
  border-left: 2px solid var(--text-low);
}
.inbox-drill:empty,
.inbox-action:empty {
  display: none;
}

/* ── 语义状态色映射（D2：色 + 既有文字标签双通道，状态不只靠颜色）─────────── */
/* 模式（mode-pill / audit-mode）：对齐 ctx-pill dot 语义。 */
.mode-pill[data-mode="daily"],
.audit-mode[data-mode="daily"] {
  color: var(--sem-ok);
  border-color: var(--sem-ok);
}
.mode-pill[data-mode="maintenance"],
.audit-mode[data-mode="maintenance"] {
  color: var(--sem-warning);
  border-color: var(--sem-warning);
}
.mode-pill[data-mode="secure"],
.audit-mode[data-mode="secure"] {
  color: var(--sem-danger);
  border-color: var(--sem-danger);
}
.mode-pill[data-mode="unknown"] {
  color: var(--text-low);
}
/* 审计结果（8 值按性质分组）。 */
.audit-result[data-result="ok"] {
  color: var(--sem-ok);
  border-color: var(--sem-ok);
}
.audit-result[data-result="started"] {
  color: var(--sem-info);
  border-color: var(--sem-info);
}
.audit-result[data-result="needs_escalation"],
.audit-result[data-result="unavailable"] {
  color: var(--sem-warning);
  border-color: var(--sem-warning);
}
.audit-result[data-result="forbidden"],
.audit-result[data-result="error"] {
  color: var(--sem-danger);
  border-color: var(--sem-danger);
}
.audit-result[data-result="not_found"],
.audit-result[data-result="cancelled"] {
  color: var(--text-mid);
}
/* before/after 变化标记。 */
.audit-change[data-change="changed"] {
  color: var(--sem-info);
  border-color: var(--sem-info);
}
.audit-change[data-change="unchanged"] {
  color: var(--text-mid);
}
.audit-change[data-change="na"] {
  color: var(--text-low);
}
/* Operate diff 分组语义左边框（retained=保留不变，D2 红线用 info 强调「不删除」）。 */
.diff-group[data-diff="added"] {
  border-left-color: var(--sem-ok);
}
.diff-group[data-diff="modified"] {
  border-left-color: var(--sem-warning);
}
.diff-group[data-diff="unchanged"] {
  border-left-color: var(--text-low);
}
.diff-group[data-diff="retained"] {
  border-left-color: var(--sem-info);
}

@media (prefers-reduced-motion: reduce) {
  /* reducedMotion：过渡直切无过渡，状态变化保留（design_system :241）。 */
  * {
    transition: none !important;
    animation: none !important;
  }
}