/* =====================================================================
   Ant Design Pro · 应用外壳与页面级布局
   ---------------------------------------------------------------------
   Sider（可折叠分组菜单）/ Header（面包屑·搜索·主题·通知·用户）/
   Content（页头 + 内容区），以及各业务页面共用的组合件：
   页头 / 筛选栏 / 指标卡 / 图表 / 排行 / 成员选择器 / 组织树 / 工作台 …
   ===================================================================== */

/* ══════════════════════ 应用骨架 Layout ══════════════════════ */
.app-layout { display: flex; min-height: 100vh; }

/* ---- 侧边栏 ---- */
.app-sider {
  position: fixed; inset: 0 auto 0 0; z-index: var(--z-sider);
  width: var(--sider-w); flex: 0 0 var(--sider-w);
  display: flex; flex-direction: column;
  background: var(--bg-container); border-right: 1px solid var(--bd-secondary);
  transition: width var(--motion), transform var(--motion);
}
.app-sider-brand {
  flex: 0 0 auto; height: var(--header-h); display: flex; align-items: center; gap: 10px;
  padding: 0 16px; overflow: hidden; border-bottom: 1px solid var(--bd-secondary);
}
.app-sider-brand .mark {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--blue-6), var(--blue-4));
  display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(22, 119, 255, .28);
}
.app-sider-brand .txt { min-width: 0; line-height: 1.2; }
.app-sider-brand .t1 { font-size: 14px; font-weight: var(--fw-semibold); color: var(--t-1); white-space: nowrap; }
.app-sider-brand .t2 { font-size: 11px; color: var(--t-3); white-space: nowrap; }
.app-sider-menu { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--sp-2) 0 var(--sp-4); }
.app-sider-foot {
  flex: 0 0 auto; padding: 10px 16px; border-top: 1px solid var(--bd-secondary);
  font-size: 11px; color: var(--t-4); white-space: nowrap; overflow: hidden;
}

/* 折叠态：只留图标 */
.app-sider.collapsed { width: var(--sider-w-collapsed); }
.app-sider.collapsed .txt,
.app-sider.collapsed .app-sider-brand .txt,
.app-sider.collapsed .app-sider-foot,
.app-sider.collapsed .ant-menu-group-title,
.app-sider.collapsed .ant-menu-item .lbl,
.app-sider.collapsed .ant-menu-item .soon,
.app-sider.collapsed .ant-menu-item .badge-inline { display: none; }
.app-sider.collapsed .app-sider-brand { justify-content: center; padding: 0; }
.app-sider.collapsed .ant-menu-item { justify-content: center; padding: 0; margin: 2px 6px; }
.app-sider.collapsed .ant-menu-group-divider { display: block; }

/* ---- 菜单 ---- */
.ant-menu { list-style: none; margin: 0; padding: 0; font-size: var(--fs); }
.ant-menu-group-title {
  padding: 14px 16px 6px; font-size: 11px; font-weight: var(--fw-medium);
  color: var(--t-4); letter-spacing: .3px; white-space: nowrap;
}
.ant-menu-group-divider { display: none; height: 1px; margin: 6px 12px; background: var(--bd-secondary); }
.ant-menu-item {
  display: flex; align-items: center; gap: 10px; height: 38px;
  margin: 2px 8px; padding: 0 12px; border-radius: var(--r-lg);
  color: var(--t-2); font-size: 13.5px; line-height: 1; cursor: pointer;
  user-select: none; white-space: nowrap; overflow: hidden;
  transition: background var(--motion), color var(--motion);
}
.ant-menu-item:hover { background: var(--bg-fill); color: var(--t-1); }
.ant-menu-item .ico { width: 16px; height: 16px; flex: 0 0 16px; display: inline-flex; align-items: center; justify-content: center; opacity: .85; }
.ant-menu-item .ico svg { width: 16px; height: 16px; }
.ant-menu-item .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ant-menu-item.selected { background: var(--c-primary-bg); color: var(--c-primary); font-weight: var(--fw-medium); }
.ant-menu-item.selected .ico { opacity: 1; }
.ant-menu-item .soon {
  flex: 0 0 auto; font-size: 10px; color: var(--t-3); padding: 0 4px; line-height: 15px;
  border: 1px solid var(--bd); border-radius: var(--r-sm);
}

