.diagnostics-v2-root,
.diagnostics-crash-fallback {
  min-height: 100dvh;
  box-sizing: border-box;
  padding: 24px 24px 96px;
  background: #090b10;
  color: #f6f7fb;
  font-family: var(--font-ui);
}

.diagnostics-v2-shell {
  width: min(1360px, 100%);
  margin: 0 auto;
}

.diagnostics-v2-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.diagnostics-v2-header h1,
.diagnostics-v2-access h1 {
  margin: 0;
  color: #ffffff;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: 0;
}

.diagnostics-v2-header p {
  max-width: 760px;
  margin: 7px 0 0;
  color: #c8d0df;
  font-size: 0.95rem;
  line-height: 1.45;
}

.diagnostics-v2-eyebrow {
  margin: 0 0 8px !important;
  color: #8fb3ff !important;
  font-size: 0.72rem !important;
  font-weight: 800;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

.diagnostics-v2-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.diagnostics-v2-actions--right {
  justify-content: flex-end;
}

.diagnostics-v2-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.diagnostics-v2-metric {
  min-height: 86px;
  padding: 13px 14px;
  border-radius: 8px;
  background: #111722;
}

.diagnostics-v2-metric span {
  display: block;
  color: #ffffff;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.1;
}

.diagnostics-v2-metric p {
  margin: 8px 0 0;
  color: #aeb9cc;
  font-size: 0.8rem;
  font-weight: 700;
}

.diagnostics-v2-metric--warning {
  border-color: rgba(245, 158, 11, 0.38);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.12), #111722);
}

.diagnostics-v2-metric--danger {
  border-color: rgba(248, 113, 113, 0.42);
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.13), #111722);
}

.diagnostics-v2-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.diagnostics-v2-notices {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.diagnostics-v2-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) minmax(180px, 0.75fr) minmax(200px, 0.85fr);
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 8px;
  background: #0f141e;
}

.diagnostics-v2-overview,
.diagnostics-v2-integrations {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.6fr);
  gap: 14px;
}

.diagnostics-v2-card,
.diagnostics-v2-list-panel,
.diagnostics-v2-detail-panel,
.diagnostics-v2-access {
  padding: 16px;
  border-radius: 8px;
  background: #0f141e;
}

.diagnostics-v2-access {
  display: grid;
  gap: 14px;
}

.diagnostics-v2-two-column {
  display: grid;
  grid-template-columns: minmax(340px, 430px) minmax(0, 1fr);
  gap: 14px;
  min-height: 630px;
}

.diagnostics-v2-list-panel,
.diagnostics-v2-detail-panel {
  min-height: 0;
}

.diagnostics-v2-list {
  display: grid;
  gap: 8px;
  max-height: 690px;
  overflow: auto;
  padding-right: 4px;
}

