/* ==========================================================================
   创作服务 · 管理后台（静态设计稿）
   --------------------------------------------------------------------------
   视觉基线：《管理后台-设计规范》design-standard.css（token + am-* 组件）。
   本文件只做一件事：把管理后台的页面结构映射到规范已有的组件形态。
   所有颜色、圆角、阴影、间距都从 --am-* token 取值，不自建第二套色阶，
   以免和规范漂移。规范里没有的形态（折线图、时间线、容灾流程图）才新写，
   取值同样走 token。

   页面为静态设计稿：数据均为示例，不连接任何接口。
   ========================================================================== */

/* --------------------------------------------------------------------------
   语义标签色板
   取自规范 components.css 的 .am-tag（浅底深字，整屏 12px），在此登记为可复用
   变量，避免在页面上散落硬编码色值。
   -------------------------------------------------------------------------- */
:root {
  --adm-tag-bg: var(--am-soft);
  --adm-tag-fg: var(--am-muted);
  --adm-tag-ok-bg: #eef5f0;
  --adm-tag-ok-fg: #3c6a52;
  --adm-tag-warn-bg: #fdf1e3;
  --adm-tag-warn-fg: #a0662a;
  --adm-tag-info-bg: #eaf1fc;
  --adm-tag-info-fg: #4a70a5;

  /* 品牌块高度：等于右侧「标题 + 副标题」块高度（1.6rem 标题 + 0.86rem 副标题 = 57px），
     改标题字号时必须同步这里，否则左上角 logo 与页标题不再齐平。 */
  /* 左上角 logo 尺寸，与用户站前端的 22px 保持一致 */
  --adm-logo-h: 22px;
  /* 侧栏菜单项高度 */
  --adm-nav-item-h: 44px;
  /* 白色模块之间的统一间距（上下左右同值） */
  --adm-gap: 18px;
  /* 表格行悬停时的文字色：比正文 --am-text 浅一档，用于替代原先的整行底色 */
  --adm-row-hover-text: #55555b;
}

* { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   1. 页面外壳：224px 侧栏 + 自适应主区（规范 .am-admin-shell / .am-main）
   -------------------------------------------------------------------------- */

body.adm {
  background: linear-gradient(180deg, var(--am-bg-start) 0, var(--am-bg) 210px), var(--am-bg);
  font-size: 0.9rem;
}

.app {
  display: grid;
  grid-template-columns: var(--am-sidebar-width) minmax(0, 1fr);
  align-items: start;
  gap: var(--adm-gap);
  min-height: 100vh;
  padding: var(--adm-gap);
}

/* 页面框架立即可见；数据区域独立等待，避免详情拖住整个页面。 */
.page-load-state { display: none; }
.main[data-load-state="error"] > .page-load-state,
.main[data-load-state="auth"] > .page-load-state {
  display: flex;
  align-items: center;
  gap: var(--adm-gap);
  padding: var(--adm-gap);
  border-radius: var(--am-radius-card);
  background: var(--am-panel);
  color: var(--am-muted);
}
.page-load-state p { margin: 0; }
.page-load-state [hidden] { display: none; }
/* 指标骨架与实值共用网格尺寸；其它区域优先使用上次的实测高度。 */
[data-load-region] { --region-estimate: 220px; }
[data-layout-kind="table"] { --region-estimate: 320px; }
[data-layout-kind="detail"] { --region-estimate: 360px; }
[data-layout-kind="stats"] { --region-estimate: 0px; }
[data-load-region]:not([data-region-state="ready"]) {
  position: relative;
  min-height: var(--region-height, var(--region-estimate));
}
[data-load-region]:not([data-region-state="ready"]):not([data-region-refreshing]) > :not(.region-status):not(.region-skeleton) {
  visibility: hidden;
}
[data-load-region]:not([data-region-state="ready"]) > :not(.region-status) { pointer-events: none; }
/* 透明占位只保留几何尺寸，切换时不闪现灰色骨架。 */
.region-skeleton { visibility: hidden; pointer-events: none; }
.skeleton-line, .skeleton-value {
  display: block;
  align-self: center;
}
.skeleton-line { width: 65%; height: 12px; }
.skeleton-value { width: 45%; height: 32px; }
.region-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--adm-gap);
  padding: var(--adm-gap);
  color: var(--am-muted);
  font-size: inherit;
}
.region-status p { margin: 0; padding: 4px 8px; background: var(--am-panel); }
/* 已有内容刷新时仅在角落显示状态，不把正文再次清空。 */
[data-region-refreshing] > .region-status { align-items: flex-start; justify-content: flex-end; }

.sidebar {
  position: sticky;
  top: var(--adm-gap);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--adm-gap) * 2);
  padding: 20px 16px 16px;
  border: 0;
  border-radius: var(--am-radius-card);
  background: var(--am-panel);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; height: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.18); }
@supports selector(::-webkit-scrollbar) {
  .sidebar { scrollbar-width: auto; scrollbar-color: auto; }
}

/* 品牌区（规范 .am-brand）
   不设最小高度，让品牌块高度＝文字块高度，这样品牌标题的文字顶边
   与右侧页标题的文字顶边落在同一条线上（对齐的是文字，不是外框）。
   logo 随之在文字块内垂直居中，与参考稿一致。 */
.brand { display: flex; align-items: center; gap: 10px; padding: 0 10px; }
.brand-mark {
  display: block;
  flex: 0 0 auto;
  /* 盒宽跟随图形，logo 左缘才能与下方菜单图标左缘（46px）落在同一条线上 */
  line-height: 0;
}
.brand-mark svg { display: block; height: var(--adm-logo-h); width: auto; }
.brand-text { display: grid; gap: 2px; min-width: 0; }
.brand-text b { font-size: 1.04rem; font-weight: 780; line-height: 1.2; letter-spacing: 0; }
.brand-text span { color: var(--am-faint); font-size: 0.78rem; font-weight: 700; }

/* 导航（规范 .am-nav / .am-nav-item，只补图标尺寸与禁用态）
   首项文字顶部与右侧首张指标卡标题文字顶部齐平。
   左侧：外壳留白 18 + 侧栏内边距 20 + 品牌块 39（文字块自然高度）= 77，
         加菜单上间距 23 + 菜单项内垂直偏移 (44-20)/2 = 12，再补 1px 文字行盒差，得 113。
   右侧：外壳留白 18 + 面板内边距 20 + 页头 57 + 面板内间距 18 = 113。
   品牌块高度随其文字字号变化，改 --adm-logo-h 之外的品牌文字样式或 --adm-gap 时，
   这个上间距要跟着重算。 */
