RecRedTeam AuditLab: static audit page, 234 cases x 8 defense combinations precomputed
ca949ba verified | :root { | |
| --ink: #0f172a; | |
| --muted: #5b667a; | |
| --line: #dfe4ec; | |
| --line-strong: #c3ccd9; | |
| --bg: #ffffff; | |
| --panel: #f7f9fc; | |
| --accent: #b3261e; | |
| --accent-soft: #fdf3f2; | |
| --pass: #15803d; | |
| --fail: #b3261e; | |
| --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; | |
| } | |
| * { box-sizing: border-box; } | |
| html { -webkit-text-size-adjust: 100%; } | |
| body { | |
| margin: 0; | |
| background: var(--bg); | |
| color: var(--ink); | |
| font: 15px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| } | |
| .wrap { | |
| max-width: 1080px; | |
| margin: 0 auto; | |
| padding: 34px 22px 72px; | |
| } | |
| /* ---------- header ---------- */ | |
| header.top { border-bottom: 1px solid var(--line); padding-bottom: 18px; } | |
| .eyebrow { | |
| font-size: 12px; | |
| letter-spacing: 0.09em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| font-weight: 650; | |
| margin: 0 0 6px; | |
| } | |
| h1 { | |
| font-size: 27px; | |
| line-height: 1.25; | |
| margin: 0 0 8px; | |
| letter-spacing: -0.015em; | |
| } | |
| .lede { margin: 0; color: var(--muted); max-width: 74ch; } | |
| .lede strong { color: var(--ink); font-weight: 600; } | |
| .metrics { | |
| margin: 14px 0 0; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px 18px; | |
| font-size: 13px; | |
| color: var(--muted); | |
| } | |
| .metrics b { color: var(--ink); font-weight: 600; } | |
| /* ---------- tabs ---------- */ | |
| .tabs { | |
| display: flex; | |
| gap: 4px; | |
| margin: 22px 0 26px; | |
| border-bottom: 1px solid var(--line); | |
| flex-wrap: wrap; | |
| } | |
| .tab { | |
| appearance: none; | |
| border: 0; | |
| background: none; | |
| font: inherit; | |
| font-size: 14px; | |
| font-weight: 550; | |
| color: var(--muted); | |
| padding: 9px 12px 10px; | |
| cursor: pointer; | |
| border-bottom: 2px solid transparent; | |
| margin-bottom: -1px; | |
| } | |
| .tab:hover { color: var(--ink); } | |
| .tab[aria-selected="true"] { | |
| color: var(--accent); | |
| border-bottom-color: var(--accent); | |
| } | |
| .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } | |
| .panel[hidden] { display: none; } | |
| /* ---------- generic blocks ---------- */ | |
| h2 { | |
| font-size: 17px; | |
| margin: 34px 0 10px; | |
| letter-spacing: -0.01em; | |
| } | |
| h2:first-child { margin-top: 0; } | |
| h3 { font-size: 14px; margin: 22px 0 8px; } | |
| p { margin: 0 0 12px; } | |
| .note { color: var(--muted); font-size: 13px; } | |
| .table-wrap { | |
| overflow-x: auto; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| margin: 0 0 18px; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| width: 100%; | |
| font-size: 13px; | |
| } | |
| th, td { | |
| text-align: left; | |
| padding: 8px 12px; | |
| border-bottom: 1px solid var(--line); | |
| vertical-align: top; | |
| } | |
| th { | |
| background: var(--panel); | |
| font-weight: 650; | |
| white-space: nowrap; | |
| border-bottom: 1px solid var(--line-strong); | |
| } | |
| tbody tr:last-child td { border-bottom: 0; } | |
| td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } | |
| tbody tr.target td { background: var(--accent-soft); } | |
| code, .mono { font-family: var(--mono); font-size: 12.5px; } | |
| code { | |
| background: var(--panel); | |
| border: 1px solid var(--line); | |
| border-radius: 4px; | |
| padding: 0.5px 4px; | |
| } | |
| .chip { | |
| display: inline-block; | |
| font-size: 11.5px; | |
| font-weight: 650; | |
| letter-spacing: 0.02em; | |
| padding: 1px 7px; | |
| border-radius: 999px; | |
| border: 1px solid currentColor; | |
| white-space: nowrap; | |
| } | |
| .sev-critical { color: var(--accent); } | |
| .sev-high { color: #c2410c; } | |
| .sev-medium { color: #a16207; } | |
| /* ---------- case view ---------- */ | |
| .controls { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 16px 26px; | |
| align-items: flex-end; | |
| padding: 14px 16px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: var(--panel); | |
| margin-bottom: 20px; | |
| } | |
| .field { display: flex; flex-direction: column; gap: 5px; } | |
| .field > span { | |
| font-size: 11.5px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.07em; | |
| color: var(--muted); | |
| font-weight: 650; | |
| } | |
| select { | |
| font: inherit; | |
| font-size: 13.5px; | |
| padding: 6px 8px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 6px; | |
| background: #fff; | |
| color: var(--ink); | |
| max-width: min(520px, 78vw); | |
| } | |
| .plugins { display: flex; gap: 14px; flex-wrap: wrap; } | |
| .plugins label { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 13.5px; | |
| cursor: pointer; | |
| } | |
| .split { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| margin-top: 6px; | |
| } | |
| @media (max-width: 820px) { | |
| .split { grid-template-columns: 1fr; } | |
| } | |
| .run { | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| padding: 14px 16px; | |
| min-width: 0; | |
| } | |
| .run h3 { margin-top: 0; } | |
| .answer { | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| line-height: 1.55; | |
| white-space: pre-wrap; | |
| overflow-wrap: anywhere; | |
| background: #fbfcfe; | |
| border: 1px solid var(--line); | |
| border-radius: 6px; | |
| padding: 10px 12px; | |
| margin: 10px 0 12px; | |
| max-height: 320px; | |
| overflow-y: auto; | |
| } | |
| .verdict { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 10px; | |
| font-weight: 700; | |
| font-size: 14px; | |
| } | |
| .verdict.pass { color: var(--pass); } | |
| .verdict.fail { color: var(--fail); } | |
| .verdict .haz { font-weight: 500; color: var(--muted); font-size: 12.5px; } | |
| .reasons { | |
| margin: 8px 0 0; | |
| padding-left: 18px; | |
| font-size: 13px; | |
| color: var(--muted); | |
| } | |
| .reasons li { margin: 2px 0; } | |
| .query, .goal { | |
| background: var(--panel); | |
| border-left: 3px solid var(--line-strong); | |
| padding: 9px 12px; | |
| border-radius: 0 6px 6px 0; | |
| white-space: pre-wrap; | |
| font-size: 13.5px; | |
| overflow-wrap: anywhere; | |
| } | |
| .query { border-left-color: var(--accent); } | |
| .case-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; } | |
| .case-head h2 { margin: 0; font-size: 19px; } | |
| .meta-line { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px 12px; | |
| align-items: center; | |
| font-size: 12.5px; | |
| color: var(--muted); | |
| margin: 0 0 14px; | |
| } | |
| /* ---------- benchmark ---------- */ | |
| .bars { margin: 4px 0 22px; } | |
| .bar-row { | |
| display: grid; | |
| grid-template-columns: 190px 1fr 62px; | |
| align-items: center; | |
| gap: 12px; | |
| margin: 7px 0; | |
| font-size: 13px; | |
| } | |
| .bar-track { | |
| height: 16px; | |
| background: #e8ecf3; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .bar-fill { height: 100%; border-radius: 4px; } | |
| .bar-val { text-align: right; font-variant-numeric: tabular-nums; } | |
| .asr-high { background: #b3261e; } | |
| .asr-mid { background: #c2410c; } | |
| .asr-low { background: #15803d; } | |
| details { | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| padding: 10px 14px; | |
| margin: 0 0 14px; | |
| } | |
| summary { cursor: pointer; font-weight: 600; font-size: 13.5px; } | |
| details ul { margin: 10px 0 2px; padding-left: 20px; font-size: 13.5px; } | |
| details li { margin: 6px 0; } | |
| /* ---------- footer ---------- */ | |
| footer { | |
| margin-top: 44px; | |
| padding-top: 16px; | |
| border-top: 1px solid var(--line); | |
| color: var(--muted); | |
| font-size: 12.5px; | |
| } | |
| footer a { color: var(--accent); } | |
| a { color: var(--accent); } | |
| .load-error { | |
| border: 1px solid var(--fail); | |
| border-radius: 8px; | |
| padding: 12px 14px; | |
| color: var(--fail); | |
| font-size: 13.5px; | |
| } | |