.diagnostics-v2-row {
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(143, 179, 255, 0.16);
  border-radius: 8px;
  background: #121925;
  color: #dbe4f4;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.diagnostics-v2-row:hover,
.diagnostics-v2-row.is-active {
  border-color: rgba(143, 179, 255, 0.62);
  background: #172033;
}

.diagnostics-v2-row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.diagnostics-v2-row strong {
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 0.92rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagnostics-v2-row p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #b8c3d6;
  font-size: 0.82rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.diagnostics-v2-row-meta,
.diagnostics-v2-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.diagnostics-v2-row-meta span:not(.diagnostics-v2-pill) {
  color: #9ba8bd;
  font-size: 0.74rem;
}

.diagnostics-v2-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.1);
  color: #cbd5e1;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.diagnostics-v2-pill--critical,
.diagnostics-v2-pill--high {
  border-color: rgba(248, 113, 113, 0.44);
  background: rgba(248, 113, 113, 0.13);
  color: #fecaca;
}

.diagnostics-v2-pill--new,
.diagnostics-v2-pill--api_failure,
.diagnostics-v2-pill--unhandled_rejection {
  border-color: rgba(245, 158, 11, 0.42);
  background: rgba(245, 158, 11, 0.12);
  color: #fed7aa;
}

.diagnostics-v2-pill--resolved,
.diagnostics-v2-pill--closed {
  border-color: rgba(74, 222, 128, 0.36);
  background: rgba(74, 222, 128, 0.1);
  color: #bbf7d0;
}

.diagnostics-v2-detail {
  display: grid;
  gap: 14px;
}

.diagnostics-v2-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.diagnostics-v2-detail-head h2,
.diagnostics-v2-section-head h2 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 1.12rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.diagnostics-v2-section-head p,
.diagnostics-v2-body {
  margin: 0;
  color: #b8c3d6;
  font-size: 0.86rem;
  line-height: 1.5;
}

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

.diagnostics-v2-info {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: #111722;
}

.diagnostics-v2-info span {
  display: block;
  margin-bottom: 5px;
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.diagnostics-v2-info strong {
  display: block;
  overflow: hidden;
  color: #f8fafc;
  font-size: 0.84rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagnostics-v2-readable,
.diagnostics-v2-code-section,
.diagnostics-v2-linked {
  display: grid;
  gap: 8px;
}

.diagnostics-v2-readable h3,
.diagnostics-v2-code-section h3,
.diagnostics-v2-linked h3,
.diagnostics-v2-small-title {
  margin: 0;
  color: #dbeafe;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.diagnostics-v2-readable p,
.diagnostics-v2-linked p {
  margin: 0;
  color: #d7deeb;
  font-size: 0.9rem;
  line-height: 1.55;
}

.diagnostics-v2-code-section pre {
  max-height: 320px;
  margin: 0;
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: #070a0f;
  color: #d7deeb;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.diagnostics-v2-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.diagnostics-v2-empty {
  display: grid;
  place-items: center;
  min-height: 260px;
  padding: 26px;
  border: 1px dashed rgba(143, 179, 255, 0.25);
  border-radius: 8px;
  background: #101622;
  text-align: center;
}

.diagnostics-v2-empty strong {
  color: #ffffff;
  font-size: 1rem;
}

.diagnostics-v2-empty p {
  max-width: 560px;
  margin: 8px 0 0;
  color: #c8d0df;
  font-size: 0.9rem;
  line-height: 1.5;
}

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

.diagnostics-v2-compact-list {
  display: grid;
  gap: 8px;
}

.diagnostics-v2-compact-row,
.diagnostics-v2-user-row {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: #111722;
}

.diagnostics-v2-compact-row strong,
.diagnostics-v2-user-row strong {
  color: #ffffff;
  font-size: 0.86rem;
}

.diagnostics-v2-compact-row span,
.diagnostics-v2-user-row span {
  color: #aeb9cc;
  font-size: 0.78rem;
}

.diagnostics-v2-user-table {
  display: grid;
  gap: 8px;
}

.diagnostics-v2-user-row {
  grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(100px, auto));
  align-items: center;
}

.diagnostics-v2-usage {
  display: grid;
  gap: 14px;
}

.diagnostics-v2-usage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.diagnostics-v2-resource-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.diagnostics-v2-room-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.32);
}

.diagnostics-v2-room-status--live {
  border-color: rgba(74, 222, 128, 0.34);
  background: rgba(22, 101, 52, 0.14);
}

.diagnostics-v2-room-status--pending {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(120, 53, 15, 0.14);
}

.diagnostics-v2-room-status--muted {
  border-color: rgba(248, 113, 113, 0.28);
  background: rgba(127, 29, 29, 0.12);
}

.diagnostics-v2-room-status strong,
.diagnostics-v2-room-status span {
  display: block;
  min-width: 0;
}

.diagnostics-v2-room-status strong {
  color: #f8fafc;
  font-size: 0.86rem;
}

.diagnostics-v2-room-status span {
  overflow: hidden;
  color: #aeb9c8;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagnostics-v2-room-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.diagnostics-v2-room-pill {
  max-width: 260px;
  padding: 5px 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.1);
  color: #cbd5e1;
  font-size: 0.72rem;
  font-weight: 800;
}

.diagnostics-v2-room-pill.is-live {
  border-color: rgba(74, 222, 128, 0.36);
  background: rgba(74, 222, 128, 0.12);
  color: #bbf7d0;
}

.diagnostics-v2-room-pill.is-muted {
  border-color: rgba(245, 158, 11, 0.32);
  background: rgba(245, 158, 11, 0.1);
  color: #fed7aa;
}

.diagnostics-v2-resource-buckets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.diagnostics-v2-resource-buckets--single {
  grid-template-columns: minmax(0, 1fr);
}

.diagnostics-v2-resource-buckets section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.22);
}

.diagnostics-v2-resource-buckets h3,
.diagnostics-v2-resource-table h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 0.86rem;
  font-weight: 850;
}

.diagnostics-v2-resource-note {
  margin: -2px 0 0;
  color: rgba(203, 213, 225, 0.78);
  font-size: 0.78rem;
  line-height: 1.35;
}

.diagnostics-v2-resource-warning {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.08);
  color: #fed7aa;
  font-size: 0.8rem;
}

.diagnostics-v2-railway-cost {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(74, 222, 128, 0.18);
  border-radius: 8px;
  background: rgba(5, 46, 22, 0.12);
}

.diagnostics-v2-railway-cost-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.diagnostics-v2-railway-cost-head h3 {
  margin: 0 0 4px;
  color: #f8fafc;
  font-size: 0.92rem;
  font-weight: 850;
}

.diagnostics-v2-railway-cost-head p {
  margin: 0;
  color: rgba(203, 213, 225, 0.78);
  font-size: 0.78rem;
  line-height: 1.35;
}

