body { font-family: system-ui, Arial, sans-serif; margin: 24px; }
    h1 { font-size: 20px; margin-bottom: 12px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0; }
    .card { border: 1px solid #ddd; border-radius: 6px; padding: 12px; }
    textarea { width: 100%; height: 120px; font-family: ui-monospace, monospace; }
    table { border-collapse: collapse; width: 100%; margin-top: 12px; }
    th, td { border: 1px solid #eee; padding: 8px; font-size: 12px; }
    th { background: #fafafa; }
    .status { padding: 2px 6px; border-radius: 4px; font-size: 11px; }
    .status.pending { background: #f3f4f6; }
    .status.running { background: #dbeafe; }
    .status.done { background: #dcfce7; }
    .status.error { background: #fee2e2; }
    .status.cancelled { background: #fef9c3; }
    .muted { color: #555; font-size: 12px; }
    .controls button { margin-right: 8px; }
    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
    /* Modal */
    .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 50; }
    .modal-backdrop.show { display: flex; }
    .modal { background: #fff; width: min(900px, 95vw); max-height: 85vh; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); display: flex; flex-direction: column; }
    .modal header { padding: 10px 12px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
    .modal header h3 { margin: 0; font-size: 14px; }
    .modal .content { padding: 10px 12px; overflow: auto; }
    .modal .content pre { white-space: pre; }
    .btn { padding: 4px 8px; font-size: 12px; cursor: pointer; }
    .btn.secondary { background: #f3f4f6; border: 1px solid #e5e7eb; }
    .step-controls { margin: 4px 0; }

/* Extracted inline styles */
.test-hub-inline-1 { width:100%; }