:root{
  --ink:#101225; --muted:#6b7280;
  --accent:#7a6ff3; --accent-2:#f066b4;
  --good:#12b76a; --warn:#ffd479; --fail:#ff8a9e;
  --panel:#fff; --soft:#f6f7ff;
  --radius:18px; --shadow:0 16px 40px rgba(20,16,40,.08);
}
.qa-pipeline{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;max-width:760px;width:100%;position:relative;isolation:isolate}
.qa-pipeline::before{content:"";position:absolute;inset:-25% -40% auto -40%;height:140px;background:radial-gradient(60% 60% at 50% 0, color-mix(in oklab, var(--accent) 40%, transparent), transparent 70%);filter:blur(24px);z-index:-1;opacity:.5}

.qa-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.qa-titlewrap{display:flex;align-items:center;gap:10px}
.qa-ico{color:var(--accent)}
.qa-head h3{margin:0;font-size:18px;font-weight:800;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.qa-badge{font-size:12px;background:#e9f9ee;color:#1a7f37;padding:6px 10px;border-radius:999px}

.qa-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;list-style:none;padding:0;margin:0 0 14px}
.qa-step{background:var(--soft);border-radius:14px;padding:12px;position:relative;min-height:92px;display:flex;flex-direction:column;justify-content:space-between}
.qa-step__meta strong{font-size:14px}
.muted{font-size:12px;color:var(--muted)}
.qa-step__status{font-size:12px}
.qa-step__dot{position:absolute;top:12px;right:12px;width:10px;height:10px;border-radius:50%;background:#d1d5db;box-shadow:0 0 0 0 rgba(122,111,243,.6)}
.qa-step.is-running .qa-step__dot{background:linear-gradient(90deg,var(--accent),var(--accent-2));animation:pulse 1.4s ease infinite}
.qa-step.is-pass .qa-step__dot{background:var(--good);box-shadow:none}
.qa-step__line{position:absolute;inset:auto 0 0 0;height:3px;border-radius:0 0 14px 14px;background:#e6e8ff}
.qa-step.is-running .qa-step__line{background:linear-gradient(90deg,var(--accent),var(--accent-2));background-size:200% 100%;animation:slide 2.6s linear infinite}
.qa-step.is-pass .qa-step__line{background:var(--good)}
@keyframes slide{to{background-position-x:-200%}}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(122,111,243,.6)}70%{box-shadow:0 0 0 12px rgba(122,111,243,0)}100%{box-shadow:0 0 0 0 rgba(122,111,243,0)}}

/* Terminal (single line) */
.term{border-radius:14px;overflow:hidden;margin-bottom:14px;background:#0a0d18;box-shadow:inset 0 0 0 1px rgba(122,111,243,.15),0 6px 24px rgba(9,10,20,.25)}
.term__titlebar{display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(180deg,#0d1020,#080a16);border-bottom:1px solid rgba(122,111,243,.18)}
.term__titlebar .dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 12px currentColor}
.term__titlebar .red{background:#ff5f56;color:#ff5f56}.term__titlebar .yellow{background:#ffbd2e;color:#ffbd2e}.term__titlebar .green{background:#27c93f;color:#27c93f}
.term__title{margin-left:6px;font-size:12px;color:#a7b0ff}
.term__body{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-variant-ligatures:none;font-size:12.5px;line-height:1.55;color:#dfe2ff;padding:12px 14px 14px;max-height:150px;overflow:hidden;position:relative;background:linear-gradient(0deg,rgba(255,255,255,.04),rgba(255,255,255,.04)) padding-box,radial-gradient(120% 80% at 0% 0%,rgba(122,111,243,.15),rgba(240,102,180,.06),rgba(0,0,0,0)) border-box;border:1px solid transparent;word-break:break-word;overflow-wrap:anywhere}
.term__line{display:flex;align-items:center;gap:8px;min-height:1.7em}
.term__prompt{color:#6ef06e}
.term__text{color:#dfe2ff}
.term__text--ok{color:#9af79a}

/* Spinner */
.spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.22);border-top-color:#a9a5ff;border-right-color:#f39bd1;animation:spin 1.4s linear infinite}
@keyframes spin { to { transform: rotate(360deg); } }

/* Dynamic badges */
.qa-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.b{
  position:relative;
  font-size:11.5px; line-height:1; padding:8px 12px; border-radius:999px;
  border:1px solid #ececff; background:#f7f7ff; color:#2b2f43; user-select:none;
  transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.b:hover{transform:translateY(-1px); box-shadow:0 4px 10px rgba(20,16,40,.06)}
/* active animation: gradient ring + soft glow + progress shimmer */
.b.is-active{
  background:linear-gradient(0deg, #ffffff, #ffffff) padding-box,
             conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent)) border-box;
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(122,111,243,.08), 0 8px 20px rgba(240,102,180,.12);
}
.b.is-active::after{
  content:""; position:absolute; inset:0; border-radius:999px; pointer-events:none;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.45) 18%, transparent 36%);
  filter: blur(0.5px);
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { to { transform: translateX(140%); } }

/* done: check icon + greenish background */
.b.is-done{
  background:#f5fff8;
  border-color:#cef3db;
  color:#0f3c25;
  box-shadow: inset 0 0 0 1px rgba(18,183,106,.08);
}
.b.is-done::before{
  content:"✓";
  position:absolute; left:-6px; top:-6px;
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#12b76a; color:#fff; font-size:12px; font-weight:700;
  box-shadow:0 4px 10px rgba(18,183,106,.28);
}

/* responsive */
@media (max-width:760px){.qa-steps{grid-template-columns:1fr}}