.live-control-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(240px, 1.2fr);
  gap: 1px;
  margin: 0 0 18px;
  border: 1px solid var(--console-border, #283140);
  border-radius: 12px;
  overflow: hidden;
  background: var(--console-border, #283140);
}

.live-control-field,
.live-control-state {
  min-width: 0;
  padding: 14px 16px;
  background: var(--console-panel, #101720);
}

.live-control-field span,
.live-control-state span,
.live-cloud-card__label {
  display: block;
  margin-bottom: 7px;
  color: var(--console-muted, #7f8a99);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.live-control-field select {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--console-text, #f4f7fb);
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 620;
}

.live-control-state strong {
  display: block;
  overflow: hidden;
  color: var(--console-text, #f4f7fb);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-control-state small {
  display: block;
  margin-top: 4px;
  color: var(--console-muted, #7f8a99);
  font-size: 11px;
}

.live-cloud-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 18px;
  border: 1px solid var(--console-border, #283140);
  border-radius: 12px;
  overflow: hidden;
  background: var(--console-border, #283140);
}

.live-cloud-card > div {
  min-width: 0;
  padding: 15px 16px;
  background: var(--console-panel, #101720);
}

.live-cloud-card strong {
  display: block;
  overflow: hidden;
  color: var(--console-text, #f4f7fb);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-cloud-card small {
  display: block;
  margin-top: 5px;
  color: var(--console-muted, #7f8a99);
  font-size: 11px;
}

.live-cloud-card [data-live-lifecycle-state="running"] strong,
.live-cloud-card [data-live-lifecycle-state="completed"] strong {
  color: #71d6b2;
}

.live-cloud-card [data-live-lifecycle-state="failed"] strong {
  color: #f19b85;
}

.live-control-progress {
  height: 2px;
  margin: -18px 0 18px;
  overflow: hidden;
  background: rgba(127, 138, 153, .16);
}

.live-control-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #5aa8ff, #76d8b5);
  transition: width .5s cubic-bezier(.2,.8,.2,1);
}

.mission-run[data-live-running="true"] {
  cursor: wait;
  opacity: .75;
}

html[data-console-theme="light"] .live-control-strip,
html[data-console-theme="light"] .live-cloud-card {
  background: #d9e0e8;
}

html[data-console-theme="light"] .live-control-field,
html[data-console-theme="light"] .live-control-state,
html[data-console-theme="light"] .live-cloud-card > div {
  background: #fff;
}

@media (max-width: 960px) {
  .live-control-strip { grid-template-columns: 1fr 1fr; }
  .live-control-state { grid-column: 1 / -1; }
  .live-cloud-card { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .live-control-strip,
  .live-cloud-card { grid-template-columns: 1fr; }
  .live-control-state { grid-column: auto; }
}