/* 收益看板 (revenue dashboard) */
.revenue-dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}

.revenue-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.revenue-toolbar-hint {
  font-size: 13px;
  color: var(--muted);
}

.revenue-refresh {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: 12px;
  color: var(--muted-strong);
  background: var(--panel-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.revenue-refresh:hover:not(:disabled) {
  background: var(--panel-hover);
  color: var(--text);
}

.revenue-refresh:disabled {
  opacity: 0.6;
  cursor: default;
}

.revenue-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.revenue-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--panel-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  min-height: 104px;
}

.revenue-card.is-danger {
  border-color: var(--red-soft);
  background: var(--red-soft);
}

.revenue-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
}

.revenue-card-icon {
  display: inline-flex;
  color: var(--muted-strong);
}

.revenue-card.is-danger .revenue-card-icon {
  color: var(--red);
}

.revenue-card-label {
  font-size: 12px;
  font-weight: 500;
}

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

.revenue-card-sub {
  font-size: 11px;
  color: var(--muted);
}

.revenue-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.revenue-note svg {
  color: var(--yellow);
  flex-shrink: 0;
}

.revenue-error {
  padding: var(--space-3) var(--space-4);
  font-size: 13px;
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid var(--red-soft);
  border-radius: var(--radius);
}

.revenue-table-wrap {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}

.revenue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.revenue-table thead th {
  padding: var(--space-3) var(--space-3);
  text-align: end;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.022);
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}

.revenue-table th.col-name {
  text-align: start;
}

.revenue-table th.col-action {
  text-align: center;
}

.revenue-table tbody td {
  padding: var(--space-3) var(--space-3);
  text-align: end;
  color: var(--muted-strong);
  border-bottom: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.revenue-table tbody tr:last-child td {
  border-bottom: none;
}

.revenue-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.022);
}

.revenue-table td.col-name,
.revenue-table th.col-name {
  text-align: start;
  width: 38%;
}

.revenue-table td.col-action {
  text-align: center;
}

.revenue-app-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.revenue-app-meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  font-size: 11px;
  color: var(--muted);
}

.revenue-app-sep {
  opacity: 0.5;
}

.revenue-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--muted);
  flex-shrink: 0;
}

.revenue-dot.on {
  background: var(--green);
}

.revenue-dot.off {
  background: var(--muted);
}

.revenue-table tr.is-danger td {
  background: var(--red-soft);
}

.revenue-fail-danger {
  color: var(--red) !important;
  font-weight: 600;
}

.revenue-enter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: 12px;
  color: var(--text);
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.15s ease;
}

.revenue-enter:hover {
  background: var(--panel-hover);
}

.revenue-table-empty {
  text-align: center !important;
  padding: var(--space-7) var(--space-3) !important;
  color: var(--muted) !important;
}

@media (max-width: 1100px) {
  .revenue-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .revenue-cards {
    grid-template-columns: 1fr;
  }
}

/* full-screen revenue dashboard page (shared by /admin/revenue/:userId) */
.revenue-dashboard-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}

