/* ============================================================================
   Eska Design System
   Источник стиля: https://1eska.ru (Aspro Allcorp2, кастом)
   Прототип и обоснование решений: research/design-system/README.md
   ============================================================================ */

/* ---------- 1. Шрифты (self-host, только latin+cyrillic — см. README) ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/inter-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/inter-400-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/inter-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/inter-500-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/inter-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/inter-600-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/montserrat-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/montserrat-600-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/montserrat-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/montserrat-700-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;
}

/* ---------- 2. Токены ---------------------------------------------------- */
:root {
  /* --- Бренд (взято с 1eska.ru) --- */
  --brand-50:  #e6fbf4;
  --brand-100: #c2f5e4;
  --brand-200: #8aebcd;
  --brand-300: #4bddb2;
  --brand-400: #17d29b;
  --brand-500: #00ca89;   /* основной акцент 1eska */
  --brand-600: #26a47b;   /* hover / нажатие */
  --brand-700: #1c7f60;
  --brand-900: #0a2a2a;   /* глубокий тёмно-зелёный, фон сайдбара/hero */

  /* --- Нейтральные (шкала Tailwind gray — её же использует 1eska.ru) --- */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* --- Статусные --- */
  --ok:    #16a34a;  --ok-bg:    #ddf8e5;  --ok-fg:   #15803d;
  --warn:  #f6a142;  --warn-bg:  #fff4e3;  --warn-fg: #b45309;
  --err:   #dc2626;  --err-bg:   #fee2e2;  --err-fg:  #dc2626;
  --info:  #2563eb;  --info-bg:  #e3f4ff;  --info-fg: #2563eb;
  --muted-accent: #7c3aed; --muted-accent-bg: #f9e8ff; --muted-accent-fg: #7c3aed;

  /* --- Семантика: светлая тема --- */
  --bg:            var(--gray-50);
  --bg-elevated:   #ffffff;
  --bg-sunken:     var(--gray-100);
  --bg-hover:      var(--gray-50);
  --surface-line:  var(--gray-200);
  --line-strong:   var(--gray-300);

  --fg:            var(--gray-900);
  --fg-secondary:  var(--gray-600);
  --fg-muted:      var(--gray-500);
  --fg-faint:      var(--gray-400);
  --fg-on-accent:  #ffffff;

  --accent:        var(--brand-500);
  --accent-hover:  var(--brand-600);
  --accent-soft:   var(--brand-50);
  --accent-fg:     var(--brand-700);

  --sidebar-bg:    var(--brand-900);
  --sidebar-fg:    #cfe6df;
  --sidebar-fg-active: #ffffff;

  /* --- Палитра графиков ---
     Проверено scripts/validate_palette.js (dataviz) против поверхности #ffffff:
     lightness band, chroma floor, CVD-разделение, normal-vision floor, контраст — ALL CHECKS PASS.
     Порядок фиксированный: серия N всегда берёт --c-N, цвет привязан к сущности,
     а не к позиции в отфильтрованном списке. 7-я серия → «Прочее» или small multiples. */
  --c-1: #0f9b74;  /* мятный — бренд, всегда «основная» серия */
  --c-2: #2563eb;
  --c-3: #c2740e;
  --c-4: #9333ea;
  --c-5: #be185d;
  --c-6: #0891b2;
  /* Последовательная шкала (одна тональность, светлая→тёмная) — тепловые карты, интенсивность */
  --seq-1: #3fcba3; --seq-2: #12b489; --seq-3: #0d9068; --seq-4: #0a6b4e; --seq-5: #064c37;
  /* Расходящаяся: два полюса + нейтральная середина (план/факт, отклонение) */
  --div-neg: #be185d; --div-mid: var(--gray-300); --div-pos: #0f9b74;
  /* Сетка и оси — рецессивные */
  --chart-grid: var(--surface-line);
  --chart-axis: var(--fg-faint);

  /* --- Типографика --- */
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --fs-xs:  11px;  --fs-sm: 13px;  --fs-md: 14px;
  --fs-lg:  16px;  --fs-xl: 20px;  --fs-2xl: 26px;  --fs-3xl: 34px;

  /* --- Скругления (1eska: 8/12/14/16, pill) --- */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 22px;  --r-pill: 999px;

  /* --- Тени (мягкие, как на 1eska.ru) --- */
  --sh-sm: 0 1px 2px rgba(10, 42, 42, .05);
  --sh-md: 0 4px 14px rgba(10, 42, 42, .06);
  --sh-lg: 0 12px 32px -8px rgba(10, 42, 42, .16);
  --sh-accent: 0 6px 16px rgba(0, 202, 137, .28);

  /* --- Отступы (шаг 4px) --- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  --shell-sidebar: 244px;
  --shell-sidebar-collapsed: 72px;
  --shell-topbar: 60px;
  --transition: 140ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 3. База ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 700; margin: 0; letter-spacing: -.01em; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p  { margin: 0 0 var(--s-3); }
a  { color: var(--accent-fg); text-decoration: none; }
a:hover { text-decoration: underline; }

.text-sm    { font-size: var(--fs-sm); }
.text-xs    { font-size: var(--fs-xs); }
.muted      { color: var(--fg-muted); }
.secondary  { color: var(--fg-secondary); }
.num        { font-variant-numeric: tabular-nums; }
.mono       { font-family: var(--font-mono); font-size: var(--fs-sm); }

/* ---------- 4. Оболочка (shell) ------------------------------------------ */
.shell {
  display: grid; grid-template-columns: var(--shell-sidebar) 1fr; min-height: 100vh;
  transition: grid-template-columns var(--transition);
  /* колонка сайдбара остаётся тёмной на всю высоту документа, а не только первого экрана */
  background: linear-gradient(to right, var(--sidebar-bg) 0 var(--shell-sidebar), var(--bg) var(--shell-sidebar));
}
body.sidebar-collapsed .shell {
  grid-template-columns: var(--shell-sidebar-collapsed) 1fr;
  background: linear-gradient(to right, var(--sidebar-bg) 0 var(--shell-sidebar-collapsed), var(--bg) var(--shell-sidebar-collapsed));
}

.sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  z-index: 50;
}
.sidebar__brand-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-5) var(--s-3) var(--s-4) var(--s-5);
}
.sidebar__brand {
  display: flex; align-items: center; gap: var(--s-3); min-width: 0;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg);
  color: #fff;
}
.sidebar__brand:hover { text-decoration: none; }
.sidebar__logo {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: var(--brand-500); color: var(--brand-900);
  display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700;
  flex-shrink: 0;
}
.sidebar__group { padding: var(--s-3) var(--s-3) 0; }
.sidebar__label {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.34); padding: var(--s-2) var(--s-3); font-weight: 600;
}
.nav-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 9px var(--s-3); border-radius: var(--r-sm);
  color: var(--sidebar-fg); font-size: var(--fs-sm); font-weight: 500;
  transition: background var(--transition), color var(--transition);
}
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.nav-item--active { background: rgba(0,202,137,.16); color: #fff; box-shadow: inset 2px 0 0 var(--brand-500); }
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .85; }
.sidebar__footer { margin-top: auto; padding: var(--s-4); border-top: 1px solid rgba(255,255,255,.08); }

