/* MP RNP — деловая тема в палитре mplevelup.ru.
   Тёмная (по умолчанию) и светлая: html[data-theme="light"].
   Шрифт Golos Text; Press Start 2P — ТОЛЬКО логотип (единственный пиксельный акцент). */

:root {
  color-scheme: dark;
  --page: #0b1220;
  --surface: #111a2e;
  --surface-2: #15203a;
  --ink: #e6edf7;
  --ink-2: #c2cfe6;
  --muted: #93a4c3;
  --grid: #22304f;
  --border: #22304f;
  --shadow-c: rgba(0, 0, 0, 0.3);
  --accent: #ffb020;       /* amber */
  --accent-ink: #0b1220;   /* текст на amber */
  --accent-2: #2dd4bf;     /* teal */
  --series-ad: #ff5d5d;
  --series-profit: #2dd4bf;
  --good: #2dd4bf;
  --critical: #ff5d5d;
}

html[data-theme="light"] {
  color-scheme: light;
  --page: #eef2fa;
  --surface: #ffffff;
  --surface-2: #f2f6fd;
  --ink: #0b1220;
  --ink-2: #263650;
  --muted: #5b6b8c;
  --grid: #dde5f3;
  --border: #c7d3e8;
  --shadow-c: rgba(11, 18, 32, 0.08);
  /* Бирюзовый затемнён: #2dd4bf сливается со светлым фоном */
  --accent-2: #0b8d7e;
  --good: #0b8d7e;
  --critical: #e04545;
  --series-profit: #0b8d7e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  display: flex;
  min-height: calc(100vh / var(--fz, 1));
  background: var(--page);
  color: var(--ink);
  font-family: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.pxfont { font-family: "Press Start 2P", monospace; }

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

/* ===== Левая панель ===== */
#sidebar {
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  /* Выше обычного контента main (иначе тултипы панели ныряют под тулбары,
     особенно пока main анимируется page-in); попапы/модалки (z>=60) выше */
  z-index: 45;
  height: calc(100vh / var(--fz, 1));
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 12px 14px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  transition: width 0.12s;
  overflow: visible;
}
html.nav-collapsed #sidebar { width: 62px; padding-left: 7px; padding-right: 7px; }

/* Зоны панели, разделённые тонкой линией */
.side-zone { border-bottom: 1px solid var(--grid); }

.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 6px 14px;
  color: var(--ink);
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
html.nav-collapsed .logo { justify-content: center; padding-left: 0; padding-right: 0; }

/* Зона 2: ряд кнопок-действий */
.side-actions {
  display: flex;
  gap: 8px;
  padding: 12px 6px;
}
html.nav-collapsed .side-actions { flex-direction: column; align-items: center; padding-left: 0; padding-right: 0; }
.icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  box-shadow: none;
  position: relative;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); filter: none; }
/* «Помощь» — ссылка: без подчёркивания, чтобы тултип выглядел как у кнопок рядом */
a.icon-btn:hover, a.icon-btn:hover::after { text-decoration: none; }
.icon-btn:active { transform: none; box-shadow: none; }
.icon-btn::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 2px 8px var(--shadow-c);
  padding: 6px 10px;
  font-family: "Golos Text", sans-serif;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 120;
}
.icon-btn:hover::after { opacity: 1; }
/* Без data-tip пузырёк не рисуем вовсе — иначе пустая плашка-артефакт
   у кнопок с нативной подсказкой title (стрелки месяца, крестик оверлея) */
.icon-btn:not([data-tip])::after { display: none; }

/* «Пачка» фото склейки в ячейке фото (Юнитка, ABC) — колода 1 в 1 как в
   РНП (.glue-stack): подложки разлетаются вправо без наклона, чем дальше —
   тем прозрачнее; верхнее фото — обычный .thumb (зум + клик-просмотр).
   Клик по вееру открывает СЕТКУ всех фото склейки (showPhotoGrid) */
/* Логотип бренда в колонках «Бренд» (13.09.2026): значок с витрины WB перед названием */
.brand-ico { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; vertical-align: -4px; margin-right: 6px;
  background: #fff; border: 1px solid var(--border); }
/* Состав склейки чипами вне РНП (ABC, Юнитка; 13.09.2026) — те же правила, что в products.html */
.glue-chipcol { display: inline-flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; }
.glue-chipcol.glue-left { align-items: flex-start; }
.glue-chipcol .glue-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glue-chipcol .glue-more { margin-left: 0; margin-top: 3px; }
.glue-chipcol.glue-left .glue-more { margin-left: 18px; }
.glue-more { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; line-height: 16px;
  cursor: pointer; margin-left: 4px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); }
.glue-more:hover { border-color: var(--accent); color: var(--ink); }
.glue-list { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; align-items: flex-start; }
.glue-wrap > .glue-list { margin-top: 0; padding-top: 3px; }
@media (prefers-reduced-motion: no-preference) { .glue-wrap > .glue-list { animation: glue-in 0.18s ease; } }
@keyframes glue-in { from { opacity: 0; transform: translateY(-4px); } }
.glue-mini { position: relative; display: inline-block; width: 90px; height: 58px; }
.glue-mini img.thumb { cursor: zoom-in; }  /* лупа — только на главном фото */
.glue-mini img { position: absolute; top: 1px; left: 0; width: 42px; height: 56px;
  object-fit: cover; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface-2); }
.glue-mini .glue-under { pointer-events: none; }
/* Счётчик товаров склейки — плашкой в углу верхнего фото (как в РНП).
   ВАЖНО: в разметке бейдж идёт ПЕРВЫМ ребёнком — последним он сдвинул бы
   nth-last-child-нумерацию подложек */
.glue-mini .glue-num {
  position: absolute; left: 2px; bottom: 2px; z-index: 3;
  font-style: normal; font-size: 8.5px; font-weight: 700; line-height: 1;
  letter-spacing: 0.2px; white-space: nowrap;
  padding: 2px 4px; border-radius: 4px;
  background: rgba(11, 18, 32, 0.62); color: #fff;
  pointer-events: none;
}
.glue-mini .glue-under:nth-last-child(2) { opacity: 0.8; }
.glue-mini .glue-under:nth-last-child(3) { opacity: 0.6; }
.glue-mini .glue-under:nth-last-child(4) { opacity: 0.4; }
.glue-mini .glue-under:nth-last-child(5) { opacity: 0.25; }
.glue-mini[data-n="2"] .glue-under:nth-last-child(2) { left: calc(100% - 44px); }
.glue-mini[data-n="3"] .glue-under:nth-last-child(2) { left: calc((100% - 44px)*0.5); }
.glue-mini[data-n="3"] .glue-under:nth-last-child(3) { left: calc(100% - 44px); }
.glue-mini[data-n="4"] .glue-under:nth-last-child(2) { left: calc((100% - 44px)*0.34); }
.glue-mini[data-n="4"] .glue-under:nth-last-child(3) { left: calc((100% - 44px)*0.67); }
.glue-mini[data-n="4"] .glue-under:nth-last-child(4) { left: calc(100% - 44px); }
.glue-mini[data-n="5"] .glue-under:nth-last-child(2) { left: calc((100% - 44px)*0.25); }
.glue-mini[data-n="5"] .glue-under:nth-last-child(3) { left: calc((100% - 44px)*0.5); }
.glue-mini[data-n="5"] .glue-under:nth-last-child(4) { left: calc((100% - 44px)*0.75); }
.glue-mini[data-n="5"] .glue-under:nth-last-child(5) { left: calc(100% - 44px); }
/* Ячейка с веером расширяется под колоду — иначе веер вылезает из узкой
   фото-колонки и прячется/режется. !important обязателен: юнитка и ABC
   генерируют ширины колонок ID-селекторами (#products-table td:nth-child)
   с min/max-width и overflow:hidden — обычный класс их не перебьёт */
td.photo:has(.glue-mini) {
  width: auto !important;
  min-width: 98px !important;
  max-width: none !important;
  overflow: visible !important;
}
/* Сетка всех фото склейки в лайтбоксе (клик по вееру): колонки задаются
   инлайн по количеству фото (2/3/4), клик по мини — крупный просмотр */
.photo-lightbox .photo-grid {
  display: grid; gap: 8px; padding: 10px;
  max-width: 92vw; max-height: calc(90vh / var(--fz, 1));
  overflow: auto; cursor: default;
}
.photo-lightbox .photo-grid img {
  position: static; width: 100%; max-width: none; max-height: none;
  aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px;
  cursor: zoom-in; background: var(--surface-2);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}
/* Значок-ссылка «товар в магазине» в правом нижнем углу плитки сетки
   и одиночного полноэкранного фото (.pg-one) */
.photo-lightbox .pg-tile { position: relative; display: block; }
.photo-lightbox .pg-one { position: relative; display: inline-block; }
.photo-lightbox .pg-link {
  position: absolute; right: 7px; bottom: 7px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; background: rgba(11, 18, 32, 0.6); color: #fff;
}
.photo-lightbox .pg-one .pg-link { width: 34px; height: 34px; right: 10px; bottom: 10px; }
.photo-lightbox .pg-link:hover { background: var(--accent); color: #0b1220; }
/* Товаров в склейке больше, чем плиток: последняя — «+N» под капотом */
.photo-lightbox .photo-grid .pg-more {
  aspect-ratio: 3 / 4; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--muted);
  font-size: 26px; font-weight: 800; letter-spacing: 0.02em;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

/* Иконки темы и сворачивания меняются по состоянию */
.ico-sun, html[data-theme="light"] .ico-moon { display: none; }
html[data-theme="light"] .ico-sun { display: block; }
.ico-expand, html.nav-collapsed .ico-collapse { display: none; }
html.nav-collapsed .ico-expand { display: block; }

/* Зона 3: профиль */
.profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 6px;
  position: relative;
}
/* профиль — ссылка на /profile, но выглядит как прежний блок.
   Разделитель снизу — прямой линией через ::before: border-bottom вместе
   с border-radius подложки загибался по углам */
a.profile { color: inherit; text-decoration: none; border-radius: 10px; border-bottom: none; }
a.profile::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--grid);
}
a.profile:hover { text-decoration: none; background: var(--surface-2); }
html.nav-collapsed .profile { justify-content: center; padding-left: 0; padding-right: 0; }
.avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
}
.profile-info { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.profile-info b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-info small { color: var(--muted); font-size: 11px; }
html.nav-collapsed .profile-info { display: none; }
.profile::after {
  content: attr(data-tip);
  display: none;
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 2px 8px var(--shadow-c);
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 120;
}
html.nav-collapsed .profile:hover::after { display: block; opacity: 1; }

.side-nav { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; }
/* На невысоких экранах длинное меню прокручивается ВНУТРИ панели,
   не растягивая страницу (иначе на ноутбуке появлялся двойной скролл
   и «уезжала» вся страница). В свёрнутом виде меню короткое, а тултипам
   нужен overflow: visible — поэтому правило только для развёрнутого. */
html:not(.nav-collapsed) .side-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
html:not(.nav-collapsed) .side-nav::-webkit-scrollbar { width: 6px; }
html:not(.nav-collapsed) .side-nav::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

/* Группа меню с подпунктами (WB → РНП / Юнитка) */
.nav-group { display: flex; flex-direction: column; }
.nav-parent { cursor: pointer; user-select: none; }
.nav-parent .chev { margin-left: auto; flex-shrink: 0; transition: transform 0.12s; color: var(--muted); }
.nav-group.open .nav-parent .chev { transform: rotate(90deg); }
.nav-sub { display: none; flex-direction: column; }
.nav-group.open .nav-sub { display: flex; }
.nav-sub .nav-item { padding-left: 30px; }
.nav-sub .nav-icon { font-size: 9px; letter-spacing: 0.3px; }
html.nav-collapsed .nav-sub .nav-item { padding-left: 9px; }
html.nav-collapsed .nav-parent .chev { display: none; }
.logo-pulse { flex-shrink: 0; display: block; color: var(--accent-2); }
.logo-text {
  font-family: "Press Start 2P", monospace;
  font-size: 12px;
  letter-spacing: 1px;
}
.logo-text span { color: var(--accent); }

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 9px;
  color: var(--muted);
  border-left: 3px solid transparent;
  position: relative;
  white-space: nowrap;
}
.nav-item:hover { color: var(--ink); text-decoration: none; }
.nav-item { border-radius: 0 8px 8px 0; }
.nav-item.active {
  color: var(--ink);
  background: var(--surface-2);
  border-left-color: var(--accent);
}
.nav-icon {
  flex-shrink: 0;
  width: 20px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 18px;
}
.nav-icon svg { display: block; width: 18px; height: 18px; }
.nav-icon-ruble { font-size: 14px; font-weight: 700; letter-spacing: 0; }
.nav-label { font-size: 14px; font-weight: 500; }

