/* ---------- 1. 语义变量：明暗两套 ---------- */
:root {
  --app-brand: #165dff;
  --app-brand-weak: rgba(22, 93, 255, 0.1);
  --app-brand-line: rgba(22, 93, 255, 0.24);
  --app-header-h: 60px;
  --app-tabs-h: 44px;
  --app-sider-w: 220px;
  --app-sider-mini-w: 48px;
  --app-footer-h: 48px;
  --app-pad: 16px;
}

body {
  --app-page-bg: #f4f5f7;
  --app-surface: #ffffff;
  --app-surface-2: #f7f8fa;
  --app-line: #e5e6eb;
  --app-line-soft: #f2f3f5;
  --app-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.03);
}

body[arco-theme='dark'] {
  --app-page-bg: #141416;
  --app-surface: #232324;
  --app-surface-2: #2a2a2b;
  --app-line: #333335;
  --app-line-soft: #2a2a2b;
  --app-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
  --app-brand-weak: rgba(22, 93, 255, 0.18);
}

/* ---------- 2. 基础重置 ---------- */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: var(--app-page-bg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--color-text-1);
  overflow: hidden;
}

#app {
  height: 100%;
}

* {
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-fill-4);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-4);
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- 3. 整体骨架 ---------- */
.app-layout {
  display: flex;
  height: 100%;
  overflow: hidden;
}

/* 侧边栏 */
.app-sider {
  width: var(--app-sider-w);
  flex: 0 0 var(--app-sider-w);
  height: 100%;
  background: var(--app-surface);
  border-right: 1px solid var(--app-line);
  display: flex;
  flex-direction: column;
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    flex-basis 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  z-index: 20;
}

.app-layout.is-collapsed .app-sider {
  width: var(--app-sider-mini-w);
  flex-basis: var(--app-sider-mini-w);
}

/* 左头部区（2026-09-15 拍板）：不放图标 / 蓝色方块 —— 只剩「系统名称 + Admin Console」两行文字。
   折叠态（48px）本区留空，仅保留一条可点击回首页（示例页面）的空白条。 */
.app-logo {
  height: var(--app-header-h);
  flex: 0 0 var(--app-header-h);
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--app-line);
  white-space: nowrap;
  cursor: pointer;
}

.app-logo-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.15;
  overflow: hidden;
}

/* 系统名称来自配置项、长度不可控 → 单行省略，避免撑破 220px 侧栏 */
.app-logo-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--color-text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-logo-sub {
  font-size: 10px;
  letter-spacing: 1.4px;
  color: var(--color-text-4);
  text-transform: uppercase;
}

.app-layout.is-collapsed .app-logo-text {
  display: none;
}

.app-menu-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0 16px;
}

.app-menu-wrap .arco-menu {
  border-radius: 0;
}

.app-sider-foot {
  flex: 0 0 auto;
  padding: 10px 12px;
  border-top: 1px solid var(--app-line);
  font-size: 11px;
  color: var(--color-text-4);
  white-space: nowrap;
  overflow: hidden;
}

/* 主区 */
.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* 顶栏 */
.app-header {
  height: var(--app-header-h);
  flex: 0 0 var(--app-header-h);
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-line);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 0 12px;
  z-index: 15;
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.app-header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-2);
  cursor: pointer;
  transition: all 0.16s;
  font-size: 16px;
  border: none;
  background: transparent;
  padding: 0;
}

.icon-btn:hover {
  background: var(--color-fill-2);
  color: var(--app-brand);
}

.app-header-divider {
  width: 1px;
  height: 20px;
  background: var(--app-line);
  margin: 0 6px;
}

.app-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.16s;
}

.app-user:hover {
  background: var(--color-fill-2);
}

.app-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--app-brand);
  color: #fff;
  flex: 0 0 30px;
}

.app-user-avatar svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}