.sidebar .am-nav { margin-top: 23px; }
.sidebar .am-nav-item { min-height: var(--adm-nav-item-h); }
.sidebar-foot .am-nav { margin-top: 0; }
.sidebar .am-nav-item { gap: 10px; }
.sidebar .am-nav-item svg { flex: 0 0 18px; width: 18px; height: 18px; }
/* 侧栏改为白色卡片后，激活项不能再依赖白色底（会看不见），
   改用规范 components.css 里侧栏导航的强调浅底 */
.sidebar .am-nav-item.is-active { background: var(--am-accent-soft); }
.sidebar .am-nav-item.is-disabled { color: var(--am-faint); opacity: 0.72; cursor: not-allowed; }
.sidebar .am-nav-item.is-disabled:hover { color: var(--am-faint); background: transparent; }

.sidebar-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--am-line-soft); }

/* 账号 chip（规范 .am-chip 的胶囊形态） */
.admin-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 5px 12px 5px 5px;
  border-radius: var(--am-radius-pill);
  background: var(--am-soft);
}
.admin-chip .avatar {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--am-panel);
  color: var(--am-sub);
}
.admin-chip .avatar svg { width: 16px; height: 16px; }
.admin-chip .name { flex: 1; color: var(--am-text); font-size: 0.86rem; font-weight: 680; }
.admin-chip .chev { width: 15px; height: 15px; color: var(--am-faint); }

/* 主区：模块之间统一走 --adm-gap 节奏 */
.main {
  display: grid;
  align-content: start;
  gap: var(--adm-gap);
  min-width: 0;
  padding: 0;
}

/* 页头与指标并进同一张白面板（页头不再单独浮在灰底上） */
.page-intro { display: grid; gap: var(--adm-gap); padding: 20px 22px 22px; }

/* 顶层说明条与其它白模块同距，由 .main 的栅格间距承担 */
.main > .note { margin-top: 0; }

/* --------------------------------------------------------------------------
   2. 页头（规范 .am-topbar / .am-title）
   -------------------------------------------------------------------------- */

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.page-head h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.08;
  font-weight: 760;
  letter-spacing: 0;
}
.head-sub { margin: 8px 0 0; color: var(--am-muted); font-size: 0.86rem; line-height: 1.55; }
.head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  padding-top: 4px;
}

.badge-preview {
  padding: 4px 10px;
  border-radius: var(--am-radius-pill);
  background: var(--am-soft);
  color: var(--am-muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. 按钮（规范 .am-primary-action / .am-secondary-action / 图标按钮）
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--am-radius-control);
  background: var(--am-control);
  color: var(--am-text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 740;
  line-height: 1;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}
.btn:hover { background: var(--am-soft-2); transform: translateY(-1px); }
.btn-primary { background: var(--am-accent); color: #ffffff; }
.btn-primary:hover { background: #000000; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 0.84rem; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #f1f1f3;
  color: #515154;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.icon-btn:hover { background: #e0e0e5; color: var(--am-text); transform: scale(1.06); }

/* 表格行内的更多操作：同一形态的紧凑版 */
.more {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: #f1f1f3;
  color: #515154;
  font: inherit;
  font-size: 15px;
  line-height: 1;
}
.more:hover { background: #e0e0e5; color: var(--am-text); }

/* --------------------------------------------------------------------------
   4. 分段控件（规范 .am-segmented）：视图切换与状态筛选统一形态
   -------------------------------------------------------------------------- */

.seg,
.pills {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: #f2f2f4;
}

.seg button,
.seg .tab,
.pills .pill {
  min-height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #6b6b72;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background 160ms ease, color 160ms ease;
}
.seg button:hover,
.pills .pill:hover { color: var(--am-text); }

.seg button.is-active,
.seg .tab.is-active,
.pills .pill.is-active {
  background: #ffffff;
  color: var(--am-accent);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 20px 14px 0;
}
.tabs-end { margin-left: auto; font-size: 0.84rem; font-weight: 660; }

.pills { margin: 20px 14px 0; }
.panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   5. 指标卡（规范 .am-metric-card）：白面板 + 浅灰底数字卡
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(104px, auto);
  gap: var(--adm-gap);
}
.stat {
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  background: none;
}
.stat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--am-sub);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.35;
}
.stat-value {
  color: var(--am-text);
  font-size: 2rem;
  line-height: 1;
  font-weight: 760;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.stat-value .unit { font-size: 1.45rem; font-weight: 740; }
.stat-foot { color: var(--am-muted); font-size: 0.76rem; line-height: 1.4; }
.delta { font-weight: 760; }
.delta.up { color: var(--am-green); }
.delta.down { color: var(--am-red); }

/* --------------------------------------------------------------------------
   6. 内容面板（规范 .am-content-panel / .am-table-panel）：无边框、无阴影
   -------------------------------------------------------------------------- */

.card {
  min-width: 0;
  border: 0;
  border-radius: var(--am-radius-card);
  background: var(--am-panel);
  overflow: hidden;
}
.card-head { display: flex; align-items: center; gap: 10px; padding: 20px 22px 0; }
.card-head .i,
.card-head .c-icon { color: var(--am-text); }
.card-head h2 { margin: 0; font-size: 1.08rem; line-height: 1.2; font-weight: 780; letter-spacing: 0; }
.card-head .c-sub { color: var(--am-faint); font-size: 0.8rem; font-weight: 600; }
.card-head .c-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  font-size: 0.84rem;
  font-weight: 660;
}
.card-body { padding: 16px 22px 22px; }
.card-body.tight { padding: 12px 22px 18px; }
.card-head + .table-wrap { margin-top: 16px; }
.tabs + .panel .table-wrap { margin-top: 16px; }

.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--adm-gap);
  align-items: start;
}
.grid-2.flip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 概览排行与上游状态：双列时白色卡片等高，单列时按内容自然排布。 */
@media (min-width: 1281px) {
  .grid-2.overview-status-grid { align-items: stretch; }
}

/* --------------------------------------------------------------------------
   7. 工具条与表单控件（规范 .am-input / .am-select）
   -------------------------------------------------------------------------- */

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 14px 8px;
}
.toolbar .spacer { margin-left: auto; }
.toolbar-note { display: flex; align-items: center; gap: 6px; color: var(--am-faint); font-size: 0.78rem; }

