/* ============ WB Analyzer — светлая тема (VALBER) ============ */

/* ============ Шрифт Inter (локально, frontend/fonts) ============
   Файлы с гугл-статики (v20, вариативные по весу — один woff2 покрывает 400 и 600,
   поэтому URL для обоих весов одинаковый). Разделение по unicode-range: латиница
   и кириллица грузятся независимо. font-display: swap — текст виден сразу. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-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('/fonts/inter-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('/fonts/inter-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('/fonts/inter-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;
}

:root {
  --bg: #f3f4f8;
  --card: #ffffff;
  --border: #e5e7f0;
  --border-strong: #d6d9e6;
  --text: #1c2030;
  --muted: #6c7390;
  --faint: #9aa0b5;
  --accent: #6c3fff;
  --accent-ink: #5226d9;
  --accent-soft: #f0ebff;
  --accent-border: #d9ccff;
  --success: #1a9e62;
  --success-soft: #e7f7ef;
  --success-border: #bfe6cd;
  --warn: #d97706;
  --warn-soft: #fdf3e3;
  --warn-border: #f0dcb4;
  --warn-ink: #b26a00;
  --danger: #dc2626;
  --danger-soft: #fdeaea;
  --danger-border: #f3c5c5;
  --danger-ink: #c0392b;
  --shadow: 0 1px 2px rgba(28, 32, 48, 0.05), 0 4px 16px rgba(28, 32, 48, 0.06);
  --radius: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ============ Оболочка 2.0: сайдбар + шапка экрана + контент ============
   Раскладка: .shell (flex) → .sidebar (256px, липкий, своя прокрутка) + .main (flex:1).
   В .main — .topbar (липкая шапка экрана: бургер, заголовок, действия экрана) и
   .container с вкладками. Пункты сайдбара — .nav-tab (класс и data-tab сохранены:
   их читают gotoTab() и smoke-тест). На экранах < 900px сайдбар уезжает за левый край
   и выезжает поверх контента по классу body.sidebar-open (бургер в шапке). */

:root { --sidebar-w: 256px; --topbar-h: 60px; }

.shell { display: flex; align-items: stretch; min-height: 100vh; }

/* --- Сайдбар --- */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--card);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  z-index: 60;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 20px 12px;
}
.sidebar-brand h1 {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  padding: 7px 12px;
  border-radius: 9px;
  letter-spacing: 0.01em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.sidebar-close {
  display: none;
  border: none;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.sidebar-close:hover { color: var(--text); background: var(--bg); }

.sidebar-nav { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 2px; }

.nav-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s;
}
.nav-tab:hover { color: var(--text); background: var(--bg); }
.nav-tab.active { color: var(--accent-ink); background: var(--accent-soft); font-weight: 600; }
.nav-tab .nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }
.nav-tab.active .nav-icon { opacity: 1; }
.nav-tab > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Группы с подпунктами (.nav-group: Реклама → Оптимизация рекламы; Товары и склад → Мои
   товары; Рынок и конкуренты → Оценка ниши / Разбор конкурентов / Запуск новинок / Готовые
   анализы). Шапка группы — пункт + шеврон; подпункты (.nav-sub) свёрнуты по умолчанию и
   плавно раскрываются у .nav-group.open (grid 0fr → 1fr; visibility прячет их от Tab и
   скринридера). Кто раскрыт — решает app.js (renderNavGroups). */
.nav-group { display: flex; flex-direction: column; }
.nav-group-head { display: flex; align-items: center; gap: 2px; }
.nav-group-head .nav-tab { flex: 1 1 auto; min-width: 0; padding-right: 6px; } /* место под шеврон */
.nav-chevron {
  flex: 0 0 auto;
  width: 26px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; padding: 0;
  color: var(--faint);
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nav-chevron svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.nav-chevron:hover { color: var(--text); background: var(--bg); }
.nav-chevron:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-group.open .nav-chevron svg { transform: rotate(90deg); }
.nav-group.open .nav-chevron { color: var(--muted); }

.nav-sub {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  margin: 0 0 0 21px;
  padding-left: 6px;
  border-left: 1px solid var(--border);
  transition: grid-template-rows 0.2s ease, margin 0.2s ease, visibility 0s linear 0.2s;
}
.nav-group.open .nav-sub {
  grid-template-rows: 1fr;
  visibility: visible;
  margin-bottom: 4px;
  transition: grid-template-rows 0.2s ease, margin 0.2s ease, visibility 0s;
}
.nav-sub-list { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1px; }
.nav-sub .nav-tab { font-size: 13px; padding: 7px 10px; border-radius: 7px; }
.nav-sub .nav-tab:focus-visible { outline-offset: -2px; } /* список обрезает overflow — обводка внутрь */
.nav-sub .nav-tab::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: 0.45; flex-shrink: 0;
}
.nav-sub .nav-tab.active::before { opacity: 1; }

/* Подпункт с подписью-хинтом (.has-hint): название + серая строка «что здесь» под ним;
   хинт может занять две строки, дальше обрезается */
.nav-sub .nav-tab.has-hint { align-items: flex-start; padding-top: 6px; padding-bottom: 6px; }
.nav-sub .nav-tab.has-hint::before { margin-top: 7px; }
.nav-tab .nav-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; white-space: normal; overflow: visible; }
.nav-tab .nav-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-tab .nav-hint {
  font-size: 11px; line-height: 1.25; font-weight: 400;
  color: var(--faint);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nav-tab.active .nav-hint { color: var(--accent-ink); opacity: 0.75; }

/* Низ сайдбара: компания, пользователь, «Пользователи» (admin), «Выйти» */
.sidebar-foot {
  margin-top: auto;
  padding: 12px 12px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-user { display: flex; flex-direction: column; gap: 6px; padding: 4px 12px 10px; min-width: 0; }
.header-company { font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-company:empty { display: none; }
.header-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent-soft);
  padding: 6px 10px;
  border-radius: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  align-self: flex-start;
  max-width: 100%;
}
.header-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  padding: 9px 12px;
  border-radius: 9px;
  transition: all 0.15s;
}
.header-logout .nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }
.header-logout:hover { color: var(--danger); background: var(--danger-soft); }
.header-logout:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Основная область --- */
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* Шапка экрана: заголовок слева, действия экрана справа (.page-head активной вкладки
   переносится сюда из вкладки — см. mountPageHead в app.js) */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  min-height: 60px;                 /* не через --topbar-h: её пишет JS по факту (иначе замкнётся) */
  padding: 9px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar-title { font-size: 20px; font-weight: 800; color: var(--text); margin-right: auto; white-space: nowrap; }
/* Действия — на одной строке с заголовком (flex-basis 0 не даёт блоку перенестись); длинная
   подпись #anMeta ужимается многоточием, кнопки не переносятся до 1200px */
.topbar-actions { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.topbar-actions:empty { display: none; }
.topbar .page-head { margin: 0; gap: 10px; justify-content: flex-end; flex-wrap: nowrap; min-width: 0; }
.topbar .page-head > h2 { display: none; }         /* заголовок уже в шапке (#pageTitle) */
.topbar .page-head > span { font-size: 13px; color: var(--muted); }
/* Действия дашборда: подпись «дней … последний …» + селект + кнопки */
.an-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
.topbar #anMeta { flex: 0 1 auto; min-width: 0; max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1200px) {
  .topbar .page-head, .an-head-actions { flex-wrap: wrap; }
}
/* Кнопки действий в шапке — компактнее обычных, чтобы ряд умещался в одну строку */
.topbar .page-head .btn { padding: 8px 14px; font-size: 13px; }
/* Селекты в шапке экрана — по содержимому, а не на всю ширину (глобальное select{width:100%}) */
.topbar select { width: auto; max-width: 240px; }

/* Бургер — только на узких экранах */
.burger {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border: 1px solid var(--border-strong);
  background: var(--card);
  border-radius: 9px;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}
.burger svg { width: 20px; height: 20px; }
.burger:hover { background: var(--bg); }

.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(28, 32, 48, 0.4);
  z-index: 55;
}

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 28px 40px; }


.tab-content { display: none; }
.tab-content.active { display: block; }

/* ============ Карточки ============ */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.card-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  margin-bottom: 16px;
}

/* Заголовок карточки + контрол справа (сортировка/переключатель) в одну строку */
.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.card-title-row .card-title { margin-bottom: 0; }
.card-title-row select {
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}
.page-head h2 { font-size: 20px; font-weight: 800; color: var(--text); }
.page-actions { display: flex; gap: 10px; }

/* ============ Формы ============ */

input, textarea, select {
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type="file"] { padding: 8px 14px; cursor: pointer; }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.form-row.three { grid-template-columns: 1fr 1fr 1fr; }
label { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; display: block; }

/* ============ Кнопки ============ */