.diagnostics-v2-railway-cost-head span {
  flex-shrink: 0;
  padding: 5px 8px;
  border: 1px solid rgba(74, 222, 128, 0.32);
  border-radius: 999px;
  background: rgba(74, 222, 128, 0.1);
  color: #bbf7d0;
  font-size: 0.72rem;
  font-weight: 850;
}

.diagnostics-v2-info-grid--compact .diagnostics-v2-info {
  background: rgba(15, 23, 42, 0.26);
}

.diagnostics-v2-transport-activity {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.2);
}

.diagnostics-v2-transport-activity h4 {
  margin: 0;
  color: #f8fafc;
  font-size: 0.82rem;
  font-weight: 850;
}

.diagnostics-v2-transport-activity p {
  margin: -3px 0 0;
  color: rgba(203, 213, 225, 0.74);
  font-size: 0.76rem;
  line-height: 1.35;
}

.diagnostics-v2-resource-table {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.diagnostics-v2-resource-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.1fr) minmax(160px, 1.4fr) repeat(4, minmax(68px, 0.55fr));
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.28);
  color: rgba(226, 232, 240, 0.78);
  font-size: 0.82rem;
}

.diagnostics-v2-resource-row--head {
  background: rgba(15, 23, 42, 0.48);
  color: rgba(148, 163, 184, 0.88);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.diagnostics-v2-resource-row strong,
.diagnostics-v2-resource-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagnostics-v2-usage-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.diagnostics-v2-usage-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.diagnostics-v2-usage-metric {
  min-height: 108px;
  padding: 13px 14px;
  border-radius: 8px;
  background: #101722;
}

.diagnostics-v2-usage-metric--live {
  border-color: rgba(45, 212, 191, 0.36);
  background:
    linear-gradient(180deg, rgba(20, 184, 166, 0.14), rgba(16, 23, 34, 0.96));
}

.diagnostics-v2-usage-metric span {
  display: block;
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 850;
  line-height: 1.1;
}

.diagnostics-v2-usage-metric strong {
  display: block;
  margin-top: 8px;
  color: #dbeafe;
  font-size: 0.8rem;
}

.diagnostics-v2-usage-metric p {
  margin: 5px 0 0;
  color: #9fb0c8;
  font-size: 0.74rem;
  line-height: 1.35;
}

.diagnostics-v2-usage-charts,
.diagnostics-v2-usage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.diagnostics-v2-usage-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.diagnostics-v2-usage-trend {
  display: grid;
  gap: 12px;
}

.diagnostics-v2-usage-trend-head,
.diagnostics-v2-usage-trend-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.diagnostics-v2-usage-trend h3 {
  margin: 0;
  color: #ffffff;
  font-size: 0.95rem;
}

.diagnostics-v2-usage-trend p,
.diagnostics-v2-usage-trend-meta span {
  margin: 4px 0 0;
  color: #9fb0c8;
  font-size: 0.76rem;
}

.diagnostics-v2-usage-trend-head strong {
  color: #67e8f9;
  font-size: 1.2rem;
}

.diagnostics-v2-usage-trend svg {
  width: 100%;
  height: 88px;
  overflow: visible;
}

.diagnostics-v2-usage-trend polyline {
  fill: none;
  stroke: #67e8f9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  filter: drop-shadow(0 0 8px rgba(103, 232, 249, 0.24));
}

.diagnostics-v2-usage-ranked,
.diagnostics-v2-usage-roles {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.diagnostics-v2-usage-ranked-row,
.diagnostics-v2-usage-role {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, 0.42fr) minmax(44px, auto);
  align-items: center;
  gap: 10px;
}

.diagnostics-v2-usage-ranked-row strong,
.diagnostics-v2-usage-role strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #f8fafc;
  font-size: 0.82rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagnostics-v2-usage-ranked-row span,
.diagnostics-v2-usage-role span {
  display: block;
  margin-top: 3px;
  color: #9fb0c8;
  font-size: 0.72rem;
}

.diagnostics-v2-usage-ranked-row em,
.diagnostics-v2-usage-role em {
  color: #dbeafe;
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

.diagnostics-v2-usage-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
}

.diagnostics-v2-usage-bar span {
  display: block;
  min-width: 2px;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2dd4bf, #fbbf24);
}

.diagnostics-v2-usage-user-table {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  overflow-x: auto;
}

.diagnostics-v2-usage-user-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.5fr) minmax(150px, 0.5fr) minmax(110px, 0.35fr);
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(143, 179, 255, 0.14);
  border-radius: 8px;
  background: rgba(12, 17, 27, 0.78);
}

.diagnostics-v2-usage-user-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.3fr) minmax(148px, 0.9fr) repeat(4, minmax(82px, 0.45fr)) minmax(180px, 1.1fr) minmax(140px, 0.9fr);
  align-items: center;
  gap: 10px;
  min-width: 1000px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: #111722;
}

