/* app.css — console 壳层与组件层(DESIGN.md §4/§5/§6,「Vault」厚重升级)。
 * 规则:颜色/间距/圆角/阴影一律 var(--*)(tokens.css);
 * 视图私有样式进 css/views/<x>.css,前缀 .v-<x>,不改本文件。
 * 壳结构:Navy Rail 侧栏 232px(加深为石板)+ 工作区(48px 顶栏 + 蓝图网格内容区)。 */

/* ---- 基础 ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}
h1, h2, h3, p { margin: 0; }
a { color: var(--color-accent); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.muted { color: var(--color-text-muted); font-size: 12px; }

/* ---- 图标(内联 SVG 线条;形状定义在 index.html icon-defs,JS 克隆) ---- */
.icon { display: inline-block; flex: none; vertical-align: -3px; }
span.icon-missing { width: 16px; height: 16px; }

/* ---- 壳:Navy Rail 侧栏 + 工作区 ---- */
.shell { display: flex; min-height: 100vh; }

/* 侧栏:整面 Vault Navy(结构性品牌色,加深承载厚重感)。slab 效果 = 底色 +
 * 右侧 1px 结构边 + 左内缘 1px 高光,读作「自上受光的石板」而非平涂。 */
.sidebar {
  flex: none;
  width: 232px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-rail-bg);
  color: var(--color-rail-text);
  padding: var(--space-4) 0 var(--space-6);
  border-right: 1px solid var(--color-rail-edge);
  box-shadow: inset 1px 0 0 var(--color-rail-bevel);
  transition: width 160ms ease;
}

/* ===== 侧栏伸缩:按钮在侧栏 header 右侧(随侧栏,绝不进内容区;展开/收起同一处) ===== */
.sidebar-toggle {
  flex: none;
  margin-left: auto;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-rail-text-muted);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.sidebar-toggle:hover { background: var(--color-rail-hover); color: var(--color-rail-text-strong); }
.sidebar-toggle-glyph { font-size: 16px; line-height: 1; display: inline-block; transition: transform 160ms ease; }
.sidebar.collapsed .sidebar-toggle-glyph { transform: rotate(180deg); }

/* 收起态:窄栏(header 仍是 logo + 收起钮同行);导航图标居中放大到 20px */
.sidebar.collapsed { width: 68px; }
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-item-text,
.sidebar.collapsed .nav-group-label { display: none; }
.sidebar.collapsed .sidebar-brand { padding-left: var(--space-2); padding-right: var(--space-2); }
.sidebar.collapsed .nav-item {
  justify-content: center;
  gap: 0; padding-left: 0; padding-right: 0;
  border-left-color: transparent;
}
.sidebar.collapsed .nav-item.active { box-shadow: inset 2px 0 0 var(--color-rail-active-bar); }
.sidebar.collapsed .nav-item .icon { width: 20px; height: 20px; }   /* 图标放大 */

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-rail-hairline);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); /* brand 区下方阴刻槽 */
  margin-bottom: var(--space-4);
}
.brand-mark { display: inline-flex; color: var(--color-rail-text-strong); }
.brand-text { min-width: 0; }
.brand-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-rail-text-strong);
}
.brand-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--color-rail-text-muted);
  white-space: nowrap;
}