.field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: var(--am-radius-control);
  background: var(--am-control);
  color: var(--am-sub);
}
.field.grow { flex: 1 1 240px; }
.field.range { flex: 0 0 250px; }
.field input,
.field select {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--am-text);
  font: inherit;
  font-size: 0.9rem;
  outline: none;
  appearance: none;
}
.field input::placeholder { color: var(--am-faint); }
.field select {
  padding-right: 26px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2374747a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
}

/* --------------------------------------------------------------------------
   8. 表格与分页（规范 .am-table / .am-pagination）
   -------------------------------------------------------------------------- */

/* 计数文字未返回时也保留一行，避免列表底部再顶开后续模块。 */
/* Monitor-style footer: quiet summary left, compact numbered buttons right. */
.table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 14px 0;
  padding: 12px 0 14px;
  min-height: 28px;
  border-top: 1px solid var(--am-line-soft);
  color: var(--am-faint);
  font-size: 12px;
  line-height: 1.5;
}
.pagination-pages { display: flex; align-items: center; gap: 4px; }
.pagination-pages button {
  min-width: 28px;
  height: 28px;
  border: 0;
  border-radius: 9px;
  padding: 0 8px;
  background: var(--am-control);
  color: var(--am-sub);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.pagination-pages button:hover:not(:disabled):not(.is-active) { background: #e8e8ed; }
.pagination-pages button.is-active { background: #242426; color: #fff; }
.pagination-pages button:disabled { opacity: .45; cursor: default; }
.pagination-pages button:focus-visible { outline: 2px solid var(--am-text); outline-offset: 2px; }
.tbl tbody > tr > td[colspan] { text-align: center; color: var(--am-faint); padding: 28px 14px; }
.tbl tbody > tr[hidden] { display: none; }

.table-wrap {
  padding: 0 14px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}
.table-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.18); }
@supports selector(::-webkit-scrollbar) {
  .table-wrap { scrollbar-width: auto; scrollbar-color: auto; }
}

table.tbl { width: 100%; border-collapse: collapse; color: var(--am-text); font-size: 0.88rem; }
/* 可选行的表格固定列宽：整行加粗与选中标记都不会改变列宽，点选不再引起整表重排。
   列宽按改造前的实测比例写在各自的 colgroup 上，视觉与之前一致。
   表格窄到一定程度改用横向滚动，避免单元格被挤到内容溢出。 */
table.tbl.is-fixed { table-layout: fixed; min-width: 720px; }
/* 任务中心含规格与完整调用时间；窄屏在表格容器内横向滚动。 */
table.tbl.is-fixed[data-task-table] { min-width: 1100px; }
table.tbl.is-fixed td { overflow-wrap: anywhere; }
/* 数字与状态胶囊保持单行：积分值不能被折在数字中间，行高也不因长短值漂移。 */
table.tbl.is-fixed td.num { overflow-wrap: normal; white-space: nowrap; }
table.tbl td .st { white-space: nowrap; }
table.tbl td .cell-sub {
  display: block;
  margin-top: 2px;
  color: var(--am-sub);
  font-size: 0.76rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 单元格次级行（如人民币成本下面的积分折算口径）：允许换行，长单位不被截断，
   且悬停行加粗时保持常规字重，读数不被悬停态干扰。 */
table.tbl td .cell-sub-wrap {
  display: block;
  margin-top: 3px;
  color: var(--am-sub);
  font-size: 0.76rem;
  font-weight: 500;
}
table.tbl th,
table.tbl td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--am-line-soft);
  text-align: left;
  vertical-align: middle;
}
table.tbl th { color: var(--am-sub); font-size: 0.76rem; font-weight: 760; white-space: nowrap; }
table.tbl th.right, table.tbl td.right { text-align: right; }
table.tbl th.center, table.tbl td.center { text-align: center; }
table.tbl th:last-child, table.tbl td:last-child { text-align: right; }
/* 订阅订单按容器比例收缩；窄列换行，不让数字、时间或状态撑出表格。 */
table.tbl.is-fixed[data-order-table] { min-width: 0; }
table.tbl.is-fixed[data-order-table] th,
table.tbl.is-fixed[data-order-table] td {
  padding-inline: clamp(4px, 0.65vw, 10px);
  white-space: normal;
  overflow-wrap: anywhere;
}
table.tbl.is-fixed[data-order-table] td .st {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
table.tbl.is-fixed[data-order-table] th:last-child,
table.tbl.is-fixed[data-order-table] td:last-child {
  text-align: right;
  padding-right: clamp(8px, 1vw, 16px);
}
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl td.num { font-variant-numeric: tabular-nums; }
table.tbl tbody tr[data-select] { cursor: pointer; }
/* 列表行仅在鼠标悬停时加粗；选中状态保留给详情与焦点管理使用。 */
table.tbl tbody tr[data-select]:hover td { background: none; color: var(--adm-row-hover-text); font-weight: 660; }
table.tbl tr.is-hidden { display: none; }

.cell-actions { display: inline-flex; align-items: center; gap: 12px; justify-content: flex-end; }
/* 链接内容（文字 + 图标）用 flex 交叉轴居中：
   图标若是普通行内元素，会按文字基线对齐而显得偏低，右箭头尤其明显。 */
.cell-actions a { display: inline-flex; align-items: center; gap: 4px; font-weight: 660; }
.card-head .c-actions a { display: inline-flex; align-items: center; gap: 4px; }

.mono { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; }
.sub { display: block; color: var(--am-faint); font-size: 0.76rem; font-weight: 600; }

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 10px 14px;
  color: var(--am-faint);
  font-size: 0.8rem;
}
.pager-pages { display: flex; align-items: center; gap: 8px; }
.pager-pages button {
  min-width: 34px;
  min-height: 34px;
  padding: 0 11px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--am-sub);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 720;
  transition: background 160ms ease, color 160ms ease;
}
.pager-pages button:hover { background: var(--am-control); color: var(--am-text); }
.pager-pages button.is-active { background: var(--am-text); color: #ffffff; }
.pager-size {
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: var(--am-control);
  color: var(--am-sub);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 660;
}

/* --------------------------------------------------------------------------
   9. 状态与标签（规范 .am-status / .am-tag）：浅底深字胶囊
   -------------------------------------------------------------------------- */

.st,
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 0;
  border-radius: var(--am-radius-pill);
  background: var(--adm-tag-bg);
  color: var(--adm-tag-fg);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

/* 状态色取规范 .am-status：语义色浅底 + 深字 */
.st.ok { background: rgba(36, 138, 90, 0.1); color: var(--am-green); }
.st.warn { background: rgba(173, 106, 28, 0.11); color: var(--am-orange); }
.st.danger { background: rgba(217, 75, 75, 0.1); color: var(--am-red); }
.st.idle { background: var(--am-soft); color: var(--am-muted); }

/* 标签色取规范 .am-tag 的既有色板 */
.tag.ok { background: var(--adm-tag-ok-bg); color: var(--adm-tag-ok-fg); }
.tag.warn { background: var(--adm-tag-warn-bg); color: var(--adm-tag-warn-fg); }
.tag.info { background: var(--adm-tag-info-bg); color: var(--adm-tag-info-fg); }
.tag.danger { background: rgba(217, 75, 75, 0.1); color: var(--am-red); }

/* --------------------------------------------------------------------------
   10. 说明条、键值、明细表
   -------------------------------------------------------------------------- */

.note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--am-radius-control);
  background: var(--am-soft);
  color: var(--am-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}
