*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#0a0a0a;color:#e5e5e5;line-height:1.5}
.container{max-width:720px;margin:0 auto;padding:2rem 1rem}

/* Header */
header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
.line-badge{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;color:#000;background:#D282BE;flex-shrink:0}
h1{font-size:1.5rem;font-weight:600}
.subtitle{color:#737373;font-size:.875rem}

/* Status */
.status-card{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-radius:.75rem;font-size:1.125rem;font-weight:600;margin-bottom:2rem;border:1px solid #262626}
.status-card.operational{background:#052e16;border-color:#166534;color:#4ade80}
.status-card.degraded{background:#451a03;border-color:#854d0e;color:#fbbf24}
.status-card.interrupted{background:#450a0a;border-color:#991b1b;color:#f87171}
.status-card.unknown{background:#171717;border-color:#262626;color:#737373}

.dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.operational .dot{background:#4ade80;box-shadow:0 0 8px #4ade8066}
.degraded .dot{background:#fbbf24;box-shadow:0 0 8px #fbbf2466}
.interrupted .dot{background:#f87171;box-shadow:0 0 8px #f8717166}
.unknown .dot{background:#737373}

/* Sections */
.section{margin-bottom:2rem}
h2{font-size:.8rem;font-weight:500;color:#737373;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}

/* Chart */
.chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.uptime-badge{font-size:1.25rem;font-weight:700;color:#4ade80}
.chart{display:flex;gap:2px;height:32px;align-items:stretch}
.bar{flex:1;border-radius:2px;min-width:2px;transition:opacity .15s}
.bar:hover{opacity:.7}
.bar.operational{background:#16a34a}
.bar.degraded{background:#d97706}
.bar.interrupted{background:#dc2626}
.bar.empty{background:#171717}
.chart-footer{display:flex;justify-content:space-between;font-size:.7rem;color:#525252;margin-top:.25rem}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:2rem}
.stat{background:#111;border:1px solid #1f1f1f;border-radius:.5rem;padding:.75rem;text-align:center}
.stat-val{display:block;font-size:1.375rem;font-weight:700}
.stat-lbl{display:block;font-size:.7rem;color:#737373;margin-top:.125rem}

/* Incidents */
.incident{background:#111;border:1px solid #1f1f1f;border-radius:.5rem;padding:.75rem 1rem;margin-bottom:.5rem}
.incident.active{border-color:#854d0e}
.incident-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.25rem;flex-wrap:wrap}
.badge{font-size:.7rem;font-weight:600;padding:.125rem .5rem;border-radius:999px;white-space:nowrap}
.badge.interrupted{background:#450a0a;color:#f87171}
.badge.degraded{background:#451a03;color:#fbbf24}
.badge.operational{background:#052e16;color:#4ade80}
.incident-time{font-size:.75rem;color:#525252}
.incident-title{font-weight:600;font-size:.9rem}
.incident-msg{font-size:.85rem;color:#a3a3a3;margin-top:.25rem}
.incident-cause{font-size:.7rem;color:#525252;font-style:italic}
.empty{color:#525252;font-style:italic}

/* Footer */
footer{text-align:center;font-size:.7rem;color:#525252;padding-top:1rem;border-top:1px solid #171717}
footer a{color:#737373;text-decoration:none}
footer a:hover{text-decoration:underline}

@media(max-width:600px){
    .stats{grid-template-columns:repeat(2,1fr)}
    .container{padding:1.5rem .75rem}
}