html.nav-collapsed .nav-label,
html.nav-collapsed .logo-text,
html.nav-collapsed .side-email { display: none; }

/* Подсказки у свёрнутой панели */
.nav-item::after {
  content: attr(data-tip);
  display: none; /* в развёрнутом меню тултип не занимает место в layout */
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 2px 8px var(--shadow-c);
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 50;
  transition: opacity 0.08s;
}
html.nav-collapsed .nav-item:hover::after { display: block; opacity: 1; }

.side-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--grid);
  padding-top: 8px;
}

main { flex: 1; min-width: 0; max-width: 1160px; margin: 0 auto; padding: 30px 28px; }
main.wide { max-width: none; margin: 0; }

/* ===== Типографика ===== */
h1 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 20px;
}
h2 { font-size: 16px; margin: 24px 0 12px; color: var(--ink-2); }

.pixel-strip {
  height: 4px;
  margin: 14px 0 22px;
  background: repeating-linear-gradient(90deg,
    var(--accent) 0 10px, transparent 10px 16px,
    var(--accent-2) 16px 26px, transparent 26px 32px);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 2px 10px var(--shadow-c);
  padding: 20px 24px;
}

/* ===== Формы ===== */
.auth-wrap { max-width: 400px; margin: 9vh auto 0; }
.auth-wrap h1 {
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.auth-wrap h1 span { color: var(--accent); }
label { display: block; margin: 14px 0 6px; color: var(--ink-2); font-size: 13px; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="tel"], input[type="number"],
select, textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
/* Выпадающие списки select в тёмной теме: явные цвета пунктов,
   иначе браузер рисует светлый текст на светлом фоне */
select option { background-color: var(--surface); color: var(--ink); }

button, .btn {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 20px;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 4px var(--shadow-c);
}
button:hover, .btn:hover { filter: brightness(1.06); }
button.secondary {
  background: transparent;
  border: 1px solid var(--accent-2);
  color: var(--accent-2);
  box-shadow: none;
}

/* Калькулятор юнит-экономики */
.calc-grid {
  display: grid;
  grid-template-columns: minmax(340px, 460px) minmax(340px, 1fr);
  gap: 20px;
  align-items: start;
  max-width: 1060px;
}
@media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; } }
.calc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-row2 label { margin-top: 12px; }
#r-breakdown td, #r-breakdown th { font-size: 12.5px; }

/* Галочка согласия с офертой при регистрации */
.agree-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
  cursor: pointer;
}
.agree-row input {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--accent);
}

/* ===== Окна авторизации — единый стандарт (12.09.2026): общая шапка _auth_head.html,
   карточка .auth-card, вкладки-сегменты, поля 44px, кнопка во всю ширину, поле кода ===== */
.auth-wrap .auth-sub { text-align: center; color: var(--muted); font-size: 13px; margin: -12px 0 0; }
.auth-card { padding: 22px 24px 18px; border-radius: 14px; box-shadow: 0 12px 40px var(--shadow-c); }
.auth-card label { margin: 12px 0 6px; font-weight: 600; font-size: 12.5px; }
.auth-card input[type="text"], .auth-card input[type="email"], .auth-card input[type="password"], .auth-card input[type="tel"] {
  height: 44px; padding: 10px 13px; border-radius: 10px; font-size: 14.5px; }
.auth-card input::placeholder { color: var(--muted); opacity: .7; }
.auth-card .banner { margin-bottom: 14px; font-size: 13.5px; }
.auth-btn { width: 100%; margin-top: 16px; height: 44px; padding: 0 18px; border-radius: 10px; font-size: 14.5px; }
.auth-btn.secondary { margin-top: 10px; height: 40px; }
.auth-resend { margin-top: 0; }
.auth-note { margin: 0 0 4px; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.auth-note b { color: var(--ink); }
.hint.auth-links { text-align: center; margin-top: 14px; }
.hint.auth-links a { color: var(--accent-2); }
.auth-foot { border-top: 1px solid var(--grid); padding-top: 12px; margin-top: 18px; }
.auth-foot a { white-space: nowrap; }
/* Вкладки входа — сегментный переключатель */
.auth-tabs { display: flex; gap: 4px; margin-bottom: 16px; padding: 4px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 12px; }
.auth-tab { flex: 1; margin: 0; padding: 8px 10px; background: transparent; border: none; border-radius: 9px;
  color: var(--muted); font-size: 13.5px; font-weight: 600; box-shadow: none; cursor: pointer; transition: background .15s ease, color .15s ease; }
.auth-tab:hover { color: var(--ink); filter: none; }
.auth-tab.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px var(--shadow-c); }
/* Поле кода из письма/SMS — крупные цифры с разрядкой */
.auth-card input.auth-code { text-align: center; font-size: 24px; font-weight: 700; letter-spacing: .35em; height: 54px;
  font-variant-numeric: tabular-nums; }
.auth-card input.auth-code::placeholder { letter-spacing: .35em; font-weight: 400; }
/* Пароль с глазиком */
.auth-pass { position: relative; }
.auth-pass input { padding-right: 44px; margin: 0; width: 100%; box-sizing: border-box; }
.auth-pass { display: block; margin: 0; }
.auth-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 8px;
  color: var(--muted); box-shadow: none; cursor: pointer; }
.auth-eye:hover { color: var(--ink); background: var(--surface); filter: none; }
.auth-eye.on { color: var(--accent); }

.banner { padding: 10px 16px; border: 1px solid; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.banner.ok { background: rgba(45, 212, 191, 0.1); color: var(--good); border-color: var(--good); }
.banner.err { background: rgba(255, 93, 93, 0.1); color: var(--critical); border-color: var(--critical); }

.hint { color: var(--muted); font-size: 13px; margin-top: 6px; }

/* ===== Дашборд ===== */
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.toolbar select, .toolbar input[type="date"] { width: auto; }
.toolbar form { margin: 0; }
.toolbar button { margin-top: 0; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 2px 10px var(--shadow-c);
  padding: 16px 20px;
}
.tile .label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.tile .value { font-size: 26px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tile .sub { font-size: 13px; color: var(--ink-2); margin-top: 2px; }

.chart-card { margin-bottom: 20px; }
.chart-wrap { position: relative; height: 320px; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
table.data th, table.data td {
  padding: 6px 9px;
  text-align: right;
  border-bottom: 1px solid var(--grid);
}
table.data th { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.3px; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data td.pos { color: var(--good); }
table.data td.neg { color: var(--critical); }
table.data tr.totals td { font-weight: 700; background: var(--surface-2); }

/* Миниатюры товаров (РНП) */
td.photo { padding: 4px 6px 4px 12px; width: 50px; }
/* Архивная карточка Ozon: фото обесцвечено */
img.thumb.arch { filter: grayscale(1); opacity: 0.85; }
img.thumb {
  display: block;
  width: 42px;
  height: 56px;
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}
/* Hover-превью миниатюры: клон, центрированный на исходном фото (base.html).
   Появление — вырастание из миниатюры с лёгким овершутом (пружинка в стиле
   iOS); переезд к соседней миниатюре — быстрое плавное скольжение */
/* Миниатюра-«ссылка в магазин» (Склейки, Реклама): обёртка с data-tip
   (подпись) и data-url (карточка на площадке); бабл-подпись #gl-tip рисует
   base.html под увеличенным превью, поверх него */
.gl-ph { display: inline-flex; }
#gl-tip {
  position: fixed; z-index: 1401; display: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 11px; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  pointer-events: none; max-width: 420px; overflow: hidden; text-overflow: ellipsis;
}
.thumb-preview {
  position: fixed;
  z-index: 1400;  /* выше модалок (1200) и диалогов (1300): ховер-превью
                     работает и из таблиц внутри окон */
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  background: var(--surface-2);
  cursor: pointer;
  will-change: transform, top, left;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.3, 0.5, 1),
    opacity 0.16s ease-out,
    top 0.18s cubic-bezier(0.25, 0.9, 0.3, 1),
    left 0.18s cubic-bezier(0.25, 0.9, 0.3, 1);
}
/* увеличенный логотип бренда (14.09.2026): целиком, на белом, с отступом */
.thumb-preview.brand { object-fit: contain; background: #fff; padding: 8px; box-sizing: border-box; }
.brand-ico { cursor: zoom-in; }

/* Переключатель темы */
.theme-switch { display: flex; gap: 10px; }
.theme-switch button { margin-top: 0; }
.theme-switch button.inactive { background: transparent; border: 2px solid var(--border); color: var(--muted); box-shadow: none; }

/* Свежесть данных API + кнопка обновления — верхний правый угол */
.data-freshness {
  position: fixed;
  top: 10px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px 4px 10px;
  z-index: 40;
  transition: opacity 0.3s;
}
.data-freshness.faded { opacity: 0; pointer-events: none; }
/* Итог «Обновить данные» после перезагрузки — под плашкой, сам исчезает (ошибка — по клику) */
.sync-toast {
  position: fixed; top: 46px; right: 16px; z-index: 42; max-width: min(520px, calc(100vw - 32px));
  font-size: 12.5px; line-height: 1.35; padding: 8px 12px; border-radius: 8px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.18);
  animation: menu-in .18s ease-out;
}
.sync-toast.ok { border-color: var(--good); color: var(--good); }
.sync-toast.err { border-color: var(--critical); color: var(--critical); }

/* Плашка свежести своего склада — под плашкой данных API */
.own-plate {
  position: fixed;
  top: 46px;
  right: 16px;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  z-index: 40;
  transition: opacity 0.3s;
}
.own-plate.faded { opacity: 0; pointer-events: none; }
.refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--accent-2);
  cursor: pointer;
  box-shadow: none;
}
.refresh-btn:hover { background: var(--surface-2); filter: none; }
.refresh-btn:disabled { color: var(--muted); cursor: wait; }
.spin { animation: rnp-spin 1s linear infinite; }
@keyframes rnp-spin { to { transform: rotate(360deg); } }

/* Бейдж площадки в кабинетах */
/* Значок AI у пункта меню «Автоответы» — раздел работает на нейросетях */
/* Внутри кнопки чип стоит ПЕРЕД текстом («AI Отфильтровать слова») —
   единый вид всех кнопок ИИ-функций (решение владельца, 03.09.2026) */
button > .ai-chip:first-child, button > .ai-chip + * { vertical-align: 1px; }
button > .ai-chip:first-child { margin: 0 6px 0 0; }
.ai-chip {
  display: inline-block;
  padding: 1px 6px 2px;
  margin-left: 4px;
  border-radius: 6px;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  line-height: 1.2;
  vertical-align: 1px;
}