.note.on-card { margin: 14px 0 0; }
.note.warn { background: var(--am-overdue-bg); color: var(--am-overdue-text); }
.note .i { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 2px; }

.kv { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px 14px; font-size: 0.86rem; }
.kv dt { color: var(--am-sub); white-space: nowrap; }
.kv dd { margin: 0; min-width: 0; color: var(--am-text); }
.kv.two { grid-template-columns: 68px minmax(0, 1fr) 68px minmax(0, 1fr); gap: 10px 12px; font-size: 0.84rem; }
.kv.two.wide { grid-template-columns: 88px minmax(0, 1fr) 88px minmax(0, 1fr); }
.kv.two.wide dd { overflow-wrap: anywhere; }
.kv.two dd.num { white-space: nowrap; }
.kv.narrow { grid-template-columns: 96px minmax(0, 1fr); }
.kv.narrow dd { overflow-wrap: anywhere; }

.divider { height: 1px; margin: 16px 0; background: var(--am-line-soft); }

.mini-table { width: 100%; border-collapse: collapse; color: var(--am-text); font-size: 0.86rem; }
.mini-table th,
.mini-table td { padding: 12px 10px; border-bottom: 1px solid var(--am-line-soft); text-align: left; vertical-align: middle; }
.mini-table th { color: var(--am-sub); font-size: 0.74rem; font-weight: 760; }
.mini-table tr:last-child td { border-bottom: 0; }
.mini-table td.right, .mini-table th:last-child { text-align: right; }
.mini-table td.nowrap, .mini-table th.nowrap { white-space: nowrap; }
.mini-table td.wrap { white-space: normal; line-height: 1.5; min-width: 160px; }
.mini-table td .row-actions { display: inline-flex; gap: 10px; white-space: nowrap; }
/* `.tbl` 里的行内操作与 .mini-table 保持同一形态：文字链接横向排列、单行不换行，
  并在单元格内垂直居中，避免选中加粗时与箭头错位。 */
table.tbl td .row-actions { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
table.tbl td .row-actions a { color: var(--am-text); }
table.tbl td .row-actions a:hover { color: var(--am-muted); }

/* 键值行 / 明细行 */
.rows { display: flex; flex-direction: column; }
.row-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--am-line-soft);
  font-size: 0.86rem;
}
.row-line:last-child { border-bottom: 0; }
.row-line .r-name { color: var(--am-text); font-weight: 660; }
.row-line .r-sep { color: var(--am-faint); }
.row-line .r-note { color: var(--am-muted); font-size: 0.8rem; }
.row-line .r-right { margin-left: auto; }

.form-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--am-line-soft); }
.form-row:last-child { border-bottom: 0; }
.form-row dt { flex: 0 0 92px; color: var(--am-sub); font-size: 0.84rem; }
.form-row dd { margin: 0; color: var(--am-text); font-size: 0.86rem; }
.form-row .fill { flex: 1; }

.block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--am-text);
  font-size: 0.94rem;
  font-weight: 780;
}
.block-title .sub { color: var(--am-faint); font-size: 0.78rem; font-weight: 650; }

.metric-inline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: 8px;
  background: var(--am-soft);
  overflow: hidden;
}
.metric-inline > div { padding: 14px 16px; }
.metric-inline > div + div { border-left: 1px solid var(--am-line); }
.metric-inline span { display: block; color: var(--am-sub); font-size: 0.76rem; font-weight: 720; }
.metric-inline b { display: block; margin-top: 6px; color: var(--am-text); font-size: 1.6rem; font-weight: 760; line-height: 1; font-variant-numeric: tabular-nums; }
.metric-inline em { color: var(--am-muted); font-size: 0.78rem; font-style: normal; }

.amt { font-variant-numeric: tabular-nums; }
.amt.up { color: var(--am-green); }
.amt.down { color: var(--am-red); }
.amt.zero, td.num.zero { color: var(--am-faint); }

/* --------------------------------------------------------------------------
   11. 待办清单与图例
   -------------------------------------------------------------------------- */

.todo-list { display: flex; flex-direction: column; }
.todo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--am-line-soft);
  font-size: 0.88rem;
}
.todo:last-child { border-bottom: 0; }
.todo::before { content: ""; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--am-orange); }
.todo .t-label { color: var(--am-text); font-weight: 660; }
.todo .t-count { margin-left: auto; color: var(--am-muted); }
.todo .t-link { display: inline-flex; align-items: center; gap: 3px; font-weight: 660; }

.legend { display: flex; align-items: center; gap: 18px; color: var(--am-muted); font-size: 0.8rem; }
.legend .lg { display: inline-flex; align-items: center; gap: 7px; }
.legend .lg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--am-text); }
.legend .lg.green::before { background: var(--am-green); }

/* --------------------------------------------------------------------------
   12. 折线图（规范未覆盖，取值走 token）
   -------------------------------------------------------------------------- */

