/* 管理后台“运营概览”：只用主题令牌；动效仅在允许动画时出现。 */
.admin-metrics {
  --am-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;
  min-width: 0;
  margin-bottom: var(--space-6);
}
.am-head, .am-panel-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.am-head h3, .am-panel-head h4, .am-panel h4 { margin: 0; }
.am-tag { margin: 0 0 var(--space-1); color: var(--ink-2); font: 600 var(--text-meta)/1 var(--am-mono); letter-spacing: .16em; }
.am-tag::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: var(--space-2); border-radius: var(--radius-round); background: var(--azurite); }
.am-status { margin: var(--space-2) 0; }
.am-status:empty { display: none; }
.am-status.error { color: var(--danger); font-weight: 600; }
.am-note { margin: var(--space-2) 0; font-size: var(--text-xs); overflow-wrap: anywhere; }
.am-note:empty { display: none; }

.am-range { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); }
.am-range button { min-height: 40px; padding: 0 var(--space-4); border: 1px solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--ink); font-size: var(--text-md); }
.am-range button[aria-pressed="true"] { background: var(--tile-azurite); border-color: var(--azurite); color: var(--ink); font-weight: 600; }
#admin-metrics-retry { min-height: 40px; margin-bottom: var(--space-3); }
@media (max-width: 420px) { .am-range button { padding: 0 8px; font-size: var(--text-sm); } }

/* 指标条：宽屏换行成网格，手机横向滚动并吸附（页面本身不横向滚动）。 */
.am-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; min-width: 0; }
.am-metric { min-width: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-top: 2px solid var(--azurite); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.am-metric-label { margin: 0; color: var(--ink-2); font: 600 var(--text-xs)/var(--lh-ui) var(--am-mono); letter-spacing: .08em; }
.am-metric-value { margin: var(--space-1) 0; color: var(--ink); font-size: var(--text-3xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.am-delta { margin: 0; font: 600 var(--text-sm)/var(--lh-ui) var(--am-mono); font-variant-numeric: tabular-nums; }
.am-delta[data-trend="up"] { color: var(--success-ink); }
.am-delta[data-trend="down"] { color: var(--danger); }
.am-delta[data-trend="flat"] { color: var(--muted); }
.am-delta[data-trend="new"] { color: var(--azurite); }
.am-metric-sub { margin: var(--space-1) 0 0; color: var(--ink-2); font-size: var(--text-xs); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.am-metric[data-alert="true"] { border-color: var(--danger-line); border-top-color: var(--danger); background: var(--danger-soft); }
.am-metric[data-alert="true"] .am-metric-value { color: var(--danger); }
.am-link { display: inline-flex; align-items: center; min-height: 40px; color: var(--danger-hover); font-weight: 600; }
@media (max-width: 700px) {
  .am-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2); overscroll-behavior-x: contain; }
  .am-metric { flex: 0 0 min(200px, 70%); scroll-snap-align: start; }
}

.am-howto, .am-data { margin: var(--space-3) 0; }
.am-howto > summary, .am-data > summary { display: flex; align-items: center; min-height: 40px; cursor: pointer; color: var(--ink); font-weight: 600; }
.am-howto ul { margin: var(--space-2) 0; padding-left: var(--space-5); color: var(--ink-2); font-size: var(--text-sm); }
.am-howto li { margin: var(--space-1) 0; overflow-wrap: anywhere; }

.am-panel { margin: var(--space-4) 0; min-width: 0; }
.am-chart-wrap { width: 100%; min-width: 0; margin-top: var(--space-3); }
.am-chart { display: block; width: 100%; height: auto; }
.am-grid { stroke: var(--line); stroke-width: 1; }
.am-tick { fill: var(--muted); font: 500 11px var(--am-mono); font-variant-numeric: tabular-nums; }
.am-area { fill: var(--tile-azurite); stroke: none; }
.am-line { fill: none; stroke: var(--azurite); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.am-dot { fill: var(--surface); stroke: var(--azurite); stroke-width: 2; }

.am-table-scroll { max-width: 100%; overflow-x: auto; }
.am-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.am-table caption { padding: var(--space-2) 0; color: var(--ink-2); font-size: var(--text-xs); text-align: left; }
.am-table th, .am-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); color: var(--ink); text-align: left; font-weight: 400; white-space: nowrap; }
.am-table thead th, .am-table tr:first-child th[scope="col"] { color: var(--ink-2); font: 600 var(--text-xs)/var(--lh-ui) var(--am-mono); }
.am-table .am-num, .am-table td:not(:first-child) { text-align: right; }
.am-table .am-total th, .am-table .am-total td { font-weight: 700; }

.am-funnel { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.am-funnel-row { min-width: 0; }
.am-funnel-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-1); }
.am-funnel-label { flex: 1 1 8em; color: var(--ink); min-width: 0; }
.am-funnel-count { color: var(--ink); font: 700 var(--text-base)/1 var(--am-mono); font-variant-numeric: tabular-nums; }
.am-funnel-rate { color: var(--ink-2); font: 500 var(--text-xs)/var(--lh-ui) var(--am-mono); font-variant-numeric: tabular-nums; }
.am-bar-track { height: 10px; border-radius: var(--radius-pill); background: var(--tile-azurite); overflow: hidden; }
.am-bar { height: 100%; border-radius: var(--radius-pill); background: var(--azurite); }

.am-skeleton { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0; }
.am-skeleton span { flex: 1 1 150px; height: 96px; border-radius: var(--radius-sm); background: var(--tile-azurite); }
@media (prefers-reduced-motion: no-preference) {
  .am-skeleton span { animation: am-pulse 1.4s var(--motion-ease) infinite alternate; }
  .am-bar { transition: width var(--motion-enter) var(--motion-ease); }
  @keyframes am-pulse { from { opacity: .45; } to { opacity: 1; } }
}