/*
 * Страница статуса Zypo. Дизайн-код сайта без сборки.
 * Ритм: шаг 3 = 12px (--s) между блоками и внутри них; 24px (--s2) — только перед группой/заголовком и у края страницы.
 * Скругления: только 24px (карточки) и полные (кнопки, пиллы, поля). Рамки: 1px zinc-600/30.
 * Цвет — только у состояний: спокойные дни серые, внимание привлекают сбои и «Сейчас».
 */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/geist-cyrillic.woff2') format('woff2'); unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/geist-latin-ext.woff2') format('woff2'); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/geist-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: #000;
  --fg: #fff;
  --zinc-100: #f4f4f5; --zinc-300: #d4d4d8; --zinc-400: #a1a1aa; --zinc-500: #71717a; --zinc-600: #52525b;
  --zinc-800: #27272a; --zinc-900: #18181b;
  --line: rgb(82 82 91 / 0.3);
  --surface: rgb(24 24 27 / 0.5);
  --ok: #34d399; --warn: #fbbf24; --bad: #f87171;
  --radius: 1.5rem;
  --s: 0.75rem;
  --s2: 1.5rem;
  --gap: var(--s);
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100dvh; color: var(--fg); background: var(--bg);
  font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.5;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: rgb(255 255 255 / 0.2); }
.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 var(--s); }

/* ── Шапка ─────────────────────────────────────────────── */
/* Шапка приклеена сверху: чёрный градиент to-b from-black via-black/90 to-transparent, без нижней границы */
.top { position: sticky; top: 0; z-index: 20; background: linear-gradient(to bottom, #000, rgb(0 0 0 / 0.9), transparent); pointer-events: none; }
.top a, .top form, .langs { pointer-events: auto; }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s); height: 4rem; }
.logo img { display: block; height: 2rem; width: auto; }
.langs { display: flex; padding: 0.25rem; border: 1px solid var(--line); border-radius: 9999px; background: var(--surface); }
.lang { padding: 0.25rem var(--s); border-radius: 9999px; font-size: 0.8125rem; line-height: 1.5rem; color: var(--zinc-400); cursor: pointer; transition: color 300ms, background-color 300ms; }
.lang:hover { color: var(--fg); }
.lang.on { color: var(--fg); background: var(--zinc-800); }

/* ── Заголовок страницы ────────────────────────────────── */
.head { display: flex; align-items: center; justify-content: space-between; gap: var(--s); margin: var(--s) 0; }
h1 { margin: 0; font-size: 1.75rem; line-height: 2.5rem; font-weight: 600; letter-spacing: -0.02em; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; padding: 0 1rem; border: 0; border-radius: 9999px; background: #fff; color: #000; font-weight: 500; font-size: 0.9375rem; line-height: 1; cursor: pointer; transition: background-color 300ms, transform 300ms; white-space: nowrap; }
.btn:hover { background: var(--zinc-300); }
.btn:active, .tab:active, .lang:active { transform: scale(0.95); }

.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

/* ── Баннер статуса ────────────────────────────────────── */
.banner { display: flex; align-items: center; gap: var(--s); padding: var(--s); margin-bottom: var(--s); border: 1px solid var(--line); border-radius: var(--radius); }
.banner-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; flex: none; }
.dot { width: 0.75rem; height: 0.75rem; border-radius: 9999px; background: currentColor; }
.banner-text { display: flex; flex-direction: column; min-width: 0; }
.banner-text strong { font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; color: var(--fg); }
.banner-text span { font-size: 0.875rem; line-height: 1.25rem; color: var(--zinc-300); overflow-wrap: anywhere; }
.banner-text .muted { color: var(--zinc-500); }
.tone-ok { color: var(--ok); background: radial-gradient(60% 320% at 0% 50%, rgb(52 211 153 / 0.14), transparent 70%), var(--surface); }
.tone-warn { color: var(--warn); background: radial-gradient(60% 320% at 0% 50%, rgb(251 191 36 / 0.14), transparent 70%), var(--surface); }
.tone-bad { color: var(--bad); background: radial-gradient(60% 320% at 0% 50%, rgb(248 113 113 / 0.16), transparent 70%), var(--surface); }
.tone-none { color: var(--zinc-400); background: var(--surface); }
.tone-ok .banner-icon { background: rgb(52 211 153 / 0.16); animation: breathe 3.2s ease-in-out infinite; }
.tone-warn .banner-icon { background: rgb(251 191 36 / 0.16); }
.tone-bad .banner-icon { background: rgb(248 113 113 / 0.18); }
.tone-none .banner-icon { background: rgb(82 82 91 / 0.25); }
@keyframes breathe { 50% { box-shadow: 0 0 0 6px rgb(52 211 153 / 0.08); } }