.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; }
.chart .grid-line { stroke: var(--am-line-soft); stroke-width: 1; }
.chart .axis-text { fill: var(--am-faint); font-size: 11px; }
.chart .axis-title { fill: var(--am-faint); font-size: 11.5px; }
.chart .s-usage { fill: none; stroke: var(--am-text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .s-cost { fill: none; stroke: var(--am-green); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .chart-reference { stroke: color-mix(in srgb, var(--am-muted) 36%, transparent); stroke-width: 1; stroke-dasharray: 4 4; }
.chart .chart-active-point { fill: var(--am-panel); stroke-width: 2; }
.chart .chart-active-point.usage { stroke: var(--am-text); }
.chart .chart-active-point.cost { stroke: var(--am-green); }
.chart .chart-tooltip-box { fill: var(--am-panel); stroke: var(--am-line); stroke-width: 1; }
.chart .chart-tooltip-time { fill: var(--am-muted); font-size: 13px; font-weight: 700; }
.chart .chart-tooltip-label { fill: var(--am-muted); font-size: 13px; font-weight: 600; }
.chart .chart-tooltip-value { fill: var(--am-text); font-size: 13.5px; font-weight: 760; }
.chart .chart-tooltip-dot.usage { fill: var(--am-text); }
.chart .chart-tooltip-dot.cost { fill: var(--am-green); }

/* --------------------------------------------------------------------------
   13. 时间线（规范未覆盖，取值走 token）
   -------------------------------------------------------------------------- */

.timeline { display: flex; flex-direction: column; }
.tl-row { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; }
.tl-rail { position: relative; }
.tl-rail::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: -6px;
  width: 1px;
  background: var(--am-line-soft);
}
.tl-row:last-child .tl-rail::before { display: none; }
.tl-dot { position: relative; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--am-green); }
.tl-dot.idle { background: var(--am-faint); }
.tl-dot.warn { background: var(--am-orange); }
.tl-body { padding-bottom: 16px; font-size: 0.86rem; }
.tl-title { display: flex; gap: 12px; align-items: baseline; }
.tl-title b { color: var(--am-text); font-weight: 660; }
.tl-time { color: var(--am-faint); font-size: 0.78rem; }
.tl-desc { margin-top: 2px; color: var(--am-muted); font-size: 0.8rem; }

/* --------------------------------------------------------------------------
   14. 容灾流程图（规范未覆盖，形态用分段控件的浅底语言）
   -------------------------------------------------------------------------- */

.flow { display: flex; flex-direction: column; gap: 16px; }
.flow-line { display: flex; align-items: center; flex-wrap: wrap; row-gap: 10px; }
.flow-line + .flow-line { margin-top: 18px; }
.flow-split {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-left: 186px;
  padding-left: 26px;
}
.flow-split::before {
  content: "";
  position: absolute;
  left: 0;
  top: -26px;
  bottom: 30px;
  width: 1px;
  background: var(--am-line-strong);
}
.flow-split > .flow-line { position: relative; }
.flow-split > .flow-line::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 50%;
  width: 26px;
  height: 1px;
  background: var(--am-line-strong);
}

.flow-node {
  padding: 12px 16px;
  border: 0;
  border-radius: var(--am-radius-control);
  background: var(--am-soft);
  font-size: 0.84rem;
  line-height: 1.4;
}
.flow-node b { display: block; color: var(--am-text); font-size: 0.88rem; font-weight: 700; }
.flow-node span { color: var(--am-muted); font-size: 0.78rem; }
.flow-node.start { background: var(--am-accent-soft); }
.flow-node.ok { background: rgba(36, 138, 90, 0.1); }
.flow-node.deny { background: rgba(217, 75, 75, 0.1); }
.flow-node.timeout { background: rgba(173, 106, 28, 0.11); }
.flow-node.idle { background: var(--am-soft); }

.flow-link {
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  height: 1px;
  margin: 0 8px;
  background: var(--am-line-strong);
}
.flow-link::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3.5px;
  border: 4px solid transparent;
  border-left-color: var(--am-line-strong);
}
.flow-link.dashed { flex-basis: 62px; width: 62px; background: none; border-top: 1px dashed var(--am-line-strong); }
.flow-link em {
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
  color: var(--am-faint);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 660;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   15. 轻提示：直接使用规范 .am-toast（顶部居中胶囊，浅底深字）
   -------------------------------------------------------------------------- */

.toast.am-toast { font-weight: 700; }

/* --------------------------------------------------------------------------
   16. 占位视图
   -------------------------------------------------------------------------- */

.placeholder { padding: 38px 14px; color: var(--am-muted); font-size: 0.86rem; text-align: center; }
.placeholder b { display: block; margin-bottom: 6px; color: var(--am-text); font-size: 0.94rem; font-weight: 740; }

/* --------------------------------------------------------------------------
   17. 图标占位（页面用 data-icon 声明，脚本注入 SVG）
   -------------------------------------------------------------------------- */

.i { display: inline-grid; place-items: center; flex: 0 0 18px; width: 18px; height: 18px; }
/* svg 设为块级：行内 svg 会在基线下方留出空隙，导致图标看起来比文字低一点 */
.i svg { display: block; width: 100%; height: 100%; }
.stat-head .i { flex-basis: 16px; width: 16px; height: 16px; }
.card-head .i { flex-basis: 18px; width: 18px; height: 18px; }
.btn .i { flex-basis: 16px; width: 16px; height: 16px; }
.field .i { flex-basis: 16px; width: 16px; height: 16px; }
.toolbar-note .i { flex-basis: 14px; width: 14px; height: 14px; }
.c-actions .i { flex-basis: 14px; width: 14px; height: 14px; }
.todo .t-link .i { flex-basis: 13px; width: 13px; height: 13px; }
.kv .i, .mini-table .i { flex-basis: 15px; width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   18. 窄屏（断点与规范一致）
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2, .grid-2.flip { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 920px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    padding: 20px;
    overflow: visible;
  }
  .sidebar .am-nav { margin-top: 18px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .sidebar-foot { margin-top: 18px; }
  .page-head { flex-direction: column; align-items: stretch; }
  .head-actions { justify-content: flex-start; flex-wrap: wrap; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .page-head h1 { font-size: 1.4rem; }
  .field.range { flex: 1 1 100%; }
  /* 双列键值对在窄屏塌成单列：两列布局下日期与周期值会被折在中间。 */
  .kv.two, .kv.two.wide { grid-template-columns: minmax(96px, 40%) minmax(0, 1fr); }
}

/* ---------- 管理后台：登录闸门与账号菜单 ---------- */

.admin-menu {
  position: relative;
  margin-top: 8px;
}

.admin-menu[hidden] { display: none; }

.admin-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--am-radius-control);
  background: var(--am-soft);
  color: var(--am-text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.admin-menu-item svg { width: 18px; height: 18px; }
.admin-menu-item:hover { background: var(--am-soft-2); }

.admin-chip[data-admin-chip] { cursor: pointer; }

.adm-login {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--am-bg);
}

.adm-login-card {
  width: min(380px, 100%);
  margin: 0;
  padding: 30px;
  border: 0;
  border-radius: var(--am-radius-card);
  background: var(--am-panel);
  box-shadow: var(--am-shadow-card);
}

.adm-login-card h2 {
  margin: 0 0 6px;
  font-size: 1.6rem;
  font-weight: 760;
  color: var(--am-text);
}

.adm-login-card p {
  margin: 0 0 20px;
  color: var(--am-muted);
  font-size: 0.9rem;
}

.adm-login-field {
  display: block;
  margin-bottom: 14px;
}

.adm-login-field span {
  display: block;
  margin-bottom: 6px;
  color: var(--am-sub);
  font-size: 0.78rem;
  font-weight: 700;
}

.adm-login-field input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--am-radius-control);
  background: var(--am-control);
  color: var(--am-text);
  font: inherit;
  font-size: 0.9rem;
}

