:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --text: #1f2328;
  --muted: #6b7280;
  --border: #e1e4e8;
  --border-strong: #d0d5db;
  --head-bg: #f6f7f9;
  --hover: #f2f5fa;
  --accent: #2563eb;
  --danger: #b42318;
}

* { box-sizing: border-box; }

/* Страница не прокручивается: скроллятся только список и содержимое карточки. */
html, body { height: 100%; overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
}

a { color: inherit; text-decoration: none; }

/* ── каркас: меню слева, рабочая область справа ────────── */

.app { display: flex; height: 100%; }
.app[hidden] { display: none; }

/* ── вход ──────────────────────────────────────────────── */

.login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 16px;
}

.login[hidden] { display: none; }

.login-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 280px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}

.login-title { font-size: 17px; font-weight: 600; }
.login-box p { margin: 0; font-size: 12px; line-height: 1.35; }
.login-box p.error { color: var(--danger); }
.login-box input { height: 30px; }
.login-box .btn { height: 30px; }

.nav-logout {
  margin-top: 10px;
  padding: 0;
  border: none;
  background: none;
  color: #79808d;
  font: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

.nav-logout:hover { color: #fff; }

.sidebar {
  width: 190px;
  flex: 0 0 190px;
  background: #131a26;
  color: #c8cdd6;
  display: flex;
  flex-direction: column;
  padding: 14px 0;
}

.sidebar-brand {
  padding: 0 16px 16px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.sidebar-brand span { color: #8f97a5; font-weight: 400; }

.nav-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: none;
  color: #c8cdd6;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.nav-item:hover { background: #1c2534; color: #fff; }

.nav-item[aria-current="true"] {
  background: var(--accent);
  color: #fff;
}

.sidebar-foot {
  margin-top: auto;
  padding: 12px 16px 0;
  font-size: 11px;
  color: #79808d;
}

.content {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 16px 12px;
}

.content-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 46px;
}

.content-head h1 { margin: 0; font-size: 16px; font-weight: 600; }

.content-head-actions { display: flex; align-items: center; gap: 8px; }

/* ── две панели: список слева, карточка справа ─────────── */

/* Фильтры живут в левой колонке, поэтому карточка справа тянется во всю высоту. */
.layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 12px;
  align-items: stretch;
}

/* Обе колонки одной высоты: список тянется, сколько бы рядов ни заняли фильтры. */
.list-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Без этого панель остаётся в сетке: display из класса перебивает [hidden] */
.list-pane[hidden] { display: none; }

.detail-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}

/* ── элементы управления ───────────────────────────────── */

.btn {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.btn:hover:not(:disabled) { background: var(--hover); }
.btn:disabled { color: #9aa1aa; cursor: default; }

input, select {
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

input:focus, select:focus { outline: 1px solid var(--accent); outline-offset: -1px; }
input::placeholder { color: #9aa1aa; }

/* ── фильтры ───────────────────────────────────────────── */

.filters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 10px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* Без этого ряд остаётся видимым: display из класса перебивает [hidden] */
.chips[hidden] { display: none; }

.chip {
  height: 24px;
  padding: 0 11px;
  border: 1px solid #e6e9ee;
  border-radius: 999px;
  background: #fbfcfd;
  color: #545b66;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.chip:hover { background: var(--hover); border-color: #dbe0e8; color: var(--text); }

.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Чипсы групп: иконка вместо длинного названия, название — в подсказке */
.chip-icon-only {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
}

.chip-icon { width: 15px; height: 15px; flex: none; }

/* Счётчик в чипсе: сколько позиций в категории по всей базе.
   Цвет наследуется — фон у чипса свой у каждой группы, фиксированный серый на нём тонет. */
.chip-count { color: inherit; opacity: 0.55; font-size: 11px; }
.chip:hover .chip-count { opacity: 0.75; }

/* Диапазоны прижаты к правому краю своего ряда */
.chips-range {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chips-range input {
  height: 24px;
  border-radius: 8px;
  border-color: #e6e9ee;
}

.chips-range input[type="number"] { width: 82px; }
.chips-range input[type="date"] { color: #9aa1aa; }
.chips-range input[type="date"].filled { color: var(--text); }
.chips-dash { color: var(--muted); }

.check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.check input { height: auto; margin: 0; cursor: pointer; }
.check:hover { color: var(--text); }

/* Стрелки сдвигают выбранный период на его же длину */
.arrow-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #e6e9ee;
  border-radius: 999px;
  background: #fbfcfd;
  color: #545b66;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.arrow-btn:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.arrow-btn:disabled { color: #c2c7cf; cursor: default; }

#reset-btn { font-size: 10px; }

#f-q { width: 240px; }

/* ── строка итогов ─────────────────────────────────────── */

/* Строка над таблицей — цвета строк, подвал — серый: так видно, где данные,
   а где сводка по ним. */
.totals {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-bottom: none;
  background: var(--surface);
  color: var(--muted);
  flex-wrap: wrap;
}

.totals b { color: var(--text); }

/* ── таблица ───────────────────────────────────────────── */

.table-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--border);
  background: var(--surface);
}

.table-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--head-bg);
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  padding: 6px 10px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

thead th.sortable { cursor: pointer; user-select: none; }
thead th .arrow { color: #b3b9c0; margin-left: 4px; }
thead th[aria-sort] { color: var(--text); }
thead th[aria-sort] .arrow { color: var(--accent); }

tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid #f0f1f3;
  vertical-align: top;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--hover); }
tbody tr.selected { background: #e8eefb; }

/* Сквозной номер строки: нумерация идёт по текущей выборке, а не по id в базе */
.idx {
  width: 48px;
  text-align: right;
  white-space: nowrap;
  color: var(--muted);
}

.num { text-align: right; white-space: nowrap; }

/* Дата занимает две строки, поэтому короткие ячейки выравниваются по её середине */
tbody td.num, tbody td.group-cell, tbody td.cat-cell, tbody td.idx { vertical-align: middle; }

/* ── схлопнутые по названию строки ─────────────────────── */

.expander-cell { width: 44px; padding-right: 0 !important; vertical-align: middle; }

.expander {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid #e6e9ee;
  border-radius: 999px;
  background: #fbfcfd;
  color: var(--muted);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.expander:hover { background: var(--hover); border-color: #dbe0e8; color: var(--text); }
.expander-sign { width: 7px; text-align: center; font-weight: 600; }
.expander-count { font-size: 11px; }

/* Раскрытые покупки: подчинены своей строке и не спорят с ней за внимание */
tbody tr.child > td { background: #fafbfc; }
tbody tr.child td.ellipsis { padding-left: 24px; } /* отступ задаёт ячейка, иначе он удвоится внутри .cell-flex */
tbody tr.child-more td { padding-left: 24px; }
.nowrap { white-space: nowrap; }
.dim { color: var(--muted); }
.small { font-size: 11px; }

/* Длинные названия обрезаются: полный текст — в карточке справа. */
/* Главная колонка: тянется на весь остаток, но не ужимается соседями с длинными числами */
.ellipsis {
  max-width: 0;
  width: 100%;
  min-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Пометка справа от длинного названия: многоточие съедает конец текста, а не значок.
   Флекс живёт внутри ячейки: на самой td он развалил бы табличную раскладку. */
.cell-flex { display: flex; align-items: baseline; gap: 6px; }
.cell-flex > .ellipsis-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-flex > .badge { flex: none; }

/* Колонкам категорий нужна своя ширина: иначе они делят место с названием
   товара по правилу width:100% и схлопываются в пару букв. */
.group-cell, .cat-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-cell { width: 132px; max-width: 132px; }
.cat-cell { width: 184px; max-width: 184px; }

.badge {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.badge.refund { color: var(--danger); }

/* ── раздел «Категории» ────────────────────────────────── */

.tree-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tree-pane[hidden] { display: none; }

.tree-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 10px;
}

.tree-scroll { flex: 1; min-height: 0; overflow: auto; }

.tree-group { border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.tree-group:last-child { border-bottom: none; }

.tree-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tree-row:hover { background: var(--hover); }
.tree-row.selected { background: #e8eefb; }
.tree-row .ellipsis-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-count { flex: none; font-size: 12px; }

/* Перетаскивание: строка-источник бледнеет, место вставки показывает линия */
.tree-row[draggable="true"] { cursor: grab; }
.tree-row.dragging { opacity: 0.4; }
.tree-row.drop-before { box-shadow: inset 0 2px 0 0 var(--accent); }
.tree-row.drop-after { box-shadow: inset 0 -2px 0 0 var(--accent); }

.tree-head-row { font-weight: 600; background: var(--head-bg); }
.tree-head-row:hover { background: var(--hover); }
.tree-cat { padding-left: 33px; }
.tree-add { padding-left: 33px; color: var(--muted); font-size: 12px; }

/* ── редактор справочника ──────────────────────────────── */

.editor {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px;
}

.editor input, .editor select, .editor textarea { width: 100%; }
.editor textarea { height: auto; padding: 5px 6px; resize: vertical; font: inherit; }
.editor p { margin: 0; font-size: 12px; line-height: 1.35; }
.editor-actions { display: flex; gap: 8px; }

.btn.danger { color: var(--danger); }
.btn.danger:disabled { color: #c9a5a0; }

#node-note.error { color: var(--danger); }

/* Иконки выбираются из набора, а не вводятся строкой: опечатка дала бы пустой чипс */
.icon-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 4px;
  /* набор больше сотни — ограничиваем высоту, чтобы не выдавить остальную карточку */
  max-height: 210px;
  overflow-y: auto;
}

.icon-option {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: #545b66;
  cursor: pointer;
}

.icon-option:hover { background: var(--hover); border-color: var(--border-strong); }

.icon-option.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.icon-option .chip-icon { width: 18px; height: 18px; }

/* ── выбор цвета группы ────────────────────────────────── */

.color-picker { display: flex; flex-direction: column; gap: 8px; }

/* Квадрат: по горизонтали тон, сверху вниз цвет выцветает в белый.
   Радуга — фон, белизна — накладка, так обходимся без canvas. */
.color-field {
  position: relative;
  height: 120px;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: crosshair;
  touch-action: none;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff),
    linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

.color-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.color-row { display: flex; align-items: center; gap: 8px; }
.color-swatch { flex: none; width: 26px; height: 26px; border: 1px solid var(--border-strong); border-radius: 4px; }
#color-hex { flex: 1; font-family: ui-monospace, Consolas, monospace; }

/* Полоса «белый → цвет группы»: между ползунками раскладываются категории */
.shade-bar {
  position: relative;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  touch-action: none;
  background: linear-gradient(to right, #fff, var(--to-color, #7c9cd6));
}

.shade-handle {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 26px;
  margin: -13px 0 0 -7px;
  border: 2px solid #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  cursor: grab;
}

.shade-preview { display: flex; flex-wrap: wrap; gap: 4px; }

.shade-chip {
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
}

/* Кружок цвета категории в дереве */
.tree-swatch {
  flex: none;
  width: 12px;
  height: 12px;
  border: 1px solid transparent;
  border-radius: 50%;
}

/* ── карточка в правой панели ──────────────────────────── */

.card-empty {
  margin: auto; /* по центру пустой панели */
  padding: 40px 12px;
  text-align: center;
  color: var(--muted);
}

.card-empty.error { color: var(--danger); }

.card-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

/* Реквизиты сжимаются первыми, позиции получают остаток высоты и свой скролл. */
.card-top { flex: 0 1 auto; overflow: auto; }
.card-items { flex: 1 1 auto; min-height: 120px; overflow: auto; }

.card-title { font-size: 16px; font-weight: 600; }

.card-name { margin: 8px 10px; font-weight: 600; }

/* Кнопка секции «Чек» — своя строка внизу карточки, сжиматься ей нечем */
.card-actions { flex: none; padding: 8px 10px; }

.kv {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 3px 10px;
  margin: 0;
  padding: 8px 10px;
}

.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

/* Своя секция карточки: не уезжает вместе с реквизитами, поэтому flex: none */
.cat-edit {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px;
}

.cat-edit select { width: 100%; }

/* Браузер печатает заголовки optgroup жирным курсивом — слишком тяжело для списка */
.cat-edit optgroup {
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
}

.cat-edit option { color: var(--text); }

.cat-note { font-size: 12px; line-height: 1.35; }
.cat-note.error { color: var(--danger); }

.card-section {
  flex: none;
  padding: 5px 10px;
  background: var(--head-bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.card-table thead th { position: sticky; top: 0; background: var(--surface); }
.card-table td, .card-table th { padding: 5px 10px; }
.card-table th:first-child, .card-table td:first-child { width: 28px; }

.detail-pane p { margin: 8px 10px; }

/* ── подвал таблицы ────────────────────────────────────── */

.table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  background: var(--head-bg);
  color: var(--muted);
  flex-wrap: wrap;
}

.state { padding: 24px 10px; text-align: center; color: var(--muted); }
.state.error { color: var(--danger); }

.is-loading { opacity: 0.6; }

@media (max-width: 1100px) {
  /* В одну колонку карточка уходит под список, поэтому странице возвращается прокрутка. */
  html, body { height: auto; overflow: auto; }
  .app { height: auto; min-height: 100vh; }
  .content { display: block; }
  .layout { display: block; }
  .list-pane { display: block; }
  .table-scroll { max-height: 70vh; }
  .detail-pane {
    display: block;
    min-height: 200px;
    margin-top: 12px;
    overflow: visible;
  }
  .card-top, .card-items { overflow: visible; }
  #f-q { width: 100%; }
  .chips-range { margin-left: 0; }
}

/* ── раздел «Анализ» ───────────────────────────────────── */

/* В анализе карточки справа нет — сетка становится одноколоночной */
.layout.single { grid-template-columns: minmax(0, 1fr); }

.analysis-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.analysis-pane[hidden] { display: none; }
.detail-pane[hidden] { display: none; }

.period { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 0 10px; }
.period-name { min-width: 92px; font-weight: 600; text-align: center; }

.analysis-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }

/* Плитки: одно число крупно — то, ради чего сюда зашли */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }

.tile { padding: 12px 14px; border: 1px solid var(--border); background: var(--surface); }
.tile-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.tile-value { margin: 4px 0 2px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.tile-note { font-size: 12px; color: var(--muted); }

.block { margin-top: 14px; padding: 12px 14px 14px; border: 1px solid var(--border); background: var(--surface); }
.block h2 { margin: 0; font-size: 14px; font-weight: 600; }
.block p { margin: 2px 0 12px; font-size: 12px; }

.chart-empty { padding: 28px 0; color: var(--muted); text-align: center; }
.chart-empty.error { color: var(--danger); }

.chart-scroll { overflow-x: auto; }
.chart { display: block; }

/* Сетка и оси — волосяные, сплошные, на шаг от фона: данные единственное громкое */
.chart .grid { stroke: #eef0f3; stroke-width: 1; }
.chart .axis { stroke: var(--border); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 10px; }
.chart .value { fill: var(--text); font-size: 10px; font-weight: 600; }
.chart .hit { fill: transparent; }
.chart .col:hover .bar { opacity: 0.82; }

/* Горизонтальные полосы: имя слева отдельной колонкой, значение справа */
/* Одна сетка на все строки: колонка значений тянется по самому длинному числу,
   поэтому «2 445 639 ₽ 50%» и «20 720 ₽ 0%» не делают полосы разной длины. */
.hbars { display: grid; grid-template-columns: minmax(120px, 190px) 1fr auto; align-items: center; gap: 7px 10px; }
.hbar { display: contents; }
.hbar-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.hbar-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.hbar-track { height: 14px; background: #f2f4f7; border-radius: 4px; }
.hbar-track { overflow: hidden; }
.hbar-value { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.hbar:hover .hbar-track { background: #e8ecf2; }


/* Полоса группы разбита на категории: зазор цвета фона вместо обводки */
.hbar-fill { display: flex; height: 100%; border-radius: 4px; overflow: hidden; }
.hbar-fill i { display: block; height: 100%; box-shadow: 1px 0 0 0 var(--surface); }
.hbar-fill i:last-child { box-shadow: none; }

/* Круговая: два кольца, группы внутри, категории снаружи */
.pie-wrap { display: flex; justify-content: center; padding: 4px 0 2px; }
.pie path { stroke: none; cursor: default; }
.pie path:hover { opacity: 0.82; }
.pie-label { font-size: 10px; font-weight: 600; pointer-events: none; }
.pie-total { fill: var(--text); font-size: 17px; font-weight: 600; }
.pie-total-note { fill: var(--muted); font-size: 10px; }

/* Подсказка: цифры, которые намеренно не подписаны на марках */
.chart-tip {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 9px;
  border-radius: 5px;
  background: #1f2328;
  color: #fff;
  font-size: 12px;
  pointer-events: none;
  white-space: nowrap;
}

.chart-tip .dim { color: #b9bec7; }