.sidebar__collapse-btn { color: rgba(255,255,255,.6); flex-shrink: 0; }
.sidebar__collapse-btn:hover { color: #fff; background: rgba(255,255,255,.07); }
.sidebar__collapse-btn svg { transition: transform var(--transition); }
body.sidebar-collapsed .sidebar__collapse-btn svg { transform: rotate(180deg); }

/* Свёрнутый сайдбар (десктоп) — только иконки, ширина см. --shell-sidebar-collapsed */
body.sidebar-collapsed .sidebar__brand span,
body.sidebar-collapsed .sidebar__label,
body.sidebar-collapsed .nav-item span,
body.sidebar-collapsed .sidebar__user-info {
  display: none;
}
body.sidebar-collapsed .sidebar__brand-row {
  flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-4) var(--s-2);
}
body.sidebar-collapsed .nav-item { justify-content: center; padding-inline: 0; }
body.sidebar-collapsed .sidebar__footer .row { flex-direction: column; gap: var(--s-2); }

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: var(--shell-topbar);
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-6);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--surface-line);
  position: sticky; top: 0; z-index: 20;
}
.topbar__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); }
.topbar__spacer { flex: 1; }

.content { padding: var(--s-6); max-width: 1560px; width: 100%; }
.page-head { margin-bottom: var(--s-6); }
.page-head p { color: var(--fg-secondary); margin: var(--s-2) 0 0; }

