@font-face{font-family:'manrope';font-style:normal;font-display:swap;font-weight:200 900;src:url(/fonts/manrope-cyrillic.woff2) format('woff2-variations');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'manrope';font-style:normal;font-display:swap;font-weight:200 900;src:url(/fonts/manrope-latin.woff2) format('woff2-variations');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}
@font-face{font-family:'unbounded';font-style:normal;font-display:swap;font-weight:200 900;src:url(/fonts/unbounded-cyrillic.woff2) format('woff2-variations');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'unbounded';font-style:normal;font-display:swap;font-weight:200 900;src:url(/fonts/unbounded-latin.woff2) format('woff2-variations');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{color-scheme:light;--canvas:#fff;--paper:#f4f7f8;--surface:#fff;--fg:#111a1d;--muted:#4f5d63;--subtle:#647177;--line:rgb(17 26 29/.1);--line-strong:rgb(17 26 29/.2);--accent:#10aeb9;
--good:#0ca30c;--warning:#fab219;--critical:#d03b3b;--none:#dbe3e5;--tip-bg:#111a1d;--tip-fg:#fff}
@media (prefers-color-scheme:dark){:root{color-scheme:dark;--canvas:#0c1214;--paper:#111a1d;--surface:#142023;--fg:#e6eef0;--muted:#a7b6bb;--subtle:#859aa1;--line:rgb(230 238 240/.1);--line-strong:rgb(230 238 240/.2);--accent:#19bcc7;--none:#253438;--tip-bg:#e6eef0;--tip-fg:#0c1214}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--fg);font:16px/1.55 manrope,system-ui,sans-serif;font-feature-settings:'tnum' 0}
a{color:inherit}
.wrap{max-width:52rem;margin:0 auto;padding:0 1rem}
@media (min-width:640px){.wrap{padding:0 1.5rem}}
.top{background:var(--canvas);border-bottom:1px solid var(--line)}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:600 1.05rem/1 unbounded,manrope,sans-serif;letter-spacing:.02em}
.brand img{border-radius:6px}
.brand b{font-weight:700}
.top-link{font-size:.875rem;font-weight:700;color:var(--muted);text-decoration:none}
.top-link:hover{color:var(--fg)}
@media (max-width:420px){.top-link{display:none}}
.hero{display:flex;align-items:center;gap:1rem;margin:2rem 0 1.5rem;padding:1.25rem 1.25rem;background:var(--surface);border:1px solid var(--fg);border-left-width:6px}
.hero--up{border-left-color:var(--good)}.hero--degraded{border-left-color:var(--warning)}.hero--down{border-left-color:var(--critical)}.hero--unknown{border-left-color:var(--line-strong)}
.hero h1{margin:0;font:600 clamp(1.25rem,3.5vw,1.6rem)/1.2 unbounded,manrope,sans-serif}
.hero p{margin:.35rem 0 0;color:var(--muted);font-size:.9375rem}
.hero .icon{width:2.5rem;height:2.5rem;padding:.45rem;flex:none}
.icon{display:inline-block;width:1.25rem;height:1.25rem;border-radius:999px;padding:.2rem;flex:none}
.icon--up{background:var(--good);color:#fff}.icon--degraded{background:var(--warning);color:#111a1d}.icon--down{background:var(--critical);color:#fff}.icon--unknown{background:var(--none);color:var(--fg)}
.services{background:var(--surface);border:1px solid var(--fg)}
.service{padding:1.25rem;border-top:1px solid var(--line)}
.service:first-child{border-top:0}
.service-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.service h2{margin:0;font-size:1.0625rem;font-weight:800}
.service-head p{margin:.15rem 0 0;color:var(--subtle);font-size:.875rem}
.service-head .state{display:flex;align-items:center;gap:.45rem;margin:0;color:var(--fg);font-weight:700;font-size:.875rem;white-space:nowrap}
.bars{position:relative;display:flex;gap:2px;height:2.25rem;margin-top:1rem}
.bar{flex:1;min-width:0;border-radius:2px;background:var(--none);transition:opacity .12s}
.bar--good{background:var(--good)}.bar--warning{background:var(--warning)}.bar--critical{background:var(--critical)}
/* Без transform/filter на полосе: иначе подсказка позиционируется от неё, а не от ряда */
.bars:hover .bar{opacity:.45}.bars .bar:hover{opacity:1}
.tip{display:none;position:absolute;left:50%;bottom:calc(100% + .5rem);transform:translateX(-50%);padding:.35rem .6rem;border-radius:4px;background:var(--tip-bg);color:var(--tip-fg);font-size:.8125rem;font-weight:600;white-space:nowrap;pointer-events:none;z-index:2}
.bar:hover .tip{display:block}
.bars-legend{display:flex;justify-content:space-between;gap:1rem;margin-top:.5rem;color:var(--subtle);font-size:.8125rem}
.bars-legend span:nth-child(3){color:var(--fg);font-weight:700}
.bars-legend .short{display:none}
@media (max-width:640px){.bar:nth-child(-n+60){display:none}.bars-legend .long{display:none}.bars-legend .short{display:inline}.service-head{flex-direction:column;gap:.6rem}}
.history{margin:2rem 0}
.history h2{margin:0 0 .75rem;font:600 1.15rem/1.3 unbounded,manrope,sans-serif}
.incidents{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--fg)}
.incidents li{display:flex;gap:.75rem;align-items:flex-start;padding:1rem 1.25rem;border-top:1px solid var(--line)}
.incidents li:first-child{border-top:0}
.incidents strong{display:block;font-size:.9375rem}
.incidents span{color:var(--muted);font-size:.875rem}
.empty{margin:0;padding:1rem 1.25rem;background:var(--surface);border:1px solid var(--fg);color:var(--muted)}
.footer{padding-bottom:2.5rem;color:var(--subtle);font-size:.8125rem}
.footer p{margin:.4rem 0}
.footer a{font-weight:700;color:var(--muted)}