.nav { display: flex; flex-direction: column; gap: var(--space-6); flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.nav-group { display: flex; flex-direction: column; }
/* 分组标签渲染纯中文(概览/访问控制/…)→ 零字距、不用 mono/uppercase
 * (字距破坏 CJK 字形,见 DESIGN.md §0.5;rail 的科技感由活动 teal 条 + 图标承担)。 */
/* 分组标签 = 可点的折叠按钮(点开/收起本组);右侧小箭头指示状态 */
.nav-group-label {
  display: flex; align-items: center;
  width: 100%;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-rail-label);
  padding: 4px var(--space-4);
  margin-bottom: var(--space-1);
  background: transparent; border: none;
  font-family: inherit; text-align: left;
  cursor: pointer;
  transition: color 120ms ease;
}
.nav-group-label:hover { color: var(--color-rail-text); }
.nav-group-name { flex: 1 1 auto; }
.nav-group-caret {
  flex: none; font-size: 12px; color: var(--color-rail-text-muted);
  transition: transform 150ms ease;
  transform: rotate(90deg);                       /* 展开:箭头朝下(指向下方展开的内容,文件树约定) */
}
.nav-group.collapsed .nav-group-caret { transform: rotate(0deg); }    /* 收起:箭头朝右(关着,点击展开) */
/* 底部「设置」组在侧栏最下方:收起时箭头朝上(点击向上展开),比"朝右指向边角"更合方位直觉;
   展开时仍朝下(沿用主组规则),展开方向一致。 */
.sidebar-footer .nav-group.collapsed .nav-group-caret { transform: rotate(-90deg); }
/* 「你在此」分组指示:含当前活动项的分组(:has 自动认出),整条标题填橙底 + 白字 —— 这样即使把
   该组收起、活动项被藏,用户仍能一眼看出自己处在哪个分区。排除「常用」组免重复高亮。 */
.nav-group:not(.nav-group-pinned):has(.nav-item.active) > .nav-group-label {
  background: var(--grad-brand-soft);  /* 柔和浅橙渐变(贴近悬浮的淡橙,不压暗) */
  border-radius: 0;                /* 方角、满宽:与 .nav-item:hover 那块底色形状一致(不要圆角按钮感) */
}
.nav-group:not(.nav-group-pinned):has(.nav-item.active) > .nav-group-label .nav-group-name,
.nav-group:not(.nav-group-pinned):has(.nav-item.active) > .nav-group-label .nav-group-caret {
  color: var(--color-accent);    /* 浅底上用深橙字(唯一可作文字的橙,AA);白字配浅底会看不清 */
}
.nav-group-items { display: flex; flex-direction: column; }
.nav-group.collapsed .nav-group-items { display: none; }
.sidebar.collapsed .nav-group-items { display: flex; }            /* 窄栏 icon rail:忽略折叠,图标全显 */
/* 收起态:组标题被隐藏,改用发丝线 + 间距分隔各组(展开态靠组标题分隔) */
.sidebar.collapsed .nav .nav-group + .nav-group {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-rail-hairline);
}

/* 底部「设置」区(后台管理),与主导航分隔、常驻底部 */
.sidebar-footer {
  flex: none;
  border-top: 1px solid var(--color-rail-hairline);
  padding-top: var(--space-2);
  margin-top: var(--space-2);
}
/* 「退出登录」:按钮化的 .nav-item(复用行高/配色/hover/收起态),此处只补 button 重置 */
.nav-item-logout {
  width: 100%;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-4);
  /* 活动态左缘 2px 条:所有项都预留 2px 透明边,避免活动态文字跳动 */
  border-left: 2px solid transparent;
  padding-left: calc(var(--space-4) - 2px);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-rail-text);
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}
.nav-item .icon { color: var(--color-rail-text-muted); transition: color 120ms ease; }
.nav-item-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ☆ 置顶按钮:hover 显形,已置顶常显(品牌橙) */
.nav-pin {
  flex: none;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer;
  color: var(--color-rail-text-muted);
  border-radius: 4px;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease, background-color 120ms ease;
}
.nav-item:hover .nav-pin { opacity: 0.7; }
.nav-pin:hover { opacity: 1; color: var(--color-accent); background: var(--color-rail-hover); }
.nav-pin.on { opacity: 1; color: var(--color-accent); }
.nav-pin-glyph { font-size: 13px; line-height: 1; }
.sidebar.collapsed .nav-pin { display: none; }

/* 收起态 hover 提示气泡:浮在图标右侧的菜单名(挂在 body 上,坐标由 JS 设 top/left;
   此处只管外观)。浅色卡片风,与全站白卡一致;仅 .show 时淡入。 */
