/* ui501: cohesive PC cockpit layer. Keep the visual hierarchy in one place. */
:root {
  --ui501-bg: #071017;
  --ui501-surface: #0d1b24;
  --ui501-raised: #112631;
  --ui501-soft: #0a1820;
  --ui501-status: #101f27;
  --ui501-line: rgba(190, 224, 235, 0.18);
  --ui501-hot-line: rgba(121, 216, 242, 0.7);
  --ui501-text: #eef8fa;
  --ui501-muted: #a9bdc6;
  --ui501-faint: #7f98a2;
  --ui501-signal: #79d8f2;
  --ui501-signal-deep: #246d80;
  --ui501-good: #8bd5ae;
  --ui501-warn: #e4b96e;
  --ui501-danger: #ef958c;
  --ui501-radius: 7px;
}

html body,
html body #root,
html body #portal-root,
html body #root main.geo-admin-shell,
html body #portal-root main.portal-shell,
html body #root main.geo-admin-shell .geo-workspace,
html body #root main.geo-admin-shell .geo-content,
html body #portal-root main.portal-shell .portal-content-stage {
  background: var(--ui501-bg) !important;
  color: var(--ui501-text) !important;
}

html body #root main.geo-admin-shell .geo-sidebar,
html body #portal-root main.portal-shell .portal-header {
  background: #0a151d !important;
  border-color: var(--ui501-line) !important;
}

html body #root main.geo-admin-shell .geo-sidebar .geo-brand,
html body #portal-root main.portal-shell .portal-header .brand {
  background: var(--ui501-surface) !important;
  border-color: var(--ui501-line) !important;
  border-radius: var(--ui501-radius) !important;
}

html body #root main.geo-admin-shell .geo-nav button,
html body #portal-root main.portal-shell .portal-header .top-nav button {
  background: var(--ui501-raised) !important;
  border: 1px solid var(--ui501-line) !important;
  border-radius: 6px !important;
  color: var(--ui501-text) !important;
  -webkit-text-fill-color: var(--ui501-text) !important;
}

html body #root main.geo-admin-shell .geo-nav button:hover,
html body #root main.geo-admin-shell .geo-nav button.active,
html body #portal-root main.portal-shell .portal-header .top-nav button:hover,
html body #portal-root main.portal-shell .portal-header .top-nav button.active {
  background: #173644 !important;
  border-color: var(--ui501-hot-line) !important;
  box-shadow: inset 3px 0 0 var(--ui501-signal) !important;
}

/* All large surfaces use the same ladder. Page modules may differ in content,
   but not in their base background, border or corner treatment. */
