:root {
  --color-bg: #f6f7f8;
  --color-surface: #ffffff;
  --color-surface-muted: #f1f4f6;
  --color-border: #d8dee4;
  --color-border-subtle: #e6ebef;
  --color-text: #172026;
  --color-text-muted: #5d6b78;
  --color-text-subtle: #8a96a3;
  --color-primary: #155e75;
  --color-primary-hover: #164e63;
  --color-focus: #2563eb;
  --color-danger: #b91c1c;
  --color-danger-hover: #991b1b;
  --color-warning: #b45309;
  --color-warning-bg: #fff7ed;
  --color-warning-border: #fed7aa;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 13px;
  --font-size-lg: 15px;
  --font-size-xl: 22px;
  --font-size-metric: 22px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-7: 28px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --dialog-w-sm: 480px;
  --dialog-w-md: 640px;
  --dialog-w-lg: 840px;
  --drawer-w: 560px;
  --color-success: #047857;
  --color-success-bg: #ecfdf5;
  --color-info: #1d4ed8;
  --color-info-bg: #eff6ff;
  --color-danger-bg: #fef2f2;
  --color-neutral: #64748b;
  --color-neutral-bg: #f1f5f9;
  --color-row-hover: #f9fbfc;
  --color-primary-soft: #e8f3f6;
  --color-primary-soft-hover: #d6edf3;
  --color-primary-soft-border: #c8e3e9;
  --color-primary-soft-strong: #9bc7d3;
  --color-primary-deep: #0f3a4d;
  --color-info-soft: #e0e7ff;
  --table-cell-py: 8px;
  --table-cell-px: 9px;
  --table-line-height: 18px;

  color: var(--color-text);
  background: var(--color-bg);
  font-family:
    Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: 21px;
}

#app {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  height: 100vh;
  overflow-y: auto;
  padding: var(--space-5) 14px;
  position: sticky;
  top: 0;
}

.brand {
  display: grid;
  gap: var(--space-2);
  padding: 2px var(--space-2) var(--space-7);
}

.brand strong {
  font-size: 17px;
  font-weight: 750;
  line-height: 24px;
}

.brand span,
.page-header p,
.metric span,
li {
  color: var(--color-text-muted);
}

nav {
  display: grid;
  gap: var(--space-4);
}

.brand + nav {
  margin-top: var(--space-3);
}

.nav-group {
  display: grid;
  gap: 2px;
}

.nav-group h2 {
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 18px;
  margin: 0;
  padding: 0 var(--space-2) 2px;
}

.nav-item {
  align-items: center;
  border-radius: var(--radius-sm);
  color: inherit;
  display: flex;
  font-size: var(--font-size-sm);
  gap: var(--space-2);
  justify-content: space-between;
  min-height: 32px;
  padding: 6px var(--space-2);
  text-decoration: none;
}

a.nav-item:hover {
  background: var(--color-surface-muted);
}

.nav-item.is-active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 650;
}

.nav-item small {
  border: 1px solid var(--color-primary-soft-border);
  border-radius: 999px;
  color: var(--color-primary);
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  padding: 0 6px;
}

.nav-item-disabled {
  color: var(--color-text-subtle);
  cursor: not-allowed;
  opacity: 0.68;
}

.nav-item-disabled small {
  border-color: var(--color-border);
  color: var(--color-text-subtle);
}

.nav-item-disabled[data-phase="p0c"] {
  opacity: 0.48;
}

.nav-subitems {
  display: grid;
  gap: 2px;
  margin: 2px 0 6px;
}

.nav-subitem {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  display: flex;
  font-size: var(--font-size-sm);
  gap: var(--space-2);
  justify-content: space-between;
  line-height: 20px;
  padding: 7px 10px;
  text-decoration: none;
}

.nav-subitem small {
  border: 1px solid var(--color-primary-soft-border);
  border-radius: 999px;
  color: var(--color-primary);
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  padding: 0 6px;
}

.nav-subitem:hover {
  background: var(--color-surface-muted);
  color: var(--color-primary-hover);
}

.nav-subitem.is-active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 650;
}

.nav-item:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.workspace {
  min-width: 0;
  padding: 0;
}

.workspace-customers {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100vh;
}

.workspace-header {
  margin-bottom: var(--space-3);
}

.route-context {
  align-items: center;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: 10px 12px;
}

.route-context strong,
.route-context span {
  font-size: var(--font-size-sm);
  line-height: 20px;
}

.route-context strong {
  color: var(--color-text-muted);
  font-weight: 600;
}