.revenue-loading {
  padding: var(--space-7) var(--space-4);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.revenue-head-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.revenue-head-owner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: 12px;
  color: var(--muted-strong);
  background: var(--panel-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* admin creator-user list (board that lists all users) */
.admin-users-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.admin-users-count {
  font-size: 13px;
  color: var(--muted);
}

.admin-users-search {
  min-width: 240px;
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
  color: var(--text);
  background: var(--panel-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--pill);
  outline: none;
}

.admin-users-search:focus {
  border-color: var(--line);
}

.revenue-table tbody tr.is-clickable {
  cursor: pointer;
}

.revenue-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.revenue-user-id {
  margin-top: var(--space-1);
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   VibeX Admin 设计系统 (admin-ds)
   实现自 handoff：VibeX Admin 设计系统.dc.html
   主配色零改动：语义令牌全部派生自 styles.css :root 的主色。
   新组件一律用 .ax- 前缀，避免与 legacy .admin-* 冲突（分阶段迁移）。
   ============================================================ */

:root {
  /* admin 专属点缀（沿用现有淡紫蓝，仅令牌化）*/
  --admin-accent: #9db4ff;
  --admin-accent-soft: rgba(124, 156, 255, 0.14);

  /* 语义状态色 —— 全部派生自主色，取代所有硬编码 */
  --ok: var(--green);
  --ok-soft: var(--green-soft);
  --ok-text: #7ee0b0;
  --warn: var(--yellow);
  --warn-soft: var(--yellow-soft);
  --warn-text: #ffd479;
  --danger: var(--red);
  --danger-soft: var(--red-soft);
  --danger-text: #ffb0b0;
  --info: var(--blue);
  --info-soft: var(--blue-soft);
  --info-text: #9fd4ff;
  --neutral-soft: rgba(255, 255, 255, 0.06);

  /* 统一 admin 卡片表面（收敛 0.04 / inset 0.07 的多种写法）*/
  --admin-card-bg: rgba(255, 255, 255, 0.04);
  --admin-card-border: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  --admin-card-radius: var(--radius-card);
}

/* ============ SHELL ============ */
.ax-shell {
  display: flex;
  width: 100vw;
  height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.ax-sidebar {
  width: 216px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.ax-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2) var(--space-4);
}

/* 主站同款横排 LOGO：图标(28×22) + 字标(78 宽)，与工作台侧栏一致，旁挂"后台"标签 */
.ax-sidebar__logo-mark {
  width: 28px;
  height: 22px;
  display: block;
  flex-shrink: 0;
}

.ax-sidebar__logo-wordmark {
  width: 78px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.ax-sidebar__brand-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-control);
  padding: var(--space-1) var(--space-2);
  line-height: 1.5;
  flex-shrink: 0;
}

.ax-sidebar__back {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  margin-bottom: var(--space-1);
  border-radius: 8px;
  text-align: left;
}
.ax-sidebar__back:hover {
  color: var(--text);
  background: var(--sidebar-hover);
}

.ax-sidebar__group {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #5a5a5a;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-2) var(--space-1);
}
.ax-sidebar__group:first-of-type {
  padding-top: var(--space-2);
}

.ax-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  border-radius: 8px;
  color: var(--muted-strong);
  font-size: 13px;
  text-decoration: none;
  background: none;
  border: 0;
  width: 100%;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}
.ax-nav-item:hover {
  background: var(--sidebar-hover);
  color: var(--text);
}
.ax-nav-item__icon {
  display: inline-flex;
  color: var(--muted);
  flex-shrink: 0;
}
.ax-nav-item.is-active {
  background: var(--blue-soft);
  color: var(--text);
  font-weight: 600;
}
.ax-nav-item.is-active .ax-nav-item__icon {
  color: var(--info-text);
}

.ax-shell__content {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  overflow-y: auto;
}

/* legacy .admin-page 在 shell 内的中和：去掉整页视口尺寸，改为随内容流动 */
.ax-shell__content .admin-page {
  width: 100%;
  height: auto;
  min-height: 100%;
  overflow: visible;
}
.ax-shell__content .admin-page.admin-page-fixed {
  display: block;
  height: auto;
  overflow: visible;
}

/* 首次进入 /admin 的鉴权窗口：中性加载态，替代整屏 null 黑闪 */
.ax-admin-gate {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
}

/* 模块切换淡入：配合 AdminShell 常驻，内容区换页不再生硬 */
.ax-shell__content > * {
  animation: ax-page-in 0.14s ease-out both;
}
@keyframes ax-page-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============ TOPBAR / PAGEHEADER ============ */
.ax-topbar {
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ax-topbar__inner {
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.ax-crumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: var(--space-1);
}
.ax-crumb__here {
  color: var(--admin-accent);
}
.ax-crumb__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  margin-right: var(--space-1);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ax-crumb__back:hover {
  color: var(--text);
  border-color: var(--admin-accent);
}
.ax-topbar__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.ax-topbar__desc {
  margin: var(--space-1) 0 0;
  font-size: 12.5px;
  color: var(--muted);
}
.ax-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.ax-page {
  padding: var(--space-6);
}

/* ============ BUTTON ============ */
.ax-btn {
  height: var(--button-height-compact);
  padding: 0 var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
  white-space: nowrap;
}
.ax-btn:hover:not(:disabled) {
  background: var(--panel-raised);
}
.ax-btn--sm {
  height: 28px;
  padding: 0 var(--space-3);
  font-size: 12px;
}
.ax-btn--primary {
  border: none;
  background: var(--blue);
  color: #000;
  font-weight: 700;
}
.ax-btn--primary:hover:not(:disabled) {
  background: var(--blue-hover);
}
.ax-btn--danger {
  border: 1px solid rgba(244, 33, 46, 0.5);
  background: var(--danger-soft);
  color: var(--danger-text);
}
.ax-btn--danger-solid {
  border: none;
  background: var(--danger);
  color: #fff;
  font-weight: 700;
}
.ax-btn--ghost {
  border: none;
  background: transparent;
  color: var(--muted);
}
.ax-btn--ghost:hover:not(:disabled) {
  color: var(--text);
  background: var(--panel-raised);
}
.ax-btn--icon {
  width: 32px;
  padding: 0;
  color: var(--muted-strong);
}
.ax-btn--icon.ax-btn--sm {
  width: 28px;
}
.ax-btn:disabled {
  color: #5a5a5a;
  border-color: var(--line);
  background: transparent;
  cursor: not-allowed;
}
.ax-btn--primary:disabled,
.ax-btn--danger-solid:disabled {
  background: var(--panel-raised);
  color: #5a5a5a;
}

/* ============ SEARCH + SEGMENT (Toolbar) ============ */
.ax-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: 999px;
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ax-search__icon {
  color: #5a5a5a;
  display: inline-flex;
}
.ax-search input {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  outline: none;
  width: 150px;
}
.ax-search input::placeholder {
  color: var(--muted);
}
.ax-search__clear {
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  padding: var(--space-1);
}
.ax-search__clear:hover {
  color: var(--text);
}

/* 页面级工具行（分段筛选等），无全局样式时默认紧贴上下块 */
.ax-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.ax-segment {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: 999px;
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ax-segment button {
  font-size: 12px;
  font-weight: 600;
  padding: var(--space-1) var(--space-4);
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.ax-segment button.is-active {
  background: var(--blue-soft);
  color: var(--info-text);
}

/* ============ TABS (页内页签, 重设计稿) ============ */
.ax-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ax-tabs button {
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.ax-tabs button.is-active {
  color: var(--text);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--blue);
}

/* ============ BADGE / STATUS PILL ============ */
.ax-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--neutral-soft);
  color: var(--muted-strong);
  white-space: nowrap;
}
.ax-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: 0.9;
}
.ax-pill--ok {
  background: var(--ok-soft);
  color: var(--ok-text);
}
.ax-pill--warn {
  background: var(--warn-soft);
  color: var(--warn-text);
}
.ax-pill--danger {
  background: var(--danger-soft);
  color: var(--danger-text);
}
.ax-pill--info {
  background: var(--info-soft);
  color: var(--info-text);
}
.ax-pill--neutral {
  background: var(--neutral-soft);
  color: var(--muted-strong);
}

/* ============ CARD / PANEL ============ */
.ax-card {
  border-radius: var(--admin-card-radius);
  background: var(--admin-card-bg);
  box-shadow: var(--admin-card-border);
  padding: var(--space-4);
}
.ax-card--ok {
  box-shadow: inset 2px 0 0 var(--ok), var(--admin-card-border);
}
.ax-card--warn {
  box-shadow: inset 2px 0 0 var(--warn), var(--admin-card-border);
}
.ax-card--danger {
  box-shadow: inset 2px 0 0 var(--danger), var(--admin-card-border);
}
.ax-card--info {
  box-shadow: inset 2px 0 0 var(--info), var(--admin-card-border);
}
.ax-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.ax-panel__head h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.ax-panel__head-note {
  font-size: 12px;
  color: var(--muted);
}
/* 可折叠面板的标题按钮：沿用 h4 字形，箭头指示展开态 */
.ax-panel__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.ax-panel__toggle .ax-panel__chev {
  color: var(--muted);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.ax-panel__toggle.is-open .ax-panel__chev {
  transform: rotate(90deg);
}

/* ============ STAT ============ */
.ax-stat-grid {
  display: grid;
  gap: var(--space-3);
}
.ax-stat {
  border-radius: var(--radius-card);
  background: var(--admin-card-bg);
  box-shadow: var(--admin-card-border);
  padding: var(--space-4);
  min-width: 0;
}
.ax-stat__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.ax-stat__icon {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-control);
  background: var(--info-soft);
  color: var(--info-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ax-stat__icon--accent {
  background: var(--admin-accent-soft);
  color: var(--admin-accent);
}
.ax-stat__icon--ok {
  background: var(--ok-soft);
  color: var(--ok-text);
}
.ax-stat__icon--neutral {
  background: var(--neutral-soft);
  color: var(--muted-strong);
}
.ax-stat__label {
  font-size: 12px;
  color: var(--muted);
}
.ax-stat__value {
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.ax-stat__hint {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: var(--space-1);
}
.ax-stat__hint--ok {
  color: var(--ok-text);
}

/* medium variant (category KPI grids: keeps icon+hint but denser) */
.ax-stat--md {
  padding: var(--space-3);
}
.ax-stat--md .ax-stat__value {
  font-size: 22px;
}
.ax-stat--md .ax-stat__head {
  margin-bottom: var(--space-2);
}

/* small dense variant */
.ax-stat--sm {
  border-radius: var(--radius-control);
  background: var(--panel);
  padding: var(--space-3) var(--space-3);
}
.ax-stat--sm .ax-stat__label {
  font-size: 11px;
  margin-bottom: var(--space-1);
}
.ax-stat--sm .ax-stat__value {
  font-size: 18px;
  font-weight: 700;
}
/* 带口径说明的指标：ⓘ 标记 + help 光标，悬停出原生 tooltip */
.ax-stat--help {
  cursor: help;
}
.ax-stat__help-ic {
  color: var(--muted);
  opacity: 0.6;
  margin-left: var(--space-1);
  vertical-align: -1.5px;
}
/* 统计网格内跨整行的小节标题：一组卡片的共同时间窗一次说清 */
.ax-stat-grid__section {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin: var(--space-2) 0 calc(var(--space-1) * -1);
}
.ax-stat-grid__section:first-child {
  margin-top: 0;
}
.ax-stat--danger {
  background: var(--danger-soft);
  box-shadow: inset 2px 0 0 var(--danger), inset 0 0 0 1px rgba(244, 33, 46, 0.3);
}
.ax-stat--danger .ax-stat__value {
  color: var(--danger-text);
}
.ax-stat--warn {
  background: var(--warn-soft);
}
.ax-stat--warn .ax-stat__value {
  color: var(--warn-text);
}
.ax-stat--ok .ax-stat__value {
  color: var(--ok-text);
}
.ax-stat--info .ax-stat__value {
  color: var(--info-text);
}

/* ============ DATA TABLE ============ */
.ax-table-wrap {
  border-radius: var(--radius-control);
  overflow: hidden;
  box-shadow: var(--admin-card-border);
}
.ax-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ax-table thead tr {
  background: var(--panel-muted);
}
.ax-table th {
  padding: var(--space-2) var(--space-3);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  white-space: nowrap;
}
.ax-table td {
  padding: var(--space-3) var(--space-3);
  vertical-align: middle;
}
.ax-table tbody tr {
  border-top: 1px solid var(--line-soft);
}
.ax-table tbody tr.is-clickable {
  cursor: pointer;
}
.ax-table tbody tr.is-clickable:hover {
  background: var(--panel-hover);
}
.ax-table tbody tr.is-danger {
  background: var(--danger-soft);
}
.ax-table .ax-num,
.ax-table th.ax-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ax-table .ax-center,
.ax-table th.ax-center {
  text-align: center;
}
/* 表内实体链接（如 Top App → 公开页）：继承前景色，下划线提示可点 */
.ax-table a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.28);
  text-underline-offset: 3px;
}
.ax-table a:hover {
  color: var(--info-text);
  text-decoration-color: currentColor;
}
.ax-cell-title {
  font-weight: 600;
}
.ax-cell-sub {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono, ui-monospace, monospace);
  margin-top: var(--space-1);
}
.ax-table--dense th {
  padding: var(--space-2) var(--space-2);
  font-size: 10.5px;
}
.ax-table--dense td {
  padding: var(--space-2) var(--space-2);
  font-size: 11.5px;
  white-space: nowrap;
}
.ax-table-empty {
  padding: var(--space-5) var(--space-3);
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ============ FIELD / FORM / TOGGLE ============ */
.ax-form-grid {
  display: grid;
  /* 设计帧: 1200 画布下 2 列、字段 ~470px。auto-fill 保持字段设计宽度，宽屏加列。 */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: var(--space-3);
}
.ax-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ax-field--wide {
  grid-column: span 2;
}
.ax-field__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  flex-wrap: wrap;
}
.ax-field__label > span:first-child {
  font-size: 12px;
  color: var(--muted-strong);
  font-weight: 600;
}
.ax-field__key {
  font-size: 10.5px;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--muted);
}
.ax-field__help {
  font-size: 11px;
  color: var(--muted);
  margin-top: var(--space-1);
}
.ax-input,
.ax-select,
.ax-textarea {
  width: 100%;
  height: 34px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-input);
  border: none;
  box-shadow: inset 0 0 0 1px var(--line);
  background: var(--field);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}