/* ── Вкладки (сегментный переключатель) ────────────────── */
.tabs { display: inline-flex; max-width: 100%; margin-bottom: var(--s); padding: 0.25rem; border: 1px solid var(--line); border-radius: 9999px; background: var(--surface); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; padding: 0 1rem; height: 2rem; border: 0; border-radius: 9999px; background: none; color: var(--zinc-400); font-size: 0.9375rem; cursor: pointer; transition: color 300ms, background-color 300ms, transform 300ms; }
.tab:hover { color: var(--fg); }
.tab.on { color: var(--fg); background: var(--zinc-800); }

/* ── Фильтр ────────────────────────────────────────────── */
.filter { display: block; margin-bottom: var(--s); }
.filter input { width: 100%; max-width: 22rem; height: 2.5rem; padding: 0 1rem; border-radius: 9999px; border: 1px solid var(--line); background: var(--surface); outline: none; transition: border-color 300ms; }
.filter input::placeholder { color: var(--zinc-500); }
.filter input:focus { border-color: var(--zinc-500); }

/* ── Таблица сервисов ──────────────────────────────────── */
.table { overflow: hidden; }
.tr { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, 4.5rem) 4.5rem 4.5rem 6.75rem; align-items: center; column-gap: var(--s); padding: var(--s); border-top: 1px solid var(--line); }
.tr.th { border-top: 0; }
.tr[hidden] { display: none; }
.th { color: var(--zinc-500); font-size: 0.8125rem; }
.th .c-now { color: var(--fg); font-weight: 600; }
.c-day, .c-now { text-align: center; }
.th .c-day { white-space: nowrap; }
.c-name { display: flex; align-items: center; gap: var(--s); min-width: 0; flex-wrap: wrap; }
.name { font-weight: 500; }
/* Стрелка: строку можно раскрыть */
.row .name::after { content: ''; display: inline-block; width: 0.375rem; height: 0.375rem; margin-left: var(--s); border-right: 1.5px solid var(--zinc-500); border-bottom: 1.5px solid var(--zinc-500); transform: translateY(-2px) rotate(45deg); transition: transform 300ms, border-color 300ms; }
.row:hover .name::after { border-color: var(--fg); }
.row[aria-expanded="true"] .name::after { transform: translateY(1px) rotate(-135deg); }
.chip { padding: 0.375rem var(--s); border-radius: 9999px; font-size: 0.75rem; line-height: 1; color: var(--zinc-300); background: var(--zinc-800); border: 1px solid var(--line); white-space: nowrap; }

.pill { position: relative; display: inline-block; min-width: 4rem; padding: 0.375rem var(--s); border-radius: 9999px; font-size: 0.875rem; line-height: 1.25rem; text-align: center; white-space: nowrap; }
.pill.now { min-width: 5.5rem; font-weight: 500; }
.s-ok { color: var(--ok); background: rgb(52 211 153 / 0.1); }
.s-warn { color: var(--warn); background: rgb(251 191 36 / 0.12); }
.s-bad { color: var(--bad); background: rgb(248 113 113 / 0.14); }
.s-none { color: var(--zinc-500); background: rgb(82 82 91 / 0.15); }
/* Нормальные дни — тихие: цвет достаётся только сбоям и текущему состоянию */
.c-day .pill.s-ok { color: var(--zinc-400); background: rgb(255 255 255 / 0.04); }
.c-day .pill.s-none { color: var(--zinc-600); background: transparent; }