.workspace-tabs {
  border-bottom: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.customer-workspace-toolbar {
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: auto minmax(260px, 1fr) auto;
  margin-bottom: var(--space-5);
  padding: var(--space-4);
}

.customer-workspace-toolbar .workspace-tabs {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.customer-workspace-toolbar .filter-panel {
  border: 0;
  margin-bottom: 0;
  min-width: 0;
  padding: 0;
}

.customer-workspace-toolbar .filter-control {
  flex: 1 1 auto;
  justify-content: flex-end;
  width: auto;
}

.customer-workspace-toolbar .filter-control-field {
  justify-content: flex-end;
  width: auto;
}

.customer-workspace-toolbar .filter-control-field span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.customer-workspace-toolbar .filter-control-field input,
.customer-workspace-toolbar .filter-control-field select {
  background: var(--color-surface-muted);
  max-width: 310px;
  text-align: right;
  width: 310px;
}

.customer-workspace-toolbar .filter-panel[data-filter-page="customers"] .filter-control,
.customer-workspace-toolbar .filter-panel[data-filter-page="apiKeys"] .filter-control {
  max-width: 450px;
  margin-left: auto;
}

.customer-workspace-toolbar .filter-panel[data-filter-page="customers"] .filter-control-field input,
.customer-workspace-toolbar .filter-panel[data-filter-page="customers"] .filter-control-field select,
.customer-workspace-toolbar .filter-panel[data-filter-page="apiKeys"] .filter-control-field input,
.customer-workspace-toolbar .filter-panel[data-filter-page="apiKeys"] .filter-control-field select {
  max-width: 310px;
}

.page-shell-customers .customer-workspace-toolbar {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
}

.model-workspace-toolbar {
  grid-template-columns: auto minmax(260px, 1fr) auto;
}

.model-workspace-toolbar .workspace-tabs {
  max-width: 470px;
}

.model-workspace-toolbar .filter-control {
  max-width: 450px;
  margin-left: auto;
}

.model-workspace-toolbar .filter-control-field input,
.model-workspace-toolbar .filter-control-field select {
  max-width: 310px;
  width: 310px;
}

.workspace-tab {
  align-items: center;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--font-size-sm);
  font-weight: 650;
  gap: var(--space-2);
  justify-content: center;
  min-height: 34px;
  min-width: 96px;
  padding: 6px 12px;
  text-decoration: none;
}

.workspace-tab:hover {
  background: var(--color-surface-muted);
  color: var(--color-primary-hover);
}

.workspace-tab.is-active {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-soft-border);
  color: var(--color-primary);
}

.workspace-tab small {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-subtle);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  padding: 0 6px;
}

.workspace-controls {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.workspace-controls .filter-panel {
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  margin-bottom: 0;
  min-width: 0;
}

.workspace-controls .filter-chip-row {
  flex: 0 1 auto;
  min-width: 0;
}

.workspace-controls .filter-control {
  flex: 0 1 360px;
  margin-left: auto;
}

.concept-guide {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--space-4);
}

.concept-guide article {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: var(--space-3);
}

.concept-guide strong {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
}

.concept-guide span {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 18px;
}

.page-shell-customers .concept-guide {
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.page-shell-customers .concept-guide article {
  padding: var(--space-4);
}

.topbar {
  align-items: center;
  background: rgb(255 255 255 / 94%);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  min-height: 72px;
  padding: 14px var(--space-7);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-compact {
  justify-content: flex-end;
  min-height: 40px;
  padding-bottom: 6px;
  padding-top: 6px;
}

.topbar p {
  color: var(--color-text-muted);
  margin-top: 2px;
}

.topbar-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.env-pill,
.admin-pill {
  align-items: center;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  display: inline-flex;
  min-height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}

.page-shell {
  padding: var(--space-7);
}

.page-shell-customers {
  padding: var(--space-7);
}

.page-shell-customers .workspace-header {
  margin-bottom: var(--space-5);
}

.page-shell-customers .page-header h2 {
  margin-bottom: 14px;
}

.page-header {
  align-items: center;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: var(--font-size-xl);
  line-height: 30px;
}

h2 {
  font-size: var(--font-size-lg);
  line-height: 24px;
  margin-bottom: 14px;
}

h3 {
  font-size: var(--font-size-md);
  line-height: 22px;
  margin: 0 0 10px;
}

.metrics {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: var(--space-5);
}

.metrics-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0;
}

.metrics-dashboard {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-top-grid {
  align-items: stretch;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  margin-bottom: var(--space-5);
}

.dashboard-top-grid .metrics-dashboard {
  margin-bottom: 0;
}

.metric,
.work-grid article,
.panel,
.table-card,
.filter-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.metric {
  display: grid;
  gap: 10px;
}

.metric strong {
  font-size: var(--font-size-metric);
  line-height: 30px;
}

.metric small {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 18px;
}

.metric em {
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 650;
}

.metric-compact strong {
  font-size: var(--font-size-lg);
  line-height: 24px;
}

.dashboard-notice-panel {
  align-content: start;
  gap: var(--space-2);
}

.dashboard-notice-panel .panel-header h3 {
  margin-bottom: 0;
}

.notice-list {
  display: grid;
  gap: var(--space-2);
}

.notice-item {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px;
}

.notice-item p {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: 18px;
}

.notice-item time {
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
  line-height: 18px;
  margin-left: 8px;
  white-space: nowrap;
}

.work-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-bottom: var(--space-5);
}

.work-grid-single {
  grid-template-columns: 1fr;
}

.panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.dashboard-notice-panel {
  gap: var(--space-2);
}

.finance-panel {
  margin-bottom: var(--space-5);
}

.quick-actions-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
}