.adm-login-field input:focus { outline: none; }

.adm-login-error {
  min-height: 18px;
  margin: 0 0 12px !important;
  color: var(--am-red);
  font-size: 0.82rem;
}

.adm-login-card .btn { width: 100%; }

/* ---------- 定价弹框：成本 / 倍率 / 积分售价 的联动换算 ---------- */

/* 只读与换算行：与输入行同高、同圆角、同底色、同字号，弹框内所有行高保持一致。
   统一 14px 下间距，避免相邻两行自成一套节奏。 */
.price-calc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin: 0 0 14px;
  padding: 0 14px;
  border-radius: var(--am-radius-control);
  background: var(--am-control);
  font-size: 0.9rem;
}
.price-calc .pc-label { color: var(--am-sub); font-weight: 700; white-space: nowrap; }
.price-calc .pc-value {
  flex: 0 1 auto;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  /* 不强制单行：窄屏下宁可折到第二行，也不能被裁掉；行高由 min-height 兜住。 */
 }
.price-calc .pc-label { flex: 0 0 auto; }

/* 折算建议行：数值之外带一个「填入」动作。 */
.price-hint {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  margin: -6px 0 14px;
  color: var(--am-sub);
  font-size: 0.76rem;
}
.price-hint button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--am-text);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- 任务中心的步骤时间线 ---------- */

.tl { display: flex; flex-direction: column; gap: 0; margin: 6px 0 4px; }

.tl-item { display: flex; gap: 12px; padding: 8px 0; }

.tl-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--am-soft-2);
}

