Add runtime environment readiness checks

frontend/src/styles.css

@@ -219,6 +219,11 @@ h2 {
   margin-bottom: 16px;
 }
 
+.grid.four {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin-bottom: 16px;
+}
+
 .panel {
   padding: 18px;
   min-width: 0;
@@ -748,6 +753,87 @@ meter {
   accent-color: var(--green);
 }
 
+.envList {
+  display: grid;
+  gap: 10px;
+}
+
+.envCard {
+  min-width: 0;
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+  border-radius: 7px;
+  border: 1px solid var(--line);
+  background: #101310;
+}
+
+.envCard.ok {
+  border-color: rgba(157, 226, 111, 0.32);
+}
+
+.envCard.bad {
+  border-color: rgba(240, 113, 103, 0.55);
+}
+
+.envHead {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: start;
+}
+
+.envHead strong,
+.envHead small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.envHead small {
+  color: var(--muted);
+  margin-top: 2px;
+}
+
+.envHead > span {
+  color: var(--green);
+  font-size: 11px;
+  font-weight: 760;
+}
+
+.envCard.bad .envHead > span {
+  color: var(--red);
+}
+
+.envChecks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.envChecks span {
+  max-width: 100%;
+  padding: 4px 6px;
+  border-radius: 5px;
+  border: 1px solid rgba(238, 242, 232, 0.1);
+  color: var(--muted);
+  background: #080a08;
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.envChecks span.ok {
+  color: var(--green);
+}
+
+.envChecks span.bad {
+  color: var(--red);
+}
+
 .bigNumber {
   font-size: 54px;
   font-weight: 760;