.mp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.mp-badge.wb { background: rgba(203, 17, 171, 0.18); color: #e26ad0; }
.mp-badge.ozon { background: rgba(0, 91, 255, 0.18); color: #6ba0ff; }
html[data-theme="light"] .mp-badge.wb { color: #a90f8f; }
html[data-theme="light"] .mp-badge.ozon { color: #0053e2; }
/* Бейдж площадки внутри кастомной выпадашки кабинетов */
.nice-select-btn .mp-badge, .nice-option .mp-badge {
  font-size: 10px; padding: 1px 6px; margin-right: 7px;
  vertical-align: 1px; letter-spacing: 0.4px;
}

/* ===== Тарифы ===== */
.tariff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  max-width: 920px;
}
.tariff-card h2 { margin-top: 14px; }
/* Кнопки «Оплатить»/«Купить токены» — на одной линии по низу карточек */
.tariff-card { display: flex; flex-direction: column; }
.tariff-card form { margin-top: auto; }
/* ===== Кабинеты: грид «домиков» ===== */
.houses {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 20px;
  max-width: 900px;
}
.house {
  width: 190px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  /* «3D-куб»: плотная смещённая тень + мягкая подложка */
  box-shadow: 7px 7px 0 var(--shadow-c), 12px 12px 18px var(--shadow-c);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.house:hover {
  text-decoration: none;
  transform: translate(-2px, -2px);
  border-color: var(--accent);
  box-shadow: 10px 10px 0 var(--shadow-c), 16px 16px 22px var(--shadow-c);
}
.house-title {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  color: var(--ink);
}
.house-title svg { flex: 0 0 auto; color: var(--accent); }
.house-name {
  font-weight: 600;
  font-size: 13.5px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  white-space: nowrap;
}
.house-added { font-size: 12px; color: var(--muted); min-height: 15px; }
.house-add { border-style: dashed; color: var(--muted); }
.house-add:hover { color: var(--ink); }

/* Экран успеха после добавления кабинета */
.added-card { max-width: 480px; text-align: center; }
.salute-img { width: 190px; max-width: 60%; image-rendering: pixelated; }

/* Блоки ключей в формах кабинета: «Статистика» и «Реклама» раздельно */
.key-block {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px 14px;
  margin: 12px 0;
  background: var(--surface-2);
}
.key-block-title { font-weight: 700; font-size: 13.5px; margin-bottom: 2px; }
.key-block-title .hint { font-weight: 400; }
/* Срок действия сохранённого ключа (WB-токены живут 180 дней) */
.key-until { font-weight: 600; font-size: 12px; white-space: nowrap; }
.key-until.ok { color: #15803d; }
.key-until.warn { color: #b45309; }
.key-until.bad { color: #b91c1c; }
/* Мини-кнопки и иконки-кнопки выделения (выбрать/снять/инверсия) —
   нейтральный бизнес-стиль, общий для Автоответов и Склеек */
.rv-mini { margin: 0; padding: 7px 12px; font-size: 12.5px; }
button.rv-ico {
  padding: 8px 10px; line-height: 0;
  border: 1px solid var(--border);
  color: var(--ink-2);
  background: var(--surface-2);
}
button.rv-ico:hover { border-color: var(--accent); color: var(--ink); }
.rv-sel-icons { display: inline-flex; gap: 8px; align-items: center; }
/* Кнопки с переключающимся текстом: ширина резервируется под самый
   длинный вариант (data-w) — текст меняется, кнопка не дёргается.
   Резерв — ::after (второй строкой), чтобы не сбивать базовую линию */
.fixw { display: inline-grid; justify-items: center; }
/* в кнопках тулбара подпись с резервом ширины прижата к иконке, как у остальных
   кнопок (владелец 06.09.2026: «Отчёты (11)» стояла не как другие) */
.view-btn .fixw { justify-items: start; }
.fixw::after { content: attr(data-w); visibility: hidden; height: 0; overflow: hidden; }
.key-block label:first-of-type { margin-top: 6px; }

.cab-form-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  min-width: 0;
}
/* в модалке справа вверху крестик — не наезжаем на него */
.modal-card .cab-form-head { padding-right: 34px; }
.cab-form-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-backdrop[hidden] { display: none !important; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(4, 8, 18, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 24px;
  overflow-y: auto;
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: 720px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 10px 10px 0 var(--shadow-c), 0 24px 60px rgba(0, 0, 0, 0.45);
  padding: 20px 22px;
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  padding: 0;
  line-height: 1;
  font-size: 18px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
}
.modal-close:hover { color: var(--ink); }
.door-svg { width: 84px; height: 84px; }

/* Числовые поля без стрелочек-спиннеров */
input.no-spin::-webkit-outer-spin-button,
input.no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.no-spin { -moz-appearance: textfield; appearance: textfield; }

.tariff-img {
  width: 100%;
  max-height: 170px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}
/* Картинки тарифов меняются вместе с темой */
.tariff-img.img-light { display: none; }
html[data-theme="light"] .tariff-img.img-light { display: block; }
html[data-theme="light"] .tariff-img.img-dark { display: none; }

/* Статус подписки: зелёный — доступ активен, красный — истёк */
.tariff-status.ok { color: var(--good); }
.tariff-status.ok b { color: var(--good); }
.tariff-status.bad { color: var(--critical); }
.tariff-status.bad b { color: var(--critical); }
.tariff-price { font-size: 30px; font-weight: 800; margin: 4px 0 8px; }
.tariff-price span { font-size: 15px; color: var(--muted); font-weight: 500; }
.tariff-periods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 12px 0 4px;
}
.tariff-period {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  margin: 0;
  color: var(--ink);
  font-size: 13px;
}
.tariff-period input { display: none; }
.tariff-period.checked { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -1px; }
.tariff-period em { font-style: normal; color: var(--good); font-size: 12px; font-weight: 700; }
.tariff-period small { color: var(--muted); }

/* Сайдбар при истёкшей подписке: доступны только Тарифы/справка/выход */
#sidebar.sub-locked .nav-item:not(.nav-allowed) {
  opacity: 0.35;
  pointer-events: none;
}

/* Расшифровка по дням: кнопка в строке РНП и оверлей */
/* Кнопки строки РНП (расшифровка/запросы/сезонность) — вертикальной
   стопкой: экономит ширину колонки артикула */
.row-btns { display: inline-flex; flex-direction: column; gap: 2px;
  vertical-align: middle; margin-right: 4px; }
.row-btns .item-open { margin: 0; width: 20px; height: 18px; }
.item-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0 2px 0 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--accent-2);
  cursor: pointer;
  box-shadow: none;
  vertical-align: middle;
}
.item-open:hover { border-color: var(--accent-2); background: var(--surface-2); filter: none; }

.item-drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(4, 8, 18, 0.55);
}
.item-drawer .panel {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  width: 93%;
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden; /* скругляем и углы iframe */
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35);
}
.item-drawer iframe { border: 0; width: 100%; height: 100%; display: block; }
.item-drawer .drawer-close {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 2;
  background: var(--surface);
}

/* Просмотр фото крупно поверх страницы (клик по миниатюре) */
img.thumb, #item-photo { cursor: pointer; }
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(4, 8, 18, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.photo-lightbox img {
  max-width: 90vw;
  max-height: calc(92vh / var(--fz, 1));
  border-radius: 12px;
  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.6);
}

.empty {
  text-align: center;
  color: var(--muted);
  padding: 48px 20px;
}

/* ===== Помощь ===== */
.help-search { margin-bottom: 18px; }
.help-search input { max-width: 520px; }
.help-layout { display: flex; gap: 26px; align-items: flex-start; }
.help-toc {
  position: sticky;
  top: 20px;
  width: 248px;
  flex-shrink: 0;
  max-height: calc(100vh / var(--fz, 1) - 40px);
  overflow-y: auto;
  padding: 6px 0;
}
.help-toc a {
  display: block;
  padding: 6px 13px;
  color: var(--muted);
  font-size: 13.5px;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
}
.help-toc a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.help-toc a.active { color: var(--ink); background: var(--surface-2); border-left-color: var(--accent); }
.help-toc a.dimmed { opacity: 0.35; }
.help-content { flex: 1; min-width: 0; }
.help-content section { margin-bottom: 14px; scroll-margin-top: 16px; }
.help-content h2 { margin: 0 0 10px; font-size: 17px; color: var(--ink); }
.help-content h3 { margin: 16px 0 6px; font-size: 14.5px; color: var(--ink); }
.help-content p, .help-content li { font-size: 14px; color: var(--ink-2); }
.help-content ul, .help-content ol { margin: 8px 0; padding-left: 22px; }
.help-content li { margin: 4px 0; }
.formula {
  font-family: ui-monospace, Consolas, "Cascadia Mono", monospace;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 10px 0;
  overflow-x: auto;
  white-space: pre;
}
.help-table th, .help-table td { text-align: left !important; }
.help-table td:first-child { white-space: nowrap; font-weight: 600; color: var(--ink); }
mark.hl { background: var(--accent); color: var(--accent-ink); border-radius: 3px; padding: 0 1px; }
.nb { white-space: nowrap; }
@media (max-width: 900px) {
  .help-layout { flex-direction: column; }
  .help-toc { position: static; width: 100%; max-height: none; }
}

/* ===== РНП: таблица товаров на весь экран =====
   Страница не скроллится — скроллится сама таблица, поэтому горизонтальный
   скроллбар всегда прижат к низу окна (у селлера может быть 50к строк).
   Шапка прилипает сверху, «Итого» — снизу, первые 3 колонки — слева. */
main.fill {
  display: flex;
  flex-direction: column;
  height: calc(100vh / var(--fz, 1));
  height: calc(100dvh / var(--fz, 1)); /* мобильные: без «прыжка» из-за адресной строки */
  overflow: hidden;
  padding: 22px 24px 12px 28px;
}
main.fill h1 { margin-bottom: 14px; }
main.fill .toolbar { margin-bottom: 12px; }
main.fill .hint { margin: 0 0 10px; }

.table-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.table-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
/* Заметные скроллбары (Chrome/Edge) + Firefox */
.table-scroll { scrollbar-width: auto; scrollbar-color: var(--muted) var(--surface-2); }
.table-scroll::-webkit-scrollbar { width: 13px; height: 13px; }
.table-scroll::-webkit-scrollbar-track { background: var(--surface-2); }
.table-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 7px;
  border: 3px solid var(--surface-2);
}
.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.table-scroll::-webkit-scrollbar-corner { background: var(--surface-2); }

/* border-collapse ломает липкие границы — separate + box-shadow вместо border.
   width: max-content — колонки по содержимому, без переносов в шапке */
.table-scroll table.data { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.table-scroll { --col2-w: 106px; --col3-w: 210px; --thead-h: 31px; }

.table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface);
  border-bottom: none;
  box-shadow: 0 1px 0 var(--grid);
  white-space: normal;              /* заголовки переносятся на 2 строки */
  height: var(--head-h, auto);      /* высота шапки растягивается пользователем */
  vertical-align: middle;
}
/* Компактные колонки: заголовок ужимается и переносится, ячейки с числами
   при необходимости расширяют колонку — цифры не обрезаются */
.table-scroll thead th:nth-child(n+5) { max-width: 96px; }

/* Ручка изменения высоты шапки (нижняя грань заголовков) */
.row-resizer {
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 7px;
  cursor: row-resize;
  z-index: 6;
}
.row-resizer:hover, body.row-resizing .row-resizer {
  background: linear-gradient(transparent 2px, var(--accent) 2px, var(--accent) 4px, transparent 4px);
}
body.row-resizing { cursor: row-resize; user-select: none; }
/* «Итого» — прилипает сразу под шапкой колонок */
.table-scroll tbody tr.totals td {
  position: sticky;
  top: var(--thead-h);
  z-index: 2;
  background: var(--surface-2);
  font-weight: 700;
  border-bottom: none;
  box-shadow: 0 1px 0 var(--grid);
}

/* Ширины первых трёх колонок (фото фиксировано, артикул и название — переменные).
   Само закрепление (sticky left) генерируется в JS: закрепить можно любую колонку. */
.table-scroll th:nth-child(1), .table-scroll td:nth-child(1) {
  width: 52px; min-width: 52px; max-width: 52px;
}
.table-scroll th:nth-child(2), .table-scroll td:nth-child(2) {
  width: var(--col2-w); min-width: var(--col2-w); max-width: var(--col2-w);
  overflow: hidden;
}
.table-scroll th:nth-child(3), .table-scroll td:nth-child(3) {
  width: var(--col3-w); min-width: var(--col3-w); max-width: var(--col3-w);
  overflow: hidden;
}

/* ===== Стандарт проекта (решение владельца 04.09.2026): под липкими
   шапками таблиц — тонкая линия + мягкая тень (как в 10x).
   Псевдоэлементом: box-shadow у ячеек таблицы при border-collapse Chrome
   НЕ рисует. right:-1px накрывает правую рамку th (иначе тень рвётся на
   стыках колонок), overflow:visible — иначе .table-scroll th:nth-child(2/3)
   {overflow:hidden} режет выступающую тень. Список — все липкие thead th
   проекта; новую таблицу с липкой шапкой добавлять сюда */