/* Переключатель сайдбара на мобильных — скрыт на десктопе */
.nav-toggle { display: none; }
.sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 45;
  opacity: 0; pointer-events: none; transition: opacity var(--transition);
}
.sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* ---------- 5. Карточки -------------------------------------------------- */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--surface-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.card--pad   { padding: var(--s-5); }
.card--hover { transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); }
.card--hover:hover { box-shadow: var(--sh-md); transform: translateY(-2px); border-color: var(--brand-200); }
.card__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--surface-line);
}
.card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); }
.card__body { padding: var(--s-5); }

/* ---------- 6. Кнопки ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm);
  padding: 9px 16px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }

.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--sh-accent); }
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); color: #fff; }

.btn--secondary { background: var(--bg-elevated); color: var(--fg); border-color: var(--line-strong); }
.btn--secondary:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--fg-faint); }

.btn--ghost { background: transparent; color: var(--fg-secondary); }
.btn--ghost:hover:not(:disabled) { background: var(--bg-sunken); color: var(--fg); }

.btn--danger { background: var(--err); color: #fff; }
.btn--danger:hover:not(:disabled) { filter: brightness(.92); }

.btn--sm { padding: 5px 11px; font-size: var(--fs-xs); border-radius: 7px; }
.btn--lg { padding: 12px 24px; font-size: var(--fs-md); border-radius: var(--r-md); }
.btn--icon { padding: 8px; width: 34px; height: 34px; }

/* ---------- 7. Бейджи / чипы --------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
  background: var(--bg-sunken); color: var(--fg-secondary);
}
.badge--ok    { background: var(--ok-bg);    color: var(--ok-fg); }
.badge--warn  { background: var(--warn-bg);  color: var(--warn-fg); }
.badge--err   { background: var(--err-bg);   color: var(--err-fg); }
.badge--info  { background: var(--info-bg);  color: var(--info-fg); }
.badge--accent{ background: var(--accent-soft); color: var(--accent-fg); }
.badge--ai    { background: var(--muted-accent-bg); color: var(--muted-accent-fg); }
.badge__dot   { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- 8. Формы ----------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: var(--fs-xs); font-weight: 600; color: var(--fg-secondary); text-transform: uppercase; letter-spacing: .04em; }
.input, .select, .textarea {
  font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--fg);
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 8px 11px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
/* width:100% только внутри .field — сознательного layout-контейнера.
   Без .field элемент сохраняет свой обычный intrinsic/explicit размер,
   поэтому класс можно безопасно навешивать на старую разметку рядом с
   любым существующим w-32/min-w-[...] без изменения раскладки. */
.field .input, .field .select, .field .textarea { width: 100%; }
.input::placeholder, .textarea::placeholder { color: var(--fg-faint); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.select {
  appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 16px;
}
.textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.input-group { position: relative; }
.input-group .input { padding-left: 34px; }
.input-group svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--fg-faint); }

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.filters .field { min-width: 150px; }

/* Сегментированный переключатель — вместо голых радио/табов */
.segmented { display: inline-flex; background: var(--bg-sunken); border-radius: var(--r-sm); padding: 3px; gap: 2px; }
.segmented button {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 500; color: var(--fg-secondary);
  padding: 6px 13px; border-radius: 6px; transition: all var(--transition);
}
.segmented button[aria-selected="true"] { background: var(--bg-elevated); color: var(--fg); box-shadow: var(--sh-sm); font-weight: 600; }