.nav-tip {
  position: fixed;
  z-index: 60;
  transform: translateY(-50%);
  padding: 5px 10px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-rail-hairline);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-floating);
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 110ms ease;
}
.nav-tip.show { opacity: 1; }
.nav-item:hover {
  background: var(--color-rail-hover);
  color: var(--color-rail-text-strong);
}
.nav-item:hover .icon { color: var(--color-rail-text); }
.nav-item.active {
  background: var(--color-rail-active);
  border-left-color: var(--color-rail-active-bar); /* 那道决定性 teal 线 */
  color: var(--color-rail-text-strong);
}
.nav-item.active .icon { color: var(--color-rail-active-icon); }
.nav-item:focus-visible {
  outline: none;
  box-shadow: inset var(--focus-ring-rail);
}

/* 工作区:顶栏 + 内容列。蓝图网格背纹只在此层、在卡片之下;不透明数据面遮住它,
 * 所以网格只在留白/边距处隐约可见(1024px 低 DPI 也不干扰表格阅读)。 */
.workspace {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg); /* 内容区底色:冷灰白(2026-07-12 墨蓝×鲜橙定调)—— 白卡要能浮起 */
  /* 网格底图已移除(用户:像手帐) */
}

/* 顶栏:面包屑(分组 › 视图)+ 环境/token 态 chips;sticky(z=10)。不透明白底遮网格。 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 48px;
  flex: none;
  padding: 0 var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  min-width: 0;
  white-space: nowrap;
}
.crumb-group { color: var(--color-text-secondary); }
.crumb-sep { color: var(--color-text-muted); }
.crumb-current { color: var(--color-text); font-weight: 500; }
.topbar-meta { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 24px;
  padding: 0 var(--space-2);
  font-size: 12px;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  white-space: nowrap;
}
.chip-label { color: var(--color-text-muted); }
.chip-value { color: var(--color-text); }
.chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success); /* 绿点 = 健康/已认证(语义固定,勿改 teal) */
  flex: none;
}
/* 活动态/可移除过滤芯片(DESIGN.md §4 过滤芯片配方;§0.10 .chip* 族冻结=只增不改名)。
 * 此前定义在 usage.css(私有),FU-ADMIN-UNIFIED-FILTERS 起被 DLP/出境/发现共用(经 filters.js
 * renderChips)→ 迁来 app.css 作共享家,不再依赖 usage.css 的 link 顺序。
 * teal-tint 严格封顶在过滤条 chip 这一区(§0.4「一区一道 teal」):.chip-active 只改 chip 自身
 * 底/边,绝不覆盖 .chip-dot 绿(此处无 dot)、绝不蔓延到表格/行(表格仍只那一道 2px teal 基线)。 */
.chip-active {
  background: var(--color-accent-tint);
  border-color: var(--color-accent-edge);
  color: var(--color-text);
}
/* 尾随清除按钮:真正的 <button>(可聚焦/键盘可达);:focus-visible → 焦点环(§0.8 非颜色边缘线索);
 * hover 只在按钮自身轻染,不改 chip 底。 */
.chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: var(--space-1);
  padding: 0;
  flex: none;
  background: transparent;
  border: none;
  border-radius: var(--radius-control);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.chip-remove:hover { background: var(--color-bg); color: var(--color-text); }
.chip-remove:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* 内容区:max-width 1200,页 padding 24(DESIGN.md §5);透明背景透出工作区网格。
 * margin-inline auto:flex 里限宽项默认贴起始边,侧栏收起后整页会显得偏左;
 * 自动边距把多出的空间左右均分,内容始终居中。 */