.table-scroll thead th::after,
#abc-table thead th::after, #lost-table thead th::after, #spp-table thead th::after,
#reco-table thead th::after, #rv-table thead th::after, .se-tbl-wrap thead th::after,
#perf-table thead th::after, #sku-table th::after, #audit-det-table th::after,
#item-table thead th::after, #search-table thead th::after, #cluster-table thead th::after,
.ads-scroll table.data thead th::after, .cd-scroll table.data thead th::after {
  content: ""; position: absolute; left: 0; right: -1px; top: 100%; height: 7px;
  pointer-events: none;
  background: linear-gradient(var(--grid) 0, var(--grid) 1px,
    rgba(11, 18, 32, 0.11) 1px, rgba(11, 18, 32, 0) 100%);
}
.table-scroll thead th:nth-child(n),
#abc-table thead th:nth-child(n), #lost-table thead th:nth-child(n), #spp-table thead th:nth-child(n),
#reco-table thead th:nth-child(n), #rv-table thead th:nth-child(n), .se-tbl-wrap thead th:nth-child(n),
#perf-table thead th:nth-child(n), #sku-table th:nth-child(n), #audit-det-table th:nth-child(n),
#item-table thead th:nth-child(n), #search-table thead th:nth-child(n), #cluster-table thead th:nth-child(n),
.ads-scroll table.data thead th:nth-child(n), .cd-scroll table.data thead th:nth-child(n) {
  overflow: visible;
}

/* Подсветка строки под курсором (перекрывает фон липких ячеек) */
.table-scroll tbody tr:not(.totals):hover td { background: var(--surface-2); }

/* Юнитка: строка нераспределённых расходов и чекбокс распределения */
.table-scroll tbody tr.unalloc td { color: var(--muted); font-style: italic; }

/* Мини-таблица нераспределённых: схлопывается при прокрутке основной вниз */
.unalloc-card {
  padding: 10px 16px 8px;
  margin-bottom: 10px;
  max-height: 140px;
  overflow: hidden;
  transition: max-height 0.22s ease, opacity 0.18s ease,
              margin 0.22s ease, padding 0.22s ease, border-width 0.22s ease;
}
.unalloc-card.collapsed {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
}
.unalloc-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.unalloc-title .hint { font-weight: 400; }
/* Галочка распределения — в шапке карточки, а не в тулбаре */
.unalloc-title .dist-check { height: auto; padding: 7px 14px; font-weight: 400; }
.unalloc-table { width: auto; min-width: 60%; }
.unalloc-table th { text-align: right; }
.unalloc-table th:first-child, .unalloc-table td:first-child { text-align: right; }

/* Пикер отчётов реализации */
.report-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}
.report-row:hover { background: var(--surface-2); }
.report-row input { width: 15px; height: 15px; accent-color: var(--accent); margin: 2px 0 0; flex-shrink: 0; }
.report-row span { display: flex; flex-direction: column; line-height: 1.35; }
.report-row small { color: var(--muted); font-size: 11.5px; }
.dist-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 12px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.dist-check input { width: 15px; height: 15px; accent-color: var(--accent); margin: 0; }

/* Колонка с активной сортировкой и колонка с фильтром */
.table-scroll thead th.sorted { color: var(--accent-2); }
.table-scroll thead th.filtered { color: var(--accent); }

/* Стрелочки-спиннеры у числового поля фильтра не нужны */
.cp-filter input[type="number"]::-webkit-outer-spin-button,
.cp-filter input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cp-filter input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Попап колонки: сортировка + фильтр (компактный, шрифты как в таблице) */
.col-popup {
  position: fixed;
  z-index: 80;
  width: 226px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px var(--shadow-c);
  padding: 10px 12px 12px;
  font-size: 12.5px;
}
.col-popup-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.col-popup-title { font-weight: 700; font-size: 12.5px; }
.cp-hide-ico {
  margin: 0;
  padding: 0;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  box-shadow: none;
  color: var(--muted);
}
.cp-hide-ico:hover { color: var(--critical); background: var(--surface-2); filter: none; }
.col-popup-sec {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 10px 0 5px;
}
.cp-sort { display: flex; gap: 6px; }
.cp-sort button { flex: 1; margin: 0; padding: 3px 5px; font-size: 15px; line-height: 1.3; }
.cp-sort button.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.cp-filter { display: flex; flex-direction: column; gap: 6px; }
.cp-filter select, .cp-filter input { padding: 6px 9px; font-size: 12.5px; }
.cp-actions { display: flex; gap: 6px; margin-top: 10px; }
.cp-actions button { flex: 1; margin: 0; padding: 6px 8px; font-size: 12px; }
/* «Между»: второе поле «до» и галочка «включая границы» (rnpBetween в base.html, 10.09.2026) */
.cp-between { display: flex; flex-direction: column; gap: 6px; }
.cp-incl { display: flex; gap: 8px; align-items: center; margin: 0; padding: 2px 2px 0; cursor: pointer; font-size: 12.5px; font-weight: 400; color: var(--ink); }
.cp-filter .cp-incl input { width: 15px; height: 15px; margin: 0; padding: 0; accent-color: #6b8fc9; }

/* Чипсы активных фильтров над таблицей */
#filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  font-size: 12.5px;
  color: var(--ink);
}
.chip button {
  margin: 0;
  padding: 0 6px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 14px;
  line-height: 1;
}
.chip button:hover { color: var(--critical); filter: none; }
.chip-clear {
  margin: 0;
  padding: 4px 12px;
  font-size: 12.5px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  box-shadow: none;
}
.chip-clear:hover { color: var(--critical); border-color: var(--critical); filter: none; }

/* Разделитель для изменения ширины колонки (в шапке) */
.col-resizer {
  position: absolute;
  top: 0; right: 0;
  width: 10px; height: 100%;
  cursor: col-resize;
  z-index: 5;
}
.col-resizer::after {
  content: '';
  position: absolute;
  top: 18%; bottom: 18%; right: 3px;
  width: 2px;
  background: var(--grid);
  border-radius: 1px;
  /* палочка видна только при наведении на ручку (просьба владельца) */
  opacity: 0;
  transition: opacity 0.12s ease;
}
.col-resizer:hover::after, body.col-resizing .col-resizer::after { opacity: 1; }
/* Направляющие ресайза: во время перетаскивания двигается только линия,
   таблица пересчитывается один раз на отпускании */
.rs-guide-v { position: absolute; top: 0; width: 2px; background: var(--accent);
  z-index: 60; pointer-events: none; display: none; }
.rs-guide-h { position: absolute; left: 0; height: 2px; background: var(--accent);
  z-index: 60; pointer-events: none; display: none; }
.col-resizer:hover::after, body.col-resizing .col-resizer::after { background: var(--accent); }
body.col-resizing { cursor: col-resize; user-select: none; }

/* Кнопки вида: сетка 2×2 справа (Пресеты|Колонки / [резерв|Отчёты]|Excel),
   стилизованы под заголовки таблицы */
.view-btns {
  position: relative;
  margin-left: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 5px;
}
.view-btns .col-chooser { position: static; margin-left: 0; min-width: 0; }
.view-btn-spacer { min-width: 0; }
.view-btn span { overflow: hidden; text-overflow: ellipsis; }
.view-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin: 0;
  padding: 4px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  box-shadow: none;
  cursor: pointer;
  white-space: nowrap;
}
.view-btn:hover { color: var(--accent); border-color: var(--accent); filter: none; }
.view-btn svg { flex-shrink: 0; }
.view-btns .col-menu { top: calc(100% + 6px); right: 0; text-transform: none; }

/* Заголовок внутри выпадающего меню */
.menu-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: normal;
  padding: 2px 8px 8px;
  border-bottom: 1px solid var(--grid);
  margin-bottom: 6px;
}

/* Рамка вокруг выбора периода — той же высоты, что и поле поиска рядом */
.period-box {
  margin: 0;
  height: 44px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.toolbar #f-search { height: 44px; }
.period-box select, .period-box input[type="date"] {
  border: none;
  background: transparent;
  padding: 3px 4px;
  font-size: 13.5px;
}
.period-box select:focus, .period-box input[type="date"]:focus { outline: none; }

/* Теги товаров: до 10 на товар, переносятся на следующую строку.
   Цвет — по хэшу названия (tc0..tc9), одинаковый для одного тега везде */
td.tags-cell { text-align: left; cursor: pointer; max-width: 170px; white-space: normal; }
.tag {
  --th: 210; /* оттенок, задаётся классом tc0..tc9 */
  display: inline-block;
  background: hsla(var(--th), 55%, 60%, 0.16);
  border: 1px solid hsla(var(--th), 55%, 55%, 0.5);
  border-radius: 999px;
  padding: 0 7px;
  margin: 1px 3px 1px 0;
  font-size: 11px;
  line-height: 17px;
  white-space: nowrap;
  color: hsl(var(--th), 65%, 72%);
}
html[data-theme="light"] .tag {
  background: hsla(var(--th), 60%, 45%, 0.10);
  border-color: hsla(var(--th), 50%, 45%, 0.45);
  color: hsl(var(--th), 65%, 32%);
}
.tc0 { --th: 25; }  .tc1 { --th: 160; } .tc2 { --th: 210; } .tc3 { --th: 275; }
.tc4 { --th: 330; } .tc5 { --th: 0; }   .tc6 { --th: 45; }  .tc7 { --th: 100; }
.tc8 { --th: 190; } .tc9 { --th: 240; }
/* Группы тегов (14.09.2026): префикс группы мельче, тег выключенной группы скрыт */
.tag .tg-pre { font-size: 9.5px; opacity: .75; font-weight: 600; letter-spacing: .01em; }
.tag.tg-off { display: none; }
.tag-add {
  color: var(--muted);
  font-weight: 700;
  opacity: 0.45;
}
tr:hover .tag-add { opacity: 1; color: var(--accent-2); }
/* Клик по тегу в таблице убирает его — подсказываем красным при наведении */
.tags-cell .tag:hover { border-color: var(--critical); color: var(--critical); }
.tag-popup { width: 250px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 8px; }
.tag-list .tag { cursor: pointer; }
.tag-list .tag b { font-weight: 700; margin-left: 4px; opacity: 0.7; }
.tag-list .tag:hover { border-color: var(--critical); color: var(--critical); }
.tag-empty { color: var(--muted); font-size: 12px; }

/* Выбор видимых колонок */
.col-chooser { position: relative; margin-left: auto; }
.col-chooser > button { margin-top: 0; }
.col-menu {
  display: none;
  position: absolute;
  right: 0; top: calc(100% + 6px);
  min-width: 230px;
  max-height: min(420px, calc(60vh / var(--fz, 1)));
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 24px var(--shadow-c);
  padding: 8px;
  z-index: 60;
}
.col-chooser.open .col-menu { display: block; }
.col-menu label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 13.5px;
  cursor: pointer;
}
.col-menu label:hover { background: var(--surface-2); }
.col-menu input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); margin: 0; }
.col-menu .col-row { display: flex; align-items: center; gap: 2px; }
.col-menu .col-row label { flex: 1; }
.pin-btn {
  margin: 0;
  padding: 0;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  box-shadow: none;
  color: var(--muted);
  opacity: 0.55;
  cursor: pointer;
}
.pin-btn:hover { color: var(--accent); background: var(--surface-2); opacity: 1; filter: none; }
.pin-btn.pinned { color: var(--accent); opacity: 1; }
.pin-btn.pinned svg { fill: currentColor; }
.col-menu .col-menu-all {
  width: 100%;
  margin: 6px 0 2px;
  padding: 7px 10px;
  font-size: 13px;
}

/* Меню пресетов */
.preset-menu { min-width: 258px; }
.preset-sec {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 8px 2px;
}
/* Заголовок группы в меню «Колонки»: сероватая плашка + цветовая метка группы */
.col-sec {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--surface-2);
  border-left: 3px solid var(--muted);
  border-radius: 0 6px 6px 0;
  padding: 5px 8px;
  margin: 8px 0 4px;
}
/* Цветовая метка пресета/фильтра — квадратик со скруглением */
.p-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  margin-right: 7px;
  vertical-align: baseline;
  flex: none;
}
/* Нечётное число кнопок тулбара: последняя растягивается на обе колонки —
   грид 2×N остаётся без дыры */