.ax-input.ax-num {
  font-variant-numeric: tabular-nums;
}
.ax-input:focus,
.ax-select:focus,
.ax-textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--blue);
}
/* 原生下拉弹层会继承 select 的半透明底色，在浅色系统上变成白底白字；option 需显式实底 */
.ax-select {
  color-scheme: dark;
}
.ax-select option {
  background: var(--panel-muted);
  color: var(--text);
}
.ax-select--sm {
  width: auto;
  height: 26px;
  padding: 0 var(--space-2);
  font-size: 12px;
}

/* 工单页证据块：被举报评论原文/作者/应用信息 */
.ax-report-evidence {
  margin-top: var(--space-1);
  font-size: 12px;
  color: var(--muted);
  max-width: 280px;
}
.ax-report-evidence__quote {
  color: var(--text);
  background: var(--panel-muted);
  border-radius: var(--radius-input, 6px);
  padding: var(--space-1) var(--space-2);
  margin-bottom: 2px;
  word-break: break-word;
}
.ax-report-evidence__meta {
  font-size: 11.5px;
}
.ax-textarea {
  height: auto;
  min-height: 120px;
  padding: var(--space-2) var(--space-3);
  line-height: 1.6;
  resize: vertical;
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* 38×22（设计规范原值）。曾经被写成 height: var(--button-height-compact)，
   那是按钮高度 32px——轨道被撑高，而滑块 18px 仍钉在 top:2px，下面空出 12px，
   滑块整个偏到右上角去了。滑块改用 translateY 居中，以后再有人动轨道高度也不会漂。 */
.ax-toggle {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  display: inline-block;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.14s ease;
}
.ax-toggle__knob {
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--muted);
  transition: left 0.14s ease, background 0.14s ease;
}
.ax-toggle.is-on {
  background: var(--blue);
}
.ax-toggle.is-on .ax-toggle__knob {
  left: 18px;
  background: #fff;
}
.ax-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ax-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 13px;
}

/* ============ ALERT ============ */
.ax-alert {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  font-size: 12.5px;
  background: var(--neutral-soft);
  color: var(--muted-strong);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ax-alert__icon {
  display: inline-flex;
  flex-shrink: 0;
}
.ax-alert--ok {
  background: var(--ok-soft);
  color: var(--ok-text);
  box-shadow: inset 0 0 0 1px rgba(0, 186, 124, 0.3);
}
.ax-alert--info {
  background: var(--info-soft);
  color: var(--info-text);
  box-shadow: inset 0 0 0 1px rgba(29, 155, 240, 0.3);
}
.ax-alert--warn {
  background: var(--warn-soft);
  color: var(--warn-text);
  box-shadow: inset 0 0 0 1px rgba(255, 212, 0, 0.3);
}
.ax-alert--danger {
  background: var(--danger-soft);
  color: var(--danger-text);
  box-shadow: inset 0 0 0 1px rgba(244, 33, 46, 0.3);
}

/* ============ TOAST ============ */
.ax-toast-wrap {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 360px;
}
.ax-toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: 12px;
  background: var(--panel-muted);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  animation: ax-toast-in 0.18s ease;
}
@keyframes ax-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ax-toast__icon {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--ok-soft);
  color: var(--ok-text);
}
.ax-toast__icon--danger {
  background: var(--danger-soft);
  color: var(--danger-text);
}
.ax-toast__body {
  flex: 1;
  min-width: 0;
}
.ax-toast__title {
  font-size: 13px;
  font-weight: 600;
}
.ax-toast__sub {
  font-size: 11.5px;
  color: var(--muted);
}
.ax-toast__close {
  border: 0;
  background: none;
  color: #5a5a5a;
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
}

/* ============ CONFIRM DIALOG ============ */
.ax-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.ax-modal {
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-dialog);
  background: var(--panel-muted);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  padding: var(--space-4);
  animation: ax-toast-in 0.16s ease;
}
.ax-modal__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.ax-modal__body {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: var(--space-4);
}
.ax-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ============ TERMINAL ============ */
.ax-term__presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.ax-chip {
  font-size: 11px;
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted-strong);
  font-family: var(--font-mono, ui-monospace, monospace);
  border: 0;
  cursor: pointer;
}
.ax-chip:hover {
  color: var(--text);
}
.ax-chip.is-active {
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 1px rgba(29, 155, 240, 0.4);
  color: var(--info-text);
}
.ax-term__form {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.ax-term__form input {
  flex: 1;
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-input);
  border: none;
  box-shadow: inset 0 0 0 1px var(--line);
  background: var(--field);
  color: var(--text);
  font-size: 12.5px;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.ax-term__form input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--blue);
}
.ax-term__body {
  border-radius: var(--radius-control);
  background: var(--panel-muted);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  padding: var(--space-3) var(--space-3);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.65;
  color: #cfcfcf;
  overflow-x: auto;
}
.ax-term__body pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.ax-term__muted {
  color: var(--muted);
}
.ax-term__err {
  color: var(--danger-text);
}
.ax-term__exit {
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ============ DETAIL GRID ============ */
.ax-detail-grid {
  display: grid;
  /* 设计帧 App 详情为 3 列（项 ~300px），auto-fill 对齐设计项宽。 */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-2);
}
.ax-detail-item {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  background: var(--panel);
  box-shadow: var(--admin-card-border);
  min-width: 0;
}
.ax-detail-item > span {
  font-size: 11px;
  color: var(--muted);
}
.ax-detail-item > strong {
  font-size: 12.5px;
  word-break: break-all;
}
.ax-detail-item > a {
  font-size: 12.5px;
  color: var(--info-text);
  word-break: break-all;
}

/* hub/detail 栅格已用 auto-fill 自适应，窄屏自动降列，无需媒体查询 */

/* ============ misc ============ */
.ax-num {
  font-variant-numeric: tabular-nums;
}
.ax-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.ax-mb-24 {
  margin-bottom: var(--space-6);
}
.ax-empty {
  padding: var(--space-4);
  border-radius: var(--radius-control);
  background: var(--neutral-soft);
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 900px) {
  .ax-sidebar { display: none; }
  .ax-form-grid,
  .ax-grid-2 { grid-template-columns: 1fr; }
}