.btn {
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); }
.btn-primary:disabled { background: var(--border-strong); color: var(--faint); cursor: not-allowed; }
.btn-secondary { background: var(--card); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.btn-danger { background: var(--card); color: var(--danger); border-color: var(--danger-border); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-sm { padding: 7px 13px; font-size: 13px; }

/* Микровзаимодействия: нажатие «продавливает» кнопку, фокус с клавиатуры виден */
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible, .nav-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Inline SVG-иконки в кнопках (ICONS в shared.js), рисуются currentColor */
.icon {
  width: 15px;
  height: 15px;
  vertical-align: -2.5px;
  flex-shrink: 0;
}

/* Кнопка ОК в danger-подтверждениях (showConfirmModal({danger:true})) — сплошная красная,
   в отличие от «мягких» btn-danger в списках */
.modal-actions .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.modal-actions .btn-danger:hover { background: var(--danger-ink); }

/* Карточка ошибки (замена inline color:var(--danger) в analyze/history) */
.error-card { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger-ink); }

.search-row { display: flex; gap: 12px; }
.search-row input { flex: 1; }

/* ============ Статус долгих операций (longOpStatus в shared.js) ============ */

.long-op {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 4px 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--accent-ink);
  font-weight: 500;
}
.long-op-time {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  flex-shrink: 0;
}

.spinner {
  width: 20px; height: 20px;
  border: 2.5px solid var(--accent-border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

/* Заглушка загрузки списков вкладок (listLoadingHtml в shared.js) */
.list-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 20px;
  color: var(--muted);
  font-size: 14px;
}

/* ============ Тосты (showToast в shared.js) ============ */

.toast-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  max-width: min(380px, calc(100vw - 40px));
  pointer-events: none; /* пустой контейнер не перекрывает клики */
}
.toast {
  pointer-events: auto;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(28, 32, 48, 0.14);
  cursor: pointer;
  animation: toast-in 0.25s ease;
  transition: opacity 0.4s;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
/* Крестик у error-тостов: они не автоскрываются — закрытие только по клику */
.toast-close { flex-shrink: 0; font-weight: 800; opacity: 0.55; }
.toast:hover .toast-close { opacity: 1; }
.toast-error { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger-ink); }
.toast-ok { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.toast-hide { opacity: 0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============ Результаты анализа ============ */

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.full { grid-column: 1 / -1; }

.stat-big {
  font-size: 38px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat-label { font-size: 13px; color: var(--muted); }
.summary { font-size: 14px; line-height: 1.7; color: var(--text); margin-top: 14px; }

.target-banner {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.target-banner .tb-label { font-size: 12px; color: var(--accent-ink); font-weight: 700; }
.target-banner .tb-value { font-size: 14px; color: var(--text); font-weight: 600; }

.view-banner {
  background: var(--warn-soft);
  border: 1px solid var(--warn-border);
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--warn);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Акцентный вариант баннера (сохранён в историю / доработать план) */
.view-banner.banner-accent {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-ink);
}

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border: 1px solid var(--accent-border);
  border-radius: 7px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 500;
}

.insight-box {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  padding: 14px;
  background: var(--bg);
  border-radius: 10px;
}

/* ============ Ценовые варианты ============ */

.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.price-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  position: relative;
}
.price-card.recommended {
  border-color: var(--accent);
  background: linear-gradient(0deg, var(--accent-soft), var(--card) 70%);
}
.price-card.recommended::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
}
.price-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.price-label { font-size: 11px; color: var(--faint); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.price-badge { font-size: 11px; font-weight: 700; background: var(--accent); color: #fff; padding: 2px 8px; border-radius: 5px; }
.price-value { font-size: 26px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.price-old { font-size: 14px; color: var(--faint); text-decoration: line-through; margin-left: 8px; font-weight: 500; }
.price-discount { font-size: 12px; color: var(--success); font-weight: 700; margin-left: 6px; }
.price-strategy { font-size: 13px; color: var(--accent-ink); font-weight: 600; margin-top: 4px; }
.price-reason { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.55; }

.corridor-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: 8px;
  display: inline-block;
}

.recommendation {
  margin-top: 16px; padding: 16px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.65;
}

.title-result { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 6px; line-height: 1.35; }
.title-len { font-size: 12px; color: var(--faint); }
/* Счётчик длины заголовка при превышении лимита WB (60 символов) */
.title-len.over, .cardgen-len.over { color: var(--danger); font-weight: 700; }
.description-text {
  font-size: 14px; line-height: 1.75; color: var(--text);
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
}

/* ============ Таблицы ============ */

/* Обёртка широких таблиц из JS-шаблонов: скролл внутри блока, а не всей страницы */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 560px; }

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-size: 11px;
  color: var(--faint);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
td {
  padding: 11px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--bg);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg); }
td a { color: var(--accent-ink); text-decoration: none; font-weight: 500; }
td a:hover { text-decoration: underline; }
.rating { color: var(--warn); font-weight: 600; }

.thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.thumb-empty { width: 48px; height: 48px; background: var(--bg); border-radius: 8px; border: 1px solid var(--border); }

/* ============ Мои товары ============ */

.group-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.group-count {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}
.sku-group { margin-bottom: 32px; }

.sku-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sku-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  transition: border-color 0.15s;
}
.sku-card:hover { border-color: var(--accent-border); }

.sku-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.sku-photo { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; transition: transform 0.12s, border-color 0.12s; }
.sku-photo:hover { transform: scale(1.04); border-color: var(--accent); }
/* В превью модалки фото фиксированного размера (контейнер не grid) */
#photoPreview .sku-photo { width: 64px; height: 64px; aspect-ratio: auto; }
.sku-photo-empty {
  width: 100%; height: 72px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px dashed var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px; font-size: 24px; color: var(--faint);
}

.sku-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.sku-article { font-size: 12px; color: var(--faint); margin-bottom: 8px; }
.sku-price { font-size: 20px; font-weight: 800; color: var(--accent-ink); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.sku-price .price-missing { color: var(--warn); font-size: 11px; font-weight: 600; }
/* Цена витрины WB рядом с РРЦ: разные вещи, поэтому и вид разный —
   РРЦ крупная (политика компании), витрина мелкая справочная (факт на сегодня). */
.sku-wbprice { font-size: 12px; color: var(--muted); margin: -6px 0 8px; font-variant-numeric: tabular-nums; }
.sku-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.sku-badge { font-size: 11px; font-weight: 600; background: var(--bg); color: var(--muted); padding: 3px 8px; border-radius: 5px; border: 1px solid var(--border); }
/* Дефицит: «нет остатка» — тревожный бейдж */
.sku-badge-danger { background: var(--danger-soft, #fdecea); color: var(--danger, #e53935); border-color: var(--danger-border, #f5c6c2); }

.feature-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.feature-chip {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
}

.sku-desc {
  font-size: 12px; color: var(--muted); line-height: 1.6;
  margin-bottom: 14px; padding: 10px;
  background: var(--bg); border-radius: 8px; flex: 1;
}
.sku-actions { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }

.photo-dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--bg);
}
.photo-dropzone:hover { border-color: var(--accent); background: var(--accent-soft); }

.empty-state { text-align: center; padding: 60px 20px; color: var(--faint); }
.empty-state .icon { font-size: 48px; margin-bottom: 16px; }
.empty-state p { font-size: 15px; line-height: 1.6; }

.import-row { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.import-row input { flex: 1; }

/* ============ История ============ */

.history-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  min-height: 38px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 20px;
}
.filter-chip .chip-close { cursor: pointer; font-weight: 800; opacity: 0.6; }
.filter-chip .chip-close:hover { opacity: 1; }

.history-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: var(--shadow);
}
.history-item:hover { border-color: var(--accent); }
.history-main { flex: 1; min-width: 0; }
.history-category { font-size: 15px; font-weight: 700; color: var(--text); }
.history-date { font-size: 12px; color: var(--faint); margin-top: 3px; }
.history-badges { display: flex; gap: 8px; align-items: center; flex-shrink: 0; flex-wrap: wrap; }
.history-badge {
  font-size: 12px; font-weight: 600;
  color: var(--accent-ink); background: var(--accent-soft);
  padding: 4px 10px; border-radius: 6px;
}
.history-badge.type-compare { color: var(--success); background: var(--success-soft); }
.history-badge.type-neutral { color: var(--muted); background: var(--bg); }
/* Состояние фоновой операции в списках (analysisStateBadge в shared.js) */
.history-badge.type-pending { color: var(--warn-ink); background: var(--warn-soft); }
.history-badge.type-error { color: var(--danger-ink); background: var(--danger-soft); }
/* На телефоне запись истории складывается в колонку: заголовок сверху, бейджи ниже */
@media (max-width: 720px) {
  .history-item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .history-badges { width: 100%; }
}

/* ============ Сравнение ============ */

.compare-winner {
  border: 1px solid var(--success);
  background: var(--success-soft);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}
.compare-winner .cw-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--success); margin-bottom: 4px; }
.compare-winner .cw-name { font-size: 18px; font-weight: 800; color: var(--text); }

.score-pill {
  display: inline-block;
  min-width: 44px;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}

.pros-cons { font-size: 12px; line-height: 1.6; }
.pros-cons .pro { color: var(--success); }
.pros-cons .con { color: var(--danger); }