html body #root main.geo-admin-shell :is(
  .geo-module-brief, .geo-notice, .geo-panel, .geo-command,
  .geo-project-command, .geo-model-command, .geo-prompt-command,
  .geo-schedule-command, .geo-task-command, .geo-search-command,
  .geo-stats-command, .geo-alert-command, .geo-log-command,
  .geo-api-command, .geo-user-command, .geo-billing-hero,
  .geo-growth-shell, .geo-overview-shell, .admin-dashboard-v2
),
html body #portal-root main.portal-shell :is(
  .portal-status-strip, .section-pilot-banner, .client-command-console,
  .client-command-cockpit, .client-core-command-deck, .client-core-hero,
  .client-live-cockpit, .client-home-command-deck, .client-home-hero,
  .page-control-tower, .publisher-command-center, .citation-route-map,
  .citation-launch-command, .citation-execution-command,
  .citation-source-journey, .compliance-command, .task-pool-cockpit,
  .task-quick-list, .account-command, .report-pack-launcher, .panel
) {
  box-sizing: border-box !important;
  border: 1px solid var(--ui501-line) !important;
  border-radius: var(--ui501-radius) !important;
  background: var(--ui501-surface) !important;
  background-image: none !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

html body #root main.geo-admin-shell :is(
  .geo-kpi, .geo-kpi-grid > *, .geo-project-health-grid > *,
  .geo-project-status-lane > *, .geo-project-command-metrics > *,
  .geo-project-active-card, .geo-model-health-grid > *,
  .geo-model-provider-card, .geo-prompt-matrix > *,
  .geo-schedule-command-metrics > *, .geo-task-command-metrics > *,
  .geo-task-latest, .geo-search-scope-grid > *,
  .geo-stats-provider-grid > *, .geo-exec-card, .geo-alert-risk-grid > *,
  .geo-delivery-cards > *, .geo-api-coverage-grid > *,
  .geo-api-group-grid > *, .geo-user-card, .geo-permission-grid > *,
  .geo-launch-group, .geo-launch-blocker, .geo-admin-command-step,
  .geo-task-simple-flow article, .geo-project-route-grid article,
  .geo-project-steps article, .geo-model-steps article,
  .geo-prompt-steps article, .geo-stats-steps article,
  .geo-schedule-simple-steps article, .geo-api-flow article
),
html body #portal-root main.portal-shell :is(
  .command-radar-card, .command-radar-stage, .command-metrics > *,
  .command-route-board article, .command-tool-card, .page-control-hero,
  .page-control-stats > *, .page-control-actions, .task-pool-command,
  .task-pool-tower, .task-pool-lanes, .task-quick-card,
  .publisher-platform, .publisher-job, .publisher-asset-list > *,
  .client-core-card-grid > *, .client-core-next-grid > *,
  .client-core-route article, .client-flight-route article,
  .citation-launch-deck, .citation-launch-flow article,
  .citation-priority-grid button, .citation-journey-steps button,
  .citation-journey-links button, .compliance-test-card,
  .account-grid > *, .report-package-card
) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  border: 1px solid var(--ui501-line) !important;
  border-radius: 6px !important;
  background: var(--ui501-raised) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--ui501-text) !important;
}

/* Management command panels: copy, metrics and active project stay aligned. */
html body #root main.geo-admin-shell .geo-project-command {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px !important;
  grid-template-areas: "copy active" "metrics active" !important;
  gap: 14px !important;
  align-items: stretch !important;
  padding: 18px !important;
}

html body #root main.geo-admin-shell .geo-project-command-copy {
  grid-area: copy !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 10px !important;
}

html body #root main.geo-admin-shell .geo-project-command-metrics {
  grid-area: metrics !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-content: start !important;
}

html body #root main.geo-admin-shell .geo-project-active-card {
  grid-area: active !important;
  min-height: 100% !important;
  align-content: start !important;
  background: var(--ui501-status) !important;
}

/* Every numbered flow is a stable three-column row; API handoff is four. */
html body #root main.geo-admin-shell :is(
  .geo-project-route-grid, .geo-project-steps, .geo-model-steps,
  .geo-prompt-steps, .geo-stats-steps, .geo-schedule-simple-steps,
  .geo-task-simple-flow, .geo-launch-group-grid, .geo-growth-route-grid
) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
  margin-top: 10px !important;
}

html body #root main.geo-admin-shell .geo-api-flow {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html body #root main.geo-admin-shell :is(
  .geo-project-route-grid article, .geo-project-steps article,
  .geo-model-steps article, .geo-prompt-steps article,
  .geo-stats-steps article, .geo-schedule-simple-steps article,
  .geo-task-simple-flow article, .geo-api-flow article
) {
  min-width: 0 !important;
  min-height: 106px !important;
  padding: 13px !important;
  align-content: start !important;
}

html body #root main.geo-admin-shell :is(
  .geo-main-grid, .geo-overview-grid, .geo-landing-grid,
  .geo-user-form-grid, .geo-health-metrics, .geo-task-health-grid
) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  min-width: 0 !important;
}

html body #root main.geo-admin-shell :is(
  .geo-api-group-grid, .geo-api-coverage-grid, .geo-delivery-cards
) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html body #root main.geo-admin-shell .geo-permission-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
}

/* Customer pages share the same content rhythm across monitoring, publishing,
   citations, reports and account sections. */
html body #portal-root main.portal-shell :is(
  .client-command-console, .client-command-cockpit,
  .client-core-command-deck, .client-live-cockpit, .page-control-tower,
  .publisher-command-center, .citation-route-map, .citation-launch-command,
  .citation-execution-command, .citation-source-journey,
  .compliance-command, .task-pool-cockpit, .task-quick-list,
  .account-command, .report-pack-launcher
) {
  padding: 18px !important;
  gap: 12px !important;
}