/* ============ 灵感广场 admin-gallery-* → ax 视觉覆盖（重设计稿 3.10；只改观感不动布局/逻辑） ============ */
.ax-shell__content .admin-gallery-page { background: transparent; }
/* band 外壳转透明容器，卡面只落在内栏（避免双层嵌套描边） */
.ax-shell__content .admin-gallery-band {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
  border-radius: 0;
}
.ax-shell__content .admin-gallery-row-grid > .admin-gallery-recommend,
.ax-shell__content .admin-gallery-row-grid > .admin-gallery-order-panel,
.ax-shell__content .admin-gallery-row-grid > .admin-gallery-display-panel,
.ax-shell__content .admin-gallery-row-grid > .admin-gallery-groups {
  padding: var(--space-4);
  background: var(--admin-card-bg);
  border: none;
  box-shadow: var(--admin-card-border);
  border-radius: var(--admin-card-radius);
}
.ax-shell__content .admin-gallery-panel-head h3,
.ax-shell__content .admin-gallery-groups-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.ax-shell__content .admin-gallery-subtitle,
.ax-shell__content .admin-gallery-rule-note,
.ax-shell__content .admin-gallery-mini-copy {
  color: var(--muted);
}
.ax-shell__content .admin-gallery-app-card,
.ax-shell__content .admin-gallery-setting-block,
.ax-shell__content .admin-gallery-mini-item {
  background: var(--panel);
  border: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-control);
}
.ax-shell__content .admin-gallery-mini-item:hover {
  background: var(--panel-hover);
}
.ax-shell__content .admin-gallery-mini-item.is-dragging,
.ax-shell__content .admin-gallery-mini-item[data-dragging='true'] {
  background: var(--blue-soft);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(29, 155, 240, 0.5);
}
.ax-shell__content .admin-gallery-search input,
.ax-shell__content .admin-gallery-field input,
.ax-shell__content .admin-gallery-keywords-input,
.ax-shell__content .admin-gallery-textarea,
.ax-shell__content .admin-gallery-url-textarea {
  background: var(--field);
  border: none;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--radius-input);
  color: var(--text);
}
.ax-shell__content .admin-gallery-search input:focus,
.ax-shell__content .admin-gallery-field input:focus,
.ax-shell__content .admin-gallery-keywords-input:focus,
.ax-shell__content .admin-gallery-textarea:focus,
.ax-shell__content .admin-gallery-url-textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--blue);
}
.ax-shell__content .admin-gallery-add-icon {
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  background: transparent;
  color: var(--info-text);
}
.ax-shell__content .admin-gallery-publish-url a { color: var(--info-text); }

/* ============ 封面 16:9 裁切预览（CoverCropPreview） ============
   显示整张原图，压暗会被裁掉的部分——只给裁完的结果，运营看不到自己丢了什么。 */
.ax-crop {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ax-crop__frame {
  position: relative;
  border-radius: var(--radius-input);
  overflow: hidden;
  background: #000;
  line-height: 0;
}

.ax-crop__frame img {
  width: 100%;
  height: auto;
  display: block;
}

/* 原比例预览：不再有裁切槽位，改为按原图形状显示。
   竖图会很高，给个上限免得把编辑区撑爆；宽度随之收窄并居中。 */
/* 棋盘格底：成品图常带透明背景，垫纯色就看不出哪里是透明的。
   前台卡片是透明容器，透明区会直接透出页面底色——这里必须让运营看见。 */
.ax-crop__frame--natural {
  display: flex;
  justify-content: center;
  background-color: #2a2a2a;
  background-image:
    linear-gradient(45deg, #1c1c1c 25%, transparent 25%, transparent 75%, #1c1c1c 75%),
    linear-gradient(45deg, #1c1c1c 25%, transparent 25%, transparent 75%, #1c1c1c 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

.ax-crop__frame--natural img {
  width: auto;
  max-width: 100%;
  max-height: 260px;
}



/* 裁切线：明确标出前台可见范围的边界 */


.ax-crop__note {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}

/* 压缩战报：跟尺寸说明分行，别挤成一坨 */
.ax-crop__note-sub {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
}


.ax-crop__note strong { color: var(--warn, #e8b057); }

/* 封面未保存：上传失败时这块必须一直挂着。原来只弹一个 toast，
   运营看到预览里有图就以为存住了，刷新才发现没了（本机 COS 未配置时每次如此）。 */
.ax-cover-unsaved {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: var(--radius-input);
  box-shadow: inset 0 0 0 1px var(--warn);
  background: var(--warn-soft);
  font-size: 12px;
  line-height: 1.55;
}

.ax-cover-unsaved strong { color: var(--warn-text); font-size: 12.5px; }
.ax-cover-unsaved span { color: var(--muted-strong); }
.ax-cover-unsaved__hint { color: var(--muted); }

.ax-crop.is-unsaved .ax-crop__frame {
  box-shadow: inset 0 0 0 2px var(--warn);
}

.ax-crop__stamp {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1400;
  background: var(--warn);
}

/* 预览标签上的「封面未保存」：图能看到效果，但状态不能只靠一个 toast 说 */
.ax-preview-warn {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0;
  color: var(--warn-text);
  background: var(--warn-soft);
}

/* 「待保存」是正常中间态，不是错误：用中性色，别跟上传失败抢注意力 */
.ax-preview-hint {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0;
  color: var(--muted-strong);
  background: var(--neutral-soft);
}

/* ============================================================
   运营看板布局样式
   全部用 .axp- 前缀，不覆盖任何 .ax- 既有规则。
   （前缀沿用改造期的命名，改名要动上千处 class，收益不抵风险。）

   主题约束（重要）：
   本文件只做布局，不定义任何表面色。卡片/面板一律复用 admin-ds 的
   .ax-stat / .ax-card（由 StatCard / Panel 组件渲染），保证跟随全站主题。
   需要强调色时只用「有 [data-theme='light'] 覆盖」的基础令牌：
   --green/--red/--yellow(-soft)、--surface-*、--border-*、--text-*。
   禁止使用 --ok-text/--warn-text/--danger-text/--admin-card-bg 这类
   仅在 :root 定义、无浅色覆盖的深色专用值，也禁止写死 rgba(255,255,255,...)。
   ============================================================ */

.axp {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* 提示条：--yellow 在深浅两套主题下都有定义，对比度均达标 */
.axp-banner {
  background: var(--yellow-soft);
  border: 1px solid var(--border-default);
  color: var(--muted-strong);
  border-radius: var(--admin-card-radius);
  padding: var(--space-2) var(--space-4);
  font-size: 14px;
  line-height: 1.6;
}
.axp-banner b {
  color: var(--text);
}

/* ===== 同环比胶囊 ===== */
.axp-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
  border-radius: var(--radius-control);
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
}
.axp-delta--up {
  background: var(--green-soft);
  color: var(--green);
}
.axp-delta--down {
  background: var(--red-soft);
  color: var(--red);
}
.axp-delta--flat {
  background: var(--surface-2);
  color: var(--muted);
}

/* ===== 卡片标题旁的短徽标 =====
   承载「⊂①」这类关系提示和「成本偏低」这类口径告警：一整句会占掉半张卡，
   但完全不提示会让人把②加进①、或把偏低的成本当真实成本读。明细挂 title 悬停。 */
.axp-flag {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--radius-control);
  padding: var(--space-1) var(--space-1);
  margin-right: var(--space-1);
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--muted-strong);
  cursor: help;
}
.axp-flag--warn {
  background: var(--yellow-soft);
  color: var(--yellow);
}

/* ===== Lite 策略现状栅格 =====
   1px 间隙露出底色当发丝线，比给每格描边干净；5 列固定是因为这组开关是
   固定 10 项，auto-fill 会在宽屏切出空列。 */
.axp-policy {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-1);
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
}
@media (max-width: 1180px) {
  .axp-policy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.axp-policy__cell {
  background: var(--surface-1);
  padding: var(--space-3) var(--space-4);
}
.axp-policy__k {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: var(--space-1);
  line-height: 1.4;
}
.axp-policy__v {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 15.5px;
  font-weight: 600;
}
.axp-policy__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  flex: none;
}
/* 状态语义：开=绿、关=灰、enforce=黄（会真的拦人，不能和"开启"同色） */
.axp-policy__v.is-on {
  color: var(--green);
}
.axp-policy__v.is-off {
  color: var(--muted);
}
.axp-policy__v.is-warn {
  color: var(--yellow);
}

/* 真实用量 / Guard 事件：三格等分，中间发丝线分隔 */
.axp-triple {
  display: flex;
}
.axp-triple > div {
  flex: 1;
  padding-left: var(--space-5);
}
.axp-triple > div:first-child {
  padding-left: 0;
}
.axp-triple > div + div {
  border-left: 1px solid var(--border-subtle);
}
.axp-triple__k {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: var(--space-1);
}
.axp-triple__v {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
}

/* ===== 趋势图指标切换 ===== */
.axp-chips {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.axp-chips button {
  font-size: 13px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  padding: var(--space-1) var(--space-3);
  background: var(--surface-2);
  color: var(--muted-strong);
  cursor: pointer;
}
.axp-chips button:hover {
  color: var(--text);
  border-color: var(--border-default);
}
.axp-chips button.is-on {
  background: var(--admin-accent-soft);
  color: var(--admin-accent);
  border-color: transparent;
  font-weight: 600;
}
.axp-chips__note {
  font-size: 13px;
  color: var(--muted);
  margin-left: var(--space-1);
}

/* ===== 业务线卡片：外壳走 .ax-card(Panel)，这里只排版 =====
   固定 3 列而非 auto-fill：三条业务线是固定数量，auto-fill 在宽屏会切出第 4 个
   空列、窄屏又把卡压变形。minmax(0,1fr) 必须写，否则卡内宽表格会把网格撑破。 */
.axp-lines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
/* 两栏并排（规模/质量、Lite/Pro、Top App/Top 作者等成对面板） */
.axp-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 1180px) {
  .axp-lines,
  .axp-pair {
    grid-template-columns: 1fr;
  }
}

/* 密集表格在窄栏里会被 .ax-table-wrap 的 overflow:hidden 裁掉数字。
   只在本页放开横向滚动，不动共享的 .ax-table-wrap 规则。 */
.axp .ax-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
}
.axp-table-dense {
  min-width: 460px;
}
.axp-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.axp-trio__l {
  font-size: 12.5px;
  color: var(--muted);
}
.axp-trio__n {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-mono);
  margin-top: var(--space-1);
}
.axp-trio__n.is-pos {
  color: var(--green);
}
.axp-trio__n.is-neg {
  color: var(--red);
}
.axp-src {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-2);
  line-height: 1.5;
}
.axp-warn {
  color: var(--yellow);
  border-top: 0;
  padding-top: var(--space-1);
  margin-top: var(--space-1);
}

