:root { --navy:#142850; --blue:#2563eb; --page:#f4f6fa; --line:#dde2ee; --text:#142850; --muted:#45526e; --on-navy:#dbe4f5;
  --ok:#15803d; --ok-soft:#e6f4ea; --part:#e0a800; --bad:#b91c1c; --bad-soft:#fdecec; --none:#c5ccdb; --wait-soft:#e9edf5;
  --font: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; }
* { box-sizing: border-box; }
body { margin:0; font-family:var(--font); color:var(--text); background:var(--page); line-height:1.5; }
.top { background:var(--navy); }
.wrap { max-width:860px; margin:0 auto; padding:0 20px; }
.top .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; }
.top img { height:26px; display:block; }
.top .tag { color:var(--on-navy); font-weight:600; font-size:15px; }
main.wrap { padding-top:28px; padding-bottom:8px; }
.banner { display:flex; gap:14px; align-items:center; padding:18px 20px; border-radius:12px; font-weight:700; font-size:19px; }
.banner .dot { width:14px; height:14px; border-radius:50%; flex:none; }
.banner small { display:block; font-weight:500; font-size:14px; color:var(--muted); }
.banner.ok { background:var(--ok-soft); } .banner.ok .dot { background:var(--ok); }
.banner.bad { background:var(--bad-soft); } .banner.bad .dot { background:var(--bad); }
.banner.wait { background:var(--wait-soft); } .banner.wait .dot { background:var(--muted); }
h2 { font-size:17px; margin:32px 0 10px; }
.card { background:#fff; border:1px solid var(--line); border-radius:12px; }
.comp { padding:16px 20px; border-top:1px solid var(--line); }
.comp:first-child { border-top:0; }
.comp-head { display:flex; justify-content:space-between; gap:12px; align-items:baseline; flex-wrap:wrap; }
.comp-name { font-weight:600; }
.comp-name span { font-weight:400; color:var(--muted); font-size:14px; }
.state { font-weight:600; font-size:14px; }
.state.ok { color:var(--ok); } .state.bad { color:var(--bad); } .state.wait { color:var(--muted); }
.bars { display:flex; gap:2px; margin:10px 0 0; padding:0; list-style:none; height:30px; }
.bars li { flex:1; border-radius:2px; background:var(--ok); }
.bars li.part { background:var(--part); } .bars li.down { background:var(--bad); } .bars li.none { background:var(--none); }
.scale { display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); margin-top:6px; }
.inc { padding:16px 20px; border-top:1px solid var(--line); }
.inc:first-child { border-top:0; }
.inc h3 { margin:0; font-size:15.5px; }
.inc .when { color:var(--muted); font-size:14px; }
.inc p { margin:6px 0 0; font-size:15px; }
.inc .label { display:inline-block; font-size:12.5px; font-weight:700; border-radius:6px; padding:1px 8px; margin-right:6px; }
.label.resolved { background:var(--ok-soft); color:var(--ok); } .label.open { background:var(--bad-soft); color:var(--bad); }
.empty { padding:16px 20px; color:var(--muted); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
footer.wrap { color:var(--muted); font-size:14px; padding-top:24px; padding-bottom:40px; }
footer a { color:var(--blue); }
@media (max-width:600px) { .banner { font-size:17px; } .bars { height:26px; gap:1px; } }