:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  font-family: "Segoe UI", system-ui, sans-serif;
  max-width: 920px; margin: 0 auto; padding: 24px;
  background: #1e1f22; color: #e8e8e8; line-height: 1.5;
}
header h1 { margin: 0 0 4px; font-size: 26px; }
.tag { font-size: 12px; background: #3a3d44; color: #b8c0cc;
  padding: 2px 8px; border-radius: 10px; vertical-align: middle; }
.sub { margin: 0 0 18px; color: #9aa0aa; }
.card { background: #26282d; border: 1px solid #34373d; border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px; }
.controls, .thresholds { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
label { display: flex; flex-direction: column; font-size: 13px; color: #9aa0aa; gap: 4px; }
input { padding: 8px 10px; border-radius: 7px; border: 1px solid #3d414a;
  background: #1b1c1f; color: #e8e8e8; font-size: 14px; }
input[type=text] { min-width: 180px; }
input[type=number] { width: 90px; }
button { padding: 9px 16px; border: 0; border-radius: 7px; cursor: pointer;
  background: #3b82f6; color: #fff; font-size: 14px; font-weight: 600; align-self: end; }
button:hover { background: #2f6fe0; }
button:disabled { background: #45484f; cursor: default; }
button.secondary { background: #3a3d44; }
button.secondary:hover { background: #45484f; }
.known, .build { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
select { padding: 8px 10px; border-radius: 7px; border: 1px solid #3d414a;
  background: #1b1c1f; color: #e8e8e8; font-size: 14px; }
#buildBtn { background: #16a34a; }
#buildBtn:hover { background: #15893f; }
label.check { flex-direction: row; align-items: center; gap: 6px; color: #cfd3da; }
label.check input { width: auto; }
.note { font-size: 12px; color: #7d828c; align-self: center; max-width: 420px; }
.note code { background: #1b1c1f; padding: 1px 5px; border-radius: 4px; }
.ext-gate { border-radius: 10px; padding: 12px 16px; margin-bottom: 14px;
  border: 1px solid #34373d; font-size: 14px; }
.ext-gate.ok { background: #16261b; border-color: #2c5238; color: #cfe9d6; }
.ext-gate.warn { background: #2a211a; border-color: #5a4326; color: #f0dcc4; }
.ext-gate .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #5dd47e; margin-right: 7px; vertical-align: middle; }
.ext-gate-head strong { font-size: 15px; color: #ffd9a8; }
.ext-gate p { margin: 6px 0 10px; color: #e2cdb4; }
.ext-gate .muted { color: #9aa0aa; }
.ext-gate code { background: #1b1c1f; padding: 1px 5px; border-radius: 4px; }
.ext-gate-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ext-gate .cta { display: inline-block; padding: 9px 16px; border-radius: 7px;
  background: #3b82f6; color: #fff; font-weight: 600; text-decoration: none; }
.ext-gate .cta:hover { background: #2f6fe0; }
.status { font-size: 14px; min-height: 22px; margin-bottom: 10px; }
.status.ok { color: #5dd47e; }
.status.error { color: #ff7a7a; }
.count { color: #9aa0aa; font-size: 13px; margin: 0 0 8px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid #2e3036; }
th { color: #9aa0aa; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
td.jp { font-size: 21px; }
td.jp ruby rt { font-size: 52%; color: #8fb3ff; font-weight: normal; }
td.pos { color: #9aa0aa; font-size: 12px; }
td.num { text-align: right; color: #b8c0cc; font-variant-numeric: tabular-nums; }
td.key { color: #7fb4e6; }
td.mean { color: #cfd3da; font-size: 14px; max-width: 360px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tbody tr:hover { background: #24262b; }