/* ===== 表格补充（复用 .ax-table 骨架）===== */
.axp-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: var(--space-1);
  font-family: var(--font-sans);
}
.axp-pos {
  color: var(--green);
}
.axp-neg {
  color: var(--red);
}
.axp-row-sum td {
  font-weight: 700;
  border-top: 1.5px solid var(--border-strong);
}
/* 本期不接入的数据源占位行：结构先留好，二期点亮不改表头 */
.axp-row-ghost td {
  color: var(--muted);
  opacity: 0.65;
  font-style: italic;
}

.axp-bar {
  display: inline-block;
  width: 64px;
  height: 6px;
  border-radius: var(--radius-control);
  background: var(--surface-3);
  position: relative;
  vertical-align: 1px;
  margin-right: var(--space-2);
}
.axp-bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: var(--radius-control);
  background: var(--admin-accent);
}

.axp-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.axp-empty {
  padding: var(--space-6) 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.axp-notes {
  margin: 0;
  padding-left: var(--space-4);
  font-size: 13.5px;
  color: var(--muted-strong);
  line-height: 1.8;
}

/* ===== 可切换口径的指标卡 =====
   交互的东西要看起来可交互：整卡可点，内部小开关显示当前口径。
   用 button 包裹而非 onClick div，保证键盘可达与语义正确。 */
.axp-switch-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--admin-card-radius);
}
.axp-switch-card:hover .ax-stat {
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.axp-switch-card:focus-visible {
  outline: 2px solid var(--admin-accent);
  outline-offset: 2px;
}
.axp-mau-switch {
  display: inline-flex;
  gap: var(--space-1);
  background: var(--surface-2);
  border-radius: var(--radius-control);
  padding: var(--space-1);
  margin-left: var(--space-2);
  vertical-align: 2px;
}
.axp-mau-switch b {
  font-size: 11.5px;
  font-weight: 600;
  padding: var(--space-1) var(--space-1);
  border-radius: var(--radius-control);
  color: var(--muted);
}
.axp-mau-switch b.is-on {
  background: var(--surface-1);
  color: var(--text);
}

/* 明细跳转：看板只给总额，按人/按周期明细指向专门页面 */
.axp-links {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: var(--space-1);
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.axp-links a {
  color: var(--admin-accent);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.axp-links a:hover {
  color: var(--text);
}

/* 收益与成本表的分组行：把 11 列表格按「开发侧 / 运行侧 / 平台支出」分段，
   否则一屏 8 行不同性质的数据混在一起，读不出结构 */
.axp-row-group td {
  font-family: var(--font-sans);
  text-align: left;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--surface-2);
  padding: var(--space-1) var(--space-2);
  letter-spacing: 0.04em;
  font-weight: 700;
}

/* 收益与成本的两条坐标轴：并排展示但保留分组标签。
   「消耗」是用户视角按售价计，「成本/结果」是平台视角，两者不构成加减；
   四张卡若无分隔地平铺，会被读成可相加的一组。 */
.axp-axis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 1180px) {
  .axp-axis {
    grid-template-columns: 1fr;
  }
}
.axp-axis__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  position: relative;
}
/* 右列加一道竖线，强调这是另一条轴 */
.axp-axis__col + .axp-axis__col::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--border-subtle);
}
@media (max-width: 1180px) {
  .axp-axis__col + .axp-axis__col::before {
    display: none;
  }
}
.axp-axis__label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ============================================================
   handoff 设计稿（2026-08-07）新增布局
   一律用主题令牌，不写死色值；卡片外壳仍走 Panel(.ax-card)。
   ============================================================ */

/* 净额结论条：左结论右拆解，中间用发丝线分栏 */
.axp-verdict {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.axp-verdict__k {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 1px;
  margin-bottom: var(--space-2);
}
.axp-drift-badge {
  appearance: none;
  border: 0;
  cursor: pointer;
  letter-spacing: 0;
}
.axp-verdict__v {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}
.axp-verdict__n {
  font-family: var(--font-mono);
  font-size: 52px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.axp-verdict__eq {
  font-size: 13.5px;
  color: var(--muted);
  font-family: var(--font-mono);
  margin-top: var(--space-2);
}
.axp-verdict__split {
  display: flex;
  align-items: center;
}
.axp-verdict__split > div {
  padding: 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.axp-verdict__split > div + div {
  border-left: 1px solid var(--border-subtle);
}
.axp-verdict__split > div:last-child {
  padding-right: 0;
}
.axp-verdict__sk {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.axp-verdict__sv {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
  text-align: right;
}

/* 口径图例：实心点=计收、空心点=仅名义。全站统一，不再靠文字解释 */
.axp-legend {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  flex-wrap: wrap;
  padding: 0 var(--space-1);
}
.axp-legend__i {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.axp-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  display: inline-block;
  flex: none;
  background: var(--text);
}
.axp-dot--hollow {
  background: transparent;
  border: 1px solid var(--muted);
  box-sizing: border-box;
}
.axp-dot--warn {
  background: var(--yellow);
}
/* 占位圆点：某些卡的首行没有实心/空心语义，但仍要占住圆点的宽度，
   否则该卡的标签文字会比相邻卡左移 11px，三张卡横看对不齐。 */
.axp-dot--ghost {
  background: transparent;
  border: 1px solid transparent;
  box-sizing: border-box;
}

/* 三列业务卡；开发收益用虚线边框表达"子集、不参与合计" */
.axp-trio-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: stretch;
}
/* 卡本身也要撑满格子。曾经有一张卡外面多包了一层 div，那层是 grid 子项、
   会被拉伸，里面的卡却按内容收缩，于是中间那张明显比两边矮一截。
   直接对后代卡片生效，以后再包一层也不会塌。 */
.axp-trio-cards > *,
.axp-trio-cards > * > .ax-card {
  height: 100%;
}
@media (max-width: 1180px) {
  .axp-trio-cards {
    grid-template-columns: 1fr;
  }
}
/* 开发收益卡与另外两张完全一致，不做任何边框区分。
   注意：.ax-card 的边框是 box-shadow: inset，没有真实 border——
   在这里写 border-style 会把默认的 medium/currentColor 边框打开，
   渲染成四边发白的粗框。包含关系由标题旁的「应用收益子集 · 不参与合计」承担。 */
.axp-kv {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.axp-kv__k {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 78px;
  flex: none;
}
.axp-kv__v {
  font-family: var(--font-mono);
  font-size: 27px;
  font-weight: 600;
}
.axp-kv__v--dim {
  color: var(--muted-strong);
}
/* 三张业务卡的头部大数区：卡里大数行数不一样（收入卡两行、成本卡一行），
   不锁高度的话下方明细整块会错开一截，横向读三张卡对不上行。 */
.axp-kv-head {
  min-height: 96px;
}

/* ===== 均分卡（平台补贴消耗）=====
   这张卡没有构成条，只有三个并列的数。不做特殊处理时它们会全挤在卡顶，
   下半张卡空着——三张卡靠 .axp-trio-cards 的 stretch 等高，短的那张不会自己收缩。
   改成 flex 列 + space-between，三项均分整张卡高。
   只对本卡生效（.ax-card 是全站共用外壳，不能全局改成 flex）。 */
.axp-spread {
  display: flex;
  flex-direction: column;
}
.axp-spread__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}
.axp-spread__k {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}
.axp-spread__tag {
  font-size: 12px;
  color: var(--muted);
  opacity: 0.72;
}
.axp-spread__v {
  font-family: var(--font-mono);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.1;
}
.axp-spread__v--dim {
  color: var(--muted-strong);
}

/* 构成条：分段宽度按占比，段间 2px 缝隙靠 gap 而不是描边 */
.axp-seg {
  display: flex;
  height: 8px;
  border-radius: var(--radius-control);
  overflow: hidden;
  gap: var(--space-1);
}
.axp-seg i {
  display: block;
  height: 100%;
}
.axp-seg--thin {
  height: 5px;
  border-radius: var(--radius-control);
}
.axp-seg--tall {
  height: 14px;
  border-radius: var(--radius-control);
}
.axp-seg__cap {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--muted);
  font-family: var(--font-mono);
  margin-top: var(--space-2);
}
.axp-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}
.axp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
}
.axp-row__k {
  color: var(--muted);
}
.axp-row__v {
  font-family: var(--font-mono);
}
.axp-row--muted,
.axp-row--muted .axp-row__k,
.axp-row--muted .axp-row__v {
  color: var(--muted);
  font-size: 12.5px;
}