/* ---- 主区 ---- */
.app-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  margin-left: var(--sider-w); transition: margin-left var(--motion);
}
body.sider-collapsed .app-main { margin-left: var(--sider-w-collapsed); }

.app-header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: var(--header-h); flex: 0 0 var(--header-h);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-5); background: var(--bg-container);
  border-bottom: 1px solid var(--bd-secondary);
}
.app-header .hd-trigger {
  width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--t-1); border-radius: var(--r);
  cursor: pointer; transition: background var(--motion);
}
.app-header .hd-trigger:hover { background: var(--bg-fill-2); }
.app-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: var(--fs); min-width: 0; }
.app-breadcrumb .sep { color: var(--t-4); }
.app-breadcrumb .bc-link { color: var(--t-3); cursor: default; white-space: nowrap; }
.app-breadcrumb .bc-cur { color: var(--t-1); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-header .hd-space { flex: 1; min-width: 0; }
.app-header .hd-action {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
  border: 0; background: transparent; color: var(--t-2); font-size: var(--fs);
  border-radius: var(--r); cursor: pointer; transition: all var(--motion); position: relative;
}
.app-header .hd-action:hover { background: var(--bg-fill-2); color: var(--t-1); }
.app-header .hd-action .kbd {
  font-size: 11px; color: var(--t-3); border: 1px solid var(--bd); border-radius: var(--r-sm);
  padding: 0 4px; line-height: 16px; font-family: var(--ff-mono);
}
.app-header .hd-dot {
  position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--c-error); color: #fff; font-size: 10px;
  line-height: 16px; text-align: center; box-shadow: 0 0 0 1px var(--bg-container);
}
.header-user {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px;
  border-radius: var(--r-pill); cursor: pointer; transition: background var(--motion);
}
.header-user:hover { background: var(--bg-fill-2); }
.header-user .meta { line-height: 1.25; }
.header-user .meta .n { display: block; font-size: 13px; color: var(--t-1); }
.header-user .meta .r { display: block; font-size: 11px; color: var(--t-3); }

.app-content { flex: 1; min-width: 0; padding: var(--content-pad); }

/* 页头（PageHeader）*/
.page-head {
  display: flex; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.page-head .ph-main { flex: 1; min-width: 240px; }
.page-head h2 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); margin-bottom: 6px; }
.page-head .ph-desc { color: var(--t-3); font-size: 13px; line-height: 1.7; }
.page-head .ph-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* 命令面板（Ctrl / ⌘ + K）*/
.cmdk-mask {
  position: fixed; inset: 0; z-index: 3000; background: var(--bg-mask);
  display: flex; justify-content: center; align-items: flex-start; padding: 96px 16px;
  animation: fadeIn var(--motion) ease;
}
.cmdk {
  width: 560px; max-width: 100%; max-height: 60vh; display: flex; flex-direction: column;
  background: var(--bg-elevated); border-radius: var(--r-xl); box-shadow: var(--shadow-2);
  overflow: hidden; animation: modalIn var(--motion-slow) var(--ease);
}
.cmdk-input {
  border: 0; border-bottom: 1px solid var(--bd-secondary); background: transparent;
  padding: 14px 18px; font-size: var(--fs-lg); color: var(--t-1); outline: none; width: 100%;
}
.cmdk-input::placeholder { color: var(--t-4); }
.cmdk-list { overflow: auto; padding: 6px; }
.cmdk-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-lg);
  font-size: var(--fs); color: var(--t-1); cursor: pointer;
}
.cmdk-item .g { margin-left: auto; font-size: var(--fs-sm); color: var(--t-3); }
.cmdk-item.active, .cmdk-item:hover { background: var(--c-primary-bg); color: var(--c-primary); }
.cmdk-item.active .g, .cmdk-item:hover .g { color: var(--c-primary); }
.cmdk-foot { padding: 8px 14px; border-top: 1px solid var(--bd-secondary); font-size: var(--fs-sm); color: var(--t-3); display: flex; gap: var(--sp-4); }

