/* Fleet UI Kit — один CSS панели флота.
   Источник правды по виду — Figma «ToTheWeb», страница «Fleet — UI Kit».
   Токены ниже — один в один переменные Figma (коллекции «Fleet / Color» и «Fleet / Layout»).
   Тема: светлая по умолчанию; тёмная — по системной настройке или data-theme="dark" на <html>. */

/* ------------------------------------------------------------------ шрифты
   Файлы лежат в /static/fonts (самостоятельный хостинг, без внешних запросов).
   Если файлов нет — сработает запасной системный шрифт. */
/* Шрифты OFL (static/fonts/OFL.txt), сабсеты Fontsource: латиница и кириллица отдельно */
@font-face { font-family: "Onest"; src: url("fonts/Onest-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap; 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: "Onest"; src: url("fonts/Onest-cyrillic.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap; 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: "JetBrains Mono"; src: url("fonts/JetBrainsMono-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap; 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: "JetBrains Mono"; src: url("fonts/JetBrainsMono-cyrillic.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* ------------------------------------------------------------------ токены: светлая тема */
:root {
  color-scheme: light;
  --bg-base: #f2f1ee;
  --bg-image: url("bg-light.svg");

  --surface-glass: rgb(255 255 255 / .62);
  --surface-glass-strong: rgb(255 255 255 / .85);
  --surface-inset: rgb(23 25 28 / .05);
  --surface-overlay: rgb(23 25 28 / .30);
  --border-glass: rgb(23 25 28 / .08);
  --border-strong: rgb(23 25 28 / .16);

  --text-primary: #17191c;
  --text-secondary: rgb(23 25 28 / .66);
  --text-tertiary: rgb(23 25 28 / .52);   /* ревью: 0,46 не проходит AA для мелкого текста */
  --text-inverse: #ffffff;

  --brand: #f0442b;
  --brand-soft: rgb(240 68 43 / .10);

  --accent: #2f7d52;
  --accent-fill: rgb(47 125 82 / .88);
  --on-accent: #ffffff;

  --btn-glass: rgb(255 255 255 / .72);
  --btn-glass-strong: rgb(255 255 255 / .92);
  --btn-disabled: rgb(23 26 28 / .05);
  --btn-disabled-line: rgb(23 26 28 / .12);

  --ok: #3f8a63;    --ok-soft: rgb(63 138 99 / .10);
  --warn: #a9741f;  --warn-soft: rgb(169 116 31 / .10);
  --crit: #b4533f;  --crit-soft: rgb(180 83 63 / .10);
  --info: #4a6aa3;  --info-soft: rgb(74 106 163 / .10);
  --neutral: rgb(23 25 28 / .55); --neutral-soft: rgb(23 25 28 / .07);
  --icon-flat: brightness(0) invert(.38); --icon-solid-light: brightness(1);

  --glow-ok: rgb(95 166 124 / .16);
  --glow-warn: rgb(212 154 63 / .16);
  --glow-crit: rgb(212 112 90 / .15);
  --edge-ok: rgb(95 166 124 / .55);
  --edge-warn: rgb(212 154 63 / .55);
  --edge-crit: rgb(212 112 90 / .55);

  --shadow-card: 0 20px 44px -14px rgb(23 25 28 / .16);
  --shadow-btn: 0 4px 14px -4px rgb(23 25 28 / .18);
  --highlight: inset 0 1px 0 rgb(255 255 255 / .9);

  /* layout */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 28px; --radius-full: 999px;
  --blur-card: 40px; --blur-btn: 18px;

  /* типографика */
  --font-ui: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: "Space Grotesk", var(--font-ui);
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* ------------------------------------------------------------------ токены: тёмная тема */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-base: #0a0a0b;
  --bg-image: url("bg-dark.svg");

  --surface-glass: rgb(255 255 255 / .06);
  --surface-glass-strong: rgb(255 255 255 / .08);
  --surface-inset: rgb(0 0 0 / .28);
  --surface-overlay: rgb(5 5 6 / .62);
  --border-glass: rgb(255 255 255 / .05);
  --border-strong: rgb(255 255 255 / .18);

  --text-primary: #ededeb;
  --text-secondary: rgb(255 255 255 / .58);
  --text-tertiary: rgb(255 255 255 / .46);
  --text-inverse: #17191c;

  --brand-soft: rgb(240 68 43 / .13);
  --accent: #7dbb94;
  --accent-fill: rgb(125 187 148 / .30);
  --on-accent: #edfaf2;

  --btn-glass: rgb(255 255 255 / .06);
  --btn-glass-strong: rgb(255 255 255 / .16);
  --btn-disabled: rgb(255 255 255 / .05);
  --btn-disabled-line: rgb(255 255 255 / .10);

  --ok: #86b89a;    --ok-soft: rgb(134 184 154 / .13);
  --warn: #d9a95f;  --warn-soft: rgb(217 169 95 / .13);
  --crit: #e07a62;  --crit-soft: rgb(224 122 98 / .14);
  --info: #8fa7cf;  --info-soft: rgb(143 167 207 / .13);
  --neutral: rgb(255 255 255 / .55); --neutral-soft: rgb(255 255 255 / .10);
  --icon-flat: brightness(0) invert(.72); --icon-solid-light: brightness(.62);

  --glow-ok: rgb(134 184 154 / .32);
  --glow-warn: rgb(217 169 95 / .32);
  --glow-crit: rgb(224 122 98 / .32);
  --edge-ok: #a6d8b8;
  --edge-warn: #efc685;
  --edge-crit: #f29a86;

  --shadow-card: 0 20px 44px -14px rgb(0 0 0 / .40);
  --shadow-btn: 0 4px 12px -4px rgb(0 0 0 / .25);
  --highlight: inset 0 1px 0 rgb(255 255 255 / .18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-base: #0a0a0b; --bg-image: url("bg-dark.svg");
    --surface-glass: rgb(255 255 255 / .06); --surface-glass-strong: rgb(255 255 255 / .08);
    --surface-inset: rgb(0 0 0 / .28); --surface-overlay: rgb(5 5 6 / .62);
    --border-glass: rgb(255 255 255 / .05); --border-strong: rgb(255 255 255 / .18);
    --text-primary: #ededeb; --text-secondary: rgb(255 255 255 / .58); --text-tertiary: rgb(255 255 255 / .46); --text-inverse: #17191c;
    --brand-soft: rgb(240 68 43 / .13);
    --accent: #7dbb94; --accent-fill: rgb(125 187 148 / .30); --on-accent: #edfaf2;
    --btn-glass: rgb(255 255 255 / .06); --btn-glass-strong: rgb(255 255 255 / .16);
    --btn-disabled: rgb(255 255 255 / .05); --btn-disabled-line: rgb(255 255 255 / .10);
    --ok: #86b89a; --ok-soft: rgb(134 184 154 / .13); --warn: #d9a95f; --warn-soft: rgb(217 169 95 / .13);
    --crit: #e07a62; --crit-soft: rgb(224 122 98 / .14); --info: #8fa7cf; --info-soft: rgb(143 167 207 / .13);
    --neutral: rgb(255 255 255 / .55); --neutral-soft: rgb(255 255 255 / .10);
    --icon-flat: brightness(0) invert(.72); --icon-solid-light: brightness(.62);
    --glow-ok: rgb(134 184 154 / .32); --glow-warn: rgb(217 169 95 / .32); --glow-crit: rgb(224 122 98 / .32);
    --edge-ok: #a6d8b8; --edge-warn: #efc685; --edge-crit: #f29a86;
    --shadow-card: 0 20px 44px -14px rgb(0 0 0 / .40); --shadow-btn: 0 4px 12px -4px rgb(0 0 0 / .25);
    --highlight: inset 0 1px 0 rgb(255 255 255 / .18);
  }
}

/* ------------------------------------------------------------------ основа */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg-base);
  color: var(--text-primary);
  font: 400 15px/22px var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
/* Подложка: статичный SVG, фиксирован псевдоэлементом (background-attachment: fixed не работает на iOS). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--bg-base) var(--bg-image) center top / cover no-repeat;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }
.i { width: 20px; height: 20px; flex: none; }
.i--sm { width: 16px; height: 16px; } .i--xs { width: 14px; height: 14px; } .i--lg { width: 24px; height: 24px; }
.i--right { transform: rotate(-90deg); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* типографика (стили текста Fleet/*) */
.t-display { font: 600 34px/42px var(--font-ui); letter-spacing: -.01em; margin: 0; }
.t-title   { font: 600 24px/30px var(--font-ui); letter-spacing: -.005em; margin: 0; }
.t-heading { font: 600 18px/24px var(--font-ui); margin: 0; }
.t-body    { font: 400 15px/22px var(--font-ui); }
.t-strong  { font: 500 15px/22px var(--font-ui); }
.t-caption { font: 500 13px/18px var(--font-ui); }
.t-over    { font: 600 12px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.t-metric  { font: 500 44px/48px var(--font-num); letter-spacing: -.02em; }
.t-metric-s{ font: 500 20px/24px var(--font-num); letter-spacing: -.01em; }
.t-mono    { font: 400 13px/20px var(--font-mono); }
.t-unit    { font-family: var(--font-ui); }          /* «74 дня»: цифры Space Grotesk, слова Onest */
/* Длинный контент (правила — README, «Пограничные состояния»):
   идентификаторы (домен, сервер, URL стенда) — одна строка с многоточием, полный текст в подсказке;
   человеческий текст (сообщение, причина, коммит) — до двух строк; заголовки и лог переносятся где угодно. */
.t-display, .t-title, .t-heading { overflow-wrap: anywhere; }
.t-ellipsis { display: block; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.t-clamp-2  { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; min-width: 0; }
.t-break    { overflow-wrap: anywhere; }
.nowrap     { white-space: nowrap; }
.t-metric, .t-metric-s, .node__count, .count, .log__time { font-variant-numeric: tabular-nums; }
.c-2 { color: var(--text-secondary); } .c-3 { color: var(--text-tertiary); }
.c-neutral { color: var(--neutral); } .c-ok { color: var(--ok); } .c-warn { color: var(--warn); } .c-crit { color: var(--crit); } .c-info { color: var(--info); } .c-brand { color: var(--brand); }

/* ------------------------------------------------------------------ стекло */
.glass {
  position: relative;
  background: linear-gradient(180deg, rgb(255 255 255 / .035), transparent 60%), var(--surface-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(var(--blur-card)) saturate(1.3);
  backdrop-filter: blur(var(--blur-card)) saturate(1.3);
}
.glass--strong { background: linear-gradient(180deg, rgb(255 255 255 / .035), transparent 60%), var(--surface-glass-strong); border-color: var(--border-strong); border-radius: var(--radius-xl); }
.inset { background: var(--surface-inset); border-radius: var(--radius-md); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: color-mix(in srgb, var(--bg-base) 92%, var(--text-primary)); }
}
.panel { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.panel__head { display: flex; align-items: center; gap: var(--space-2); }
.panel__head > :first-child { flex: 1; }

/* ------------------------------------------------------------------ кнопки
   Роли: --accent (создать, опубликовать) · --primary (нейтральное главное) · --glass (второстепенные) · --danger (откат). */
.btn {
  --h: 42px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--h); padding: 0 var(--space-5);
  border: 0; border-radius: var(--radius-full); cursor: pointer; white-space: nowrap;
  font: 500 15px/22px var(--font-ui);
  color: var(--text-primary);
  background: linear-gradient(180deg, rgb(255 255 255 / .08), transparent 55%), var(--btn-glass);
  box-shadow: var(--highlight), var(--shadow-btn);
  -webkit-backdrop-filter: blur(var(--blur-btn)); backdrop-filter: blur(var(--blur-btn));
  transition: background-color .15s, transform .1s, box-shadow .15s;
}
.btn { max-width: 100%; min-width: 0; }
.btn > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.btn .i { width: 18px; height: 18px; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn--s { --h: 34px; padding: 0 var(--space-3); font: 500 13px/18px var(--font-ui); gap: 6px; }
.btn--s .i { width: 16px; height: 16px; }
.btn--primary { background: linear-gradient(180deg, rgb(255 255 255 / .14), transparent 55%), var(--btn-glass-strong); }
.btn--accent  { color: var(--on-accent); background: linear-gradient(180deg, rgb(255 255 255 / .14), transparent 55%), var(--accent-fill);
                box-shadow: inset 0 1px 0 rgb(255 255 255 / .30), inset 0 -6px 14px -6px rgb(125 187 148 / .35), 0 6px 18px -4px rgb(125 187 148 / .20); }
.btn--danger  { color: var(--crit); background: linear-gradient(180deg, rgb(255 255 255 / .08), transparent 55%), var(--crit-soft); }
.btn:disabled, .btn[aria-disabled="true"] {
  cursor: not-allowed; filter: none; transform: none;
  color: var(--text-tertiary); background: var(--btn-disabled);
  box-shadow: inset 0 0 0 1px var(--btn-disabled-line);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] .i { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-btn { --h: 44px; width: var(--h); padding: 0; }
.icon-btn .i { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ бейджи, теги, аватар */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px 0 8px; border-radius: var(--radius-full);
         font: 500 13px/18px var(--font-ui); white-space: nowrap; color: var(--neutral); background: var(--neutral-soft); }
.badge { max-width: 100%; flex: 0 1 auto; min-width: 0; }
/* рядом с доменом бейдж занимает не больше половины строки */
.env__head .badge, .site-card__top .badge, .panel__head .badge, .commit .badge { max-width: 50%; }
.badge > span { overflow: hidden; text-overflow: ellipsis; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge--ok { color: var(--ok); background: var(--ok-soft); }
.badge--warn { color: var(--warn); background: var(--warn-soft); }
.badge--crit { color: var(--crit); background: var(--crit-soft); }
.badge--info { color: var(--info); background: var(--info-soft); }
.tag { display: inline-block; height: 28px; padding: 0 12px; border-radius: var(--radius-full); max-width: min(240px, 100%); vertical-align: middle;
       font: 500 13px/28px var(--font-ui); color: var(--text-secondary); background: var(--neutral-soft);
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* счётчик-кружок на значке (нижнее меню, кнопки с иконкой) */
.icon-count { position: relative; display: inline-flex; }
.count { position: absolute; top: -6px; left: calc(100% - 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
         display: inline-flex; align-items: center; justify-content: center; font: 600 11px/1 var(--font-num); white-space: nowrap;
         color: var(--bg-base); background: var(--warn); box-shadow: 0 0 0 2px var(--bg-base); }
/* пустое состояние */
.empty { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md);
         border: 1px dashed var(--border-strong); color: var(--text-secondary); }
.empty > .i { color: var(--ok); }
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
          font: 600 13px/1 var(--font-ui); color: var(--brand); background: var(--brand-soft); flex: none; }
.tile { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm);
        font: 600 15px/1 var(--font-ui); color: var(--text-secondary); background: var(--neutral-soft); flex: none; }
/* Значки сервисов — в тон панели, на том же фоне, что буквы. Вид выбирает fleet.js по прозрачности значка:
   flat — значок на прозрачном фоне: ровный силуэт цвета букв (пёстрые цвета и серое на сером не мешают);
   solid / solid-light — значок на своей плашке: в оттенках серого, светлая плашка в тёмной теме приглушена.
   Цвет — при наведении на строку и в заголовке страницы сайта. */
.tile--icon img { width: 20px; height: 20px; object-fit: contain; display: block; opacity: .85;
  filter: grayscale(1); transition: filter .2s, opacity .2s; }
.tile--icon img[data-tone="flat"] { filter: var(--icon-flat); opacity: 1; }
.tile--icon img[data-tone="solid-light"] { filter: grayscale(1) var(--icon-solid-light); }
.table tbody tr:hover .tile--icon img, .titlebar .tile--icon img { filter: none; opacity: 1; }
.tile--lg.tile--icon img { width: 36px; height: 36px; }
.tile--lg { width: 64px; height: 64px; border-radius: 20px; font: 500 30px/1 var(--font-num); border: 1px solid var(--border-glass); }

/* ------------------------------------------------------------------ навигация */
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-full); }
.seg__item { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-full);
             font: 500 15px/22px var(--font-ui); color: var(--text-secondary); white-space: nowrap; }
.seg__item:hover { color: var(--text-primary); }
.seg__item[aria-current], .seg__item[aria-selected="true"] {
  color: var(--text-primary);
  background: linear-gradient(180deg, rgb(255 255 255 / .14), transparent 55%), var(--btn-glass-strong);
  box-shadow: var(--highlight), var(--shadow-btn);
}
.search { display: flex; align-items: center; gap: var(--space-2); height: 44px; width: 340px; max-width: 100%; padding: 0 var(--space-4);
          border-radius: var(--radius-full); background: var(--surface-inset); border: 1px solid var(--border-glass); color: var(--text-tertiary); }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 400 15px/22px var(--font-ui); color: var(--text-primary); }
.search input::placeholder { color: var(--text-tertiary); }

/* ------------------------------------------------------------------ каркас страницы */
.page { max-width: 1440px; margin: 0 auto; padding: var(--space-6) var(--space-8) var(--space-10); display: flex; flex-direction: column; gap: var(--space-6); }
.header { display: flex; align-items: center; gap: var(--space-4); }
.header__nav { margin: 0 auto; }
.header__tools { display: flex; align-items: center; gap: 10px; }
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--text-primary); }
.logo svg { height: 26px; width: auto; }
.logo__sep { width: 1px; height: 20px; background: var(--border-strong); }
.logo__product { font: 500 22px/1 var(--font-num); letter-spacing: -.02em; color: var(--text-secondary); }
.logo__fleet { display: inline-flex; align-items: center; gap: 8px; }
.logo .logo__mark { width: 22px; height: 22px; flex: none; border-radius: 6px; }
.user { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: var(--radius-full); }
.user__name { display: flex; flex-direction: column; min-width: 0; max-width: 180px; }
.user__logout { all: unset; cursor: pointer; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--text-tertiary); margin-left: 2px; }
.user__logout:hover { color: var(--text-primary); background: var(--neutral-soft); }
.user__logout:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* вход */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6) var(--space-4); }
.login__card { width: min(440px, 100%); padding: 36px 32px 28px; display: flex; flex-direction: column; gap: var(--space-5); }
.login__btn { width: 100%; }
.login form { display: contents; }
.login__error { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md);
                background: var(--crit-soft); border: 1px solid color-mix(in srgb, var(--crit) 35%, transparent); }