/* ============ Модалки ============ */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(28, 32, 48, 0.45);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.modal-overlay.visible { display: flex; }
.modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px;
  width: 480px;
  max-width: 90vw;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(28, 32, 48, 0.18);
}
.modal h2 { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.modal p { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.modal-field { margin-bottom: 16px; }

.modal-actions { display: flex; gap: 12px; margin-top: 24px; }
.modal-actions .btn { flex: 1; }

.field-hint { font-size: 12px; color: var(--faint); margin-top: 8px; }

/* ============ Адаптив ============ */

@media (max-width: 900px) {
  .container { padding: 16px 14px 32px; }
  .grid, .sku-grid, .price-grid { grid-template-columns: 1fr; }
  .form-row, .form-row.three { grid-template-columns: 1fr; }

  /* Сайдбар за левым краем; выезжает поверх контента по body.sidebar-open */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: none;
    z-index: 70;
  }
  .sidebar-open .sidebar { transform: none; box-shadow: 0 12px 40px rgba(28, 32, 48, 0.25); }
  .sidebar-open .sidebar-backdrop { display: block; }
  .sidebar-open { overflow: hidden; }
  .sidebar-close { display: inline-flex; }
  .burger { display: inline-flex; }

  /* На телефоне шапка экрана не липнет: с действиями она высокая и съедала бы треть экрана;
     чипы разделов дашборда липнут к самому верху */
  .topbar { position: static; padding: 8px 14px; gap: 10px; }
  .an-subnav { top: 0; }
  .an-section { scroll-margin-top: 58px; }
  .topbar-title { font-size: 17px; }
  .topbar-actions { flex: 1 1 100%; justify-content: flex-start; }
  .topbar .page-head { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .topbar #anMeta { max-width: 100%; white-space: normal; flex-basis: 100%; }
  .an-head-actions { justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .topbar-title { font-size: 16px; }
  /* Сравнение стратегий не влезает в ряд — складываем в колонку */
  .strat-compare { flex-direction: column; }
  .strat-arrow { align-self: center; transform: rotate(90deg); }
}
/* === Переключатель режимов в модалке товара (вручную / из WB) === */
.sku-mode-tabs {
  display: flex;
  gap: 0;
  margin: 18px 0 4px;
  background: var(--bg);
  border-radius: 10px;
  padding: 4px;
}
.sku-mode-tab {
  flex: 1;
  padding: 8px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s;
  user-select: none;
}
.sku-mode-tab.active {
  background: var(--card);
  color: var(--accent-ink);
  font-weight: 600;
  box-shadow: var(--shadow);
}

/* Строка ввода артикула WB */
.wb-import-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 14px 0 6px;
  padding: 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
}
.wb-import-row input {
  flex: 1;
  min-width: 220px;
}
.wb-import-status {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--muted);
  min-height: 18px;
}
.wb-import-status.ok { color: var(--success); }
.wb-import-status.err { color: var(--danger); }

/* === Лайтбокс просмотра фото === */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 34, 0.88);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.lightbox.visible { display: flex; }
.lightbox__img {
  max-width: 86vw;
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  object-fit: contain;
  background: #fff;
}
.lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }
.lightbox__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 14px;
  border-radius: 20px;
}
.lightbox__nav.hidden, .lightbox__counter.hidden { display: none; }

/* Кнопки выбора при дубле артикула */
.wb-dup-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* === Оптимизация рекламы (sales): форма === */
.sales-form { display: flex; flex-direction: column; gap: 16px; }

/* Подзаголовки-группы длинных форм («1. Модели», «2. Бюджет и сроки», «3. Реклама») */
.form-group-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent-ink);
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.sales-field { display: flex; flex-direction: column; gap: 6px; }
.sales-field label { font-size: 13px; color: var(--muted); }
.budget-control { display: flex; align-items: center; gap: 14px; }
.budget-control input[type="range"] { flex: 1; accent-color: var(--accent); }
.sales-check { flex-direction: row !important; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 4px; cursor: pointer; }
.sales-check input { width: auto; }
.sales-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.sales-status { font-size: 13px; color: var(--muted); }
.sales-status.err { color: var(--danger); }

/* === Оптимизация рекламы (sales): рендер === */
.verdict { padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.verdict-go { background: var(--success-soft); color: var(--success); }
.verdict-fix { background: var(--warn-soft); color: var(--warn-ink); }
.verdict-stop { background: var(--danger-soft); color: var(--danger-ink); }

.strat-compare { display: flex; align-items: stretch; gap: 16px; margin: 12px 0; }
.strat-col { flex: 1; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--border); }
.strat-old { background: var(--danger-soft); }
.strat-new { background: var(--success-soft); }
.strat-label { font-weight: 700; margin-bottom: 8px; }
.strat-row { font-size: 13px; color: var(--muted); margin: 3px 0; }
.strat-row b { color: var(--text); }
.strat-arrow { display: flex; align-items: center; font-size: 24px; color: var(--accent); }

.budget-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 8px; }
.budget-card { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.budget-reserve { border-style: dashed; }
.budget-media { background: var(--accent-soft); border-color: var(--accent-border); }
.budget-sku { font-weight: 600; margin-bottom: 6px; }
.budget-amount { font-size: 20px; font-weight: 800; color: var(--accent-ink); }
.budget-share { font-size: 13px; color: var(--muted); font-weight: 600; }
.budget-meta { font-size: 12px; color: var(--muted); margin-top: 6px; }
.budget-reason { font-size: 12px; color: var(--text); margin-top: 6px; }

.fix-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.fix-item:last-child { border-bottom: none; }
.econ-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 10px; }
.stat-mid { font-size: 18px; font-weight: 700; color: var(--text); }

/* === Пикер анализов WB в форме продаж === */
.wb-picker { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.wb-pick-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; }
.wb-pick-row:last-child { border-bottom: none; }
.wb-pick-row:hover { background: var(--accent-soft); }
.wb-pick-row input { width: auto; flex-shrink: 0; }
.wb-pick-name { flex: 1; color: var(--text); }
.wb-pick-meta { font-size: 11px; color: var(--muted); white-space: nowrap; }
.wb-picker-count { font-size: 12px; color: var(--accent-ink); margin-top: 6px; }
.wb-pick-sub { color: var(--muted); font-weight: 400; font-size: 12px; }

/* === Готовые карточки для менеджера === */
.cardgen { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; background: var(--bg); }
.cardgen-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cardgen-sku { font-weight: 700; font-size: 15px; }
.cardgen-prio { font-size: 11px; padding: 2px 8px; border-radius: 12px; }
.cardgen-prio-hi { background: var(--danger-soft); color: var(--danger-ink); }
.cardgen-prio-mid { background: var(--warn-soft); color: var(--warn-ink); }
.cardgen-reason { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.cardgen-field { margin-bottom: 12px; }
.cardgen-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.cardgen-len { color: var(--faint); }
.cardgen-copy { margin-left: auto; font-size: 11px; padding: 2px 10px; border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--accent-ink); border-radius: 12px; cursor: pointer; }
.cardgen-copy:hover { background: var(--accent); color: #fff; }
.cardgen-title { font-size: 15px; font-weight: 600; color: var(--text); padding: 8px 12px; background: var(--card); border-radius: 8px; border: 1px solid var(--border); }
.cardgen-desc { font-size: 13px; line-height: 1.55; color: var(--text); padding: 10px 12px; background: var(--card); border-radius: 8px; border: 1px solid var(--border); white-space: pre-wrap; }
.cardgen-bullets { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }

/* === Выпадающее меню скачивания PDF === */
.pdf-menu-wrap { position: relative; display: inline-block; }
.pdf-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20,22,34,0.15);
  z-index: 100;
  min-width: 180px;
  overflow: hidden;
}
.pdf-menu.open { display: block; }
.pdf-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.pdf-menu button:hover { background: var(--accent-soft); color: var(--accent-ink); }
.pdf-menu button + button { border-top: 1px solid var(--border); }

