* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Sukhumvit Set", sans-serif;
  margin: 0; background: #fafafa; color: #222; }
nav { background: #fff; border-bottom: 1px solid #eee; padding: 12px 24px; }
nav a { margin-right: 16px; color: #666; text-decoration: none; font-weight: 500; }
nav a.active { color: #d92d2d; }
main { max-width: 980px; margin: 24px auto; padding: 0 24px 48px; }
h1 { margin: 0 0 16px; }
h1 small { color: #999; font-weight: normal; font-size: 14px; }
h2 { margin: 24px 0 8px; font-size: 16px; }
section { background: #fff; padding: 16px 20px; margin-bottom: 16px; border: 1px solid #eee; border-radius: 8px; }
label { display: block; margin-bottom: 12px; font-size: 13px; color: #555; }
label input, label select { display: block; width: 100%; padding: 8px 10px; margin-top: 4px;
  border: 1px solid #ddd; border-radius: 6px; font: inherit; }
textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
button { background: #d92d2d; color: #fff; padding: 10px 20px; border: 0; border-radius: 6px;
  font-weight: 600; cursor: pointer; }
button:hover { background: #b82424; }
.hint { color: #888; font-size: 12px; margin: 0 0 8px; }
.ok { background: #e6f7e6; color: #2a7a2a; padding: 8px 12px; border-radius: 6px; margin-bottom: 16px; }
#test-result { background: #f5f5f5; padding: 12px; border-radius: 6px; font-size: 12px;
  white-space: pre-wrap; word-break: break-all; max-height: 280px; overflow: auto; }

table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #eee; }
th, td { padding: 8px 12px; text-align: left; font-size: 13px; border-bottom: 1px solid #f0f0f0; }
th { background: #fafafa; font-weight: 600; color: #666; }
.mono { font-family: ui-monospace, monospace; font-size: 12px; color: #777; }
.src { color: #555; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge.success { background: #e6f7e6; color: #2a7a2a; }
.badge.failed  { background: #fde6e6; color: #b82424; }
.badge.skipped { background: #eee; color: #777; }
tr.detail td { background: #fafafa; padding: 0 12px; }
details { padding: 8px 0; }
details summary { cursor: pointer; font-size: 12px; color: #999; }
details pre { background: #fff; padding: 8px; border-radius: 4px; font-size: 11px;
  white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow: auto; border: 1px solid #eee; }