body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1f2933; background: #f5f7fa; }
main { max-width: 720px; margin: 0 auto; padding: 32px 16px; }
h1 { font-size: 1.6rem; margin: 0 0 16px; }
h1 small { font-size: 0.9rem; color: #616e7c; font-weight: normal; }
h2 { font-size: 1.1rem; margin: 24px 0 8px; }
.banner { background: #fff4d6; border: 1px solid #f0c36d; padding: 12px; border-radius: 6px; }
.overall { padding: 16px; border-radius: 6px; font-weight: 600; background: #e4e7eb; }
.overall.state-operational { background: #d9f2e3; color: #0e5a2c; }
.overall.state-degraded, .overall.state-degraded_performance, .overall.state-maintenance { background: #fff4d6; color: #7a5200; }
.overall.state-partial_outage, .overall.state-major_outage, .overall.state-outage { background: #fde2e1; color: #8a1c1c; }
.components, .events { list-style: none; margin: 0; padding: 0; background: #fff; border-radius: 6px; border: 1px solid #e4e7eb; }
.components li { display: flex; justify-content: space-between; padding: 10px 14px; border-top: 1px solid #e4e7eb; }
.components li:first-child, .events li:first-child { border-top: 0; }
.components .status { color: #616e7c; }
.components .state-operational .status { color: #0e7a3d; }
.components .state-degraded .status, .components .state-degraded_performance .status, .components .state-maintenance .status { color: #a86b00; }
.components .state-partial_outage .status, .components .state-major_outage .status, .components .state-outage .status { color: #b42318; }
.events li { padding: 10px 14px; border-top: 1px solid #e4e7eb; }
.meta { color: #616e7c; font-size: 0.85rem; }