.tl-dot.ok { background: #bfe0cd; }
.tl-dot.danger { background: #f0c3c3; }
.tl-dot.idle { background: #c9d8ee; }

.tl-body { min-width: 0; }

.tl-title { font-size: 0.88rem; font-weight: 660; color: var(--am-text); }

.tl-meta {
  margin-top: 3px;
  color: var(--am-muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}


/* ---------- 管理后台：轻量弹窗（规范里弹窗一律无边框，靠遮罩与阴影分层） ---------- */

.am-modal {
  position: fixed;
  inset: 0;
  /* 此处是全屏遮罩，清除基线 .am-modal 的卡片尺寸和居中位移。 */
  width: auto;
  max-height: none;
  transform: none;
  border-radius: 0;
  box-shadow: none;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 22, 26, 0.28);
}

.am-modal-card {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 26px 26px 22px;
  border: 0;
  border-radius: var(--am-radius-card);
  background: var(--am-panel);
  box-shadow: 0 24px 70px rgba(25, 31, 43, 0.2);
}

.am-modal-card h3 {
  margin: 0 0 6px;
  font-size: 1.08rem;
  font-weight: 780;
  color: var(--am-text);
}

.adm-modal-sub {
  margin: 0 0 16px;
  color: var(--am-muted);
  font-size: 0.86rem;
  line-height: 1.7;
}

.am-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: var(--am-soft);
  color: var(--am-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.am-modal-close:hover { background: var(--am-soft-2); }

.adm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.adm-login-field select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--am-radius-control);
  background: var(--am-control);
  color: var(--am-text);
  font: inherit;
  font-size: 0.9rem;
}

table.mini-table td .st { vertical-align: middle; }

/* 服务定价：变更对比弹窗，仅覆盖本弹窗。 */
.pricing-changes-modal { width: min(820px, 100%); display: flex; flex-direction: column; overflow: hidden; }
.pricing-changes-modal h3 { padding-right: 34px; }
.pricing-changes-content { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.pricing-changes-content::-webkit-scrollbar { width: 6px; height: 6px; }
.pricing-changes-content::-webkit-scrollbar-thumb { background: var(--am-muted); border-radius: var(--am-radius-control); }
.pricing-change + .pricing-change { margin-top: 18px; }
.pricing-change-title { display: flex; align-items: center; gap: 18px; margin: 0 0 8px; font-size: 0.9rem; overflow-wrap: anywhere; }
.pricing-change-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.86rem; }
.pricing-change-table th, .pricing-change-table td { padding: 10px 6px; text-align: left; overflow-wrap: anywhere; vertical-align: top; }
.pricing-change-table thead th { color: var(--am-muted); font-size: 0.76rem; font-weight: 500; }
.pricing-change-table th:first-child { width: 24%; }
.pricing-change-table th:nth-child(3) { width: 6%; }
.pricing-change-table tbody th { font-weight: 500; }
.pricing-change-before, .pricing-change-arrow { color: var(--am-muted); }
.pricing-change-table .is-changed .pricing-change-after { font-weight: 760; }
.pricing-changes-modal > .adm-modal-actions { flex-shrink: 0; padding-top: 8px; }
@media (max-width: 600px) {
  .pricing-changes-modal { padding: 18px; }
  .pricing-change-table th, .pricing-change-table td { padding: 8px 3px; }
}

/* 列表详情弹窗：仅迁移展示位置，不改变原详情字段与操作。 */
.adm [hidden] { display: none !important; }
.adm .grid-2.detail-list-layout { grid-template-columns: minmax(0, 1fr); }
.adm .adm-detail-overlay { padding: var(--adm-gap); }
.adm .adm-detail-modal {
  width: min(1100px, 100%);
  max-height: calc(100dvh - 36px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.adm-detail-head {
  position: relative;
  flex: none;
  padding: 22px 64px 18px 22px;
}
.adm .adm-detail-head h3 { margin: 0; overflow-wrap: anywhere; }
.adm-detail-head .c-sub { margin-left: .5em; color: var(--am-faint); font-size: 0.8rem; font-weight: 600; }
.adm-detail-body { overflow: auto; overscroll-behavior: contain; min-height: 0; padding: 0 22px 22px; }
.adm-detail-body > .card { border-radius: 0; min-width: 0; }
.adm-detail-body > .card:first-child > .card-head { display: none; }
.adm-detail-body > .card + .card { margin-top: var(--adm-gap); }
.adm-detail-body .card-head { padding: 0 0 14px; }
.adm-detail-body .card-body { padding: 0; min-width: 0; }
.adm-detail-body [data-load-region] { --region-height: 160px; --region-estimate: 160px; }
.adm-detail-body .kv.two { grid-template-columns: 96px minmax(0, 1fr) 96px minmax(0, 1fr); }
.adm-detail-body .kv dd { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.adm-detail-body .detail-table-scroll { padding: 0; margin: 14px 0; max-width: 100%; overflow-x: auto; }
.adm-detail-body .detail-table-scroll table { min-width: 640px; }
.adm-detail-body, .detail-table-scroll { scrollbar-width: thin; scrollbar-color: var(--am-line) transparent; }
.adm-detail-body::-webkit-scrollbar, .detail-table-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.adm-detail-body::-webkit-scrollbar-track, .detail-table-scroll::-webkit-scrollbar-track { background: transparent; }
.adm-detail-body::-webkit-scrollbar-thumb, .detail-table-scroll::-webkit-scrollbar-thumb { background: var(--am-line); border: 0; border-radius: 999px; }
@supports selector(::-webkit-scrollbar) {
  .adm-detail-body, .detail-table-scroll { scrollbar-width: auto; scrollbar-color: auto; }
}
@media (max-width: 800px) {
  .adm-detail-head { padding-left: 18px; }
  .adm-detail-body { padding: 0 18px 18px; }
  .adm-detail-body .kv.two { grid-template-columns: 96px minmax(0, 1fr); }
  .adm-detail-body .row-line { flex-wrap: wrap; }
}

/* Retained modules must never participate in the shell grid while inactive. */
.adm .main[hidden], .adm [data-module-portal][hidden] { display: none !important; }
.module-update-status { display: flex; gap: 8px; align-items: center; justify-content: flex-start; min-height: 24px; color: var(--am-muted); font-size: 12px; flex-wrap: wrap; }
.module-update-status[data-state="error"] { color: var(--am-danger, #b42318); }
.module-update-status [hidden] { display: none; }
.module-placeholder { min-height: 420px; }
[data-region-refreshing] > .region-status { pointer-events: none; }
[data-region-refreshing] > .region-status button { pointer-events: auto; }
[data-region-refreshing] > :not(.region-status) { pointer-events: auto !important; }

/* Deep links never flash the overview template while the session is checked. */
html[data-admin-route] .main:not([data-module]):not(.module-placeholder) > :not(.page-load-state) { visibility: hidden; }

/* One stable backdrop per modal stack; only card opacity/translation animate. */
html:has(body.adm) { scrollbar-gutter: stable; }
.adm .am-modal { background: transparent; }
.adm-modal-backdrop {
  position: fixed; inset: 0; z-index: 129; pointer-events: none;
  background: rgba(20, 22, 26, 0.28);
  animation: adm-backdrop-in 120ms ease-out both;
}
.adm-modal-backdrop[data-closing] { animation: adm-backdrop-out 120ms ease-in both; }
.adm .am-modal[data-modal-state="opening"] > .am-modal-card { animation: adm-modal-in 160ms ease-out both; }
.adm .am-modal[data-modal-state="closing"] > .am-modal-card { animation: adm-modal-out 120ms ease-in both; pointer-events: none; }
.adm .adm-detail-modal { height: min(780px, calc(100dvh - 36px)); }
.adm-detail-body { flex: 1; scrollbar-gutter: stable; }
@keyframes adm-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes adm-backdrop-out { from { opacity: var(--adm-close-opacity, 1); } to { opacity: 0; } }
@keyframes adm-modal-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes adm-modal-out { from { opacity: var(--adm-close-opacity, 1); transform: var(--adm-close-transform, translateY(0)); } to { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .adm .am-modal > .am-modal-card, .adm .adm-modal-backdrop { animation: none !important; }
}

/* 经营概览 · 服务调用与运行质量（独立于经营金额口径） */
.adm .overview-quality-grid { grid-template-columns:minmax(0,2.65fr) minmax(250px,1fr);align-items:stretch; }
.adm .overview-quality { min-width:0; }
.adm .oq-metrics { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:8px 0 24px;gap:0; }
.adm .oq-metric { min-width:0;padding:0 14px;border-right:1px solid var(--am-line-soft); }
.adm .oq-metric:first-child { padding-left:0; }
.adm .oq-metric:last-child { border:0;padding-right:0; }
.adm .oq-label { font-size:12px;color:var(--am-muted); }
.adm .oq-value { font-size:clamp(22px,2.1vw,32px);font-weight:760;line-height:1.4;margin:8px 0;white-space:nowrap; }
.adm .oq-caption { font-size:11px;color:var(--am-faint);overflow-wrap:anywhere; }
.adm .oq-metric.is-warn .oq-caption { color:var(--am-red); }
.adm .oq-metric.is-failed .oq-value { color:var(--am-red); }
.adm .oq-toolbar { display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--am-line-soft);padding-top:18px; }
.adm .oq-tabs { display:flex;gap:18px; }
.adm .oq-tabs button { border:0;border-bottom:2px solid transparent;background:transparent;padding:6px 0 10px;color:var(--am-faint);font:inherit;font-size:12px;cursor:pointer;white-space:nowrap; }
.adm .oq-tabs button.is-active { border-color:var(--am-text);color:var(--am-text);font-weight:700; }
.adm [data-quality-service] { max-width:190px;min-width:0;border:1px solid var(--am-line);border-radius:var(--am-radius-nav);background:var(--am-panel);padding:7px 10px;color:var(--am-text);font:inherit;font-size:12px; }
.adm select[data-quality-service] {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2374747a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.adm .oq-chart-meta { display:flex;justify-content:space-between;align-items:center;gap:10px;margin:18px 0 6px;color:var(--am-faint);font-size:11px; }
.adm .oq-legend { display:flex;gap:14px;flex-shrink:0; }
.adm .oq-legend span { display:inline-flex;align-items:center;gap:5px; }
.adm .oq-legend i { width:7px;height:7px;background:var(--am-text);border-radius:2px; }
.adm .oq-legend .oq-red { background:var(--am-red); }
.adm .oq-legend .oq-green { background:var(--am-green); }
.adm .oq-chart { position:relative;width:100%;min-width:0; }
.adm .oq-chart svg { display:block;width:100%;height:276px; }
.adm .oq-gridline { stroke:var(--am-line-soft); }
.adm .oq-axis { fill:var(--am-faint);font-size:11px; }
.adm .oq-future { fill:var(--am-control); }
.adm .oq-bar,.adm .oq-node,.adm .oq-hover-dot { fill:var(--am-text); }
.adm .oq-node,.adm .oq-hover-dot { stroke:var(--am-panel);stroke-width:1.5; }
.adm .oq-red { fill:var(--am-red); }
.adm .oq-green { fill:var(--am-green); }
.adm .oq-line { fill:none;stroke:var(--am-text);stroke-width:2; }
.adm .oq-green-line { stroke:var(--am-green); }
.adm .oq-guide { stroke:var(--am-faint);stroke-dasharray:3 4;stroke-width:1; }
.adm .oq-empty { fill:var(--am-faint);font-size:13px; }
.adm .oq-tooltip { position:absolute;z-index:3;pointer-events:none;background:var(--am-panel);color:var(--am-muted);border-radius:var(--am-radius-nav);box-shadow:var(--am-shadow-float);padding:12px 15px;font-size:13px;line-height:1.9;max-width:100%;overflow-wrap:anywhere; }
.adm .oq-tooltip strong { display:block;color:var(--am-text);font-size:13.5px;font-weight:760; }
.adm .oq-foot { display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--am-faint);margin:10px 0 18px; }
.adm .oq-foot span:last-child { white-space:nowrap; }
.adm .oq-alert { display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:var(--am-radius-nav);background:var(--am-soft);color:var(--am-muted);padding:13px 14px;font:inherit;font-size:12px;text-align:left;cursor:pointer; }
.adm .oq-alert.has-failures { background:var(--am-overdue-bg);color:var(--am-overdue-text); }
.adm .oq-arrow { margin-left:auto; }
.adm .oq-modal { max-width:580px; }
.adm .oq-detail-sub { color:var(--am-muted);font-size:13px;line-height:1.8;margin:14px 0; }
.adm .oq-detail-row { display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid var(--am-line-soft);font-size:13px;overflow-wrap:anywhere; }
.adm .oq-detail-row b { white-space:nowrap; }
@media(max-width:1150px){ .adm .overview-quality-grid {grid-template-columns:minmax(0,1fr);} }
@media(max-width:600px){
  .adm .oq-metrics {grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px;}
  .adm .oq-metric:nth-child(2){border:0;}.adm .oq-metric:nth-child(3){padding-left:0;}
  .adm .oq-value{font-size:28px;}.adm .oq-toolbar{flex-wrap:wrap;gap:10px;}
  .adm .oq-chart-meta,.adm .oq-foot{flex-wrap:wrap;}.adm .oq-legend{gap:10px;}
  .adm .oq-tabs{gap:18px;}.adm [data-quality-service]{max-width:100%;}
}
/* Failed filter reads must not present the preceding service's snapshot. */
.adm [data-load-region="overview-quality"][data-region-state="error"] > :not(.region-status) { visibility:hidden;pointer-events:none !important; }
.adm [data-load-region="overview-quality"][data-region-state="error"] > .region-status { align-items:center;justify-content:center;pointer-events:auto; }

/* 服务调用排行：沿用概览表格与共享弹窗。 */
.rank-card .card-head { flex-wrap: wrap; }
.rank-action { border: 0; background: none; color: var(--am-text); font: inherit; font-weight: 660; cursor: pointer; padding: 0; display: inline-flex; gap: 6px; align-items: center; }
.rank-action:hover { color: var(--am-muted); }
.rank-action:disabled { color: var(--am-faint); cursor: default; }
.rank-table { table-layout: fixed; min-width: 540px; }
.rank-table th, .rank-table td { padding-top: 18px; padding-bottom: 18px; }
.rank-table th:nth-child(4), .rank-table td:nth-child(4), .rank-table th:nth-child(5), .rank-table td:nth-child(5) { text-align: right; }
.rank-table td { font-variant-numeric: tabular-nums; }
.rank-table td:first-child { color: var(--am-faint); }
.rank-table td:nth-child(2) { font-weight: 600; overflow-wrap: anywhere; }
.rank-share { display: flex; gap: 12px; align-items: center; }
.rank-share span { min-width: 50px; text-align: right; }
.rank-track { height: 5px; background: var(--am-soft); border-radius: var(--am-radius-pill); width: 100%; max-width: 140px; overflow: hidden; }
.rank-fill { height: 100%; background: var(--am-faint); border-radius: inherit; }
.rank-foot { font-size: 13px; line-height: 1.8; }
.rank-foot strong { color: var(--am-text); font-weight: 600; }
.rank-modal { width: min(900px,100%); height: min(780px,calc(100dvh - 48px)); display: flex; flex-direction: column; overflow: hidden; }
.rank-modal header { flex-shrink: 0; padding-right: 36px; }
.rank-modal .table-wrap { overflow: auto; flex: 1; min-height: 0; }
.rank-modal .table-foot { flex-shrink: 0; }
.rank-modal .rank-table td { padding-top: 15px; padding-bottom: 15px; }
.rank-modal .rank-note { margin: 14px 0 0; color: var(--am-muted); font-size: 12px; line-height: 1.7; }
.rank-table .rank-empty { text-align: center; color: var(--am-muted); height: 230px; }
@media (max-width: 600px) {
  .rank-card .card-head { gap: 8px; }
  .rank-card .c-sub { order: 4; flex-basis: 100%; margin: 0; }
  .rank-table { min-width: 490px; }
  .rank-modal { height: calc(100dvh - 48px); padding: 18px; }
  .rank-share { gap: 6px; }
  .rank-modal .rank-table { min-width: 500px; }
}

/* 后台下拉框当前值与按钮保持同一字重，展开选项保留常规字重。 */
.adm select,
.adm select[data-quality-service] { font-weight: 740; }
.adm select option,
.adm select optgroup { font-weight: 400; }