.titlebar { display: flex; align-items: flex-end; gap: var(--space-3); padding-top: var(--space-3); }
.titlebar__text { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.row { display: grid; gap: var(--space-4); }
.row > * { min-width: 0; }   /* иначе длинная строка распирает колонку сетки */
.row--4 { grid-template-columns: repeat(4, 1fr); }
.row--3 { grid-template-columns: repeat(3, 1fr); }
.row--main-side { grid-template-columns: 1fr 440px; }
.row--fill > * { height: 100%; }
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.spacer { flex: 1; }

/* ------------------------------------------------------------------ карточка показателя
   Свет только у нижней кромки: ::before — размытое свечение, ::after — световой край (ярче в центре, гаснет к углам). */
.metric { padding: 22px var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.metric__label { display: flex; align-items: center; gap: var(--space-2); font: 500 15px/22px var(--font-ui); color: var(--text-secondary); }
.metric__label .i { width: 18px; height: 18px; }
.metric__caption { font: 400 15px/22px var(--font-ui); color: var(--text-tertiary); position: relative; z-index: 1; }
.metric { min-width: 0; }
.metric__label > span { flex: 1; }
.metric__value { position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric[data-status]::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -60px; height: 110px; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, var(--glow), transparent 100%); filter: blur(24px);
}
.metric[data-status]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: radial-gradient(52% 58% at 50% 100%, var(--edge) 0%, color-mix(in srgb, var(--edge) 35%, transparent) 40%, transparent 78%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.metric[data-status="ok"]   { --glow: var(--glow-ok);   --edge: var(--edge-ok); }
.metric[data-status="warn"] { --glow: var(--glow-warn); --edge: var(--edge-warn); }
.metric[data-status="crit"] { --glow: var(--glow-crit); --edge: var(--edge-crit); }

/* ------------------------------------------------------------------ узел (flow node) */
.node { display: flex; align-items: center; gap: var(--space-3); height: 56px; padding: 0 var(--space-4); border-radius: var(--radius-md); }
.node::before { content: ""; width: 3px; height: 22px; border-radius: 2px; background: var(--c, var(--neutral)); flex: none; }
.node { min-width: 0; }
.node__label { flex: 1; min-width: 0; color: var(--text-secondary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.node__count { font: 500 20px/24px var(--font-num); white-space: nowrap; flex: none; }
.node__count--text { font: 500 15px/22px var(--font-ui); }
a.node:hover { border-color: var(--border-strong); }
.node--ok { --c: var(--ok); } .node--warn { --c: var(--warn); } .node--crit { --c: var(--crit); } .node--info { --c: var(--info); }

/* ------------------------------------------------------------------ таблица сайтов */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; padding: 10px var(--space-5); font: 600 12px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.table th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.table td { padding: 0 var(--space-5); height: 72px; border-bottom: 1px solid var(--border-glass); vertical-align: middle; }
.table tbody tr:hover td { background: var(--neutral-soft); }
.site-cell { display: flex; align-items: center; gap: var(--space-3); max-width: 300px; min-width: 180px; }
.cell-s { max-width: 160px; }
.table .tag { max-width: 160px; }
.health { display: inline-flex; gap: 6px; }
/* Колонки проверок: иконка в шапке, индикатор строго под ней. Шапка таблицы сервисов прилипает к верху при прокрутке. */
.table .col-chk { width: 40px; padding: 0 4px; text-align: center; }
.col-chk__icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--text-secondary); background: var(--surface-inset); }
.chk { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; background: var(--soft, var(--neutral-soft)); }
.chk::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--neutral)); }
.chk--ok { --c: var(--ok); --soft: var(--ok-soft); } .chk--warn { --c: var(--warn); --soft: var(--warn-soft); } .chk--crit { --c: var(--crit); --soft: var(--crit-soft); }
.chk--none { background: none; color: var(--text-tertiary); font: 400 13px/24px var(--font-ui); }
.chk--none::before { content: none; }
/* Закреплённая шапка: плашка со скруглёнными углами, при прокрутке держится в 12 px от верха окна. */
.table__sticky th { position: sticky; top: 12px; z-index: 2; background: color-mix(in srgb, var(--bg-base) 82%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.table__sticky th:first-child { border-radius: 12px 0 0 12px; } .table__sticky th:last-child { border-radius: 0 12px 12px 0; }
.health__dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--soft, var(--neutral-soft)); }
.health__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--neutral)); }
.health__dot--ok   { --c: var(--ok);   --soft: var(--ok-soft); }
.health__dot--warn { --c: var(--warn); --soft: var(--warn-soft); }
.health__dot--crit { --c: var(--crit); --soft: var(--crit-soft); }