html body #portal-root main.portal-shell :is(
  .client-flight-route, .client-core-route, .client-core-next-grid,
  .client-home-next-grid, .publisher-platform-grid, .publisher-job-list,
  .citation-action-grid, .citation-priority-grid, .citation-journey-steps,
  .citation-journey-links, .command-route-board, .command-tools
) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
}

/* Typography is fixed for PC so cards do not resize with viewport width. */
html body #portal-root main.portal-shell :is(h1, h2, h3, h4, strong, b),
html body #root main.geo-admin-shell :is(h1, h2, h3, h4, strong, b) {
  color: var(--ui501-text) !important;
  -webkit-text-fill-color: var(--ui501-text) !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
}

html body #portal-root main.portal-shell :is(.muted, .hint, small, .caption, .meta),
html body #root main.geo-admin-shell :is(.muted, .hint, small, .caption, .meta, .geo-copy, .geo-muted) {
  color: var(--ui501-muted) !important;
  -webkit-text-fill-color: var(--ui501-muted) !important;
  letter-spacing: 0 !important;
}

html body #portal-root main.portal-shell :is(button, a[role="button"], .button),
html body #root main.geo-admin-shell :is(button, a[role="button"], .geo-mini-button, .geo-story-button, .geo-notice-action) {
  box-sizing: border-box !important;
  min-height: 38px !important;
  max-width: 100% !important;
  padding: 8px 12px !important;
  border: 1px solid var(--ui501-line) !important;
  border-radius: 6px !important;
  background: var(--ui501-raised) !important;
  background-image: none !important;
  color: var(--ui501-text) !important;
  -webkit-text-fill-color: var(--ui501-text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease !important;
}

html body #portal-root main.portal-shell :is(button, a[role="button"], .button):hover,
html body #root main.geo-admin-shell :is(button, a[role="button"], .geo-mini-button, .geo-story-button, .geo-notice-action):hover {
  background: #173644 !important;
  border-color: var(--ui501-hot-line) !important;
  color: #f5fcfd !important;
  -webkit-text-fill-color: #f5fcfd !important;
  transform: translateY(-1px) !important;
}

html body #portal-root main.portal-shell :is(.primary, .is-primary, .client-ignite-button, .primary-setup-action, .cockpit-launch-action),
html body #root main.geo-admin-shell :is(.primary, .is-primary, .geo-mini-button.accent, .cockpit-launch-action, button[class*="primary"]) {
  background: var(--ui501-signal-deep) !important;
  border-color: var(--ui501-signal) !important;
  color: #f5fdff !important;
  -webkit-text-fill-color: #f5fdff !important;
  box-shadow: 0 8px 20px rgba(36, 109, 128, 0.24) !important;
}

html body #portal-root main.portal-shell :is(.primary, .is-primary, .client-ignite-button, .primary-setup-action, .cockpit-launch-action):hover,
html body #root main.geo-admin-shell :is(.primary, .is-primary, .geo-mini-button.accent, .cockpit-launch-action, button[class*="primary"]):hover {
  background: #2b8198 !important;
  border-color: #a9ebfa !important;
}

html body #portal-root main.portal-shell :is(.danger, [class*="danger"], [class*="delete"], [data-task-cancel]),
html body #root main.geo-admin-shell :is(.danger, [class*="danger"], [class*="delete"], button[class*="delete"]) {
  background: #422729 !important;
  border-color: rgba(239, 149, 140, 0.62) !important;
  color: #ffecea !important;
  -webkit-text-fill-color: #ffecea !important;
}

html body #portal-root main.portal-shell :is(.warn, .warning),
html body #root main.geo-admin-shell :is(.warn, .warning, .pending) {
  background: #403321 !important;
  border-color: rgba(228, 185, 110, 0.62) !important;
  color: #ffe4ae !important;
  -webkit-text-fill-color: #ffe4ae !important;
}

html body #portal-root main.portal-shell :is(.good, .success, .ready),
html body #root main.geo-admin-shell :is(.good, .success, .ready) {
  background: #163329 !important;
  border-color: rgba(139, 213, 174, 0.46) !important;
  color: #b8edcf !important;
  -webkit-text-fill-color: #b8edcf !important;
}