.app-user-name {
  font-size: 13px;
  color: var(--color-text-1);
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 页签栏 */
.app-tabs {
  height: var(--app-tabs-h);
  flex: 0 0 var(--app-tabs-h);
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-line);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  overflow-x: auto;
  overflow-y: hidden;
}

.app-tabs::-webkit-scrollbar {
  height: 0;
}

.app-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px 0 10px;
  border-radius: 13px;
  font-size: 12px;
  color: var(--color-text-2);
  background: var(--app-surface-2);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  flex: 0 0 auto;
  transition: all 0.16s;
}

.app-tab:hover {
  color: var(--app-brand);
}

.app-tab.is-active {
  background: var(--app-brand-weak);
  color: var(--app-brand);
  border-color: var(--app-brand-line);
}

.app-tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.app-tab-close {
  font-size: 12px;
  opacity: 0.55;
  border-radius: 50%;
  display: inline-flex;
}

.app-tab-close:hover {
  opacity: 1;
  color: #f53f3f;
}

/* 内容区 */
.app-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--app-pad);
  background: var(--app-page-bg);
}

.app-page {
  animation: appFadeUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes appFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.app-footer {
  padding: 16px 0 8px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-4);
  line-height: 1.8;
}

/* ---------- 4. 通用面板 / 统计卡 / 图表 ---------- */
.panel {
  background: var(--app-surface);
  border-radius: 8px;
  border: 1px solid var(--app-line-soft);
  box-shadow: var(--app-card-shadow);
  overflow: hidden;
}

.panel + .panel {
  margin-top: var(--app-pad);
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--app-line-soft);
}

.panel-sub {
  font-size: 12px;
  color: var(--color-text-4);
}

.panel-body {
  padding: 18px;
}

.bar-title {
  position: relative;
  padding-left: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-1);
}

.bar-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--app-brand);
}

/* 面板内 HTML 图例
   不使用 echarts 内置图例：容器宽度变化（如收起侧栏）时它的图例不会可靠重排，
   会停留在按旧宽度计算的位置，因此统一改用 HTML 图例。 */
.chart-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--color-text-3);
  flex-wrap: wrap;
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.chart-legend-item > i,
.chart-legend-row > i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 10px;
}

.chart-legend-list {
  margin-top: 14px;
  border-top: 1px dashed var(--app-line);
  padding-top: 10px;
}

.chart-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 12.5px;
}

.chart-legend-name {
  color: var(--color-text-2);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-legend-value {
  color: var(--color-text-1);
  font-variant-numeric: tabular-nums;
}

.chart-legend-pct {
  width: 48px;
  text-align: right;
  color: var(--color-text-4);
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--color-text-3);
}

.mono {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 12px;
}

.mb-16 {
  margin-bottom: 16px;
}

/* 指标卡 */
.stat-card {
  background: var(--app-surface);
  border-radius: 8px;
  border: 1px solid var(--app-line-soft);
  box-shadow: var(--app-card-shadow);
  padding: 18px;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

body[arco-theme='dark'] .stat-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.stat-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.stat-label {
  font-size: 13px;
  color: var(--color-text-3);
  margin-bottom: 8px;
}

.stat-value {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-text-1);
  font-variant-numeric: tabular-nums;
}

.stat-unit {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-3);
  margin-left: 4px;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex: 0 0 40px;
}

.stat-foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--app-line);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-3);
}

.trend-up,
.trend-down {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 600;
}

/* A股/国内习惯：涨红跌绿 */
.trend-up {
  color: #f53f3f;
}

.trend-down {
  color: #00b42a;
}

/* ---------- 5. Arco 局部微调 ---------- */
.app-menu-wrap .arco-menu-inner {
  padding: 4px 8px;
  overflow-y: auto;
}

.app-menu-wrap .arco-menu-item,
.app-menu-wrap .arco-menu-inline-header {
  border-radius: 6px !important;
  margin-bottom: 2px;
  /* 2026-09-16 拍板：栏目高度 38 → 48px（一级 + 二级同步，用户要求整体加高 10px）。
     ⚠️ line-height 与 height 必须同改，否则文字垂直居中会偏。 */
  line-height: 48px;
  height: 48px;
}