.dashboard-operations-grid {
  align-items: stretch;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr);
  margin-bottom: var(--space-5);
}

.dashboard-operations-grid > .quick-actions-panel {
  height: 100%;
  margin-bottom: 0;
}

.dashboard-operations-grid > .quick-actions-panel:not(.customer-ranking-panel) {
  align-content: start;
  gap: var(--space-2);
}

.dashboard-operations-grid > .quick-actions-panel:not(.customer-ranking-panel) .panel-header {
  margin-bottom: 0;
}

.dashboard-top-grid .panel-header h3,
.dashboard-operations-grid .panel-header h3,
.dashboard-grid .panel-header h3,
.dashboard-section-title {
  font-size: var(--font-size-lg);
  line-height: 24px;
}

.quick-actions-list {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quick-action-card {
  align-items: center;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  display: inline-flex;
  justify-content: center;
  min-height: 34px;
  padding: 6px 8px;
  text-align: center;
  text-decoration: none;
}

.quick-action-card:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-soft-strong);
  color: var(--color-primary);
}

.quick-action-card strong {
  font-size: var(--font-size-sm);
}

.quick-action-card span {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 18px;
}

.customer-ranking-panel {
  margin-bottom: 0;
}

.segmented-control {
  align-items: center;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: inline-flex;
  gap: 2px;
  padding: 3px;
}

.segment-button {
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  min-height: 30px;
  padding: 5px 10px;
}

.segment-button:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.segment-button.is-active,
.segment-button[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-surface);
}

.customer-ranking-table .table-card {
  max-height: none;
}

.customer-ranking-table table {
  table-layout: fixed;
}

.customer-ranking-table th:first-child,
.customer-ranking-table td:first-child {
  white-space: nowrap;
  width: 54px;
}

.customer-ranking-table th:nth-child(2),
.customer-ranking-table td:nth-child(2) {
  width: 34%;
}

.dashboard-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.dashboard-alerts,
.dashboard-table-panel {
  gap: var(--space-3);
  grid-column: 1 / -1;
}

.dashboard-section-title {
  margin: 0;
  text-align: left;
}

.dashboard-table-panel > .panel-note,
.dashboard-alerts > .panel-note {
  margin: 0;
  text-align: left;
}

.chart-panel {
  align-content: start;
  display: grid;
  grid-template-rows: 36px 74px 40px auto;
  min-height: auto;
}

.chart-summary {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trend-period-control {
  flex: 0 0 auto;
}

.chart-summary span {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 6px;
  grid-template-rows: 16px 24px;
  min-width: 0;
  padding: var(--space-2);
}

.chart-summary small {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 16px;
}

.chart-summary strong {
  color: var(--color-text);
  font-size: var(--font-size-md);
  line-height: 24px;
}

.panel-note {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 18px;
}

.trend-note {
  min-height: 36px;
}

.trend-table .table-card {
  max-height: none;
}

.trend-table th,
.trend-table td {
  height: 42px;
}

.sub-panel {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-3);
  padding: 14px;
}

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

/* 去重复标题后只剩操作按钮的面板头(如公告页):按钮靠右 */
.panel-header--actions {
  justify-content: flex-end;
}

.section-header {
  align-items: start;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.sub-panel p {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.filter-row,
.action-row,
.category-row,
.filter-panel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-panel {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
}

.filter-panel-header-driven {
  justify-content: flex-end;
}

.filter-chip-row {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-control {
  align-items: center;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  display: inline-flex;
  flex: 0 1 520px;
  gap: var(--space-2);
  min-height: 30px;
  padding: 5px 10px;
}

.filter-control-field {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
}

.filter-control-field span {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 650;
}

.filter-control-field input,
.filter-control-field select {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: inherit;
  min-height: 28px;
  min-width: min(360px, 52vw);
  padding: 4px 8px;
  width: 100%;
}

.customer-workspace-toolbar .filter-panel[data-filter-page="customers"] .filter-control-field input,
.customer-workspace-toolbar .filter-panel[data-filter-page="customers"] .filter-control-field select,
.customer-workspace-toolbar .filter-panel[data-filter-page="apiKeys"] .filter-control-field input,
.customer-workspace-toolbar .filter-panel[data-filter-page="apiKeys"] .filter-control-field select {
  max-width: 310px;
  min-width: min(310px, 42vw);
  width: 310px;
}

.category-row {
  margin-top: calc(var(--space-1) * -1);
}

.filter-help {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-top: calc(var(--space-2) * -1);
}

.action-strip {
  align-items: center;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
}

.action-strip > span {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

.filter-chip {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  display: inline-flex;
  font-size: var(--font-size-sm);
  font-weight: 650;
  justify-content: center;
  min-height: 34px;
  min-width: 96px;
  padding: 6px 12px;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease;
  white-space: normal;
}

.filter-chip:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-soft-strong);
  color: var(--color-primary);
}

.filter-chip:active {
  background: var(--color-primary-soft-hover);
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
}

.filter-chip.is-active,
.filter-chip[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 1px 0 rgb(21 94 117 / 12%);
  color: #ffffff;
  font-weight: 650;
}

.filter-chip.is-active:hover,
.filter-chip[aria-pressed="true"]:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #ffffff;
}

.category-chip {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  color: var(--color-text-muted);
  display: inline-flex;
  font-size: var(--font-size-sm);
  min-height: 28px;
  padding: 5px 10px;
}

.table-wrap {
  max-height: inherit;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
}

.table-card {
  max-height: calc(100vh - 310px);
  min-width: 0;
  padding: 0;
}

.table-card-header {
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  padding: 6px var(--space-4);
}

.table-card-header h3 {
  flex: 0 0 auto;
  color: var(--color-text);
  font-size: var(--font-size-lg);
  line-height: 24px;
  margin: 0;
}

.table-title-links {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.table-title-link {
  align-items: center;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  display: inline-flex;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 650;
  min-height: 34px;
  min-width: 96px;
  justify-content: center;
  padding: 6px 12px;
  text-decoration: none;
  white-space: nowrap;
}

.table-title-link small {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-subtle);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  padding: 0 6px;
}

.table-title-link:hover {
  color: var(--color-primary-hover);
}

.table-title-link.is-active {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-soft-border);
  color: var(--color-primary);
}