/* 轻量指标带：6 格连体，不做成 6 张独立卡——它们是背景信息不是结论 */
.axp-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--admin-card-radius);
  overflow: hidden;
}
@media (max-width: 1180px) {
  .axp-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.axp-strip > div {
  padding: var(--space-3) var(--space-4);
  border-right: 1px solid var(--border-subtle);
}
.axp-strip > div:last-child {
  border-right: 0;
}
.axp-strip__k {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: var(--space-1);
}
.axp-strip__v {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
}
.axp-strip__u {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
}

/* 趋势 + 榜单：2:1 */
.axp-2to1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 1180px) {
  .axp-2to1 {
    grid-template-columns: 1fr;
  }
}

/* 榜单行：名次 + 名称/占比条 + 金额 */
.axp-rank {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.axp-rank:last-child {
  border-bottom: 0;
}
.axp-rank__i {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  width: 16px;
  flex: none;
}
.axp-rank__b {
  flex: 1;
  min-width: 0;
}
.axp-rank__n {
  font-size: 14px;
  margin-bottom: var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.axp-bar-thin {
  height: 3px;
  border-radius: var(--radius-control);
  background: var(--border-default);
  overflow: hidden;
}
.axp-bar-thin i {
  display: block;
  height: 100%;
  background: var(--admin-accent);
  opacity: 0.55;
}
.axp-rank__v {
  font-family: var(--font-mono);
  font-size: 13.5px;
  text-align: right;
  flex: none;
}

/* 两轴：中间夹一个「≠ 不构成加减」的分隔标识 */
.axp-axes {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
}
@media (max-width: 1180px) {
  .axp-axes {
    grid-template-columns: 1fr;
  }
}
.axp-axes__mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-4);
  gap: var(--space-2);
}
.axp-axes__mid i {
  width: 1px;
  flex: 1;
  background: var(--border-default);
}
@media (max-width: 1180px) {
  .axp-axes__mid {
    flex-direction: row;
    padding: var(--space-2) 0;
  }
  .axp-axes__mid i {
    height: 1px;
    width: auto;
  }
}
.axp-axes__tag {
  font-size: 12.5px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
}
.axp-axis-pair {
  display: flex;
  gap: var(--space-8);
}
.axp-axis-pair__k {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}
.axp-axis-pair__v {
  font-family: var(--font-mono);
  font-size: 31px;
  font-weight: 600;
}