.diagnostics-v2-usage-user-row--head {
  background: transparent;
  border-color: rgba(143, 179, 255, 0.2);
}

.diagnostics-v2-usage-user-row--empty {
  grid-template-columns: 1fr;
}

.diagnostics-v2-usage-user-row strong,
.diagnostics-v2-usage-user-row span {
  min-width: 0;
  overflow: hidden;
  color: #d7deeb;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagnostics-v2-usage-user-row strong {
  color: #ffffff;
  font-size: 0.84rem;
}

.diagnostics-v2-usage-user-row--head span {
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.diagnostics-v2-usage-user-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  color: #9fb0c8;
  font-size: 0.78rem;
}

.diagnostics-v2-usage-user-pages {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.diagnostics-v2-usage-user-pages strong {
  color: #dbeafe;
  font-size: 0.76rem;
}

.diagnostics-v2-integration-state {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-bottom: 10px;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.1);
  color: #cbd5e1;
  font-size: 0.76rem;
  font-weight: 800;
}

.diagnostics-v2-integration-state.is-live {
  border-color: rgba(74, 222, 128, 0.38);
  background: rgba(74, 222, 128, 0.11);
  color: #bbf7d0;
}

.diagnostics-v2-integration-state.is-muted {
  border-color: rgba(245, 158, 11, 0.36);
  background: rgba(245, 158, 11, 0.1);
  color: #fed7aa;
}

.diagnostics-crash-fallback {
  display: grid;
  place-items: center;
}

.diagnostics-crash-card {
  width: min(560px, 100%);
  padding: 22px;
  border-color: var(--ui-danger-border, rgba(248, 113, 113, 0.35));
}

.diagnostics-crash-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.diagnostics-crash-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  border: 1px solid var(--ui-danger-border, rgba(248, 113, 113, 0.35));
  background: rgba(248, 113, 113, 0.1);
  color: #fca5a5;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.diagnostics-crash-fallback h1 {
  margin: 10px 0 8px;
  color: var(--color-text, #f8fafc);
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: 0;
}

.diagnostics-crash-actions {
  display: flex;
  margin-top: 16px;
}

.diagnostics-overlay-backdrop {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: #090b10;
}

.diagnostics-overlay-modal {
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  overflow: hidden;
  border-width: 0;
  border-radius: 0;
  background: #090b10;
  box-shadow: none;
}

.diagnostics-overlay-loading {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #c8d0df;
  font-size: 0.9rem;
  font-weight: 750;
}

.diagnostics-v2-root--overlay {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 24px 24px calc(104px + env(safe-area-inset-bottom, 0px));
  overflow: auto;
  background: #090b10;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-scrollbar-thumb) var(--ui-scrollbar-track);
  scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
}

.diagnostics-v2-root--overlay .diagnostics-v2-shell {
  width: 100%;
  max-width: none;
}

.diagnostics-v2-root--overlay .diagnostics-v2-header h1 {
  font-size: 1.45rem;
}

.diagnostics-v2-root--overlay .diagnostics-v2-header p {
  max-width: 680px;
  font-size: 0.86rem;
}

@media (max-width: 1100px) {
  .diagnostics-v2-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .diagnostics-v2-overview,
  .diagnostics-v2-integrations,
  .diagnostics-v2-two-column,
  .diagnostics-v2-usage-charts,
  .diagnostics-v2-usage-grid {
    grid-template-columns: 1fr;
  }

  .diagnostics-v2-usage-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .diagnostics-v2-root {
    padding: 14px;
  }

  .diagnostics-v2-root--overlay {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .diagnostics-v2-header {
    flex-direction: column;
  }

  .diagnostics-v2-actions,
  .diagnostics-v2-actions .ui-button {
    width: 100%;
  }

  .diagnostics-v2-usage-head {
    flex-direction: column;
  }

  .diagnostics-v2-resource-head {
    flex-direction: column;
  }

  .diagnostics-v2-usage-controls,
  .diagnostics-v2-usage-controls .ui-button {
    width: 100%;
  }

  .diagnostics-v2-metrics,
  .diagnostics-v2-usage-metrics,
  .diagnostics-v2-resource-buckets,
  .diagnostics-v2-toolbar,
  .diagnostics-v2-info-grid,
  .diagnostics-v2-editor,
  .diagnostics-v2-split-list {
    grid-template-columns: 1fr;
  }

  .diagnostics-v2-usage-user-controls {
    grid-template-columns: 1fr;
  }

  .diagnostics-v2-usage-user-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .diagnostics-v2-user-row {
    grid-template-columns: 1fr;
  }

  .diagnostics-v2-resource-row {
    grid-template-columns: 1fr 1fr;
  }

  .diagnostics-v2-resource-row--head {
    display: none;
  }
}