/* Eco Heroes — public status page (V78). Site tokens, readable in light and dark, no third-party assets. */
:root{--bg:#f5f4ee;--card:#fff;--fg:#1a2a14;--mute:#5a6b52;--line:#e2e6dc;--green:#1a3a0d;--ok:#2d6e1a;--amber:#b4660c;--red:#b3261e;--chip:#eef4ea;
 --sans:Outfit,Nunito,system-ui,sans-serif;--serif:"DM Serif Display",Georgia,serif;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f1a0b;--card:#17241a;--fg:#eef4ea;--mute:#a9b8a0;--line:#2a3a2a;--chip:#213022;--ok:#7fd36a;--amber:#f0b35b;--red:#ff8a80;--green:#dff3d3;color-scheme:dark}}
html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 var(--sans)}
*{box-sizing:border-box}
.st-wrap{max-width:900px;margin:0 auto;padding:7rem max(16px,env(safe-area-inset-right,0px)) 4rem max(16px,env(safe-area-inset-left,0px))}
.st-k{font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ok);margin:0 0 .4rem}
.st-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,5vw,3rem);line-height:1.1;margin:0 0 .6rem}
.st-lead{color:var(--mute);max-width:62ch;margin:0}
.st-banner{display:flex;align-items:center;gap:14px;margin:1.6rem 0;padding:16px 18px;border-radius:16px;background:var(--card);border:1px solid var(--line);border-inline-start:6px solid var(--mute)}
.st-banner.ok{border-inline-start-color:var(--ok)}.st-banner.degraded{border-inline-start-color:var(--amber)}.st-banner.outage{border-inline-start-color:var(--red)}
.st-dot{width:14px;height:14px;border-radius:50%;background:var(--mute);flex:0 0 auto}
.ok .st-dot{background:var(--ok)}.degraded .st-dot{background:var(--amber)}.outage .st-dot{background:var(--red)}
.st-banner strong{display:block;font-size:1.15rem}.st-sub{color:var(--mute);font-size:.92rem}
.st-sec{margin-top:2rem}.st-sec h2{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin:0 0 .6rem}
.st-comp{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.st-comp li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-weight:600;min-height:52px}
.st-comp .pill{font-size:.8rem;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--chip);color:var(--ok);white-space:nowrap}
.st-comp .pill.bad{color:var(--red);background:#fde7e5}.st-comp .pill.na{color:var(--mute)}
.st-skel{background:var(--chip);border-color:transparent;min-height:52px}
.st-muted{color:var(--mute)}.small{font-size:.875rem}
.st-up{display:grid;gap:10px}
.st-up .row{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.st-up .row strong{font-weight:700}
.st-up .bar{grid-column:1/-1;height:8px;border-radius:4px;background:var(--chip);overflow:hidden}
.st-up .bar i{display:block;height:100%;background:var(--ok)}
.st-up .nums{display:flex;gap:12px;font-variant-numeric:tabular-nums;color:var(--mute);font-size:.9rem;flex-wrap:wrap}
.st-inc{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.st-inc li{padding:12px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.st-inc time{color:var(--mute);font-size:.9rem;margin-inline-end:8px}
.st-inc .s{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:999px;background:var(--chip);color:var(--ok)}
.st-inc .s.investigating{color:var(--red);background:#fde7e5}.st-inc .s.monitoring{color:var(--amber);background:#fff3df}
.st-how ul{margin:0;padding-inline-start:1.2rem;color:var(--mute)}.st-how li{margin:.3rem 0}.st-how a{color:var(--ok);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:no-preference){.st-up .bar i{transition:width .6s ease}}