.view-btns .col-chooser:nth-child(odd):last-child { grid-column: 1 / -1; }
.preset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}
.preset-row:hover { background: var(--surface-2); }
.preset-row.active { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.preset-del {
  margin: 0;
  padding: 0 6px;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
}
.preset-del:hover { color: var(--critical); filter: none; }
.preset-save {
  border-top: 1px solid var(--grid);
  margin-top: 8px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.preset-save input { font-size: 13px; }
.preset-save button { margin: 0; padding: 8px 10px; font-size: 13px; }

/* ===== Аудит магазина ===== */
.audit-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: 1200px;
}
.audit-controls select { flex: 1; margin: 0; }
.audit-controls button { margin: 0; white-space: nowrap; }

#audit-progress { max-width: 1200px; }
.audit-progress-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.audit-progress-pct { color: var(--accent); }
.audit-bar {
  height: 8px;
  margin-top: 12px;
  border-radius: 6px;
  background: var(--grid);
  overflow: hidden;
}
.audit-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 6px;
  background: var(--accent);
  transition: width 0.6s ease;
}
.audit-spinner {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 3px solid var(--grid);
  border-top-color: var(--accent);
  animation: audit-spin 0.9s linear infinite;
}
@keyframes audit-spin { to { transform: rotate(360deg); } }