/* Выпадающая панель (например, настройки сервиса из шестерёнки в топбаре) */
.dropdown { position: relative; display: inline-flex; }
.dropdown__panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
  width: 320px;
}
.dropdown__panel.hidden { display: none; }

/* Пикер периода (кнопка + панель с тремя годами месяцев, drag-выделение — паттерн 1С) */
.period-picker { position: relative; display: inline-flex; }
.period-picker__btn {
  display: flex; align-items: center; gap: var(--s-2);
  min-width: 220px; padding: 9px var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--bg-elevated); color: var(--fg);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer; transition: border-color var(--transition), background var(--transition);
}
.period-picker__btn:hover { background: var(--bg-sunken); }
.period-picker__btn svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--fg-muted); }
.period-picker__btn .period-picker__chevron { margin-left: auto; }

.period-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  width: auto; min-width: 620px; padding: var(--s-4);
  user-select: none;
}
.period-panel.hidden { display: none; }
/* Кнопка у правого края контейнера (см. period_picker(align='right')) —
   панель открывается влево от кнопки, а не вправо за пределы экрана. */
.period-panel--right { left: auto; right: 0; }

.period-panel__nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-3);
}
.period-panel__nav-btn {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: var(--r-pill); border: none; background: transparent;
  color: var(--fg-muted); font-size: 16px; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.period-panel__nav-btn:hover { background: var(--bg-sunken); color: var(--fg); }

.period-years { display: flex; gap: var(--s-5); flex: 1; justify-content: center; }
.period-year-col { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.period-year-label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--fg); }
.period-year-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }

.period-month-btn {
  min-width: 52px; padding: 7px 10px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent;
  font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--fg-secondary);
  cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.period-month-btn:hover { background: var(--bg-sunken); color: var(--fg); }
