.vpc-app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  background: #f6f8fb;
  color: #172033;
}

.vpc-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 16px 14px;
  border-right: 1px solid #e6eaf2;
  background: #ffffff;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
}

.vpc-brand {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.vpc-brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1664ff, #06b6d4);
  color: #ffffff;
  font-weight: 800;
}

.vpc-brand strong,
.vpc-brand span,
.vpc-nav-copy strong,
.vpc-nav-copy em {
  display: block;
}

.vpc-brand strong {
  color: #101828;
  font-size: 15px;
  line-height: 20px;
}

.vpc-brand span {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
}

.vpc-nav {
  display: grid;
  gap: 8px;
  align-content: start;
}

.vpc-nav-item {
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #667085;
  cursor: pointer;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  text-align: left;
  font: inherit;
}

.vpc-nav-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #f3f6fb;
}

.vpc-nav-copy strong {
  color: #344054;
  font-size: 13px;
  line-height: 18px;
}

.vpc-nav-copy em {
  color: #98a2b3;
  font-size: 12px;
  font-style: normal;
  line-height: 16px;
}

.vpc-nav-item:hover,
.vpc-nav-item-active {
  border-color: #cddcff;
  background: #f2f7ff;
}

.vpc-nav-item:hover .vpc-nav-icon,
.vpc-nav-item-active .vpc-nav-icon {
  background: #1664ff;
  color: #ffffff;
}

.vpc-nav-item-active .vpc-nav-copy strong {
  color: #1664ff;
}

.vpc-side-status {
  padding: 13px;
  border: 1px solid #dce6f7;
  border-radius: 8px;
  background: #f8fbff;
  display: grid;
  gap: 4px;
}

