* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: #0e0e13; color: #f2f2f5; font-family: Arial, Helvetica, sans-serif; }
body { padding: 40px 60px; font-size: 22px; line-height: 1.35; }
.d-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.d-title { font-size: 34px; font-weight: bold; }
.d-sub { color: #9a9aa5; font-size: 20px; margin-top: 4px; }
/* Mirrors .button.button-secondary.button-medium from src/styles/_button.scss */
.d-btns a {
  position: relative;
  display: inline-block;
  margin-left: 24px;
  padding: 0 24px;
  border-radius: 28px;
  background: transparent;
  color: #CCC5B9;
  border: 1px solid rgba(204, 196, 184, 0.4);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 56px;
  letter-spacing: 0.8px;
  outline: none;
  white-space: nowrap;
}
.d-btns a.is-focused,
.d-btns a:focus,
.d-btns a:hover {
  color: #fff;
  border-color: transparent;
}
.d-btns a.is-focused::after,
.d-btns a:focus::after,
.d-btns a:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: -6px;
  right: 0;
  bottom: 0;
  margin: auto;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  border: 4px solid currentColor;
  border-radius: 50px;
}
.d-code {
  font-family: 'Courier New', monospace; font-size: 24px; font-weight: bold;
  background: #1a1a22; border: 2px solid #33333f; border-radius: 10px;
  padding: 16px 20px; margin-bottom: 10px; word-break: break-all; color: #ffd76a;
}
.d-hint { color: #9a9aa5; font-size: 19px; margin-bottom: 20px; }
.d-verdict {
  background: #1a2230; border: 2px solid #2f80ed; border-radius: 10px;
  padding: 14px 20px; margin-bottom: 22px; display: none;
}
.d-verdict.visible { display: block; }
.d-verdict__title { font-weight: bold; margin-bottom: 6px; color: #7ab3ff; }
#diag-verdict-list { margin-left: 28px; }
#diag-verdict-list li { margin-bottom: 4px; }
.d-row {
  display: flex; align-items: baseline; gap: 18px;
  padding: 10px 0; border-bottom: 1px solid #232330;
}
.d-row__name { flex: 0 0 320px; color: #c9c9d4; }
.d-row__detail { flex: 1; word-break: break-word; }
.d-row__status { flex: 0 0 130px; text-align: right; font-weight: bold; }
.st-wait { color: #9a9aa5; }
.st-ok { color: #4caf50; }
.st-fail { color: #ff5252; }
.st-warn { color: #ffb300; }
.st-info { color: #9a9aa5; }