.main {
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--space-6);
}
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.page-heading { min-width: 0; }
/* mono kicker「频道码」(ASCII 大写 + 字距;CJK 不加字距 —— 见 DESIGN.md §4) */
.page-kicker {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}
/* page-title 渲染中文视图名 → 零字距(CJK,DESIGN.md §0.5)。22/700 即命令甲板锚点。 */
.page-title { font-size: 22px; font-weight: 700; line-height: 1.2; }
.page-desc {
  margin-top: var(--space-1);
  font-size: 13px;
  color: var(--color-text-secondary);
}
.page-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.page-actions:empty { display: none; }
.section { margin-bottom: var(--space-6); }
/* 区块标题:左缘 3px teal「tab marker」(每区块一道,rationed) */
.section-title {
  position: relative;
  padding-left: var(--space-3);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}
.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  border-radius: 1px;
  background: var(--color-accent);
}

/* ---- 按钮 ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn .icon { vertical-align: 0; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* 主按钮 = 品牌橙渐变 + 反白字(2026-07-12 用户定,对齐 ROI「导出报表」/大屏分段器同一渐变家族) */
.btn-primary { background: var(--grad-brand); color: var(--color-text-inverse); border-color: transparent; }
.btn-primary:hover { background: var(--grad-brand); filter: brightness(1.05); }
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-input);
}
.btn-secondary:hover { background: var(--color-table-header-bg); color: var(--color-accent); } /* hover 底沉到带色 + 字转 teal「活」 */
.btn-danger { background: var(--color-danger-solid); color: var(--color-text-inverse); } /* 深红实底 + 反白字(旧「深色主题浅字」写法在白主题下 = 深红上墨字,不可读,2026-07-12 修) */
.btn-danger:hover { background: var(--color-danger-solid); }
.btn:disabled, .btn:disabled:hover {
  background: var(--color-bg);
  color: var(--color-text-muted);
  border-color: transparent;
  cursor: default;
}
/* 紧凑行内按钮(DESIGN.md §4 紧凑档):仅用于表格行内操作 */
.btn-sm {
  height: 24px;
  padding: 0 var(--space-2);
  font-size: 12px;
}
/* 撑满容器(token 门提交钮) */
.btn-block { width: 100%; }

/* ---- 卡片 ---- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-raised);
  padding: var(--space-4);
}
.card-title { font-size: 16px; font-weight: 600; line-height: 1.2; margin-bottom: var(--space-2); }
.card-text { color: var(--color-text-secondary); }

/* ---- 统计卡(数据视图顶部的关键数字一行)。角标括号 + 抬起石块阴影 ---- */
.stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
/* 角标括号(HUD 配准标记):仅框统计簇这一处,deep teal L 形,非交互、不替代焦点环 */
.stats::before, .stats::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 0 solid var(--color-accent);
  pointer-events: none;
}
.stats::before { top: -6px; left: -6px; border-top-width: 1px; border-left-width: 1px; }
.stats::after  { bottom: -6px; right: -6px; border-bottom-width: 1px; border-right-width: 1px; }
.stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  box-shadow: var(--bevel-top), var(--shadow-elevated);
  padding: var(--space-4);
}
.stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}
.stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}
.stat-value .badge { vertical-align: 4px; }

/* ---- 表单(单列纵排,label 在上) ---- */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.field { display: flex; flex-direction: column; }
.field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}
.input, .select {
  height: 32px;
  padding: 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-control);
  transition: border-color 120ms ease;
}
.input::placeholder { color: var(--color-text-muted); }
.input:focus, .select:focus {
  outline: none;
  border-color: var(--color-accent); /* 非颜色线索:focus 时边框转 deep teal */
  box-shadow: var(--focus-ring);
}
.input.invalid { border-color: var(--color-danger); }
.field-help { font-size: 12px; color: var(--color-text-muted); margin-top: var(--space-1); }
.field-error { font-size: 12px; color: var(--color-danger); margin-top: var(--space-1); }
.form-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
/* 过滤器:表格上方横排一行 */
.filters {
  display: flex;
  align-items: flex-end;
  /* 行距 space-8:help/error 绝对定位浮在控件下方(高约 21px),换行时若行距只有
     space-3,上一行的 help 会压在下一行字段标签上(用量九字段屏实拍重叠)。row-gap
     仅在真发生换行时参与布局,单行过滤屏完全不受影响。 */
  gap: var(--space-8) var(--space-3);
  margin-bottom: var(--space-8); /* 给绝对定位的 help/error(约 21px)留足落脚空间再接后续块 */
}
/* 过滤行内字段的 help/error 绝对定位浮于控件下方,不参与行高 —— 否则带
   「可选;部门 UUID…」说明或校验报错的字段会比纯控件高,被 flex-end 顶起,
   导致输入框与时间窗口下拉、查询按钮底线错位(总览/记录/用量三页同根因)。 */