/* ------------------------------------------------------------------ стенд, коммит, лог */
.env { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.env { min-width: 0; }
.env__head { display: flex; align-items: center; gap: 10px; }
.env__head > .stack { min-width: 0; }
.env__version { display: flex; align-items: center; gap: 10px; padding: var(--space-3); }
.commit { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-glass); }
.commit__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.log { display: flex; align-items: flex-start; gap: 10px; font: 400 13px/20px var(--font-mono); }
.log > .i { margin-top: 2px; }
.log__msg { flex: 1; min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 2px; }
.log__detail { white-space: pre-wrap; font: 400 12px/18px var(--font-mono); color: var(--text-tertiary); max-height: 160px; overflow: auto; }
.i.spin { animation: spin 1s linear infinite; }
.log__time { color: var(--text-tertiary); min-width: 64px; flex: none; white-space: nowrap; }
.log--pending { color: var(--text-tertiary); }
.uptime { display: flex; gap: 4px; }
.uptime__day { flex: 1; height: 28px; border-radius: 3px; background: color-mix(in srgb, var(--ok) 38%, transparent); }
.uptime__day--warn { background: var(--warn); } .uptime__day--crit { background: var(--crit); }
.uptime__day--neutral { background: var(--neutral-soft); }
.check-row { display: grid; grid-template-columns: 8px minmax(88px, auto) minmax(0, 1fr); align-items: center; gap: 8px; }
.check-row__label { white-space: nowrap; }
.list-item { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-3); min-width: 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* ------------------------------------------------------------------ окно (modal) */
.modal { width: min(640px, 100%); padding: 28px; display: flex; flex-direction: column; gap: var(--space-5); }
.modal__head { display: flex; align-items: center; gap: 14px; }
.modal__head > .stack { min-width: 0; }
.modal__icon { flex: none; }
.modal__icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--btn-glass-strong); }
.modal--s { width: min(480px, 100%); padding: 24px; gap: var(--space-5); }
.modal--s .modal__icon.c-crit { background: var(--crit-soft); }
.backdrop--confirm { place-items: center; animation: fade-in .12s ease-out; }
.backdrop--confirm .modal { animation: pop-in .14s ease-out; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.modal__warn { padding: 14px var(--space-4); border-radius: var(--radius-md); background: var(--crit-soft); border: 1px solid color-mix(in srgb, var(--crit) 35%, transparent); display: flex; flex-direction: column; gap: var(--space-3); }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.check input { appearance: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-strong); margin: 0; display: grid; place-items: center; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.field { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border-glass); background: var(--surface-inset);
         font: 400 15px/22px var(--font-ui); color: var(--text-primary); resize: vertical; field-sizing: content; max-height: 168px; }