.vpc-side-status span,
.vpc-side-status em,
.vpc-side-status small {
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

.vpc-side-status strong {
  color: #101828;
  font-size: 13px;
  line-height: 18px;
}

.vpc-side-status small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-side-status-ready {
  border-color: rgba(18, 183, 106, 0.28);
  background: #f7fffa;
}

.vpc-side-status-ready em {
  color: #087443;
  font-weight: 700;
}

.vpc-side-status-loading,
.vpc-side-status-stale,
.vpc-side-status-fallback {
  border-color: rgba(247, 144, 9, 0.25);
  background: #fffaf2;
}

.vpc-side-status-loading em,
.vpc-side-status-stale em,
.vpc-side-status-fallback em {
  color: #b54708;
  font-weight: 700;
}

.vpc-side-status-error {
  border-color: rgba(217, 45, 32, 0.24);
  background: #fff8f7;
}

.vpc-side-status-error em {
  color: #b42318;
  font-weight: 700;
}

.vpc-main {
  min-width: 0;
  padding: 22px;
  display: grid;
  gap: 14px;
  align-content: start;
}

.vpc-header {
  min-height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.vpc-header h1 {
  margin: 0;
  color: #101828;
  font-size: 26px;
  line-height: 34px;
}

.vpc-header p {
  margin: 4px 0 0;
  color: #667085;
  font-size: 13px;
  line-height: 20px;
}

.vpc-header-actions {
  display: grid;
  grid-template-columns: minmax(320px, 440px) 36px 36px;
  gap: 8px;
  align-items: center;
}

.vpc-filterbar {
  min-height: 54px;
  padding: 10px;
  border: 1px solid #e6eaf2;
  border-radius: 8px;
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.vpc-select,
.vpc-input {
  min-height: 34px;
  border: 1px solid #d8dee9;
  border-radius: 8px;
  background: #ffffff;
  color: #344054;
  font: inherit;
  font-size: 13px;
  padding: 0 10px;
}

.vpc-filter-hint {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vpc-filter-hint span {
  min-height: 28px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #f3f6fb;
  color: #667085;
  font-size: 12px;
}

.vpc-data-boundary {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #dbe6f5;
  border-radius: 8px;
  background: #fbfdff;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.vpc-data-boundary > strong {
  color: #344054;
  font-size: 13px;
  white-space: nowrap;
}

.vpc-data-boundary > div {
  min-width: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vpc-data-boundary-item {
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid #e3eaf5;
  border-radius: 8px;
  background: #ffffff;
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.vpc-data-boundary-item em {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 5px;
  background: #eef5ff;
  color: #1664ff;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
}

.vpc-data-boundary-item b {
  min-width: 0;
  color: #667085;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.vpc-real-data-status {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  grid-template-columns: minmax(210px, 0.65fr) minmax(170px, 0.7fr) minmax(260px, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.vpc-real-data-loading {
  border-color: rgba(22, 100, 255, 0.2);
  background: #fbfdff;
}

.vpc-real-data-ready {
  border-color: rgba(18, 183, 106, 0.28);
  background: #fbfffd;
}

.vpc-real-data-stale {
  border-color: rgba(247, 144, 9, 0.3);
  background: #fffaf2;
}

.vpc-real-data-error,
.vpc-real-data-fallback {
  border-color: rgba(247, 144, 9, 0.28);
  background: #fffdf8;
}

.vpc-real-data-status > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.vpc-real-data-status > div:first-child {
  grid-column: 1;
  grid-row: 1;
}

.vpc-real-data-status > em {
  grid-column: 2;
  grid-row: 1;
}

.vpc-real-data-status > code {
  grid-column: 3;
  grid-row: 1;
}

.vpc-real-data-status strong {
  color: #101828;
  font-size: 13px;
  line-height: 18px;
}

.vpc-real-data-status span,
.vpc-real-data-status em,
.vpc-real-data-status code {
  min-width: 0;
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-real-data-status code {
  padding: 4px 7px;
  border: 1px solid #e4e9f2;
  border-radius: 7px;
  background: #f8fafc;
  color: #475467;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.vpc-real-data-status .vpc-real-data-diagnostics {
  min-width: min(320px, 100%);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  grid-column: 1 / 4;
  grid-row: 2;
}

.vpc-real-data-status .vpc-real-data-diagnostic {
  min-width: 0;
  min-height: 26px;
  padding: 3px 7px;
  border: 1px solid #e4e9f2;
  border-radius: 7px;
  background: #f8fafc;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.vpc-real-data-diagnostic em,
.vpc-real-data-diagnostic b {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-real-data-diagnostic em {
  color: #667085;
  font-style: normal;
}

.vpc-real-data-diagnostic b {
  color: #101828;
  font-weight: 700;
}

.vpc-real-data-diagnostic-ok {
  border-color: rgba(18, 183, 106, 0.22);
  background: #f4fff8;
}

.vpc-real-data-diagnostic-ok b {
  color: #087443;
}

.vpc-real-data-diagnostic-warn {
  border-color: rgba(247, 144, 9, 0.25);
  background: #fffaf2;
}

.vpc-real-data-diagnostic-warn b {
  color: #b54708;
}

.vpc-real-data-diagnostic-error {
  border-color: rgba(217, 45, 32, 0.24);
  background: #fff8f7;
}

.vpc-real-data-diagnostic-error b {
  color: #b42318;
}

.vpc-real-data-diagnostic-idle {
  border-color: rgba(102, 112, 133, 0.2);
  background: #f8fafc;
}

.vpc-real-data-diagnostic-idle b {
  color: #475467;
}

.vpc-real-data-status-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  grid-column: 4;
  grid-row: 1 / span 2;
  align-self: center;
}

.vpc-real-data-status-actions button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #d0d8e8;
  border-radius: 7px;
  background: #ffffff;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.vpc-real-data-status-actions button svg {
  width: 13px;
  height: 13px;
}

.vpc-real-data-status-actions button:hover:not(:disabled) {
  border-color: rgba(22, 100, 255, 0.36);
  color: #1664ff;
}

.vpc-real-data-status-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.vpc-real-data-status-actions .vpc-real-data-auto-active {
  border-color: rgba(18, 183, 106, 0.32);
  background: #f3fff9;
  color: #079455;
}

.vpc-real-data-status-actions .vpc-real-data-copy-ok {
  border-color: rgba(18, 183, 106, 0.32);
  background: #f3fff9;
  color: #079455;
}

.vpc-real-data-status-actions .vpc-real-data-copy-manual {
  border-color: rgba(217, 45, 32, 0.24);
  background: #fff8f7;
  color: #b42318;
}

.vpc-real-data-copy-panel {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(217, 45, 32, 0.2);
  border-radius: 8px;
  background: #fff8f7;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  grid-column: 1 / -1;
  grid-row: 3;
}

.vpc-real-data-copy-panel-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vpc-real-data-copy-panel-head span {
  min-width: 0;
  overflow: hidden;
  color: #b42318;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-real-data-copy-panel-head button {
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid #f1c6c0;
  border-radius: 7px;
  background: #ffffff;
  color: #b42318;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
  cursor: pointer;
}

.vpc-real-data-copy-panel-head button:hover {
  border-color: rgba(217, 45, 32, 0.35);
  background: #fff4f2;
}

.vpc-real-data-copy-panel textarea {
  width: 100%;
  min-height: 112px;
  max-height: 150px;
  padding: 8px;
  border: 1px solid #f1c6c0;
  border-radius: 7px;
  background: #ffffff;
  color: #344054;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 16px;
  resize: vertical;
  white-space: pre;
}

.vpc-real-data-status > .vpc-real-data-copy-panel,
.vpc-main-command > .vpc-real-data-status > .vpc-real-data-copy-panel {
  grid-template-columns: minmax(0, 1fr);
}

.vpc-flow-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.vpc-flow-step {
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid #e6eaf2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-content: center;
  position: relative;
}

.vpc-flow-step::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -10px;
  width: 10px;
  height: 1px;
  background: #cfd8e6;
}

.vpc-flow-step:last-child::after {
  display: none;
}

.vpc-flow-step span {
  grid-row: 1 / span 2;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #edf4ff;
  color: #1664ff;
  font-size: 12px;
  font-weight: 800;
}

.vpc-flow-step strong {
  color: #101828;
  font-size: 13px;
  line-height: 18px;
}

.vpc-flow-step em {
  display: -webkit-box;
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.vpc-flow-step-action {
  border-color: #b8cdfd;
  background: #f8fbff;
}

.vpc-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.vpc-kpi {
  min-height: 84px;
  padding: 12px 14px;
  border: 1px solid #e6eaf2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 5px;
}

.vpc-kpi::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #1664ff;
}

.vpc-kpi span {
  color: #667085;
  font-size: 13px;
}

.vpc-kpi strong {
  color: #101828;
  font-size: 22px;
  line-height: 28px;
}

.vpc-kpi em {
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

.vpc-kpi-green::before {
  background: #12b76a;
}

.vpc-kpi-orange::before {
  background: #f79009;
}

.vpc-kpi-cyan::before {
  background: #06b6d4;
}

.vpc-command-grid {
  min-height: 650px;
  display: grid;
  grid-template-areas:
    "map list detail"
    "quality quality quality";
  grid-template-columns: minmax(560px, 1fr) 292px 360px;
  gap: 12px;
}

.vpc-command-grid > .vpc-map-panel {
  grid-area: map;
}

.vpc-command-grid > .vpc-vehicle-list {
  grid-area: list;
}

.vpc-command-grid > .vpc-detail {
  grid-area: detail;
}

.vpc-command-grid > .vpc-realtime-quality {
  grid-area: quality;
}

.vpc-main-command > .vpc-kpis {
  display: none;
}

.vpc-main-command > .vpc-data-boundary {
  min-height: 36px;
  padding-block: 6px;
}

.vpc-main-command > .vpc-real-data-status {
  min-height: 36px;
  padding-block: 6px;
  display: grid;
  grid-template-columns: minmax(190px, 0.75fr) minmax(180px, 0.75fr) minmax(260px, 1fr) auto;
  gap: 6px 10px;
}

.vpc-main-command > .vpc-real-data-status > div:first-child {
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
}

.vpc-main-command > .vpc-real-data-status > em {
  grid-column: 2;
  grid-row: 1;
}

.vpc-main-command > .vpc-real-data-status > code {
  grid-column: 3;
  grid-row: 1;
}

.vpc-main-command > .vpc-real-data-status code {
  max-width: min(460px, 100%);
}

.vpc-main-command > .vpc-real-data-status .vpc-real-data-diagnostics {
  min-width: 0;
  grid-column: 1 / 4;
  grid-row: 2;
}

.vpc-main-command > .vpc-real-data-status .vpc-real-data-status-actions {
  grid-column: 4;
  grid-row: 1 / span 2;
  margin-left: auto;
  align-self: center;
}

.vpc-command-stack {
  display: grid;
  gap: 12px;
}

.vpc-command-priority-strip {
  min-height: 74px;
  padding: 10px 12px;
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  display: grid;
  grid-template-columns: minmax(210px, 0.72fr) minmax(0, 2.4fr);
  gap: 12px;
  align-items: center;
}

.vpc-command-priority-title {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.vpc-command-priority-title span,
.vpc-command-priority-item span,
.vpc-command-priority-item em {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-command-priority-title strong {
  color: #101828;
  font-size: 15px;
  line-height: 20px;
}

.vpc-command-priority-items {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.vpc-command-priority-item {
  min-width: 0;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfdff;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "detail detail";
  gap: 2px 8px;
  cursor: pointer;
}

.vpc-command-priority-item:hover,
.vpc-command-priority-item:focus-visible,
.vpc-command-priority-active {
  border-color: #b8cdfd;
  box-shadow: 0 0 0 3px rgba(22, 100, 255, 0.08);
}

.vpc-command-priority-item:disabled {
  cursor: default;
  opacity: 0.72;
}

.vpc-command-priority-item span {
  grid-area: label;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-command-priority-item strong {
  grid-area: value;
  color: #101828;
  font-size: 24px;
  line-height: 28px;
  text-align: right;
}

.vpc-command-priority-item em {
  grid-area: detail;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-command-priority-ok {
  border-color: #d1fadf;
  background: #f7fef9;
}

.vpc-command-priority-ok strong {
  color: #027a48;
}

.vpc-command-priority-warning {
  border-color: #fedf89;
  background: #fffcf5;
}

.vpc-command-priority-warning strong {
  color: #b54708;
}

.vpc-command-priority-error {
  border-color: #fecdca;
  background: #fffbfa;
}

.vpc-command-priority-error strong {
  color: #b42318;
}

.vpc-realtime-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.vpc-realtime-summary-card {
  min-height: 86px;
  padding: 13px 14px;
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  display: grid;
  align-content: center;
  gap: 4px;
}

.vpc-realtime-summary-card span,
.vpc-realtime-summary-card em {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-realtime-summary-card strong {
  color: #101828;
  font-size: 23px;
  line-height: 29px;
}

.vpc-realtime-summary-blue {
  border-color: #b8cdfd;
}

.vpc-realtime-summary-green {
  border-color: #a6f4c5;
}

.vpc-realtime-summary-orange {
  border-color: #fedf89;
}

.vpc-realtime-summary-cyan {
  border-color: #a5f3fc;
}

.vpc-realtime-quality {
  padding: 12px;
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  display: grid;
  gap: 12px;
}

.vpc-realtime-quality-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.vpc-realtime-quality-head div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.vpc-realtime-quality-head strong {
  color: #101828;
  font-size: 15px;
  line-height: 20px;
}

.vpc-realtime-quality-head span,
.vpc-quality-card-main span,
.vpc-quality-card-main em,
.vpc-quality-samples button em,
.vpc-quality-empty,
.vpc-quality-more {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-realtime-quality-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.vpc-quality-card {
  min-width: 0;
  min-height: 154px;
  padding: 10px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  align-content: space-between;
  gap: 10px;
}

.vpc-quality-green {
  border-color: #a6f4c5;
  background: #f7fef9;
}

.vpc-quality-blue {
  border-color: #b8cdfd;
  background: #f7faff;
}

.vpc-quality-orange {
  border-color: #fedf89;
  background: #fffcf5;
}

.vpc-capability-radar {
  padding: 14px;
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  display: grid;
  gap: 12px;
}

.vpc-capability-radar-head,
.vpc-capability-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.vpc-capability-radar-head div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.vpc-capability-radar-head strong {
  color: #101828;
  font-size: 15px;
  line-height: 20px;
}

.vpc-capability-radar-head span,
.vpc-capability-card em,
.vpc-capability-card p {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-capability-radar-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.vpc-capability-card {
  min-width: 0;
  min-height: 150px;
  padding: 11px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  align-content: start;
  gap: 8px;
}

.vpc-capability-card-title span {
  color: #344054;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
}

.vpc-capability-card strong {
  color: #101828;
  font-size: 22px;
  line-height: 28px;
  word-break: break-word;
}

.vpc-capability-card p {
  margin: 0;
}

.vpc-capability-ready {
  border-color: #a6f4c5;
  background: #f7fef9;
}

.vpc-capability-partial {
  border-color: #fedf89;
  background: #fffcf5;
}

.vpc-capability-waiting {
  border-color: #b8cdfd;
  background: #f7faff;
}

.vpc-capability-unavailable {
  border-color: #e1e7f0;
  background: #f8fafc;
}

.vpc-quality-red {
  border-color: #fecdca;
  background: #fffbfa;
}

.vpc-quality-card-main {
  display: grid;
  gap: 2px;
}

.vpc-quality-card-main strong {
  color: #101828;
  font-size: 24px;
  line-height: 30px;
}

.vpc-quality-samples {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.vpc-quality-samples button {
  min-width: 0;
  min-height: 28px;
  padding: 5px 7px;
  border: 1px solid rgba(223, 230, 241, 0.9);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
  color: #101828;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  text-align: left;
  font: inherit;
}

.vpc-quality-samples button:hover,
.vpc-quality-sample-active {
  border-color: #1664ff !important;
  background: #eef4ff !important;
}

.vpc-quality-samples button span {
  min-width: 0;
  overflow: hidden;
  color: #101828;
  font-size: 12px;
  font-weight: 700;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-quality-empty,
.vpc-quality-more {
  min-height: 28px;
  padding: 5px 7px;
  border: 1px dashed #d9e0ea;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.56);
  display: inline-flex;
  align-items: center;
}

.vpc-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.8fr);
  gap: 12px;
}

.vpc-page-stack {
  display: grid;
  gap: 12px;
}

.vpc-panel,
.vpc-map-panel {
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.06);
  min-width: 0;
}

.vpc-panel {
  padding: 14px;
}

.vpc-panel-head {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.vpc-panel-head strong {
  color: #101828;
  font-size: 15px;
}

.vpc-panel-head span {
  color: #667085;
  font-size: 12px;
}

.vpc-list-scroll {
  max-height: 580px;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding-right: 2px;
}

.vpc-vehicle-row {
  width: 100%;
  min-height: 82px;
  padding: 10px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  text-align: left;
  cursor: pointer;
  font: inherit;
  scroll-margin: 12px;
}

.vpc-vehicle-row:hover,
.vpc-vehicle-row-active {
  border-color: #b8cdfd;
  background: #f6f9ff;
}

.vpc-vehicle-row-active {
  box-shadow: inset 3px 0 0 #1664ff;
}

.vpc-vehicle-row strong,
.vpc-row-metric {
  color: #101828;
  font-size: 13px;
  font-weight: 700;
}

.vpc-vehicle-row em,
.vpc-vehicle-row small,
.vpc-row-metric em {
  display: block;
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-vehicle-row small {
  color: #475467;
  max-width: 150px;
}

.vpc-row-metric {
  display: grid;
  justify-items: end;
  gap: 3px;
  text-align: right;
  white-space: nowrap;
}

.vpc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #98a2b3;
  display: inline-block;
}

.vpc-dot-online {
  background: #12b76a;
}

.vpc-dot-warning {
  background: #f79009;
}

.vpc-dot-offline {
  background: #98a2b3;
}

.vpc-map-panel {
  display: grid;
  grid-template-rows: auto auto minmax(560px, 1fr) auto;
  overflow: hidden;
}

.vpc-map-toolbar {
  min-height: 58px;
  padding: 12px 14px;
  border-bottom: 1px solid #e6eaf2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.vpc-map-toolbar strong {
  display: block;
  color: #101828;
  font-size: 15px;
  line-height: 20px;
}

.vpc-map-toolbar span {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
}

.vpc-map-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.vpc-map-evidence-rail {
  padding: 10px 14px;
  border-bottom: 1px solid #e6eaf2;
  background: #fbfdff;
  display: grid;
  grid-template-columns: minmax(210px, 0.72fr) minmax(0, 1.28fr);
  gap: 10px;
  align-items: stretch;
}

.vpc-map-evidence-copy {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #e1e8f3;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  align-content: center;
  gap: 2px;
}

.vpc-map-evidence-copy span,
.vpc-map-evidence-item span,
.vpc-map-evidence-copy em,
.vpc-map-evidence-item em {
  min-width: 0;
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  line-height: 17px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-map-evidence-copy strong {
  min-width: 0;
  overflow: hidden;
  color: #101828;
  font-size: 15px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-map-evidence-items {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.vpc-map-evidence-item {
  min-width: 0;
  min-height: 68px;
  padding: 8px 9px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  align-content: start;
  gap: 2px;
}

.vpc-map-evidence-item strong {
  min-width: 0;
  overflow: hidden;
  color: #101828;
  font-size: 15px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-map-evidence-ok {
  border-color: rgba(18, 183, 106, 0.24);
  background: #f4fff8;
}

.vpc-map-evidence-ok strong {
  color: #087443;
}

.vpc-map-evidence-warn {
  border-color: rgba(247, 144, 9, 0.25);
  background: #fffaf2;
}

.vpc-map-evidence-warn strong {
  color: #b54708;
}

.vpc-map-evidence-error {
  border-color: rgba(217, 45, 32, 0.24);
  background: #fff8f7;
}

.vpc-map-evidence-error strong {
  color: #b42318;
}

.vpc-map-evidence-idle {
  background: #f8fafc;
}

.vpc-map-canvas,
.vpc-track-canvas {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(22, 100, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 100, 255, 0.05) 1px, transparent 1px),
    #eef4fa;
  background-size: 42px 42px;
}

.vpc-map-canvas {
  min-height: 560px;
}

.vpc-map-canvas-amap,
.vpc-track-canvas-amap {
  background: #ffffff;
}

.vpc-map-canvas-amap .vp-map,
.vpc-track-canvas-amap .vp-map {
  height: 100%;
}

.vpc-amap-monitor {
  height: 560px;
}

.vpc-amap-replay {
  height: 470px;
  border-radius: 8px;
}

.vpc-map-canvas-amap .vp-map.vpc-amap-monitor {
  min-height: 560px;
  height: 560px;
}

.vpc-track-canvas-amap .vp-map.vpc-amap-replay {
  min-height: 470px;
  height: 470px;
}

.vpc-map-canvas-amap .vp-map-fallback-status {
  bottom: 58px;
}

.vpc-map-canvas-amap .vp-map-provider-status {
  top: auto;
  right: 14px;
  bottom: 14px;
  left: auto;
  z-index: 12;
}

.vpc-map-data-strip {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  z-index: 9;
  display: grid;
  grid-template-columns: 0.66fr 0.56fr minmax(180px, 1.08fr) minmax(184px, 1.08fr) 0.82fr 0.72fr;
  gap: 8px;
  pointer-events: none;
}

.vpc-map-data-card {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(223, 230, 241, 0.92);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.08);
  display: grid;
  gap: 2px;
}

.vpc-map-data-strip span {
  color: #667085;
  font-size: 11px;
  line-height: 16px;
}

.vpc-map-data-strip strong {
  min-width: 0;
  overflow: hidden;
  color: #101828;
  font-size: 12px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-map-data-value-compact {
  display: none;
}

.vpc-map-empty-overlay {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 10;
  width: min(430px, calc(100% - 56px));
  padding: 14px;
  border: 1px solid rgba(213, 222, 237, 0.92);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.12);
  transform: translate(-50%, -50%);
  display: grid;
  gap: 7px;
  pointer-events: none;
}

.vpc-map-empty-overlay span {
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid #d8e5ff;
  border-radius: 7px;
  background: #f3f7ff;
  color: #1664ff;
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
}

.vpc-map-empty-overlay strong {
  color: #101828;
  font-size: 18px;
  line-height: 24px;
}

.vpc-map-empty-overlay em,
.vpc-map-empty-overlay small {
  color: #475467;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

.vpc-map-empty-overlay code {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #e4eaf3;
  border-radius: 7px;
  background: #f8fafc;
  color: #344054;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-map-empty-overlay-error {
  border-color: rgba(217, 45, 32, 0.22);
  background: rgba(255, 248, 247, 0.96);
}

.vpc-map-empty-overlay-error span {
  border-color: rgba(217, 45, 32, 0.22);
  background: #fff4f2;
  color: #b42318;
}

.vpc-map-empty-overlay-warn {
  border-color: rgba(247, 144, 9, 0.26);
}

.vpc-map-empty-overlay-warn span {
  border-color: rgba(247, 144, 9, 0.24);
  background: #fffaf0;
  color: #b54708;
}

.vpc-map-base {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(26deg, transparent 0 42%, rgba(255, 255, 255, 0.82) 42% 45%, transparent 45%),
    linear-gradient(144deg, transparent 0 38%, rgba(255, 255, 255, 0.74) 38% 41%, transparent 41%),
    linear-gradient(77deg, transparent 0 58%, rgba(207, 218, 231, 0.82) 58% 60%, transparent 60%);
}

.vpc-road {
  position: absolute;
  height: 12px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 1px #d7dfeb, 0 8px 18px rgba(71, 84, 103, 0.08);
}

.vpc-road-a {
  left: -8%;
  top: 27%;
  width: 74%;
  transform: rotate(15deg);
}

.vpc-road-b {
  right: -8%;
  top: 46%;
  width: 88%;
  transform: rotate(-18deg);
}

.vpc-road-c {
  left: 18%;
  bottom: 19%;
  width: 58%;
  transform: rotate(5deg);
}

.vpc-district {
  position: absolute;
  padding: 6px 9px;
  border: 1px solid rgba(102, 112, 133, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #667085;
  font-size: 12px;
}

.vpc-district-a {
  left: 29%;
  top: 19%;
}

.vpc-district-b {
  right: 28%;
  top: 22%;
}

.vpc-district-c {
  left: 42%;
  bottom: 22%;
}

.vpc-pin {
  position: absolute;
  z-index: 4;
  min-width: 116px;
  min-height: 34px;
  border: 0;
  background: transparent;
  transform: translate(-18px, -17px);
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font: inherit;
}

.vpc-pin span {
  width: 18px;
  height: 18px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #12b76a;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.22);
  flex: 0 0 auto;
}

.vpc-pin strong {
  max-width: 96px;
  padding: 5px 8px;
  border: 1px solid #d7dfeb;
  border-radius: 8px;
  background: #ffffff;
  color: #344054;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.12);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vpc-pin-warning span {
  background: #f79009;
}

.vpc-pin-offline span {
  background: #98a2b3;
}

.vpc-pin-active span {
  background: #1664ff;
  box-shadow: 0 0 0 8px rgba(22, 100, 255, 0.14), 0 8px 22px rgba(22, 100, 255, 0.3);
}

.vpc-pin-active strong {
  border-color: #9db8ff;
  color: #1664ff;
}

.vpc-map-legend {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 8;
  padding: 9px 10px;
  border: 1px solid #dfe6f1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  gap: 12px;
  align-items: center;
  color: #667085;
  font-size: 12px;
}

.vpc-map-legend span {
  display: flex;
  gap: 5px;
  align-items: center;
}

.vpc-map-focus {
  position: absolute;
  top: 92px;
  right: 14px;
  z-index: 9;
  width: min(270px, calc(100% - 28px));
  padding: 12px;
  border: 1px solid #dfe6f1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.12);
  display: grid;
  gap: 8px;
}

.vpc-map-focus > strong {
  color: #101828;
  font-size: 18px;
  line-height: 24px;
}

.vpc-map-focus > em,
.vpc-map-focus div span {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-map-focus div {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 8px;
}

.vpc-map-focus .vpc-map-focus-protocols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.vpc-map-focus-protocol {
  min-width: 0;
  min-height: 34px;
  padding: 6px 7px;
  border: 1px solid #e3e9f3;
  border-radius: 8px;
  background: #f8fbff;
  color: #667085;
  font-size: 11px;
  font-weight: 800;
  line-height: 14px;
  display: grid;
  gap: 2px;
}

.vpc-map-focus-protocol em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

.vpc-map-focus-protocol b {
  color: #101828;
  font-size: 12px;
  line-height: 16px;
}

.vpc-map-focus-protocol-online {
  border-color: #a6f4c5;
  background: #f0fdf4;
  color: #027a48;
}

.vpc-map-focus-protocol-warning {
  border-color: #fedf89;
  background: #fffbeb;
  color: #b54708;
}

.vpc-map-focus-protocol-offline {
  background: #f2f4f7;
}

.vpc-map-focus div b {
  color: #101828;
  font-size: 12px;
  line-height: 18px;
  word-break: break-word;
}

.vpc-map-focus div b .semi-tag {
  margin-right: 4px;
  vertical-align: middle;
}

.vpc-map-focus-empty {
  width: min(240px, calc(100% - 28px));
}

.vpc-map-focus-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.vpc-map-focus-actions .semi-button {
  width: 100%;
}

.vpc-map-focus-actions .semi-button:first-child {
  border: 1px solid #d8dee9;
  background: #f8fbff;
  color: #344054;
  font-weight: 700;
}

.vpc-map-focus-actions .semi-button:nth-child(2) {
  border: 1px solid #d8dee9;
  background: #ffffff;
  color: #1664ff;
  font-weight: 700;
}

.vpc-map-foundation-strip {
  padding: 10px 12px 12px;
  border-top: 1px solid #e6eaf2;
  background: #ffffff;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.vpc-map-foundation-strip article {
  min-width: 0;
  min-height: 72px;
  padding: 9px 10px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  align-content: start;
  gap: 3px;
}

.vpc-map-foundation-ok {
  border-color: rgba(18, 183, 106, 0.24);
  background: #f4fff8;
}

.vpc-map-foundation-ok strong {
  color: #087443;
}

.vpc-map-foundation-warn {
  border-color: rgba(247, 144, 9, 0.25);
  background: #fffaf2;
}

.vpc-map-foundation-warn strong {
  color: #b54708;
}

.vpc-map-foundation-error {
  border-color: rgba(217, 45, 32, 0.24);
  background: #fff8f7;
}

.vpc-map-foundation-error strong {
  color: #b42318;
}

.vpc-map-foundation-strip span,
.vpc-map-foundation-strip em {
  min-width: 0;
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  line-height: 17px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-map-foundation-strip strong {
  min-width: 0;
  overflow: hidden;
  color: #101828;
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-detail {
  display: grid;
  align-content: start;
  gap: 12px;
}

.vpc-detail-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.vpc-detail-title h2 {
  margin: 6px 0 0;
  color: #101828;
  font-size: 25px;
  line-height: 32px;
}

.vpc-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.vpc-status-online {
  background: #ecfdf3;
  color: #027a48;
}

.vpc-status-warning {
  background: #fff7e6;
  color: #b54708;
}

.vpc-status-offline {
  background: #f2f4f7;
  color: #667085;
}

.vpc-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border-radius: 8px;
  background: #f2f5fa;
}

.vpc-tabs button {
  min-height: 32px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #667085;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.vpc-tabs .vpc-tab-active {
  background: #ffffff;
  color: #1664ff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.07);
}

.vpc-active-source-strip {
  padding: 10px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 0.8fr;
  gap: 10px;
}

.vpc-active-source-strip div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.vpc-active-source-strip span {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
}

.vpc-active-source-strip strong {
  color: #101828;
  font-size: 13px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.vpc-info-card,
.vpc-live-grid,
.vpc-field-table,
.vpc-source-card,
.vpc-alert-mini,
.vpc-rule-line,
.vpc-confidence-card,
.vpc-detail-digest-card {
  border: 1px solid #e7ebf3;
  border-radius: 8px;
  background: #ffffff;
}

.vpc-detail-digest {
  display: grid;
  gap: 8px;
}

.vpc-detail-digest-card {
  width: 100%;
  min-height: 86px;
  padding: 10px 11px;
  cursor: pointer;
  display: grid;
  align-content: start;
  gap: 3px;
  text-align: left;
  font: inherit;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.vpc-detail-digest-card:hover {
  border-color: #b8cdfd;
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08);
  transform: translateY(-1px);
}

.vpc-detail-digest-card span,
.vpc-detail-digest-card em,
.vpc-detail-digest-card small {
  min-width: 0;
  color: #667085;
  font-size: 12px;
  line-height: 17px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-detail-digest-card span {
  color: #344054;
  font-weight: 700;
}

.vpc-detail-digest-card strong {
  min-width: 0;
  color: #101828;
  font-size: 18px;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-detail-digest-ok,
.vpc-detail-digest-ready {
  border-color: #a6f4c5;
  background: #f7fef9;
}

.vpc-detail-digest-warning {
  border-color: #fedf89;
  background: #fffcf5;
}

.vpc-detail-digest-error {
  border-color: #fecdca;
  background: #fffbfa;
}

.vpc-confidence-card {
  padding: 12px;
  display: grid;
  gap: 9px;
}

.vpc-diagnostic-path {
  padding: 12px;
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  display: grid;
  gap: 10px;
}

.vpc-diagnostic-path-head {
  display: grid;
  gap: 3px;
}

.vpc-diagnostic-path-head span,
.vpc-diagnostic-step span,
.vpc-diagnostic-step em {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-diagnostic-path-head strong {
  color: #101828;
  font-size: 15px;
  line-height: 20px;
}

.vpc-diagnostic-path-steps {
  display: grid;
  gap: 8px;
}

.vpc-diagnostic-step {
  position: relative;
  min-width: 0;
  min-height: 72px;
  padding: 9px 10px 9px 14px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfdff;
  cursor: pointer;
  text-align: left;
  display: grid;
  gap: 3px;
}

.vpc-diagnostic-step::before {
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: #98a2b3;
  content: '';
}

.vpc-diagnostic-step:hover,
.vpc-diagnostic-step:focus-visible {
  border-color: #b8cdfd;
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 100, 255, 0.08);
}

.vpc-diagnostic-step strong {
  color: #101828;
  font-size: 14px;
  line-height: 19px;
}

.vpc-diagnostic-step em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-diagnostic-step-ready::before {
  background: #12b76a;
}

.vpc-diagnostic-step-ready {
  border-color: #d1fadf;
  background: #f7fef9;
}

.vpc-diagnostic-step-warning::before {
  background: #f79009;
}

.vpc-diagnostic-step-warning {
  border-color: #fedf89;
  background: #fffcf5;
}

.vpc-diagnostic-step-error::before {
  background: #d92d20;
}

.vpc-diagnostic-step-error {
  border-color: #fecdca;
  background: #fffbfa;
}

.vpc-confidence-ok {
  border-color: #a6f4c5;
  background: #f7fef9;
}

.vpc-confidence-warning {
  border-color: #fedf89;
  background: #fffcf5;
}

.vpc-confidence-error {
  border-color: #fecdca;
  background: #fffbfa;
}

.vpc-confidence-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.vpc-confidence-head div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.vpc-confidence-head span,
.vpc-confidence-metrics em {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-confidence-head strong {
  color: #101828;
  font-size: 16px;
  line-height: 22px;
}

.vpc-confidence-card p {
  margin: 0;
  color: #475467;
  font-size: 12px;
  line-height: 18px;
}

.vpc-confidence-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.vpc-confidence-metrics span {
  min-width: 0;
  min-height: 50px;
  padding: 7px 8px;
  border: 1px solid rgba(223, 230, 241, 0.82);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
  display: grid;
  align-content: center;
  gap: 2px;
}

.vpc-confidence-metrics strong {
  min-width: 0;
  overflow: hidden;
  color: #101828;
  font-size: 13px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.vpc-info-card {
  padding: 12px;
  display: grid;
  gap: 10px;
}

.vpc-info-line {
  display: grid;
  gap: 3px;
}

.vpc-info-line span,
.vpc-live-grid span,
.vpc-field-row span,
.vpc-source-card span,
.vpc-source-card em,
.vpc-alert-mini span,
.vpc-rule-line span,
.vpc-source-row span {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
}

.vpc-info-line strong,
.vpc-source-card strong,
.vpc-alert-mini strong,
.vpc-rule-line strong,
.vpc-source-row strong {
  color: #101828;
  font-size: 13px;
  line-height: 18px;
  word-break: break-word;
}

.vpc-live-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
}

.vpc-live-grid div {
  min-height: 74px;
  padding: 12px;
  display: grid;
  align-content: center;
  gap: 6px;
  border-right: 1px solid #edf1f6;
  border-bottom: 1px solid #edf1f6;
}

.vpc-live-grid div:nth-child(2n) {
  border-right: 0;
}

.vpc-live-grid div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.vpc-live-grid strong {
  color: #101828;
  font-size: 18px;
  line-height: 24px;
}

.vpc-realtime-evidence {
  border: 1px solid #e7ebf3;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.vpc-realtime-evidence article {
  min-height: 66px;
  padding: 10px 12px;
  display: grid;
  gap: 3px;
  border-bottom: 1px solid #edf1f6;
}

.vpc-realtime-evidence article:last-child {
  border-bottom: 0;
}

.vpc-realtime-evidence span,
.vpc-realtime-evidence em {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-realtime-evidence strong {
  color: #101828;
  font-size: 13px;
  line-height: 19px;
  word-break: break-word;
}

.vpc-field-table {
  max-height: 440px;
  overflow: auto;
}

.vpc-field-inspector {
  display: grid;
  gap: 10px;
}

.vpc-field-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.vpc-field-protocols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border-radius: 8px;
  background: #f2f5fa;
}

.vpc-field-protocols button {
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #667085;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  display: grid;
  place-items: center;
  gap: 2px;
}

.vpc-field-protocols button:disabled {
  cursor: not-allowed;
  color: #b6bfcc;
}

.vpc-field-protocols em {
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.vpc-field-protocols .vpc-field-protocol-active {
  background: #ffffff;
  color: #1664ff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.07);
}

.vpc-field-search .semi-input-wrapper {
  min-height: 34px;
}

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

.vpc-core-field {
  min-height: 74px;
  padding: 9px 10px;
  border: 1px solid #dfe6f1;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  display: grid;
  align-content: center;
  gap: 3px;
}

.vpc-core-field:hover:not(:disabled) {
  border-color: #9dbafc;
  background: #f8fbff;
}

.vpc-core-field span,
.vpc-core-field em {
  min-width: 0;
  overflow: hidden;
  color: #667085;
  font-size: 11px;
  line-height: 16px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-core-field strong {
  min-width: 0;
  overflow: hidden;
  color: #101828;
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-core-field-missing {
  cursor: not-allowed;
  border-style: dashed;
  background: #fbfcff;
}

.vpc-core-field-missing strong {
  color: #98a2b3;
}

.vpc-field-summary {
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid #e7ebf3;
  border-radius: 8px;
  background: #fbfcff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vpc-field-summary span {
  color: #667085;
  font-size: 12px;
}

.vpc-field-summary strong {
  color: #1664ff;
  font-size: 12px;
}

.vpc-field-group {
  border: 1px solid #e7ebf3;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.vpc-field-group + .vpc-field-group {
  margin-top: 0;
}

.vpc-field-group-head {
  min-height: 34px;
  padding: 8px 11px;
  background: #f6f8fb;
  border-bottom: 1px solid #edf1f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vpc-field-group-head strong {
  color: #344054;
  font-size: 12px;
  line-height: 18px;
}

.vpc-field-group-head span {
  min-width: 24px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #e8f1ff;
  color: #1664ff;
  font-size: 11px;
  font-weight: 800;
}

.vpc-field-row {
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
  align-items: center;
  border-bottom: 1px solid #edf1f6;
}

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

.vpc-field-row > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.vpc-field-row strong {
  color: #101828;
  font-size: 13px;
  word-break: break-word;
}

.vpc-field-row button {
  min-width: 42px;
  min-height: 28px;
  border: 1px solid #d8e3f4;
  border-radius: 7px;
  background: #f8fbff;
  color: #1664ff;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.vpc-field-row button:hover,
.vpc-field-row button:focus-visible {
  border-color: #9db8ff;
  background: #edf4ff;
}

.vpc-source-stack {
  display: grid;
  gap: 10px;
}

.vpc-source-decision {
  padding: 12px;
  border: 1px solid #b8cdfd;
  border-radius: 8px;
  background: #f8fbff;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vpc-source-decision div {
  display: grid;
  gap: 4px;
}

.vpc-source-decision span {
  color: #667085;
  font-size: 12px;
}

.vpc-source-decision strong {
  color: #101828;
  font-size: 13px;
  line-height: 18px;
}

.vpc-source-decision em {
  color: #475467;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

.vpc-consistency-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #e7ebf3;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.vpc-consistency-metrics div {
  min-height: 66px;
  padding: 10px;
  display: grid;
  align-content: center;
  gap: 5px;
  border-right: 1px solid #edf1f6;
}

.vpc-consistency-metrics div:last-child {
  border-right: 0;
}

.vpc-consistency-metrics span {
  color: #667085;
  font-size: 12px;
}

.vpc-consistency-metrics strong {
  color: #101828;
  font-size: 16px;
  line-height: 22px;
}

.vpc-source-responsibility-table {
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
  display: grid;
}

.vpc-source-responsibility-head,
.vpc-source-responsibility-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.vpc-source-responsibility-head {
  display: none;
}

.vpc-source-responsibility-head span,
.vpc-source-responsibility-row span,
.vpc-source-responsibility-row em {
  min-width: 0;
  overflow: hidden;
  color: #667085;
  font-size: 11px;
  line-height: 16px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-source-responsibility-row {
  min-height: 0;
  padding: 10px;
  border-bottom: 1px solid #edf1f6;
}

.vpc-source-responsibility-row:last-child {
  border-bottom: 0;
}

.vpc-source-responsibility-row > div {
  min-width: 0;
  min-height: 50px;
  padding: 8px;
  border: 1px solid rgba(223, 230, 241, 0.82);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.68);
  display: grid;
  align-content: center;
  gap: 3px;
}

.vpc-source-responsibility-name {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.vpc-source-responsibility-name > .semi-tag:last-child {
  grid-column: 2;
  justify-self: start;
}

.vpc-source-responsibility-row strong {
  min-width: 0;
  overflow: hidden;
  color: #101828;
  font-size: 12px;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-source-responsibility-row > div:nth-child(6),
.vpc-source-responsibility-actions {
  grid-column: 1 / -1;
}

.vpc-source-responsibility-ready {
  box-shadow: inset 3px 0 0 #12b76a;
}

.vpc-source-responsibility-ready > div:nth-child(2) strong {
  color: #027a48;
}

.vpc-source-responsibility-warning {
  box-shadow: inset 3px 0 0 #f79009;
  background: #fffcf5;
}

.vpc-source-responsibility-warning > div:nth-child(2) strong {
  color: #b54708;
}

.vpc-source-responsibility-error {
  box-shadow: inset 3px 0 0 #d92d20;
  background: #fffbfa;
}

.vpc-source-responsibility-error > div:nth-child(2) strong {
  color: #b42318;
}

.vpc-source-responsibility-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px !important;
}

.vpc-source-responsibility-actions .semi-button {
  width: 100%;
  min-width: 0;
  padding-inline: 6px;
}

.vpc-source-card,
.vpc-alert-mini,
.vpc-rule-line {
  padding: 12px;
  display: grid;
  gap: 6px;
}

.vpc-source-card div {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.vpc-source-card-actions {
  padding-top: 2px;
  justify-content: flex-end;
}

.vpc-source-card-actions .semi-button {
  min-width: 44px;
  padding-inline: 8px;
}

.vpc-source-card-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px !important;
}

.vpc-source-card-metrics span {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #edf1f6;
  border-radius: 7px;
  background: #fbfcff;
  display: grid;
  gap: 2px;
}

.vpc-source-card-metrics em {
  color: #667085;
  font-size: 11px;
  line-height: 15px;
  font-style: normal;
}

.vpc-source-card-metrics strong {
  min-width: 0;
  overflow: hidden;
  color: #101828;
  font-size: 12px;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-evidence-tags,
.vpc-alert-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vpc-evidence-tags span,
.vpc-alert-evidence span {
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #f2f6fb;
  color: #475467;
  font-size: 12px;
  font-weight: 700;
}

.vpc-alert-evidence span:last-child {
  background: #edf4ff;
  color: #1664ff;
}

.vpc-alert-mini {
  align-items: start;
}

.vpc-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  color: #98a2b3;
  font-size: 13px;
}

.vpc-replay-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.vpc-replay-sample-gate {
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #d8e6ff;
  border-radius: 8px;
  background: #f7faff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vpc-replay-sample-gate div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.vpc-replay-sample-gate strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-replay-sample-gate span {
  color: #475467;
  font-size: 12px;
  line-height: 18px;
}

.vpc-replay-sample-closed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.vpc-replay-sample-closed article {
  min-width: 0;
  min-height: 92px;
  padding: 12px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  align-content: start;
  gap: 5px;
}

.vpc-replay-sample-closed span,
.vpc-replay-sample-closed em {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-replay-sample-closed strong {
  color: #101828;
  font-size: 15px;
  line-height: 20px;
}

.vpc-replay-summary-card {
  min-height: 92px;
  padding: 14px 15px;
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  display: grid;
  align-content: center;
  gap: 4px;
}

.vpc-replay-summary-card span,
.vpc-replay-summary-card em {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-replay-summary-card strong {
  color: #101828;
  font-size: 23px;
  line-height: 29px;
}

.vpc-replay-summary-blue {
  border-color: #b8cdfd;
}

.vpc-replay-summary-green {
  border-color: #a6f4c5;
}

.vpc-replay-summary-orange {
  border-color: #fedf89;
}

.vpc-replay-summary-cyan {
  border-color: #a5f3fc;
}

.vpc-track-quality-audit {
  padding: 12px;
  border: 1px solid #d8eee3;
  border-radius: 8px;
  background: #f6fef9;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(104px, auto));
  gap: 10px;
  align-items: stretch;
}

.vpc-track-quality-warning {
  border-color: #fedf89;
  background: #fffcf5;
}

.vpc-track-quality-empty {
  border-color: #e4ebf5;
  background: #fbfdff;
}

.vpc-track-quality-main {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
}

.vpc-track-quality-main span,
.vpc-track-quality-main em,
.vpc-track-quality-flags span {
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

.vpc-track-quality-main strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-track-quality-audit > div:not(.vpc-track-quality-main):not(.vpc-track-quality-flags) {
  min-height: 58px;
  padding: 9px;
  border: 1px solid rgba(171, 239, 198, 0.85);
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  align-content: center;
  gap: 4px;
}

.vpc-track-quality-warning > div:not(.vpc-track-quality-main):not(.vpc-track-quality-flags) {
  border-color: rgba(254, 223, 137, 0.9);
}

.vpc-track-quality-flags {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vpc-track-quality-flags span {
  padding: 6px 9px;
  border: 1px solid #e4ebf5;
  border-radius: 999px;
  background: #ffffff;
}

.vpc-track-window-audit {
  padding: 12px;
  border: 1px solid #b8cdfd;
  border-radius: 8px;
  background: #f5f9ff;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(112px, 0.62fr));
  gap: 10px;
  align-items: stretch;
}

.vpc-track-window-warning {
  border-color: #fedf89;
  background: #fffcf5;
}

.vpc-track-window-empty {
  border-color: #e4ebf5;
  background: #fbfdff;
}

.vpc-track-window-main {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
}

.vpc-track-window-main span,
.vpc-track-window-main em {
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

.vpc-track-window-main strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-track-window-audit > div:not(.vpc-track-window-main) {
  min-width: 0;
  min-height: 58px;
  padding: 9px;
  border: 1px solid rgba(184, 205, 253, 0.9);
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  align-content: center;
  gap: 4px;
}

.vpc-track-window-warning > div:not(.vpc-track-window-main) {
  border-color: rgba(254, 223, 137, 0.9);
}

.vpc-track-window-audit > div:not(.vpc-track-window-main) span {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
}

.vpc-track-window-audit > div:not(.vpc-track-window-main) strong {
  color: #101828;
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.vpc-replay-query-panel {
  padding-bottom: 14px;
}

.vpc-replay-query-status {
  padding: 12px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) repeat(4, minmax(96px, 0.55fr));
  gap: 10px;
  align-items: stretch;
}

.vpc-replay-query-status-loading {
  border-color: rgba(22, 100, 255, 0.18);
  background: #f5f9ff;
}

.vpc-replay-query-status-ready {
  border-color: rgba(18, 183, 106, 0.22);
  background: #f4fff8;
}

.vpc-replay-query-status-empty {
  border-color: rgba(247, 144, 9, 0.24);
  background: #fffaf2;
}

.vpc-replay-query-status-error {
  border-color: rgba(217, 45, 32, 0.22);
  background: #fff8f7;
}

.vpc-replay-query-status-disabled {
  border-color: rgba(102, 112, 133, 0.18);
  background: #f8fafc;
}

.vpc-replay-query-status-main {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
}

.vpc-replay-query-status-main span,
.vpc-replay-query-status-main em {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-replay-query-status-main strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-replay-query-status-loading .vpc-replay-query-status-main strong {
  color: #175cd3;
}

.vpc-replay-query-status-ready .vpc-replay-query-status-main strong {
  color: #087443;
}

.vpc-replay-query-status-empty .vpc-replay-query-status-main strong {
  color: #b54708;
}

.vpc-replay-query-status-error .vpc-replay-query-status-main strong {
  color: #b42318;
}

.vpc-replay-query-grid {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(210px, 1fr) 112px minmax(150px, auto) auto;
  gap: 12px;
  align-items: end;
}

.vpc-replay-query-grid label {
  display: grid;
  gap: 7px;
}

.vpc-replay-query-grid label > span {
  color: #667085;
  font-size: 12px;
}

.vpc-replay-query-source {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid #e3e8f0;
  border-radius: 8px;
  background: #f8fafc;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.vpc-replay-query-source span {
  min-width: 52px;
  color: #1664ff;
  font-size: 12px;
  font-weight: 800;
}

.vpc-replay-query-source strong {
  min-width: 0;
  color: #475467;
  font-size: 12px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-replay-query-source em {
  grid-column: 1 / -1;
  color: #8a4b0f;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
  overflow-wrap: anywhere;
}

.vpc-replay-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.75fr);
  gap: 12px;
}

.vpc-track-canvas {
  min-height: 470px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.vpc-track-line {
  position: absolute;
  left: 19%;
  top: 68%;
  width: 62%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1664ff, #06b6d4);
  transform: rotate(-28deg);
  transform-origin: left center;
  opacity: 0.82;
}

.vpc-track-point {
  position: absolute;
  z-index: 4;
  min-width: 68px;
  min-height: 30px;
  border: 1px solid #d6e2f3;
  border-radius: 999px;
  background: #ffffff;
  color: #344054;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.12);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.vpc-track-point-running {
  border-color: #bfe7d2;
}

.vpc-track-point-alert {
  border-color: #ffc98b;
}

.vpc-track-point-active {
  border-color: #1664ff;
  background: #1664ff;
  color: #ffffff;
}

.vpc-replay-focus {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 7;
  width: min(300px, calc(100% - 28px));
  padding: 12px;
  border: 1px solid #dfe6f1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.12);
  display: grid;
  gap: 7px;
}

.vpc-replay-focus > span {
  width: fit-content;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef4ff;
  color: #1664ff;
  font-size: 12px;
  font-weight: 800;
}

.vpc-replay-focus strong {
  color: #101828;
  font-size: 15px;
  line-height: 21px;
}

.vpc-replay-focus em {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-replay-focus div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vpc-replay-focus div span {
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #f2f6fb;
  color: #475467;
  font-size: 12px;
  font-weight: 800;
}

.vpc-replay-focus-address {
  align-items: center;
}

.vpc-replay-focus-address .semi-tag {
  flex: 0 0 auto;
}

.vpc-replay-controls {
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr) auto minmax(170px, auto);
  gap: 12px;
  align-items: center;
}

.vpc-replay-source {
  margin-top: 10px;
  padding: 8px 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid #d8eee3;
  border-radius: 8px;
  background: #f5fbf8;
}

.vpc-replay-source span {
  color: #3f5f50;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
}

.vpc-current-node-evidence {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: #fbfcff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(2, minmax(86px, auto)) minmax(180px, 0.8fr) auto auto;
  gap: 10px;
  align-items: center;
}

.vpc-current-node-evidence > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.vpc-current-node-address {
  padding-left: 10px;
  border-left: 1px solid #e4ebf5;
}

.vpc-current-node-evidence span,
.vpc-current-node-evidence em {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-current-node-evidence strong {
  min-width: 0;
  overflow: hidden;
  color: #101828;
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-current-node-evidence .semi-button {
  min-width: 62px;
}

.vpc-current-node-evidence .semi-button[theme='borderless'],
.vpc-current-node-evidence .semi-button.semi-button-borderless {
  border: 1px solid #d8dee9;
  background: #ffffff;
  color: #1664ff;
  font-weight: 800;
}

.vpc-replay-controls input {
  width: 100%;
  accent-color: #1664ff;
}

.vpc-replay-speed {
  min-height: 32px;
  padding: 3px;
  border: 1px solid #d8dee9;
  border-radius: 8px;
  background: #f7f9fc;
  display: grid;
  grid-template-columns: repeat(3, 34px);
  gap: 3px;
}

.vpc-replay-speed button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #667085;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.vpc-replay-speed button:hover,
.vpc-replay-speed-active {
  background: #ffffff !important;
  color: #1664ff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.vpc-replay-progress {
  color: #475467;
  font-size: 12px;
  line-height: 18px;
  text-align: right;
  white-space: nowrap;
}

.vpc-timeline {
  display: grid;
  gap: 9px;
}

.vpc-timeline-window-note {
  min-height: 44px;
  margin-bottom: 10px;
  padding: 9px 10px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vpc-timeline-window-note span {
  min-width: 0;
  color: #667085;
  font-size: 12px;
  line-height: 18px;
}

.vpc-timeline-window-note .semi-button {
  flex: 0 0 auto;
  min-width: 78px;
}

.vpc-timeline-item {
  width: 100%;
  min-height: 88px;
  padding: 11px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  display: grid;
  gap: 4px;
  font: inherit;
}

.vpc-timeline-item-active,
.vpc-timeline-item:hover {
  border-color: #b8cdfd;
  background: #f6f9ff;
}

.vpc-timeline-item time {
  color: #1664ff;
  font-size: 12px;
  font-weight: 700;
}

.vpc-timeline-item strong {
  color: #101828;
  font-size: 13px;
}

.vpc-timeline-item span,
.vpc-timeline-item em {
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

.vpc-replay-bottom {
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1.25fr);
  gap: 12px;
}

.vpc-segment-list {
  display: grid;
  gap: 8px;
}

.vpc-replay-row-load {
  min-height: 48px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #edf1f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vpc-replay-row-load span {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
}

.vpc-replay-row-load > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.vpc-replay-row-load .semi-button {
  min-width: 92px;
}

.vpc-segment-row {
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.vpc-segment-row strong {
  color: #101828;
  font-size: 13px;
  line-height: 18px;
}

.vpc-segment-row span,
.vpc-segment-row em {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
  font-weight: 700;
}

.vpc-segment-alert {
  border-color: #fedf89;
  background: #fffaf0;
}

.vpc-segment-stop {
  background: #f8fafc;
}

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

.vpc-replay-evidence-card {
  min-height: 142px;
  padding: 12px;
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  gap: 8px;
  align-content: start;
}

.vpc-replay-evidence-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vpc-replay-evidence-card strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-replay-evidence-card span,
.vpc-replay-evidence-card p {
  margin: 0;
  color: #667085;
  font-size: 12px;
  line-height: 18px;
}

.vpc-replay-evidence-warning {
  border-color: #fedf89;
  background: #fffaf0;
}

.vpc-history-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.75fr);
  gap: 12px;
  align-items: start;
}

.vpc-history-query-status {
  padding: 12px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) repeat(4, minmax(96px, 0.55fr));
  gap: 10px;
  align-items: stretch;
}

.vpc-history-query-status-loading {
  border-color: rgba(22, 100, 255, 0.18);
  background: #f5f9ff;
}

.vpc-history-query-status-ready {
  border-color: rgba(18, 183, 106, 0.22);
  background: #f4fff8;
}

.vpc-history-query-status-empty {
  border-color: rgba(247, 144, 9, 0.24);
  background: #fffaf2;
}

.vpc-history-query-status-error {
  border-color: rgba(217, 45, 32, 0.22);
  background: #fff8f7;
}

.vpc-history-query-status-disabled {
  border-color: rgba(102, 112, 133, 0.18);
  background: #f8fafc;
}

.vpc-history-query-status-main {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
}

.vpc-history-query-status-main span,
.vpc-history-query-status-main em {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-history-query-status-main strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-history-query-status-loading .vpc-history-query-status-main strong {
  color: #175cd3;
}

.vpc-history-query-status-ready .vpc-history-query-status-main strong {
  color: #087443;
}

.vpc-history-query-status-empty .vpc-history-query-status-main strong {
  color: #b54708;
}

.vpc-history-query-status-error .vpc-history-query-status-main strong {
  color: #b42318;
}

.vpc-query-panel {
  display: grid;
  gap: 6px;
  align-content: start;
}

.vpc-history-context {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #d8e7ff;
  border-radius: 8px;
  background: #f7fbff;
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.vpc-history-context-linked,
.vpc-history-context-unmatched {
  grid-template-columns: minmax(220px, 1fr) auto auto;
}

.vpc-history-context-unmatched {
  border-color: #e4e7ec;
  background: #fbfcff;
}

.vpc-history-field-context {
  min-height: 48px;
  padding: 9px 10px;
  border: 1px solid #b8cdfd;
  border-radius: 8px;
  background: #f5f9ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vpc-history-field-context div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.vpc-history-field-context span,
.vpc-history-field-context em {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-history-field-context strong {
  color: #1664ff;
  font-size: 13px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-custom-field-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vpc-custom-field-options span {
  max-width: 100%;
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid #b8cdfd;
  border-radius: 999px;
  background: #edf4ff;
  color: #1664ff;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-history-context-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.vpc-history-context-protocols,
.vpc-history-context-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.vpc-history-context-actions .semi-button {
  min-width: 58px;
  padding-inline: 8px;
}

.vpc-history-context span,
.vpc-history-context em {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-history-context strong {
  min-width: 0;
  overflow: hidden;
  color: #101828;
  font-size: 13px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-query-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1fr) 130px;
  gap: 14px;
}

.vpc-query-grid label {
  display: grid;
  gap: 7px;
  align-content: start;
  align-self: start;
}

.vpc-query-grid label > span {
  color: #667085;
  font-size: 12px;
}

.vpc-date-range-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.vpc-time-preset-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.vpc-time-preset-buttons button {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #d8dee9;
  border-radius: 8px;
  background: #ffffff;
  color: #475467;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  line-height: 18px;
}

.vpc-time-preset-buttons button:hover,
.vpc-time-preset-buttons button:focus-visible {
  border-color: #9db8ff;
  background: #edf4ff;
  color: #1664ff;
  outline: none;
}

.vpc-field-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vpc-field-options button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #d8dee9;
  border-radius: 8px;
  background: #ffffff;
  color: #475467;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}

.vpc-field-options .vpc-chip-active {
  border-color: #9db8ff;
  background: #edf4ff;
  color: #1664ff;
  font-weight: 700;
}

.vpc-query-preview {
  display: grid;
  gap: 12px;
  align-content: start;
}

.vpc-query-preview-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.vpc-query-preview-actions .semi-button {
  min-width: 74px;
  padding-inline: 9px;
  border: 1px solid #d8dee9;
  background: #ffffff;
  color: #1664ff;
  font-weight: 700;
}

.vpc-query-api {
  display: grid;
  gap: 5px;
}

.vpc-query-api strong {
  color: #101828;
  font-size: 13px;
  line-height: 19px;
}

.vpc-query-api span {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
}

.vpc-query-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.vpc-query-summary article {
  min-width: 0;
  min-height: 74px;
  padding: 10px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  align-content: start;
  gap: 3px;
}

.vpc-query-summary span,
.vpc-query-summary em {
  min-width: 0;
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  line-height: 17px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-query-summary strong {
  min-width: 0;
  overflow: hidden;
  color: #101828;
  font-size: 13px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-query-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #edf1f6;
  border-radius: 8px;
  overflow: hidden;
}

.vpc-query-metrics div {
  min-height: 58px;
  padding: 9px;
  border-right: 1px solid #edf1f6;
}

.vpc-query-metrics div:last-child {
  border-right: 0;
}

.vpc-query-payload-toggle {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #fbfdff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vpc-query-payload-toggle span {
  min-width: 0;
  color: #667085;
  font-size: 12px;
  line-height: 18px;
}

.vpc-query-payload-toggle .semi-button {
  flex: 0 0 auto;
  border: 1px solid #d8dee9;
  background: #ffffff;
  color: #1664ff;
  font-weight: 700;
}

.vpc-query-preview pre {
  max-height: 148px;
  margin: 0;
  padding: 12px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #fbfdff;
  color: #344054;
  overflow: auto;
  font-size: 12px;
  line-height: 18px;
}

.vpc-real-query-state {
  padding: 10px 12px;
  display: grid;
  gap: 5px;
  border: 1px solid #d8eee3;
  border-radius: 8px;
  background: #f5fbf8;
  color: #3f5f50;
  font-size: 12px;
  line-height: 18px;
}

.vpc-field-sample {
  margin-bottom: 10px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfdff;
}

.vpc-field-sample span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.vpc-field-sample strong {
  overflow: hidden;
  color: #344054;
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-field-sample em {
  color: #1664ff;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.vpc-raw-response-audit {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #d8eee3;
  border-radius: 8px;
  background: #f6fef9;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(96px, auto));
  gap: 10px;
  align-items: stretch;
}

.vpc-raw-response-main {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
}

.vpc-raw-response-main span,
.vpc-raw-response-main em {
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

.vpc-raw-response-main strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-raw-response-audit > div:not(.vpc-raw-response-main):not(.vpc-raw-response-fields) {
  min-height: 58px;
  padding: 9px;
  border: 1px solid rgba(171, 239, 198, 0.85);
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  align-content: center;
  gap: 4px;
}

.vpc-raw-response-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 7px;
}

.vpc-raw-response-fields span {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vpc-raw-response-fields strong {
  min-width: 0;
  overflow: hidden;
  color: #344054;
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-raw-response-fields em {
  color: #98a2b3;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 16px;
}

.vpc-raw-response-field-hit {
  border-color: #abefc6 !important;
  background: #f6fef9 !important;
}

.vpc-raw-response-field-hit em {
  color: #057a55;
}

.vpc-raw-frame-split-note {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid #fedf89;
  border-radius: 8px;
  background: #fffaf0;
  display: flex;
  gap: 10px;
  align-items: center;
  color: #7a5a19;
}

.vpc-raw-frame-split-note strong {
  flex: 0 0 auto;
  color: #684b13;
  font-size: 13px;
  line-height: 20px;
}

.vpc-raw-frame-split-note span {
  min-width: 0;
  color: #7a5a19;
  font-size: 12px;
  line-height: 18px;
}

.vpc-raw-time-audit {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(112px, auto));
  gap: 10px;
  align-items: center;
}

.vpc-raw-time-audit-ok {
  border-color: #d8eee3;
  background: #f5fbf8;
}

.vpc-raw-time-audit-warning {
  border-color: #fedf89;
  background: #fffaf0;
}

.vpc-raw-time-audit-empty {
  border-color: #e4ebf5;
  background: #fbfdff;
}

.vpc-raw-time-audit > div:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.vpc-raw-time-audit > div:not(:first-child) {
  min-height: 58px;
  padding: 9px;
  border: 1px solid rgba(216, 226, 239, 0.9);
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  align-content: center;
  gap: 4px;
}

.vpc-raw-time-audit span,
.vpc-raw-time-audit em {
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
  text-overflow: ellipsis;
}

.vpc-raw-time-audit > div:first-child em {
  white-space: normal;
}

.vpc-raw-time-audit strong {
  min-width: 0;
  overflow: hidden;
  color: #101828;
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-table {
  overflow-x: auto;
}

.vpc-table-row {
  min-width: 980px;
  min-height: 54px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1.35fr 0.7fr 1.2fr 1.35fr 1fr 0.8fr;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #edf1f6;
  color: #475467;
  font-size: 13px;
}

.vpc-table-row strong {
  color: #101828;
  font-size: 13px;
}

.vpc-table-row[role='button'] {
  cursor: pointer;
}

.vpc-table-row[role='button']:hover,
.vpc-table-row-active {
  background: #f7fbff;
  box-shadow: inset 3px 0 0 #1664ff;
}

.vpc-table-row[role='button']:focus-visible {
  outline: 2px solid #9db8ff;
  outline-offset: -2px;
}

.vpc-table-row-mock {
  border-bottom-style: dashed;
  background: #ffffff;
}

.vpc-table-head {
  min-height: 42px;
  border-radius: 8px;
  background: #f6f8fb;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.vpc-raw-inspector {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #edf1f6;
  display: grid;
  gap: 10px;
}

.vpc-raw-inspector-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.vpc-raw-inspector-head > div:first-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.vpc-raw-inspector-head > div:last-child {
  display: grid;
  grid-template-columns: repeat(2, minmax(86px, 1fr));
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  overflow: hidden;
}

.vpc-raw-inspector-head > div:last-child div {
  min-height: 58px;
  padding: 9px;
  display: grid;
  align-content: center;
  gap: 4px;
  border-right: 1px solid #edf1f6;
}

.vpc-raw-inspector-head > div:last-child div:last-child {
  border-right: 0;
}

.vpc-raw-inspector-head span,
.vpc-raw-inspector-head em,
.vpc-raw-field span {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-raw-inspector-head strong {
  min-width: 0;
  overflow: hidden;
  color: #101828;
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-raw-location-evidence {
  padding: 10px;
  border: 1px solid #d8eee3;
  border-radius: 8px;
  background: #f5fbf8;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(220px, 1.18fr) repeat(4, minmax(76px, auto)) repeat(2, auto);
  gap: 10px;
  align-items: center;
}

.vpc-raw-location-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.vpc-raw-location-main span,
.vpc-raw-location-main em {
  overflow: hidden;
  color: #3f5f50;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-raw-location-main strong {
  min-width: 0;
  overflow: hidden;
  color: #101828;
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-raw-location-evidence > div:not(.vpc-raw-location-main):not(.vpc-raw-address-evidence) {
  min-height: 58px;
  padding: 9px;
  border: 1px solid #d8eee3;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  align-content: center;
  gap: 4px;
}

.vpc-raw-location-evidence > div:not(.vpc-raw-location-main):not(.vpc-raw-address-evidence) span {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
}

.vpc-raw-location-evidence > div:not(.vpc-raw-location-main):not(.vpc-raw-address-evidence) strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-raw-address-evidence {
  min-width: 0;
  min-height: 78px;
  padding: 9px;
  border: 1px solid #d8eee3;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  align-content: center;
  gap: 3px;
}

.vpc-raw-address-evidence span,
.vpc-raw-address-evidence em,
.vpc-raw-address-evidence small {
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-raw-address-evidence strong {
  overflow: hidden;
  color: #101828;
  font-size: 13px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-raw-address-ready {
  border-color: #abefc6;
  background: #f6fef9;
}

.vpc-raw-address-warning {
  border-color: #fedf89;
  background: #fffcf5;
}

.vpc-raw-address-error {
  border-color: #fecdca;
  background: #fffafa;
}

.vpc-raw-address-waiting {
  border-color: #b2ddff;
  background: #f5fbff;
}

.vpc-raw-location-evidence .semi-button {
  min-width: 74px;
  padding-inline: 9px;
}

.vpc-raw-location-evidence .semi-button-borderless {
  border: 1px solid #b8cdfd;
  background: #ffffff;
  color: #1664ff;
  font-weight: 800;
}

.vpc-raw-inspector-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.vpc-raw-inspector-tools > span {
  padding: 0 10px;
  min-height: 34px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #ffffff;
  color: #475467;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  white-space: nowrap;
}

.vpc-raw-field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.vpc-raw-field {
  min-width: 0;
  padding: 10px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  gap: 4px;
}

.vpc-raw-field span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-raw-field strong {
  color: #101828;
  font-size: 13px;
  line-height: 18px;
  word-break: break-word;
}

.vpc-pagination {
  min-height: 44px;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vpc-pagination > span,
.vpc-history-note span {
  min-width: 0;
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.vpc-pagination > div {
  display: flex;
  gap: 8px;
}

.vpc-history-note {
  padding: 10px 12px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #fbfdff;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.vpc-history-mock-note {
  margin-bottom: 10px;
  border-color: #d8e6ff;
  background: #f7faff;
}

.vpc-history-sample-gate {
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #d8e6ff;
  border-radius: 8px;
  background: #f7faff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vpc-history-sample-gate div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.vpc-history-sample-gate strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-history-sample-gate span {
  color: #475467;
  font-size: 12px;
  line-height: 18px;
}

.vpc-history-sample-closed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.vpc-history-sample-closed article {
  min-width: 0;
  min-height: 92px;
  padding: 12px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  align-content: start;
  gap: 5px;
}

.vpc-history-sample-closed span,
.vpc-history-sample-closed em {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-history-sample-closed strong {
  color: #101828;
  font-size: 15px;
  line-height: 20px;
}

.vpc-alert-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.vpc-alert-card {
  min-height: 246px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.vpc-alert-card h3 {
  margin: 0;
  color: #101828;
  font-size: 17px;
  line-height: 24px;
}

.vpc-alert-card p {
  margin: 0;
  color: #475467;
  font-size: 13px;
  line-height: 20px;
}

.vpc-alert-head,
.vpc-alert-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vpc-alert-head span,
.vpc-alert-meta span {
  color: #667085;
  font-size: 12px;
}

.vpc-alert-meta {
  align-items: flex-start;
  flex-direction: column;
}

.vpc-alert-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.vpc-real-alert-banner {
  padding: 12px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  grid-template-columns: minmax(280px, 1.8fr) repeat(4, minmax(110px, 0.5fr));
  gap: 10px;
  align-items: stretch;
}

.vpc-real-alert-banner-loading {
  border-color: rgba(22, 100, 255, 0.18);
  background: #f5f9ff;
}

.vpc-real-alert-banner-ready {
  border-color: rgba(18, 183, 106, 0.22);
  background: #f4fff8;
}

.vpc-real-alert-banner-partial,
.vpc-real-alert-banner-empty {
  border-color: rgba(247, 144, 9, 0.24);
  background: #fffaf2;
}

.vpc-real-alert-banner-error {
  border-color: rgba(217, 45, 32, 0.22);
  background: #fff8f7;
}

.vpc-real-alert-banner-disabled {
  border-color: rgba(102, 112, 133, 0.18);
  background: #f8fafc;
}

.vpc-real-alert-banner > div:first-child {
  display: grid;
  gap: 5px;
  align-content: center;
}

.vpc-real-alert-banner strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-real-alert-banner.vpc-real-alert-banner-loading strong {
  color: #175cd3;
}

.vpc-real-alert-banner.vpc-real-alert-banner-ready strong {
  color: #087443;
}

.vpc-real-alert-banner.vpc-real-alert-banner-partial strong,
.vpc-real-alert-banner.vpc-real-alert-banner-empty strong {
  color: #b54708;
}

.vpc-real-alert-banner.vpc-real-alert-banner-error strong {
  color: #b42318;
}

.vpc-real-alert-banner span {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.vpc-real-alert-banner em {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
  overflow-wrap: anywhere;
}

.vpc-real-alert-banner.vpc-real-alert-banner-error em {
  color: #b42318;
}

.vpc-alert-blueprint-banner {
  border-color: #d8e6ff;
  background: #f7faff;
}

.vpc-alert-blueprint-banner span {
  color: #345071;
}

.vpc-alert-summary-card {
  min-height: 96px;
  padding: 14px 15px;
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  display: grid;
  gap: 5px;
}

.vpc-alert-summary-card span,
.vpc-alert-summary-card em {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-alert-summary-card strong {
  color: #101828;
  font-size: 25px;
  line-height: 31px;
}

.vpc-alert-summary-orange {
  border-color: #fedf89;
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 78%);
}

.vpc-alert-summary-blue {
  border-color: #b8cdfd;
  background: linear-gradient(180deg, #f4f7ff 0%, #ffffff 78%);
}

.vpc-alert-summary-green {
  border-color: #a6f4c5;
  background: linear-gradient(180deg, #f1fdf5 0%, #ffffff 78%);
}

.vpc-alert-summary-cyan {
  border-color: #a5f3fc;
  background: linear-gradient(180deg, #ecfeff 0%, #ffffff 78%);
}

.vpc-alert-threshold-panel {
  padding-bottom: 14px;
}

.vpc-alert-threshold-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.vpc-alert-threshold-grid > div,
.vpc-alert-threshold-grid article {
  min-height: 76px;
  padding: 11px 12px;
  border: 1px solid #e7edf6;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  align-content: center;
  gap: 7px;
}

.vpc-alert-threshold-grid span {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
}

.vpc-alert-threshold-grid strong {
  color: #101828;
  font-size: 13px;
  line-height: 18px;
}

.vpc-alert-threshold-options {
  padding: 3px;
  border: 1px solid #d8dee9;
  border-radius: 8px;
  background: #f7f9fc;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}

.vpc-alert-threshold-options button {
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #667085;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.vpc-alert-threshold-options button:hover,
.vpc-alert-threshold-active {
  background: #ffffff !important;
  color: #1664ff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.vpc-alert-scope-filter {
  padding: 4px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #f7f9fc;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}

.vpc-alert-scope-filter button {
  min-height: 44px;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #667085;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font: inherit;
  text-align: left;
}

.vpc-alert-scope-filter button:hover,
.vpc-alert-scope-filter-active {
  background: #ffffff !important;
  color: #1664ff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.vpc-alert-scope-filter span {
  overflow: hidden;
  font-size: 12px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-alert-scope-filter strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-alert-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.75fr);
  gap: 12px;
}

.vpc-alert-fallback-main {
  display: grid;
  gap: 12px;
}

.vpc-alert-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vpc-alert-capability-card {
  min-height: 132px;
  padding: 12px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  align-content: start;
  gap: 8px;
}

.vpc-alert-capability-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vpc-alert-capability-card strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-alert-capability-card span {
  color: #1664ff;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.vpc-alert-capability-card p {
  margin: 0;
  color: #667085;
  font-size: 12px;
  line-height: 18px;
}

.vpc-alert-sample-gate {
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #d8e6ff;
  border-radius: 8px;
  background: #f7faff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vpc-alert-sample-gate div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.vpc-alert-sample-gate strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-alert-sample-gate span {
  color: #475467;
  font-size: 12px;
  line-height: 18px;
}

.vpc-alert-sample-closed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.vpc-alert-sample-closed article {
  min-width: 0;
  min-height: 92px;
  padding: 12px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  align-content: start;
  gap: 5px;
}

.vpc-alert-sample-closed span,
.vpc-alert-sample-closed em {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-alert-sample-closed strong {
  color: #101828;
  font-size: 15px;
  line-height: 20px;
}

.vpc-alert-list {
  display: grid;
  gap: 8px;
}

.vpc-alert-row-load {
  min-height: 48px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #edf1f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vpc-alert-row-load span {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
}

.vpc-alert-row-load > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.vpc-alert-row-load .semi-button {
  min-width: 92px;
}

.vpc-alert-row {
  width: 100%;
  padding: 12px;
  border: 1px solid #e7ecf3;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.vpc-alert-row:hover,
.vpc-alert-row-active {
  border-color: #b8cdfd;
  background: #f6f9ff;
}

.vpc-alert-row-mock {
  border-style: dashed;
  background: #ffffff;
}

.vpc-alert-row-level,
.vpc-alert-row > div {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.vpc-alert-row-level em,
.vpc-alert-row > span,
.vpc-alert-row > div span {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-alert-row > strong {
  color: #101828;
  font-size: 15px;
  line-height: 21px;
}

.vpc-alert-side {
  display: grid;
  align-content: start;
  gap: 12px;
}

.vpc-plan-focus {
  padding: 12px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  gap: 4px;
}

.vpc-plan-focus span,
.vpc-plan-focus em {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-plan-focus strong {
  color: #101828;
  font-size: 15px;
  line-height: 22px;
}

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

.vpc-alert-location-evidence {
  padding: 12px;
  border: 1px solid #d1fadf;
  border-radius: 8px;
  background: #f6fef9;
  display: grid;
  gap: 7px;
}

.vpc-alert-location-empty {
  border-color: #e4ebf5;
  background: #fbfdff;
}

.vpc-alert-location-evidence > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vpc-alert-location-evidence strong {
  color: #101828;
  font-size: 13px;
  line-height: 18px;
}

.vpc-alert-location-evidence span,
.vpc-alert-location-evidence em {
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.vpc-alert-location-evidence > span:first-of-type {
  color: #057a55;
  font-weight: 800;
}

.vpc-alert-location-empty > span:first-of-type {
  color: #667085;
  font-weight: 500;
}

.vpc-plan-channels,
.vpc-plan-steps {
  display: grid;
  gap: 8px;
}

.vpc-alert-boundary-list {
  display: grid;
  gap: 8px;
}

.vpc-alert-boundary-list article {
  padding: 10px 12px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  gap: 4px;
}

.vpc-alert-boundary-list strong {
  color: #101828;
  font-size: 13px;
  line-height: 18px;
}

.vpc-alert-boundary-list span {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
}

.vpc-plan-channel {
  padding: 10px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  gap: 9px;
}

.vpc-plan-channel div {
  display: grid;
  gap: 3px;
}

.vpc-plan-channel strong,
.vpc-plan-step strong {
  color: #101828;
  font-size: 13px;
  line-height: 19px;
}

.vpc-plan-channel span,
.vpc-plan-step em {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-plan-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 3px 8px;
  align-items: center;
}

.vpc-plan-step span {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #eef4ff;
  color: #155eef;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  grid-row: span 2;
}

.vpc-evidence-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.vpc-evidence-strip article {
  padding: 11px 12px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  gap: 3px;
}

.vpc-evidence-strip span,
.vpc-evidence-strip em {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-evidence-strip strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

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

.vpc-evidence-card {
  min-height: 142px;
  padding: 12px;
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  gap: 8px;
  align-content: start;
}

.vpc-evidence-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vpc-evidence-card strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-evidence-card span,
.vpc-evidence-card p {
  margin: 0;
  color: #667085;
  font-size: 12px;
  line-height: 18px;
}

.vpc-evidence-warning {
  border-color: #fedf89;
  background: #fffaf0;
}

.vpc-bar-list,
.vpc-rule-list,
.vpc-source-table {
  display: grid;
  gap: 12px;
}

.vpc-source-detail-panel {
  display: grid;
  gap: 12px;
}

.vpc-source-evidence-layers,
.vpc-source-detail-evidence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.vpc-source-evidence-layers article,
.vpc-source-detail-evidence article {
  min-height: 86px;
  padding: 12px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  align-content: start;
  gap: 4px;
}

.vpc-source-evidence-layers span,
.vpc-source-detail-evidence span {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
}

.vpc-source-evidence-layers strong,
.vpc-source-detail-evidence strong {
  color: #101828;
  font-size: 13px;
  line-height: 19px;
  overflow-wrap: anywhere;
}

.vpc-source-evidence-layers em {
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

.vpc-source-matrix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.vpc-source-matrix-card {
  min-height: 198px;
  padding: 12px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  align-content: start;
  gap: 10px;
}

.vpc-source-matrix-gap {
  border-color: #fedf89;
  background: #fffcf5;
}

.vpc-source-matrix-card > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.vpc-source-matrix-card strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-source-matrix-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.vpc-source-matrix-metrics .vpc-metric {
  min-height: 66px;
}

.vpc-source-matrix-card p,
.vpc-source-matrix-card em,
.vpc-source-matrix-actions span {
  margin: 0;
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

.vpc-source-matrix-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vpc-source-matrix-actions span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.vpc-source-detail-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.vpc-source-detail-grid article {
  min-height: 88px;
  padding: 12px;
  border: 1px solid #e7edf6;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  align-content: center;
  gap: 4px;
}

.vpc-source-detail-grid span,
.vpc-source-detail-grid em,
.vpc-source-detail-actions span {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-source-detail-grid strong {
  min-width: 0;
  color: #101828;
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-source-detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.vpc-source-detail-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.vpc-real-source-banner {
  padding: 12px;
  border: 1px solid #d8eee3;
  border-radius: 8px;
  background: #f5fbf8;
  display: grid;
  grid-template-columns: minmax(280px, 1.8fr) repeat(4, minmax(110px, 0.5fr));
  gap: 10px;
  align-items: stretch;
}

.vpc-real-source-banner-loading {
  border-color: rgba(22, 100, 255, 0.18);
  background: #f5f9ff;
}

.vpc-real-source-banner-ready {
  border-color: rgba(18, 183, 106, 0.22);
  background: #f4fff8;
}

.vpc-real-source-banner-partial,
.vpc-real-source-banner-empty {
  border-color: rgba(247, 144, 9, 0.24);
  background: #fffaf2;
}

.vpc-real-source-banner-error {
  border-color: rgba(217, 45, 32, 0.22);
  background: #fff8f7;
}

.vpc-real-source-banner.vpc-real-source-banner-loading strong {
  color: #175cd3;
}

.vpc-real-source-banner.vpc-real-source-banner-ready strong {
  color: #087443;
}

.vpc-real-source-banner.vpc-real-source-banner-partial strong,
.vpc-real-source-banner.vpc-real-source-banner-empty strong {
  color: #b54708;
}

.vpc-real-source-banner.vpc-real-source-banner-error strong {
  color: #b42318;
}

.vpc-real-source-banner > div:first-child {
  display: grid;
  gap: 5px;
  align-content: center;
}

.vpc-real-source-banner strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-real-source-banner span {
  color: #3f5f50;
  font-size: 12px;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.vpc-real-source-banner em {
  color: #7f4d0a;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
  overflow-wrap: anywhere;
}

.vpc-source-matrix > .vpc-empty {
  grid-column: 1 / -1;
}

.vpc-source-blueprint-banner {
  border-color: #d8e6ff;
  background: #f7faff;
}

.vpc-source-blueprint-banner span {
  color: #345071;
}

.vpc-source-blueprint-layers article {
  border-color: #d8e6ff;
  background: #fbfdff;
}

.vpc-replay-blueprint-banner {
  border-color: #d8e6ff;
  background: #f7faff;
}

.vpc-replay-blueprint-banner span {
  color: #345071;
}

.vpc-replay-blueprint-layers article {
  border-color: #d8e6ff;
  background: #fbfdff;
}

.vpc-history-blueprint-banner {
  border-color: #d8e6ff;
  background: #f7faff;
}

.vpc-history-blueprint-banner span {
  color: #345071;
}

.vpc-history-blueprint-layers article {
  border-color: #d8e6ff;
  background: #fbfdff;
}

.vpc-source-health-filter {
  margin-bottom: 10px;
  padding: 4px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #f7f9fc;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.vpc-source-health-filter button {
  min-height: 44px;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #667085;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font: inherit;
  text-align: left;
}

.vpc-source-health-filter button:hover,
.vpc-source-health-filter-active {
  background: #ffffff !important;
  color: #1664ff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.vpc-source-health-filter span {
  overflow: hidden;
  font-size: 12px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-source-health-filter strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-source-sample-gate {
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #d8e6ff;
  border-radius: 8px;
  background: #f7faff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vpc-source-sample-gate div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.vpc-source-sample-gate strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-source-sample-gate span {
  color: #475467;
  font-size: 12px;
  line-height: 18px;
}

.vpc-source-sample-closed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.vpc-source-sample-closed article {
  min-width: 0;
  min-height: 92px;
  padding: 12px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  align-content: start;
  gap: 5px;
}

.vpc-source-sample-closed span,
.vpc-source-sample-closed em {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-source-sample-closed strong {
  color: #101828;
  font-size: 15px;
  line-height: 20px;
}

.vpc-stat-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.vpc-stat-summary article {
  min-height: 98px;
  padding: 14px 15px;
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  display: grid;
  gap: 5px;
}

.vpc-stat-summary span,
.vpc-stat-summary em,
.vpc-stat-protocol-card span,
.vpc-stat-protocol-card em {
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

.vpc-stat-summary strong {
  color: #101828;
  font-size: 22px;
  line-height: 28px;
}

.vpc-stat-readiness-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.vpc-stat-readiness-card {
  min-height: 96px;
  padding: 13px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  align-content: start;
  gap: 5px;
}

.vpc-stat-readiness-card span {
  width: fit-content;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef4ff;
  color: #1664ff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
}

.vpc-stat-readiness-card strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-stat-readiness-card em {
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

.vpc-stat-readiness-pending {
  border-color: #fedf89;
  background: #fffcf5;
}

.vpc-stat-readiness-pending span {
  background: #fff4e5;
  color: #b54708;
}

.vpc-stats-production {
  padding: 14px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  grid-template-columns: minmax(280px, 1.8fr) repeat(4, minmax(108px, 0.5fr));
  gap: 10px;
  align-items: stretch;
}

.vpc-stats-production > div:first-child {
  min-width: 0;
  display: grid;
  gap: 4px;
  align-content: center;
}

.vpc-stats-production > div:first-child span {
  width: fit-content;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef4ff;
  color: #1664ff;
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
}

.vpc-stats-production strong {
  color: #101828;
  font-size: 16px;
  line-height: 22px;
}

.vpc-stats-production em {
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

.vpc-stats-production-ready {
  border-color: #abefc6;
  background: #f6fef9;
}

.vpc-stats-production-partial {
  border-color: #fedf89;
  background: #fffaf0;
}

.vpc-stats-production-blocked {
  border-color: #fecdca;
  background: #fff8f7;
}

.vpc-stats-production-partial > div:first-child span {
  background: #fff4e5;
  color: #b54708;
}

.vpc-stats-production-partial > div:first-child strong {
  color: #b54708;
}

.vpc-stats-production-blocked > div:first-child span {
  background: #fff1f0;
  color: #b42318;
}

.vpc-stats-production-blocked > div:first-child strong {
  color: #b42318;
}

.vpc-stat-api-probe {
  padding: 14px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  display: grid;
  gap: 12px;
}

.vpc-stat-api-probe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vpc-stat-api-probe-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.vpc-stat-api-probe-head strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-stat-api-probe-head span {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
}

.vpc-stat-api-probe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vpc-stat-api-probe-card {
  min-height: 142px;
  padding: 12px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  align-content: start;
  gap: 7px;
}

.vpc-stat-api-probe-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vpc-stat-api-probe-card strong {
  color: #101828;
  font-size: 13px;
  line-height: 18px;
}

.vpc-stat-api-probe-card span,
.vpc-stat-api-probe-card em,
.vpc-stat-api-probe-card small {
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.vpc-stat-api-probe-card span {
  color: #1664ff;
  font-weight: 700;
}

.vpc-stat-api-probe-card p {
  margin: 0;
  color: #344054;
  font-size: 12px;
  line-height: 18px;
}

.vpc-stat-api-probe-ready {
  border-color: #abefc6;
  background: #f6fef9;
}

.vpc-stat-api-probe-missing {
  border-color: #fedf89;
  background: #fffcf5;
}

.vpc-stat-api-probe-error {
  border-color: #fecdca;
  background: #fffafa;
}

.vpc-stats-interpretation {
  padding: 14px;
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  display: grid;
  gap: 12px;
}

.vpc-stats-interpretation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vpc-stats-interpretation-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.vpc-stats-interpretation-head strong {
  color: #101828;
  font-size: 15px;
  line-height: 20px;
}

.vpc-stats-interpretation-head span {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
}

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

.vpc-stats-interpretation-card {
  min-width: 0;
  min-height: 132px;
  padding: 12px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  align-content: start;
  gap: 7px;
}

.vpc-stats-interpretation-card > div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vpc-stats-interpretation-card span,
.vpc-stats-interpretation-card em,
.vpc-stats-interpretation-card small {
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.vpc-stats-interpretation-card span {
  color: #344054;
  font-weight: 700;
}

.vpc-stats-interpretation-card strong {
  color: #101828;
  font-size: 22px;
  line-height: 28px;
}

.vpc-stats-interpretation-card small {
  color: #98a2b3;
}

.vpc-stats-interpretation-ready {
  border-color: #abefc6;
  background: #f6fef9;
}

.vpc-stats-interpretation-warning {
  border-color: #fedf89;
  background: #fffcf5;
}

.vpc-stats-interpretation-error {
  border-color: #fecdca;
  background: #fff8f7;
}

.vpc-stats-interpretation-waiting {
  border-color: #b2ddff;
  background: #f5fbff;
}

.vpc-stat-protocol-grid {
  display: grid;
  gap: 10px;
}

.vpc-stat-protocol-card {
  padding: 12px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  display: grid;
  gap: 9px;
}

.vpc-stat-protocol-card > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.vpc-stat-protocol-card strong {
  color: #101828;
  font-size: 16px;
  line-height: 22px;
}

.vpc-stat-protocol-card > div:first-child strong {
  font-size: 14px;
  line-height: 20px;
}

.vpc-stats-boundary-strip {
  display: grid;
  gap: 10px;
}

.vpc-stats-source-boundary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vpc-stats-boundary-strip article {
  min-height: 76px;
  padding: 12px;
  border: 1px solid #e7edf6;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  align-content: center;
  gap: 4px;
}

.vpc-stats-boundary-strip strong {
  color: #101828;
  font-size: 13px;
  line-height: 18px;
}

.vpc-stats-boundary-strip span {
  color: #1664ff;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.vpc-stats-boundary-strip em {
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

.vpc-stat-row-filter {
  margin-bottom: 10px;
  padding: 4px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #f7f9fc;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.vpc-stat-row-filter button {
  min-height: 44px;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #667085;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font: inherit;
  text-align: left;
}

.vpc-stat-row-filter button:hover,
.vpc-stat-row-filter-active {
  background: #ffffff !important;
  color: #1664ff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.vpc-stat-row-filter span {
  overflow: hidden;
  font-size: 12px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-stat-row-filter strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-stat-row-load,
.vpc-source-row-load {
  min-height: 48px;
  padding-top: 10px;
  border-top: 1px solid #edf1f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vpc-stat-row-load span,
.vpc-source-row-load span {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
}

.vpc-stat-row-load > div,
.vpc-source-row-load > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.vpc-stat-row-load .semi-button,
.vpc-source-row-load .semi-button {
  min-width: 82px;
}

.vpc-mileage-table {
  overflow-x: auto;
}

.vpc-mileage-decision-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.vpc-mileage-decision-summary article {
  min-height: 82px;
  padding: 12px;
  border: 1px solid #e7edf6;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  align-content: center;
  gap: 4px;
}

.vpc-mileage-decision-summary span,
.vpc-mileage-decision-summary em {
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

.vpc-mileage-decision-summary strong {
  color: #101828;
  font-size: 20px;
  line-height: 26px;
}

.vpc-mileage-decision-table {
  overflow-x: auto;
}

.vpc-consistency-table {
  overflow-x: auto;
}

.vpc-mileage-row {
  min-width: 1180px;
  min-height: 58px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1.35fr 0.58fr 1fr 0.76fr 0.9fr 0.9fr 0.72fr;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #edf1f6;
  color: #475467;
  font-size: 13px;
}

.vpc-mileage-decision-row {
  min-width: 1180px;
  min-height: 64px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1.18fr 1fr 0.95fr 1.1fr 1.05fr 0.7fr;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #edf1f6;
  color: #475467;
  font-size: 13px;
}

.vpc-consistency-row {
  min-width: 1260px;
  min-height: 62px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr 1.05fr 0.66fr 0.66fr 1.5fr 0.7fr;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #edf1f6;
  color: #475467;
  font-size: 13px;
}

.vpc-mileage-row strong {
  color: #101828;
  font-size: 13px;
  line-height: 18px;
}

.vpc-mileage-decision-row strong {
  color: #101828;
  font-size: 13px;
  line-height: 18px;
}

.vpc-consistency-row strong {
  color: #101828;
  font-size: 13px;
  line-height: 18px;
}

.vpc-mileage-row strong em,
.vpc-mileage-decision-row strong em,
.vpc-mileage-decision-row span em,
.vpc-consistency-row strong em,
.vpc-consistency-row span em {
  display: block;
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

.vpc-mileage-head {
  min-height: 42px;
  border-radius: 8px;
  background: #f6f8fb;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.vpc-mileage-decision-head {
  min-height: 42px;
  border-radius: 8px;
  background: #f6f8fb;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.vpc-consistency-head {
  min-height: 42px;
  border-radius: 8px;
  background: #f6f8fb;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.vpc-mileage-source-chips {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.vpc-mileage-source-chips b {
  padding: 2px 6px;
  border: 1px solid #d7e1ee;
  border-radius: 999px;
  background: #ffffff;
  color: #667085;
  font-size: 11px;
  line-height: 16px;
}

.vpc-mileage-source-chips .vpc-mileage-source-selected {
  border-color: #abefc6;
  background: #ecfdf3;
  color: #027a48;
}

.vpc-mileage-source-chips em {
  flex-basis: 100%;
}

.vpc-row-muted {
  display: block;
  margin-top: 5px;
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

.vpc-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.vpc-row-actions .semi-button {
  min-width: 44px;
  padding-inline: 8px;
}

.vpc-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.vpc-capability-card {
  min-height: 142px;
  padding: 13px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #fbfdff;
  display: grid;
  gap: 7px;
  align-content: start;
}

.vpc-capability-card strong {
  color: #101828;
  font-size: 14px;
  line-height: 20px;
}

.vpc-capability-card span,
.vpc-capability-card em,
.vpc-capability-card p {
  margin: 0;
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

.vpc-capability-card span {
  color: #1664ff;
  font-weight: 700;
}

.vpc-capability-card em {
  color: #344054;
}

.vpc-bar-row {
  padding: 12px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  display: grid;
  gap: 10px;
}

.vpc-bar-row > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.vpc-bar-row strong {
  color: #101828;
  font-size: 14px;
}

.vpc-bar-row span {
  color: #667085;
  font-size: 12px;
}

.vpc-bar-track {
  height: 10px;
  border-radius: 999px;
  background: #edf2f7;
  overflow: hidden;
}

.vpc-bar-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1664ff, #06b6d4);
}

.vpc-source-row {
  width: 100%;
  min-height: 82px;
  padding: 13px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  grid-template-columns: minmax(250px, 1.55fr) repeat(4, minmax(108px, 0.62fr)) minmax(72px, 0.42fr);
  gap: 12px;
  align-items: center;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.vpc-source-row:hover,
.vpc-source-row:focus-visible,
.vpc-source-row-active {
  border-color: #b8cdfd;
  background: #f6f9ff;
  outline: none;
}

.vpc-source-row-active {
  box-shadow: inset 3px 0 0 #1664ff;
}

.vpc-source-row > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.vpc-source-row > div:first-child {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.vpc-source-row > div:first-child span {
  grid-column: 2;
}

.vpc-source-row > div:first-child strong,
.vpc-source-row > div:first-child span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpc-source-row em {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  font-style: normal;
}

.vpc-source-actions {
  justify-items: start;
}

.vpc-source-actions .semi-button {
  min-width: 46px;
  padding-inline: 8px;
}

.vpc-health-healthy {
  color: #027a48 !important;
}

.vpc-health-warning {
  color: #b54708 !important;
}

.vpc-health-down {
  color: #b42318 !important;
}

@media (max-width: 1380px) {
  .vpc-command-priority-strip {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .vpc-command-priority-title {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
  }

  .vpc-command-grid {
    grid-template-areas:
      "map list"
      "quality quality"
      "detail detail";
    grid-template-columns: minmax(520px, 1fr) 300px;
  }

  .vpc-map-foundation-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 1080px) {
  .vpc-app {
    grid-template-columns: 1fr;
  }

  .vpc-sidebar {
    position: static;
    height: auto;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 12px;
    padding-block: 12px;
    min-width: 0;
    overflow: hidden;
  }

  .vpc-brand {
    min-width: 178px;
    min-height: 44px;
  }

  .vpc-nav {
    display: flex;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .vpc-nav::-webkit-scrollbar {
    display: none;
  }

  .vpc-nav-item {
    min-width: 126px;
    min-height: 46px;
    padding: 7px 8px;
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .vpc-nav-icon {
    width: 30px;
    height: 30px;
  }

  .vpc-nav-copy em {
    display: none;
  }

  .vpc-side-status {
    min-width: 176px;
    padding: 9px 10px;
  }

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

  .vpc-stat-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vpc-stat-readiness-grid,
  .vpc-stat-api-probe-grid,
  .vpc-stats-interpretation-grid,
  .vpc-source-matrix,
  .vpc-source-evidence-layers,
  .vpc-source-detail-evidence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vpc-real-source-banner,
  .vpc-real-alert-banner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vpc-real-source-banner > div:first-child,
  .vpc-real-alert-banner > div:first-child {
    grid-column: 1 / -1;
  }

  .vpc-alert-threshold-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vpc-source-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vpc-realtime-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vpc-command-priority-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vpc-capability-radar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vpc-realtime-quality-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }

  .vpc-quality-card {
    flex: 0 0 220px;
    min-height: 146px;
    scroll-snap-align: start;
  }

  .vpc-replay-summary,
  .vpc-replay-sample-closed,
  .vpc-replay-query-status,
  .vpc-replay-evidence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vpc-replay-query-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vpc-replay-query-grid .semi-button {
    width: 100%;
  }

  .vpc-flow-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vpc-flow-step:nth-child(2)::after {
    display: none;
  }

  .vpc-command-grid,
  .vpc-alert-workbench,
  .vpc-replay-workbench,
  .vpc-replay-bottom,
  .vpc-page-grid,
  .vpc-history-workbench,
  .vpc-query-grid {
    grid-template-columns: 1fr;
  }

  .vpc-command-grid {
    grid-template-areas:
      "map"
      "list"
      "quality"
      "detail";
  }

  .vpc-date-range-inputs {
    grid-template-columns: 1fr;
  }

  .vpc-field-sample {
    grid-template-columns: 1fr;
  }

  .vpc-raw-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vpc-alert-summary,
  .vpc-evidence-grid,
  .vpc-history-sample-closed,
  .vpc-replay-sample-closed,
  .vpc-alert-sample-closed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .vpc-source-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .vpc-real-data-status {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .vpc-main,
  .vpc-sidebar {
    padding: 8px 10px;
  }

  .vpc-sidebar {
    gap: 8px;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .vpc-brand {
    min-height: 32px;
  }

  .vpc-brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }

  .vpc-brand strong {
    font-size: 13px;
    line-height: 18px;
  }

  .vpc-brand span {
    display: none;
  }

  .vpc-command-priority-strip {
    padding: 10px;
    gap: 8px;
  }

  .vpc-command-priority-title {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .vpc-command-priority-title strong {
    font-size: 13px;
    line-height: 18px;
  }

  .vpc-command-priority-items {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .vpc-command-priority-items::-webkit-scrollbar {
    display: none;
  }

  .vpc-command-priority-item {
    flex: 0 0 156px;
    min-height: 58px;
    scroll-snap-align: start;
  }

  .vpc-command-priority-item strong {
    font-size: 21px;
    line-height: 25px;
  }

  .vpc-header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .vpc-header h1 {
    font-size: 22px;
    line-height: 30px;
  }

  .vpc-header p {
    font-size: 12px;
    line-height: 18px;
  }

  .vpc-header-actions {
    grid-template-columns: minmax(0, 1fr) 36px 36px;
  }

  .vpc-nav {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 4px;
    border: 1px solid #e4ebf5;
    border-radius: 8px;
    background: #f7f9fc;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .vpc-nav::-webkit-scrollbar {
    display: none;
  }

  .vpc-nav-item {
    min-width: 122px;
    min-height: 38px;
    padding: 5px 8px;
    grid-template-columns: 24px max-content;
    gap: 6px;
    border-radius: 7px;
    scroll-snap-align: start;
  }

  .vpc-nav-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }

  .vpc-nav-copy strong {
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
  }

  .vpc-nav-copy em,
  .vpc-side-status {
    display: none;
  }

  .vpc-filterbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
  }

  .vpc-filterbar > .vpc-select {
    width: 100%;
    min-width: 0;
  }

  .vpc-filterbar > .vpc-select:only-of-type,
  .vpc-filterbar > .vpc-select:nth-of-type(3),
  .vpc-filterbar > .vpc-select:nth-of-type(4),
  .vpc-filter-hint {
    grid-column: 1 / -1;
  }

  .vpc-filter-hint {
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .vpc-filter-hint span {
    width: 100%;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 7px;
    font-size: 11px;
    line-height: 16px;
  }

  .vpc-data-boundary {
    padding: 9px;
    gap: 8px;
  }

  .vpc-data-boundary > strong {
    display: none;
  }

  .vpc-data-boundary-item {
    width: 100%;
  }

  .vpc-real-data-status {
    padding: 9px;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .vpc-real-data-status code {
    display: none;
  }

  .vpc-real-data-status > div:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .vpc-real-data-status > em {
    grid-column: 1;
    grid-row: 2;
  }

  .vpc-real-data-status .vpc-real-data-diagnostics {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .vpc-real-data-status .vpc-real-data-diagnostics::-webkit-scrollbar {
    display: none;
  }

  .vpc-real-data-status .vpc-real-data-diagnostic {
    flex: 0 0 auto;
    min-height: 22px;
    padding: 2px 6px;
  }

  .vpc-real-data-status .vpc-real-data-diagnostic em,
  .vpc-real-data-status .vpc-real-data-diagnostic b {
    font-size: 10px;
    line-height: 14px;
  }

  .vpc-real-data-status .vpc-real-data-status-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-column: 1 / -1;
    grid-row: 4;
    align-self: center;
    gap: 6px;
  }

  .vpc-real-data-status .vpc-real-data-status-actions button {
    width: 100%;
    min-width: 0;
    padding-inline: 5px;
  }

  .vpc-real-data-copy-panel {
    grid-column: 1 / -1;
    grid-row: 5;
  }

  .vpc-main-command > .vpc-data-boundary {
    min-height: 0;
    padding: 7px;
    gap: 6px;
  }

  .vpc-main-command > .vpc-data-boundary > div {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .vpc-main-command > .vpc-data-boundary .vpc-data-boundary-item {
    width: 100%;
    min-height: 22px;
    padding: 2px 7px;
    font-size: 11px;
    line-height: 16px;
  }

  .vpc-main-command > .vpc-data-boundary .vpc-data-boundary-item b {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .vpc-main-command > .vpc-real-data-status {
    display: grid;
    min-height: 32px;
    padding: 6px 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
  }

  .vpc-main-command > .vpc-real-data-status > div {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
  }

  .vpc-main-command > .vpc-real-data-status > div:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .vpc-main-command > .vpc-real-data-status > em {
    grid-column: 1;
    grid-row: 2;
  }

  .vpc-main-command > .vpc-real-data-status strong,
  .vpc-main-command > .vpc-real-data-status span,
  .vpc-main-command > .vpc-real-data-status em {
    font-size: 11px;
    line-height: 16px;
  }

  .vpc-main-command > .vpc-real-data-status code {
    display: none;
  }

  .vpc-main-command > .vpc-real-data-status .vpc-real-data-diagnostics {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .vpc-main-command > .vpc-real-data-status .vpc-real-data-diagnostics::-webkit-scrollbar {
    display: none;
  }

  .vpc-main-command > .vpc-real-data-status .vpc-real-data-diagnostic {
    flex: 0 0 auto;
    min-height: 22px;
    padding: 2px 6px;
  }

  .vpc-main-command > .vpc-real-data-status .vpc-real-data-diagnostic em,
  .vpc-main-command > .vpc-real-data-status .vpc-real-data-diagnostic b {
    font-size: 10px;
    line-height: 14px;
  }

  .vpc-main-command > .vpc-real-data-status .vpc-real-data-status-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-column: 1 / -1;
    grid-row: 4;
    margin-left: 0;
    align-self: center;
    gap: 6px;
  }

  .vpc-main-command > .vpc-real-data-status .vpc-real-data-status-actions button {
    width: 100%;
    min-width: 0;
    min-height: 24px;
    padding-inline: 5px;
    font-size: 11px;
  }

  .vpc-main-command > .vpc-real-data-status .vpc-real-data-copy-panel {
    grid-column: 1 / -1;
    grid-row: 5;
  }

  .vpc-history-context {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .vpc-history-context-protocols,
  .vpc-history-context-actions {
    justify-content: flex-start;
  }

  .vpc-select {
    flex: 1 1 110px;
    min-width: 0;
  }

  .vpc-kpis,
  .vpc-replay-summary,
  .vpc-alert-summary,
  .vpc-alert-capability-grid,
  .vpc-alert-grid,
  .vpc-alert-scope-filter,
  .vpc-capability-grid,
  .vpc-evidence-grid,
  .vpc-replay-evidence-grid,
  .vpc-evidence-strip,
  .vpc-flow-strip,
  .vpc-mileage-decision-summary,
  .vpc-stat-summary,
  .vpc-stat-readiness-grid,
  .vpc-stat-api-probe-grid,
  .vpc-source-matrix,
  .vpc-track-quality-audit,
  .vpc-track-window-audit,
  .vpc-replay-query-status,
  .vpc-stat-row-filter,
  .vpc-source-evidence-layers,
  .vpc-source-detail-evidence,
  .vpc-history-query-status,
  .vpc-history-sample-closed,
  .vpc-replay-sample-closed,
  .vpc-source-sample-closed,
  .vpc-alert-sample-closed,
  .vpc-source-health-filter,
  .vpc-source-row {
    grid-template-columns: 1fr;
  }

  .vpc-history-query-status {
    padding: 10px;
    gap: 8px;
  }

  .vpc-replay-query-status {
    padding: 10px;
    gap: 8px;
  }

  .vpc-stats-page .vpc-stat-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .vpc-stats-page .vpc-stat-summary article {
    min-height: 76px;
    padding: 10px;
    gap: 2px;
  }

  .vpc-stats-page .vpc-stat-summary span,
  .vpc-stats-page .vpc-stat-summary em {
    font-size: 11px;
    line-height: 16px;
  }

  .vpc-stats-page .vpc-stat-summary strong {
    font-size: 18px;
    line-height: 23px;
  }

  .vpc-stats-production {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
  }

  .vpc-stats-production > div:first-child {
    grid-column: 1 / -1;
  }

  .vpc-stats-production strong {
    font-size: 14px;
    line-height: 20px;
  }

  .vpc-source-sample-gate {
    align-items: stretch;
    flex-direction: column;
  }

  .vpc-alert-sample-gate {
    align-items: stretch;
    flex-direction: column;
  }

  .vpc-history-sample-gate {
    align-items: stretch;
    flex-direction: column;
  }

  .vpc-replay-sample-gate {
    align-items: stretch;
    flex-direction: column;
  }

  .vpc-stats-page .vpc-stat-readiness-grid,
  .vpc-stats-page .vpc-stat-api-probe-grid,
  .vpc-stats-page .vpc-stats-interpretation-grid,
  .vpc-stats-page .vpc-stats-boundary-strip {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .vpc-stats-page .vpc-stat-readiness-grid::-webkit-scrollbar,
  .vpc-stats-page .vpc-stat-api-probe-grid::-webkit-scrollbar,
  .vpc-stats-page .vpc-stats-interpretation-grid::-webkit-scrollbar,
  .vpc-stats-page .vpc-stats-boundary-strip::-webkit-scrollbar {
    display: none;
  }

  .vpc-stats-page .vpc-stat-readiness-card {
    flex: 0 0 236px;
    min-height: 92px;
    padding: 10px;
    scroll-snap-align: start;
  }

  .vpc-stats-page .vpc-stat-readiness-card strong {
    font-size: 13px;
    line-height: 18px;
  }

  .vpc-stats-page .vpc-stat-readiness-card em {
    font-size: 11px;
    line-height: 16px;
  }

  .vpc-stats-page .vpc-stat-api-probe {
    padding: 10px;
    gap: 8px;
  }

  .vpc-stat-api-probe-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .vpc-stats-page .vpc-stat-api-probe-head {
    align-items: center;
    flex-direction: row;
  }

  .vpc-stats-page .vpc-stat-api-probe-head span {
    display: none;
  }

  .vpc-stats-page .vpc-stat-api-probe-card {
    flex: 0 0 268px;
    min-height: 108px;
    padding: 10px;
    gap: 5px;
    scroll-snap-align: start;
  }

  .vpc-stats-page .vpc-stat-api-probe-card p {
    display: none;
  }

  .vpc-stats-page .vpc-stat-api-probe-card span,
  .vpc-stats-page .vpc-stat-api-probe-card em,
  .vpc-stats-page .vpc-stat-api-probe-card small {
    font-size: 11px;
    line-height: 16px;
  }

  .vpc-stats-page .vpc-stats-interpretation {
    padding: 10px;
    gap: 8px;
  }

  .vpc-stats-page .vpc-stats-interpretation-head {
    align-items: center;
  }

  .vpc-stats-page .vpc-stats-interpretation-head span {
    display: none;
  }

  .vpc-stats-page .vpc-stats-interpretation-card {
    flex: 0 0 252px;
    min-height: 116px;
    padding: 10px;
    gap: 5px;
    scroll-snap-align: start;
  }

  .vpc-stats-page .vpc-stats-interpretation-card strong {
    font-size: 20px;
    line-height: 25px;
  }

  .vpc-stats-page .vpc-stats-interpretation-card span,
  .vpc-stats-page .vpc-stats-interpretation-card em,
  .vpc-stats-page .vpc-stats-interpretation-card small {
    font-size: 11px;
    line-height: 16px;
  }

  .vpc-stats-page .vpc-stats-boundary-strip article {
    flex: 0 0 236px;
    min-height: 68px;
    padding: 10px;
    scroll-snap-align: start;
  }

  .vpc-kpis,
  .vpc-realtime-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .vpc-realtime-quality {
    padding: 10px;
  }

  .vpc-realtime-quality-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .vpc-realtime-quality-grid {
    display: flex;
    grid-template-columns: none;
  }

  .vpc-capability-radar {
    padding: 10px;
  }

  .vpc-capability-radar-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .vpc-capability-radar-grid {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }

  .vpc-capability-card {
    flex: 0 0 224px;
    min-height: 142px;
    scroll-snap-align: start;
  }

  .vpc-kpi,
  .vpc-realtime-summary-card {
    min-height: 72px;
    padding: 10px 11px;
  }

  .vpc-kpi span,
  .vpc-realtime-summary-card span,
  .vpc-kpi em,
  .vpc-realtime-summary-card em {
    font-size: 11px;
    line-height: 16px;
  }

  .vpc-kpi strong,
  .vpc-realtime-summary-card strong {
    font-size: 19px;
    line-height: 24px;
  }

  .vpc-flow-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }

  .vpc-flow-step::after {
    display: none;
  }

  .vpc-flow-step {
    flex: 0 0 190px;
    min-height: 52px;
    padding: 10px;
    scroll-snap-align: start;
  }

  .vpc-flow-step span {
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }

  .vpc-command-grid {
    display: flex;
    flex-direction: column;
  }

  .vpc-map-foundation-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vpc-map-panel {
    order: 1;
  }

  .vpc-vehicle-list {
    order: 2;
  }

  .vpc-realtime-quality {
    order: 3;
  }

  .vpc-detail {
    order: 4;
  }

  .vpc-list-scroll {
    max-height: 360px;
  }

  .vpc-map-focus {
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 46px;
    width: auto;
    max-height: 178px;
    padding: 9px 10px;
    gap: 5px;
    overflow-y: auto;
  }

  .vpc-replay-focus {
    left: 10px;
    right: 10px;
    top: 10px;
    width: auto;
  }

  .vpc-active-source-strip {
    grid-template-columns: 1fr;
  }

  .vpc-flow-step em {
    white-space: normal;
  }

  .vpc-map-toolbar,
  .vpc-alert-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .vpc-replay-query-grid,
  .vpc-alert-threshold-grid,
  .vpc-source-detail-grid,
  .vpc-replay-query-source {
    grid-template-columns: 1fr;
  }

  .vpc-replay-query-source strong {
    white-space: normal;
    word-break: break-all;
  }

  .vpc-alert-row {
    padding: 10px;
  }

  .vpc-alert-row > div {
    gap: 6px;
  }

  .vpc-plan-channel {
    padding: 9px;
  }

  .vpc-map-tools {
    flex-wrap: wrap;
  }

  .vpc-map-data-strip {
    left: 10px;
    right: 10px;
    top: 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    overflow: visible;
    padding-bottom: 0;
  }

  .vpc-map-data-card {
    min-height: 42px;
    padding: 5px 7px;
    gap: 1px;
  }

  .vpc-map-evidence-rail {
    grid-template-columns: 1fr;
    padding: 9px 10px;
    gap: 6px;
  }

  .vpc-map-evidence-items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .vpc-map-evidence-copy,
  .vpc-map-evidence-item {
    min-height: 46px;
    padding: 6px 7px;
  }

  .vpc-map-evidence-copy strong,
  .vpc-map-evidence-item strong {
    font-size: 12px;
    line-height: 16px;
  }

  .vpc-map-evidence-copy span,
  .vpc-map-evidence-item span {
    font-size: 10px;
    line-height: 14px;
  }

  .vpc-map-evidence-copy em,
  .vpc-map-evidence-item em {
    display: none;
  }

  .vpc-map-foundation-strip {
    grid-template-columns: 1fr;
    padding: 9px;
  }

  .vpc-map-data-strip strong {
    font-size: 11px;
    line-height: 16px;
    white-space: nowrap;
  }

  .vpc-map-data-value-full {
    display: none;
  }

  .vpc-map-data-value-compact {
    display: inline;
  }

  .vpc-map-empty-overlay {
    top: 56%;
    width: calc(100% - 34px);
    padding: 11px;
    gap: 5px;
  }

  .vpc-map-empty-overlay strong {
    font-size: 15px;
    line-height: 20px;
  }

  .vpc-map-empty-overlay em,
  .vpc-map-empty-overlay small {
    font-size: 11px;
    line-height: 16px;
  }

  .vpc-map-empty-overlay code {
    font-size: 10px;
    line-height: 15px;
  }

  .vpc-map-focus > strong {
    font-size: 16px;
    line-height: 20px;
  }

  .vpc-map-focus > em {
    display: none;
  }

  .vpc-map-focus div {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 5px;
  }

  .vpc-map-focus > em,
  .vpc-map-focus div span,
  .vpc-map-focus div b {
    font-size: 11px;
    line-height: 16px;
  }

  .vpc-map-focus .vpc-map-focus-protocols {
    gap: 5px;
  }

  .vpc-map-focus-protocol {
    min-height: 30px;
    padding: 4px 6px;
  }

  .vpc-map-focus-actions {
    gap: 6px !important;
  }

  .vpc-map-focus-actions .semi-button {
    height: 28px;
    min-height: 28px;
    padding-inline: 8px;
  }

  .vpc-map-legend {
    left: 10px;
    bottom: 9px;
    padding: 6px 8px;
    gap: 8px;
    font-size: 11px;
  }

  .vpc-map-canvas-amap .vp-map-provider-status {
    right: 10px;
    bottom: 9px;
  }

  .vpc-map-panel {
    grid-template-rows: auto auto minmax(560px, 1fr) auto;
  }

  .vpc-map-canvas {
    min-height: 560px;
  }

  .vpc-amap-monitor {
    height: 560px;
  }

  .vpc-track-canvas {
    min-height: 420px;
  }

  .vpc-amap-replay {
    height: 420px;
  }

  .vpc-map-canvas-amap .vp-map.vpc-amap-monitor {
    min-height: 560px;
    height: 560px;
  }

  .vpc-track-canvas-amap .vp-map.vpc-amap-replay {
    min-height: 420px;
    height: 420px;
  }

  .vpc-replay-controls {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .vpc-current-node-evidence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vpc-current-node-evidence > div:first-child,
  .vpc-current-node-address,
  .vpc-current-node-evidence .semi-button {
    grid-column: 1 / -1;
  }

  .vpc-current-node-address {
    padding-left: 0;
    padding-top: 8px;
    border-left: 0;
    border-top: 1px solid #e4ebf5;
  }

  .vpc-replay-speed,
  .vpc-replay-progress {
    grid-column: 1 / -1;
  }

  .vpc-replay-progress {
    text-align: left;
  }

  .vpc-replay-page .vpc-timeline,
  .vpc-replay-page .vpc-segment-list {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .vpc-replay-page .vpc-timeline::-webkit-scrollbar,
  .vpc-replay-page .vpc-segment-list::-webkit-scrollbar {
    display: none;
  }

  .vpc-replay-page .vpc-timeline-item {
    flex: 0 0 230px;
    min-height: 118px;
    padding: 10px;
    scroll-snap-align: start;
  }

  .vpc-replay-page .vpc-timeline-item strong,
  .vpc-replay-page .vpc-timeline-item span {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .vpc-replay-page .vpc-timeline-item strong {
    -webkit-line-clamp: 2;
  }

  .vpc-replay-page .vpc-timeline-item span {
    -webkit-line-clamp: 1;
  }

  .vpc-replay-page .vpc-segment-row {
    flex: 0 0 176px;
    min-height: 84px;
    align-content: start;
    scroll-snap-align: start;
  }

  .vpc-timeline-window-note,
  .vpc-replay-row-load,
  .vpc-alert-row-load {
    align-items: stretch;
    flex-direction: column;
  }

  .vpc-timeline-window-note .semi-button,
  .vpc-replay-row-load > div,
  .vpc-replay-row-load .semi-button,
  .vpc-alert-row-load > div,
  .vpc-alert-row-load .semi-button {
    width: 100%;
  }

  .vpc-segment-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .vpc-replay-page .vpc-timeline-window-note .semi-button {
    width: auto;
    min-width: 92px;
  }

  .vpc-live-grid {
    grid-template-columns: 1fr;
  }

  .vpc-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 3px;
  }

  .vpc-tabs button {
    min-height: 30px;
    font-size: 12px;
    white-space: nowrap;
  }

  .vpc-query-metrics {
    grid-template-columns: 1fr;
  }

  .vpc-query-summary {
    grid-template-columns: 1fr;
  }

  .vpc-query-summary article {
    min-height: 54px;
    padding: 8px 9px;
  }

  .vpc-query-payload-toggle {
    align-items: stretch;
    flex-direction: column;
  }

  .vpc-query-metrics div {
    border-right: 0;
    border-bottom: 1px solid #edf1f6;
  }

  .vpc-query-metrics div:last-child {
    border-bottom: 0;
  }

  .vpc-raw-inspector-head,
  .vpc-raw-inspector-tools,
  .vpc-raw-location-evidence,
  .vpc-raw-response-audit,
  .vpc-raw-time-audit,
  .vpc-raw-frame-split-note,
  .vpc-raw-field-grid {
    grid-template-columns: 1fr;
  }

  .vpc-raw-frame-split-note {
    display: grid;
    gap: 4px;
  }

  .vpc-raw-inspector-head > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vpc-raw-location-main em {
    white-space: normal;
    word-break: break-all;
  }

  .vpc-raw-location-evidence .semi-button {
    width: 100%;
  }

  .vpc-raw-time-audit strong {
    white-space: normal;
  }

  .vpc-raw-response-fields {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .vpc-raw-response-fields::-webkit-scrollbar {
    display: none;
  }

  .vpc-raw-response-fields span {
    flex: 0 0 220px;
    min-height: 44px;
    scroll-snap-align: start;
  }

  .vpc-raw-response-audit > div:not(.vpc-raw-response-main):not(.vpc-raw-response-fields) {
    min-height: 46px;
    padding: 7px 8px;
  }

  .vpc-raw-response-fields strong {
    white-space: nowrap;
    word-break: normal;
  }

  .vpc-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .vpc-pagination > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .vpc-table {
    overflow-x: visible;
  }

  .vpc-table-head {
    display: none;
  }

  .vpc-table-row {
    min-width: 0;
    min-height: 0;
    padding: 12px 0;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .vpc-table-row > span,
  .vpc-table-row > strong {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    overflow-wrap: anywhere;
  }

  .vpc-table-row > span::before,
  .vpc-table-row > strong::before {
    content: attr(data-label);
    color: #98a2b3;
    font-size: 11px;
    font-weight: 600;
  }

  .vpc-mileage-table,
  .vpc-mileage-decision-table,
  .vpc-consistency-table {
    overflow-x: visible;
  }

  .vpc-mileage-head,
  .vpc-mileage-decision-head,
  .vpc-consistency-head {
    display: none;
  }

  .vpc-mileage-row,
  .vpc-mileage-decision-row,
  .vpc-consistency-row {
    min-width: 0;
    min-height: 0;
    padding: 12px 0;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .vpc-mileage-row > span,
  .vpc-mileage-row > strong,
  .vpc-mileage-decision-row > span,
  .vpc-mileage-decision-row > strong,
  .vpc-consistency-row > span,
  .vpc-consistency-row > strong {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    overflow-wrap: anywhere;
  }

  .vpc-mileage-row > span::before,
  .vpc-mileage-row > strong::before,
  .vpc-mileage-decision-row > span::before,
  .vpc-mileage-decision-row > strong::before,
  .vpc-consistency-row > span::before,
  .vpc-consistency-row > strong::before {
    content: attr(data-label);
    color: #98a2b3;
    font-size: 11px;
    font-weight: 600;
  }

  .vpc-mileage-row > .vpc-row-actions,
  .vpc-mileage-decision-row > .vpc-row-actions,
  .vpc-consistency-row > .vpc-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .vpc-mileage-row > .vpc-row-actions::before,
  .vpc-mileage-decision-row > .vpc-row-actions::before,
  .vpc-consistency-row > .vpc-row-actions::before {
    flex: 0 0 86px;
  }

  .vpc-stat-row-load,
  .vpc-source-row-load {
    align-items: stretch;
    flex-direction: column;
  }

  .vpc-stat-row-load > div,
  .vpc-stat-row-load .semi-button,
  .vpc-source-row-load > div,
  .vpc-source-row-load .semi-button {
    width: 100%;
  }

  .vpc-alert-side {
    order: -1;
  }

  .vpc-alert-fallback-main {
    order: -2;
  }

  .vpc-source-decision {
    grid-template-columns: 1fr;
  }

  .vpc-consistency-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vpc-consistency-metrics div:nth-child(2n) {
    border-right: 0;
  }

  .vpc-live-grid div,
  .vpc-live-grid div:nth-child(2n),
  .vpc-live-grid div:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid #edf1f6;
  }

  .vpc-live-grid div:last-child {
    border-bottom: 0;
  }
}
