/* status.soperion.com — Statuspage-like layout, Soperion violet accent, state colors only for status. */
:root{
  --bg:#ffffff; --fg:#111111; --fg-2:#6b6b6b; --line:#e6e6e6; --panel:#f7f7f7;
  --brand:#270072; --brand-fg:#ffffff;
  --ok:#1f9d55; --degraded:#d08a00; --down:#d1343b; --maint:#3b6fd6; --empty:#e2e2e2;
  --font:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#121212; --fg:#f2f2f2; --fg-2:#9a9a9a; --line:#2a2a2a; --panel:#1b1b1b;
  --brand:#8b6cf0; --brand-fg:#ffffff;
  --ok:#3ccc78; --degraded:#e8a72a; --down:#ef5a60; --maint:#6f97ea; --empty:#2e2e2e; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#121212; --fg:#f2f2f2; --fg-2:#9a9a9a; --line:#2a2a2a; --panel:#1b1b1b;
  --brand:#8b6cf0; --brand-fg:#ffffff;
  --ok:#3ccc78; --degraded:#e8a72a; --down:#ef5a60; --maint:#6f97ea; --empty:#2e2e2e; color-scheme:dark }

*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:15px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 48px}
.wrap{max-width:760px;margin:0 auto}
a{color:var(--brand)}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px 18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)}
.brand .logo{height:34px;width:auto;display:block}
.actions{display:flex;align-items:center;gap:12px}
.lang{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--fg-2)}
.lang button{font:inherit;background:none;border:0;padding:4px 6px;color:var(--fg-2);cursor:pointer;border-radius:6px}
.lang button[aria-pressed="true"]{color:var(--brand);font-weight:600}
.lang button:focus-visible,.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn{font:inherit;font-size:13px;font-weight:500;padding:8px 14px;border-radius:8px;background:var(--brand);color:var(--brand-fg);text-decoration:none;white-space:nowrap}
.btn:hover{filter:brightness(1.1)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .brand .logo{filter:brightness(0) invert(1)} }
:root[data-theme="dark"] .brand .logo{filter:brightness(0) invert(1)}

.banner{margin-top:16px;border-radius:8px;padding:16px 20px;background:var(--fg-2);color:#fff;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.banner.up{background:var(--ok)} .banner.degraded{background:var(--degraded)} .banner.down{background:var(--down)} .banner.maintenance{background:var(--maint)}
.banner h1{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em}
.banner .ts{margin-left:auto;font-family:var(--mono);font-size:12px;opacity:.9}
.uptime-note{margin:26px 0 8px;font-size:14px;color:var(--fg-2)}

.components{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.comp{padding:14px 16px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center}
.comp:first-child{border-top:0}
.comp .name{font-weight:500;display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap}
.comp .name .host{font-size:12px;color:var(--fg-2);font-weight:400}
.comp .state{font-size:13px;font-weight:500;white-space:nowrap}
.state.up{color:var(--ok)} .state.degraded{color:var(--degraded)} .state.down{color:var(--down)} .state.maintenance{color:var(--maint)} .state.nodata{color:var(--fg-2)}
.bars{grid-column:1/-1;display:grid;grid-template-columns:repeat(90,1fr);gap:2px;height:28px;margin-top:6px}
.bars i{display:block;border-radius:2px;background:var(--ok)}
.bars i.d{background:var(--degraded)} .bars i.x{background:var(--down)} .bars i.m{background:var(--maint)} .bars i.e{background:var(--empty)}
.bars i:hover{outline:2px solid var(--fg);outline-offset:1px}
.legend{grid-column:1/-1;display:flex;justify-content:space-between;font-size:11px;color:var(--fg-2);font-family:var(--mono)}

.legend-states{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--fg-2)}
.legend-states li{display:flex;align-items:center;gap:6px}
.legend-states i{width:10px;height:10px;border-radius:2px;display:inline-block;background:var(--ok)}
.legend-states i.degraded{background:var(--degraded)} .legend-states i.down{background:var(--down)} .legend-states i.maintenance{background:var(--maint)} .legend-states i.nodata{background:var(--empty)}

h2{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:40px 0 6px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.days{display:grid}
.day{padding:14px 0;border-bottom:1px solid var(--line)}
.day h3{margin:0 0 6px;font-size:14px;font-weight:600}
.day .none{font-size:14px;color:var(--fg-2)}
.day article{margin-top:6px}
.day article h4{margin:0;font-size:15px;font-weight:600}
.day article h4.degraded{color:var(--degraded)} .day article h4.down{color:var(--down)} .day article h4.maintenance{color:var(--maint)}
.day ul{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:6px;font-size:14px}
.day li{display:grid;grid-template-columns:118px 1fr;gap:10px;min-width:0}
.day li b{font-weight:500;font-family:var(--mono);font-size:12px;color:var(--fg-2);padding-top:2px}
.day .auto{font-size:14px}

.panel{border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin-top:12px;font-size:14px;display:grid;gap:8px}
.panel code{font-family:var(--mono);font-size:12px;color:var(--fg)}
.hidden{display:none}

footer{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--fg-2);display:grid;gap:8px}
footer code{font-family:var(--mono);font-size:12px;color:var(--fg)}
footer .powered{margin-top:6px}
@media (max-width:560px){ header{flex-wrap:wrap} .day li{grid-template-columns:1fr} .banner .ts{margin-left:0} }