.app-menu-wrap .arco-menu-item.arco-menu-selected {
  background: var(--app-brand-weak);
  color: var(--app-brand);
  font-weight: 500;
}

.app-menu-wrap .arco-menu-item.arco-menu-selected::after {
  display: none;
}

.app-menu-wrap .arco-menu-icon {
  margin-right: 10px;
}

.arco-table-td .arco-btn-text {
  padding: 0 6px;
  height: 24px;
  font-size: 13px;
}

.arco-card {
  border-radius: 8px;
}

.arco-layout-sider {
  background: var(--app-surface);
}

/* 表格内主信息单元 */
.cell-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cell-user-name {
  font-size: 13px;
  color: var(--color-text-1);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 响应式：窄屏自动收起侧栏 */
@media (max-width: 860px) {
  .app-sider {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    box-shadow: 4px 0 18px rgba(0, 0, 0, 0.12);
  }
  .app-user-name {
    display: none;
  }
}

/* ---------- 启动校验登录态 ---------- */
.boot-splash {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--color-text-3);
}
.boot-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #165dff, #0fc6c2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.boot-text {
  font-size: 13px;
}

/* ---------- 登录页 ---------- */
.login-page {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eaf2ff 0%, #f7f9fc 45%, #e6fbfa 100%);
}
body[arco-theme='dark'] .login-page {
  background: linear-gradient(135deg, #10131a 0%, #171a21 50%, #101820 100%);
}
.login-card {
  width: 400px;
  padding: 34px 32px 30px;
  border-radius: 14px;
  background: var(--color-bg-2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--color-border-1);
}
/* 登录框顶部（2026-09-15 拍板）：只有一行文字，无 logo 方块、无副标题 */
.login-title {
  margin-bottom: 26px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-1);
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-error {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgb(var(--red-6));
  font-size: 13px;
}

/* ---------- 顶栏角色小字 ---------- */
.app-user-role {
  font-size: 12px;
  color: var(--color-text-3);
  margin-left: 2px;
}

/* ---------- 页面通用工具条（检索区 / 功能区） ---------- */
/* ⚠️ 这个 margin-bottom 是**弹框内通用行**用法在依赖（撑行距），不要摘掉；
   工具条内的用法已由下方 `.tool-bar > .search-bar` 主动归零。
   成因与作用域边界见 docs/全局规范.md「2.3 工具条：检索区与功能区」。 */
.search-bar {
  margin-bottom: 12px;
}
/* 检索区输入框：浅色模式白底 + 灰色边框 */
.search-bar .arco-input-wrapper,
.search-bar .arco-input-group,
.search-bar .arco-select-view,
.search-bar .arco-range-picker,
.search-bar .arco-picker,
.search-bar .arco-input-inner-wrapper,
.search-bar .arco-range-picker-input {
  background: #fff !important;
  border-color: var(--app-line) !important;
}
/* Arco Select / RangePicker 内部两个 input 也要白底 */
.search-bar .arco-range-picker .arco-input-wrapper,
.search-bar .arco-range-picker .arco-input-inner-wrapper {
  background: #fff !important;
}
.search-bar .arco-form-item {
  margin-bottom: 0;
}
/* 暗黑模式：深灰背景 + 深灰边框（仍用 !important 覆盖 Arco 主题变量） */
body[arco-theme='dark'] .search-bar .arco-input-wrapper,
body[arco-theme='dark'] .search-bar .arco-input-group,
body[arco-theme='dark'] .search-bar .arco-select-view,
body[arco-theme='dark'] .search-bar .arco-range-picker,
body[arco-theme='dark'] .search-bar .arco-picker,
body[arco-theme='dark'] .search-bar .arco-input-inner-wrapper,
body[arco-theme='dark'] .search-bar .arco-range-picker-input {
  background: var(--app-surface-2) !important;
  border-color: var(--app-line) !important;
}
/* ⚠️ 同理：这个 margin-top 是给**弹框内按钮行**撑间距的（如「按天清理」的取消/确认行），
   不要摘掉；工具条内的用法已由下方 `.tool-bar > .search-bar-actions` 主动归零。 */
.search-bar-actions {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 10px;
}
.search-bar-actions > .arco-btn {
  min-width: 96px;
}
/* ---------- 页面工具条（检索区 / 功能区）----------
   一行内放两组：`.search-bar`（检索条件）在前，`.search-bar-actions`（按钮组）紧随其后，
   两者都是行内左对齐。详见 docs/全局规范.md「工具条：检索区与功能区」。 */
.tool-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}
/* 🔴 工具条内的两组必须把上下外边距清零。
   上面两条基础规则里 `.search-bar` 的 `margin-bottom:12px` 与 `.search-bar-actions`
   的 `margin-top:10px` 是「上下堆叠」时期的遗留；而 flex 的 `align-items: center`
   居中居的是**外边距盒**（不是内容盒），残留会让检索区抬高 6px、按钮组下压 5px
   （相对错位 11px），并且把工具条整体撑高 12px（与表格的间距因此变成 24px）。
   作用域**只到 `.tool-bar >`** —— `.search-bar` 在弹框里当通用行用时仍靠基础规则的
   margin 撑行距，所以那两条基础规则不能删。
   详见 docs/全局规范.md「2.3 工具条：检索区与功能区」。
   ⚠️ 这条注释里**刻意不写花括号**（哪怕是在举例）：所有基于「花括号配平」的 CSS
   解析器（含 .workbuddy 下的几个校验脚本）都会把注释里的花括号当成真规则的开头，
   从而解析错位 —— 2026-09-21 实测踩到（把 `docs/全局规范.md` 的 `md` 判成了死类）。 */