/* 明细分组卡内的单项：名称+金额、占比条、三段元信息 */
.axp-item + .axp-item {
  margin-top: var(--space-3);
}
.axp-item__h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
}
.axp-item__n {
  font-size: 13.5px;
  color: var(--muted-strong);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.axp-item__a {
  font-family: var(--font-mono);
  font-size: 14px;
}
.axp-item__amount-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
}
.axp-item__amount-wrap .axp-flag {
  margin-right: 0;
  padding-block: 2px;
}
.axp-item__bar {
  height: 4px;
  border-radius: var(--radius-control);
  background: var(--border-subtle);
  overflow: hidden;
  margin-bottom: var(--space-1);
}
.axp-item__bar i {
  display: block;
  height: 100%;
  background: var(--admin-accent);
  opacity: 0.45;
}
.axp-item__bar i.is-nominal {
  background: var(--text);
  opacity: 0.14;
}
.axp-item__bar i.is-cost {
  background: var(--yellow);
  opacity: 0.3;
}
.axp-item__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 12.5px;
  color: var(--muted);
  font-family: var(--font-mono);
}
.axp-group-foot {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
}
.axp-consumption-unknown {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--admin-card-radius);
  background: var(--surface-2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-4);
  color: var(--muted);
  font-size: 13px;
}
.axp-consumption-unknown__cutover {
  color: var(--muted);
}
.axp-consumption-unknown__amount {
  color: var(--muted-strong);
  font-family: var(--font-mono);
  font-size: 14px;
}
@media (max-width: 760px) {
  .axp-consumption-unknown {
    grid-template-columns: 1fr auto;
  }
  .axp-consumption-unknown__cutover {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* 合计带：左名义右计收，一条里说清两个口径 */
.axp-totals {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--admin-card-radius);
  padding: var(--space-4) var(--space-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 1180px) {
  .axp-totals {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}
.axp-totals > div {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.axp-totals > div:first-child {
  border-right: 1px solid var(--border-subtle);
  padding-right: var(--space-6);
}
.axp-totals > div + div {
  padding-left: var(--space-6);
}
@media (max-width: 1180px) {
  .axp-totals > div:first-child {
    border-right: 0;
    padding-right: 0;
  }
  .axp-totals > div + div {
    padding-left: 0;
  }
}
.axp-totals__k {
  font-size: 13.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 130px;
  flex: none;
}
.axp-totals__v {
  font-family: var(--font-mono);
  font-size: 23px;
  font-weight: 600;
}

/* 漏斗阶梯：宽度即量级，级间连接线表达"取交集" */
.axp-funnel__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.axp-funnel__bar {
  min-width: 120px;
  background: var(--admin-accent-soft);
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.axp-funnel__n {
  font-family: var(--font-mono);
  font-size: 16.5px;
  font-weight: 600;
}
.axp-funnel__conn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  height: 18px;
  font-size: 12.5px;
  color: var(--muted);
  font-family: var(--font-mono);
}
.axp-funnel__conn i {
  width: 1px;
  height: 100%;
  background: var(--border-strong);
}

/* 三列：漏斗 / 留存 / Lite 保护阀 */
.axp-3col {
  display: grid;
  grid-template-columns: 1fr 1.3fr 0.7fr;
  gap: var(--space-3);
}
@media (max-width: 1180px) {
  .axp-3col {
    grid-template-columns: 1fr;
  }
}
.axp-cohort-legend {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-3);
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--muted);
}
.axp-cohort-legend > div {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.axp-cohort-legend i {
  width: 14px;
  height: 2px;
  border-radius: var(--radius-control);
  display: inline-block;
}

/* LLM 双档：金额三栏 + tokens 六格 */
.axp-money3 {
  display: flex;
}
.axp-money3 > div {
  padding-left: var(--space-5);
}
.axp-money3 > div:first-child {
  padding-left: 0;
  flex: 1.2;
}
.axp-money3 > div {
  flex: 1;
}
.axp-money3 > div + div {
  border-left: 1px solid var(--border-subtle);
}
.axp-money3__k {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: var(--space-1);
}
.axp-money3__v {
  font-family: var(--font-mono);
  font-size: 31px;
  font-weight: 600;
}
.axp-money3__v--sm {
  font-size: 23px;
  color: var(--muted-strong);
}
.axp-callbox {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
}
.axp-tokens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
}
.axp-tokens > div {
  background: var(--surface-1);
  padding: var(--space-2) var(--space-3);
}
.axp-tokens__k {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: var(--space-1);
}
.axp-tokens__v {
  font-family: var(--font-mono);
  font-size: 14px;
}

/* 卡片右上角的齿轮/返回按钮：与 Panel 的 note 位共用，做成图标钮而非文字链接，
   因为它是"翻面"这种模式切换，不是跳转。 */
.axp-gear {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border-default);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.axp-gear:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.axp-gear:focus-visible {
  outline: 2px solid var(--admin-accent);
  outline-offset: 2px;
}

/* ===== 表格字号：只在运营看板作用域内放大 =====
   .ax-table 是全站共享的（部署节点、发布安审等页都在用），不能全局调；
   这里只覆盖 .axp 内的表格，跟随本页放大后的排版刻度。 */
.axp .ax-table th {
  font-size: 12.5px;
}
.axp .ax-table td {
  font-size: 13.5px;
}
.axp .axp-table-dense td {
  font-size: 13px;
}
/* 表内的次级说明（第二行小字）同步上调 */
.axp .ax-table .axp-sub {
  font-size: 12px;
}

/* Homepage shadcn state layer. Imported after the historical style passes. */

.workspace-page.dashboard-page.vibex-redesign-home .shadcn-dashboard-nav {
  width: 100%;
  justify-content: stretch;
}

.workspace-page.dashboard-page.vibex-redesign-home .dashboard-menu .shadcn-dashboard-nav[data-state='off'] {
  color: var(--text-secondary) !important;
  background: transparent !important;
}

.workspace-page.dashboard-page.vibex-redesign-home .dashboard-menu .shadcn-dashboard-nav:hover:not(:disabled) {
  color: var(--text-primary) !important;
  background: var(--surface-2) !important;
}

.workspace-page.dashboard-page.vibex-redesign-home .dashboard-menu .shadcn-dashboard-nav[data-state='on'] {
  color: var(--text-primary) !important;
  background: var(--surface-3) !important;
  box-shadow: inset 0 0 0 1px var(--border-default) !important;
}

.workspace-page.dashboard-page.vibex-redesign-home .dashboard-menu .shadcn-dashboard-nav[data-state='on'] > svg:first-child {
  stroke-width: 2 !important;
}

.workspace-page.dashboard-page.vibex-redesign-home .dashboard-menu .ui-badge {
  margin-inline-start: auto;
  color: var(--text-muted) !important;
  background: transparent !important;
}

.workspace-page.dashboard-page.vibex-redesign-home .dashboard-app-type-toggle.ui-toggle-group {
  display: inline-flex !important;
}

.workspace-page.dashboard-page.vibex-redesign-home .dashboard-app-type-toggle .ui-toggle-group-item {
  min-width: 64px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 var(--space-3) !important;
  border-radius: var(--radius-full) !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.workspace-page.dashboard-page.vibex-redesign-home .dashboard-app-type-toggle .ui-toggle-group-item:hover:not(:disabled) {
  color: var(--text-secondary) !important;
  background: var(--surface-2) !important;
}

.workspace-page.dashboard-page.vibex-redesign-home .dashboard-app-type-toggle .ui-toggle-group-item[data-state='on'] {
  color: var(--text-primary) !important;
  background: var(--surface-3) !important;
  box-shadow: inset 0 0 0 1px var(--border-default) !important;
}

.workspace-page.dashboard-page.vibex-redesign-home .dashboard-main-prompt .ui-textarea {
  box-shadow: none !important;
}

.workspace-page.dashboard-page.vibex-redesign-home .dashboard-main-prompt .ui-button {
  flex: 0 0 auto;
}

.workspace-page.dashboard-page.vibex-redesign-home .dashboard-suggestion-helper .ui-button {
  width: auto !important;
  min-height: var(--button-height-compact) !important;
  height: var(--button-height-compact) !important;
  padding: 0 var(--space-2) !important;
  border-radius: 8px !important;
  color: var(--text-secondary) !important;
  background: transparent !important;
}

.workspace-page.dashboard-page.vibex-redesign-home .dashboard-suggestion-helper .ui-button:hover:not(:disabled) {
  color: var(--text-primary) !important;
  background: var(--surface-2) !important;
}

.workspace-page.dashboard-page.vibex-redesign-home .dashboard-suggestion-chip.ui-button {
  width: auto;
  justify-content: center;
}

.workspace-page.dashboard-page.vibex-redesign-home .dashboard-suggestion-chip.ui-button[data-state='on'] {
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
  background: var(--surface-3) !important;
  box-shadow: inset 0 0 0 1px var(--border-default) !important;
}

.workspace-page.dashboard-page.vibex-redesign-home .dashboard-suggestion-chip.ui-button[data-state='on'] .dashboard-suggestion-orb {
  background: var(--text-primary) !important;
}

.workspace-page.dashboard-page.vibex-redesign-home .shadcn-icon-action:hover:not(:disabled) {
  color: var(--text-primary) !important;
  background: var(--surface-3) !important;
}

.workspace-page.dashboard-page.vibex-redesign-home .ui-button:focus-visible,
.workspace-page.dashboard-page.vibex-redesign-home .ui-toggle-group-item:focus-visible {
  outline: 1px solid var(--text-secondary) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--border-strong) !important;
}

@media (max-width: 760px) {
  .workspace-page.dashboard-page.vibex-redesign-home .dashboard-app-type-toggle .ui-toggle-group-item {
    min-width: 58px !important;
    padding-inline: var(--space-2) !important;
  }
}

/* Avatar triggers stay visually bare in every shell and sidebar state. */
:is(
  .main-nav-actions,
  .workspace-page.dashboard-page.vibex-redesign-home.lovable-dashboard
    .dashboard-sidebar-bottom.dashboard-utility-dock,
  .workspace-page.dashboard-page .dashboard-topbar-actions,
  .chat-account,
  .project-workbench-sidebar-account
) .account-entry.account-entry-logged,
:is(
  .main-nav-actions,
  .workspace-page.dashboard-page.vibex-redesign-home.lovable-dashboard
    .dashboard-sidebar-bottom.dashboard-utility-dock,
  .workspace-page.dashboard-page .dashboard-topbar-actions,
  .chat-account,
  .project-workbench-sidebar-account
) .account-entry.account-entry-logged:is(:hover, :focus-visible, [data-state='open']) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.global-auth-page,
.global-auth-gate {
  min-height: 100dvh;
  background: #15161b;
  color: #f7f7fa;
}

.global-auth-page {
  display: grid;
  grid-template-columns: minmax(0, 65fr) minmax(420px, 35fr);
  overflow: hidden;
}

.global-auth-page.is-variant-2 {
  grid-template-columns: minmax(0, 56fr) minmax(420px, 44fr);
  background: #f7f7f5;
  color: #17181c;
}

.global-auth-visual {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 72%, rgb(15 16 20 / 20%)),
    url('/assets/login-visual.png') center 58% / cover no-repeat,
    #080b13;
}

.global-auth-visual::after {
  position: absolute;
  inset: 0;
  content: '';
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(3 6 12 / 28%), transparent 24%, transparent 76%, rgb(3 5 10 / 25%)),
    radial-gradient(circle at 50% 48%, transparent 45%, rgb(4 6 12 / 20%) 100%);
}

.global-auth-page.is-variant-2 .global-auth-visual {
  background:
    linear-gradient(90deg, rgb(4 5 5 / 5%), transparent 78%, rgb(10 11 12 / 9%)),
    url('/assets/login-visual-v2.png') 48% center / cover no-repeat,
    #6f4d32;
}

.global-auth-page.is-variant-2 .global-auth-visual::after {
  background:
    linear-gradient(180deg, rgb(2 3 3 / 10%), transparent 28%, transparent 75%, rgb(2 3 3 / 14%)),
    radial-gradient(circle at 48% 48%, transparent 58%, rgb(4 5 5 / 12%) 100%);
}