/* Отчёт тянется до 1200px: одна колонка на ноутбуке, две на мониторе */
#audit-report { max-width: 1200px; }
.audit-gauge-card {
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 22px;
}
.audit-gauge { width: 260px; max-width: 100%; }
.gauge-track {
  fill: none;
  stroke: var(--grid);
  stroke-width: 12;
  stroke-linecap: round;
}
.gauge-value {
  fill: none;
  stroke: var(--accent);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 0.9s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.4s;
}
.gauge-needle {
  transform-origin: 100px 100px;
  transform: rotate(-90deg);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.gauge-needle line { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.gauge-needle circle { fill: var(--ink); }
.gauge-score {
  margin-top: -34px;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.gauge-score small { font-size: 13px; font-weight: 500; color: var(--muted); }
.gauge-label { color: var(--muted); font-size: 13px; margin-top: 6px; }

#audit-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
  gap: 14px;
  align-items: start;
}
#audit-checks .audit-check { margin: 0; }
.audit-check { border-left: 3px solid var(--border); }
.audit-check.good { border-left-color: var(--au-good); }
.audit-check.warn { border-left-color: var(--au-warn); }
.audit-check.bad  { border-left-color: var(--au-bad); }
.audit-check-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.audit-badge {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.audit-badge.good { background: color-mix(in srgb, var(--au-good) 18%, transparent); color: var(--au-good); }
.audit-badge.warn { background: color-mix(in srgb, var(--au-warn) 18%, transparent); color: var(--au-warn); }
.audit-badge.bad  { background: color-mix(in srgb, var(--au-bad) 18%, transparent); color: var(--au-bad); }
.audit-badge.na   { background: var(--surface-2); color: var(--muted); }
.audit-line { font-size: 13.5px; margin: 3px 0; }

.audit-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
  border: 1px solid var(--good);
  background: color-mix(in srgb, var(--good) 10%, var(--surface));
}
/* Инструкция «Как создать ключ» в форме добавления кабинета */
.key-howto-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.key-howto-btn:hover { filter: brightness(1.05); }
.key-howto-btn svg { color: var(--accent); flex-shrink: 0; }
.key-help-card { max-width: 560px; max-height: calc(90vh / var(--fz, 1)); overflow-y: auto; }
.key-help-steps { margin: 10px 0 12px; padding-left: 20px; }
.key-help-steps li { margin: 7px 0; line-height: 1.45; }
/* Обязательные категории токена — колонкой, как пункты меню */
.key-cats {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
  padding: 0;
}
.key-cats li {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 13px;
  line-height: 1.35;
}
.key-help-warn {
  margin-top: 5px;
  padding: 8px 12px;
  border-left: 3px solid var(--critical);
  border-radius: 6px;
  background: color-mix(in srgb, var(--critical) 10%, var(--surface));
  font-size: 13px;
}
.key-help-img {
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* ===== Демо-режим ===== */
/* Картинка приветствия — своя для каждой темы; окантовка как в «Тарифах» */
.demo-start-img {
  border: 1px solid var(--border);
  border-radius: 8px;
}
html[data-theme="light"] .demo-start-img.img-dark { display: none; }
html:not([data-theme="light"]) .demo-start-img.img-light { display: none; }
.demo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  margin-bottom: 14px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.demo-banner-btn {
  flex-shrink: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
}
.demo-banner-btn:hover { text-decoration: none; filter: brightness(1.08); }
/* «Кабинеты» в меню и домик «Добавить магазин» подсвечены всё время
   демо-сессии: золотистая заливка + мигающая рамка; цвет текста обычный */
.nav-item.demo-glow, .house-add.demo-glow {
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  animation: demo-glow-pulse 2s ease-in-out infinite;
}
.nav-item.demo-glow { border-radius: 8px; }
@keyframes demo-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  50% { box-shadow: 0 0 8px 2px color-mix(in srgb, var(--accent) 35%, transparent); }
}

/* Баннер «подключите магазин» на дашборде (нет ни одного ключа) */
.key-hint-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  margin-bottom: 14px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.key-hint-btn {
  flex-shrink: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 8px;
  text-decoration: none;
}
.key-hint-btn:hover { text-decoration: none; filter: brightness(1.08); }

.audit-cta-logo {
  width: 40px;
  height: 46px;
  flex-shrink: 0;
}
.audit-cta-btn {
  flex-shrink: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 8px;
  text-decoration: none;
}
.audit-cta-btn:hover { text-decoration: none; filter: brightness(1.08); }

/* Раскраска слабых мест (РНП, ABC): фоновые сигналы для ячеек */
.data td.p-bad { background: color-mix(in srgb, var(--critical) 18%, transparent); }
.data td.p-warn { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.data td.p-good { background: color-mix(in srgb, var(--good) 13%, transparent); }
#paint-btn.on { border-color: var(--accent); color: var(--accent); }

/* ===== iOS-пакет микроанимаций ===== */
@media (prefers-reduced-motion: no-preference) {
  /* Выпадающие меню: раскрытие из кнопки (закрытие мгновенное — как в iOS) */
  .col-chooser.open .col-menu {
    animation: menu-in 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.04);
    transform-origin: top right;
  }
  /* Модальные окна: подложка и карточка анимируются раздельно */
  .modal-backdrop:not([hidden]) { animation: fade-in 0.18s ease-out; }
  .modal-backdrop:not([hidden]) .modal-card {
    animation: card-in 0.22s cubic-bezier(0.34, 1.3, 0.5, 1);
  }
  /* Кнопки: тактильное «нажатие» */
  button:active:not(:disabled) { transform: scale(0.97); }
}
@keyframes menu-in { from { opacity: 0; transform: scale(0.95) translateY(-4px); } }

/* Модальные подтверждения (uiConfirm/uiAlert, base.html) — вместо
   браузерных confirm()/alert(): окно в стиле приложения поверх страницы */
.ui-modal-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(8, 12, 20, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ui-modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  max-width: 460px; width: 100%; padding: 18px 20px;
}
.ui-modal h3 { margin: 0 0 8px; font-size: 14.5px; }
.ui-modal p { margin: 0 0 16px; color: var(--ink-2); font-size: 13px;
  line-height: 1.55; white-space: pre-line; }
.ui-modal .um-btns { display: flex; gap: 10px; justify-content: flex-end; }
@media (prefers-reduced-motion: no-preference) {
  .ui-modal-overlay { animation: um-fade 0.14s ease; }
  .ui-modal { animation: menu-in 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.04);
    transform-origin: center; }
  .ui-modal-overlay.closing { animation: um-fade 0.13s ease-in reverse forwards; }
}
@keyframes um-fade { from { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes card-in { from { opacity: 0; transform: scale(0.96) translateY(10px); } }

/* Перетягивание колонки: исходный заголовок «поднят», линия вставки пульсирует,
   переехавшая колонка вспыхивает янтарным, чтобы глаз её нашёл */
th.col-dragging { opacity: 0.45; }
.col-drop-line {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  z-index: 9;
  pointer-events: none;
  animation: drop-pulse 0.9s ease-in-out infinite;
}
@keyframes drop-pulse { 50% { opacity: 0.45; } }
.col-flash { animation: col-flash 0.7s ease-out; }
@keyframes col-flash { from { background-color: rgba(255, 176, 32, 0.35); } }

/* ===== Артикулы чипами — стандарт всех разделов (владелец 06.09.2026, как в
   РНП): «Артикул» — код площадки (WB nmID / Ozon числовой SKU, ссылка на
   витрину), «Артикул продавца» — у Ozon offer_id, у WB артикул из карточки,
   полное название — в подсказке. РНП держит те же правила у себя в шаблоне ===== */
.glue-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; line-height: 16px;
  background: #16323d; border: 1px solid #2a5261; color: var(--ink-2); text-decoration: none; max-width: 240px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
html[data-theme="light"] .glue-chip { background: #ddeef6; border-color: #b7d9e6; }
/* чип артикула — ссылка: при наведении заметная подсветка цветом, без подчёркивания (владелец 12.09.2026) */
.glue-chip { transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
html a.glue-chip:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 24%, var(--surface)); border-color: var(--accent); color: var(--accent); }
/* светлая тема: янтарный текст на кремовом сливался — фон насыщеннее, текст тёмный */
html[data-theme="light"] a.glue-chip:hover { background: color-mix(in srgb, var(--accent) 55%, #fff); border-color: color-mix(in srgb, var(--accent) 80%, #000); color: #1c2a3f; }
/* Список значений в попапе фильтра колонки — общий rnpSuggest (base.html, 12.09.2026):
   свой список вместо нативного datalist, растягивается за правый нижний угол, размер
   запоминается (localStorage rnp-suggest-size) и один для всех таблиц */
.rnp-suggest { position: fixed; z-index: 420; display: none; box-sizing: border-box; min-width: 150px; min-height: 56px;
  max-height: 70vh; overflow: auto; resize: both; padding: 4px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
.rnp-suggest .rs-item { padding: 6px 10px; border-radius: 6px; font-size: 13px; line-height: 1.3; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.rnp-suggest .rs-item:hover, .rnp-suggest .rs-item.on { background: var(--surface-2); }
.rnp-suggest .rs-item b { font-weight: 700; color: var(--accent); }
.rnp-suggest .rs-empty { padding: 6px 10px; font-size: 12px; color: var(--muted); }
.rnp-suggest::-webkit-resizer { background: linear-gradient(135deg, transparent 50%, var(--muted) 50%, var(--muted) 60%,
  transparent 60%, transparent 75%, var(--muted) 75%, var(--muted) 85%, transparent 85%); border-radius: 0 0 7px 0; opacity: .6; }

/* ===== Перетаскивание блоков-виджетов — стандарт проекта (06.09.2026):
   контейнер .sec-box, дети [data-sec], ручка ⋮⋮ .sec-grip в заголовке
   карточки; логика — window.initSectionDrag в base.html (Сводка — исходная
   встроенная версия с теми же классами) ===== */
.sec-grip { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 0 2px 0 -4px;
  border-radius: 5px; color: var(--muted); opacity: .45; cursor: grab; touch-action: none; flex: none; }
.feat:hover .sec-grip { opacity: .9; }
.sec-grip:hover { background: var(--surface-2); color: var(--ink); }
/* зачёркнутый глазик рядом с ручкой — скрыть блок (widgetHideBtn в base.html) */
.sec-hide { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 0 5px 0 0; padding: 0;
  border: none; border-radius: 5px; background: none; box-shadow: none; color: var(--muted); opacity: .45; cursor: pointer; flex: none; }
.feat:hover .sec-hide { opacity: .9; }
.sec-hide:hover { background: var(--surface-2); color: var(--p-bad); filter: none; }
.sec-hide:active { transform: none; }
[data-sec].sec-dragging { opacity: .45; }
[data-sec].sec-dragging > .feat, .feat[data-sec].sec-dragging { outline: 2px dashed var(--accent); outline-offset: -2px; }
#sec-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; padding: 6px 12px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--accent); box-shadow: 0 10px 30px var(--shadow-c);
  font-size: 12px; font-weight: 700; white-space: nowrap; }
body.sec-dragging { cursor: grabbing; user-select: none; }
body.sec-dragging .sec-grip { cursor: grabbing; }
/* перестановка высокого ряда меняет раскладку под курсором — scroll anchoring
   Chrome «доворачивал» прокрутку, и блок метался туда-сюда */
body.sec-dragging .sec-box, body.sec-dragging .sec-box * { overflow-anchor: none; }
/* Перетаскивание KPI-плиток (initTileDrag в base.html; Сводка — своя версия с теми же классами) */
.kpi-row.tiles-draggable .kpi { cursor: grab; position: relative; }
.kpi.dragging { opacity: .35; }
.kpi.tile-ghost { position: fixed; left: 0; top: 0; z-index: 1000; margin: 0; pointer-events: none; cursor: grabbing;
  box-shadow: 0 14px 32px var(--shadow-c); animation: none !important; transition: none !important; }
body.tiles-dragging { cursor: grabbing; user-select: none; }
body.tiles-dragging .kpi { animation: none !important; cursor: grabbing; }

/* Сегмент-переключатели: скользящая «таблетка» под активным пунктом */
.seg-host { position: relative; }
.seg-host > .seg-pill {
  position: absolute;
  z-index: 0;
  border: 1px solid var(--accent);
  background: rgba(255, 176, 32, 0.13);
  border-radius: 7px;
  opacity: 0;
  pointer-events: none;
  transition:
    left 0.18s cubic-bezier(0.3, 0.9, 0.35, 1.04),
    top 0.18s cubic-bezier(0.3, 0.9, 0.35, 1.04),
    width 0.18s ease, height 0.18s ease, opacity 0.12s ease;
}
.seg-host > *:not(.seg-pill) { position: relative; z-index: 1; }
/* Активная кнопка: рамку и фон рисует таблетка, кнопке остаётся цвет текста */
.seg-host .view-btn.active { border-color: transparent; background: transparent; }

/* ===== iOS-пакет 2: разделы, меню, сайдбар, баннеры, тема ===== */
@media (prefers-reduced-motion: no-preference) {
  /* Появление раздела: контент вплывает снизу при загрузке */
  body > main { animation: page-in 0.22s cubic-bezier(0.25, 0.9, 0.3, 1); }
  /* Каскад подпунктов при раскрытии группы меню */
  .nav-group.just-opened .nav-sub .nav-item { animation: sub-in 0.16s ease-out backwards; }
  .nav-group.just-opened .nav-sub .nav-item:nth-child(2) { animation-delay: 0.03s; }
  .nav-group.just-opened .nav-sub .nav-item:nth-child(3) { animation-delay: 0.06s; }
  .nav-group.just-opened .nav-sub .nav-item:nth-child(4) { animation-delay: 0.09s; }
  .nav-group.just-opened .nav-sub .nav-item:nth-child(5) { animation-delay: 0.12s; }
  .nav-group.just-opened .nav-sub .nav-item:nth-child(n+6) { animation-delay: 0.15s; }
  /* Разворачивание сайдбара: подписи мягко проявляются (класс вешает JS
     только при ручном разворачивании — на обычную загрузку не влияет) */
  html.nav-animating:not(.nav-collapsed) .nav-label,
  html.nav-animating:not(.nav-collapsed) .logo-text {
    animation: label-in 0.18s ease-out 0.06s backwards;
  }
  /* Баннеры и уведомления въезжают сверху с пружинкой */
  .banner { animation: banner-in 0.28s cubic-bezier(0.34, 1.2, 0.5, 1); }
}
/* Кривая сворачивания панели — мягче прежней линейной */
#sidebar { transition: width 0.18s cubic-bezier(0.3, 0.9, 0.35, 1.02); }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes sub-in { from { opacity: 0; transform: translateX(-8px); } }
@keyframes label-in { from { opacity: 0; transform: translateX(-6px); } }
@keyframes banner-in { from { opacity: 0; transform: translateY(-10px); } }
/* Смена темы: кроссфейд всех цветов; класс живёт только на время переключения */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, fill 0.25s ease, stroke 0.25s ease !important;
}

/* ===== Кастомные выпадающие списки (обёртка над select в тулбарах) ===== */
.nice-select { position: relative; display: inline-block; }
/* Выбор товара с фото и поиском (rnpProductPicker, калькуляторы 16.09.2026) — в стиле nice-select */
.rpp { position: relative; display: block; }
.rpp > select { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.rpp-btn { display: flex; align-items: center; gap: 9px; width: 100%; margin: 0; padding: 6px 12px; min-height: 44px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px; color: var(--ink); font: inherit; cursor: pointer; box-shadow: none; text-align: left; }
.rpp-btn:hover { border-color: var(--accent); filter: none; }
.rpp-btn .chev { color: var(--muted); margin-left: auto; flex: none; transition: transform .15s ease; }
.rpp.open .rpp-btn .chev { transform: rotate(180deg); }
.rpp-cur { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.rpp-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 320px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 14px 44px var(--shadow-c); padding: 8px; display: none; z-index: 75; }
.rpp.open .rpp-menu { display: block; }
.rpp-q { width: 100%; box-sizing: border-box; margin: 0 0 6px; padding: 8px 10px; font-size: 13px; }
.rpp-list { max-height: calc(46vh / var(--fz, 1)); overflow-y: auto; }
.rpp-it { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 8px; cursor: pointer; }
.rpp-it:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.rpp-it.sel { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.rpp-img { width: 30px; height: 40px; border-radius: 5px; object-fit: cover; flex: none; background: var(--surface-2); border: 1px solid var(--border); }
.rpp-img.noimg { display: inline-block; }
.rpp-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.rpp-t b { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpp-t .rpp-n { font-weight: 500; color: var(--accent-2, var(--accent)); }
.rpp-t small { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpp-empty { padding: 10px; color: var(--muted); font-size: 12.5px; text-align: center; }
.nice-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
  pointer-events: none;
}
.nice-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  box-shadow: none;
  white-space: nowrap;
}
.nice-select-btn:hover { border-color: var(--accent); filter: none; }
.nice-select-btn .chev { color: var(--muted); transition: transform 0.15s ease; flex: none; }
.nice-select.open .nice-select-btn .chev { transform: rotate(180deg); }
.nice-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-height: calc(46vh / var(--fz, 1));
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 44px var(--shadow-c);
  padding: 5px;
  display: none;
  z-index: 75;
}
.nice-select.open .nice-select-menu { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .nice-select.open .nice-select-menu {
    animation: menu-in 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.04);
    transform-origin: top left;
  }
  /* Пункты появляются лёгким каскадом */
  .nice-select.open .nice-option { animation: sub-in 0.14s ease-out backwards; }
  .nice-select.open .nice-option:nth-child(2) { animation-delay: 0.015s; }
  .nice-select.open .nice-option:nth-child(3) { animation-delay: 0.03s; }
  .nice-select.open .nice-option:nth-child(4) { animation-delay: 0.045s; }
  .nice-select.open .nice-option:nth-child(5) { animation-delay: 0.06s; }
  .nice-select.open .nice-option:nth-child(6) { animation-delay: 0.075s; }
  .nice-select.open .nice-option:nth-child(n+7) { animation-delay: 0.09s; }
}
.nice-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 11px;
  border-radius: 7px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s ease;
}
.nice-option:hover { background: var(--surface-2); }
.nice-option.sel { color: var(--accent); font-weight: 600; }
.nice-option.sel::after { content: '✓'; font-weight: 700; }
.nice-option.dis { opacity: 0.45; pointer-events: none; }

/* Попапы колонок (сортировка/фильтр, теги): появление в стиле меню —
   animation стартует в момент display:none → block при каждом открытии;
   закрытие — обратная анимация через popupHide() (base.html) */
@media (prefers-reduced-motion: no-preference) {
  .col-popup {
    animation: menu-in 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.04);
    transform-origin: top left;
  }
  .col-popup.closing {
    animation: menu-out 0.13s ease-in forwards;
  }
}
@keyframes menu-out {
  to { opacity: 0; transform: scale(0.95) translateY(-4px); }
}

/* Кастомная выпадашка внутри fieldset-«коробки» периода: рамку рисует сама
   кнопка — коробка становится прозрачной (иначе двойная рамка) */
.period-box:has(> .nice-select) {
  border: none;
  background: none;
  padding: 0;
  height: auto;
  gap: 8px;
}
/* Даты произвольного периода в «раздетой» коробке получают свою рамку */
.period-box:has(> .nice-select) input[type="date"] {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 8px 10px;
  height: 41px;
}

/* Светлая тема: выбранный пункт выпадашки — жирный чёрный (янтарь на
   светлом фоне теряется), галочка тоже тёмная */
html[data-theme="light"] .nice-option.sel { color: var(--ink); font-weight: 700; }

/* Выпадашка у нижнего края экрана раскрывается вверх */
.nice-select.drop-up .nice-select-menu { top: auto; bottom: calc(100% + 6px); }
@media (prefers-reduced-motion: no-preference) {
  .nice-select.drop-up.open .nice-select-menu { transform-origin: bottom left; }
}

/* «Таблетка» активного пункта главного меню: подложка с янтарной полоской —
   единый элемент, который при клике плавно переезжает на выбранный пункт */
.side-nav { position: relative; }
.side-nav .nav-pill {
  position: absolute;
  left: 0;
  z-index: 0;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  opacity: 0;
  pointer-events: none;
  transition:
    top 0.22s cubic-bezier(0.3, 0.9, 0.35, 1.04),
    height 0.18s ease, width 0.18s ease, opacity 0.15s ease;
}
.side-nav .nav-item, .side-nav .nav-group { position: relative; z-index: 1; }
/* Фон и полоску активного пункта рисует таблетка */
.side-nav:has(.nav-pill) .nav-item.active {
  background: transparent;
  border-left-color: transparent;
}

/* Значок «?» с подсказкой (как в Сценариях Автоответов). База — absolute
   в правом углу .card; модификатор .inline — рядом с заголовком раздела */
.tpl-help { position: absolute; top: 12px; right: 14px; z-index: 5;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border); color: var(--muted);
  font-size: 13px; font-weight: 700; cursor: help; }
.tpl-help:hover { color: var(--accent); border-color: var(--accent); }
/* Тултип: вырастание с лёгким овершутом (пружинка в стиле iOS),
   исчезание — быстрое затухание без пружины */
/* Скрытый пузырь схлопнут в 0 (width/height/padding/border): невидимый,
   он всё равно давал странице горизонтальную прокрутку, когда значок
   стоит у правого края (карточки Сводки, 05.09.2026). Раскрытие — сразу,
   схлопывание — с задержкой на время затухания */
.tpl-help::after { content: attr(data-tip); position: absolute;
  right: 0; top: calc(100% + 8px); width: 0; height: 0; max-width: 80vw;
  overflow: hidden; box-sizing: border-box;
  background: var(--surface); border: 0 solid var(--border);
  border-radius: 10px; padding: 0; font-size: 12px;
  font-weight: 400; color: var(--ink-2); line-height: 1.55;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); opacity: 0;
  transform: scale(0.9) translateY(-6px); transform-origin: top right;
  pointer-events: none; z-index: 1350;
  transition: opacity 0.12s ease-in, transform 0.14s ease-in,
    width 0s linear 0.14s, height 0s linear 0.14s, padding 0s linear 0.14s,
    border-width 0s linear 0.14s;
  text-align: left; white-space: normal; }
.tpl-help:hover::after, .tpl-help:focus::after { opacity: 1;
  width: 420px; height: auto; padding: 10px 12px; border-width: 1px;
  transform: scale(1) translateY(0);
  transition: opacity 0.15s ease-out,
    transform 0.24s cubic-bezier(0.34, 1.3, 0.5, 1); }
.tpl-help.inline { position: relative; top: auto; right: auto;
  margin-left: 10px; vertical-align: 3px; flex: none; }
/* при наведении значок поднимается над sticky-шапками таблиц */
.tpl-help.inline:hover, .tpl-help.inline:focus { z-index: 1350; }
.tpl-help.inline::after { right: auto; left: -8px; transform-origin: top left; }
/* Значок у правого края окна: пузырь раскрывается влево (класс ставит
   base.html при наведении/фокусе) */
.tpl-help.inline.tpl-flip::after { left: auto; right: -8px; transform-origin: top right; }
@media (prefers-reduced-motion: reduce) {
  .tpl-help::after { transition: opacity 0.12s; transform: none; }
}

/* Баннер «План месяца не задан» — стандарт проекта (Метрики, Пульс):
   заголовок, пояснение что именно пустует, кнопка «Задать план».
   Показывается только когда плана нет (display переключает JS страницы) */
.plan-banner { display:flex; align-items:center; gap:12px; margin:0 0 12px; padding:9px 14px;
  border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius:10px;
  background:color-mix(in srgb, var(--accent) 9%, var(--surface)); color:var(--accent); }
.plan-banner .pb-text { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; color:var(--ink); }
.plan-banner .pb-text b { font-size:12.5px; }
.plan-banner .pb-text span { font-size:11.5px; color:var(--muted); }
.plan-banner .pb-btn { flex:none; text-decoration:none; background:var(--accent); color:var(--accent-ink, #1b1b1b);
  font-weight:700; font-size:12px; padding:7px 14px; border-radius:8px; white-space:nowrap; }
.plan-banner .pb-btn:hover { filter:brightness(1.06); }
/* Баннер первичного сбора кабинета (base.html, 07.09.2026): несколько
   кабинетов — строки через разделитель; провал без успехов — красный */
.plan-banner.sync-banner .pb-text { gap:2px; }
.plan-banner.sync-banner .sync-sep { display:block; height:1px; background:var(--grid); margin:5px 0; }
.plan-banner.sync-banner.sync-err { border-color:color-mix(in srgb, var(--critical) 45%, var(--border));
  background:color-mix(in srgb, var(--critical) 8%, var(--surface)); color:var(--critical); }
/* «Скрыть» — баннер сворачивается в значок «!» рядом с «?» в заголовке
   (initPlanBanner в base.html); значок возвращает баннер */
.plan-banner .pb-hide, .demo-banner .pb-hide { flex:none; margin:0; padding:7px 12px; font:inherit; font-size:12px; font-weight:600; border-radius:8px;
  border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; box-shadow:none; white-space:nowrap; }
.plan-banner .pb-hide:hover, .demo-banner .pb-hide:hover { color:var(--ink); border-color:var(--muted); filter:none; }
/* Обойма значков в заголовке раздела (▶ ? ! i) — одна группа: один размер,
   одинаковые отступы и вертикальное выравнивание (владелец 06.09.2026) */
h1 .tpl-help.inline, h1 .plan-mini { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  width:22px; height:22px; margin:0 0 0 8px; padding:0; vertical-align:middle; position:relative; top:-1px; line-height:1; }
h1 .plan-mini { font-size:13px; }
/* демо-баннер: значок «i» — жёлтый (акцент темы), ставится в h1 раздела скриптом base.html */
.plan-mini.demo-mini { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); font-style:italic; font-family:Georgia, serif; }
.plan-mini.demo-mini:hover { background:color-mix(in srgb, var(--accent) 26%, transparent); }
.plan-mini.demo-mini-fixed { position:fixed; top:12px; right:260px; z-index:60; margin:0; }
.plan-mini { position:relative; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-left:6px;
  vertical-align:3px; border-radius:50%; border:1px solid var(--p-warn); color:var(--p-warn-text); background:color-mix(in srgb, var(--p-warn) 14%, transparent);
  font-size:13px; font-weight:800; cursor:pointer; flex:none; }
.plan-mini:hover { background:color-mix(in srgb, var(--p-warn) 26%, transparent); }

/* ===== KPI-плитки, карточки виджетов и чипы — стандарт разделов
   (Метрики 04.09.2026, Сводка 05.09.2026). Цвет плитки/секции — --kc ===== */
.kpi-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(178px, 1fr)); gap:10px; margin:0 0 12px; }
.kpi { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px 12px 8px;
  box-shadow:0 2px 10px var(--shadow-c); display:flex; flex-direction:column; gap:4px; min-width:0; }