/* ══════════════════════ 页面组合件 ══════════════════════ */

/* 筛选栏：可折叠高级筛选 */
.filter-bar {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  background: var(--bg-container); border: 1px solid var(--bd-secondary); border-radius: var(--r-lg);
}
.filter-bar .fb-item { display: inline-flex; align-items: center; gap: 6px; }
.filter-bar .fb-item > .lb { color: var(--t-3); font-size: 13px; white-space: nowrap; }
.filter-bar .ant-input, .filter-bar .ant-select, .filter-bar .select-wrap { width: auto; }
.filter-bar .grow { flex: 1; min-width: 160px; }
.filter-bar .fb-toggle {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
  color: var(--c-primary); font-size: var(--fs); cursor: pointer; user-select: none;
}

/* 指标卡组（Statistic Card）*/
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.stat-card {
  position: relative; padding: var(--sp-4) var(--sp-5);
  background: var(--bg-container); border: 1px solid var(--bd-secondary);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  transition: box-shadow var(--motion), transform var(--motion);
}
.stat-card:hover { box-shadow: var(--shadow-2); }
.stat-card .label { font-size: var(--fs); color: var(--t-2); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.stat-card .value { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); color: var(--t-1); line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat-card .value.sm { font-size: var(--fs-lg); }
.stat-card .foot { font-size: var(--fs-sm); color: var(--t-3); margin-top: 6px; line-height: 1.6; }
.stat-card.accent { border-color: var(--c-primary-border); background: linear-gradient(180deg, var(--c-primary-bg) 0%, var(--bg-container) 72%); }
.stat-card.clickable { cursor: pointer; }

/* 图表卡 */
.mini-chart { display: flex; align-items: flex-end; gap: 4px; height: 148px; padding-top: 10px; }
.mini-chart .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; min-width: 0; height: 100%; position: relative; }
.mini-chart .bar { width: 62%; max-width: 16px; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--c-primary); transition: height var(--motion-slow); }
.mini-chart .bar.red { background: var(--c-error); }
.mini-chart .bar.green { background: var(--c-success); }
.mini-chart .bar.gray { background: var(--t-4); }
.mini-chart .bar.ghost { background: var(--c-primary-bg-hover); }
.mini-chart .bar.orange { background: var(--c-orange); }
.mini-chart .bar.purple { background: var(--c-purple); }
.mini-chart .bar.cyan { background: var(--c-cyan); }
.mini-chart .col:hover .bar { filter: brightness(1.08); }
.mini-chart .x { font-size: 10px; color: var(--t-3); white-space: nowrap; }
.mini-chart .tip {
  position: absolute; bottom: 100%; margin-bottom: 6px; padding: 4px 8px;
  background: var(--bg-spotlight); color: #fff; font-size: 11px; border-radius: var(--r-sm);
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--motion); z-index: 5;
}
.mini-chart .col:hover .tip { opacity: 1; }
.legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--t-3); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

/* 排行列表 */
.rank-list { display: flex; flex-direction: column; gap: 12px; }
.rank-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.rank-item .idx { flex: 0 0 18px; width: 18px; height: 18px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 11px; background: var(--bg-fill-2); color: var(--t-2); }
.rank-item .idx.top { background: var(--c-primary); color: #fff; }
.rank-item .name { flex: 0 0 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-item .bar-wrap { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--bg-fill-2); overflow: hidden; }
.rank-item .bar { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--blue-3), var(--blue-6)); }
.rank-item .val { flex: 0 0 auto; min-width: 48px; text-align: right; color: var(--t-2); font-variant-numeric: tabular-nums; }

