.aimcode-infra-demo {
  display: none;
  color: #eef3fb;
  width: 100%;
  min-width: 0;
  padding-bottom: 48px;
}

main.aimcode-infra-active > :not(.aimcode-infra-demo) {
  display: none !important;
}

main.aimcode-infra-active > .aimcode-infra-demo {
  display: block;
}

.infra-demo-heading,
.infra-section-title,
.infra-controls,
.infra-isolation,
.infra-demo-badges,
.infra-flow,
.infra-lanes,
.infra-kpis,
.infra-grid-two,
.infra-notes {
  display: flex;
}

.infra-demo-heading {
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.infra-demo-heading p,
.infra-section-title span,
.infra-controls label > span,
.infra-controls legend,
.infra-notes span {
  margin: 0 0 8px;
  color: #8793a7;
  font: 600 10px/1.4 "IBM Plex Mono", monospace;
  text-transform: uppercase;
}

.infra-demo-heading h1 {
  margin: 0 0 8px;
  color: #f8fafc;
  font: 700 28px/1.15 "Instrument Sans", sans-serif;
  letter-spacing: 0;
}

.infra-demo-heading > div > span {
  color: #98a2b3;
  font-size: 14px;
}

.infra-demo-badges {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.infra-demo-badges b,
.infra-demo-badges em,
.infra-section-title > small,
.infra-kpis small,
.infra-lanes b,
.infra-table mark {
  border-radius: 4px;
  font: 700 9px/1 "IBM Plex Mono", monospace;
  letter-spacing: 0;
  text-transform: uppercase;
}

.infra-demo-badges b,
.infra-demo-badges em {
  padding: 8px 10px;
  border: 1px solid #ffffff1f;
  font-style: normal;
}

.infra-demo-badges b { color: #9ef0d0; background: #11211d; border-color: #57d9aa52; }
.infra-demo-badges em { color: #c8bcff; background: #18142b; border-color: #8b72ff4d; }

.infra-isolation {
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-left: 3px solid #54d5a4;
  background: #0b1413;
}

.infra-isolation strong { color: #a9f2d8; font-size: 12px; white-space: nowrap; }
.infra-isolation span { color: #8d9aab; font-size: 12px; }

.infra-controls {
  align-items: stretch;
  gap: 12px;
  margin-bottom: 14px;
}

.infra-controls label,
.infra-controls fieldset {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid #232b36;
  border-radius: 6px;
  background: #0b0f15;
}

.infra-controls label > span { display: block; }
.infra-controls fieldset { position: relative; }
.infra-controls legend { padding: 0; }
.infra-controls fieldset > small { display: block; margin-top: 8px; color: #737f90; font-size: 10px; }

.infra-controls select {
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid #303846;
  border-radius: 5px;
  color: #eef3fb;
  background: #080b10;
}

.infra-segments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.infra-segments button {
  min-height: 42px;
  border: 1px solid #303846;
  border-radius: 5px;
  color: #a6b0be;
  background: #080b10;
  font: 700 12px/1 "IBM Plex Mono", monospace;
}

.infra-segments button.active {
  color: #f5f2ff;
  border-color: #816dff;
  background: #211b42;
}

.infra-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.infra-kpis article {
  min-width: 0;
  padding: 15px;
  border: 1px solid #232b36;
  border-radius: 6px;
  background: #0b0f15;
}

.infra-kpis span { display: block; min-height: 32px; color: #8d98a8; font-size: 11px; }
.infra-kpis strong { display: block; margin: 8px 0 10px; overflow-wrap: anywhere; color: #f7f9fc; font: 700 21px/1.1 "Instrument Sans", sans-serif; }
.infra-kpis small { color: #d0b56f; }
.infra-kpis article:first-child small { color: #82dec0; }

.infra-band {
  min-width: 0;
  margin: 0 0 12px;
  padding: 16px;
  border-top: 1px solid #27303c;
  border-bottom: 1px solid #161d26;
  background: #090d12;
}

.infra-section-title {
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.infra-section-title span { display: block; margin-bottom: 4px; }
.infra-section-title h2 { margin: 0; color: #edf2f9; font: 700 16px/1.2 "Instrument Sans", sans-serif; }
.infra-section-title > small { max-width: 50%; color: #9ca7b7; text-align: right; line-height: 1.4; }

.infra-flow {
  align-items: stretch;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 4px;
  overscroll-behavior-x: contain;
}

.infra-flow-step {
  flex: 1 0 120px;
  min-width: 120px;
  padding: 12px;
  border: 1px solid #2b3441;
  border-radius: 5px;
  background: #0d1219;
}

.infra-flow-step small { display: block; margin-bottom: 12px; color: #7f6cff; font: 700 9px/1 "IBM Plex Mono", monospace; }
.infra-flow-step strong { color: #dfe5ee; font-size: 12px; }
.infra-flow i { align-self: center; color: #596577; font-style: normal; }

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

.infra-lanes article {
  min-width: 0;
  padding: 13px;
  border-left: 3px solid #596577;
  background: #0d1218;
}

.infra-lanes b { display: block; margin-bottom: 14px; color: #9ca7b7; }
.infra-lanes strong { display: block; margin-bottom: 5px; color: #eff3f8; font-size: 13px; }
.infra-lanes span { color: #7f8a9a; font-size: 11px; }
.infra-lanes [data-tone="green"] { border-left-color: #54d5a4; }
.infra-lanes [data-tone="violet"] { border-left-color: #816dff; }
.infra-lanes [data-tone="amber"] { border-left-color: #d9b454; }
.infra-lanes [data-tone="red"] { border-left-color: #e8717f; }

.infra-grid-two,
.infra-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.infra-grid-two > .infra-band { margin: 0 0 12px; }
.infra-table-wrap { max-width: 100%; overflow: auto; }
.infra-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.infra-table th { padding: 8px; border-bottom: 1px solid #303846; color: #7f8a99; text-align: left; font-weight: 600; white-space: nowrap; }
.infra-table td { padding: 9px 8px; border-bottom: 1px solid #171e27; color: #bac3cf; white-space: nowrap; }
.infra-table mark { display: inline-block; padding: 5px 6px; color: #cbd3dd; background: #202731; }
.infra-table mark[data-state="active"] { color: #91e4c6; background: #10231d; }
.infra-table mark[data-state="leased"] { color: #c7bcff; background: #1d1838; }
.infra-table mark[data-state="cooldown"] { color: #f3ba8a; background: #2a1a11; }

.infra-cost-list { display: grid; gap: 0; }
.infra-cost-list div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 39px; border-bottom: 1px solid #19202a; }
.infra-cost-list span { color: #8b96a6; font-size: 11px; }
.infra-cost-list b { color: #e8edf5; font: 700 12px/1 "IBM Plex Mono", monospace; white-space: nowrap; }

.infra-pool-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.infra-pool-grid article { min-width: 0; padding: 11px; border: 1px solid #222b36; background: #0d1218; }
.infra-pool-grid span { display: block; overflow: hidden; color: #8e99a9; font: 600 10px/1 "IBM Plex Mono", monospace; text-overflow: ellipsis; }
.infra-pool-grid strong { display: block; margin: 10px 0 5px; color: #f1f4f8; font-size: 18px; }
.infra-pool-grid small { display: block; color: #c5a960; font-size: 9px; overflow-wrap: anywhere; }

.infra-notes { margin: 12px 0; }
.infra-notes section { min-width: 0; padding: 14px; border-left: 3px solid #7867ef; background: #0c1017; }
.infra-notes section[data-warning] { border-left-color: #d5ab4d; background: #16130c; }
.infra-notes span { display: block; margin-bottom: 7px; }
.infra-notes p { margin: 0; color: #a0aab8; font-size: 11px; line-height: 1.55; }

.infra-gates { padding: 16px; border: 1px solid #26303c; background: #0b1016; }
.infra-gates h2 { margin: 0 0 13px; color: #eff3f8; font-size: 15px; }
.infra-gates > div { display: grid; grid-template-columns: 28px 1fr 28px 1fr; gap: 10px 8px; align-items: center; }
.infra-gates span { color: #6f5dff; font: 700 10px/1 "IBM Plex Mono", monospace; }
.infra-gates b { color: #abb5c2; font-size: 11px; font-weight: 600; }

@media (max-width: 1100px) {
  .infra-kpis,
  .infra-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .infra-pool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .aimcode-infra-demo { padding-bottom: 28px; }
  .infra-demo-heading,
  .infra-isolation { align-items: flex-start; flex-direction: column; }
  .infra-demo-badges { justify-content: flex-start; }
  .infra-demo-heading h1 { font-size: 24px; }
  .infra-isolation { gap: 5px; }
  .infra-isolation strong { white-space: normal; }
  .infra-controls,
  .infra-grid-two,
  .infra-notes { display: grid; grid-template-columns: 1fr; }
  .infra-kpis { grid-template-columns: 1fr 1fr; }
  .infra-lanes { grid-template-columns: 1fr 1fr; }
  .infra-kpis strong { font-size: 17px; }
  .infra-section-title { align-items: flex-start; flex-direction: column; }
  .infra-section-title > small { max-width: 100%; text-align: left; }
  .infra-pool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .infra-gates > div { grid-template-columns: 28px 1fr; }
}

@media (max-width: 420px) {
  .infra-kpis,
  .infra-lanes,
  .infra-pool-grid { grid-template-columns: 1fr; }
  .infra-controls label,
  .infra-controls fieldset,
  .infra-band { padding: 12px; }
}