html body #portal-root main.portal-shell :is(input, select, textarea),
html body #root main.geo-admin-shell :is(input, select, textarea) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border: 1px solid var(--ui501-line) !important;
  border-radius: 6px !important;
  background: #08151d !important;
  background-image: none !important;
  color: var(--ui501-text) !important;
  -webkit-text-fill-color: var(--ui501-text) !important;
}

html body #portal-root main.portal-shell :is(input, select, textarea):focus,
html body #root main.geo-admin-shell :is(input, select, textarea):focus {
  border-color: var(--ui501-signal) !important;
  box-shadow: 0 0 0 3px rgba(121, 216, 242, 0.13) !important;
  outline: 0 !important;
}

html body #portal-root main.portal-shell :is(button, a, input, select, textarea):focus-visible,
html body #root main.geo-admin-shell :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--ui501-signal) !important;
  outline-offset: 2px !important;
}

html body #portal-root main.portal-shell :is(.table-wrap, .table-scroll, .geo-table-scroll),
html body #root main.geo-admin-shell :is(.table-wrap, .table-scroll, .geo-table-scroll) {
  border: 1px solid var(--ui501-line) !important;
  border-radius: 6px !important;
  background: var(--ui501-soft) !important;
}

html body #portal-root main.portal-shell table,
html body #root main.geo-admin-shell table {
  background: var(--ui501-soft) !important;
}

html body #portal-root main.portal-shell th,
html body #root main.geo-admin-shell th {
  background: var(--ui501-raised) !important;
  color: var(--ui501-muted) !important;
}

html body #portal-root main.portal-shell :is(th, td),
html body #root main.geo-admin-shell :is(th, td) {
  border-bottom-color: var(--ui501-line) !important;
  color: var(--ui501-text) !important;
}

html body #portal-root main.portal-shell svg,
html body #root main.geo-admin-shell svg {
  color: var(--ui501-signal) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body #portal-root *,
  html body #portal-root *::before,
  html body #portal-root *::after,
  html body #root *,
  html body #root *::before,
  html body #root *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ui502: final PC product contract and copy-safe type rhythm. The product is
   desktop-only; narrow browser windows keep the same canvas and scroll it. */
:root {
  --ui502-canvas: 1280px;
  --ui502-body-size: 14px;
  --ui502-label-size: 12px;
  --ui502-action-size: 13px;
}

html {
  min-width: var(--ui502-canvas) !important;
}

html body {
  min-width: var(--ui502-canvas) !important;
  width: max(var(--ui502-canvas), 100%) !important;
  max-width: none !important;
  overflow-x: auto !important;
  font-size: var(--ui502-body-size) !important;
  letter-spacing: 0 !important;
}

html body #root,
html body #portal-root {
  width: max(var(--ui502-canvas), 100%) !important;
  min-width: var(--ui502-canvas) !important;
  max-width: none !important;
}

html body #root :is(.menu-button, .mobile-title, .mobile-nav, .mobile-nav-actions, .mobile-portal-link, .geo-mobile-nav-hint, [data-mobile-only]),
html body #portal-root :is(.menu-button, .mobile-title, .mobile-nav, .mobile-nav-actions, .mobile-portal-link, .geo-mobile-nav-hint, [data-mobile-only]) {
  display: none !important;
}

html body #root :is(h1, h2, h3, h4) {
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
}

html body #portal-root :is(h1, h2, h3, h4) {
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
}

html body #root :is(h1, h2, h3, h4) { line-height: 1.2 !important; }
html body #portal-root :is(h1, h2, h3, h4) { line-height: 1.2 !important; }
html body #root h1,
html body #portal-root h1 { font-size: 32px !important; }
html body #root h2,
html body #portal-root h2 { font-size: 22px !important; }
html body #root h3,
html body #portal-root h3 { font-size: 16px !important; }

html body #root :is(button, a[role="button"], .button),
html body #portal-root :is(button, a[role="button"], .button) {
  font-size: var(--ui502-action-size) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
}