/* 键值网格（旧版指标卡，保留兼容）*/
.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }
.kv-cell {
  padding: var(--sp-4); background: var(--bg-container); border: 1px solid var(--bd-secondary);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}
.kv-cell .label { font-size: 13px; color: var(--t-3); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.kv-cell .value { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); line-height: 1.2; font-variant-numeric: tabular-nums; }
.kv-cell .value.sm { font-size: var(--fs-lg); }
.kv-cell .value .suffix { font-size: var(--fs); font-weight: var(--fw-normal); color: var(--t-3); margin-left: 4px; }
.kv-cell .foot { font-size: var(--fs-sm); color: var(--t-3); margin-top: 6px; }
.kv-cell.accent { border-color: var(--c-primary-border); background: linear-gradient(180deg, var(--c-primary-bg) 0%, var(--bg-container) 72%); }

/* ══════════════════════ 成员多选选择器 ══════════════════════ */
.ant-ms { position: relative; }
.ant-ms-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  min-height: var(--ctl-h); padding: 3px 8px; cursor: text;
  background: var(--bg-container); border: 1px solid var(--bd); border-radius: var(--r);
  transition: border-color var(--motion), box-shadow var(--motion);
}
.ant-ms-box:hover { border-color: var(--c-primary-hover); }
.ant-ms.is-open .ant-ms-box { border-color: var(--c-primary); box-shadow: 0 0 0 2px rgba(5, 145, 255, .1); }
.ant-ms-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ant-ms-tag { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 12.5px; line-height: 20px; }
.ant-ms-input {
  flex: 1 1 96px; min-width: 96px; height: 24px; padding: 0; border: 0; outline: 0;
  background: transparent; color: var(--t-1); font-size: var(--fs); font-family: var(--ff);
}
.ant-ms-input::placeholder { color: var(--t-4); }
.ant-ms-pop {
  position: fixed; z-index: 1060; max-height: 264px; overflow-y: auto; padding: 4px;
  background: var(--bg-elevated); border: 1px solid var(--bd-secondary);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2); animation: dropIn var(--motion) var(--ease);
}
.ant-ms-opt {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer;
  border-radius: var(--r); font-size: 13.5px; color: var(--t-1); transition: background var(--motion);
}
.ant-ms-opt:hover { background: var(--bg-fill-2); }
.ant-ms-opt.is-on { color: var(--c-primary); background: var(--c-primary-bg); }
.ant-ms-check { flex: 0 0 14px; width: 14px; text-align: center; font-size: 12px; color: var(--c-primary); }
.ant-ms-opt-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.ant-ms-opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ant-ms-opt-desc { flex: 0 0 auto; font-size: 12px; color: var(--t-3); }
.ant-ms-opt.is-ghost .ant-ms-opt-desc { color: var(--c-warning); }
.ant-ms-none, .ant-ms-nomat { padding: 10px; text-align: center; font-size: 13px; color: var(--t-3); }

/* ══════════════════════ 组织树 / 权限树 ══════════════════════ */
.tree-list { display: flex; flex-direction: column; gap: 2px; }
.tree-node {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px;
  border: 1px solid transparent; border-radius: var(--r); cursor: pointer;
  font-size: 13.5px; color: var(--t-1); transition: all var(--motion);
}
.tree-node:hover { background: var(--bg-fill); }
.tree-node.active { background: var(--c-primary-bg); border-color: var(--c-primary-border); color: var(--c-primary); font-weight: var(--fw-medium); }
.tree-node .cnt { margin-left: auto; flex: 0 0 auto; font-size: 11px; color: var(--t-3); }
.tree-node .ops { flex: 0 0 auto; padding: 0 4px; border-radius: var(--r-sm); font-size: 12px; color: var(--t-3); opacity: 0; transition: opacity var(--motion); display: inline-flex; align-items: center; cursor: pointer; }
.tree-node:hover .ops { opacity: 1; }
.tree-node .ops:hover { background: var(--bg-fill-2); color: var(--t-1); }
.ant-tree-group { margin-bottom: var(--sp-2); }
.ant-tree-group-title { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-weight: var(--fw-medium); font-size: 13.5px; cursor: pointer; }
.ant-tree-group-title .caret { color: var(--t-3); font-size: 10px; transition: transform var(--motion); }
.ant-tree-group.collapsed .caret { transform: rotate(-90deg); }
.ant-tree-group.collapsed .ant-tree-children { display: none; }
.ant-tree-children { padding-left: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.perm-tree { display: flex; flex-direction: column; gap: var(--sp-2); }
.perm-group { border: 1px solid var(--bd-secondary); border-radius: var(--r-lg); padding: 10px 12px; }
.perm-root { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--t-1); cursor: pointer; }
.perm-leaves { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 0 2px 24px; }
.perm-leaf { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--t-2); cursor: pointer; }
.perm-leaf:hover, .perm-root:hover { color: var(--c-primary); }