.table-title-link.is-disabled {
  color: var(--color-text-subtle);
  cursor: not-allowed;
}

.table-card-embedded {
  max-height: 360px;
  overflow: hidden;
}

.table-card-embedded table {
  min-width: 0;
}

.page-shell-modelCatalog .table-card-modelCatalog table,
.page-shell-modelCatalog .table-card-modelPrices table,
.page-shell-modelCatalog .table-card-modelAccess table,
.page-shell-modelCatalog .table-card-serviceHealth table {
  min-width: 0;
  table-layout: fixed;
  width: 100%;
}

.page-shell-modelCatalog .table-card-modelCatalog th,
.page-shell-modelCatalog .table-card-modelCatalog td,
.page-shell-modelCatalog .table-card-modelPrices th,
.page-shell-modelCatalog .table-card-modelPrices td,
.page-shell-modelCatalog .table-card-modelAccess th,
.page-shell-modelCatalog .table-card-modelAccess td,
.page-shell-modelCatalog .table-card-serviceHealth th,
.page-shell-modelCatalog .table-card-serviceHealth td {
  font-size: var(--font-size-sm);
  line-height: 18px;
  overflow: hidden;
  overflow-wrap: normal;
  padding: 7px 8px;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.page-shell-modelCatalog .table-card-modelCatalog th,
.page-shell-modelCatalog .table-card-modelPrices th,
.page-shell-modelCatalog .table-card-modelAccess th,
.page-shell-modelCatalog .table-card-serviceHealth th {
  height: 48px;
}

.page-shell-modelCatalog .table-card-modelCatalog th .column-title,
.page-shell-modelCatalog .table-card-modelPrices th .column-title,
.page-shell-modelCatalog .table-card-modelAccess th .column-title,
.page-shell-modelCatalog .table-card-serviceHealth th .column-title {
  align-items: center;
  display: inline-flex;
  min-height: 18px;
}

.table-card-modelRanking th:first-child,
.table-card-modelRanking td:first-child,
.table-card-exceptionAlerts th:first-child,
.table-card-exceptionAlerts td:first-child {
  padding-left: 14px;
  padding-right: 14px;
  text-align: left;
}

.table-card-modelRanking table,
.table-card-exceptionAlerts table {
  table-layout: auto;
}

.table-card-modelRanking th,
.table-card-exceptionAlerts th {
  overflow-wrap: normal;
  white-space: nowrap;
}

.dashboard-table-panel th,
.dashboard-alerts th {
  padding-bottom: 10px;
  padding-top: 10px;
  text-align: left;
  vertical-align: middle;
}

.dashboard-table-panel td,
.dashboard-alerts td {
  padding-bottom: 9px;
  padding-top: 9px;
  vertical-align: middle;
}

.dashboard-table-panel th .column-title,
.dashboard-alerts th .column-title {
  min-height: 18px;
}

/* 表格规范：行高/内边距/表头字重引用令牌，各页不覆写；需自适应列宽的表覆写 table-layout:auto。 */
table {
  border-collapse: collapse;
  min-width: 0;
  table-layout: fixed;
  width: 100%;
}

.action-column {
  width: 132px;
}

.compact-table {
  min-width: 520px;
}

th,
td {
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-sm);
  line-height: var(--table-line-height);
  overflow-wrap: anywhere;
  padding: var(--table-cell-py) var(--table-cell-px);
  text-align: left;
  vertical-align: top;
  white-space: normal;
}

.table-card-customers table,
.table-card-apiKeys table {
  min-width: 0;
  table-layout: fixed;
  width: 100%;
}

