.runs-page {
 display: flex;
 flex-direction: column;
 gap: 16px;
 min-height: 100%;
}

.runs-toolbar {
 display: flex;
 gap: 8px;
 align-items: center;
 flex-wrap: wrap;
}

.runs-list {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.runs-row,
.runs-empty,
.runs-step {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 8px;
 padding: 16px;
 border: 1px solid var(--border);
 border-radius: 12px;
 background: var(--card);
}

.runs-row-head,
.runs-step-head {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
}

.runs-row-head h2 {
 margin: 0;
 font-size: var(--text-lg);
}

.runs-status {
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0.02em;
 text-transform: uppercase;
 color: var(--muted-foreground);
}

.runs-status[data-status='Running'],
.runs-status[data-status='Blocked'] {
 color: var(--foreground);
}

.runs-status[data-status='Canceled'],
.runs-status[data-status='Failed'],
.runs-status[data-status='CompletedWithErrors'] {
 color: var(--destructive);
}

.runs-error {
 color: var(--destructive);
 margin: 0;
}

.runs-output,
.runs-result {
 margin: 0;
 max-width: 100%;
 overflow: auto;
 white-space: pre-wrap;
 font-size: 13px;
}

.runs-group {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.runs-group h3 {
 margin: 8px 0 0;
 font-size: var(--text-sm, 14px);
 color: var(--muted-foreground);
 font-weight: 600;
}