:root {
  --bg:#f5f7fb; --surface:#ffffff; --surface-2:#fafbfd;
  --line:#e3e8f0; --line-soft:#eef2f7;
  --text:#0f172a; --muted:#64748b; --faint:#94a3b8;
  --accent:#1d4ed8; --accent-soft:#eff4ff;
  --ok:#047857; --ok-soft:#e7f6ef;
  --warn:#b45309; --warn-soft:#fdf5e6;
  --bad:#b91c1c; --bad-soft:#fdeeee;
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.04);
  --radius:10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0e1420; --surface:#161d2b; --surface-2:#1b2333;
    --line:#27324a; --line-soft:#1f2839;
    --text:#e8eef8; --muted:#94a3b8; --faint:#64748b;
    --accent:#5b8def; --accent-soft:#1a2542;
    --ok:#34d399; --ok-soft:#12291f;
    --warn:#fbbf24; --warn-soft:#2a2110;
    --bad:#f87171; --bad-soft:#2c1618;
    --shadow:0 1px 2px rgba(0,0,0,.3);
  }
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.55 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings:"tnum" 1;   /* цифры одинаковой ширины — столбцы не скачут */
}

/* ── каркас ─────────────────────────────────────────────────────────── */
.topbar { background:var(--surface); border-bottom:1px solid var(--line); }
.topbar .inner {
  /* Высота растёт под содержимое, а не задана числом. Разделов рабочего
     контура пятнадцать: на экране уже 1400 пикселей они переносятся на
     второй ряд, а при фиксированных 58 пикселях второй ряд уходил под
     край шапки — кнопки были видны наполовину и не нажимались. */
  max-width:1280px; margin:0 auto; padding:9px 24px; min-height:58px;
  display:flex; align-items:center; gap:14px 22px; flex-wrap:wrap;
}
.brand { font-size:16px; font-weight:640; letter-spacing:-.01em; white-space:nowrap; }
.brand span { color:var(--muted); font-weight:400; }
.nav { display:flex; gap:6px 2px; margin-left:auto; flex-wrap:wrap;
       align-items:center; }
.nav a {
  color:var(--muted); text-decoration:none; font-size:13.5px;
  padding:7px 12px; border-radius:7px; white-space:nowrap;
}
.nav a:hover { color:var(--text); background:var(--surface-2); }
.nav a.on { color:var(--accent); background:var(--accent-soft); font-weight:560; }
/* Соседнее приложение со своим входом — помечено стрелкой и приглушено. */
.nav a.ext { color:var(--faint); }
.nav a.ext:hover { color:var(--muted); }

/* Рабочий контур: разделов много, и каждый — самостоятельная кнопка.
   Сплошной строкой текста они читались как одно длинное слово. */
/* Кнопок много, и на средних экранах они занимают два ряда — это нормально,
   лишь бы ни один ряд не обрезался. Отступы чуть теснее, чтобы рядов было
   два, а не три. */
.nav.work { gap:6px; }
@media (max-width:1500px) {
  .nav.work a { padding:6px 9px; font-size:13px; }
}
.nav.work a {
  background:var(--surface); border:1px solid var(--line);
  color:var(--text); font-weight:520;
}
.nav.work a:hover { border-color:var(--accent); color:var(--accent); }
.nav.work a.on { border-color:var(--accent); background:var(--accent-soft); }

.wrap { max-width:1280px; margin:0 auto; padding:24px 24px 72px; }
.page-head { margin:4px 0 20px; }
h1 { font-size:23px; font-weight:640; letter-spacing:-.02em; margin:0 0 4px; }
h2 { font-size:15px; font-weight:620; margin:0 0 12px; }
.lead { color:var(--muted); font-size:13.5px; margin:0; }

/* ── плитки показателей ─────────────────────────────────────────────── */
.stats { display:grid; gap:12px; margin-bottom:20px;
         grid-template-columns:repeat(auto-fit, minmax(158px, 1fr)); }