.table-card-customers th,
.table-card-customers td,
.table-card-apiKeys th,
.table-card-apiKeys td {
  font-size: var(--font-size-sm);
  line-height: 18px;
  overflow: hidden;
  overflow-wrap: normal;
  padding: 7px 8px;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.table-unit-note {
  background: var(--color-surface);
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
  line-height: 18px;
  padding: 8px 12px;
}

.page-shell-customers .table-card-customers,
.page-shell-customers .table-card-apiKeys {
  max-height: none;
}

.page-shell-customers .table-card-customers .table-wrap,
.page-shell-customers .table-card-apiKeys .table-wrap {
  overflow-x: auto;
  overflow-y: visible;
}

.page-shell-customers .table-unit-note {
  padding: 8px 12px;
}

th {
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}

.table-card-customers th,
.table-card-apiKeys th {
  box-sizing: border-box;
  height: 48px;
  line-height: 18px;
  padding: 8px 9px;
  vertical-align: middle;
}

.table-card-customers th .column-title,
.table-card-apiKeys th .column-title {
  align-items: center;
  display: inline-flex;
  min-height: 18px;
}

.table-header-filter {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  display: inline-flex;
  font-size: var(--font-size-sm);
  font-weight: 600;
  justify-content: flex-start;
  line-height: 18px;
  min-height: 0;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: currentcolor;
  text-underline-offset: 3px;
}

.table-header-filter:hover {
  background: transparent;
  color: var(--color-primary);
  text-decoration-color: currentcolor;
}

.table-detail-link {
  background: transparent;
  border: 0;
  color: var(--color-primary);
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.table-detail-link:hover {
  color: var(--color-primary-hover);
}

tbody tr:hover {
  background: var(--color-row-hover);
}

/* 徽章规范：全站状态色只用 success/warning/danger/info/neutral 五类，不得页面自配十六进制。 */
.status-tag {
  border-radius: 999px;
  display: inline-flex;
  font-size: var(--font-size-xs);
  font-weight: 650;
  line-height: 18px;
  padding: 2px 8px;
  white-space: nowrap;
}

.status-success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.status-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.status-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.status-info {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.status-neutral {
  background: var(--color-neutral-bg);
  color: var(--color-neutral);
}

.system-setting-row {
  align-items: center;
  display: flex;
  gap: 12px;
}

.admin-change-password {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.admin-change-password__input {
  min-width: 200px;
  padding: 8px 10px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
}

.table-select {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: inherit;
  min-height: 30px;
  min-width: 0;
  padding: 5px 8px;
  width: 100%;
}

.table-action-select {
  min-width: 0;
}

.model-list-select {
  min-width: 168px;
}

button {
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-surface);
  cursor: pointer;
  font: inherit;
  min-height: 32px;
  padding: 6px 10px;
}

button:hover {
  background: var(--color-primary-hover);
}

.button-primary {
  background: var(--color-primary);
  color: var(--color-surface);
}

.button-danger {
  background: var(--color-danger);
  color: var(--color-surface);
}

.button-danger:hover {
  background: var(--color-danger-hover);
}

.button-quiet {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.button-quiet:hover {
  background: var(--color-surface-muted);
}

.button-compact {
  min-height: 30px;
  white-space: nowrap;
}

.pagination-bar {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-2);
}

.pagination-bar div {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.page-shell-customers .pagination-bar {
  flex: 0 0 auto;
}

.customer-list-footer,
.workspace-list-footer {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  margin-top: var(--space-2);
}

.customer-list-footer .pagination-bar,
.workspace-list-footer .pagination-bar {
  flex: 0 0 auto;
  margin-top: 0;
}

.customer-list-footer .risk-note,
.workspace-list-footer .risk-note {
  flex: 1 1 auto;
  margin-top: 0;
  min-width: 0;
  white-space: nowrap;
}

.risk-note {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
}

.page-shell-customers .risk-note {
  flex: 0 0 auto;
  font-size: var(--font-size-xs);
  line-height: 18px;
}

.modal-region {
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 40;
}

.modal-backdrop {
  align-items: center;
  background: rgb(17 24 39 / 34%);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: var(--space-5);
  pointer-events: auto;
  position: absolute;
}

/* 弹窗规范：宽度只用三档令牌（sm=确认/单字段, md=普通表单, lg=宽表格/预览），
   页面不得自定义宽度。结构 header/正文/footer；footer 按钮右对齐、主操作最右。
   表单字段一律纵排（grid 单列），容器不用 align-items:end（会挤右，用 stretch）。 */
.operation-dialog {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 70px rgb(23 32 38 / 22%);
  display: grid;
  gap: var(--space-4);
  max-width: min(var(--dialog-w-sm), 100%);
  padding: var(--space-5);
  width: 100%;
}

.operation-dialog header,
.operation-dialog footer {
  align-items: start;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.operation-dialog header[data-dialog-drag-handle] {
  cursor: move;
  user-select: none;
}

.operation-dialog-dragging {
  cursor: move;
}

.operation-dialog header p,
.operation-dialog > p {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 20px;
}

.operation-dialog header:has(:only-child) {
  justify-content: flex-start;
}

.operation-dialog footer {
  justify-content: flex-end;
}

.detail-grid {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  display: grid;
  overflow: hidden;
}

.detail-row {
  border-bottom: 1px solid var(--color-border-subtle);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 120px minmax(0, 1fr);
  padding: 10px 12px;
}

.detail-row:last-child {
  border-bottom: 0;
}

.detail-row span {
  color: var(--color-text-muted);
}

.detail-row strong {
  color: var(--color-text);
  font-weight: 650;
}

.detail-row-extra {
  background: var(--color-surface-muted);
}

.operation-dialog-md {
  max-height: min(86vh, 760px);
  max-width: min(var(--dialog-w-md), 100%);
  overflow: auto;
}

/* 抽屉规范：右侧滑入全高，宽 --drawer-w；结构 drawer-header(固定)/drawer-body(弹性滚动)/
   drawer-footer(吸底)。关闭方式：Esc/点遮罩/关闭按钮(data-dialog-close)。不做拖动。 */
.drawer-backdrop {
  background: rgb(23 32 38 / 32%);
  display: flex;
  inset: 0;
  justify-content: flex-end;
  position: fixed;
  z-index: 30;
}

.drawer {
  animation: drawer-in 160ms ease-out;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: -24px 0 70px rgb(23 32 38 / 18%);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100dvh;
  max-width: 100%;
  outline: none;
  width: var(--drawer-w);
}

@keyframes drawer-in {
  from {
    opacity: 0.6;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.drawer-header {
  align-items: start;
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
}

.drawer-header h2 {
  font-size: var(--font-size-lg);
  line-height: 22px;
  margin: 0;
}

.drawer-header p {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin: 4px 0 0;
}

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

.drawer-body {
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
}

.drawer-footer {
  border-top: 1px solid var(--color-border-subtle);
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) var(--space-4);
}

.drawer-footer .button-primary {
  justify-self: end;
}

.operation-dialog-wide {
  max-height: min(86vh, 760px);
  max-width: min(var(--dialog-w-lg), 100%);
  overflow: auto;
}

.form-preview,
.workflow-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-registration-form,
.workflow-grid-single {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

.form-preview label,
.workflow-field {
  display: grid;
  gap: 6px;
}

.form-preview span,
.workflow-field span,
.workflow-section h3 {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 650;
}

.form-preview input,
.workflow-field input,
.workflow-field select,
.workflow-field textarea {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font: inherit;
  min-height: 34px;
  padding: 7px 9px;
}

.workflow-field textarea {
  min-height: 120px;
  resize: vertical;
}

.field-help {
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
  line-height: 18px;
}

.workflow-field-wide {
  grid-column: 1 / -1;
}

.workflow-select-row {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.workflow-select-row select {
  flex: 1 1 auto;
  min-width: 0;
}

.workflow-preview {
  display: grid;
  gap: var(--space-2);
}

.workflow-section {
  display: grid;
  gap: var(--space-3);
}

.system-field-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.system-field {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 650;
  line-height: 18px;
  padding: 4px 9px;
}

.operation-guidance {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
}

.operation-guidance strong {
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.operation-guidance ol {
  margin: 0;
  padding-left: 18px;
}

.operation-guidance li {
  font-size: var(--font-size-sm);
  line-height: 20px;
}

.dialog-notes {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
}

.column-title {
  display: inline-grid;
  gap: 1px;
}

.column-title small {
  color: var(--color-text-subtle);
  font-size: 11px;
  font-weight: 500;
}

.dialog-status {
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: var(--font-size-xs);
  font-weight: 650;
  line-height: 18px;
  padding: 3px 9px;
}

.operation-dialog[data-kind="completed"] .dialog-status {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.operation-dialog[data-kind="blocked"] .dialog-status {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.operation-dialog[data-kind="network"] .dialog-status {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.requirement-box {
  align-items: center;
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-2);
  padding: 14px;
}

.requirement-box strong,
.compact-notice strong {
  color: var(--color-warning);
  flex: 0 0 auto;
  font-size: var(--font-size-sm);
}

.requirement-box span,
.compact-notice span {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.compact-notice {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

ul {
  margin: 0;
  padding-left: 18px;
}

li + li {
  margin-top: 10px;
}

@media (max-width: 1023px) {
  #app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-bottom: 1px solid var(--color-border);
    border-right: 0;
    height: auto;
    position: static;
  }

  .metrics,
  .metrics-compact,
  .metrics-dashboard,
  .dashboard-top-grid,
  .quick-actions-grid,
  .concept-guide,
  .work-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .topbar {
    position: static;
  }
}

@media (max-width: 520px) {
  .dashboard-operations-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  .sidebar,
  .page-shell,
  .topbar {
    padding: var(--space-4);
  }

  .page-header,
  .table-card-header,
  .panel-header,
  .section-header,
  .action-strip,
  .workspace-controls,
  .requirement-box,
  .topbar,
  .pagination-bar,
  .operation-dialog header,
  .operation-dialog footer {
    align-items: stretch;
    flex-direction: column;
  }

  .form-preview,
  .workflow-grid {
    grid-template-columns: 1fr;
  }

  .workspace-controls .filter-panel,
  .workspace-controls .filter-chip-row,
  .table-title-links {
    flex-wrap: wrap;
  }

  .workspace-controls .filter-control {
    flex-basis: 100%;
    margin-left: 0;
  }

  .nav-item,
  button {
    min-height: 40px;
  }

  th,
  td {
    font-size: var(--font-size-xs);
    line-height: 17px;
    padding: 7px 6px;
  }

  .action-column {
    width: 116px;
  }
}

/* ---- 管理员登录页 ---- */
.login-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--color-surface-muted);
  /* 登录页复用 #app(其为侧边栏 grid),让登录容器横跨整行才能真正居中 */
  grid-column: 1 / -1;
}

.login-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 340px;
  padding: 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20, 40, 80, 0.08);
}

.login-card h1 {
  margin: 0;
  font-size: 20px;
}

.login-subtitle {
  margin: 0 0 8px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.login-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.login-card input {
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
}

.login-error {
  min-height: 18px;
  margin: 0;
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}

/* ---- 模型授权真数据视图 ---- */
.live-status {
  min-height: 18px;
  margin: 6px 0;
  color: var(--color-focus);
  font-size: var(--font-size-sm);
}

.live-grant-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  margin-top: 16px;
  padding: 16px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
}

.live-grant-form h4 {
  grid-column: 1 / -1;
  margin: 0;
}

.live-grant-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--font-size-xs);
  color: var(--color-text);
}

.live-grant-form input,
.live-grant-form select {
  padding: 8px 9px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: var(--font-size-sm);
}

/* ---- 真数据视图筛选行 ---- */
.live-filter-row {
  display: flex;
  gap: 10px;
  margin: 10px 0 14px;
}

.live-filter-row input,
.live-filter-row select {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: var(--font-size-sm);
  min-width: 220px;
}

.live-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.live-checkbox input {
  min-width: auto;
}

/* ---- 客户 360 ---- */
.customer-360 .health-band {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  margin-bottom: 16px;
}

.customer-360 .health-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.customer-360 .health-identity strong {
  font-size: 18px;
}

.customer-360 .health-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--color-text);
  font-size: 14px;
}

.customer-360 .health-actions {
  display: flex;
  gap: 8px;
}

.customer-360 .c360-section {
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
  margin-bottom: 12px;
  background: var(--color-surface);
}

.customer-360 .c360-section > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 600;
  list-style: none;
}

.customer-360 .c360-section > summary::-webkit-details-marker {
  display: none;
}

.customer-360 .c360-section-body {
  padding: 4px 16px 16px;
}

.customer-360 .c360-section-body h4 {
  margin: 14px 0 6px;
}

.recon-ack-row { display: flex; align-items: center; gap: 10px; padding: 4px 16px 8px; }
.recon-ack { font-size: var(--font-size-xs); }
.recon-ack--none { color: var(--color-danger); font-weight: 600; }
.recon-ack--ok { color: var(--color-success); }
.recon-ack--stale { color: var(--color-warning); font-weight: 600; }

/* 排行榜：排名列收窄，空间让给模型名/客户名等主体列 */
.ranking-rank-col {
  width: 48px;
  text-align: center;
}

/* 服务状态等长列表的前端分页栏 */
.live-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ===== 今日页（today-live）===== */
.dashboard-quick-entries {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.dashboard-quick-entries a {
  text-decoration: none;
}

.today-live {
  display: grid;
  gap: 16px;
}

.today-panel {
  padding: 16px;
}

.today-todos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

.today-todo {
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
  background: var(--color-surface);
  padding: 12px 14px;
  min-width: 0;
}

.today-todo h4 {
  margin: 0 0 4px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.today-todo > p {
  margin: 0 0 8px;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.today-badge {
  display: inline-block;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--color-danger-bg);
  color: var(--color-danger);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-align: center;
}

.today-todo-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow-y: auto;
}

.today-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.today-item:hover {
  background: var(--color-neutral-bg);
}

.today-item em {
  font-style: normal;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.today-more {
  margin: 4px 8px 0;
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
}

.today-empty {
  margin: 0;
  padding: 6px 8px;
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

/* 链接套按钮样式:补齐 button 元素选择器不覆盖 a 的盒模型 */
a.button-quiet,
a.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

/* ===== 后台工单：列表与弹框 ===== */
.ticket-row {
  cursor: pointer;
}

.ticket-unread {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-danger-bg);
  color: var(--color-danger);
  font-size: var(--font-size-xs);
}

.ticket-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ticket-thread-empty {
  color: var(--color-text-subtle);
  margin: 8px 0;
}

.ticket-msg {
  max-width: 85%;
  align-self: flex-start;
  background: var(--color-neutral-bg);
  border-radius: 10px;
  padding: 8px 12px;
}

.ticket-msg--support {
  align-self: flex-end;
  background: var(--color-info-soft);
}

.ticket-msg-meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.ticket-msg-body {
  white-space: pre-wrap;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.ticket-reply-input {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}


/* 服务状态操作列:按钮横排换行,不再竖排占满行高 */
#channels-live table {
  table-layout: auto;
}

td.channel-actions {
  min-width: 220px;
  white-space: normal;
}

td.channel-actions button {
  display: inline-block;
  margin: 2px 4px 2px 0;
}

/* 模型目录厂商筛选 chips */
.vendor-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 12px;
}

.vendor-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.vendor-chip span {
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
}

.vendor-chip.is-active {
  background: var(--color-primary-deep);
  border-color: var(--color-primary-deep);
  color: #fff;
}

.vendor-chip.is-active span {
  color: var(--color-border);
}

.vendor-chip:hover:not(.is-active) {
  background: var(--color-surface-muted);
}

/* 文字链接式按钮:表格行内操作不再用底色按钮 */
button.link-button {
  background: transparent;
  border: 0;
  color: var(--color-primary);
  cursor: pointer;
  padding: 0;
  min-height: 0;
  font-size: var(--font-size-sm);
  margin-right: 10px;
}

button.link-button:hover {
  background: transparent;
  text-decoration: underline;
}

/* 「运营管理后台」从品牌区下移到导航区顶部(今日上方) */
.nav-surface-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  margin: 14px 2px 6px;
}

/* 创建公告弹窗:正文放大与字数提示 */
.announcement-dialog-form textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font: inherit;
}

.announce-count {
  font-style: normal;
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
  margin-left: 8px;
}

/* 弹窗表单通用纵排:字段从上到下(覆盖 live-grant-form 的四列网格);公告/新建客户共用 */
.announcement-dialog-form,
.dialog-form-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* 覆盖 live-grant-form 网格的 align-items:end,否则字段挤到右侧 */
  gap: 12px;
  margin-top: 12px;
  min-width: 460px;
}

.announcement-dialog-form label,
.dialog-form-stack label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.announcement-dialog-form input,
.announcement-dialog-form select,
.dialog-form-stack input,
.dialog-form-stack select {
  width: 100%;
  box-sizing: border-box;
}

.announcement-dialog-form footer,
.dialog-form-stack footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* hidden 属性必须永远生效:display:grid/flex 等作者样式会压过 UA 的 hidden,已连坑三次(portal-keynew/sub-panel),全局兜底 */
[hidden] {
  display: none !important;
}

/* 兑换券批次明细弹窗:码表限高滚动 */
.voucher-detail-dialog .voucher-detail-scroll {
  max-height: 56vh;
  overflow-y: auto;
  margin-top: 8px;
}

/* 通用列表筛选条(时间范围+关键词+查询) */
.list-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin: 4px 0 12px;
}