/* ── Подсказки (data-tip, как на сайте) ────────────────── */
[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 0.375rem); transform: translateX(-50%);
  z-index: 10; padding: 0.375rem var(--s); border-radius: 9999px; border: 1px solid var(--line);
  background: var(--zinc-800); color: var(--zinc-100); font-size: 0.75rem; line-height: 1.25rem; font-weight: 400; white-space: nowrap; pointer-events: none;
}

/* ── Строки и подробности ──────────────────────────────── */
.row { cursor: pointer; transition: background-color 300ms; }
.row:hover, .row[aria-expanded="true"] { background: rgb(39 39 42 / 0.35); }
.row:focus-visible { outline: 1px solid var(--zinc-500); outline-offset: -1px; }
.detail { padding: var(--s); border-top: 1px solid var(--line); background: rgb(0 0 0 / 0.3); }
.detail[hidden] { display: none; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--s); }
.stat { display: flex; flex-direction: column; padding: var(--s); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.stat span { font-size: 0.75rem; line-height: 1.25rem; color: var(--zinc-400); }
.stat strong { font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; white-space: nowrap; }
.detail-label { margin: var(--s2) 0 var(--s); font-size: 0.8125rem; color: var(--zinc-400); }
.detail > .stats + .detail-label, .nr > .detail-label:first-child { margin-top: var(--s2); }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 3.5rem; }
.bar { position: relative; flex: 1 1 0; min-width: 0; border-radius: 9999px; background: var(--zinc-600); opacity: 0.9; transition: opacity 300ms; }
.bar.s-ok { background: var(--ok); opacity: 0.5; }
.bar.s-warn { background: var(--warn); opacity: 0.85; }
.bar.s-bad { background: var(--bad); opacity: 1; }
.bar.s-none { background: var(--zinc-600); opacity: 0.3; }
.bar:hover { opacity: 1; }
.daylist { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--s); }
.dayitem { display: flex; flex-direction: column; font-size: 0.8125rem; color: var(--zinc-400); }
.dayitem strong { color: var(--fg); font-size: 1rem; font-weight: 500; }
.dayitem small { color: var(--zinc-500); }
.c-now { display: flex; flex-direction: column; align-items: center; }
.ms { font-size: 0.75rem; line-height: 1.5; color: var(--zinc-400); }

/* История за 90 дней */
.hist { display: flex; gap: 2px; height: 2rem; }
.hbar { position: relative; flex: 1 1 0; min-width: 0; border-radius: 9999px; background: var(--zinc-600); opacity: 0.35; transition: opacity 300ms; }
.hbar.s-ok { background: var(--ok); opacity: 0.5; }
.hbar.s-warn { background: var(--warn); opacity: 0.9; }
.hbar.s-bad { background: var(--bad); opacity: 1; }
.hbar:hover { opacity: 1; }
.hist-axis { display: flex; justify-content: space-between; margin-top: 0.375rem; font-size: 0.75rem; color: var(--zinc-500); }

/* SSL */
.ssl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem var(--s); padding: var(--s); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 0.875rem; color: var(--zinc-400); }
.ssl strong { color: var(--fg); font-weight: 500; }
.ssl.s-warn { border-color: rgb(251 191 36 / 0.4); background: rgb(251 191 36 / 0.06); color: var(--zinc-300); }
.ssl.s-bad { border-color: rgb(248 113 113 / 0.45); background: rgb(248 113 113 / 0.08); color: var(--zinc-300); }