.filters .field { position: relative; }
.filters .field > .field-help,
.filters .field > .field-error {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-1);
  white-space: nowrap;
}

/* ---- 统一过滤器组件(web/admin/js/filters.js)的共享 class ---- */
/* 自定义时间窗起止 / entitySelect 手动 UUID 字段:非激活态隐藏(CSP 禁内联 style,只能切 class)。 */
.flt-hidden { display: none; }
/* datetime-local 输入宽度(对拍各视图旧 .v-*-dt) */
.flt-dt { width: 200px; }
/* 名册下拉的手动 UUID 兜底输入,与下拉同宽 */
.flt-manual { width: 220px; }
/* 过滤条可移除芯片行:块级整行(在 .filters 之外),不受 .filters .field 的 flex-end + 绝对定位
 * help/error 影响 → chip 行不被顶起、不与 help 槽重叠(同 usage cascadeNote 落位手法)。 */
.flt-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
/* 过滤条内 select 的错误态:app.css 仅 .input.invalid 有红框,select 无 → 这里补上
 * (作用域限 .filters,不全局泄漏;手动 UUID 走 .input.invalid,名册下拉非法极少触发,保留兜底)。 */
.filters .select.invalid { border-color: var(--color-danger); }

/* ---- 表格(阴刻账本:表头深带 + 2px teal 基线 + 极淡斑马 + 行 hover teal 左缘) ---- */
.table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border-table);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-raised);
  overflow-x: auto;
}
.table { width: 100%; border-collapse: collapse; }
.table th {
  background: var(--color-table-header-bg);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-table-header-text);
  text-transform: uppercase; /* ASCII 列码大写;CJK 表头无变化、且不加字距(见 DESIGN.md §4) */
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--color-table-baseline); /* 那道决定性 teal 基线 */
  white-space: nowrap;
}
.table td {
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-strong);
}
.table tbody tr:nth-child(even) td { background: var(--color-row-zebra); }
.table tbody tr:last-child td { border-bottom: none; }
/* hover 规则置于斑马之后:同特异性后定义者胜,确保 hover 覆盖斑马 */
.table tbody tr:hover td { background: var(--color-row-hover); }
.table tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--color-accent); }
.table th.cell-num, .table td.cell-num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.table th.cell-num { font-family: var(--font-ui); }
.table td.cell-num { font-weight: 500; }
.table td.cell-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.table td.cell-actions { text-align: right; white-space: nowrap; }

/* ---- 通用分页行(视图自有 pager 类亦可继续使用) ---- */
.pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.pager-info {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ---- Badge(语义固定:ok=健康/启用 warn=警示 danger=危险 muted=禁用) ---- */
.badge {
  display: inline-block;
  padding: 2px var(--space-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  border-radius: var(--radius-control);
  white-space: nowrap;
}
.badge-ok     { background: var(--color-success-tint); color: var(--color-success); }
.badge-warn   { background: var(--color-warning-tint); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-tint);  color: var(--color-danger); }
.badge-muted  { background: var(--color-bg);           color: var(--color-text-secondary); }

/* ---- Modal(一层为限,不嵌套;头部标题 + 关闭 ×,底部操作条) ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-scrim);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  z-index: 100;
}
.modal {
  background: var(--color-surface);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-floating);
  width: 100%;
  max-width: 480px;
  padding: 0;
  overflow: hidden;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.modal-title { font-size: 16px; font-weight: 600; line-height: 1.2; }
.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  flex: none;
  background: transparent;
  border: none;
  border-radius: var(--radius-control);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.modal-close:hover { background: var(--color-bg); color: var(--color-text); }
.modal-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.modal-body { padding: var(--space-4); }
.modal-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}
.modal-actions:empty { display: none; }

/* ---- Toast(右下角;信号图标 + 左缘 3px 信号条;错误不自动消失) ---- */
.toast-region {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 110;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-text-muted);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-floating);
  padding: var(--space-3) var(--space-4);
  max-width: 416px; /* 8px 网格取整 */
}
.toast-icon { display: inline-flex; flex: none; color: var(--color-text-muted); }
.toast-msg { flex: 1; font-size: 13px; line-height: 1.5; }
.toast-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  flex: none;
  background: transparent;
  border: none;
  border-radius: var(--radius-control);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.toast-close:hover { background: var(--color-bg); color: var(--color-text); }