html body #root :is(label, small, .muted, .hint, .caption, .meta),
html body #portal-root :is(label, small, .muted, .hint, .caption, .meta) {
  font-size: var(--ui502-label-size) !important;
  letter-spacing: 0 !important;
}

html body #root#root#root#root main.geo-admin-shell .geo-project-command {
  grid-template-columns: minmax(0, 1fr) 300px !important;
  grid-template-areas: "copy active" "metrics active" !important;
}

html body #root#root#root#root main.geo-admin-shell .geo-project-command-copy {
  grid-area: copy !important;
  min-width: 0 !important;
}

html body #root#root#root#root main.geo-admin-shell .geo-project-command-metrics {
  grid-area: metrics !important;
  min-width: 0 !important;
}

html body #root#root#root#root main.geo-admin-shell .geo-project-active-card {
  grid-area: active !important;
  min-width: 0 !important;
}

/* Give the status strip enough room for complete labels and four clear next
   actions. This prevents desktop headings such as "品牌推荐率" from being
   clipped into unreadable fragments. */
html body #portal-root#portal-root#portal-root main.portal-shell.has-project .portal-status-strip {
  grid-template-columns: minmax(240px, 1fr) minmax(300px, 1.1fr) minmax(390px, 1.4fr) !important;
  gap: 10px !important;
}

html body #portal-root#portal-root#portal-root main.portal-shell.has-project .status-dials {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body #portal-root#portal-root#portal-root main.portal-shell.has-project .status-dials article {
  min-width: 0 !important;
  padding-inline: 10px !important;
}

html body #portal-root#portal-root#portal-root main.portal-shell.has-project .status-dials article span {
  display: block !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 12px !important;
}

html body #portal-root#portal-root#portal-root main.portal-shell.has-project .status-dials article b {
  font-size: 18px !important;
}

html body #portal-root#portal-root#portal-root main.portal-shell.has-project .status-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body #portal-root#portal-root#portal-root main.portal-shell.has-project .status-actions button {
  display: grid !important;
  min-width: 0 !important;
  min-height: 64px !important;
  padding-inline: 10px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

html body #portal-root#portal-root#portal-root main.portal-shell.has-project .publisher-command-head {
  grid-template-columns: minmax(0, 1fr) minmax(390px, .95fr) !important;
}

html body #portal-root#portal-root#portal-root main.portal-shell.has-project .publisher-command-center :is(.publisher-command-metrics > *, .publisher-stat) {
  min-width: 0 !important;
}

html body #portal-root#portal-root#portal-root main.portal-shell.has-project .publisher-command-center :is(.publisher-command-metrics span, .publisher-stat span) {
  white-space: nowrap !important;
  font-size: 12px !important;
}

/* ui502: keep desktop status metrics legible as one value-label unit. */
html body #portal-root#portal-root#portal-root main.portal-shell.has-project .publisher-command-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  min-width: 390px !important;
}

html body #portal-root#portal-root#portal-root main.portal-shell.has-project .publisher-command-metrics b {
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

html body #portal-root#portal-root#portal-root main.portal-shell.has-project .publisher-command-metrics b strong {
  display: block !important;
  color: var(--ui501-text) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

html body #portal-root#portal-root#portal-root main.portal-shell.has-project .publisher-command-metrics b small {
  display: block !important;
  min-width: max-content !important;
  color: var(--ui501-muted) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* Keep the four desktop shortcuts present and evenly sized on every client
   page with a project; secondary actions are intentionally below the fold. */
html body #portal-root#portal-root#portal-root main.portal-shell.has-project .status-actions {
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  min-height: 52px !important;
  visibility: visible !important;
  pointer-events: auto !important;
  align-items: stretch !important;
}

html body #portal-root#portal-root#portal-root main.portal-shell.has-project .status-actions button {
  min-width: 0 !important;
  min-height: 46px !important;
  visibility: visible !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #portal-root#portal-root#portal-root main.portal-shell.section-publisher .page-control-stats article span {
  display: block !important;
  min-width: max-content !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
}

html body #portal-root#portal-root#portal-root main.portal-shell.section-publisher .page-control-stats article small {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

html body #portal-root#portal-root#portal-root main.portal-shell.has-project .portal-status-strip {
  grid-template-rows: auto auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}