.tool-bar > .search-bar,
.tool-bar > .search-bar-actions {
  margin: 0;
}
/* 检索区内部同样是 flex 行：控件间距与 `.tool-bar` / `.search-bar-actions` 统一为 `gap: 8px`，
   不再依赖模板里的换行空白字符（约 4px）；复选框等非输入控件也随之垂直居中。
   控件宽度由各自的 `style="width:…"` 给，**不要写 margin**。 */
.tool-bar > .search-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
/* 工具条内的按钮统一最小宽度（避免「重置 / 新增」两个按钮宽窄参差） */
.tool-bar .arco-btn {
  min-width: 96px;
}
/* 功能区里的按钮组。与 `.search-bar-actions` 同为「按钮组」语义，
   特意分开命名：它住在功能区（`.tool-bar`）里，而后者住在检索区 / 弹框按钮行里。
   把若干功能按钮包成一组，是为了将来加第二个按钮时它们能整体移动、不散开。 */
.tool-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 2026-09-26：功能区右侧按钮组（靠 tool-bar 行右对齐，左侧组照常居左） */
.tool-actions-right { margin-left: auto; }
/* 合计条：表格上方一行文字汇总（当前筛选口径） */
.pager-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}
.ellipsis {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* 本项目 arco.min.css 的色板变量是 RGB 三元组（--primary-6:22,93,255），作 color 用须包 rgb() */

/* ⚠️ `--color-text-*` 本身就是完整颜色值（var(--color-neutral-x)），**不能再包一层 rgb()**，
 *    否则变成 rgb(rgb(...)) 属非法值 → 整条声明被浏览器丢弃 → 看着"没颜色"（2026-09-13 修复） */

/* ---------- 页面级栅格 ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 1200px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .stat-grid { grid-template-columns: minmax(0, 1fr); }
}

.grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) {
  .grid-2-1 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 表格内头像 ---------- */
.cell-user-avatar {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  overflow: hidden;
}

/* ---------- 分页条：左统计 / 右分页 ---------- */
.pager-bar {
  justify-content: space-between;
  align-items: center;
}

/* ---------- 顶栏「离线演示模式」标记 ----------
   ⚠️ 调色板族变量（--warning-6 是三元组）必须写成 rgb(var(--warning-6))；
      写成 var(--warning-6) 会让整条声明被浏览器丢弃（静默失效）。 */
.demo-chip {
  margin-left: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 18px;
  color: rgb(var(--warning-6));
  background: rgba(255, 125, 0, 0.12);
  border: 1px solid rgba(255, 125, 0, 0.3);
  white-space: nowrap;
}

/* ---------- 离线演示提示条 ----------
   双击 index.html（file://）时「开发管理」下各栏目不发请求，改为显示本提示。
   用 warning 色系而非 error：这不是故障，是设计行为。 */
.demo-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-1);
  background: rgba(255, 125, 0, 0.1);
  border: 1px solid rgba(255, 125, 0, 0.28);
}
.demo-notice-icon {
  flex: none;
  color: rgb(var(--warning-6));
  font-size: 16px;
  line-height: 20px;
}
.demo-notice-body { min-width: 0; }
.demo-notice-title { font-weight: 600; }
.demo-notice-desc { margin-top: 2px; color: var(--color-text-3); }