.global-auth-logo {
  position: absolute;
  z-index: 1;
  top: 28px;
  inset-inline-start: 32px;
  width: 112px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.global-auth-panel {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 96px clamp(40px, 7vw, 112px) 76px;
  background:
    radial-gradient(circle at 50% 48%, rgb(45 47 58 / 22%), transparent 38%),
    #15161b;
}

.global-auth-page.is-variant-2 .global-auth-panel {
  border-inline-start: 1px solid #e3e3e0;
  background:
    radial-gradient(circle at 18% 8%, rgb(0 0 0 / 2.5%), transparent 34%),
    #f7f7f5;
  box-shadow: inset 1px 0 0 rgb(255 255 255 / 72%);
}

.global-auth-page.is-variant-2 .global-auth-panel::before {
  position: absolute;
  inset: 0;
  content: '';
  pointer-events: none;
  opacity: 0.14;
  background-image: radial-gradient(circle, rgb(20 22 26 / 16%) 0 0.45px, transparent 0.7px);
  background-size: 6px 6px;
  mix-blend-mode: multiply;
}

.global-auth-page.is-variant-2 .global-auth-card {
  position: relative;
  z-index: 1;
}

.global-auth-page.is-variant-2 .global-auth-legal {
  z-index: 1;
}

.global-auth-header {
  position: absolute;
  z-index: 2;
  top: 24px;
  inset-inline-end: 28px;
}

.global-auth-language {
  color: #a9aab2 !important;
  border-color: rgb(255 255 255 / 9%) !important;
  background: rgb(255 255 255 / 3%) !important;
}

.global-auth-page.is-variant-2 .global-auth-language {
  border-color: rgb(20 22 26 / 9%) !important;
  background: rgb(255 255 255 / 68%) !important;
  color: #62646a !important;
}

.global-auth-card {
  width: min(100%, 410px);
  padding-bottom: 8px;
  text-align: center;
}

.global-auth-card h2 {
  margin: 0;
  color: #f4f4f7;
  font-size: clamp(30px, 2.5vw, 39px);
  font-weight: 520;
  line-height: 1.08;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.global-auth-page.is-variant-2 .global-auth-card h2 {
  color: #17181c;
}

.global-auth-actions {
  display: grid;
  gap: 10px;
  margin: 24px 0 18px;
}

.global-auth-actions button,
.global-auth-retry {
  position: relative;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(180deg, #222328, #1d1e23);
  color: #ededf0;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
  font: inherit;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.global-auth-actions button:hover {
  border-color: rgb(255 255 255 / 17%);
  background: linear-gradient(180deg, #292a30, #222328);
}

.global-auth-actions button:active {
  transform: scale(0.985);
}

.global-auth-actions button:focus-visible,
.global-auth-retry:focus-visible,
.global-auth-legal a:focus-visible {
  outline: 2px solid #8188ff;
  outline-offset: 3px;
}

.global-auth-actions button.is-primary {
  border-color: rgb(255 255 255 / 88%);
  background: linear-gradient(180deg, #ffffff 0%, #f2f2f4 100%);
  box-shadow: 0 12px 34px rgb(0 0 0 / 18%), inset 0 1px 0 rgb(255 255 255 / 75%);
  color: #17181d;
}

.global-auth-actions button.is-primary:hover {
  border-color: #fff;
  background: linear-gradient(180deg, #f6f6f8 0%, #e8e8eb 100%);
}

.global-auth-actions button strong {
  font-size: 13px;
  font-weight: 500;
}

.global-auth-page.is-variant-2 .global-auth-actions button,
.global-auth-page.is-variant-2 .global-auth-actions button.is-primary {
  border-color: #d8d8d5;
  background: linear-gradient(180deg, #ffffff, #fafaf8);
  color: #191a1e;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(16 18 22 / 4%);
}

.global-auth-page.is-variant-2 .global-auth-actions button:hover,
.global-auth-page.is-variant-2 .global-auth-actions button.is-primary:hover {
  border-color: #bfc0bc;
  background: linear-gradient(180deg, #f9f9f7, #f1f1ee);
}

.global-auth-page.is-variant-2 .global-auth-actions button:focus-visible,
.global-auth-page.is-variant-2 .global-auth-legal a:focus-visible {
  outline-color: #383a40;
}

.global-auth-card small {
  display: block;
  max-width: none;
  margin: 0 auto;
  color: #62646d;
  font-size: 11px;
  line-height: 1.55;
  white-space: nowrap;
}

.global-auth-page.is-variant-2 .global-auth-card small {
  color: #8a8b8f;
}

.global-auth-legal {
  position: absolute;
  bottom: 24px;
  display: flex;
  gap: 8px;
  align-items: center;
  color: #555760;
  font-size: 11px;
}

.global-auth-legal a {
  color: #777982;
  text-decoration: none;
  transition: color 180ms ease;
}

.global-auth-legal a:hover {
  color: #c7c8ce;
}

.global-auth-page.is-variant-2 .global-auth-legal {
  color: #b1b2b4;
}

.global-auth-page.is-variant-2 .global-auth-legal a {
  color: #85868a;
}

.global-auth-page.is-variant-2 .global-auth-legal a:hover {
  color: #292b30;
}

.global-auth-gate {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}

.global-auth-gate .global-auth-logo {
  position: static;
  filter: none;
}

.global-auth-gate h1,
.global-auth-gate p {
  margin: 0;
}

.global-auth-gate p {
  color: #898b94;
}

.global-auth-retry {
  margin-top: 8px;
}

.global-auth-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgb(255 255 255 / 12%);
  border-top-color: #f4f4f7;
  border-radius: 50%;
  animation: global-auth-spin 0.75s linear infinite;
}

.global-adapter-notice {
  position: fixed;
  z-index: 10000;
  top: 14px;
  left: 50%;
  max-width: min(720px, calc(100vw - 32px));
  padding: 10px 14px;
  transform: translateX(-50%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 10px;
  background: #202126;
  color: #f4f4f7;
  box-shadow: 0 16px 44px rgb(0 0 0 / 30%);
}

@keyframes global-auth-spin {
  to { transform: rotate(360deg); }
}

.global-auth-error {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid rgb(244 117 108 / 18%);
  border-radius: 7px;
  background: rgb(118 43 40 / 16%);
  color: #efaaa5;
  font-size: 12px;
  line-height: 1.45;
  text-align: start;
}

.global-auth-appeal {
  display: grid;
  gap: 10px;
  margin: 14px 0 4px;
  text-align: start;
}

.global-auth-appeal label {
  display: grid;
  gap: 7px;
  color: #a7a9b1;
  font-size: 12px;
}

.global-auth-appeal textarea {
  width: 100%;
  min-height: 82px;
  padding: 10px 12px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 7px;
  background: #1d1e23;
  color: #f4f4f7;
  resize: vertical;
}

.global-auth-appeal button {
  min-height: 40px;
  border: 0;
  border-radius: 7px;
  background: #5d63df;
  color: white;
  cursor: pointer;
}

@media (max-width: 900px) {
  .global-auth-page {
    grid-template-columns: minmax(280px, 42fr) minmax(380px, 58fr);
  }

  .global-auth-panel {
    padding-inline: clamp(30px, 6vw, 64px);
  }

  .global-auth-page.is-variant-2 {
    grid-template-columns: minmax(280px, 42fr) minmax(400px, 58fr);
  }
}

@media (max-width: 680px) {
  .global-auth-page {
    min-height: 100dvh;
    display: block;
    overflow: auto;
    background:
      linear-gradient(180deg, rgb(10 12 19 / 18%), #15161b 39%),
      url('/assets/login-visual.png') center top / 100% auto no-repeat,
      #15161b;
  }

  .global-auth-page.is-variant-2 {
    background: #f7f7f5;
  }

  .global-auth-visual {
    min-height: 180px;
    background: none;
    overflow: visible;
  }

  .global-auth-page.is-variant-2 .global-auth-visual {
    background:
      linear-gradient(180deg, transparent 42%, rgb(13 14 14 / 28%)),
      url('/assets/login-visual-v2.png') 48% center / cover no-repeat,
      #6f4d32;
  }

  .global-auth-visual::after {
    display: none;
  }

  .global-auth-logo {
    top: 22px;
    inset-inline-start: 22px;
    width: 104px;
  }

  .global-auth-panel {
    min-height: calc(100dvh - 180px);
    padding: 54px 22px 72px;
    background: linear-gradient(180deg, transparent, #15161b 28%);
  }

  .global-auth-page.is-variant-2 .global-auth-panel {
    border-inline-start: 0;
    border-top: 1px solid #e4e4e1;
    background: #f7f7f5;
  }

  .global-auth-header {
    position: fixed;
    top: 18px;
    inset-inline-end: 18px;
  }

  .global-auth-card {
    width: min(100%, 420px);
  }

  .global-auth-card h2 {
    font-size: 32px;
  }

  .global-auth-card small {
    max-width: 360px;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-auth-actions button,
  .global-auth-legal a {
    transition: none;
  }
}