/* ── Серверы ───────────────────────────────────────────── */
.servers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s); }
.server { padding: var(--s); }
.server-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s); margin-bottom: var(--s); font-size: 1.125rem; }
.server .stats { margin-bottom: var(--s); }
.server-rows { display: flex; flex-direction: column; }
.srow { display: grid; grid-template-columns: minmax(0, 1fr) auto 6.5rem; align-items: center; column-gap: var(--s); padding: var(--s) 0; border-top: 1px solid var(--line); }
.srow:first-child { border-top: 0; padding-top: 0; }
.srow:last-child { padding-bottom: 0; }
.srow .ms { font-size: 0.8125rem; }

/* ── Подробности New Relic ─────────────────────────────── */
.timing { display: flex; height: 0.75rem; border-radius: 9999px; overflow: hidden; background: var(--zinc-800); gap: 2px; }
.seg { position: relative; display: block; height: 100%; min-width: 2px; }
.seg-dns { background: #60a5fa; } .seg-connect { background: #a78bfa; } .seg-ssl { background: #f472b6; } .seg-wait { background: #fbbf24; } .seg-receive { background: #34d399; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s); margin-top: var(--s); font-size: 0.8125rem; color: var(--zinc-300); }
.legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.legend i { width: 0.5rem; height: 0.5rem; border-radius: 9999px; }
.legend .seg-dns { background: #60a5fa; } .legend .seg-connect { background: #a78bfa; } .legend .seg-ssl { background: #f472b6; } .legend .seg-wait { background: #fbbf24; } .legend .seg-receive { background: #34d399; }
.loctable { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) 6rem 6rem 6rem 6rem; column-gap: var(--s); align-items: center; padding: var(--s); border-top: 1px solid var(--line); font-size: 0.875rem; }
.lrow:first-child { border-top: 0; }
.lrow span:not(.lname) { text-align: right; white-space: nowrap; }
.lhead { color: var(--zinc-500); font-size: 0.8125rem; }
.lrow.lhead span:first-child { text-align: left; }
.lname { display: flex; align-items: center; gap: var(--s); min-width: 0; }
.dot-s { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: currentColor; }
.dot-s.s-ok { color: var(--ok); background: currentColor; } .dot-s.s-warn { color: var(--warn); background: currentColor; } .dot-s.s-bad { color: var(--bad); background: currentColor; }
.errbox { padding: var(--s); border: 1px solid var(--line); border-radius: var(--radius); background: rgb(248 113 113 / 0.06); color: var(--zinc-300); font-size: 0.875rem; overflow-wrap: anywhere; }

/* ── Карта мира ────────────────────────────────────────── */
.map { position: relative; width: 100%; aspect-ratio: 1000 / 390.8; margin-bottom: var(--s); background: url('world.svg') center / 100% 100% no-repeat; }
.stats + .map { margin-top: var(--s); }
.mk { position: absolute; width: 0.75rem; height: 0.75rem; transform: translate(-50%, -50%); border-radius: 9999px; cursor: pointer; }
.mk.s-ok { background: var(--ok); box-shadow: 0 0 0 4px rgb(52 211 153 / 0.2); }
.mk.s-warn { background: var(--warn); box-shadow: 0 0 0 4px rgb(251 191 36 / 0.25); }
.mk.s-bad { background: var(--bad); box-shadow: 0 0 0 4px rgb(248 113 113 / 0.3); animation: mk-pulse 1.6s ease-in-out infinite; }
.mk.s-none { background: var(--zinc-500); box-shadow: 0 0 0 4px rgb(113 113 122 / 0.25); }
.mk.mk-probe { width: 0.875rem; height: 0.875rem; border: 2px solid #ffffff; }
.mk.mk-probe.s-ok { box-shadow: 0 0 0 4px rgb(52 211 153 / 0.35); }
.mk.mk-probe.s-warn { box-shadow: 0 0 0 4px rgb(251 191 36 / 0.4); }
.mk.mk-probe.s-bad { box-shadow: 0 0 0 4px rgb(248 113 113 / 0.45); }
.mk:hover { z-index: 5; }
.users-site + .users-site { margin-top: calc(var(--s) * 2); }
.subchecks { margin-bottom: var(--s); }
.chip .chip { margin-left: 0.25rem; }
@keyframes mk-pulse { 50% { box-shadow: 0 0 0 8px rgb(248 113 113 / 0.05); } }
.muted { color: var(--zinc-400); font-size: 0.875rem; }

/* ── История событий и объявления ──────────────────────── */
.tab-pane { margin-bottom: var(--s2); }
.empty { padding: var(--s2); text-align: center; color: var(--zinc-400); }
.event { padding: var(--s); margin-bottom: var(--s); }
.tab-pane > .event:last-child { margin-bottom: 0; }
.event-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s); flex-wrap: wrap; }
.event-head strong { font-weight: 600; }
.event-meta { margin-top: var(--s); font-size: 0.875rem; color: var(--zinc-400); }
.event-body { margin: var(--s) 0 0; color: var(--zinc-300); font-size: 0.9375rem; overflow-wrap: anywhere; }
.updates { list-style: none; margin: var(--s) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s); }
.updates li { padding-left: var(--s); border-left: 2px solid var(--line); color: var(--zinc-300); font-size: 0.875rem; overflow-wrap: anywhere; }
.updates li span { display: block; color: var(--zinc-500); font-size: 0.75rem; }