/* ══════════════════════ ECA 规则编辑器 ══════════════════════ */
.rule-block { margin-bottom: var(--sp-4); }
.rule-block > .rb-title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px; font-size: 13px; font-weight: var(--fw-semibold); color: var(--t-2);
}
.rule-block > .rb-title .hint { font-weight: var(--fw-normal); font-size: 12px; color: var(--t-3); }
.cond-row, .act-row {
  display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--bd-secondary); border-radius: var(--r-lg); background: var(--bg-container);
}
.cond-row { align-items: center; }
.cond-row .c-field { flex: 0 0 230px; } .cond-row .c-op { flex: 0 0 130px; } .cond-row .c-val { flex: 1; min-width: 120px; }
.act-row .a-head { flex: 0 0 190px; min-width: 0; } .act-row .a-body { flex: 1; min-width: 0; }
.act-params { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 12px; margin-top: 10px; }
.act-params .p-item { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.act-params .p-item > label { font-size: 12px; color: var(--t-3); }
.act-params .p-item .tip { font-size: 11px; color: var(--t-4); }
.row-del {
  flex: 0 0 auto; align-self: center; width: 26px; height: 26px; border: 0; background: transparent;
  color: var(--t-3); border-radius: var(--r); font-size: 14px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.row-del:hover { background: var(--c-error-bg); color: var(--c-error); }
.seq-no {
  flex: 0 0 auto; align-self: center; width: 20px; height: 20px; border-radius: var(--r-sm);
  background: var(--bg-fill-2); color: var(--t-2); font-size: 11px; display: grid; place-items: center;
}

/* ══════════════════════ 实时工作台 ══════════════════════ */
.wb-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.wb-list { max-height: 460px; overflow: auto; }
.wb-item { padding: 8px 10px; border: 1px solid transparent; border-radius: var(--r-lg); cursor: pointer; transition: all var(--motion); }
.wb-item + .wb-item { margin-top: 2px; }
.wb-item:hover { background: var(--bg-fill); }
.wb-item.active { background: var(--c-primary-bg); border-color: var(--c-primary-border); }
.wb-item .t { font-size: 13.5px; font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-item .s { font-size: 11.5px; color: var(--t-3); margin-top: 2px; }
.qr-chip {
  display: inline-block; max-width: 100%; padding: 4px 10px; margin: 0 6px 6px 0;
  border: 1px solid var(--bd-secondary); border-radius: var(--r-pill);
  background: var(--bg-container); font-size: 12.5px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top;
  transition: all var(--motion);
}
.qr-chip:hover { border-color: var(--c-primary-border); background: var(--c-primary-bg); color: var(--c-primary); }
@media (max-width: 1160px) { .wb-grid { grid-template-columns: 1fr; } }

/* ══════════════════════ 看板：漏斗 / 趋势 / 应用卡 ══════════════════════ */
.funnel-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13.5px; }
.funnel-row .fl { flex: 0 0 110px; color: var(--t-2); }
.funnel-row .fbar { flex: 1; height: 26px; border-radius: var(--r); background: var(--bg-fill-2); overflow: hidden; }
.funnel-row .fbar > i { display: block; height: 100%; border-radius: var(--r); background: linear-gradient(90deg, var(--blue-3), var(--blue-6)); }
.funnel-row .fv { flex: 0 0 92px; text-align: right; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.funnel-row .fr { flex: 0 0 60px; text-align: right; font-size: 12px; color: var(--t-3); }
.trend-bars { display: flex; align-items: flex-end; gap: 3px; height: 130px; padding-top: 6px; }
.trend-bars .tb { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-width: 0; height: 100%; }
.trend-bars .tb .up { width: 100%; min-height: 1px; background: var(--c-primary); border-radius: 2px 2px 0 0; }
.trend-bars .tb .dn { width: 100%; min-height: 1px; background: var(--c-error-border); border-radius: 0 0 2px 2px; }
.trend-bars .tb .tip {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px;
  padding: 4px 8px; background: var(--bg-spotlight); color: #fff; font-size: 11px;
  border-radius: var(--r-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--motion); z-index: 5;
}
.trend-bars .tb:hover .tip { opacity: 1; }
.trend-bars .tb .x { font-size: 9px; color: var(--t-4); text-align: center; white-space: nowrap; overflow: hidden; }
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: var(--sp-3); }
.app-card {
  display: flex; flex-direction: column; gap: 8px; padding: var(--sp-4);
  background: var(--bg-container); border: 1px solid var(--bd-secondary);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}
.app-card .ac-head { display: flex; align-items: center; gap: 10px; }
.app-card .ac-ico {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: var(--r-lg);
  display: grid; place-items: center; background: var(--c-primary-bg); color: var(--c-primary);
}
.app-card .ac-name { font-size: 14px; font-weight: var(--fw-semibold); }
.app-card .ac-code { font-family: var(--ff-mono); font-size: 11.5px; color: var(--t-3); }
.app-card .ac-desc { flex: 1; font-size: 12.5px; color: var(--t-3); line-height: 1.6; }
.app-card .ac-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.app-card.off { opacity: .62; }
.diag-list { display: flex; flex-direction: column; gap: 1px; }
.diag-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--bd-secondary); font-size: 13.5px; }
.diag-row:last-child { border-bottom: 0; }
.diag-row .k { flex: 0 0 190px; color: var(--t-2); }
.diag-row .v { flex: 1; min-width: 0; }

