:root{font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;color:#1c1e21;background:#f6f7f9}*{box-sizing:border-box}body{margin:0}.center{min-height:100vh;display:grid;place-items:center}.card{background:#fff;border:1px solid #e3e6ea;border-radius:12px;padding:28px;width:340px;display:flex;flex-direction:column;gap:8px}.card h1{margin:0 0 8px}label{font-size:12px;color:#687;margin-top:8px}input,select{padding:8px 10px;border:1px solid #d3d7dd;border-radius:8px;font-size:14px}button{padding:8px 12px;border:1px solid #d3d7dd;border-radius:8px;background:#fff;cursor:pointer;font-size:14px}button:hover{background:#f0f2f5}.card button{margin-top:14px;background:#2563eb;color:#fff;border-color:#2563eb}.app{max-width:920px;margin:0 auto;padding:16px}header{display:flex;align-items:center;gap:12px;padding:8px 0 16px}.spacer{flex:1}.link{border:none;background:none;color:#2563eb;padding:2px 4px}.tabs{display:flex;gap:6px;margin-bottom:12px}.tabs .on{background:#1c1e21;color:#fff;border-color:#1c1e21}table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e3e6ea;border-radius:10px;overflow:hidden}th,td{text-align:left;padding:10px 12px;border-bottom:1px solid #eef0f3;font-size:14px}th{font-size:12px;color:#687;background:#fafbfc}.row{cursor:pointer}.row:hover{background:#f7f9fc}.tag{font-size:12px;background:#eef2ff;color:#3730a3;padding:1px 7px;border-radius:999px}.state{font-size:12px;padding:1px 8px;border-radius:999px;text-transform:capitalize}.state.passed{background:#dcfce7;color:#166534}.state.failed,.state.error{background:#fee2e2;color:#991b1b}.state.running,.state.queued{background:#fef9c3;color:#854d0e}.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}.kpi{background:#fff;border:1px solid #e3e6ea;border-radius:10px;padding:16px}.kpi-value{font-size:30px;font-weight:700}.kpi-value.good{color:#166534}.kpi-value.bad{color:#991b1b}.kpi-label{font-size:12px;color:#687;margin-top:2px}.block{background:#fff;border:1px solid #e3e6ea;border-radius:10px;padding:14px;margin-bottom:14px}.block-head{font-size:12px;color:#687;margin-bottom:10px}.bars{display:flex;align-items:flex-end;gap:5px;height:96px}.bar-col{flex:1;display:flex;align-items:flex-end;justify-content:center}.bar{position:relative;width:100%;max-width:22px;background:#fca5a5;border-radius:3px;overflow:hidden}.bar-pass{position:absolute;bottom:0;left:0;right:0;background:#4ade80}.toolbar{margin-bottom:10px}.panel{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid #e3e6ea;border-radius:10px;padding:10px;margin-bottom:10px}.panel input{flex:1;min-width:160px}.editor{display:flex;flex-direction:column;gap:8px;padding:6px 0}textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;padding:10px;border:1px solid #d3d7dd;border-radius:8px;resize:vertical;line-height:1.5}.editor-actions{display:flex;gap:8px;align-items:center}.danger{color:#991b1b;border-color:#fecaca}.danger:hover{background:#fee2e2}.history{margin-top:8px;border-top:1px solid #eef0f3;padding-top:8px}.history-head{font-size:12px;color:#687;margin-bottom:4px}.ver{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px}.ver-title{color:#475569}.results{display:flex;flex-direction:column;gap:10px;padding:4px 0}.result{border:1px solid #eef0f3;border-radius:8px;padding:10px}.result-head{display:flex;gap:8px;align-items:center}.steps{margin:8px 0 4px;font-size:13px}.steps li.failed{color:#991b1b}.steps li.skipped{color:#94a3b8}.muted{color:#94a3b8;font-size:13px}.empty{padding:32px;text-align:center;color:#94a3b8}.error{background:#fee2e2;color:#991b1b;padding:10px 12px;border-radius:8px;margin:8px 0;font-size:13px}.live{display:flex;gap:12px;margin:8px 0;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;height:360px}.live-frame{flex:1;background:#0f172a;display:flex;align-items:center;justify-content:center;min-width:0}.live-frame img{max-width:100%;max-height:100%}.live-frame .muted{color:#64748b}.live-side{width:320px;overflow:auto;padding:10px 12px;border-left:1px solid #e2e8f0}.live-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.live-done{font-weight:600}.live-net{font:12px ui-monospace,monospace;padding:3px 6px;border-radius:4px;margin:2px 0;background:#f1f5f9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-net.bad{background:#fee2e2;color:#991b1b;font-weight:600}.dot{width:8px;height:8px;border-radius:50%;background:#22c55e;display:inline-block;animation:pulse 1.2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.artifact-video{display:block;max-width:480px;width:100%;margin:8px 0;border-radius:10px;border:1px solid #e2e8f0;background:#0f172a}.checklist{display:flex;flex-direction:column;gap:4px;margin:8px 0;max-height:220px;overflow:auto}.check{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}td.actions{display:flex;gap:10px;align-items:center}.bell{position:relative}.bell-btn{background:transparent;border:0;font-size:18px;cursor:pointer;padding:4px 6px;position:relative}.bell-btn .badge{position:absolute;top:-2px;right:-4px;background:#dc2626;color:#fff;font-size:11px;font-weight:700;min-width:16px;height:16px;border-radius:8px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center}.bell-panel{position:absolute;right:0;top:32px;width:320px;max-height:420px;overflow:auto;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 12px 40px #0002;z-index:20}.bell-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #f1f5f9}.bell-empty{padding:16px;text-align:center}.notif{padding:10px 12px;border-bottom:1px solid #f1f5f9;cursor:pointer}.notif:hover{background:#f8fafc}.notif.unread{background:#eff6ff}.notif.unread:hover{background:#e0ecfe}.notif-title{font-size:14px;font-weight:600}.desktop-grid{display:grid;grid-template-columns:360px 1fr;gap:12px;margin-top:12px}.flow-input{font:13px ui-monospace,monospace;padding:10px;border:1px solid #e2e8f0;border-radius:10px;resize:vertical;min-height:360px}.connect-bar{display:flex;align-items:center;gap:8px;padding:8px 0;flex-wrap:wrap}.connect-bar input{padding:5px 8px}.sync-status{margin-left:auto}.section{margin:20px 0 8px;font-size:16px}