.stat {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow);
}
.stat .num { font-size:27px; font-weight:660; line-height:1.1; letter-spacing:-.02em; }
.stat .cap { color:var(--muted); font-size:12.5px; margin-top:3px; }
.stat .sub { color:var(--faint); font-size:11.5px; margin-top:2px; }
.stat.ok .num { color:var(--ok); }
.stat.warn .num { color:var(--warn); }
.stat.bad .num { color:var(--bad); }

/* ── панели ─────────────────────────────────────────────────────────── */
.panel {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:16px;
}
.panel > .head {
  padding:14px 18px; border-bottom:1px solid var(--line-soft);
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.panel > .body { padding:16px 18px; }
.panel > .body.flush { padding:0; }

/* ── таблицы ────────────────────────────────────────────────────────── */
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th, td { text-align:left; padding:11px 14px; vertical-align:top; }
th {
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--faint); background:var(--surface-2);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
td { border-bottom:1px solid var(--line-soft); }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--surface-2); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }

/* строка, требующая внимания — узкая полоса слева, без заливки всей строки */
tr.mark-bad  td:first-child { box-shadow:inset 3px 0 0 var(--bad); }
tr.mark-warn td:first-child { box-shadow:inset 3px 0 0 var(--warn); }
tr.mark-mute td:first-child { box-shadow:inset 3px 0 0 var(--line); }

/* ── мелкие элементы ────────────────────────────────────────────────── */
.tag {
  display:inline-block; padding:2px 9px; border-radius:20px;
  font-size:12px; font-weight:520; white-space:nowrap;
}
.tag.ok   { background:var(--ok-soft);   color:var(--ok); }
.tag.warn { background:var(--warn-soft); color:var(--warn); }
.tag.bad  { background:var(--bad-soft);  color:var(--bad); }
.tag.mute { background:var(--surface-2); color:var(--muted); border:1px solid var(--line); }

.key {
  font-family:ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size:13px; font-weight:600; letter-spacing:.02em;
}
.muted { color:var(--muted); font-size:12.5px; }
.faint { color:var(--faint); font-size:12px; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

.bar { height:5px; background:var(--line-soft); border-radius:3px;
       overflow:hidden; margin-top:6px; max-width:130px; }
.bar > i { display:block; height:100%; background:var(--accent); border-radius:3px; }
.bar.over > i { background:var(--warn); }

/* ── формы ──────────────────────────────────────────────────────────── */
label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
input, select, button, textarea {
  font:inherit; font-size:14px; color:var(--text);
  background:var(--surface); border:1px solid var(--line);
  border-radius:8px; padding:8px 11px;
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
button { cursor:pointer; background:var(--surface-2); font-weight:520; }
button:hover { border-color:var(--faint); }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.primary:hover { filter:brightness(1.08); }
button.danger { color:var(--bad); }
button.small { padding:5px 10px; font-size:12.5px; border-radius:7px; }
.form-row { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.form-row > div { min-width:0; }

.notice { border-radius:var(--radius); padding:12px 15px; margin-bottom:16px;
          font-size:13.5px; border:1px solid; }
.notice.ok   { background:var(--ok-soft);   border-color:var(--ok);   color:var(--ok); }
.notice.bad  { background:var(--bad-soft);  border-color:var(--bad);  color:var(--bad); }
.notice.warn { background:var(--warn-soft); border-color:var(--warn); color:var(--warn); }

.empty { padding:34px 18px; text-align:center; color:var(--muted); font-size:13.5px; }

/* ── вход ───────────────────────────────────────────────────────────── */
.signin { max-width:378px; margin:14vh auto; }
.signin .panel { padding:26px; }
.signin h1 { font-size:20px; }

@media (max-width:640px) {
  .wrap { padding:18px 14px 60px; }
  .topbar .inner { padding:0 14px; height:auto; min-height:56px;
                   flex-wrap:wrap; gap:10px; padding-bottom:8px; }
  .nav { margin-left:0; width:100%; }
  th, td { padding:9px 10px; }
}