.period-month-btn.is-current { color: var(--accent-fg); font-weight: 600; border-color: var(--accent-soft); }
.period-month-btn.is-in-range { background: var(--accent-soft); color: var(--accent-fg); font-weight: 600; }
.period-month-btn.is-dragging { background: var(--accent); color: #06231c; font-weight: 600; }

.period-panel__presets {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2);
  padding: var(--s-3) 0; border-top: 1px solid var(--surface-line);
}
.period-panel__preset-btn {
  padding: 7px 0; border-radius: var(--r-sm); border: 1px solid var(--surface-line);
  background: var(--bg-elevated); color: var(--fg-secondary);
  font-family: var(--font-ui); font-size: var(--fs-xs); cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.period-panel__preset-btn:hover { background: var(--bg-sunken); color: var(--fg); }

.period-panel__custom {
  display: flex; align-items: center; gap: var(--s-2);
  padding-top: var(--s-3); border-top: 1px solid var(--surface-line);
}
.period-panel__custom .input { flex: 1; }

/* ---------- 9. Метрики (KPI) --------------------------------------------- */
.stat-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stat {
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  border-radius: var(--r-lg); padding: var(--s-4) var(--s-5);
  display: flex; flex-direction: column; gap: 6px;
}
.stat__label { font-size: var(--fs-xs); font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .05em; }
.stat__value { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat__foot  { font-size: var(--fs-xs); color: var(--fg-muted); display: flex; align-items: center; gap: 5px; }
.delta       { font-weight: 600; font-variant-numeric: tabular-nums; }
.delta--up   { color: var(--ok); }
.delta--down { color: var(--err); }
.stat--accent { background: linear-gradient(135deg, var(--brand-900), #10403a); border-color: transparent; color: #fff; }
.stat--accent .stat__label, .stat--accent .stat__foot { color: rgba(255,255,255,.6); }
.stat--accent .stat__value { color: var(--brand-400); }

/* ---------- 10. Таблицы -------------------------------------------------- */
/* :where() обнуляет вклад ".table"/"tbody" в специфичность — правила ниже
   действуют как ДЕФОЛТ и всегда проигрывают любому Tailwind-утилити-классу
   на том же элементе (text-right/text-center/py-2 и т.п., которых в старой
   разметке много). Без :where() ".table th{text-align:left}" (0,1,1) перебивал
   бы одиночный класс ".text-right" (0,1,0) и молча разворачивал бы выравнивание
   у числовых колонок в уже существующих таблицах. */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); }
:where(.table) { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
:where(.table) th {
  text-align: left; font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted);
  background: var(--bg-sunken); padding: 10px var(--s-4);
  border-bottom: 1px solid var(--surface-line); white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
:where(.table) td { padding: 11px var(--s-4); border-bottom: 1px solid var(--surface-line); vertical-align: middle; }
:where(.table) tbody tr { transition: background var(--transition); }
:where(.table) tbody tr:hover { background: var(--bg-hover); }
:where(.table) tbody tr:last-child td { border-bottom: 0; }
.table .num, .table .t-right { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .t-name { white-space: nowrap; font-weight: 600; }
.table--compact td { padding: 7px var(--s-4); }

/* ---------- 10b. Графики ------------------------------------------------- */
.chart { position: relative; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .grid line { stroke: var(--chart-grid); stroke-width: 1; }
.chart .axis text { fill: var(--fg-muted); font-size: 11px; font-family: var(--font-ui); }
.chart .axis line, .chart .axis path { stroke: var(--chart-axis); }
/* Текст носит текстовые токены, а не цвет серии */
.chart .value-label { fill: var(--fg-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .series-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* 2px «шов» цветом поверхности между соседними заливками */
.chart .bar { stroke: var(--bg-elevated); stroke-width: 2; }
.chart .dot { stroke: var(--bg-elevated); stroke-width: 2; }

.hbar { display: grid; grid-template-columns: 170px 1fr 64px; align-items: center; gap: var(--s-3); padding: 5px 0; }
.hbar__label { font-size: var(--fs-sm); color: var(--fg-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar__track { height: 9px; background: var(--bg-sunken); border-radius: var(--r-pill); overflow: hidden; }
.hbar__fill  { height: 100%; border-radius: var(--r-pill); transition: width 400ms cubic-bezier(.4,0,.2,1); }
.hbar__value { font-size: var(--fs-sm); color: var(--fg); text-align: right; font-weight: 600; }
.hbar:hover .hbar__label { color: var(--fg); }

.legend { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: var(--fs-xs); color: var(--fg-secondary); }
.legend__item { display: inline-flex; align-items: center; gap: 6px; }
.legend__swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

.chart-tip {
  position: absolute; pointer-events: none; opacity: 0; transform: translate(-50%, -120%);
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  border-radius: var(--r-sm); box-shadow: var(--sh-lg);
  padding: 8px 10px; font-size: var(--fs-xs); white-space: nowrap; z-index: 30;
  transition: opacity var(--transition);
}
.chart-tip[data-open="true"] { opacity: 1; }
.chart-tip b { font-family: var(--font-display); font-size: var(--fs-sm); display: block; margin-bottom: 4px; }
.chart-tip .row { gap: 6px; justify-content: space-between; }
.chart-tip .num { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- 11. Пустое состояние / загрузка ------------------------------ */
.empty { text-align: center; padding: var(--s-12) var(--s-6); color: var(--fg-muted); }
.empty svg { width: 42px; height: 42px; color: var(--fg-faint); margin-bottom: var(--s-3); }
.empty h4 { color: var(--fg); margin-bottom: var(--s-2); }

.skeleton { background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--surface-line) 50%, var(--bg-sunken) 75%);
  background-size: 200% 100%; animation: sk 1.4s infinite; border-radius: 6px; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.spinner { width: 18px; height: 18px; border: 2px solid var(--surface-line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 12. Прочее --------------------------------------------------- */
.alert { display: flex; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); font-size: var(--fs-sm); border: 1px solid transparent; }
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert--info { background: var(--info-bg); color: var(--info-fg); border-color: rgba(37,99,235,.2); }
.alert--ok   { background: var(--ok-bg);   color: var(--ok-fg); }
.alert--warn { background: var(--warn-bg); color: var(--warn-fg); }
.alert--err  { background: var(--err-bg);  color: var(--err-fg); }

/* overflow-x:auto — страницы с 6+ вкладками (напр. update_analysis.html)
   иначе переносили текст внутри вкладки на 2 строки вместо горизонтального
   скролла (flex-shrink сжимал кнопку раньше, чем текст мог себе позволить
   не завернуться). flex-shrink:0 на .tab держит вкладки в один ряд. */
.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--surface-line); overflow-x: auto; }
.tab {
  padding: 10px var(--s-4); font-size: var(--fs-sm); font-weight: 600; color: var(--fg-muted);
  cursor: pointer; background: none; white-space: nowrap; flex-shrink: 0;
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: var(--font-ui); transition: all var(--transition);
}
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { color: var(--accent-fg); border-bottom-color: var(--accent); }

.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-fg);
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.progress { height: 6px; background: var(--bg-sunken); border-radius: var(--r-pill); overflow: hidden; }
.progress__bar { height: 100%; background: var(--accent); border-radius: var(--r-pill); }

.divider { height: 1px; background: var(--surface-line); border: 0; margin: var(--s-5) 0; }

/* утилиты компоновки */
.row { display: flex; align-items: center; gap: var(--s-3); }
.row--between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-6 > * + * { margin-top: var(--s-6); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-4); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--s-4); }

/* ---------- 13. Главная — hero и карточки сервисов ----------------------- */
.hero {
  background: linear-gradient(135deg, var(--brand-900) 0%, #10403a 60%, #14524a 100%);
  border-radius: var(--r-xl); padding: 34px 38px; color: #fff;
  position: relative; overflow: hidden; margin-bottom: var(--s-6);
}
.hero::after {
  content: ''; position: absolute; right: -70px; top: -70px; width: 300px; height: 300px;
  border-radius: 50%; background: radial-gradient(circle, rgba(0,202,137,.35), transparent 68%);
}
.hero h1 { font-size: 32px; margin-bottom: 10px; position: relative; }
.hero p  { color: rgba(255,255,255,.72); max-width: 620px; position: relative; margin: 0; }
.hero__stats { display: flex; gap: 34px; margin-top: 26px; position: relative; flex-wrap: wrap; }
.hero__stat b { display: block; font-family: var(--font-display); font-size: 26px; color: var(--brand-400); }
.hero__stat span { font-size: 12px; color: rgba(255,255,255,.55); }

.svc { display: flex; flex-direction: column; padding: 20px; height: 100%; }
.svc__icon {
  width: 42px; height: 42px; border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent-fg);
  display: grid; place-items: center; margin-bottom: 14px;
}
.svc__icon svg { width: 21px; height: 21px; }
.svc__name { font-family: var(--font-display); font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.svc__desc { font-size: 13px; color: var(--fg-secondary); line-height: 1.5; flex: 1; margin-bottom: 14px; }
.svc__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.svc--off { opacity: .55; }
.svc-link { color: inherit; }
.svc-link:hover { text-decoration: none; }
.group-title { font-family: var(--font-display); font-size: 13px; font-weight: 700;
               text-transform: uppercase; letter-spacing: .07em; color: var(--fg-muted); margin: var(--s-8) 0 var(--s-4); }
.group-title:first-child { margin-top: 0; }

@media (max-width: 900px) {
  .shell, body.sidebar-collapsed .shell { grid-template-columns: 1fr; background: var(--bg); }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--shell-sidebar);
    transform: translateX(-100%); transition: transform var(--transition);
  }
  .sidebar.is-open { transform: translateX(0); box-shadow: var(--sh-lg); }
  .nav-toggle { display: inline-flex; }
  .sidebar__collapse-btn { display: none; }
  .content { padding: var(--s-4); }
}