/* Выбор формата кампании */
.format-choice { display: flex; flex-direction: column; gap: 8px; }
.format-choice label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; font-weight: 400; }
.format-choice input { width: auto; }
/* Аналитика — дашборд */
.an-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.an-stat { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.an-stat-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.an-stat-value { font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.an-stat-sub { font-size: 12px; margin-top: 6px; min-height: 16px; }
.an-delta { font-weight: 700; font-size: 12px; }
.an-note { font-size: 12px; color: var(--faint); margin-top: 12px; }
/* дозревание свежего дня (meta.maturity): жёлтая плашка ПОСЛЕ .an-note — тот же элемент, цвет должен победить */
.an-note.an-maturity { background: #fff8e1; border: 1px solid #f5d76e; border-radius: 8px; padding: 8px 12px; color: #6b4e00; margin-top: 8px; font-size: 13px; }

/* Разделы дашборда: чипы-фильтры (показать один раздел / все) + заголовки-линейки.
   Липнут ПОД шапкой экрана (.topbar sticky, высота в --topbar-h — её пишет app.js).
   Числа в таблицах дашборда — табличной ширины, столбики не «пляшут». */
.an-subnav {
  position: sticky; top: var(--topbar-h, 60px); z-index: 30;
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 2px; margin: 0 -2px 14px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
}
.an-subnav a {
  font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none;
  padding: 7px 16px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(20, 24, 50, 0.04);
  transition: color .15s, background .15s, border-color .15s;
}
.an-subnav a:hover { color: var(--accent-ink); border-color: var(--accent-border); }
.an-subnav a.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.an-section { scroll-margin-top: calc(var(--topbar-h, 60px) + 58px); }
.an-sec-head {
  display: flex; align-items: center; gap: 12px;
  margin: 26px 0 14px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint);
}
.an-section:first-of-type .an-sec-head { margin-top: 4px; }
.an-sec-head::after { content: ''; flex: 1; height: 1px; background: var(--border); }
#tab-analytics table td, #tab-analytics table th { font-variant-numeric: tabular-nums; }

/* Юнит-экономика финансов: маржа окрашена статусно (плюс/минус), не серийно */
.an-fin-pos { color: #1a9e62; font-weight: 700; }
.an-fin-neg { color: #e53935; font-weight: 700; }

/* Заголовок карточки с управлением справа (переключатель/селект) */
.an-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.an-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.an-tg { border: none; background: var(--card); color: var(--muted); font-size: 12px; font-weight: 600; padding: 5px 12px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.an-tg.active { background: var(--accent); color: #fff; }
.an-select { border: 1px solid var(--border-strong); border-radius: 8px; padding: 5px 10px; font-size: 13px; font-weight: 600; color: var(--text); background: var(--card); cursor: pointer; text-transform: none; letter-spacing: 0; }

/* Общий вывод агента */
.an-overall { background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 20px; line-height: 1.5; }
.an-overall-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-ink); margin-bottom: 8px; }

/* Карточки «вывод по товару» */
.an-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.an-product { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--bg); }
.an-product-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.an-product-name { font-weight: 700; font-size: 15px; }
.an-product-nm { font-size: 11px; color: var(--faint); white-space: nowrap; }
.an-product-metrics { display: flex; flex-wrap: wrap; gap: 10px 14px; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.an-product-metrics b { color: var(--text); }
/* Вторая строка метрик — воронка (переходы → корзины → заказы): чуть мельче и приглушённее */
.an-product-funnel { font-size: 12px; color: var(--faint); margin-top: -4px; }
.an-product-funnel b { color: var(--muted); }
.an-product-note { font-size: 13px; line-height: 1.45; color: var(--text); border-top: 1px dashed var(--border); padding-top: 10px; }
.an-product-note.muted { color: var(--faint); font-style: italic; }

/* Таблица товаров дашборда: поиск/фильтр, сортируемые заголовки, раскрывашки, ABC */
.an-prod-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.an-prod-controls input[type="search"] {
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 6px 10px;
  font-size: 13px; min-width: 220px; background: var(--card); color: var(--text);
}
.an-sort-th { cursor: pointer; user-select: none; white-space: nowrap; }
.an-sort-th:hover, .an-sort-th.active { color: var(--text); }
.an-prod-row { cursor: pointer; }
.an-prod-row:hover td { background: var(--bg); }
.an-prod-detail td { background: var(--bg); font-size: 12.5px; }
.an-abc-badge { display: inline-block; min-width: 22px; text-align: center; padding: 2px 6px; border-radius: 6px; font-size: 11px; font-weight: 800; }
.an-abc-a { background: rgba(12, 163, 12, 0.12); color: #006300; }
.an-abc-b { background: rgba(42, 120, 214, 0.12); color: #1c5cab; }
.an-abc-c { background: rgba(137, 135, 129, 0.15); color: var(--muted); }
.an-link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 13px; font-weight: 600; padding: 6px 0; text-transform: none; letter-spacing: 0; }
.an-link:hover { text-decoration: underline; }

/* Контроль качества (агент-босс) */
.qc-banner { border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; border: 1px solid; }
.qc-banner.qc-ok { background: var(--success-soft); border-color: var(--success-border); }
.qc-banner.qc-warn { background: var(--warn-soft); border-color: var(--warn-border); }
.qc-banner.qc-err { background: var(--danger-soft); border-color: var(--danger-border); }
.qc-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14px; }
.qc-score { font-size: 13px; color: var(--muted); }
.qc-sum { font-size: 13px; line-height: 1.5; margin-top: 6px; }
.qc-issues { margin: 8px 0 0; padding-left: 20px; }
.qc-issues li { font-size: 13px; line-height: 1.5; margin-bottom: 4px; }
.qc-issues li.qc-error { color: var(--danger); }
.qc-issues li.qc-warning { color: var(--warn); }

/* Реклама — анализ и рекомендации */
.adv-health { font-size: 14px; line-height: 1.5; background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; }
.adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; }
.adv-block { margin-bottom: 12px; }
.adv-h { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.adv-h.good { color: var(--success); }
.adv-h.bad { color: var(--danger); }
.adv-h.act { color: var(--accent-ink); }
.adv-h.scale { color: var(--warn); }
.adv-list { margin: 0; padding-left: 20px; }
.adv-list li { font-size: 13px; line-height: 1.5; margin-bottom: 6px; }
@media (max-width: 720px) { .adv-grid { grid-template-columns: 1fr; } }

/* === Роли пользователей: у viewer скрываем мутирующие элементы (класс admin-only
   ставится в index.html и JS-шаблонах, role-viewer вешает auth.js на body) === */
.role-viewer .admin-only { display: none !important; }

/* Обратный класс: блоки только для viewer (например заглушка на «Анализе ниши»).
   Без !important — inline style.display из JS (enterReportView) должен побеждать. */
.viewer-only { display: none; }
.role-viewer .viewer-only { display: block; }

/* QC-баннер: проверка качества не выполнена (verdict: 'skipped') — серый, см. shared.js */
.qc-banner.qc-skipped { background: var(--bg); border-color: var(--border); color: var(--muted); }

/* Вкладка «Пользователи»: блок с кредами созданного пользователя (users.js) */
.invite-result { margin-top: 14px; padding: 12px 16px; border: 1px solid var(--accent-border); background: var(--accent-soft); border-radius: 10px; font-size: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ============ Экран входа ============ */

#authScreen {
  display: none;
  position: fixed;
  inset: 0;
  /* Лёгкие пятна акцентного тона поверх --bg — экран входа не выглядит голым */
  background:
    radial-gradient(640px 420px at 18% 12%, rgba(108, 63, 255, 0.09), transparent 70%),
    radial-gradient(560px 400px at 84% 82%, rgba(108, 63, 255, 0.06), transparent 70%),
    var(--bg);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.auth-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px;
  width: 420px;
  max-width: 90vw;
  box-shadow: var(--shadow);
}

.auth-logo {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
.auth-logo span { color: var(--accent); }

.auth-subtitle {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 10px;
}

/* Строка ценности под подзаголовком (index.html, универсальный текст без брендов) */
.auth-value {
  font-size: 13px;
  line-height: 1.5;
  color: var(--faint);
  margin-bottom: 28px;
}

.auth-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}

.auth-field { margin-bottom: 14px; }

/* Поле пароля с кнопкой-глазом (togglePasswordVisibility в auth.js) */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 6px;
  border-radius: 8px;
  color: var(--muted);
}
.pw-toggle:hover { background: var(--accent-soft); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.auth-error {
  color: var(--danger);
  font-size: 13px;
  margin-top: 8px;
  min-height: 20px;
}

/* Ссылка-переключатель «вход ↔ регистрация» (видна только при открытой регистрации) */
.auth-switch {
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.auth-switch a { color: var(--accent); text-decoration: none; font-weight: 600; }
.auth-switch a:hover { text-decoration: underline; }

/* Контейнер виджета Turnstile: пустой (капча выключена) места не занимает */
.auth-captcha { margin-top: 4px; }
.auth-captcha:empty { display: none; }

/* ============ Мои товары: поиск/фильтр/пагинация (skus.js) ============ */

.sku-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; }
.sku-toolbar input[type="text"], .sku-toolbar input[type="search"] { flex: 1 1 220px; min-width: 200px; }
.sku-toolbar select { width: auto; max-width: 340px; }
.sku-toolbar-count { font-size: 13px; color: var(--muted); white-space: nowrap; margin-left: auto; }

.sku-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 24px; }
.sku-pager-info { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Результат массового импорта / загрузки шаблона в модалках */
.bulk-result { margin-top: 12px; font-size: 13px; line-height: 1.55; padding: 10px 14px; border-radius: 10px; border: 1px solid; }
.bulk-result.ok { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.bulk-result.warn { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn-ink); }
.bulk-result.err { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger-ink); }
.bulk-errors { margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: var(--danger-ink); }
.bulk-errors li { margin-bottom: 3px; }
.bulk-errors-more { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Инструкция «какие выгрузки грузить» в модалке создания карточек из ВБ */
.import-paths { margin: 6px 0 12px; padding-left: 18px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.import-paths li { margin-bottom: 8px; }
.import-paths b { color: var(--text); font-weight: 600; }
.import-paths .import-path { color: var(--faint); font-size: 11px; }
.import-hint { margin: 0 0 14px; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* Блок «Распознанные файлы» в результате создания карточек */
.bulk-recognized { margin-top: 10px; }
.bulk-recognized-title { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; }

/* ============ Отчёты: карточки шаблонов и модалка сборки (reports.js) ============ */

.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tpl-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; }
.tpl-name { font-size: 15px; font-weight: 700; color: var(--text); }
.tpl-purpose { font-size: 13px; color: var(--muted); line-height: 1.5; }
.tpl-meta { font-size: 11px; color: var(--faint); }
.tpl-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; }
.report-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; max-height: 170px; overflow-y: auto; }

/* ============ Onboarding-чеклист «С чего начать» (renderOnboarding в analyze.js) ============ */

.onb-card { position: relative; padding-right: 48px; }
.onb-close {
  position: absolute;
  top: 14px;
  right: 14px;
  border: none;
  background: none;
  color: var(--faint);
  font-size: 15px;
  line-height: 1;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
}
.onb-close:hover { color: var(--danger); background: var(--danger-soft); }
.onb-step { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.onb-check {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  color: var(--muted);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}
.onb-step.done .onb-check {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.onb-link {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.onb-link:hover { color: var(--accent-ink); text-decoration: underline; }
.onb-step.done .onb-link { color: var(--muted); text-decoration: line-through; }
.onb-step.done .onb-link:hover { text-decoration: line-through underline; }

/* ============ Печать (Ctrl+P): только содержимое отчёта ============ */

@media print {
  header,
  .sidebar,
  .topbar,
  .sidebar-backdrop,
  .an-subnav,
  .nav-tab,
  .page-actions,
  .btn,
  .toast-container,
  .modal-overlay,
  .lightbox,
  .pdf-menu,
  .cardgen-copy,
  .sku-pager,
  .onb-card,
  #onboardingCard,
  .history-controls,
  .sales-actions,
  .long-op { display: none !important; }

  body { background: #fff; }
  .container { max-width: none; padding: 0; }

  /* Карточки без теней, с серой рамкой; не рвём карточку между страницами */
  .card, .history-item, .sku-card, .an-stat, .budget-card, .tpl-card {
    box-shadow: none !important;
    border: 1px solid #bbb;
    break-inside: avoid;
  }

  /* Отчётные блоки — на всю ширину в одну колонку */
  .grid, .sku-grid, .price-grid, .an-products, .budget-grid, .adv-grid, .tpl-grid {
    display: block;
  }
  .grid > .card, .price-card, .an-product, .budget-card, .tpl-card { margin-bottom: 12px; }
  .table-scroll { overflow: visible; }
  .table-scroll table { min-width: 0; }
  .wb-picker { max-height: none; overflow: visible; }
}

/* ============ Экраны «Отзывы и вопросы» (rv-*, frontend/js/reviews.js) и
   «Данные и интеграции» (src-*, frontend/js/sources.js) — оболочка 2.0 ============ */

/* --- Отзывы и вопросы --- */
.rv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.rv-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-chip {
  font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none;
  padding: 7px 16px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(20, 24, 50, 0.04);
  transition: color .15s, background .15s, border-color .15s;
}
.rv-chip:hover { color: var(--accent-ink); border-color: var(--accent-border); }
.rv-chip.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.rv-toolbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.rv-warn { color: var(--warn-ink); background: var(--warn-soft); border: 1px solid var(--warn-border); border-radius: 6px; padding: 3px 8px; }
.rv-gen { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-ink); font-weight: 600; }
.rv-gen .spinner { width: 14px; height: 14px; border-width: 2px; }
#rvList.rv-dim { opacity: .55; pointer-events: none; }

.rv-item { padding: 18px 20px; }
.rv-item-done { border-color: var(--success-border); }
.rv-head { display: flex; align-items: flex-start; gap: 12px; }
.rv-check { display: flex; align-items: center; padding-top: 2px; cursor: pointer; }
.rv-check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; margin: 0; }
.rv-prod { flex: 1; min-width: 0; }
.rv-prod-name { font-size: 15px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.rv-prod-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.rv-when { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; color: var(--faint); white-space: nowrap; flex-shrink: 0; }
.rv-kind { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-ink); }
.rv-user { color: var(--muted); }
.rv-body { margin: 12px 0 0 28px; font-size: 14px; line-height: 1.55; }
.rv-rating { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.rv-stars { font-size: 16px; letter-spacing: 1px; line-height: 1; }
.rv-stars.good { color: #e0a100; }
.rv-stars.mid { color: var(--warn); }
.rv-stars.bad { color: var(--danger); }
.rv-flag { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; }
.rv-flag.warn { color: var(--warn-ink); background: var(--warn-soft); border-color: var(--warn-border); }
.rv-text { color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-text-none { color: var(--faint); font-style: italic; }
.rv-pc { margin-top: 4px; overflow-wrap: anywhere; }
.rv-pc span { font-weight: 700; }
.rv-pros span { color: var(--success); }
.rv-cons span { color: var(--danger-ink); }
.rv-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rv-photo { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: zoom-in; background: var(--bg); }
.rv-video { position: relative; display: inline-block; margin-top: 10px; }
.rv-video .rv-photo { cursor: default; }
.rv-video-tag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; margin-top: 8px; }
.rv-video .rv-video-tag { position: absolute; left: 6px; bottom: 6px; margin: 0; background: rgba(28, 32, 48, .75); color: #fff; border-color: transparent; }

.rv-answer { margin: 14px 0 0 28px; padding-top: 12px; border-top: 1px dashed var(--border); }
.rv-answer-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 8px; }
.rv-badge { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 3px 9px; border-radius: 6px; max-width: 100%; overflow-wrap: anywhere; }
.rv-badge.ok { color: var(--success); background: var(--success-soft); border: 1px solid var(--success-border); }
.rv-badge.err { color: var(--danger-ink); background: var(--danger-soft); border: 1px solid var(--danger-border); }
.rv-badge.muted { color: var(--muted); background: var(--bg); border: 1px solid var(--border); }
.rv-none { font-size: 13px; color: var(--faint); font-style: italic; }
.rv-ta { min-height: 88px; resize: vertical; font-size: 14px; line-height: 1.5; }
.rv-ta[readonly] { background: var(--bg); }
.rv-pub-text { font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--success-soft); border: 1px solid var(--success-border); border-radius: 10px; padding: 10px 14px; }
.rv-note { font-size: 12px; color: var(--muted); margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.rv-len { font-size: 12px; color: var(--faint); margin-right: auto; font-variant-numeric: tabular-nums; }

.rv-empty { text-align: center; padding: 48px 20px; }
.rv-empty-icon { font-size: 40px; margin-bottom: 10px; }
.rv-empty-text { font-size: 17px; font-weight: 700; color: var(--text); }
.rv-empty-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.rv-off p { font-size: 14px; line-height: 1.6; color: var(--text); margin-top: 10px; }
.rv-off-title { font-size: 16px; font-weight: 700; color: var(--text); }
.rv-off-reason { color: var(--warn-ink) !important; background: var(--warn-soft); border: 1px solid var(--warn-border); border-radius: 8px; padding: 8px 12px; font-size: 13px !important; }
.rv-link { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.rv-link:hover { text-decoration: underline; }
/* Текст ответа в модалке подтверждения публикации — с переносами строк, длинный — с прокруткой */
#confirmModalText { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50vh; overflow: auto; }

@media (max-width: 720px) {
  .rv-head { flex-wrap: wrap; }
  .rv-when { flex-direction: row; gap: 8px; width: 100%; align-items: center; white-space: normal; padding-left: 28px; }
  .rv-body, .rv-answer { margin-left: 0; }
}

/* --- Данные и интеграции --- */
.src-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.src-grid .card { margin-bottom: 0; }
.src-grid + .card { margin-top: 20px; }
@media (max-width: 1000px) { .src-grid { grid-template-columns: 1fr; } }
.src-state { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.src-state.ok { color: var(--success); background: var(--success-soft); border: 1px solid var(--success-border); }
.src-state.off { color: var(--muted); background: var(--bg); border: 1px solid var(--border); }
.src-lead { font-size: 14px; line-height: 1.55; color: var(--text); margin-bottom: 14px; }
.src-muted { font-size: 12px; color: var(--muted); line-height: 1.5; }
.src-rows { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; font-size: 14px; align-items: baseline; margin-bottom: 16px; }
.src-row { display: contents; }
.src-k { color: var(--muted); font-size: 13px; white-space: nowrap; }
.src-v { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.src-tag { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; }
.src-tag.ok { color: var(--success); background: var(--success-soft); border-color: var(--success-border); }
.src-tag.warn { color: var(--warn-ink); background: var(--warn-soft); border-color: var(--warn-border); }
.src-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.src-chip { font-size: 12px; font-weight: 500; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 7px; padding: 3px 9px; }
.src-plates { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.src-plate { display: block; font-size: 13px; line-height: 1.5; border-radius: 8px; padding: 8px 12px; }
.src-plate.warn { color: var(--warn-ink); background: var(--warn-soft); border: 1px solid var(--warn-border); }
.src-plate.danger { color: var(--danger-ink); background: var(--danger-soft); border: 1px solid var(--danger-border); }
.src-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.src-how { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.55; }
.src-how-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.src-how ol, .src-how ul { padding-left: 20px; margin: 0 0 8px; }
.src-how li { margin-bottom: 6px; }
.src-how li:last-child { margin-bottom: 0; }
.src-how code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }
.src-how .src-muted { margin-top: 8px; }
.src-link { font-size: 13px; font-weight: 600; color: var(--accent-ink); text-decoration: none; }
.src-link:hover { text-decoration: underline; }

/* ============ Мои товары 2.0: плашки, чипы, таблица-реестр, панель товара ============ */
/* Плашки-счётчики над списком: кнопки (клик = фильтр), «активная» — с акцентной рамкой */
.sku-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin-bottom: 14px; }
.sku-plate {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 96px; padding: 10px 14px; cursor: pointer; text-align: left;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
  font-family: inherit; color: var(--text); transition: border-color .15s, background .15s;
}
.sku-plate:hover { border-color: var(--accent-border); }
.sku-plate:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sku-plate.active { border-color: var(--accent); background: var(--accent-soft); }
.sku-plate.warn .sku-plate-val { color: var(--warn-ink); }
.sku-plate.danger .sku-plate-val { color: var(--danger-ink); }
.sku-plate.na { cursor: default; opacity: .6; }
.sku-plate.na .sku-plate-val { color: var(--faint); }
.sku-plate-val { font-size: 20px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.sku-plate-label { font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.sku-plate-period { align-self: center; margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Переключатель вида Таблица | Карточки */
.sku-view-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 9px; overflow: hidden; }
.sku-view-btn {
  padding: 8px 12px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  background: var(--card); color: var(--muted); border: none; border-right: 1px solid var(--border-strong);
}
.sku-view-btn:last-child { border-right: none; }
.sku-view-btn:hover { color: var(--text); background: var(--bg); }
.sku-view-btn.active { background: var(--accent-soft); color: var(--accent-ink); }
.sku-view-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Фильтр-чипы «где проблема» под тулбаром (мультивыбор) */
.sku-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -8px 0 14px; }
.sku-chip {
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 5px 11px; border-radius: 999px;
  background: var(--card); color: var(--muted); border: 1px solid var(--border-strong);
  transition: border-color .15s, background .15s, color .15s;
}
.sku-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.sku-chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.sku-chip:disabled { opacity: .5; cursor: default; }
.sku-chip:disabled:hover { border-color: var(--border-strong); color: var(--muted); }
.sku-chip-clear { border-style: dashed; }
.sku-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Таблица-реестр: своя вертикальная прокрутка с липкой шапкой (внутри overflow-x:auto
   sticky относительно страницы не работает — поэтому прокрутка внутри контейнера) */
.sku-table-note { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.sku-table-wrap.card { padding: 0; overflow: auto; max-height: calc(100vh - var(--topbar-h, 60px) - 40px); }
.sku-table { width: 100%; min-width: 1120px; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.sku-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--card);
  padding: 10px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 -1px 0 var(--border);
  font-size: 10.5px; letter-spacing: 0.03em;
}
.sku-table th.sku-th-sort { cursor: pointer; user-select: none; }
.sku-table th.sku-th-sort:hover { color: var(--accent-ink); }
.sku-table th.sku-th-sort.active { color: var(--accent-ink); }
.sku-table th.sku-th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sku-sort-mark { font-size: 9px; margin-left: 3px; }
.sku-table td { padding: 7px 6px; font-size: 12.5px; vertical-align: middle; border-bottom: 1px solid var(--bg); overflow: hidden; }
.sku-table tr.sku-row { cursor: pointer; }
.sku-table tr.sku-row:hover td { background: var(--bg); }
.sku-table tr.sku-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sku-table th.sku-num, .sku-table td.sku-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sku-table td.sku-num { font-size: 12px; }
.sku-col-cat span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sku-tbrand { font-size: 11px; color: var(--faint); margin-top: 1px; }
.sku-twb { font-size: 11px; color: var(--faint); margin-top: 1px; }
.sku-col-health { white-space: nowrap; }
.sku-col-actions { width: 1%; white-space: nowrap; }
.sku-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: zoom-in; display: block; }
.sku-thumb-empty { display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--faint); font-size: 18px; cursor: default; }
.sku-tname { font-weight: 600; color: var(--text); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sku-tart { font-size: 11px; color: var(--faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sku-tnm { color: var(--faint); }
.sku-tflag { font-size: 10px; font-weight: 700; color: var(--warn-ink); background: var(--warn-soft); border: 1px solid var(--warn-border); border-radius: 5px; padding: 0 5px; margin-left: 4px; }
.sku-na { color: var(--faint); }
.sku-stock-zero { color: var(--muted); }
.sku-stock-alarm { color: var(--danger-ink); font-weight: 700; }
.sku-trend { font-weight: 700; font-size: 12px; white-space: nowrap; }
.sku-trend-up { color: var(--success); }
.sku-trend-down { color: var(--danger-ink); }
.sku-trend-flat { color: var(--faint); }
.sku-health { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--muted); white-space: nowrap; }
.sku-health-issue { color: var(--danger-ink); background: var(--danger-soft); border-color: var(--danger-border); }
.sku-health-ok { color: var(--success); background: var(--success-soft); border-color: var(--success-border); }
.sku-health-low { color: var(--muted); }
.sku-health-none { color: var(--faint); border-style: dashed; }
.sku-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.sku-row-actions .btn { padding: 4px 6px; }
.sku-row-actions .btn .icon { width: 15px; height: 15px; }
/* Карточки: имя кликабельно (панель), строка среза */
.sku-name-link { cursor: pointer; }
.sku-name-link:hover { color: var(--accent-ink); }
.sku-card-sales { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 12px; color: var(--muted); background: var(--bg); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; cursor: pointer; }
.sku-card-sales b { color: var(--text); font-variant-numeric: tabular-nums; }

/* Панель товара: правый drawer поверх страницы */
.sku-drawer-overlay { display: none; position: fixed; inset: 0; z-index: 120; background: rgba(28, 32, 48, 0.4); }
.sku-drawer-overlay.visible { display: block; }
.sku-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: 620px; max-width: 100vw;
  background: var(--card); border-left: 1px solid var(--border); box-shadow: -12px 0 40px rgba(28, 32, 48, 0.18);
  display: flex; flex-direction: column;
  animation: skuDrawerIn .18s ease-out;
}
@keyframes skuDrawerIn { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sku-drawer { animation: none; } }
.sku-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.sku-drawer-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.sku-drawer-close { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--card); color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.sku-drawer-close:hover { color: var(--text); background: var(--bg); }
.sku-drawer-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sku-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px 32px; }
.sku-panel-photos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 12px; }
.sku-panel-more { border: 1px dashed var(--border-strong); background: var(--bg); color: var(--muted); border-radius: 8px; font-weight: 700; cursor: pointer; aspect-ratio: 1; }
.sku-panel-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: zoom-in; }
.sku-panel-photo.main { grid-column: span 2; grid-row: span 2; }
.sku-panel-photo:hover { border-color: var(--accent); }
.sku-panel-name { font-size: 17px; font-weight: 800; color: var(--text); line-height: 1.3; margin-bottom: 6px; }
.sku-panel-arts { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.sku-panel-arts b { color: var(--text); font-weight: 600; }
.sku-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.sku-panel-actions .btn { padding: 8px 12px; font-size: 13px; }
.sku-panel-sec { border-top: 1px solid var(--border); padding: 14px 0; }
.sku-panel-sec-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 10px; }
.sku-kv { display: flex; gap: 12px; align-items: baseline; font-size: 13px; padding: 4px 0; }
.sku-k { flex: 0 0 140px; color: var(--muted); }
.sku-v { color: var(--text); font-variant-numeric: tabular-nums; }
.sku-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
.sku-tile { background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.sku-tile-v { font-size: 18px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.15; }
.sku-tile-l { font-size: 11px; color: var(--muted); margin-top: 2px; }
.sku-chart-wrap { position: relative; height: 110px; }
.sku-funnel { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.sku-funnel-step { flex: 1 1 100px; min-width: 100px; background: var(--bg); border-radius: 10px; padding: 8px 10px; font-size: 11px; }
.sku-funnel-v { font-size: 16px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.sku-funnel-l { color: var(--muted); font-weight: 600; margin: 2px 0; }
.sku-funnel-arrow { align-self: center; color: var(--faint); font-size: 14px; }
.sku-health-box { font-size: 13px; line-height: 1.5; border-radius: 10px; padding: 10px 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.sku-health-box.issue { background: var(--danger-soft); border-color: var(--danger-border); }
.sku-health-box.ok { background: var(--success-soft); border-color: var(--success-border); }
.sku-health-box.low { color: var(--muted); }
.sku-quote { font-size: 13px; line-height: 1.6; color: var(--text); border-left: 3px solid var(--accent-border); background: var(--accent-soft); padding: 10px 14px; border-radius: 0 10px 10px 0; margin: 0; }
body.sku-drawer-open { overflow: hidden; }
@media (max-width: 720px) {
  .sku-drawer { width: 100vw; }
  .sku-plate { min-width: 80px; padding: 8px 10px; }
  .sku-plate-period { margin-left: 0; width: 100%; white-space: normal; }
  .sku-table-wrap.card { max-height: none; }
  .sku-k { flex-basis: 110px; }
}
@media print { .sku-drawer-overlay, .sku-summary, .sku-chips, .sku-view-toggle { display: none !important; } }

/* ============ Оценка ниши (вкладка niche, frontend/js/niche.js) ============
   Форма с подсказками категорий MPSTATS, чип выбранной категории, KPI-сетка,
   score-бейдж вердикта (цвет по значению), компактные таблицы с overflow-x. */
.history-badge.type-niche { color: #0f766e; background: #e0f5f1; }
.niche-form { display: flex; flex-direction: column; gap: 10px; }
.niche-query-wrap { position: relative; }
.niche-query-wrap input[type="text"] { width: 100%; font-size: 15px; }
.niche-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--card); border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(28, 32, 48, 0.12); max-height: 320px; overflow-y: auto;
}
.niche-suggest-item { padding: 9px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--bg); }
.niche-suggest-item:last-child { border-bottom: none; }
.niche-suggest-item:hover { background: var(--accent-soft); }
.niche-suggest-name { font-size: 14px; font-weight: 600; color: var(--text); }
.niche-suggest-path { font-size: 12px; color: var(--muted); }
.niche-chip-row { min-height: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.niche-chip { max-width: 100%; }
.niche-chip-hint { font-size: 12px; color: var(--faint); }
.niche-form-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.niche-form-row .sales-check { margin-top: 0; }
.niche-form-row .btn { margin-left: auto; }
.niche-inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.niche-status-line { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--faint); }
.niche-candidates { margin-top: 6px; padding: 12px 14px; background: var(--warn-soft); border: 1px solid var(--warn-border); border-radius: 10px; }
.niche-candidates-title { font-size: 13px; font-weight: 600; color: var(--warn-ink); margin-bottom: 8px; }
.niche-candidates-list { display: flex; flex-wrap: wrap; gap: 8px; }
.niche-candidate { white-space: normal; text-align: left; line-height: 1.3; }
.niche-off-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.niche-off-text { font-size: 14px; color: var(--muted); line-height: 1.6; }
.niche-off-text code { background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: 13px; }
.niche-recent .history-item { margin-bottom: 8px; }
.niche-recent .history-item:last-child { margin-bottom: 0; }

/* Шапка отчёта */
.niche-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.niche-head-main { min-width: 0; flex: 1; }
.niche-head-title { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 8px; line-height: 1.2; }
.niche-head-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.niche-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Вердикт ИИ */
.niche-verdict-row { display: flex; gap: 20px; align-items: flex-start; }
.niche-verdict-main { flex: 1; min-width: 0; }
.niche-score { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid transparent; }
.niche-score-num { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.niche-score-of { font-size: 11px; font-weight: 600; opacity: 0.8; margin-top: 3px; }
.niche-score-good { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.niche-score-mid { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn-border); }
.niche-score-bad { background: var(--danger-soft); color: var(--danger-ink); border-color: var(--danger-border); }
.niche-score-na { background: var(--bg); color: var(--muted); border-color: var(--border); }
.niche-decision { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--accent-ink); }
.niche-verdict-headline { font-size: 18px; font-weight: 700; line-height: 1.35; margin-bottom: 8px; }
.niche-verdict-summary { font-size: 14px; line-height: 1.65; color: var(--text); }
.niche-verdict-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.niche-verdict-cols .insight-box { margin-top: 10px; }
.niche-verdict-off .niche-dim { font-size: 14px; }

/* KPI-плитки */
.niche-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.niche-kpi { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.niche-kpi-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.niche-kpi-value { font-size: 21px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.niche-kpi-sub { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.niche-up { color: var(--success); font-weight: 700; }
.niche-down { color: var(--danger); font-weight: 700; }
.niche-flat { color: var(--muted); font-weight: 600; }
.niche-kpi-sub .niche-up, .niche-kpi-sub .niche-down { font-weight: 600; }

/* Графики */
.niche-grid { align-items: start; }
.niche-grid > .card { margin-bottom: 0; min-width: 0; }
.niche-chart { position: relative; height: 260px; }
.niche-chart canvas { max-width: 100%; }
.niche-chart-sm { height: 140px; }
.niche-demand { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 20px; align-items: start; }
.niche-demand > * { min-width: 0; }
.niche-demand-table .table-scroll { max-height: 460px; overflow-y: auto; }
.niche-demand-table thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }
.niche-demand-side .tag { font-size: 12px; padding: 3px 8px; }
.niche-note { font-size: 12px; color: var(--muted); margin-top: 12px; line-height: 1.5; }
.niche-note b { color: var(--text); }

/* Таблицы: компактные, прокрутка по горизонтали внутри карточки */
.niche-table table { min-width: 640px; }
.niche-table-narrow table { min-width: 420px; }
.niche-table-items table { min-width: 960px; }
.niche-table th { white-space: nowrap; }
.niche-table td { padding: 8px 10px; font-size: 13px; vertical-align: middle; white-space: nowrap; }
.niche-table td.niche-wrap { white-space: normal; min-width: 180px; }
.niche-table .niche-item-name { font-weight: 500; line-height: 1.3; max-width: 340px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.niche-thumb { width: 40px; height: 40px; }
.niche-dim { color: var(--muted); }
.niche-small { font-size: 11px; }
.niche-yes { color: var(--warn-ink); font-weight: 600; }
.niche-more { margin-top: 12px; text-align: center; }
.niche-table .history-badge { white-space: nowrap; font-size: 11px; padding: 3px 8px; }

/* Вход в нишу */
.niche-entry-grid { margin-bottom: 4px; }
.niche-lvl { display: inline-block; padding: 2px 10px; border-radius: 8px; font-size: 16px; font-weight: 700; }
.niche-lvl-high { background: var(--danger-soft); color: var(--danger-ink); }
.niche-lvl-mid { background: var(--warn-soft); color: var(--warn-ink); }
.niche-lvl-low { background: var(--success-soft); color: var(--success); }
.niche-entry-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 16px; }
.niche-entry-block { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.niche-entry-risks { background: var(--danger-soft); border-color: var(--danger-border); }
.niche-entry-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); margin-bottom: 8px; }
.niche-entry-big { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.niche-entry-text { font-size: 13px; line-height: 1.55; color: var(--muted); margin-top: 6px; }
.niche-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.niche-kv:last-of-type { border-bottom: none; }
.niche-kv span { color: var(--muted); }
.niche-kv b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.niche-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--text); }
.niche-list li { margin-bottom: 5px; }
.niche-list li:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .niche-grid { grid-template-columns: 1fr; }
  .niche-demand { grid-template-columns: 1fr; }
  .niche-verdict-cols { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .niche-verdict-row { flex-direction: column; }
  .niche-head-row { flex-direction: column; }
  .niche-head-main { width: 100%; }
  .niche-form-row .btn { margin-left: 0; width: 100%; }
  .niche-head-title { font-size: 20px; }
}

/* Оценка ниши: документы поставщика (наши товары для входа) */
.niche-docs { margin: 12px 0 6px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 10px; background: var(--bg); }
.niche-docs-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.niche-docs-row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.niche-docs-row input[type=file] { font-size: 13px; max-width: 100%; }
.niche-docs-row .niche-small { flex: 1 1 260px; }
.niche-context { display: block; width: 100%; margin-top: 10px; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card, #fff); color: var(--text); resize: vertical; }
.niche-ours .niche-feats .tag { margin: 0 4px 4px 0; font-size: 11px; }
.niche-ours-table table { min-width: 900px; }
.niche-ours-table td { vertical-align: top; }
.niche-ours-table th:nth-child(4), .niche-ours-table td:nth-child(4) { min-width: 240px; white-space: normal; }
.niche-ours-table th:nth-child(5), .niche-ours-table td:nth-child(5) { min-width: 260px; white-space: normal; }
.niche-note-warn { border-color: var(--warn-border); background: var(--warn-soft); color: var(--warn-ink); }
.niche-kind { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: 6px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); vertical-align: middle; }
.niche-kind-subject { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-border); }
.niche-outside-list { display: flex; flex-direction: column; gap: 6px; }
.niche-outside-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.niche-outside-row .btn { margin-left: auto; }

/* ============ Портфель предметов (frontend/js/niche.js → renderNichePortfolio) ============
   Все классы с префиксом .pf-: форма (чекбокс портфеля), шапка, вердикт по портфелю,
   сводная матрица позиционирования, карточки предметов и сравнительная таблица с конкурентами. */
.history-badge.type-portfolio { color: #7c2d12; background: #ffedd5; }
.niche-portfolio-opts { margin: 4px 0 8px; padding: 10px 14px; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--accent-soft); display: flex; flex-direction: column; gap: 6px; }
.niche-portfolio-opts .sales-check { margin-top: 0; color: var(--text); }
.niche-portfolio-opts .sales-check.pf-sub { font-size: 12px; color: var(--muted); padding-left: 24px; }
.niche-portfolio-opts .sales-check.disabled { color: var(--faint); cursor: not-allowed; }
.pf-opts-note { font-size: 12px; color: var(--muted); line-height: 1.45; }
.pf-opts-note b { color: var(--accent-ink); }

/* шапка */
.pf-head-title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 8px; }
.pf-head-title small { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 4px; }
.pf-facts { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 4px; }
.pf-fact { font-size: 12px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; }
.pf-fact b { color: var(--text); font-weight: 700; }
.pf-context { margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.pf-context b { color: var(--text); }

/* бейджи оценки SKU (зелёный/жёлтый/красный) и волн запуска */
.pf-score { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 8px; white-space: nowrap; border: 1px solid transparent; }
.pf-score-green { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.pf-score-yellow { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn-border); }
.pf-score-red { background: var(--danger-soft); color: var(--danger-ink); border-color: var(--danger-border); }
.pf-score-na { background: var(--bg); color: var(--faint); border-color: var(--border); }
.pf-wave { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 7px; white-space: nowrap; }
.pf-wave-1 { background: var(--success-soft); color: var(--success); }
.pf-wave-2 { background: var(--warn-soft); color: var(--warn-ink); }
.pf-wave-3 { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.pf-delta-neutral { color: var(--muted); font-weight: 600; }
.pf-delta-low { color: var(--success); font-weight: 700; }
.pf-delta-high { color: var(--warn-ink); font-weight: 700; }
.pf-delta-vhigh { color: var(--danger); font-weight: 700; }

/* вердикт по портфелю */
.pf-verdict-summary { font-size: 14px; line-height: 1.65; color: var(--text); margin-bottom: 14px; }
.pf-verdict-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 14px; }
.pf-block { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.pf-block-risks { background: var(--danger-soft); border-color: var(--danger-border); }
.pf-block-budget { background: var(--accent-soft); border-color: var(--accent-border); }
.pf-block .niche-list li { margin-bottom: 8px; }
.pf-block .niche-list li b { color: var(--text); }
.pf-rank-table table { min-width: 720px; }
.pf-rank-table td { white-space: normal; vertical-align: top; }
.pf-rank-table td.pf-why { min-width: 320px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.pf-rank-table td.pf-why b { color: var(--text); }
.pf-rank-num { color: var(--faint); font-weight: 700; }

/* сводная матрица позиционирования */
.pf-matrix table { min-width: 980px; }
.pf-matrix td { white-space: normal; vertical-align: top; }
.pf-matrix td.pf-subject { font-weight: 700; white-space: normal; min-width: 110px; }
.pf-matrix td.pf-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-matrix td.pf-list { min-width: 190px; font-size: 12px; line-height: 1.45; }
.pf-matrix td.pf-comment { min-width: 200px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.pf-matrix ul { margin: 0; padding-left: 16px; }
.pf-matrix ul li { margin-bottom: 3px; }
.pf-matrix ul li:last-child { margin-bottom: 0; }
.pf-matrix ul.pf-plus li::marker { color: var(--success); }
.pf-matrix ul.pf-minus li::marker { color: var(--danger); }
.pf-matrix tr.pf-group-first td { border-top: 2px solid var(--border); }
.pf-legend { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.5; }

/* карточка предмета */
.pf-group { border-left: 4px solid var(--accent); }
.pf-group-error { border-left-color: var(--danger); }
.pf-group-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pf-group-title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-group-title .niche-kind { font-size: 11px; }
.pf-group-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.pf-group-sub b { color: var(--text); }
.pf-group-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pf-error { padding: 10px 14px; background: var(--danger-soft); border: 1px solid var(--danger-border); border-radius: 10px; color: var(--danger-ink); font-size: 13px; margin: 8px 0 12px; }
.pf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin: 10px 0 14px; }
.pf-kpi { background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; min-width: 0; }
.pf-kpi-l { font-size: 11px; color: var(--muted); line-height: 1.3; }
.pf-kpi-v { font-size: 15px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; overflow-wrap: anywhere; line-height: 1.2; }
.pf-kpi-s { font-size: 11px; color: var(--faint); margin-top: 2px; }
.pf-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); margin: 14px 0 8px; }
.pf-h:first-child { margin-top: 0; }

/* сравнительная таблица: липкий первый столбец, наши строки подсвечены, лучшие ячейки зелёные */
.pf-cmp table { min-width: 860px; border-collapse: separate; border-spacing: 0; }
.pf-cmp th, .pf-cmp td { border-bottom: 1px solid var(--border); }
.pf-cmp th { white-space: normal; line-height: 1.3; vertical-align: bottom; min-width: 84px; }
.pf-cmp th small { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--faint); font-size: 10px; margin-top: 2px; }
.pf-cmp td { padding: 8px 10px; font-size: 13px; vertical-align: middle; white-space: nowrap; }
.pf-cmp th:first-child, .pf-cmp td:first-child { position: sticky; left: 0; z-index: 2; background: var(--card); min-width: 220px; max-width: 320px; white-space: normal; box-shadow: 1px 0 0 var(--border); }
.pf-cmp th:first-child { z-index: 3; }
.pf-cmp td.pf-val { text-align: center; }
.pf-cmp td.pf-num { text-align: right; font-variant-numeric: tabular-nums; }
.pf-cmp tr.pf-our td { background: var(--accent-soft); }
.pf-cmp tr.pf-our td:first-child { background: var(--accent-soft); font-weight: 600; }
.pf-cmp tr.pf-our:hover td { background: var(--accent-soft); }
.pf-cmp tr td.pf-best, .pf-cmp tr.pf-our td.pf-best, .pf-cmp tr:hover td.pf-best { background: var(--success-soft); color: var(--success); font-weight: 700; }
.pf-cmp tr.pf-our-last td { border-bottom: 2px solid var(--accent-border); }
.pf-cmp td.pf-yes { color: var(--success); font-weight: 600; }
.pf-cmp td.pf-no { color: var(--faint); }
.pf-cmp .pf-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-cmp .pf-item-name { font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pf-cmp .pf-item-sub { font-size: 11px; color: var(--muted); line-height: 1.3; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pf-src { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px; white-space: nowrap; background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.pf-src-top { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-border); }
.pf-src-band { color: var(--warn-ink); background: var(--warn-soft); border-color: var(--warn-border); }
.pf-src-live { color: #0f766e; background: #e0f5f1; border-color: #b7e4dc; }
.pf-cmp td.pf-feats { white-space: normal; min-width: 320px; max-width: 520px; line-height: 1.6; }
.pf-cmp td.pf-feats .tag { font-size: 11px; padding: 2px 7px; margin: 0 3px 3px 0; display: inline-block; }
.pf-cmp-note { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.5; }

/* выводы по нашим SKU */
.pf-skus { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.pf-sku { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.pf-sku-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pf-sku-name { font-size: 14px; font-weight: 700; }
.pf-sku-list { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; }
.pf-sku-list li { margin-bottom: 4px; }
.pf-sku-list.pf-plus li::marker { color: var(--success); }
.pf-sku-list.pf-minus li::marker { color: var(--danger); }
.pf-sku-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin: 8px 0 4px; }
.pf-sku-l.pf-plus { color: var(--success); }
.pf-sku-l.pf-minus { color: var(--danger); }
.pf-sku-comment { font-size: 13px; line-height: 1.5; color: var(--text); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.pf-summary { margin-top: 12px; padding: 12px 14px; background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 10px; font-size: 13px; line-height: 1.6; color: var(--text); }
.pf-summary b { color: var(--accent-ink); }
.pf-mini-verdict { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
.pf-mini-verdict .niche-score { width: 60px; height: 60px; border-radius: 12px; }
.pf-mini-verdict .niche-score-num { font-size: 24px; }
.pf-mini-verdict-text { font-size: 13px; line-height: 1.55; min-width: 0; }
.pf-mini-verdict-text b { display: block; font-size: 14px; margin-bottom: 4px; }

/* низ: не отнесённые, пропущенные */
.pf-unassigned-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.pf-unassigned-row:last-child { border-bottom: none; }
.pf-unassigned-row .btn { margin-left: auto; }
.pf-meta { font-size: 12px; color: var(--faint); margin-top: 6px; line-height: 1.5; }

@media (max-width: 720px) {
  .pf-group-head { flex-direction: column; }
  .pf-verdict-cols, .pf-skus { grid-template-columns: 1fr; }
  .pf-cmp th:first-child, .pf-cmp td:first-child { min-width: 160px; }
}
/* печать из браузера: таблицы без принудительной ширины и липких колонок (см. общий @media print выше) */
@media print {
  .pf-cmp table, .pf-matrix table, .pf-rank-table table { min-width: 0; }
  .pf-cmp th:first-child, .pf-cmp td:first-child { position: static; box-shadow: none; }
  .pf-group { break-before: page; }
}

/* === «Разбор конкурентов» 2.0 (analyze.js): подложка MPSTATS, SEO-ядро, продажи в таблице карточек, сравнение по ТТХ === */
.an-niche { margin-bottom: 20px; }
.an-niche-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.an-niche-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.an-niche-title .niche-kind { font-size: 10px; }
.an-niche-sub { font-size: 12px; color: var(--muted); line-height: 1.4; }
.an-niche-kpis { margin: 10px 0 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .an-niche-kpis { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); } }
.an-niche-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; padding: 6px 0; border-top: 1px dashed var(--border); font-size: 13px; line-height: 1.5; }
.an-niche-row-l { flex: 0 0 96px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); padding-top: 3px; }
.an-niche-row-v { flex: 1 1 320px; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.an-niche-row-v.tags { gap: 6px; }
.an-niche-seg { white-space: nowrap; }
.an-niche-seg b { color: var(--accent-ink); }
.an-niche-row .tag b { color: var(--accent-ink); font-weight: 700; margin-left: 2px; }
.an-market-size { margin-top: 12px; padding: 10px 12px; background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 10px; }
.an-market-size-text { font-size: 13px; line-height: 1.6; color: var(--text); }
.an-market-size-meta { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.an-market-size-text + .an-market-size-meta { padding-top: 6px; border-top: 1px dashed var(--accent-border); }
.an-zones { margin-top: 12px; font-size: 13px; }
.an-zones summary { cursor: pointer; font-weight: 600; color: var(--accent-ink); font-size: 12.5px; }
.an-zone { margin-top: 8px; padding-left: 10px; border-left: 3px solid var(--accent-border); }
.an-zone-text { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 2px; }
.an-seo-core table { min-width: 560px; }
.an-seo-core td { padding: 8px 10px; font-size: 13px; vertical-align: middle; }
.an-tier { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 8px; white-space: nowrap; border: 1px solid var(--border); background: var(--bg); color: var(--muted); }
.an-tier-hi { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-border); }
.an-tier-mid { color: var(--warn-ink); background: var(--warn-soft); border-color: var(--warn-border); }
.an-tag-minus { color: var(--danger-ink); background: var(--danger-soft); border-color: var(--danger-border); text-decoration: line-through; text-decoration-color: rgba(211, 51, 51, 0.45); }
.an-patterns { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
.an-patterns li { margin-bottom: 4px; }
td.an-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-th-sub { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--faint); font-size: 10px; }
.an-ad { color: var(--warn-ink); font-weight: 700; }
.an-compare .pf-cmp { margin-top: 4px; }
@media (max-width: 720px) {
  .an-niche-row-l { flex-basis: 100%; padding-top: 0; }
  .an-niche-seg { white-space: normal; }
}