* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1c2230;
  background: #eef1f5;
}
.topbar {
  background: #11203a;
  color: #fff;
  padding: 14px 28px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.topbar .brand { font-weight: 700; letter-spacing: .02em; }
.topbar .tag { color: #8fa6c8; font-size: 13px; }
.topbar .operator { margin-left: auto; color: #8fa6c8; font-size: 13px; }
.topbar .operator a { color: #cdddf2; }
main { max-width: 880px; margin: 0 auto; padding: 28px 20px 80px; }
h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 0 0 14px; color: #11203a; }
.lede { color: #4a5468; margin: 0 0 22px; }
code { background: #e3e8f0; border-radius: 4px; padding: 1px 5px; font-size: 90%; }
.card {
  background: #fff;
  border: 1px solid #d6dce6;
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 18px;
}
.card.login { max-width: 460px; margin: 48px auto; }
.card.login .go { margin-top: 6px; }
.card.login .status { margin-top: 14px; }

.fld { margin-bottom: 14px; }
.fld label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.req { color: #c0392b; }
.cond { color: #b9770e; font-weight: 400; font-size: 12px; }
.hint { color: #6b7689; font-size: 12px; margin: 0 0 6px; }
input[type=text], textarea, select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid #b9c2d0;
  border-radius: 6px;
  font: inherit;
  background: #fff;
}
textarea { resize: vertical; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.check { font-weight: 400; display: flex; align-items: center; gap: 5px; }
.check input { width: auto; }
fieldset.grp {
  border: 1px solid #d6dce6;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 14px;
}
fieldset.grp > legend { font-weight: 700; font-size: 13px; padding: 0 6px; }
fieldset.row {
  border: 1px dashed #c7cedb;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
}
fieldset.row > legend { color: #6b7689; font-size: 12px; }
button.go {
  background: #1d6fe0;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 12px 26px;
  font: 600 15px/1 inherit;
  cursor: pointer;
}
button.go:hover { background: #1559b8; }
a { color: #1d6fe0; }

/* delivery surface */
.status { font-weight: 600; }
.status.ok, .step.ok .badge { color: #1e7d34; }
.status.fail, .step.fail .badge { color: #c0392b; }
.badge {
  font-size: 12px;
  font-weight: 700;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 1px 6px;
  vertical-align: middle;
}
.step.ok { border-left: 4px solid #1e7d34; }
.step.fail { border-left: 4px solid #c0392b; }
dl.detail {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 6px 14px;
  margin: 12px 0 0;
}
dl.detail dt { font-weight: 600; color: #4a5468; font-size: 13px; }
dl.detail dd { margin: 0; font-size: 13px; word-break: break-word; }
pre.output {
  background: #11203a;
  color: #d6e2f5;
  padding: 14px;
  border-radius: 8px;
  overflow: auto;
  font-size: 12px;
  margin: 4px 0 0;
}

/* Engine per-step status */
ul.esteps { list-style: none; margin: 4px 0 0; padding: 0; }
li.estep {
  border: 1px solid #d6dce6;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
li.estep.ok { border-left: 3px solid #1e7d34; }
li.estep.fail { border-left: 3px solid #c0392b; }
li.estep .dur { color: #6b7689; font-size: 12px; margin-left: 6px; }
ul.vals { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; }
ul.vals li.ok { color: #1e7d34; }
ul.vals li.fail { color: #c0392b; }
.estep .err { color: #c0392b; font-size: 13px; margin: 6px 0 0; }