.runtime-screen {
  --runtime-line: rgba(143, 240, 206, 0.16);
  --runtime-surface: rgba(8, 20, 29, 0.78);
  --runtime-surface-raised: rgba(15, 31, 42, 0.94);
  --runtime-accent: #8ff0ce;
  --runtime-text-soft: #9eb1bd;
  min-width: 0;
}

.runtime-screen .eyebrow {
  margin: 0 0 6px;
  color: var(--runtime-accent);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.runtime-toolbar,
.runtime-section,
.runtime-ledger-list,
.runtime-detail {
  border: 1px solid var(--runtime-line);
  background:
    linear-gradient(135deg, rgba(143, 240, 206, 0.035), transparent 42%),
    var(--runtime-surface);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
}

.runtime-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
}

.runtime-toolbar h3,
.runtime-section h4 {
  margin: 0;
}

.runtime-toolbar p:not(.eyebrow) {
  margin: 8px 0 0;
  color: var(--runtime-text-soft);
}

.runtime-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.runtime-meta {
  color: var(--runtime-text-soft);
  font-size: 0.78rem;
}

.runtime-message {
  min-height: 42px;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 14px;
  border-left: 3px solid transparent;
  color: var(--runtime-text-soft);
}

.runtime-message.loading,
.runtime-message.success {
  border-color: var(--runtime-accent);
  background: rgba(143, 240, 206, 0.06);
}

.runtime-message.error {
  border-color: #ff9f9f;
  background: rgba(255, 111, 111, 0.07);
  color: #ffc5c5;
}

.runtime-section {
  margin-bottom: 12px;
  padding: 18px;
  border-radius: 16px;
}

.runtime-section-heading,
.runtime-group-title,
.runtime-card-top,
.runtime-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.runtime-section-heading {
  margin-bottom: 14px;
}

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

.runtime-health-card,
.runtime-summary-card,
.runtime-retry-card {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 13px;
  background: var(--runtime-surface-raised);
}

.runtime-health-card {
  padding: 14px;
}

.runtime-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 7px 12px;
  margin: 14px 0 0;
  font-size: 0.78rem;
}

.runtime-facts dt {
  color: #728792;
  text-transform: uppercase;
}

.runtime-facts dd {
  min-width: 0;
  margin: 0;
  color: #dce9ef;
  overflow-wrap: anywhere;
}

.runtime-capabilities {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--runtime-line);
}

.runtime-task-chip {
  padding: 5px 8px;
  border-radius: 7px;
  background: rgba(80, 170, 225, 0.11);
  color: #a9dbf8;
  font-size: 0.72rem;
}

.runtime-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.runtime-summary-card {
  padding: 12px;
}

.runtime-summary-card h5,
.runtime-group-title h5 {
  margin: 0;
  color: #e7f2f5;
}

.runtime-count-list {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.runtime-count-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.runtime-ledger-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.35fr);
  gap: 12px;
  margin-bottom: 12px;
}

.runtime-ledger-list,
.runtime-detail {
  min-width: 0;
  padding: 18px;
  border-radius: 16px;
}

.runtime-filters {
  display: grid;
  grid-template-columns: minmax(120px, 0.6fr) minmax(180px, 1fr) auto;
  gap: 8px;
  margin-bottom: 12px;
}

.runtime-filters label {
  display: grid;
  gap: 5px;
  color: var(--runtime-text-soft);
  font-size: 0.75rem;
}

.runtime-filters input,
.runtime-filters select {
  min-width: 0;
  width: 100%;
}

.runtime-table-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: 10px;
}

.runtime-table {
  min-width: 680px;
}

.runtime-table.compact {
  min-width: 760px;
}

.runtime-table td,
.runtime-table th {
  vertical-align: top;
}

.runtime-run-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--runtime-accent);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.runtime-run-link:hover,
.runtime-run-link:focus-visible {
  color: #d2fff1;
}

.runtime-pagination {
  margin-top: 12px;
}

.runtime-detail {
  max-height: 78vh;
  overflow-y: auto;
}

.runtime-empty {
  color: var(--runtime-text-soft);
}

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

.runtime-overview-fact {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 9px;
  background: rgba(3, 13, 19, 0.4);
}

.runtime-overview-fact > span:first-child {
  display: block;
  margin-bottom: 5px;
  color: #718691;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.runtime-detail-group {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--runtime-line);
}

.runtime-group-title {
  margin-bottom: 9px;
}

.runtime-json {
  max-width: 300px;
  margin: 0;
  color: #c7d8df;
  font: 0.7rem/1.45 "IBM Plex Mono", "Cascadia Code", monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.runtime-retry-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 16px;
  margin-top: 8px;
  padding: 12px;
}

.runtime-retry-card .runtime-card-top {
  grid-column: 1 / -1;
}

.runtime-inline-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--runtime-text-soft);
  font-size: 0.74rem;
}

.runtime-retry-action {
  align-self: center;
}

.runtime-command-result {
  display: grid;
  grid-template-columns: minmax(130px, 0.25fr) repeat(3, minmax(0, 1fr));
  gap: 8px 16px;
  min-height: 74px;
  align-items: center;
  padding: 15px 18px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-left: 4px solid #718691;
  border-radius: 12px;
  background: var(--runtime-surface-raised);
}

.runtime-command-result.success,
.runtime-command-result.existing {
  border-left-color: var(--runtime-accent);
}

.runtime-command-result.unavailable,
.runtime-command-result.error,
.runtime-command-result.unauthenticated,
.runtime-command-result.forbidden {
  border-left-color: #ff9f9f;
}

.runtime-command-result span {
  min-width: 0;
  color: var(--runtime-text-soft);
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  .runtime-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .runtime-ledger-layout {
    grid-template-columns: 1fr;
  }

  .runtime-detail {
    max-height: none;
  }
}

@media (max-width: 760px) {
  .runtime-toolbar,
  .runtime-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .runtime-toolbar-actions {
    justify-content: flex-start;
  }

  .runtime-health-grid,
  .runtime-summary-grid,
  .runtime-detail-overview {
    grid-template-columns: 1fr;
  }

  .runtime-filters {
    grid-template-columns: 1fr;
  }

  .runtime-retry-card,
  .runtime-command-result {
    grid-template-columns: 1fr;
  }

  .runtime-retry-card .runtime-card-top {
    grid-column: auto;
  }
}

@media (max-width: 430px) {
  .runtime-section,
  .runtime-ledger-list,
  .runtime-detail,
  .runtime-toolbar {
    padding: 13px;
    border-radius: 12px;
  }

  .runtime-screen button {
    min-height: 42px;
  }
}