* { box-sizing: border-box; margin: 0; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #f4f6f8; color: #1a2733;
  max-width: 880px; margin: 0 auto; padding: 1.5rem 1rem 3rem;
}
header h1 { font-size: 1.6rem; }
header h1 span { color: #0b74c4; }
header p { color: #5a6b7a; margin-top: .25rem; }

.card {
  background: #fff; border: 1px solid #dde4ea; border-radius: 10px;
  padding: 1.1rem 1.25rem; margin-top: 1.25rem;
  box-shadow: 0 1px 2px rgba(20, 40, 60, .05);
}
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.card h2 { font-size: 1.1rem; }
.hint { color: #5a6b7a; font-size: .88rem; margin: .5rem 0 .75rem; }

button {
  background: #0b74c4; color: #fff; border: 0; border-radius: 8px;
  padding: .55rem 1.1rem; font-size: .95rem; cursor: pointer; white-space: nowrap;
}
button:hover { background: #0a66ac; }
button:disabled { background: #8fb8d6; cursor: wait; }

table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: .5rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid #edf1f5; }
th { color: #5a6b7a; font-weight: 600; font-size: .78rem; text-transform: uppercase; }
tr.pass td:nth-child(2), tr.pass td:nth-child(3) { color: #157a3d; font-weight: 600; }
tr.fail td { color: #b3261e; }
tr.fail td:first-child { font-weight: 600; }
tr.skip td { color: #8a97a3; }

.banner { border-radius: 8px; padding: .6rem .9rem; font-weight: 600; margin: .5rem 0; }
.banner.ok { background: #e4f4ea; color: #157a3d; }
.banner.bad { background: #fbe9e7; color: #b3261e; }

pre, .code {
  background: #0f1c26; color: #d7e5f0; border-radius: 8px;
  padding: .75rem .9rem; font-size: .85rem; overflow-x: auto;
}
.code { padding: .15rem .5rem; font-size: 1.05rem; letter-spacing: .12em; }
code { background: #edf1f5; padding: .05rem .3rem; border-radius: 4px; }

footer { margin-top: 2rem; color: #8a97a3; font-size: .8rem; text-align: center; }
.hidden { display: none; }