.field::placeholder { color: var(--text-tertiary); }
.progress { height: 6px; border-radius: 3px; background: var(--surface-inset); overflow: hidden; }
.progress__bar { height: 100%; border-radius: 3px; background: var(--ok); }
.backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: start center; padding: 120px var(--space-4) var(--space-4); overflow: auto;
            background: var(--surface-overlay); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* ------------------------------------------------------------------ мобильная версия */
.site-card { padding: 14px var(--space-4); display: flex; flex-direction: column; gap: 10px; border-radius: 20px; }
.site-card__top { display: flex; align-items: center; gap: var(--space-3); }
.site-card__top::before { content: ""; width: 3px; height: 36px; border-radius: 2px; background: var(--c, var(--neutral)); flex: none; }
.site-card--ok { --c: var(--ok); } .site-card--warn { --c: var(--warn); } .site-card--crit { --c: var(--crit); } .site-card--info { --c: var(--info); }
.mini-dots { display: inline-flex; gap: 4px; }
.mini-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--neutral)); }
.mini-dots .ok { --c: var(--ok); } .mini-dots .warn { --c: var(--warn); } .mini-dots .crit { --c: var(--crit); }
.bottom-nav { display: none; }
@media (min-width: 769px) { .only-mobile { display: none !important; } }
@media (max-width: 768px) { .only-desktop { display: none !important; } }

