:root { --bg:#f6f7f9; --fg:#1d2330; --muted:#667085; --line:#e3e6ea; --card:#fff; --accent:#2f6fdb;
        --critical:#b42318; --high:#e8590c; --medium:#b98900; --low:#2f6fdb; --info:#667085; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--fg); }
nav { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; padding:.75rem 1rem; background:var(--card); border-bottom:1px solid var(--line); }
nav a { color:var(--fg); text-decoration:none; } nav a:hover { color:var(--accent); }
nav .push { margin-left:auto; }
main { padding:1rem; max-width:1400px; margin:0 auto; }
h1 { font-size:1.4rem; } h2 { font-size:1.1rem; margin-top:2rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1rem; }
.narrow { max-width:380px; margin:4rem auto; display:grid; gap:.75rem; }
label { display:grid; gap:.25rem; color:var(--muted); }
input, select, textarea, button { font:inherit; padding:.45rem .6rem; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--fg); }
button { background:var(--accent); border-color:var(--accent); color:#fff; cursor:pointer; }
.error { color:var(--critical); }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:.75rem; margin-bottom:.75rem; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.75rem; display:grid; }
.tile .label { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; }
.tile .value { font-size:1.6rem; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(380px, 1fr)); gap:1rem; }
figure { margin:0; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.75rem; }
figcaption { color:var(--muted); margin-bottom:.5rem; }
.scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; background:var(--card); }
th, td { text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:500; }
.mono, pre { font-family:ui-monospace, Consolas, monospace; font-size:.85rem; }
pre { background:#0f1522; color:#dfe6f3; padding:1rem; border-radius:8px; overflow:auto; max-height:480px; }
.sev { font-weight:600; text-transform:uppercase; font-size:.75rem; }
.sev-critical { color:var(--critical); } .sev-high { color:var(--high); } .sev-medium { color:var(--medium); }
.sev-low { color:var(--low); } .sev-info { color:var(--info); }
.inline { display:flex; gap:.5rem; flex-wrap:wrap; align-items:end; }
.stack { display:grid; gap:.6rem; max-width:560px; }
.status-error, .status-timeout { color:var(--critical); } .status-ok { color:#2f7d32; }