/* Статус ЭТОЧАТБОТ — status.etochat.bot. Стиль кабинета: шрифт Onest, воздух, волосяные линии, без теней и градиентов. */
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/cyrillic-400.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/cyrillic-500.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/cyrillic-600.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/cyrillic-700.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root {
  --bg: #ffffff; --fill: #f6f8fc; --ink: #16181d; --text: #3b414c; --mut: #5c6372; --faint: #949ba8;
  --line: #ecedf1; --brand: #0057cc; --brand-t: #eef4ff;
  --ok: #1d9e5d; --ok-t: #e8f6ec; --warn: #c98508; --warn-t: #fdf3e2; --bad: #d94566; --bad-t: #fdeef1;
  --none: #e6e9ef;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 400 15px/1.5 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
a { color: var(--brand); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; outline: none; }
p { margin: 0; }
.w { max-width: 760px; margin: 0 auto; padding: 28px 20px 56px; }
.muted { color: var(--mut); font-size: 14px; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 32px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.logo:hover, .logo:focus-visible { text-decoration: none; }
.mark { width: 30px; height: 36px; flex: none; }
.wm { font-weight: 700; font-size: 19px; letter-spacing: .02em; }
.wm b { color: var(--brand); font-weight: 700; }
.top-r { color: var(--mut); font-size: 14px; }

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; vertical-align: 2px; background: var(--ok); }
.hero { padding: 24px 26px; border-radius: 20px; background: var(--fill); margin-bottom: 40px; }
.hero-t { font-size: 26px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.hero-d { margin-top: 6px; color: var(--mut); font-size: 14px; }
.hero-ok .dot { background: var(--ok); }
.hero-slow .dot { background: var(--warn); }
.hero-fail { background: var(--bad-t); } .hero-fail .dot { background: var(--bad); }

.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.c { padding: 22px 0 18px; border-bottom: 1px solid var(--line); }
.c-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.c-t { font-size: 16px; font-weight: 600; }
.c-d { color: var(--mut); font-size: 13px; margin-top: 2px; }
.st { font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--ok); }
.st .dot { width: 8px; height: 8px; margin-right: 7px; vertical-align: 1px; }
.st-slow, .st-check { color: var(--warn); } .st-slow .dot, .st-check .dot { background: var(--warn); }
.st-fail { color: var(--bad); } .st-fail .dot { background: var(--bad); }
.bars { display: flex; gap: 2px; height: 30px; }
.b { flex: 1 1 0; min-width: 2px; border-radius: 3px; background: var(--none); }
.b-ok { background: var(--ok); } .b-minor { background: var(--warn); } .b-major { background: var(--bad); }
.c-f { display: flex; justify-content: space-between; color: var(--faint); font-size: 12px; margin-top: 8px; }

.h2 { font-size: 20px; font-weight: 600; margin: 48px 0 14px; }
.inc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.i { padding: 18px 0; border-bottom: 1px solid var(--line); }
.i-w { color: var(--mut); font-size: 13px; margin-bottom: 4px; }
.i-t { font-weight: 600; margin-bottom: 4px; }
.i-d { color: var(--text); font-size: 14px; }
.foot { margin-top: 48px; color: var(--mut); font-size: 14px; }

@media (max-width: 560px) {
  .w { padding: 20px 16px 40px; }
  .top { margin-bottom: 24px; }
  .wm { font-size: 17px; }
  .mark { width: 26px; height: 31px; }
  .hero { padding: 20px; margin-bottom: 32px; border-radius: 16px; }
  .hero-t { font-size: 21px; }
  .bars .b:nth-child(-n+45) { display: none; }   /* на телефоне — последние 45 дней */
  .c-f-l { visibility: hidden; }
}