.kpi .k-title { font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700;
  display:flex; justify-content:space-between; align-items:center; gap:6px; }
.kpi .k-title i { display:inline-block; width:8px; height:8px; border-radius:2px; background:var(--kc, var(--accent)); flex:none; }
/* Плитка-фильтр (стандарт как в «Упущенной выручке»): нажатие фильтрует таблицу, повторное — отпускает */
.kpi.clickable { cursor:pointer; user-select:none; }
.kpi.clickable:active { transform:scale(0.98); }
.kpi.pressed { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--surface));
  box-shadow:inset 0 2px 6px rgb(0 0 0 / 0.18); transform:translateY(1px); }
.kpi .k-val { font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.15; white-space:nowrap; }
.kpi .k-val small { font-size:12px; font-weight:600; color:var(--muted); margin-left:4px; }
.kpi .k-val.neg { color:var(--critical); }
.kpi .k-line { display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--muted); white-space:nowrap; min-height:18px; }
.kpi .k-line b { color:var(--ink); font-weight:600; }
.kpi .k-goal { font-size:10.5px; color:var(--muted); display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.kpi .k-goal b { color:var(--ink); }
.kpi .k-spark { margin-top:2px; }
.kpi .k-spark svg { display:block; width:100%; height:26px; }
.k-spark rect.sh { fill:transparent; }
.k-spark rect.sb.hl { opacity:.72; stroke:var(--text); stroke-width:.8; }
.kpi .k-bar { height:4px; border-radius:2px; background:var(--surface-2); overflow:hidden; margin-top:2px; }
.kpi .k-bar i { display:block; height:100%; background:var(--kc, var(--accent)); }
/* чипы: выполнение плана (.pct) и динамика (.dlt) */
/* ===== Раскраска показателей (Настройки → Оформление, 05.09.2026).
   Канонические цвета «Контраста» — переменные --p-*; остальные палитры
   переопределяют их на html[data-palette] (ставит base.html из
   localStorage rnp-palette, синхронизируется с профилем ui-prefs.palette).
   В коде разделов цвета остаются каноническими hex и переводятся через
   window.palColor(hex) в момент отрисовки; чипы .pct/.dlt берут
   семантические цвета из переменных напрямую */
:root {
  --p-blue:#4f7cff; --p-orange:#e8a13c; --p-green:#2e9e5b; --p-red:#d64545; --p-purple:#7c3aed;
  --p-teal:#5cb3a2; --p-amber:#d9930d; --p-grey:#9aa3b2; --p-sky:#7aa7c7;
  --p-good:#2e9e5b; --p-bad:#d64545; --p-warn:#d9930d; --p-warn-text:#b8770a;
  /* мягкие варианты (группы колонок РНП, FBS/произвольные колонки, цена в Пульсе) */
  --p-blue-2:#6b8fc9; --p-amber-2:#d9a441; --p-purple-2:#a78bc0; --p-green-2:#84ab7d; --p-violet:#8b7cf6; --p-indigo:#6b5bd2;
  /* Аудит: направления проверок */
  --p-au-content:#6ba0ff; --p-au-reviews:#e26ad0; --p-au-price:#ffb020; --p-au-ads:#ff5d5d; --p-au-stock:#2dd4bf; --p-au-money:#a78bfa;
  /* Статусы аудита (критично/внимание/в порядке) — семантические цвета
     выбранной палитры, как чипы .pct во всех разделах (владелец 06.09.2026:
     при «Контрасте» бирюзовый цвет темы смотрелся как «Классический»);
     в «Классическом» --p-good/--p-bad и есть цвета темы */
  --au-good:var(--p-good); --au-warn:var(--p-warn); --au-bad:var(--p-bad);
}
/* Пастель — сочные светлые тона, приглушённые примерно на пятую часть */
html[data-palette="pastel"] {
  --p-blue:#6a9be6; --p-orange:#f4b46f; --p-green:#56bd8c; --p-red:#f27f8b; --p-purple:#a08ae8;
  --p-teal:#5cc4bd; --p-amber:#e8c35c; --p-grey:#a8b0bc; --p-sky:#97c0ea;
  --p-good:#56bd8c; --p-bad:#f27f8b; --p-warn:#e8c35c; --p-warn-text:#e8c35c;
  --p-blue-2:#86a6dc; --p-amber-2:#e6bc6b; --p-purple-2:#b7a3d3; --p-green-2:#97bf92; --p-violet:#a498ef; --p-indigo:#8c7fd8;
  --p-au-content:#86b3f0; --p-au-reviews:#e8a1d6; --p-au-price:#f5c56a; --p-au-ads:#f58c8c; --p-au-stock:#7fd9cc; --p-au-money:#bcaef7;
}
html[data-palette="pastel"][data-theme="light"] { --p-warn-text:#9a7a1c; }
/* Классический — фирменные цвета темы (янтарный, бирюзовый), расходы
   тёмно-серым (в тёмной теме — светло-серым), как Сводка до редизайна */
html[data-palette="classic"] {
  --p-blue:var(--accent); --p-orange:var(--series-profit); --p-green:var(--good); --p-red:#a9b4c8; --p-purple:var(--muted);
  --p-teal:var(--accent-2); --p-amber:#a9b4c8; --p-grey:var(--muted); --p-sky:#a9b4c8;
  --p-good:var(--good); --p-bad:var(--critical); --p-warn:var(--accent); --p-warn-text:#ffb020;
  --p-blue-2:var(--accent); --p-amber-2:var(--accent); --p-purple-2:var(--muted); --p-green-2:var(--good); --p-violet:var(--series-profit); --p-indigo:var(--accent-2);
  --p-au-content:var(--accent); --p-au-reviews:var(--muted); --p-au-price:var(--accent); --p-au-ads:#a9b4c8; --p-au-stock:var(--series-profit); --p-au-money:var(--good);
}
/* в схеме «Классического» нет красного среди данных: реклама, себестоимость,
   цены/СПП (--p-sky) — тёмно-серым (владелец 05.09.2026) */
html[data-palette="classic"][data-theme="light"] { --p-red:#4b5563; --p-amber:#4b5563; --p-sky:#4b5563; --p-au-ads:#4b5563; --p-warn-text:#b8770a; }
/* Электро — яркие насыщенные цвета */
html[data-palette="electro"] {
  --p-blue:#2f6bff; --p-orange:#ff8a1f; --p-green:#12c46a; --p-red:#ff3b5c; --p-purple:#9b5cff;
  --p-teal:#00c2b2; --p-amber:#ffc21a; --p-grey:#8892a6; --p-sky:#4fb0ff;
  --p-good:#12c46a; --p-bad:#ff3b5c; --p-warn:#ffb000; --p-warn-text:#b57a00;
  --p-blue-2:#4d8bff; --p-amber-2:#ffb52e; --p-purple-2:#b07cff; --p-green-2:#35c46f; --p-violet:#8f7cff; --p-indigo:#6c5cff;
  --p-au-content:#3b8bff; --p-au-reviews:#ff4fd8; --p-au-price:#ffb000; --p-au-ads:#ff3b5c; --p-au-stock:#00d4c2; --p-au-money:#9b5cff;
}
.pct { display:inline-block; min-width:38px; text-align:center; border-radius:6px; padding:1px 5px; font-weight:700; font-size:11px; }
.pct.g { background:color-mix(in srgb, var(--p-good) 14%, transparent); color:var(--p-good); }
.pct.y { background:color-mix(in srgb, var(--p-warn) 16%, transparent); color:var(--p-warn-text); }
.pct.r { background:color-mix(in srgb, var(--p-bad) 14%, transparent); color:var(--p-bad); }
.pct.m { color:var(--muted); background:var(--surface-2); font-weight:500; }
.dlt { display:inline-block; min-width:44px; text-align:center; border-radius:6px; padding:1px 5px; font-weight:700; font-size:10.5px; }
.dlt.up { background:color-mix(in srgb, var(--p-good) 12%, transparent); color:var(--p-good); }
.dlt.dn { background:color-mix(in srgb, var(--p-bad) 12%, transparent); color:var(--p-bad); }
.dlt.m { color:var(--muted); }
/* карточки виджетов */
.feat-row { display:grid; grid-template-columns:1.25fr 1fr; gap:12px; margin:0 0 12px; }
@media (max-width:1100px) { .feat-row { grid-template-columns:1fr; } }
.feat { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px 14px 12px;
  box-shadow:0 2px 10px var(--shadow-c); min-width:0; }
.feat .f-title { font-weight:800; font-size:12.5px; margin-bottom:6px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.feat .f-title .hint { font-weight:400; font-size:11px; margin:0; }
/* подсказка над столбиком/точкой графика (одна на страницу, ведёт JS раздела) */
#spark-tip { position:fixed; z-index:300; display:none; pointer-events:none; text-align:left;
  background:var(--surface); border:1px solid var(--border); border-radius:7px;
  padding:4px 9px; font-size:11px; font-weight:600; white-space:nowrap; line-height:1.35;
  box-shadow:0 4px 14px rgba(0,0,0,.25); }
#spark-tip .st-d { color:var(--muted); font-weight:500; font-size:10px; }


/* ===== Боковая панель v2 (владелец 13.09.2026: «визитная карточка», серьёзный уровень) =====
   Переопределяет базовые правила панели выше: мягкий градиент подложки, тёплый свет у логотипа,
   кнопки-сегмент, карточка профиля, пункты-«таблетки» с внутренней полоской, линия-дерево у подпунктов. */
#sidebar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 93%, var(--accent-2) 7%) 0, var(--surface) 190px, var(--surface) 100%);
  box-shadow: 14px 0 34px -26px rgba(0, 0, 0, 0.55);
  padding: 16px 12px 12px;
}
html[data-theme="light"] #sidebar { box-shadow: 14px 0 34px -28px rgba(11, 18, 32, 0.28); }
.side-zone { border-bottom-color: color-mix(in srgb, var(--grid) 75%, transparent); }

/* Логотип: тёплое свечение и мягкий «удар пульса» раз в несколько секунд */
.logo { position: relative; gap: 11px; padding: 6px 6px 16px; }
.logo::before {
  content: ""; position: absolute; left: -6px; top: -8px; width: 70px; height: 48px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-2) 24%, transparent), transparent);
  filter: blur(7px); pointer-events: none;
}
.logo-pulse { position: relative; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-2) 55%, transparent)); transform-origin: 50% 60%; }
.logo-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; }
.logo-tag { font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
html.nav-collapsed .logo-wrap { display: none; }
html.nav-collapsed .logo::before { left: 50%; margin-left: -35px; }

/* Кнопки-действия — один сегмент */
.side-actions {
  gap: 2px; padding: 3px; margin: 10px 6px 12px; width: max-content;
  background: var(--surface-2); border: 1px solid var(--grid); border-radius: 11px;
}
.side-actions .icon-btn { width: 36px; height: 32px; background: transparent; border-color: transparent; border-radius: 8px; transition: background .15s ease, color .15s ease; }
.side-actions .icon-btn:hover { background: var(--surface); border-color: var(--border); color: var(--accent); }
html.nav-collapsed .side-actions { margin-left: auto; margin-right: auto; }

/* Профиль — карточка */
a.profile {
  margin: 0 0 8px; padding: 9px 10px; gap: 11px; border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent); border: 1px solid var(--grid);
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
a.profile::before { display: none; }
a.profile:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); transform: translateY(-1px); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.55); }
html.nav-collapsed a.profile { padding: 6px 0; border-color: transparent; background: transparent; }
.avatar {
  width: 36px; height: 36px; border-radius: 10px; font-size: 15px;
  background: linear-gradient(135deg, var(--accent) 0%, #ff8a3d 100%);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
}
.profile-info b { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.profile-info small { font-size: 10.5px; letter-spacing: 0.01em; }

/* Пункты меню — «таблетки» со скруглением со всех сторон и полоской внутри */
.side-nav { gap: 1px; padding-top: 6px; }
.nav-item {
  padding: 9px 10px 9px 13px; border-left: 0; border-radius: 10px; gap: 11px;
  transition: background .15s ease, color .15s ease;
}
.nav-item::before {
  content: ""; position: absolute; left: 3px; top: 24%; bottom: 24%; width: 3px; border-radius: 3px;
  background: var(--accent); opacity: 0; transform: scaleY(0.4);
  transition: opacity .15s ease, transform .2s cubic-bezier(0.3, 0.9, 0.35, 1.04);
}
.nav-item:hover { background: color-mix(in srgb, var(--surface-2) 85%, transparent); }
.nav-item.active { background: var(--surface-2); border-left-color: transparent; }
.nav-item.active::before { opacity: 1; transform: scaleY(1); }
.nav-item.active .nav-label { color: var(--ink); }
.nav-item.active .nav-icon { color: var(--accent); }
/* светлая тема: ярко-жёлтая иконка плохо читается — темнее и спокойнее (владелец 13.09.2026) */
html[data-theme="light"] .nav-item.active .nav-icon { color: #ef8f1c; }  /* как градиент аватара (владелец 13.09.2026) */
html[data-theme="light"] .nav-group.open .nav-parent .chev { color: #ef8f1c; }
.nav-icon { transition: transform .15s ease, color .15s ease; }
.nav-item:hover .nav-icon { transform: translateX(1px); }
.nav-label { font-size: 13.5px; letter-spacing: 0.01em; }
.nav-parent .nav-label { font-weight: 600; }
.nav-parent .chev { transition: transform .18s cubic-bezier(0.3, 0.9, 0.35, 1.04), color .15s; }
.nav-group.open .nav-parent .chev { color: var(--accent); }
/* Подпункты: тонкая линия-дерево слева, иконки чуть меньше */
.nav-sub { position: relative; margin: 1px 0 3px; }
.nav-sub::before { content: ""; position: absolute; left: 22px; top: 5px; bottom: 5px; width: 1px; background: var(--grid); }
.nav-sub .nav-item { padding-left: 36px; }
.nav-sub .nav-icon svg { width: 16px; height: 16px; }
html.nav-collapsed .nav-sub::before { display: none; }
html.nav-collapsed .nav-item, html.nav-collapsed .nav-sub .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
/* Таблетка-переезжалка — в новом виде */
.side-nav .nav-pill { border-left: 0; border-radius: 10px; }
.side-nav .nav-pill::before {
  content: ""; position: absolute; left: 3px; top: 24%; bottom: 24%; width: 3px; border-radius: 3px; background: var(--accent);
}
.side-nav:has(.nav-pill) .nav-item.active::before { opacity: 0; }
/* Низ панели */
.side-bottom { border-top-color: color-mix(in srgb, var(--grid) 75%, transparent); padding-top: 6px; gap: 1px; }
.side-bottom .nav-item { padding-top: 8px; padding-bottom: 8px; }
.side-bottom .nav-label { font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
  /* удар пульса ~0,75 с раз в 32 с (владелец 13.09.2026: «в 7 раз реже») */
  .logo-pulse { animation: logo-beat 20s ease-in-out infinite; }
  @keyframes logo-beat { 0%, 96.2%, 100% { transform: scale(1); } 97.1% { transform: scale(1.08); } 98% { transform: scale(0.97); } 99% { transform: scale(1.03); } }
}

/* Учёт налогов в форме кабинета (15.09.2026) */
.tax-box { margin: 0 0 8px; }
.tax-box .tax-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 12px; margin-top: 8px; }
.tax-box .tax-row.r1 { grid-template-columns: minmax(120px, 0.8fr) minmax(200px, 1.5fr) minmax(110px, 0.7fr); }
.tax-box .tax-row.r1 > div { min-width: 0; }
.tax-box .tax-row.r1 .nice-select-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Чип валюты/курса у выбора кабинета (15.09.2026) */
.fx-chip { display: inline-flex; align-items: center; align-self: center; margin-left: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  color: #0b7d7c; background: color-mix(in srgb, #0ea5a4 12%, var(--surface)); border: 1px solid color-mix(in srgb, #0ea5a4 40%, transparent); text-decoration: none; }
.fx-chip:hover { border-color: #0ea5a4; text-decoration: none; }
.fx-chip[hidden] { display: none; }
.fx-chip.src { color: #6d28d9; background: color-mix(in srgb, #7c3aed 10%, var(--surface)); border-color: color-mix(in srgb, #7c3aed 40%, transparent); }
/* Тумблер «Учёт налогов» в форме кабинета (15.09.2026) */
.tax-box .tax-toggle { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; cursor: pointer; font-weight: 500; }
.tax-box .tax-toggle b { font-weight: 600; }
.tax-box .tax-toggle .tax-toggle-hint { margin: 0; font-size: 12px; }
.sw { position: relative; display: inline-block; width: 36px; height: 20px; flex: none; }
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw i { position: absolute; inset: 0; border-radius: 999px; background: var(--border); transition: background .15s ease; }
.sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s ease; }
.sw input:checked + i { background: var(--accent); }
.sw input:checked + i::after { transform: translateX(16px); }
.sw input:focus-visible + i { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px; }
/* Виды ключей: свой цвет у чипа на карточке и у блока в форме (15.09.2026) */
.kchip, .key-block { --kc: var(--muted); }
.kchip.k-stat, .key-block.k-stat { --kc: #2f6fed; } .kchip.k-rev, .key-block.k-rev { --kc: #7c3aed; }
.kchip.k-ad, .key-block.k-ad { --kc: #d9930d; } .kchip.k-perf, .key-block.k-perf { --kc: #e8632b; }
.kchip:not(.off) { background: color-mix(in srgb, var(--kc) 10%, var(--surface)); border-color: color-mix(in srgb, var(--kc) 35%, var(--border)); }
.key-block.k-stat, .key-block.k-rev, .key-block.k-ad, .key-block.k-perf { background: color-mix(in srgb, var(--kc) 6%, var(--surface)); border-color: color-mix(in srgb, var(--kc) 30%, var(--border)); }
.key-block-title .kico { width: 13px; height: 13px; color: var(--kc); vertical-align: -2px; margin-right: 6px; }
.tax-box { margin-top: 16px; }
/* ABC из трёх букв (заказы · выкупы · прибыль) — РНП, Пульс (15.09.2026) */
.abc3 { display: inline-flex; gap: 2px; vertical-align: middle; font-weight: 800; font-size: 10.5px; letter-spacing: .2px; cursor: default; }
.abc3 i { font-style: normal; width: 17px; height: 18px; line-height: 18px; text-align: center; border-radius: 5px; }
.abc3 i.l-A { background: color-mix(in srgb, var(--p-good, #2e9e5b) 18%, transparent); color: var(--p-good, #2e9e5b); }
.abc3 i.l-B { background: color-mix(in srgb, var(--p-amber, #d9930d) 18%, transparent); color: var(--p-amber, #d9930d); }
.abc3 i.l-C { background: color-mix(in srgb, var(--p-bad, #d64545) 15%, transparent); color: var(--p-bad, #d64545); }
.abc3.abc3-AAA i { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p-good, #2e9e5b) 45%, transparent); }
.abc3.abc3-CCC i { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p-bad, #d64545) 40%, transparent); }
.abc3-none { color: var(--muted); font-weight: 500; }
/* РНП, колонка «Реклама»: чипы типов кампаний; .on — активна сейчас (зелёная точка) */
.adc { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; height: 18px; border-radius: 5px; margin-right: 3px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .2px; background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); cursor: default; }
.adc.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-2, var(--accent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.adc.on::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--p-good, #2e9e5b); }
.tax-box .tax-presets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; grid-column: 1 / -1; }
.tax-box .tax-presets button { margin: 0; padding: 1px 8px; font-size: 11px; font-weight: 600; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); cursor: pointer; box-shadow: none; line-height: 18px; }
.tax-box .tax-presets button:hover, .tax-box .tax-presets button.on { color: var(--accent-2); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); filter: none; }
.tax-box input.tax-rate { -moz-appearance: auto; appearance: auto; }
.tax-box input.tax-rate::-webkit-outer-spin-button, .tax-box input.tax-rate::-webkit-inner-spin-button { -webkit-appearance: inner-spin-button; opacity: 1; margin: 0; }
.tax-box .tax-row > div > label { display: block; font-size: 12px; margin: 0 0 4px; }
.tax-box .tax-row input, .tax-box .tax-row select { width: 100%; margin: 0; }
.tax-box .tax-row .nice-select { width: 100%; }
.tax-box label.chk { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin: 0; cursor: pointer; }
.tax-box label.chk input { width: 16px; height: 16px; margin: 0; }