:root { --bg:#f4f5f7; --card:#fff; --ink:#1f2933; --muted:#616e7c; --line:#d9dee3; --accent:#e8871e; --accent2:#2c6e9b;
  --ok:#2e9e4f; --warn:#d9a300; --crit:#d23c3c; --info:#5b6b7a; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
* { box-sizing:border-box }
body { margin:0; font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink) }
a { color:var(--accent2) }
header.top { background:#1b1f24; color:#fff; padding:0 20px; display:flex; align-items:center; gap:24px; height:56px }
header.top .brand { font-weight:700; font-size:18px; color:#fff; text-decoration:none }
header.top .brand span { color:var(--accent) }
header.top nav a { color:#cfd6dd; text-decoration:none; margin-right:16px; font-size:14px }
header.top nav a.active, header.top nav a:hover { color:#fff }
header.top .right { margin-left:auto; font-size:13px; color:#cfd6dd }
header.top .right a { color:#fff; margin-left:12px }
main { max-width:1180px; margin:24px auto; padding:0 20px }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:18px 20px; margin-bottom:18px }
h1 { font-size:22px; margin:0 0 12px } h2 { font-size:17px; margin:18px 0 8px } h3 { font-size:15px; margin:14px 0 6px }
form.tool { display:flex; gap:8px; flex-wrap:wrap; align-items:center }
input[type=text], input[type=email], input[type=password], select, textarea { font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:6px; min-width:260px }
input[type=text].wide { flex:1; min-width:300px }
textarea { width:100%; min-height:220px; font-family:var(--mono); font-size:13px }
button, .btn { font:inherit; padding:8px 16px; border:0; border-radius:6px; background:var(--accent); color:#fff; cursor:pointer; text-decoration:none; display:inline-block }
button.secondary, .btn.secondary { background:var(--accent2) } button.danger { background:var(--crit) } button.ghost { background:#e5e8ec; color:var(--ink) }
table { width:100%; border-collapse:collapse; font-size:14px } th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top }
th { background:#f0f2f5; font-weight:600 } td.mono, .mono { font-family:var(--mono); font-size:13px }
.muted { color:var(--muted) } .small { font-size:13px }
.pill { display:inline-block; padding:2px 10px; border-radius:12px; font-size:12px; font-weight:600; color:#fff }
.pill.pass, .pill.up, .pill.ok { background:var(--ok) } .pill.warn { background:var(--warn) } .pill.crit, .pill.down { background:var(--crit) } .pill.info, .pill.unknown { background:var(--info) }
.score { display:flex; align-items:center; gap:22px }
.gauge { width:92px; height:92px; border-radius:50%; display:grid; place-items:center; font-size:28px; font-weight:700; color:#fff }
.finding { display:flex; gap:14px; padding:12px 6px; border-bottom:1px solid var(--line) }
.finding .dot { width:22px; height:22px; border-radius:50%; flex:none; margin-top:2px; display:grid; place-items:center; color:#fff; font-size:13px }
.dot.pass{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.crit{background:var(--crit)} .dot.info{background:var(--info)}
.finding .t { font-weight:600 } .finding .d { color:var(--muted); font-size:13px; margin-top:2px; word-break:break-word }
.tabs { display:flex; gap:6px; margin:10px 0 } .tabs a { padding:6px 12px; border:1px solid var(--line); border-radius:6px; background:#fff; text-decoration:none; color:var(--ink); font-size:13px }
.tabs a.on { border-color:var(--accent); color:var(--accent); font-weight:600 }
pre.transcript { background:#f7f8fa; border:1px solid var(--line); border-radius:6px; padding:12px; font-size:12.5px; overflow:auto; max-height:420px }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px }
.mon { border:1px solid var(--line); border-radius:8px; background:#fff; padding:14px; border-top:4px solid var(--info); text-decoration:none; color:var(--ink); display:block }
.mon.up{border-top-color:var(--ok)} .mon.down{border-top-color:var(--crit)} .mon.warn{border-top-color:var(--warn)}
.mon .t { font-weight:600; font-size:15px } .mon .s { color:var(--muted); font-size:13px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.counts { display:flex; gap:8px; margin-bottom:14px } .counts span { padding:6px 12px; border-radius:6px; color:#fff; font-weight:600; font-size:13px }
.stats { display:flex; gap:20px } .stats div { background:#f0f2f5; padding:10px 14px; border-radius:6px; min-width:120px } .stats b { font-size:20px; display:block }
.err { background:#fdecec; border:1px solid #f3b8b8; color:#8d1c1c; padding:10px 12px; border-radius:6px; margin-bottom:12px }
.ok-box { background:#e9f7ee; border:1px solid #b8e2c5; color:#1d6b35; padding:10px 12px; border-radius:6px; margin-bottom:12px }
.home-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px }
.home-grid a { display:block; padding:14px; border:1px solid var(--line); border-radius:8px; background:#fff; text-decoration:none; color:var(--ink) }
.home-grid a b { display:block; margin-bottom:4px; color:var(--accent2) } .home-grid a span { font-size:13px; color:var(--muted) }
svg.chart { width:100%; height:120px; background:#fafbfc; border:1px solid var(--line); border-radius:6px }
footer { text-align:center; color:var(--muted); font-size:12px; padding:30px 0 }
@media (max-width:700px){ header.top nav{display:none} .score{flex-direction:column;align-items:flex-start} }