:root {
  --planetary-cyan: #05d9e8;
  --planetary-green: #00ff66;
  --planetary-magenta: #ff2a6d;
  --planetary-panel: #07101c;
}

.planetary-mesh-suite {
  margin: 18px 0;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--planetary-green) 34%, transparent);
  background: color-mix(in srgb, var(--planetary-panel) 92%, transparent);
}

.planetary-mesh-heading,
.planetary-mesh-actions,
.planetary-mesh-readouts {
  display: flex;
  gap: 14px;
}

.planetary-mesh-heading {
  align-items: flex-start;
  justify-content: space-between;
}

.planetary-mesh-heading h2 { margin: 0; }

.planetary-mesh-heading p:not(.eyebrow) {
  max-width: 740px;
  margin: 0;
  color: var(--muted, #8fa1b8);
}

.planetary-mesh-status {
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--planetary-green) 46%, transparent);
  color: var(--planetary-green);
  font: 700 10px/1.2 var(--mono, ui-monospace);
  letter-spacing: .08em;
  white-space: nowrap;
}

.planetary-mesh-readouts {
  flex-wrap: wrap;
  margin-top: 18px;
}

.planetary-mesh-readout {
  flex: 1 1 130px;
  min-width: 120px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--planetary-cyan) 24%, transparent);
  background: color-mix(in srgb, var(--surface, #0b1624) 78%, transparent);
}

.planetary-mesh-readout span {
  display: block;
  color: var(--muted, #8fa1b8);
  font: 700 10px/1.2 var(--mono, ui-monospace);
  letter-spacing: .08em;
}

.planetary-mesh-readout strong {
  display: block;
  margin-top: 6px;
  color: var(--planetary-cyan);
  font: 700 19px/1 var(--mono, ui-monospace);
}

.planetary-mesh-actions {
  flex-wrap: wrap;
  margin-top: 16px;
}

.planetary-mesh-button {
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid color-mix(in srgb, var(--planetary-cyan) 35%, transparent);
  color: var(--text, #eef7ff);
  background: transparent;
  cursor: pointer;
  font: 700 11px/1.2 var(--mono, ui-monospace);
  letter-spacing: .04em;
}

.planetary-mesh-button:hover,
.planetary-mesh-button:focus-visible {
  border-color: var(--planetary-cyan);
  color: var(--planetary-cyan);
}

.planetary-mesh-button.primary {
  border-color: color-mix(in srgb, var(--planetary-green) 52%, transparent);
  color: var(--planetary-green);
}

@media (max-width: 780px) {
  .planetary-mesh-heading { flex-direction: column; }
  .planetary-mesh-status { white-space: normal; }
}