/* ── Футер ─────────────────────────────────────────────── */
.foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s); flex-wrap: wrap; margin: 0; padding: var(--s2) 0; font-size: 0.875rem; color: var(--zinc-500); }
.foot-links { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s) var(--s2); }
.foot-links a { transition: color 300ms; }
.foot-links a:hover { color: var(--fg); }
.socials { display: flex; gap: var(--s); }
.social { position: relative; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; cursor: pointer; opacity: 0.5; transition: opacity 300ms, transform 300ms; }
.social:hover { opacity: 1; }
.social:active { transform: scale(0.95); }
.social img { display: block; width: 1.5rem; height: 1.5rem; }
/* Кнопка 40px, иконка 24px: тултип подтягиваем к самой иконке */
.social[data-tip]:hover::after { bottom: calc(100% - 0.5rem); }

/* ── Админка ───────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: var(--s); padding: var(--s); margin-bottom: var(--s); }
.form.narrow { max-width: 26rem; }
.form h2, h2.section { margin: 0; font-size: 1.125rem; font-weight: 600; }
h2.section { margin: var(--s2) 0 var(--s); }
.form label { display: flex; flex-direction: column; gap: var(--s); font-size: 0.8125rem; color: var(--zinc-400); }
.form input, .form select, .form textarea { font-size: 1rem; color: var(--fg); background: var(--surface); border: 1px solid var(--line); outline: none; transition: border-color 300ms; }
.form input, .form select { height: 2.5rem; padding: 0 1rem; border-radius: 9999px; }
.form textarea { padding: var(--s) 1rem; border-radius: var(--radius); resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--zinc-500); }
.form select option { background: var(--zinc-900); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s); }
.form-error { margin: 0; color: var(--bad); font-size: 0.875rem; }
.hint { margin: 0; color: var(--zinc-500); font-size: 0.8125rem; }
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--zinc-800); }
.btn.danger { background: rgb(248 113 113 / 0.15); color: var(--bad); }
.btn.danger:hover { background: rgb(248 113 113 / 0.25); }
.form > .btn:not(.ghost):not(.danger) { align-self: flex-start; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s); }
.inline { margin: 0; }
.inline-form { padding: 0; margin: var(--s) 0 0; }
.pills { display: inline-flex; align-items: center; gap: var(--s); flex-wrap: wrap; }
.edit { margin-top: var(--s); }
.edit summary { display: inline-flex; align-items: center; height: 2.5rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: 9999px; color: var(--zinc-300); font-size: 0.9375rem; cursor: pointer; transition: background-color 300ms; list-style: none; }
.edit summary::-webkit-details-marker { display: none; }
.edit summary:hover { background: var(--zinc-800); }
.edit[open] summary { margin-bottom: var(--s); }

/* ── Доступность ───────────────────────────────────────── */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s); top: -4rem; z-index: 30; padding: 0 1rem; line-height: 2.5rem; border-radius: 9999px; background: #fff; color: #000; font-weight: 500; transition: top 300ms; }
.skip:focus { top: var(--s); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--zinc-300); outline-offset: 2px; }
.s-maint { color: #60a5fa; background: rgb(96 165 250 / 0.12); }

/* ── Фильтры истории ───────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: var(--s); margin-bottom: var(--s2); }
.sel { position: relative; display: block; min-width: 0; }
.sel select, .sel input { height: 2.5rem; padding: 0 2.25rem 0 1rem; border: 1px solid var(--line); border-radius: 9999px; background-color: var(--surface); color: var(--fg); font-size: 0.9375rem; appearance: none; -webkit-appearance: none; outline: none; cursor: pointer; transition: border-color 300ms; color-scheme: dark; max-width: 100%; }
.sel select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%23a1a1aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 0.75rem; }
.sel input[type="date"] { padding-right: 1rem; }
.sel select:hover, .sel input:hover, .sel select:focus, .sel input:focus { border-color: var(--zinc-500); }
.sel select option { background: var(--zinc-900); color: var(--fg); }

/* ── Таймлайн событий ──────────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; }
.tl { position: relative; display: grid; grid-template-columns: 12rem minmax(0, 1fr); column-gap: 2.25rem; padding-bottom: var(--s2); scroll-margin-top: 5rem; }
.tl[hidden] { display: none; }
.tl::before { content: ''; position: absolute; top: 0.5rem; bottom: 0; left: calc(12rem + 1.125rem); width: 1px; background: var(--line); }
.tl::after { content: ''; position: absolute; top: 0.375rem; left: calc(12rem + 1.125rem - 0.375rem); width: 0.75rem; height: 0.75rem; border-radius: 9999px; background: var(--zinc-600); box-shadow: 0 0 0 4px var(--bg); }
.tl-bad::after { background: var(--bad); } .tl-warn::after { background: var(--warn); } .tl-ok::after { background: var(--ok); } .tl-maint::after { background: #60a5fa; }
.tl-bad.tl-open::after, .tl[data-open="1"].tl-bad::after, .tl-pulse::after { animation: mk-pulse 1.6s ease-in-out infinite; }
.tl::before { transition: background 0.3s; }
.tl-when { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s); min-width: 0; }
.tl-when strong { font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; }
.tl-range, .tl-dur { font-size: 0.875rem; line-height: 1.25rem; color: var(--zinc-400); }
.tl-range .now { color: var(--bad); }
.tl-when .pill { margin-top: var(--s); min-width: 0; }
.tl-body { min-width: 0; border-radius: var(--radius); }
.tl-body h3 { margin: 0; font-size: 1.375rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.tl-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: var(--s) var(--s2); margin: var(--s) 0 0; }
.tl-meta dt { color: var(--zinc-400); font-size: 0.875rem; }
.tl-meta dt::after { content: ':'; }
.tl-meta dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s); }
.tl-meta .pill { min-width: 0; }
.anchor { position: absolute; top: 0; }
.permalink { display: inline-block; margin-top: var(--s); font-size: 0.875rem; color: var(--zinc-500); transition: color 300ms; }
.permalink:hover { color: var(--fg); }
.tl.target .tl-body { animation: target-flash 2.4s ease-out; }
@keyframes target-flash { from { box-shadow: 0 0 0 12px rgb(255 255 255 / 0.07); background: rgb(255 255 255 / 0.07); } to { box-shadow: 0 0 0 12px transparent; background: transparent; } }
.timeline + .empty, #tl-empty { margin-top: var(--s); }

/* Эпизоды серии сбоев */
.tl-episodes { margin-top: var(--s); }
.tl-episodes summary { list-style: none; display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
.tl-episodes summary::-webkit-details-marker { display: none; }
.tl-episode-list { margin: var(--s) 0 0; padding: 0; list-style: none; list-style-type: none; display: flex; flex-direction: column; gap: var(--s); }
.tl-episode-list li { display: flex; align-items: center; gap: var(--s); font-size: 0.8125rem; color: var(--zinc-400); padding: var(--s); background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); flex-wrap: wrap; list-style: none; }
.tl-episode-list .ep-when { font-weight: 500; color: var(--fg); }
.tl-episode-list .ep-dur { color: var(--zinc-500); }
.tl-episode-list .ep-comps { display: inline-flex; gap: var(--s); align-items: center; flex-wrap: wrap; }
.tl-episode-list .ep-link { margin-left: auto; color: var(--zinc-500); font-family: monospace; text-decoration: none; }
.tl-episode-list .ep-link:hover { color: var(--fg); }
.tl-more { text-align: center; margin: var(--s2) 0; }

/* ── Адаптив ───────────────────────────────────────────── */
@media (max-width: 1000px) {
  .tr { grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem 6.75rem; }
  .d-old { display: none; }
}
@media (max-width: 760px) {
  .servers { grid-template-columns: minmax(0, 1fr); }
  .lrow { grid-template-columns: minmax(0, 1fr) 5rem 5rem; }
  .lrow span:nth-child(4), .lrow span:nth-child(5) { display: none; }
  .mk { width: 0.5rem; height: 0.5rem; }
}
@media (max-width: 760px) {
  .tl { grid-template-columns: minmax(0, 1fr); row-gap: var(--s); padding-left: 1.5rem; }
  .tl::before { left: 0.375rem; }
  .tl::after { left: 0; }
  .tl-when { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.25rem var(--s); }
  .tl-when .pill { margin-top: 0; }
  .tl-meta { gap: var(--s); }
}
@media (max-width: 640px) {
  h1 { font-size: 1.5rem; }
  .tr { grid-template-columns: minmax(0, 1fr) 4.5rem 5.5rem; }
  .d-yest { display: none; }
  .pill { min-width: 3.5rem; }
  .pill.now { min-width: 5rem; }
  /* Телефон: название, под ним сервер мелким текстом — строка вдвое ниже */
  .tr:not(.th) .c-name { flex-direction: column-reverse; align-items: flex-start; flex-wrap: nowrap; gap: 0; }
  .tr:not(.th) .chip { padding: 0; border: 0; background: none; color: var(--zinc-500); font-size: 0.75rem; line-height: 1.25rem; }
  .foot { flex-direction: column; text-align: center; }
  .foot-links { justify-content: center; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── Админка: разделы и формы настроек ─────────────────── */
.admin-nav { display: flex; overflow-x: auto; }
.admin-nav a.tab { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.form label.chk { flex-direction: row; align-items: center; gap: 0.5rem; font-size: 0.9375rem; color: var(--zinc-300); }
.form input[type="checkbox"] { width: 1.125rem; height: 1.125rem; padding: 0; accent-color: #fff; }
.chk-col { display: flex; flex-direction: column; gap: 0.5rem; justify-content: center; }
.form fieldset { margin: 0; padding: var(--s); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: var(--s); min-width: 0; }
.form fieldset[hidden] { display: none; }
.form legend { padding: 0 0.5rem; color: var(--zinc-400); font-size: 0.8125rem; }
.form-row.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form textarea[readonly] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; }
.card.child { margin-left: calc(var(--s) * 2); }
.chip.off { color: var(--warn); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; word-break: break-all; }
label.plain { display: flex; flex-direction: column; gap: var(--s); font-size: 0.8125rem; color: var(--zinc-400); }
@media (max-width: 640px) { .form-row, .form-row.four { grid-template-columns: minmax(0, 1fr); } .card.child { margin-left: var(--s); } }
.server-rows.card { padding: var(--s); }
.server-rows.card .srow { padding-left: 0; padding-right: 0; }
.form input[type="color"] { padding: 0.25rem; cursor: pointer; width: 6rem; }
.lg .srow .ms { color: var(--zinc-400); }
.lg .actions { margin-top: var(--s); }
.lg .hint { margin-top: var(--s); }

.history { list-style: none; margin: 0 0 var(--s); padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.history li { display: flex; align-items: center; gap: var(--s); }
.history .when { color: var(--zinc-400); font-size: 0.875rem; min-width: 11rem; }
.history .pill { min-width: 0; }
.tl-body .detail-label { margin-top: var(--s); }

.pv-days { padding: var(--s); margin-bottom: var(--s); }
.pv-row { display: grid; grid-template-columns: minmax(6rem, 14rem) minmax(0, 1fr) auto; align-items: center; gap: var(--s); padding: 0.25rem 0; font-size: 0.875rem; }
.pv-k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--zinc-300); }
.pv-bar { height: 0.5rem; border-radius: 9999px; background: rgb(255 255 255 / 0.06); overflow: hidden; }
.pv-bar i { display: block; height: 100%; width: 0; border-radius: 9999px; background: #38bdf8; }
.pv-v { color: var(--zinc-400); font-variant-numeric: tabular-nums; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sla { padding: var(--s); overflow-x: auto; }
.sla-row { display: grid; grid-template-columns: minmax(8rem, 12rem) repeat(12, minmax(3.5rem, 1fr)); align-items: center; gap: 0.25rem; padding: 0.375rem 0; font-size: 0.875rem; min-width: 52rem; }
.sla-row .pill { min-width: 0; padding: 0.25rem 0.375rem; font-size: 0.8125rem; }
.sla-head { color: var(--zinc-500); font-size: 0.8125rem; }
.sla-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sla-total { border-top: 1px solid var(--line); margin-top: 0.25rem; padding-top: 0.5rem; font-weight: 600; }
.sla .muted { color: var(--zinc-600); text-align: center; }

.sla-admin { padding: var(--s); overflow-x: auto; }
.sla-a { display: grid; grid-template-columns: minmax(8rem, 1.6fr) repeat(6, minmax(5rem, 1fr)); gap: var(--s); align-items: center; padding: 0.375rem 0; font-size: 0.875rem; min-width: 44rem; }
.sla-ahead { color: var(--zinc-500); font-size: 0.8125rem; }
.sla-atotal { border-top: 1px solid var(--line); margin-top: 0.25rem; padding-top: 0.5rem; font-weight: 600; }
a.btn { text-decoration: none; }

/* ── Вкладка «Пользователи»: проблемы и сводка ─────────── */
.uprob, .usum { padding: 0; overflow: hidden; margin-bottom: var(--s); }
.uprob-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s); padding: var(--s); border-top: 1px solid var(--line); }
.uprob-row:first-child { border-top: 0; }
.uprob-row .name { min-width: 0; overflow-wrap: anywhere; }
.uprob-row .pill { flex: none; min-width: 0; }
.usum-row { display: grid; grid-template-columns: minmax(8rem, 2fr) repeat(4, minmax(4.5rem, 1fr)); align-items: center; column-gap: var(--s); padding: var(--s); border-top: 1px solid var(--line); }
.usum-row:first-child { border-top: 0; }
.usum-row > span:not(.name) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.usum-row .name { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.usum-row .pill { min-width: 0; }
.usum-head { color: var(--zinc-500); font-size: 0.8125rem; }
.usum-head span { font-weight: 400; }
.usum-head > span:first-child { text-align: left; }
@media (max-width: 640px) {
  .usum-head { display: none; }
  .usum-row { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0.375rem; }
  .usum-row .name { grid-column: 1 / -1; }
  .usum-row > span:not(.name) { display: flex; flex-direction: column; align-items: flex-start; text-align: left; font-size: 0.875rem; }
  .usum-row > span:not(.name)::before { content: attr(data-l); font-size: 0.75rem; color: var(--zinc-500); }
}