:root {
  --accent: #1a5fb4;
  --accent-2: #0d4f9e;
  --bg: #f5f7fa;
  --card: #ffffff;
  --line: #d8dee6;
  --ok: #26a269;
  --warn: #e5a50a;
  --bad: #c01c28;
  --muted: #6a737d;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: #1c2431; }
header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--accent); color: #fff; }
header h1 { font-size: 18px; margin: 0; }
.badge { background: rgba(255,255,255,.18); border-radius: 12px; padding: 4px 12px; font-size: 12px; }
main { max-width: 1200px; margin: 16px auto; padding: 0 12px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.card h2 { margin: 0 0 10px; font-size: 15px; color: var(--accent-2); }
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; margin-bottom: 10px; }
label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
input, select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; min-width: 140px; }
input[type=number] { width: 72px; }
button { padding: 7px 14px; border: none; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; font-size: 13px; }
button:hover { background: var(--accent-2); }
button.secondary { background: #eceff3; color: #2c3340; }
button.secondary:hover { background: #dfe4ea; }
button.danger { background: var(--bad); }
button.tiny { padding: 3px 8px; font-size: 12px; }
.hidden { display: none; }
.list { list-style: none; padding: 0; margin: 8px 0 0; }
.list li { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 14px; }
.list li:hover { background: #f0f4fa; }
table { border-collapse: collapse; width: 100%; font-size: 12px; }
th, td { border: 1px solid var(--line); padding: 5px 6px; text-align: left; vertical-align: top; }
th { background: #eef2f7; position: sticky; top: 0; }
td.num, th.num { text-align: right; font-family: var(--mono); }
.tiny-input { width: 56px; font-family: var(--mono); }
.gauge { display: flex; gap: 18px; margin: 10px 0; }
.gauge-item { flex: 1; background: #f2f5f9; border-radius: 8px; padding: 10px 14px; }
.gauge-item .lbl { font-size: 12px; color: var(--muted); }
.gauge-item .val { font-size: 26px; font-weight: 700; font-family: var(--mono); }
.bar { height: 10px; border-radius: 6px; background: #e3e8ee; margin-top: 6px; overflow: hidden; }
.bar > div { height: 100%; background: var(--accent); }
.verdict-ok { color: var(--ok); font-weight: 700; }
.verdict-warn { color: var(--warn); font-weight: 700; }
.verdict-bad { color: var(--bad); font-weight: 700; }
code, pre { font-family: var(--mono); }
pre { background: #0f1720; color: #d6e3f3; padding: 10px; border-radius: 8px; font-size: 12px; overflow: auto; max-height: 240px; }
.msg { padding: 8px 12px; border-radius: 8px; margin: 6px 0; font-size: 13px; }
.msg.ok { background: #e4f5ec; color: #1c5c39; }
.msg.warn { background: #fdf3d7; color: #6a4e08; }
.msg.bad { background: #fce7e8; color: #81202a; }
.msg.gray { background: #eef1f5; color: #4a5360; }
details { margin: 4px 0; }
summary { cursor: pointer; font-size: 13px; color: var(--accent-2); }
.finding { padding: 3px 0 3px 12px; border-left: 3px solid var(--line); margin: 2px 0; font-size: 12px; }
.finding.high, .finding.critical { border-left-color: var(--bad); }
.finding.medium { border-left-color: var(--warn); }
.finding.low { border-left-color: var(--ok); }