:root{
  --ok:#1fa97b; --maint:#f5a524; --incident:#e5484d; --update:#ffd60a;
  --ink:#0b0d12; --bg:#f7f9fc; --card:#fff; --stroke:rgba(0,0,0,.08);
}
*{box-sizing:border-box} body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,"SF Pro Text",Segoe UI,Roboto,Arial;background:var(--bg);color:var(--ink)}
.wrap{max-width:960px;margin:auto;padding:0 20px}

/* Nav */
.status-nav{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--stroke);z-index:10}
.status-nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;gap:10px;align-items:center;font-weight:900;color:inherit;text-decoration:none}
.brand img{width:28px;height:28px;border-radius:6px}
.back{font-weight:800;text-decoration:none;color:#334}

/* Hero */
.hero{padding:32px 0;background:linear-gradient(135deg,#0a0f1a,#101727);color:#e9eff8;border-bottom:1px solid rgba(255,255,255,.06)}
.hero h1{margin:0 0 6px;font-size:clamp(1.8rem,3.2vw,2.2rem)}
.sub{margin:0 0 10px;opacity:.9}
.badge{
  --bg:rgba(255,255,255,.14); --fg:#111; --dot:#111;
  display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;
  font-weight:800;background:var(--bg);color:var(--fg);border:1px solid rgba(0,0,0,.1)
}
.badge .dot{width:10px;height:10px;border-radius:999px;background:var(--dot)}
.badge[data-state="ok"]              { --bg:rgba(31,169,123,.28); --fg:#ffffff; --dot:var(--ok); }
.badge[data-state="maintenance"]     { --bg:rgba(245,165,36,.30); --fg:#ffffff; --dot:var(--maint); }
.badge[data-state="update-pending"]  { --bg:rgba(255,214,10,.36); --fg:#ffffff; --dot:var(--update); }
.badge[data-state="incident"]        { --bg:rgba(229,72,77,.30); --fg:#ffffff; --dot:var(--incident); }

/* Layout */
.panel{padding:24px 0 44px}
.grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:18px;box-shadow:0 10px 40px rgba(0,0,0,.06)}
.card h2{margin:0 0 10px;font-size:1.15rem}
.lead{margin-top:8px;font-weight:600}
.meta{opacity:.7}
.hidden{display:none!important}

/* Pills */
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;font-weight:800;border:1px solid var(--stroke)}
.pill.ok{background:rgba(31,169,123,.12);color:#137a5b;border-color:rgba(31,169,123,.25)}
.pill.maintenance{background:rgba(245,165,36,.12);color:#8f5b0d;border-color:rgba(245,165,36,.25)}
.pill.incident{background:rgba(229,72,77,.12);color:#9b1c20;border-color:rgba(229,72,77,.25)}
.pill.update-pending{background:rgba(255,214,10,.15);color:#7a6700;border-color:rgba(255,214,10,.3)}

/* Lists */
#affected-list{margin:0;padding:0;list-style:none}
#affected-list li{padding:8px 0;border-bottom:1px dashed var(--stroke)}
#affected-list li:last-child{border:none}

/* Timeline */
.timeline{margin:0;padding:0;list-style:none}
.timeline li{position:relative;padding:12px 0 12px 22px;border-bottom:1px dashed var(--stroke)}
.timeline li:last-child{border:none}
.timeline li::before{content:"";position:absolute;left:6px;top:18px;width:8px;height:8px;border-radius:50%;background:#bbb}
.timeline li.ok::before{background:var(--ok)}
.timeline li.maintenance::before{background:var(--maint)}
.timeline li.incident::before{background:var(--incident)}
.timeline li.update-pending::before{background:var(--update)}
.timeline .t-meta{display:block;opacity:.7;font-size:.9rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;text-decoration:none;font-weight:800}
.btn.report{background:#0a84ff;color:#fff;box-shadow:0 4px 14px rgba(10,132,255,.2)}
.btn.report:hover{background:#066cda}

/* Footer */
.foot{border-top:1px solid var(--stroke);background:#fff;padding:16px 0}

@media (max-width:900px){ .grid{grid-template-columns:1fr} }