:root {
  --bg: #ffffff;
  --fg: #1f2328;
  --muted: #656d76;
  --border: #d0d7de;
  --row-alt: #f6f8fa;
  --link: #0969da;
  --critical: #d1242f;
  --high: #bc4c00;
  --medium: #bf8700;
  --low: #6e7781;
  --zero: #1a7f37;
  --chip-bg: #f6f8fa;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --fg: #e6edf3;
    --muted: #8d96a0;
    --border: #30363d;
    --row-alt: #161b22;
    --link: #58a6ff;
    --critical: #ff7b72;
    --high: #ffa657;
    --medium: #d2a8ff;
    --low: #8d96a0;
    --zero: #56d364;
    --chip-bg: #161b22;
  }
}

* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 1200px;
  margin: 32px auto;
  padding: 0 20px;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
}
h1 { font-size: 28px; margin: 0 0 4px; font-weight: 600; }
.subtitle { color: var(--muted); font-size: 14px; margin: 0 0 8px; }
.meta { color: var(--muted); font-size: 13px; margin: 0 0 24px; }
.meta a { color: var(--link); text-decoration: none; }
.meta a:hover { text-decoration: underline; }
.back { font-size: 14px; margin-bottom: 16px; }
.back a { color: var(--link); text-decoration: none; }

/* Top summary chips */
.summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.chip {
  background: var(--chip-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  min-width: 110px;
}
.chip .label { color: var(--muted); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.chip .value { font-size: 20px; font-weight: 600; display: block; margin-top: 2px; }
.chip.critical .value { color: var(--critical); }
.chip.high .value { color: var(--high); }
.chip.medium .value { color: var(--medium); }
.chip.low .value { color: var(--low); }
.chip.zero .value { color: var(--zero); }

/* Filter input */
.controls {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  align-items: center;
}
input[type="search"] {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--bg);
  color: var(--fg);
}
input[type="search"]:focus { outline: 2px solid var(--link); outline-offset: -1px; }
.hint { color: var(--muted); font-size: 12px; }

/* Table */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; vertical-align: middle; }
th { background: var(--row-alt); font-weight: 600; cursor: pointer; user-select: none; position: relative; }
th[data-sort]::after { content: ""; opacity: 0.3; margin-left: 6px; }
th[data-sort].asc::after { content: "▲"; opacity: 1; }
th[data-sort].desc::after { content: "▼"; opacity: 1; }
tr:nth-child(even):not(.totals) td { background: var(--row-alt); }
tr.totals td { border-top: 2px solid var(--border); font-weight: 600; }
tr.hidden { display: none; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.critical { color: var(--critical); }
.high { color: var(--high); }
.medium { color: var(--medium); }
.low { color: var(--low); }
.zero { color: var(--zero); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Severity bar — horizontal stacked CSS bar */
.sevbar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--border);
  min-width: 80px;
}
.sevbar > span { display: block; height: 100%; }
.sevbar > .b-critical { background: var(--critical); }
.sevbar > .b-high { background: var(--high); }
.sevbar > .b-medium { background: var(--medium); }
.sevbar > .b-low { background: var(--low); }

/* VEX rendering */
tr.suppressed td { opacity: 0.55; text-decoration: line-through; }
tr.suppressed td.vex-cell { opacity: 1; text-decoration: none; }
.vex-badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--zero);
  color: #ffffff;
  font-weight: 500;
}
.vex-section {
  margin: 24px 0;
  padding: 16px;
  background: var(--row-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.vex-section h2 { font-size: 16px; margin: 0 0 12px; }
.vex-stmt { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--border); }
.vex-stmt:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.vex-stmt code { background: var(--bg); padding: 2px 4px; border-radius: 3px; font-size: 12px; }
.vex-stmt .impact { color: var(--muted); margin-top: 4px; font-size: 13px; }

/* Mobile */
@media (max-width: 700px) {
  body { margin: 16px auto; }
  table { font-size: 12px; }
  th, td { padding: 6px 8px; }
  .chip { min-width: 90px; }
}