.list-filter__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.list-filter__field input {
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
}

/* ---- 合作联盟页(#/finance/partners):四块表单卡片式网格,防拥挤 ---- */
#partners-live .segmented-control {
  margin: 4px 0 16px;
}

#partners-live .sub-panel + .sub-panel {
  margin-top: 20px;
}

.partner-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px 18px;
  align-items: end;
  margin-top: 12px;
  padding: 18px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
}

.partner-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--font-size-xs);
  color: var(--color-text);
}

.partner-form input,
.partner-form select {
  padding: 8px 9px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: var(--font-size-sm);
  background: var(--color-surface);
}

.partner-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  grid-column: 1 / -1;
}

/* 邮箱查找按钮+结果与邮箱输入框同排语义,不占整行 */
.partner-form-actions.partner-form-inline {
  grid-column: auto;
}

.partner-form-actions button {
  padding: 8px 18px;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.partner-form-actions button[type="button"] {
  background: var(--color-surface);
  color: var(--color-text);
}

.partner-form-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.partner-form-actions p {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* 筛选行更紧凑,不需要卡片底色 */
.partner-form.partner-form-filter {
  background: transparent;
  border: none;
  padding: 4px 0 8px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* 开户行信息等长文本字段:占满整行 + 多行输入 */
.partner-form .partner-form-wide {
  grid-column: 1 / -1;
}

.partner-form textarea {
  padding: 8px 9px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: var(--font-size-sm);
  background: var(--color-surface);
  font-family: inherit;
  resize: vertical;
  min-height: 64px;
}

/* ---- 全局留白瘦身(2026-07-09 用户反馈):空状态提示不占位 + 页头到内容收紧 ---- */
.live-status:empty {
  display: none;
  margin: 0;
}

.workspace-header p {
  margin-bottom: 0;
}

/* ---- 页内快捷入口:列表下方的功能区(如"创建人工充值")一键直达,挂页标题右侧 ---- */
.page-quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-self: flex-end;
}

/* 无页头的页面:独立按钮行,贴内容右上 */
.page-quick-nav-floating {
  margin: 0 0 10px;
}

.page-quick-nav button {
  padding: 5px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  cursor: pointer;
  white-space: nowrap;
}

.page-quick-nav button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* 快捷入口按钮:分区标题过长时截断 */
.page-quick-nav button {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 渠道页配置流程指引(0.1.151) */
.channel-flow-guide { margin-bottom: 16px; }
.channel-flow-guide h4 { margin-bottom: 8px; }
.channel-flow-guide__steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.channel-flow-guide__steps li { line-height: 1.6; color: var(--text-secondary, #5d6b7a); }