.toast-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.toast-ok    { border-left-color: var(--color-success); }
.toast-ok    .toast-icon { color: var(--color-success); }
.toast-warn  { border-left-color: var(--color-warning); }
.toast-warn  .toast-icon { color: var(--color-warning); }
.toast-error { border-left-color: var(--color-danger); }
.toast-error .toast-icon { color: var(--color-danger); }

/* ---- 加载 / 空 / 错误态(圆形图标位 + 直白文案;图标静态,无动画) ---- */
.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  text-align: center;
}
.state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.state-loading { color: var(--color-text-muted); }
.state-empty .state-icon { border-color: var(--color-accent); color: var(--color-accent); } /* 空态:teal 发丝环 */
.state-empty .state-message { color: var(--color-text-secondary); }
.state-error .state-icon {
  background: var(--color-danger-tint);
  border-color: var(--color-danger-tint);
  color: var(--color-danger);
}
.state-error .state-message { color: var(--color-danger); }
/* trace_id 是规范要求「可见」的可复制排障文本(DESIGN.md §4/§7)→ 用 secondary
 * (#475569 7.58:1 达 AA),不用 muted(#94A3B8 仅 2.56:1)。 */
.trace-id { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-secondary); }

/* ---- 部门分类色标(2026-07-14 用户:凡出现部门统一分类色;色板 1:1 复用 ROI 定稿
 * .mark-* 浅 tint 底 + --color-cat-* 文字色;tint 只做身份、绝不进量级图表,§9g 增补二) ---- */
.dept-cell { display: inline-flex; align-items: center; gap: var(--space-2); }
.dept-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  flex: none;
}
.dept-mark.cat-dev   { background: rgba(255, 175, 151, 0.22); color: var(--color-cat-dev); }
.dept-mark.cat-cs    { background: rgba(147, 230, 153, 0.24); color: var(--color-cat-cs); }
.dept-mark.cat-risk  { background: rgba(161, 201, 255, 0.24); color: var(--color-cat-risk); }
.dept-mark.cat-legal { background: rgba(212, 168, 255, 0.24); color: var(--color-cat-legal); }
.dept-mark.cat-mkt   { background: rgba(255, 230, 130, 0.30); color: var(--color-cat-mkt); }

/* ---- Token 门 ---- */
.gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.gate-panel {
  width: 100%;
  max-width: 384px; /* 8px 网格取整 */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-elevated);
  padding: var(--space-6);
}
.gate-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.gate-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-surface);
  background: var(--color-primary);
  color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-accent-edge); /* navy 石面 + 1px teal 内缘 */
}
.gate-title { font-size: 16px; font-weight: 600; line-height: 1.2; }
.gate-sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
.gate-note { font-size: 12px; color: var(--color-text-muted); margin-top: var(--space-3); }

/* ---- 窄屏(≥1024 支持;收紧页 padding,表格容器自身横滚) ---- */
@media (max-width: 1100px) {
  .main { padding: var(--space-4); }
  .topbar { padding: 0 var(--space-4); }
}