/* ══════════════════════ 响应式 ══════════════════════ */
@media (max-width: 1100px) {
  .ant-col-6 { width: 33.3333%; }
  .ant-col-8 { width: 50%; }
}
@media (max-width: 900px) {
  .app-sider { transform: translateX(-100%); box-shadow: var(--shadow-2); }
  body.sider-open .app-sider { transform: none; }
  .app-main, body.sider-collapsed .app-main { margin-left: 0; }
  .app-content { padding: var(--sp-4) var(--sp-3); }
  .ant-modal-wrap { padding: 40px 8px; }
  .ant-drawer, .ant-drawer-lg, .ant-drawer-xl { width: 100vw; max-width: 100vw; }
}

/* ══════════════════ 内嵌模式（app.html?embed=1） ══════════════════
   React 版控制台（/console）用 iframe 挂载本页，外壳（侧栏 + 顶栏）由
   React 那边提供。这里把 v1 自己的外壳藏掉，只留内容区 —— 否则会出现
   「双份侧栏 + 双份顶栏」。
   为什么放文件末尾：这些规则必须压过上面的响应式断点（窄屏下
   `.app-main { margin-left: 0 }` 会由媒体查询接管，而内嵌时无论多窄
   都不该留出侧栏宽度）。v1 独立访问时 html 上没有 .embed 类，
   整段规则一条都不匹配，零影响。 */
html.embed .app-sider,
html.embed .app-header { display: none; }
html.embed .app-main { margin-left: 0 !important; }
/* 内边距交给父窗口的 Content 统一给（v2 那边是 24px + max-width:1440px），
   这里清零，避免出现 24 + 24 = 48px 的双层左边距 */
html.embed .app-content { padding: 0; }