.stage-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.stage-overview {
  grid-column: 1 / -1;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) 2fr;
  gap: 24px;
  align-items: center;
}

.stage-overview span,
.stage-card span,
.live-progress span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.stage-overview b {
  display: block;
  font-size: 18px;
  margin: 5px 0;
}

.stage-overview small { color: var(--green); }

.stage-track {
  height: 8px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}

.stage-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--success), #72a184);
  transition: width .45s ease;
}

.stage-card {
  min-height: 132px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.stage-card b { font-size: 18px; }
.stage-card small { color: var(--muted); line-height: 1.45; }
.stage-card.completed { background: var(--success-bg); border-color: #b8cebf; }
.stage-card.running { background: var(--info-bg); border-color: #a9cad8; }
.stage-card.attention { border-color: var(--danger); background: var(--danger-bg); }

.progress-summary { padding: 20px; }
.progress-summary > p { color: var(--muted); line-height: 1.6; }

.live-progress {
  display: grid;
  grid-template-columns: .7fr 1.6fr .8fr;
  gap: 12px;
  margin: 22px 0;
}

.live-progress > div {
  padding: 17px 18px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  min-width: 0;
}

.live-progress b {
  display: block;
  margin-top: 7px;
  font-size: 20px;
}

.elapsed-clock {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--brand-600);
}

.activity-health {
  display: flex !important;
  align-items: center;
  gap: 9px;
}

.activity-health i,
.activity-line i {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: var(--green);
}

.activity-health.live i {
  box-shadow: 0 0 0 0 rgba(85, 119, 99, .45);
  animation: heartbeat 1.5s infinite;
}

.activity-health.thinking i { background: var(--warning); }
.activity-health.caution i { background: var(--danger); }
.activity-health.queued i,
.activity-health.quiet i { background: var(--neutral-status); }
.activity-health em { font-style: normal; font-size: 16px; line-height: 1.4; }

.activity-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
}

@keyframes heartbeat {
  0% { box-shadow: 0 0 0 0 rgba(85, 119, 99, .42); }
  70% { box-shadow: 0 0 0 9px rgba(85, 119, 99, 0); }
  100% { box-shadow: 0 0 0 0 rgba(85, 119, 99, 0); }
}

@media (max-width: 1100px) {
  .stage-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-overview { grid-column: 1 / -1; }
  .live-progress { grid-template-columns: 1fr 1fr; }
  .live-progress > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 650px) {
  .stage-board,
  .live-progress,
  .stage-overview { grid-template-columns: 1fr; }
  .stage-overview { gap: 14px; }
  .live-progress > div:nth-child(2) { grid-column: auto; grid-row: auto; }
}