@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/manrope-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/manrope-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#f4f5f7;--card:#fdfdfe;--ink:#111622;--muted:#5c6576;--hair:#e3e6eb;
  --good:#1f8a4c;--good-bg:#e7f4ec;--amber:#b45309;--amber-bg:#fdf1e2;--rose:#c4361f;--rose-bg:#fbe9e6;--info:#3d4fd8;--info-bg:#eaedfd;--idle:#8a93a3;--idle-bg:#eceef2;
  --font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0b0d12;--card:#141821;--ink:#eceff4;--muted:#9aa3b2;--hair:#252b36;
  --good:#4cc283;--good-bg:#12291d;--amber:#f0a44b;--amber-bg:#2c2113;--rose:#f27a64;--rose-bg:#2e1714;--info:#8e9bff;--info-bg:#1b1f3a;--idle:#7d8696;--idle-bg:#1c212b;
  color-scheme:dark;
}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
h1,h2,p,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--info);outline-offset:3px;border-radius:6px}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:760px;margin:0 auto;padding:28px max(16px,env(safe-area-inset-left)) 0 max(16px,env(safe-area-inset-right))}
.brand{display:inline-flex;padding:6px 0}
.logo{display:block;width:118px;height:29px;background:currentColor;-webkit-mask:url(/logo.svg) no-repeat left center/contain;mask:url(/logo.svg) no-repeat left center/contain}
.lang{font:inherit;font-size:14px;font-weight:600;color:var(--muted);background:none;border:1px solid var(--hair);border-radius:999px;padding:8px 14px;min-height:40px;cursor:pointer;transition:color 160ms var(--ease),border-color 160ms var(--ease)}
.lang:hover{color:var(--ink);border-color:var(--muted)}
.lang:active{transform:scale(.97)}

.wrap{flex:1;width:100%;max-width:760px;margin:0 auto;padding:36px max(16px,env(safe-area-inset-left)) 24px max(16px,env(safe-area-inset-right));display:grid;gap:28px;align-content:start}

.sum{display:flex;gap:18px;align-items:flex-start;background:var(--card);border-radius:16px;box-shadow:0 0 0 1px var(--hair);padding:26px 26px 28px}
.sum h1{font-size:clamp(24px,4.2vw,32px);line-height:1.15;font-weight:750;letter-spacing:-.02em}
.sum__sub{margin-top:8px;color:var(--muted);max-width:52ch}
.sum__dot{flex:none;width:18px;height:18px;margin-top:8px;border-radius:50%;background:var(--idle);box-shadow:0 0 0 6px var(--idle-bg)}
.sum[data-state=ok] .sum__dot{background:var(--good);box-shadow:0 0 0 6px var(--good-bg)}
.sum[data-state=degraded] .sum__dot{background:var(--amber);box-shadow:0 0 0 6px var(--amber-bg)}
.sum[data-state=down] .sum__dot{background:var(--rose);box-shadow:0 0 0 6px var(--rose-bg)}
.sum[data-state=maintenance] .sum__dot{background:var(--info);box-shadow:0 0 0 6px var(--info-bg)}
.sum[data-state=checking] .sum__dot{animation:pulse 1.4s var(--ease) infinite}
@keyframes pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.sum[data-state=checking] .sum__dot{animation:none}}

.list h2{font-size:14px;font-weight:700;color:var(--muted);margin:0 4px 10px}
#services{background:var(--card);border-radius:16px;box-shadow:0 0 0 1px var(--hair);overflow:hidden}
.svc{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;min-height:68px}
.svc+.svc{border-top:1px solid var(--hair)}
.svc__main{display:grid;gap:2px;min-width:0}
.svc__name{font-weight:650}
.svc__what{font-size:14px;color:var(--muted)}
.svc__state{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:650;padding:6px 12px;border-radius:999px;background:var(--idle-bg);color:var(--muted)}
.svc__dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.svc[data-state=ok] .svc__state{background:var(--good-bg);color:var(--good)}
.svc[data-state=degraded] .svc__state{background:var(--amber-bg);color:var(--amber)}
.svc[data-state=down] .svc__state{background:var(--rose-bg);color:var(--rose)}
.svc[data-state=maintenance] .svc__state{background:var(--info-bg);color:var(--info)}

.note{font-size:14px;color:var(--muted);margin:0 4px}
.foot{width:100%;max-width:760px;margin:0 auto;padding:8px max(16px,env(safe-area-inset-left)) calc(32px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-right));font-size:14px;color:var(--muted);display:grid;gap:6px}

@media (max-width:520px){
  .sum{padding:20px;gap:14px}
  .svc{padding:14px 16px;gap:12px}
  .svc__state{padding:5px 10px}
}