@media (max-width: 1100px) {
  .row--main-side { grid-template-columns: 1fr; }
  .row--4 { grid-template-columns: repeat(2, 1fr); }
  .row--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .page { padding: var(--space-5) var(--space-4) 120px; gap: var(--space-5); }
  .header__nav, .user { display: none; }
  .header__tools { margin-left: auto; gap: 8px; }
  .logo svg { height: 22px; } .logo .logo__mark { width: 19px; height: 19px; } .logo__fleet { gap: 6px; } .logo__product { font-size: 19px; } .logo { gap: 9px; }
  .row--3 { grid-template-columns: 1fr; }
  .row--4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .t-display { font: 600 24px/30px var(--font-ui); }
  .metric { padding: var(--space-4) var(--space-4) 18px; gap: 10px; }
  .metric .t-metric { font-size: 32px; line-height: 36px; }
  .seg--fill { display: flex; } .seg--fill .seg__item { flex: 1; justify-content: center; }
  .titlebar { flex-direction: column; align-items: stretch; }
  .bottom-nav { display: flex; justify-content: space-between; position: fixed; left: var(--space-4); right: var(--space-4); bottom: 20px; z-index: 10;
                height: 72px; padding: 0 8px; align-items: center; border-radius: var(--radius-xl); }
  .bottom-nav a { width: 80px; height: 56px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
                  font: 500 13px/18px var(--font-ui); color: var(--text-tertiary); }
  .bottom-nav a .i { width: 22px; height: 22px; }
  .bottom-nav a[aria-current] { color: var(--text-primary); background: linear-gradient(180deg, rgb(255 255 255 / .12), transparent 55%), var(--btn-glass-strong); box-shadow: var(--highlight), var(--shadow-btn); }
  .backdrop { padding-top: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ------------------------------------------------------------------ витрина кита */
.kit-section { display: flex; flex-direction: column; gap: var(--space-4); }
.kit-grid { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
.kit-narrow { width: 320px; max-width: 100%; display: flex; flex-direction: column; gap: var(--space-3); }
.kit-box { width: 240px; max-width: 100%; display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.swatch { width: 120px; display: flex; flex-direction: column; gap: 6px; }
.swatch__chip { height: 56px; border-radius: var(--radius-md); border: 1px solid var(--border-glass); }