/* ---------- 表格行内操作链接间距 ----------
   Arco 的 a-link 默认没有外边距，两个相邻链接会贴在一起（「编辑删除」）。
   只作用于表格单元格内，避免影响正文里的行内链接。 */
.arco-table-td .arco-link + .arco-link { margin-left: 12px; }

/* ---------- 详情键值列表（日志详情、角色详情等） ---------- */
.kv-list { display: flex; flex-direction: column; }
.kv-row {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-1);
  font-size: 13px;
  line-height: 20px;
}
.kv-row:last-child { border-bottom: none; }
.kv-label { flex: none; width: 96px; color: var(--color-text-3); }
.kv-value { flex: 1; min-width: 0; color: var(--color-text-1); word-break: break-all; }
/* （2026-09-24 晚删除 .kv-list-inline：它只服务"明细弹框头部三个字段横排一行"，
     那一整块本轮被元龙要求删掉 ⇒ 修饰类再无引用，留着会被门禁 §15 抓成死类。
     ⚠️ 上面的基础 .kv-list / .kv-row / .kv-label / .kv-value **不能跟着删** ——
        系统日志详情页、本页「操作日志」弹框都还在用那份竖排带下边框的。） */

/* ---------- 代码/JSON 展示块 ---------- */
.code-block {
  margin: 0;
  padding: 10px 12px;
  max-height: 260px;
  overflow: auto;
  border-radius: 6px;
  background: var(--color-fill-1);
  color: var(--color-text-1);
  font-size: 12px;
  line-height: 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ---------- 权限树容器 ---------- */
.perm-tree-box {
  max-height: 52vh;
  overflow: auto;
  padding: 8px 12px;
  border: 1px solid var(--color-border-1);
  border-radius: 6px;
}
.perm-tree-note {
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text-3);
  background: var(--color-fill-1);
}
.perm-tree-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

/* ---------- 切换区（状态互斥页签，列表页通用）----------
   放在检索区与表格之间的一行页签（`a-tabs`）。刻意不复用 .tool-bar 的两组结构：
   它不是「检索区 + 功能区」，塞进去会破坏工具条里第一组必须是检索区的约定。
   （2026-09-24：原 .status-tabs 随分段控件换成 a-tabs 一并更名，旧类已删。） */
.filter-tabs {
  margin: 4px 0 10px;
}

