:root {
  --fusion-violet: #6658ed;
  --fusion-teal: #18b7ad;
  --fusion-night: #11192e;
}

.brand-block > div:last-child span {
  margin-top: 2px;
  font-size: 11px;
}

.mock-banner {
  display: flex;
  align-items: center;
  gap: 3px;
}

.section-nav {
  display: block;
}

.nav-domain {
  margin: 6px 0;
  border: 1px solid transparent;
  border-radius: 14px;
  transition: 160ms ease;
}

.nav-domain[open],
.nav-domain.is-active {
  background: rgb(255 255 255 / 4%);
  border-color: rgb(255 255 255 / 7%);
}

.nav-domain.is-active {
  box-shadow: inset 3px 0 0 rgb(105 91 233 / 88%);
}

.nav-domain summary {
  display: flex;
  min-height: 50px;
  padding: 8px 10px;
  align-items: center;
  gap: 10px;
  color: #d8def0;
  border-radius: 13px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.nav-domain summary::-webkit-details-marker {
  display: none;
}

.nav-domain summary::after {
  margin-left: auto;
  color: #73809c;
  content: '›';
  font-size: 17px;
  transition: transform 160ms ease;
}

.nav-domain[open] summary::after {
  transform: rotate(90deg);
}

.nav-domain summary > i {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  color: #d9d5ff;
  background: linear-gradient(145deg, rgb(119 105 242 / 32%), rgb(19 170 163 / 16%));
  border: 1px solid rgb(141 130 246 / 18%);
  border-radius: 10px;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  place-items: center;
}

.nav-domain summary > i::before {
  content: attr(data-domain-icon);
}

.nav-domain summary span,
.nav-domain summary small {
  display: block;
}

.nav-domain summary span {
  font-size: 13px;
  font-weight: 760;
  line-height: 1.2;
}

.nav-domain summary small {
  margin-top: 4px;
  color: #7f8ba5;
  font-size: 10px;
  font-weight: 550;
}

.nav-domain.is-active summary {
  color: white;
}

.nav-domain.is-active summary > i {
  color: white;
  background: linear-gradient(145deg, #7769f2, #5145ce 62%, #13aaa3);
  box-shadow: 0 6px 18px rgb(101 87 232 / 30%);
}

.nav-domain-links {
  display: grid;
  gap: 3px;
  padding: 0 7px 8px 23px;
}

.nav-domain-links a {
  min-height: 44px;
  padding: 6px 9px;
  font-size: 12px;
}

.nav-domain-links a::before {
  width: 23px;
  height: 23px;
  flex-basis: 23px;
  border-radius: 7px;
  font-size: 9px;
}

.topbar::after {
  display: inline-flex;
  margin-left: auto;
  padding: 6px 10px;
  align-items: center;
  color: #5047c5;
  background: #efefff;
  border: 1px solid #dedcff;
  border-radius: 999px;
  content: 'P1 v0.5 融合候选';
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.environment-panel {
  border-top: 3px solid transparent;
  background:
    linear-gradient(rgb(255 255 255 / 94%), rgb(255 255 255 / 94%)) padding-box,
    linear-gradient(90deg, var(--fusion-violet), var(--fusion-teal)) border-box;
}

.billing-recovery-card {
  min-height: 150px;
}

.billing-recovery-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.billing-recovery-card > div span {
  padding: 5px 9px;
  color: #5148c7;
  background: #efefff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.billing-recovery-card p {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.connection-workspace {
  display: grid;
  min-width: 0;
  gap: 16px;
}

.connection-boundary {
  border-color: #d9e9e7;
  background: linear-gradient(110deg, #f4f3ff, #ebfaf7);
}

.connection-boundary b {
  flex: 0 0 auto;
  color: #5047c5;
  font-size: 11px;
}

.connection-operations-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.connection-credential,
.connection-record-list {
  display: grid;
  gap: 9px;
  margin: 16px 0;
}

.connection-credential dl,
.lineage-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.connection-credential dl div,
.lineage-card dl div {
  display: flex;
  min-width: 0;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.connection-credential dd,
.lineage-card dd {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-align: right;
}

.connection-sync-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.connection-failure-toggle {
  display: flex;
  margin-top: 14px;
  align-items: flex-start;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.connection-failure-toggle input {
  width: 44px;
  height: 44px;
  margin-top: 0;
  flex: 0 0 44px;
  accent-color: var(--primary);
}

.connection-lineage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.lineage-card {
  min-width: 0;
  padding: 14px;
  background: #f8fafb;
  border: 1px solid #e4e8ef;
  border-radius: 13px;
}

.lineage-card .card-heading span {
  padding: 4px 7px;
  color: #087970;
  background: #e6f8f5;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

.lineage-card[data-lineage-status='DEGRADED'] {
  background: #fffaf0;
  border-color: #f2dfb5;
}

.lineage-card[data-lineage-status='DEGRADED'] .card-heading span {
  color: #9a5b10;
  background: #fff0cf;
}

.lineage-card p {
  min-height: 38px;
  margin: 13px 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.connection-mapping-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.connection-mapping-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.connection-mapping-form input {
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  background: white;
  border: 1px solid #dfe3ec;
  border-radius: 10px;
  min-height: 44px;
}

.connection-mapping-form .button {
  grid-column: 1 / -1;
}

.connection-record {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 11px;
  align-items: center;
  background: #f8f9fd;
  border: 1px solid #e7e9f2;
  border-radius: 11px;
}

.connection-record[data-job-status='FAILED'] {
  background: #fff5f1;
  border-color: #ffd5c5;
}

.record-icon {
  display: grid;
  width: 30px;
  height: 30px;
  color: #5148c7;
  background: #efefff;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 850;
  place-items: center;
}

.connection-record strong,
.connection-record small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.connection-record small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.connection-record b {
  color: #087970;
  font-size: 11px;
}

.connection-empty {
  padding: 16px;
  color: var(--muted);
  background: #f8f9fb;
  border: 1px dashed #dfe3ec;
  border-radius: 11px;
  font-size: 12px;
  line-height: 1.6;
}

.service-workspace {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: 16px;
}

.service-workspace > *,
.service-workspace .operations-card,
.service-workspace .table-wrap {
  min-width: 0;
  max-width: 100%;
}

.service-workspace .table-wrap {
  overflow-x: auto;
}

.service-workspace table {
  min-width: 620px;
}

.growth-review-card {
  margin-top: 16px;
}

.referral-review-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.incident-form {
  display: grid;
  gap: 11px;
  margin-top: 16px;
}

.incident-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.incident-form select,
.incident-form textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  color: var(--ink);
  background: white;
  border: 1px solid #dfe3ec;
  border-radius: 10px;
  font: inherit;
}

.incident-form select {
  min-height: 44px;
}

.incident-form textarea {
  resize: vertical;
}

.model-governance-workbench {
  min-width: 0;
  margin-top: 16px;
}

.model-governance-workbench .commercial-boundary {
  margin: 16px 0;
}

.model-version-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.model-version-card {
  display: grid;
  min-width: 0;
  gap: 14px;
  padding: 15px;
  background: #f8f9fd;
  border: 1px solid #e5e7f0;
  border-radius: 13px;
}

.model-version-card[data-model-status='ACTIVE'] {
  background: linear-gradient(145deg, #effbf8, #f8fffd);
  border-color: #b8e5dc;
}

.model-version-head {
  display: flex;
  min-width: 0;
  justify-content: space-between;
  gap: 10px;
}

.model-version-head strong,
.model-version-head small {
  display: block;
}

.model-version-head small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.model-version-head span {
  padding: 4px 8px;
  align-self: flex-start;
  color: #5148c7;
  background: #efefff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.model-backtest {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.model-backtest div {
  padding: 10px;
  background: rgb(255 255 255 / 80%);
  border: 1px solid #e7e9f1;
  border-radius: 10px;
}

.model-backtest span,
.model-backtest b {
  display: block;
}

.model-backtest span {
  color: var(--muted);
  font-size: 10px;
}

.model-backtest b {
  margin-top: 4px;
  color: var(--ink);
  font-size: 13px;
}

.publication-content {
  display: grid;
  min-width: 0;
  gap: 18px;
}

.publication-content > *,
.publication-tasks-card,
.publication-tasks-card .table-wrap {
  min-width: 0;
  max-width: 100%;
}

.publication-boundary {
  border-color: #ddd9ff;
  background: linear-gradient(110deg, #f5f3ff, #edfafa);
}

.publication-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.publication-help {
  margin: 12px 0 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.publication-switches,
.publication-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.publication-switch,
.publication-batch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px 14px;
  align-items: center;
  background: #f8f9fd;
  border: 1px solid #e7e9f2;
  border-radius: 12px;
}

.publication-batch {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.publication-switch strong,
.publication-switch small,
.publication-batch strong,
.publication-batch small {
  display: block;
}

.publication-switch small,
.publication-batch small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.publication-switch[data-switch-state='PAUSED'] {
  background: #fff7f4;
  border-color: #ffd6c7;
}

.publication-actions {
  display: flex;
  min-width: 210px;
  flex-wrap: wrap;
  gap: 6px;
}

.table-action.subtle {
  color: #5c6170;
  background: #f4f5f8;
}

.table-action.danger {
  color: #b8422d;
  background: #fff1ed;
}

.status-pill.publication-succeeded,
.status-pill.publication-compensated {
  color: #087970;
  background: #e6f8f5;
}

.status-pill.publication-failed,
.status-pill.publication-conflict,
.status-pill.publication-blocked {
  color: #b8422d;
  background: #fff1ed;
}

.status-pill.publication-queued {
  color: #5148c7;
  background: #efefff;
}

.publication-dialog {
  width: min(520px, calc(100vw - 32px));
}

.outbox-workspace {
  display: grid;
  min-width: 0;
  gap: 18px;
}

.outbox-workspace > *,
.outbox-events-card,
.outbox-events-card .table-wrap {
  min-width: 0;
  max-width: 100%;
}

.outbox-boundary {
  border-color: #cde9e4;
  background: linear-gradient(110deg, #eefbf8, #f4f3ff);
}

.outbox-heading-actions {
  display: flex;
  max-width: 620px;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.status-pill.outbox-pending,
.status-pill.outbox-retryable,
.status-pill.outbox-processing {
  color: #5148c7;
  background: #efefff;
}

.status-pill.outbox-succeeded {
  color: #087970;
  background: #e6f8f5;
}

.status-pill.outbox-dead_letter,
.status-pill.outbox-compensation_required {
  color: #b8422d;
  background: #fff1ed;
}

#billing-section .heading-actions {
  display: flex;
  max-width: 540px;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.status-pill.billing-success {
  color: #087970;
  background: #e6f8f5;
}

.status-pill.billing-refunded {
  color: #5c6170;
  background: #f1f2f5;
}

.status-pill.billing-unpaid {
  color: #a35c0a;
  background: #fff5df;
}

@media (max-width: 900px) {
  .section-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .nav-domain,
  .nav-domain[open] {
    margin: 0;
  }

  .nav-domain summary {
    min-height: 52px;
  }

  .nav-domain-links {
    padding-left: 7px;
  }

  .topbar::after {
    display: none;
  }

  .publication-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .connection-lineage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .button,
  .button.small,
  .table-action,
  .nav-domain summary,
  .nav-domain-links a {
    min-height: 44px;
  }

  .table-wrap {
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .table-wrap::after {
    display: block;
    position: sticky;
    right: 0;
    width: max-content;
    margin: 8px 0 0 auto;
    padding: 5px 8px;
    color: #66617c;
    background: rgb(255 255 255 / 92%);
    border: 1px solid #e5e2f7;
    border-radius: 999px;
    content: '左右滑动查看全部信息与操作';
    font-size: 11px;
  }

  .table-wrap td:last-child,
  .table-wrap th:last-child {
    position: sticky;
    right: 0;
    background: #fff;
    box-shadow: -12px 0 18px rgb(38 35 72 / 7%);
  }
  .section-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav-domain summary small {
    display: none;
  }

  .publication-batch {
    grid-template-columns: minmax(0, 1fr);
  }

  .publication-actions {
    min-width: 180px;
  }

  .connection-operations-grid,
  .connection-lineage,
  .model-version-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .connection-boundary {
    align-items: flex-start;
    flex-direction: column;
  }

  .connection-record {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .connection-record > :last-child {
    grid-column: 2;
    justify-self: start;
  }

  .referral-review-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .connection-sync-actions,
  .connection-mapping-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .connection-mapping-form .button {
    grid-column: auto;
  }

  #billing-section .heading-actions,
  #billing-section .heading-actions .button,
  .outbox-heading-actions,
  .outbox-heading-actions .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .nav-domain,
  .nav-domain summary::after {
    transition: none;
  }
}