:root {
  --bg: #0f111a;
  --bg2: #141824;
  --fg: #f0f0f0;
  --fg-muted: #9da5b4;
  --b: #2b2f3a;
  --blue: #3d6df9;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a {
  color: var(--blue);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

header.topbar {
  background: var(--bg2);
  padding: 12px 0;
  margin-bottom: 20px;
}
header .brand { font-weight: 700; font-size: 18px; margin-right: 20px; color: #fff; }
header .nav a { margin-right: 12px; color: var(--fg-muted); }
header .nav a:hover { color: #fff; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

.card {
  background: var(--bg2);
  border: 1px solid var(--b);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.btn {
  background: var(--blue);
  border: none;
  border-radius: 8px;
  color: #fff;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 6px;
}
.btn:hover { filter: brightness(1.1); }
.btn:disabled { background: #444; cursor: not-allowed; }

input, textarea, select {
  background: #1b1e29;
  border: 1px solid var(--b);
  border-radius: 8px;
  color: #fff;
  padding: 8px;
  margin: 4px 0;
  width: 100%;
}

label { display: block; margin-top: 8px; margin-bottom: 4px; }

pre.log {
  background: #0a0c12;
  border: 1px solid var(--b);
  border-radius: 8px;
  padding: 8px;
  font-size: 13px;
  overflow-x: auto;
  max-height: 400px;
}

.heatwrap { overflow-x: auto; }
.heat-scroll { min-width: 800px; }

table.heat { border-collapse: collapse; width: 100%; }
table.heat th, table.heat td {
  border: 1px solid #222;
  text-align: center;
  padding: 6px 8px;
  font-size: 13px;
}

table.heat th.sticky-top {
  position: sticky; top: 0; background: #11141d; z-index: 2;
}

/* две липкие левые колонки */
table.heat th.sticky-left-1,
table.heat td.sticky-left-1 {
  position: sticky;
  left: 0;
  z-index: 4;
  background: #11141d;
}
table.heat th.sticky-left-2,
table.heat td.sticky-left-2 {
  position: sticky;
  left: 40px; /* ширина колонки-«гуттера» */
  z-index: 3;
  background: #11141d;
}

.gutter { width: 40px; min-width: 40px; text-align: center; }

table.heat td.v-empty { color: var(--fg-muted); }

.v span {
  display: inline-block;
  width: 32px; height: 22px; line-height: 22px;
  border-radius: 6px; font-weight: 600;
}
.v10 span { background: #2a9134; color: #fff; }
.v30 span { background: #4caf50; color: #fff; }
.v60 span { background: #a0c334; color: #000; }
.v120 span { background: #e3c038; color: #000; }
.v999 span { background: #a94442; color: #fff; }

/* переключатель мониторинга */
.monitor-pill {
  border: 1px solid var(--b);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
  margin-right: 8px;
}
.monitor-pill.on  { background: #1f6f3a; color: #eafff0; border-color: #1a5d31; }
.monitor-pill.off { background: #6e2d2d; color: #fff;    border-color: #5a2323; }
.monitor-pill:hover { filter: brightness(1.05); }

/* компактная иконка-кнопка корзины (не растит строку) */
.trash-btn-icon {
  width: 28px; height: 28px; line-height: 26px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--b);
  background: #141824;
  color: #fff;
  cursor: pointer;
}
.trash-btn-icon.muted { opacity: 0.45; }
.trash-btn-icon:hover { filter: brightness(1.08); }
.alert--success{color:#135200}
/* компактные заголовки дат/времени */
th.dt-compact { white-space: nowrap; line-height: 1.1; font-size: 12px; padding: 4px 6px; }
th.dt-compact .dt-d { font-weight: 700; }
th.dt-compact .dt-t { opacity: .8; font-size: 11px; }

/* меньше отступы в ячейках */
table.heat th, table.heat td { padding: 4px 6px; font-size: 12.5px; }

/* компактные «бэйджи» позиций */
.v span { width: 28px; height: 20px; line-height: 20px; border-radius: 6px; }
/* ——— Средняя строка: делаем менее заметной ——— */
.avg-row th { font-weight: 600; }
.avg-label { color: var(--fg-muted); }
.avg-cell  { color: var(--fg-muted); font-weight: 600; }
/* Запросы в одну строку (без переноса) */
.qcell{
  text-align:left;
  white-space:nowrap;   /* было: normal */
  word-break:normal;    /* было: break-word */
  max-width:none;       /* убираем ограничение ширины */
  overflow:visible;     /* чтобы ничего не пряталось */
}