/* ---------- 表格内的紧凑信息块（列表页通用）----------
   · .biz-cell-main   行内主信息（加粗、主文本色）
   · .biz-cell-sub    行内次要信息（小一号、弱文本色）
   （2026-09-25：原 .biz-line 随列表页改版失去引用，已删除。）
   （2026-09-24：原 .biz-amt-grid / -item / -label / -value / -warn 五个类随
     列表页金额列改版被下方 .amt-* 系列取代，已删除 —— 留着只会让后人误用。） */
.biz-cell-main {
  font-weight: 600;
  color: var(--color-text-1);
}
.biz-cell-sub {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text-3);
}
/* ---------- 列表页的「金额列」----------
   一条金额列 = 行内 N 个「标签 值」对（表头总计已于 2026-09-25 删除）。
   · .amt-list / .amt-row      行内多行「标签 值」；.k / .v 只在 .amt-row 内生效
   · .amt-cell                 行内 = 金额列表 + 右侧明细图标
   · .amt-18                   单金额列（应收/到车）18px
   · .amt-big                  未收列 18px 加粗
   · .amt-zero / -blue         =0 灰 / 未收≠0 蓝
   ⚠️ 颜色一律走 Arco 的**三元组**变量，必须包 rgb()；直接写 var(--danger-6)
      会让整条声明被浏览器丢弃（静默失效，与 .demo-chip 同一坑）。 */
/* 2026-09-24 第二轮：12px → **14px**（拍板 Q2B）—— 14px 就是 Arco 表格
   `.arco-table-td` 的基准字号，改之前这三列比同行其余列小一号。
   · 行高 18 → 22 必须一起给，否则 14px 挤在 18px 行高里会上下贴住。 */
.amt-list {
  font-size: 14px;
  line-height: 22px;
}
/* 2026-09-24：由「两端撑开」改为**紧贴左对齐**（标签后紧跟数字）。
   行与行之间的数字**不再竖向对齐** —— 这是刻意的取舍：
   对齐需要给值列固定宽度，而金额列只有 140-190px、长数字会被挤到换行。 */
.amt-row {
  display: flex;
  justify-content: flex-start;
  gap: 6px;
}
.amt-row .k {
  flex: none;
  /* 2026-09-24：标签列统一占满三字宽，「定金 / 油卡」与「手续费」后面的数字**起点对齐**
     （元龙拍板 Q8②）。副作用是支付列的二字标签（应付/扣款/油卡/运费/未付）也右移 12px，
     整列更齐 —— 这是有意接受的。 */
  min-width: 3em;
  color: var(--color-text-3);
}
.amt-row .v {
  min-width: 0;
  color: var(--color-text-1);
  text-align: left;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* （2026-09-25 删除 .amt-grid：旧版实收列的两列网格，改版后实收列回到单列排布。）
   .amt-cell：单金额格。2026-09-27 晚拍板改为**纵向**布局 —— 金额一行、✏ 在金额下方居左。 */
.amt-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.amt-cell > .amt-list { flex: none; min-width: 0; }
/* 2026-09-27 晚拍板：✏ 灰色（次级文字色），悬停加深一档 */
.arco-link.amt-eye { color: var(--color-text-3); }
.arco-link.amt-eye:hover { color: var(--color-text-2); }
.amt-big {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  font-variant-numeric: tabular-nums;
}
.amt-zero {
  color: var(--color-text-3);
  font-weight: 400;
}
.amt-blue { color: rgb(var(--primary-6)); }
/* 未付 ≠0（2026-09-25 晚拍板：橙色，含负数=超付） */
.amt-orange { color: #f08c00; }
/* 🔴 配色类要在 `.amt-row` 内部生效时必须写成 `.amt-row .v.xxx`：
   `.amt-row .v` 的权重是 (0,2,0)，单类只有 (0,1,0) ⇒ 不加前缀会被压掉，
   症状是**数字该变色不变色、且不报任何错**。 */
.amt-row .v.amt-zero { color: var(--color-text-3); }
.amt-row .v.amt-blue { color: rgb(var(--primary-6)); }
/* 2026-09-25 下午：单个大金额（18px）。与 .amt-big 同字号但**不居中**、不加粗，
   服务于「应收 / 到车」两个单金额列。 */
.amt-18 {
  font-size: 18px;
  line-height: 26px;
  font-variant-numeric: tabular-nums;
}
/* 2026-09-25 下午：实收列「标签 ↔ 金额」间距 20px（拍板）。
   ⚠️ 只修饰实收列的行，别全局改 .amt-row 的 gap —— 其他列在用 6px 的紧凑间距。 */
.amt-row.amt-g20 { gap: 20px; }
/* 2026-09-27：拆列后的单金额格。2026-09-27 晚再改：纵向布局下金额不再 flex 占满。 */
.amt-cell > .amt-num { flex: none; min-width: 0; }
/* 2026-09-27：两行式表头（第一行列名 / 第二行当前页合计） */
.head-sum { display: flex; flex-direction: column; line-height: 1.4; }
.head-sum .hs-label { font-size: 13px; font-weight: 600; }
.head-sum .hs-sum { font-size: 12px; color: var(--color-text-2); font-variant-numeric: tabular-nums; }
/* 实收明细弹框（2026-09-25 下午恢复）的内嵌小件 */
.detail-toolbar { margin-bottom: 12px; }
.detail-form {
  padding: 12px;
  margin-bottom: 12px;
  background: var(--color-fill-1);
  border-radius: 4px;
}
.detail-form-actions { text-align: right; }
/* 合并收款弹框底部（2026-09-27 晚新增）：左统计 + 右主按钮 */
.merge-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}
/* （2026-09-24 晚删除 .amt-link 一族：它服务「实收列 5 个金额各自是可点链接」，
     而本轮元龙要求金额**不再可点**（入口收归到该列右下角那个 ✏）⇒ 类再无引用。
     ⚠️ 上面那两条 .amt-row .v.amt-zero / .amt-blue **必须保留** ——
        实收列的 `--` 占位（amt-zero）、未收列（amt-blue）
        都还在用 `.amt-row .v.xxx` 这个形状，删了会静默掉色。） */

/* ---------- 行内操作链接组（表格「操作」列）----------
   最多 4 个链接（修改 / 确认 / 作废 / 操作日志），要能换行；同时把上面那条
   `.arco-table-td .arco-link + .arco-link` 的 12px 外边距在本组内归零，
   避免「gap + margin」叠加成 20px 的松散间距。 */
.act-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.act-links .arco-link + .arco-link { margin-left: 0; }
/* 竖排修饰：列表页「操作」列里每个链接各占一行。
   🔴 必须单独一个修饰类，不能直接把基础规则改成 column。
   （2026-09-24 晚起，明细弹框的操作列已改用自有那套类，不再复用本类；
     2026-09-25 下午该操作列改为**居中**对齐。） */
.act-links-col {
  flex-direction: column;
  /* 2026-09-25 下午拍板：操作列三行文字**居中**对齐 */
  align-items: center;
  gap: 6px;
}
/* 操作列的「低危灰字」链接（2026-09-25）：与蓝色 a-link 区分，悬停时提示可点。
   ⚠️ 注释不写具体页面/字段名（门禁对业务词零容忍）。 */
.act-void {
  color: var(--color-text-3);
  cursor: pointer;
  line-height: inherit;
}
.act-void:hover { color: rgb(var(--danger-6)); }
/* 2026-09-26：低危灰字链接的通用款（日志 / 明细操作列共用）。
   与 .act-void 的差别只在悬停色（悬停回主色而不是危险色）。 */
.act-gray {
  color: var(--color-text-3);
  cursor: pointer;
  line-height: inherit;
}
.act-gray:hover { color: rgb(var(--primary-6)); }
/* 2026-09-26：明细弹框金额列 16px（拍板） */
.amt-16 {
  font-size: 16px;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
}
/* 2026-09-26：明细新增第一步的类型选择浮层（纵向一列大按钮） */
.pick-type-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}