:root{
  --bg:#f4f6f9; --card:#fff; --line:#e4e8ee; --text:#1f2a37; --muted:#7a8699;
  --accent:#5b46e5; --ok:#13864f; --danger:#c0392b;
  /* типографика и радиусы — единый шаблон STB */
  --font-ui:-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --fs:14px;        /* базовый текст */
  --fs-ui:13px;     /* навигация, кнопки, тулбар */
  --fs-sm:12px;     /* мелкие подписи */
  --radius:8px;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-ui);background:var(--bg);color:var(--text);font-size:var(--fs)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}
.small{font-size:var(--fs-sm)}

/* ───────────────────────────────────────────────────────────────────────────
   ЕДИНЫЙ ДИЗАЙН-ШАБЛОН STB — применять для всего нового функционала.
   • Шрифт: наследуется от body (var(--font-ui)); контролы тоже (правило ниже).
   • Размеры: var(--fs) базовый · var(--fs-ui) навигация/кнопки/тулбар · var(--fs-sm) мелочь.
   • Цвет: текст var(--text) · приглушённый var(--muted) · акцент var(--accent) · опасн. var(--danger).
   • Кнопки: .btn (нейтральная, как навигация) · .btn-primary (акцент, залитая) ·
     .btn-ghost (акцентный контур) · .btn-danger (опасное действие).
   ─────────────────────────────────────────────────────────────────────────── */
button,input,select,textarea{font-family:inherit}   /* контролы наследуют шрифт STB, а не системный */
.btn,.btn-danger{font-family:inherit;font-size:var(--fs-ui);font-weight:500;line-height:1.2;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 15px;
  border-radius:var(--radius);border:1px solid var(--line);background:var(--card);color:var(--text);
  cursor:pointer;text-decoration:none;transition:border-color .12s,color .12s,background .12s}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn-danger{color:var(--danger);border-color:#f1d4cf}
.btn-danger:hover{background:#fdecea;border-color:var(--danger);color:var(--danger)}
.btn:disabled,.btn-danger:disabled{opacity:.5;cursor:default}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center}
.login-card{background:var(--card);padding:32px;border-radius:14px;box-shadow:0 8px 30px rgba(20,30,60,.08);width:340px}
.login-card h1{font-size:20px;margin:0 0 4px}
.login-card p{margin:0 0 18px}
.login-card label{display:block;margin:12px 0;font-size:13px;color:var(--muted)}
.login-card input{display:block;width:100%;margin-top:6px;padding:10px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.login-card button,.filters button{background:var(--accent);color:#fff;border:0;padding:10px 16px;border-radius:8px;cursor:pointer;font-size:14px}
.login-card button{width:100%;margin-top:10px}
.error{background:#fdecea;color:var(--danger);padding:10px;border-radius:8px;font-size:13px}

/* layout */
.topbar{display:flex;align-items:center;gap:24px;background:var(--card);padding:12px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.brand{font-weight:700;font-size:16px;color:var(--text);text-decoration:none}
a.brand:hover{color:var(--accent);text-decoration:none}
.tabs{flex:1;display:flex;gap:6px}
.tabs a{padding:7px 12px;border-radius:8px;color:var(--text)}
.tabs a.active{background:#eef0fe;color:var(--accent);font-weight:600}
.user{color:var(--muted);font-size:13px}
.topnav{margin-left:auto;display:flex;gap:10px;align-items:center}
/* «Кто сейчас в платформе» — иконки пользователей слева от «Профиль» */
.online-users{display:flex;align-items:center;gap:-6px}
.user-chip{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:#6b7280;color:#fff;font-size:12px;font-weight:700;letter-spacing:.3px;
  border:2px solid var(--card);margin-left:-6px;box-shadow:0 1px 2px rgba(0,0,0,.15);cursor:default;
  text-transform:uppercase;user-select:none}
.user-chip:first-child{margin-left:0}
.user-chip.me{background:var(--accent)}   /* вы — акцентным цветом */
.navbtn{padding:7px 15px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:13px;text-decoration:none;transition:border-color .12s,color .12s,background .12s}
.navbtn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.navbtn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.navbtn.active:hover{color:#fff}
.topnav-left{display:flex;gap:8px;align-items:center}
.stickhead-title{margin:8px 16px 6px}
.navbtn.logout{color:var(--danger);border-color:#f1d4cf}
.navbtn.logout:hover{background:#fdecea;border-color:var(--danger);color:var(--danger)}
main{padding:10px 16px 8px}

.filters{margin-bottom:12px}
.cabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);padding:6px 10px;border-radius:20px;cursor:pointer}

.toolbar{display:flex;align-items:center;gap:14px;margin-bottom:8px;flex-wrap:wrap}
#search{padding:9px 12px;border:1px solid var(--line);border-radius:8px;width:280px;font-size:14px}
.totals{color:var(--text);font-size:var(--fs-ui);margin-left:auto}

.table-scroll{overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;max-height:calc(100vh - 120px)}

/* freeze Фото + Артикул columns on the left during horizontal scroll */
th.col-photo,td.col-photo,th.col-article,td.col-article{position:sticky;z-index:2}
.col-photo{left:0;width:60px;min-width:60px;max-width:60px;box-sizing:border-box}
.col-article{left:60px;min-width:150px}
td.col-photo,td.col-article{background:#fff}
th.col-photo,th.col-article{background:#fafbfc;z-index:6}
/* thin divider between the frozen columns and the rest */
td.col-article,th.col-article{box-shadow:1px 0 0 var(--line), 4px 0 6px -4px rgba(20,30,60,.22)}
tbody tr:hover td.col-photo,tbody tr:hover td.col-article{background:#fafbff}
table{border-collapse:collapse;width:100%}
th,td{padding:4px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{position:sticky;top:0;background:#fafbfc;font-size:12px;color:var(--muted)}
.num{text-align:right}
th.num,.head th{text-align:left}
.strong{font-weight:700}
td.ok{color:var(--ok)}
td.danger{color:var(--danger)}
tbody tr:hover{background:#fafbff}
.photo img{width:40px;height:52px;object-fit:cover;border-radius:5px;border:1px solid var(--line);display:block}
.note{margin:6px 0 0}

/* subtabs */
/* topbar + subtabs pinned together as one block — never scrolls away */
.stickhead{position:sticky;top:0;z-index:6;background:var(--bg)}
.subtabs{display:flex;gap:8px;border-bottom:1px solid var(--line);background:var(--bg);padding:6px 16px 0}
.subtabs a{padding:8px 14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.subtabs a.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}

/* badges */
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px}
.badge.ok{background:#e6f6ec;color:var(--ok)}
.badge.err{background:#fdecea;color:var(--danger)}
.badge.run{background:#eef0f4;color:var(--muted)}
.banner{padding:10px 14px;border-radius:8px;margin-bottom:12px}
.banner.ok{background:#e6f6ec;color:var(--ok)}
.banner.err{background:#fdecec;color:#c0392b}

/* card form */
.card-form{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;max-width:520px}
.card-form h3{margin:0 0 12px}
.card-form label{display:block;margin:10px 0;font-size:13px;color:var(--muted)}
.card-form select,.card-form textarea,.card-form input{display:block;width:100%;margin-top:5px;padding:9px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit}
.card-form h3{margin:16px 0 6px}
/* cost constants — compact list (Профиль → Константы) */
.constlist{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;max-width:560px}
.constrow{display:flex;align-items:center;gap:8px}
.constrow .cl{flex:0 0 220px;font-size:13px;color:var(--text)}
.cval{flex:0 0 auto;width:82px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;font-size:13px;text-align:right}
.constrow .cu{flex:0 0 46px}
.constrow .cgift{flex:0 0 auto;white-space:nowrap}
.cnote{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;
  background:var(--card);border:1px solid var(--line);border-radius:7px;cursor:pointer;color:var(--muted);padding:0}
.cnote:hover{border-color:var(--accent);color:var(--accent)}
.cnote.has{border-color:var(--accent);background:#eef0fe;color:var(--accent)}
.cnote svg{display:block}
.cbtns{display:flex;gap:6px}
.cbtns[hidden]{display:none}
.csave{background:var(--accent);color:#fff;border:0;padding:5px 11px;border-radius:6px;cursor:pointer;font-size:12px}
.csave:hover{opacity:.9}
.ccancel{background:none;border:1px solid var(--line);color:var(--muted);padding:5px 11px;border-radius:6px;cursor:pointer;font-size:12px}
.ccancel:hover{color:var(--danger);border-color:var(--danger)}
/* editable comment popover */
.notepop{position:fixed;z-index:120;width:360px;max-width:92vw;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 12px 40px rgba(20,30,60,.25);padding:12px}
.notepop[hidden]{display:none}
.notepop-title{font-size:13px;font-weight:600;margin-bottom:6px}
.notepop textarea{width:100%;border:1px solid var(--line);border-radius:7px;padding:8px;font-size:13px;font-family:inherit;resize:vertical;box-sizing:border-box}
.notepop-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.ghostbtn{background:var(--card);border:1px solid var(--line);padding:9px 14px;border-radius:8px;cursor:pointer;font-size:13px}
.ghostbtn:hover{border-color:var(--accent);color:var(--accent)}
#packtbl input,#priotbl input[type=text]{padding:5px 7px;border:1px solid var(--line);border-radius:6px;font-size:13px}
#packtbl td,#packtbl th,#priotbl td,#priotbl th{padding:5px 8px}
/* align headers over their input fields (both left) */
#packtbl th,#packtbl td.num,#packtbl th.num{text-align:left}
#packtbl .pvol{display:inline-block;width:64px}
form[action="/profile/packs"] button[type=submit]{background:var(--accent);color:#fff;border:0;padding:9px 16px;border-radius:8px;cursor:pointer;font-size:13px;margin-left:8px}
.delpack,.delkey,.delprio{background:none;border:1px solid var(--line);color:var(--danger);padding:5px 12px;border-radius:7px;cursor:pointer;font-size:12px}
.delpack:hover,.delkey:hover,.delprio:hover{background:#fdecea;border-color:var(--danger)}
.cabname{padding:5px 8px;border:1px solid var(--line);border-radius:6px;font-size:13px;width:190px}
.cabname:focus{border-color:var(--accent);outline:none}
.taxinp{padding:5px 6px;border:1px solid var(--line);border-radius:6px;font-size:13px;width:56px;text-align:right}
.taxinp:focus{border-color:var(--accent);outline:none}
.msstores{display:flex;flex-wrap:nowrap;gap:16px;overflow-x:auto;padding-bottom:8px;margin-bottom:6px}
.msstore{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;min-width:150px}
.msstore-name{display:flex;gap:7px;align-items:center;font-size:13px;cursor:pointer;white-space:nowrap}
.msalias{padding:4px 7px;border:1px solid var(--line);border-radius:6px;font-size:12px;width:100%;box-sizing:border-box}
.msalias:focus{border-color:var(--accent);outline:none}
.ms-key-row{cursor:pointer}
.ms-key-row:hover{background:#f7faf8}
.ms-caret{display:inline-block;width:14px;color:var(--muted);font-size:11px;vertical-align:middle}
.ms-stores-row>td{background:#f7faf8}
.dangerbtn{background:var(--danger);color:#fff;border:0;padding:9px 16px;border-radius:8px;cursor:pointer;font-size:13px}
.dangerbtn:hover{opacity:.9}
.modal{position:fixed;inset:0;background:rgba(20,30,60,.4);display:flex;align-items:center;justify-content:center;z-index:100}
.modal[hidden]{display:none}
.modal-box{background:var(--card);border-radius:12px;padding:22px 24px;box-shadow:0 12px 40px rgba(20,30,60,.25);max-width:360px}
.modal-box p{margin:0 0 18px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}
.card-form button{margin-top:8px;background:var(--accent);color:#fff;border:0;padding:10px 18px;border-radius:8px;cursor:pointer}

/* period + toolbar */
.period{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.period input[type=date]{padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-size:13px}
.toolbar{align-items:center}
.colmenu-wrap{position:relative}
#colbtn,#lz-colbtn,#whbtn{background:var(--card);color:var(--text);border:1px solid var(--line);padding:7px 15px;border-radius:var(--radius);cursor:pointer;font-size:var(--fs-ui)}
#colbtn:hover,#lz-colbtn:hover,#whbtn:hover{border-color:var(--accent);color:var(--accent)}
.colmenu{position:absolute;right:0;top:40px;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;box-shadow:0 8px 30px rgba(20,30,60,.12);z-index:20;display:flex;flex-direction:column;gap:5px;
  min-width:200px;max-height:calc(100vh - 120px);overflow:auto}
.colmenu[hidden]{display:none}
.colmenu label{font-size:13px;display:flex;gap:7px;align-items:center;cursor:pointer}
.colmenu-grp{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;
  margin-top:8px;padding-top:6px;border-top:1px solid var(--line)}
.colmenu-grp:first-child{margin-top:0;padding-top:0;border-top:0}
.colmenu label.colmenu-grp{font-size:11px;cursor:pointer}
.colmenu label.colmenu-grp input{cursor:pointer}

/* sortable headers + filter row */
th.sortable{user-select:none}
th.filterable{position:relative;padding-right:24px}
.th-label{cursor:pointer}
th.sortable{cursor:pointer;user-select:none}   /* весь заголовок кликабелен для сортировки; текст не выделяем */
/* закреплённая «Артикул»: её светлый фон перебивает акцентный, поэтому при активной сортировке
   белый текст был не виден — принудительно даём акцентный фон (специфичность выше фиксированного) */
th.col-article.sortable.asc, th.col-article.sortable.desc,
.head th.col-article.sortable.asc, .head th.col-article.sortable.desc{background:var(--accent)}
/* faint hint that a column is sortable + light hover */
th.sortable .th-label::after{content:" ⇅";font-size:11px;color:var(--muted);opacity:.4}
th.sortable:hover{background:#eef0fe}
.th-label:hover{color:var(--accent)}
/* ACTIVE sort — very obvious: solid accent header, white bold label + arrow */
th.sortable.asc,th.sortable.desc{background:var(--accent)}
th.sortable.asc .th-label,th.sortable.desc .th-label{color:#fff;font-weight:700}
th.sortable.asc .th-label::after{content:" ▲";font-size:13px;color:#fff;opacity:1}
th.sortable.desc .th-label::after{content:" ▼";font-size:13px;color:#fff;opacity:1}
th.sortable.asc .fbtn,th.sortable.desc .fbtn{color:#fff}
/* two-row sticky header: group row on top (top:0), column names below it (top:30px) */
.group-head th{position:sticky;top:0;z-index:7;height:28px;box-sizing:border-box;
  text-align:center;font-size:12px;font-weight:600;color:#3a4250;
  border-bottom:1px solid var(--line);border-right:2px solid #fff;white-space:nowrap;padding:0 10px}
.group-head .gh-id{position:sticky;left:0;z-index:9;background:#fafbfc;border-right:0}
.grp-base{background:#eceff4}
.grp-src{background:#f4efe3}
.grp-price{background:#efe7fb}      /* светло-фиолетовый */
.grp-sales{background:#d9c9f1}      /* фиолетовый */
.grp-analysis{background:#e4eef0}   /* мягкий серо-бирюзовый — отличается от фиолетовых */
.grp-ozprice{background:#e3edfd}    /* Ozon — светло-синий (ВБ фиолетовый, Ozon синий) */
.grp-ozsales{background:#c9dcf7}    /* Ozon — синий */
.grp-ozanalysis{background:#dceaf6} /* Ozon — мягкий сине-голубой */
.grp-ozfbs{background:#cfe0f5}      /* Ozon — синий (FBS, Ozon) */
.grp-ozwh{background:#d3e3f7}       /* Ozon — синий (Склады, Ozon) */
.grp-wh{background:#f4ead0}          /* «Склады, WB» — жёлтый между «Анализ» (#e4eef0) и «МС» (#ffd9a6) */
/* отключённый склад — зачёркнутая приглушённая колонка (справочно, вне «Остатка») */
th.wh-off .th-label,td.wh-off{color:#9aa4ad;text-decoration:line-through;text-decoration-thickness:1px}
td.wh-off{background:repeating-linear-gradient(-45deg,transparent,transparent 5px,rgba(0,0,0,.03) 5px,rgba(0,0,0,.03) 10px)}
/* выпадающий список «Склады» (тулбар) — отключение складов из расчётов */
#whmenu{min-width:280px}
#wh-summary{font-size:12px;color:#555;padding:4px 6px 7px;margin-bottom:3px;
  border-bottom:1px solid var(--line,#e6e9ee);font-variant-numeric:tabular-nums}
#wh-list{max-height:320px;overflow:auto}
#wh-foot{margin-top:6px;padding-top:8px;border-top:1px solid var(--line,#e6e9ee);
  display:flex;justify-content:flex-end}
#wh-save{padding:6px 16px}
/* галочка «по размерам» в тулбаре (дублирует клик по заголовку «Размер») */
.sz-toggle-box{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-ui);color:var(--text);cursor:pointer;
  user-select:none;white-space:nowrap}
.sz-toggle-box input{width:15px;height:15px;cursor:pointer;margin:0}
/* сверка закупки: база алгоритма (серым) слева от поля правки + селектор тега причины */
.fc-base-hint{color:var(--muted);font-size:11px;margin-right:3px;white-space:nowrap}
.fc-base-hint.diff{color:var(--accent);font-weight:600}
.fc-size-tag{font-size:11px;margin-left:4px;border:1px solid var(--line);border-radius:6px;padding:2px 3px;max-width:104px;color:var(--muted);background:var(--card);cursor:pointer}
.wh-row{display:flex;align-items:center;gap:9px;padding:5px 6px;border-radius:6px;cursor:pointer;margin:0}
.wh-row:hover{background:#f2f5f8}
.wh-row input{width:15px;height:15px;cursor:pointer;flex:none}
.wh-row .wh-name{flex:1;font-size:13px}
.wh-row .wh-qty{font-size:12px;color:#8a929c;font-variant-numeric:tabular-nums}
.wh-row.off .wh-name{color:#aab1b8;text-decoration:line-through}
/* «К клиенту»: серое мелкое «всего едет» слева от основного «вернётся» */
.wh-to-tot{color:var(--muted);font-size:11px;margin-right:4px}
.grp-ms{background:#ffd9a6}         /* приятный оранжевый — остатки МойСклад */
.grp-stock{background:#cfe8dd}      /* мягкий зелёный — «Запас» (дни покрытия) */
/* «Литраж»: цветные группы (и общий класс, и scoped-подстраховка с высокой специфичностью) */
.grp-pack,#lzgrid .group-head .grp-pack{background:#eceff4}   /* серый — наш короб */
.grp-card,#lzgrid .group-head .grp-card{background:#d6e8fb}   /* голубой — карточка товара */
.grp-wb,#lzgrid .group-head .grp-wb{background:#d9c9f1}       /* фиолетовый — замеры ВБ */
.grp-ctrl,#lzgrid .group-head .grp-ctrl{background:#ffd9a6}   /* оранжевый — контроль */
.lz-dev-bad{color:#c0392b;font-weight:600}   /* отклонение объёма > 10% */
/* строки красим по Приоритету (как в «Товары»), колонки НЕ красим */
#lzgrid tbody tr.lz-grp-new>td{background:#e6f7ec}
#lzgrid tbody tr.lz-grp-withdrawn>td{background:#fdeaea}
#lzgrid tbody tr.lz-grp-new:hover>td,#lzgrid tbody tr.lz-grp-withdrawn:hover>td{filter:brightness(0.98)}
/* сортируемые заголовки «Литража» */
#lzgrid th.lz-sortable{cursor:pointer;user-select:none}
#lzgrid th.lz-sortable:hover,#lzgrid th.lz-sortable.sorted{color:var(--accent)}
#lzgrid th.lz-sortable .lz-sarrow{font-size:10px;font-weight:700;color:var(--muted);margin-left:2px}
#lzgrid th.lz-sortable.sorted .lz-sarrow{color:var(--accent)}
/* двухрядная шапка: «Юр. лицо»/«Приоритет» (filterable) должны липнуть на 2-й ряд (top:27px),
   а не на top:0 (иначе уезжают под шапку-группу) */
#lzgrid thead tr.head th.filterable{top:27px}
/* Отступы — на обёртку, а НЕ на контейнер прокрутки: иначе левый padding создаёт полосу,
   в которой при горизонтальной прокрутке текст «вылезает» слева от закреплённых колонок.
   Так же, как в «Товары» (там .table-scroll без padding, колонки прижаты к краю). */
.lz-wrap{padding:0 14px}
.lz-wrap .fc-listbar{margin-left:0;margin-right:0}
.lz-wrap .fc-count-bar{padding-left:0;padding-right:0}
.lz-wrap .fc-list-scroll{padding-left:0;padding-right:0;width:auto;max-width:none}
/* Перетаскивание столбцов за ручку-грип */
.col-grip{display:inline-flex;align-items:center;vertical-align:middle;margin-right:4px;
  color:#c2c8d2;cursor:grab;touch-action:none;flex:0 0 auto}
.col-grip:hover{color:var(--accent)}
.col-grip svg{display:block}
th.reorder-dragging{opacity:.5}
/* индикатор места вставки — жирная линия у того края целевого столбца, куда встанет колонка */
th.reorder-over-l{box-shadow:inset 3px 0 0 var(--accent)}
th.reorder-over-r{box-shadow:inset -3px 0 0 var(--accent)}
body.reorder-active{user-select:none;cursor:grabbing}
body.reorder-active .col-grip{cursor:grabbing}
.col-grip svg{pointer-events:none}
.head th .th-label,.group-head th{vertical-align:middle}
/* призрак перетаскивания — полупрозрачная плашка с названием столбца, едет за курсором */
.col-drag-ghost{position:fixed;z-index:2000;pointer-events:none;background:rgba(58,66,80,.92);
  color:#fff;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;
  box-shadow:0 6px 18px rgba(20,30,60,.35)}
/* кнопка «Упорядочить» внизу меню «Столбцы» */
.colmenu .colreset{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.colmenu .colreset button{width:100%;padding:6px;border:1px solid var(--line);border-radius:7px;
  background:var(--card);cursor:pointer;font-size:13px}
.colmenu .colreset button:hover{border-color:var(--accent);color:var(--accent)}
/* top:27px = overlap the group row by 1px so no body pixel peeks through the seam */
.head th{position:sticky;top:27px;z-index:5;height:28px;box-sizing:border-box;
  background:#fafbfc;box-shadow:0 1px 0 var(--line)}   /* solid bg + bottom seam so rows never show through */
/* frozen header cells must sit ABOVE the scrolling header cells (else labels get covered on horizontal scroll) */
.head th.col-photo,.head th.col-article{z-index:8;top:27px;background:#fafbfc}
.filters-row th{position:sticky;top:33px;z-index:2;background:#fff;padding:4px 8px;text-transform:none}
.filters-row input{width:100%;min-width:70px;padding:4px 6px;font-size:11px;border:1px solid var(--line);border-radius:5px}

/* Виртуализация отрисовки: браузер пропускает раскладку/отрисовку строк вне экрана
   (все строки и данные остаются в DOM — сортировка/фильтры/правки работают как есть).
   contain-intrinsic-size:auto 60px — резерв высоты ненарисованной строки (запоминает
   реальную после первой отрисовки). Так раскладываются ~20 видимых строк вместо ~550. */
#grid tbody tr{content-visibility:auto;contain-intrinsic-size:auto 60px}
/* Виртуализация строк (?virt=1): окно строит JS-движок, поэтому браузерный content-visibility НЕ нужен
   и КОНФЛИКТУЕТ с ним (пропускал бы отрисовку контента только что вставленных строк — пустые ячейки). */
#grid.virt tbody tr{content-visibility:visible;contain:none;contain-intrinsic-size:auto}
/* «Юр.лицо» (fast, клиентский фильтр). СКРЫТИЕ ЦЕЛЫХ КОЛОНОК КАНАЛА (снят Ozon / сняты ВСЕ ВБ) идёт
   через applyCols (+updateGroupSpans — colspan групп корректный). Здесь — только подстроки и прочерк: */
#grid.oz-off .oz-line{display:none}          /* Ozon снят → убрать Ozon-строки в «Артикул»/«Юр.лицо» */
#grid tbody tr.hide-wb .wb-line{display:none}   /* строка видна ТОЛЬКО из-за Ozon → убрать ВБ-строки там же */
/* пер-строчный ПРОЧЕРК ВБ-ячеек (правила `tr.hide-wb td.col-<ВБ>` с color:transparent + ::after "—"
   генерирует JS по ключам ВБ-групп); фон (цвет строки) при этом сохраняется. */

/* metric cells + sparklines */
td.metric{white-space:nowrap;vertical-align:bottom}
.metric-wrap{display:inline-block}
.spark{display:block;line-height:0;height:28px}   /* резерв высоты (SPARK_H): пустой график занимает место — при ленивой отрисовке строка не прыгает */
.spark .bar{fill:var(--accent)}
.spark.lvl .bar{fill:#2aa7a1}
.spark .bar.neg{fill:var(--danger)}
.spark .bar:hover{fill:#1f2a37}
.spark .bar-ad{fill:#b9a6ee}          /* верхний слой стека — рекламные заказы (светлее органики) */
.spark .bar-ad:hover{fill:#9f86e6}
td.metric .edge{display:block;font-size:12px;text-align:right;margin-top:2px}
/* изменение к прошлому периоду под значением (слева от него) */
.edge-row{display:flex;justify-content:flex-end;align-items:baseline;gap:6px;margin-top:2px}
.edge-row .mdelta{margin-right:auto}   /* дельта слева, значение ВСЕГДА справа (даже когда дельты нет) */
td.metric .edge-row .edge{display:inline;margin-top:0}
.mdelta{font-size:10px;font-weight:600;white-space:nowrap;line-height:1}
.mdelta.up{color:#1a9e5f}          /* рост — зелёный */
.mdelta.down{color:var(--danger)}   /* снижение — красный */
.mdelta.flat{color:var(--muted)}
.mdelta.block{display:block;text-align:right;margin-top:1px}
td.avgval{vertical-align:middle;font-weight:600;font-size:14px}

/* inline-editable cost cells + marketplace sync controls */
.editcell{width:66px;border:1px solid transparent;background:transparent;text-align:right;
  font:600 14px inherit;font-family:inherit;color:var(--text);padding:3px 4px;border-radius:5px}
.editcell:hover{border-color:var(--line)}
.editcell:focus{border-color:var(--accent);background:#fff;outline:none}
.editcell.dirty{background:#fff7e6;border-color:#e0883a}
/* «Литраж»: ручной ввод габарита ВБ (пока ВБ не обмерил) — компактное поле в ячейке */
.lz-dim{width:52px;border:1px dashed var(--line);background:transparent;text-align:right;
  font:inherit;color:var(--text);padding:2px 3px;border-radius:5px}
.lz-dim:hover{border-color:var(--accent)}
.lz-dim:focus{border-style:solid;border-color:var(--accent);background:#fff;outline:none}
.lz-dim.lz-dim-ok{background:#e6f6ea;border-color:#3aa657}   /* короткая подсветка «сохранено» */
/* «Прогноз»: вкладки панели (Конкуренты | Статистика | Прогноз) */
.fc-tabs{display:flex;gap:2px;margin:8px -18px -8px;padding:0 18px;border-bottom:1px solid var(--line)}
.fc-tab-btn{padding:7px 16px;border:none;background:none;font:inherit;font-size:14px;color:#667;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.fc-tab-btn:hover{color:var(--text)}
.fc-tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.fc-tab{display:none}
.fc-tab.active{display:block}
/* «Прогноз» → рекомендация по рекламе (профит-максимизация) */
.fc-adrec{border:1px solid var(--line);border-left-width:4px;border-radius:8px;padding:8px 10px;margin:6px 0 8px}
.fc-adrec-head{font-size:14px;margin-bottom:3px}
.fc-adrec-nums{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:#555;margin-bottom:4px}
.fc-adrec-nums b{color:var(--text)}
.fc-adrec-action{font-size:12.5px;line-height:1.35;color:#333}
.fc-adrec-good{background:#eef8f0;border-left-color:#2f8a4e}
.fc-adrec-good .fc-adrec-head b{color:#2f8a4e}
.fc-adrec-bad{background:#fdecea;border-left-color:#c0392b}
.fc-adrec-bad .fc-adrec-head b{color:#c0392b}
.fc-adrec-warn{background:#fff6e6;border-left-color:#d9902b}
.fc-adrec-warn .fc-adrec-head b{color:#b06f14}
.fc-adrec-neut{background:#f4f5f7;border-left-color:#9aa0a8}
/* «Литраж»: ПЕРЕПЛАТА за хранение (обмер < хранения и < карточки) → приятный красный */
.lz-volover{background:#ef9a9a}
/* «Литраж»: выбор вида упаковочного короба */
.lz-packsel{border:1px solid var(--line);border-radius:5px;padding:2px 4px;font:inherit;font-size:12px;background:#fff;max-width:170px}
.lz-packsel:focus{border-color:var(--accent);outline:none}
.lz-packsel.lz-dim-ok{background:#e6f6ea;border-color:#3aa657}
/* «Литраж» → цвет отклонения объёма (Контроль): вплюс жёлт/оранж/красн (0-10/10-30/30-50/>50),
   вминус светло/средне/тёмно/оч.тёмно зелёный; 0 — обычный чёрный */
#lzgrid .dev-p1{color:#c99a00;font-weight:600}
#lzgrid .dev-p2{color:#e8730c;font-weight:600}
#lzgrid .dev-p3{color:#d0021b;font-weight:600}
#lzgrid .dev-p4{color:#8b0000;font-weight:700}
#lzgrid .dev-n1{color:#5cb85c;font-weight:600}
#lzgrid .dev-n2{color:#2e8b3d;font-weight:600}
#lzgrid .dev-n3{color:#1a5e2a;font-weight:600}
#lzgrid .dev-n4{color:#0d3d18;font-weight:700}
/* editable edge value (Цена/Скидка) sitting under the sparkline */
.edge-input{display:block;width:100%;box-sizing:border-box;margin-top:2px;text-align:right;
  font-size:12px;font-weight:700;color:var(--text);border:1px solid transparent;background:transparent;border-radius:5px;padding:1px 4px}
.edge-input:hover{border-color:var(--line)}
.edge-input:focus{border-color:var(--accent);background:#fff;outline:none}
.edge-input.dirty{background:#fff7e6;border-color:#e0883a}
.packsel,.priosel{border:1px solid transparent;background:transparent;font:inherit;font-size:13px;padding:3px 4px;border-radius:5px;cursor:pointer;max-width:170px}
.packsel:hover,.priosel:hover{border-color:var(--line)}
.packsel:focus,.priosel:focus{border-color:var(--accent);background:#fff;outline:none}
/* sync / cancel buttons — float at the right edge of the screen, level with the
   edited row (positioned in JS); shown only while that row has unsaved edits */
.syncbox{position:fixed;right:16px;z-index:55;display:flex;flex-direction:row;gap:6px;
  background:var(--card);border:1px solid var(--line);border-radius:9px;padding:6px 8px;
  box-shadow:0 8px 24px rgba(20,30,60,.2)}
.syncbox[hidden]{display:none}   /* the [hidden] attr alone loses to display:flex */
.syncbtn{background:var(--accent);color:#fff;border:0;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:11px}
.syncbtn:hover{opacity:.9}
.cancelbtn{background:none;border:1px solid var(--line);color:var(--muted);padding:5px 8px;border-radius:6px;cursor:pointer;font-size:11px}
.cancelbtn:hover{color:var(--danger);border-color:var(--danger)}

/* commission / deductions bar */
td.feescell{vertical-align:middle;min-width:150px}
.feebar{display:flex;height:14px;width:150px;border-radius:4px;overflow:hidden;background:#eef0f4}
.feebar .seg{height:100%}
.feebar .seg:hover{opacity:.8}
.feetot{margin-top:2px;text-align:right;width:150px}

/* article / SKU with copy buttons */
.art-line{display:flex;align-items:center;gap:5px}
.art-code{font-weight:600}
.copybtn{background:none;border:0;cursor:pointer;color:var(--muted);padding:0;line-height:0;display:inline-flex;align-items:center}
.copybtn:hover{color:var(--accent)}
.copybtn.copied{color:var(--ok)}
.copybtn svg{display:block}
/* маркер маркетплейса в строках Артикул/Юр.лицо (ВБ и Ozon равны) */
.mp-tag{display:inline-block;font-size:8.5px;font-weight:700;line-height:1;padding:2px 3px;border-radius:3px;letter-spacing:.02em;flex:none}
.mp-tag.mp-wb{background:#efe6fb;color:#7c3aed}
.mp-tag.mp-oz{background:#e3edfd;color:#1e6fd9}

/* per-size stacked cells (Размер / Остаток / Продажи в день) */
td.szcell{vertical-align:middle;padding:6px 12px}
.szrow{line-height:18px;height:18px;white-space:nowrap;border-bottom:1px dashed var(--line)}
.szrow:last-child{border-bottom:0}
td.szcell.num .szrow{text-align:right}
/* collapse per-size -> single article value */
.collapsed-val{display:none}
td.szcell.num .collapsed-val{text-align:right}
td.szcell .collapsed-val{font-weight:600}
#grid.sz-collapsed .per-size{display:none}
#grid.sz-collapsed .collapsed-val{display:block}
/* FBS, WB: баркод (мелкий, с кнопкой копирования) + редактируемое поле «Неучтённые, шт» */
.col-fbsbc .szrow{font-size:11px;display:flex;align-items:center;gap:4px;justify-content:flex-end}
.col-fbsbc .bc-val{font-variant-numeric:tabular-nums}
/* поле «Неучтённые» — на всю ширину ячейки (боковые отступы даёт padding td.szcell), аккуратная рамка */
td.col-fbsun .per-size .szrow{padding:0}
input.fbsedit{width:100%;box-sizing:border-box;height:16px;border:1px solid var(--line);
  background:#fff;text-align:right;font:inherit;font-size:12px;line-height:14px;padding:0 6px;
  border-radius:4px;color:inherit;vertical-align:middle}
input.fbsedit:hover{border-color:var(--accent)}
input.fbsedit:focus{border-color:var(--accent);background:#fff;outline:none;
  box-shadow:0 0 0 2px rgba(60,120,240,.12)}
/* Поля «Цена (new)» / «Скидка (new)» — редактируемые, во всю ширину столбца */
.col-pricenew input, .col-discountnew input{width:100%;box-sizing:border-box;height:16px;border:1px solid var(--line);
  background:#fff;text-align:right;font:inherit;font-size:12px;line-height:14px;padding:0 6px;border-radius:4px;color:inherit}
.col-pricenew input:hover, .col-discountnew input:hover{border-color:var(--accent)}
.col-pricenew input:focus, .col-discountnew input:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 2px rgba(60,120,240,.12)}
/* «Запас» < 14 дней — заливка ячейки светло-красным (между Выводимым и Архивным, ближе
   к Выводимому); значение остаётся чёрным жирным. Растягиваем на паддинги td (полная заливка). */
.szrow.lowstock,.collapsed-val.lowstock{background:#f8cece;color:#000;font-weight:700;margin:0 -12px;padding:0 12px}
#szToggle{cursor:pointer;white-space:nowrap}
/* «Размер» — значения по правому краю */
th.col-sizes,td.col-sizes .szrow,td.col-sizes .collapsed-val{text-align:right}

/* sticky totals footer — sums of the visible (filtered) rows */
tfoot td{position:sticky;bottom:0;z-index:4;background:#fafbfc;font-weight:700;font-size:13px;
  border-top:1px solid var(--line);box-shadow:0 -1px 0 var(--line)}
tfoot td.col-photo,tfoot td.col-article{z-index:7;background:#fafbfc;box-shadow:0 -1px 0 var(--line)}
.foot-sum{white-space:nowrap}
.foot-avg{white-space:nowrap;color:#4c1d95;font-weight:700}   /* тёмно-фиолетовый — средняя доля прибыли */
.foot-avg.foot-plain{color:inherit}   /* обычный чёрный, как остальные итоги (Запас, дни) */
/* кнопки групп товаров (Основные/Новинки/Выводимые) */
.groupbtns{display:inline-flex;gap:6px}
.grpbtn{padding:7px 13px;border:1px solid var(--line);background:var(--card);border-radius:8px;cursor:pointer;font-size:13px;color:var(--text)}
.grpbtn:hover{border-color:var(--accent);color:var(--accent)}
.grpbtn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
/* выводимые из продаж — мягкий красный в Поставках */
.art-row.withdrawn{background:#fdecea}
.art-row.withdrawn:hover{background:#fbe0db}
/* выбор выводимых групп товаров */
.wg-actions{display:flex;gap:16px;align-items:center;margin-bottom:6px}
.wg-actions a{color:var(--accent);cursor:pointer}
.wg-actions a:hover{text-decoration:underline}
.wgroups{display:flex;flex-wrap:wrap;gap:6px 22px;max-width:780px}
.wg-item{display:flex;gap:7px;align-items:center;font-size:13px;cursor:pointer;flex:0 0 calc(33% - 22px);min-width:170px}

/* страница «Поставки» */
h3.sec{margin:18px 0 4px}
.grid2 th{background:#fafbfc}
/* компактные узкие колонки для удобного анализа: таблица по ширине контента,
   заголовки переносятся (длинные подписи не растягивают колонку). Шрифт как в «Товары». */
.grid2{width:auto;table-layout:auto}
.grid2 th,.grid2 td{padding:3px 8px}
.grid2 th{white-space:normal;vertical-align:bottom;max-width:74px;line-height:1.15}
.grid2 .exp{width:16px;padding:3px 2px}
.grid2 td.num,.grid2 th.num{min-width:0}
.cov-red{color:#c0392b;font-weight:700}
.cov-orange{color:#e0883a;font-weight:700}
.art-row{cursor:pointer}
.art-row:hover{background:#fafbff}
.art-row .exp{width:18px;text-align:center;color:var(--muted)}
.art-row .caret{font-size:11px}
.size-row>td{background:#f7f8fa}   /* разбивка по размерам — те же колонки, что у артикула */
/* страница «Поставки»: фиксированная высота, прокручивается только таблица */
body.supply-fixed{height:100vh;overflow:hidden;display:flex;flex-direction:column}
body.supply-fixed main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
body.supply-fixed .toolbar{flex:0 0 auto}
body.supply-fixed .table-scroll{flex:1 1 auto;min-height:0;max-height:none}
.cellcopy{display:inline-flex;align-items:center;gap:5px}   /* отступ между кодом/SKU и копированием, как в «Товары» */
.stickhead-title.toolbar .period{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.stickhead-title.toolbar{margin:6px 16px 8px}
.est-badge{color:#e0883a;font-weight:700;margin-right:2px;cursor:help}   /* ≈ оценка (нет финотчёта) */

/* tooltip */
.tip{position:absolute;background:#1f2a37;color:#fff;padding:3px 8px;border-radius:6px;font-size:12px;pointer-events:none;z-index:60;white-space:nowrap}
.tip.note{white-space:pre-line;max-width:340px;line-height:1.4;padding:7px 10px}

/* excel-style column filters */
th.filterable .th-label{cursor:pointer}
.fbtn{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:#eef0fe;border:0;cursor:pointer;color:var(--accent);font-size:11px;padding:3px 6px;border-radius:6px;line-height:1}
.fbtn:hover{color:#fff;background:var(--accent)}
/* ACTIVE filter — obvious: filled accent pill (no faint dot) */
.fbtn.active{color:#fff;background:var(--accent)}
.fbtn.active::after{content:""}
/* резерв места под кнопку фильтра (абсолютная кнопка справа, как в «Товарах») */
th.filterable,th.sortable.filterable{padding-right:26px}
.fc-list th.filtered{background:#eef0fe}
.fc-list th.filtered .th-label{color:var(--accent);font-weight:600}
/* «Юр. лицо» + фильтр — в ОДНУ строку, в потоке (кнопка НЕ абсолютная), с зазором.
   Колонка авто-расширяется под оба элемента, наложение исключено. */
.fc-list th.fc-ip-col.filterable{padding-right:4px}   /* фильтр ближе к правому краю */
.fc-list th.fc-tovar-col.filterable{padding-right:4px}
.fc-list .fc-tovar-col{white-space:nowrap}
/* «Юр. лицо» (filterable) в «Прогнозе» должна закрепляться вверху как остальные заголовки:
   глобальное th.filterable{position:relative} перебивало sticky и ячейка уезжала при прокрутке */
.fc-list th.filterable{position:sticky;top:0}
.fc-ipf-wrap{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.fbtn-inline{position:static!important;transform:none!important;right:auto!important;top:auto!important;display:inline-flex;flex:0 0 auto;margin:0}
/* highlight a column whose filter is active */
th.filtered{background:#eef0fe}
th.filtered .th-label{color:var(--accent);font-weight:600}
/* if the column is also the active sort (accent header), invert the filter pill */
th.sortable.asc .fbtn.active,th.sortable.desc .fbtn.active{background:#fff;color:var(--accent)}
.filterpanel{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 30px rgba(20,30,60,.15);z-index:70;min-width:210px;max-width:300px;
  max-height:320px;overflow:auto;padding:6px;font-weight:400;text-transform:none;color:var(--text)}
.filterpanel .fp-actions{display:flex;gap:14px;padding:5px 8px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.filterpanel .fp-actions a{cursor:pointer;color:var(--accent);font-size:12px}
.filterpanel label{display:flex;gap:8px;align-items:center;padding:4px 8px;cursor:pointer;font-size:13px;white-space:nowrap;border-radius:5px}
.filterpanel label:hover{background:#f4f6f9}
.filterpanel .fp-apply{padding:6px 8px 2px;border-top:1px solid var(--line);margin-top:4px}
.filterpanel .fp-apply button{width:100%;padding:6px;border:1px solid var(--accent);border-radius:7px;background:var(--accent);color:#fff;cursor:pointer;font-size:13px;font-weight:600}
.filterpanel .fp-apply button:hover{filter:brightness(1.06)}

/* «Сводка по сохранению» + «?» с промптом восстановления (Загрузки) */
.danger{color:var(--danger)}
.help-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;
  font-weight:700;cursor:help;flex:0 0 auto;user-select:none;margin-left:9px;vertical-align:middle}
.help-pop{display:none;position:absolute;left:0;top:26px;z-index:60;width:540px;max-width:84vw;
  max-height:72vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 32px rgba(20,30,60,.20);padding:12px 14px;font-size:13px;font-weight:400;
  line-height:1.55;color:var(--text);white-space:normal;text-transform:none;text-align:left}
.help-pop::before{content:"";position:absolute;top:-14px;left:0;width:70px;height:14px}
.help-icon:hover .help-pop,.help-icon:focus .help-pop,.help-icon:focus-within .help-pop{display:block}
.help-pop-hd{display:flex;align-items:flex-start;gap:10px;justify-content:space-between;margin-bottom:8px}
.help-prompt{white-space:pre-wrap;font-size:12px;line-height:1.5;background:#f4f6f9;border:1px solid var(--line);
  border-radius:8px;padding:10px;margin:0;font-family:inherit;color:var(--text);user-select:text}
.copyprompt{flex:0 0 auto;background:var(--accent);color:#fff;border:0;border-radius:7px;
  padding:5px 12px;cursor:pointer;font-size:12px;white-space:nowrap}
.copyprompt:hover{filter:brightness(1.06)}
.copyprompt.copied{background:var(--ok)}

/* тост «Сохранено» (автосохранение в Константах) */
.save-toast{position:fixed;right:18px;bottom:18px;z-index:200;background:#1f2937;color:#fff;
  padding:8px 14px;border-radius:8px;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.25);
  opacity:0;transform:translateY(8px);transition:opacity .15s,transform .15s;pointer-events:none}
.save-toast.show{opacity:1;transform:translateY(0)}

/* Приоритет: выбор цвета строки палитрой (Константы) */
.prio-swatch{display:inline-block;width:16px;height:16px;border-radius:4px;border:1px solid var(--line);vertical-align:middle}
.prio-colorpick{display:inline-flex;align-items:center;gap:5px;padding:3px 6px;border:1px solid var(--line);border-radius:6px;cursor:pointer;background:#fff}
.prio-colorpick:hover{border-color:var(--accent)}
.prio-colorpick .prio-caret{color:var(--muted);font-size:10px}
.prio-palette{position:absolute;z-index:60;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 26px rgba(0,0,0,.14);padding:8px}
.prio-palette[hidden]{display:none}   /* иначе класс перебивал бы атрибут hidden и окно не закрывалось */
.prio-palette .pal-top{display:flex;align-items:center;gap:7px;padding:1px 2px 7px;margin-bottom:6px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);cursor:pointer}
.prio-palette .pal-grid{display:grid;grid-template-columns:repeat(10,20px);gap:3px}
.prio-palette .pal-sw{width:20px;height:20px;border-radius:4px;border:1px solid var(--line);cursor:pointer}
.prio-palette .pal-sw:hover{outline:2px solid var(--accent);outline-offset:1px}
.prio-palette .pal-none{position:relative;background:#fff!important}
.prio-palette .pal-none::after{content:"";position:absolute;left:2px;right:2px;top:9px;height:2px;background:#e0392b;transform:rotate(-45deg)}

/* Прогноз — редактор запроса + карточки конкурентов */
.fc-query{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 20px}
.fc-query-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.fc-phrase-edit{display:flex;gap:8px;align-items:center;margin:0 0 10px}
.fc-phrase-wrap{flex:1;width:auto}
.fc-phrase-wrap .fc-pin{font-size:14px;padding:8px 34px 8px 11px}
.fc-analyze-err{margin:0 0 12px;padding:8px 11px;border-radius:8px;background:#fdeaea;border:1px solid #f0b3b3;color:#a23;font-size:13px;line-height:1.4}
.fc-comp-add{display:flex;gap:8px;align-items:center;margin:0 0 12px}
.fc-comp-add input{flex:1;max-width:260px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit}
.fc-comp-add input:focus{outline:none;border-color:var(--accent)}
.fc-comp-add input::-webkit-outer-spin-button,.fc-comp-add input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fc-comps{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-bottom:24px}
.fc-reset-wrap{border-top:1px solid var(--line);margin-top:4px;padding-top:16px;padding-bottom:24px;display:flex;justify-content:center}
.fc-reset-btn{padding:9px 18px}
.fc-comp{position:relative;display:flex;gap:10px;border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--card)}
.fc-comp-img{flex:0 0 48px;width:48px;height:62px;border-radius:6px;overflow:hidden;background:#f1f3f7;display:block}
.fc-comp-img img{width:48px;height:62px;object-fit:cover;display:block}
.fc-comp-body{min-width:0;flex:1}
.fc-comp-name{font-size:13px;line-height:1.35;max-height:54px;overflow:hidden}
/* карточка, добавленная пользователем вручную: светло-зелёная + корзина в углу */
.fc-comp-manual{background:#eaf7ec;border-color:#bfe3c6}
.fc-comp-del{position:absolute;right:6px;bottom:6px;background:none;border:0;cursor:pointer;color:var(--muted);padding:2px 3px;display:inline-flex;border-radius:6px;line-height:0}
.fc-comp-del:hover{color:var(--danger);background:#fdecea}
.btn-danger{background:var(--danger);color:#fff;border:0;padding:8px 14px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;transition:filter .12s}
.btn-danger:hover{filter:brightness(1.08)}
.fc-del{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;border:1px solid #e3b9b3;background:#fff;color:var(--danger);cursor:pointer;font-size:12px;line-height:1;padding:0}
.fc-del:hover{background:#fdecea;border-color:var(--danger)}
.fc-h3{margin:18px 0 8px}
.fc-q{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:400;cursor:help;vertical-align:middle;margin-left:4px}
.fc-q:hover{border-color:var(--accent);color:var(--accent)}

/* Прогноз — список артикулов (фото как в «Товары»: 40×52) */
/* Ширина = ширине содержимого: каждая колонка сама подстраивается под текст,
   таблица шире панели → горизонтальный скролл. НЕ width:100% (иначе браузер
   сжимает колонки в узкой панели и авто-ширина ломается). */
.fc-list{width:max-content;max-width:none;table-layout:auto}
.fc-list td{vertical-align:middle}
/* режимы-вкладки «Прогноза»: скрываем группы колонок по вкладке (Фаза→только Базовые; Закупка→+Закупка;
   Продвижение→+Продвижение). Всегда видны фиксированные (# Фото Артикул + стрелка) и «Базовые данные». */
.fc-list.m-phase .c-promo,.fc-list.m-phase .c-buy,.fc-list.m-buy .c-promo,.fc-list.m-promo .c-buy{display:none}
.fc-row-img{display:block;width:40px;height:52px}
.fc-row-img img{width:40px;height:52px;object-fit:cover;border-radius:5px;border:1px solid var(--line);display:block}
.fc-row-id .small{margin-top:2px}
.fc-row-phrase{display:flex;gap:8px;align-items:center}
.fc-pin-wrap{position:relative;display:block;width:216px}
.fc-pin{width:100%;box-sizing:border-box;padding:6px 30px 6px 8px;border:1px solid var(--line);border-radius:7px;font-size:13px}
/* фраза ПУСТАЯ или сгенерирована ИИ (✨) — окантовка толще и в цвет кнопки «Анализ»;
   правленая ВРУЧНУЮ — обычная тонкая */
.fc-pin.fc-pin-hl{border:2px solid var(--accent)}
.fc-list th,.fc-list td{padding:4px 10px}        /* отступы и шрифты как в «Товары» (td 14px, th 12px) */
/* снимаем кэп .grid2 th{max-width:74px;white-space:normal} — из-за него заголовки
   («Юр. лицо»+фильтр, «Закупка, шт») обрезались/переносились независимо от ширины таблицы */
.fc-list th{max-width:none;white-space:nowrap;vertical-align:middle}
.fc-gen,.fc-go{white-space:nowrap}
.fc-go{min-width:74px;text-align:center}   /* стабильная ширина: точки анимации не сдвигают вёрстку */
.fc-gen-note{margin-top:4px;max-width:560px}

/* Прогноз — красивые кнопки */
.btn-primary{background:var(--accent);color:#fff;border:0;padding:8px 14px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;transition:filter .12s}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary:disabled{opacity:.5;cursor:default}
.btn-ghost{background:var(--card);color:var(--accent);border:1px solid var(--line);padding:8px 12px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;white-space:nowrap;transition:border-color .12s,background .12s}
.btn-ghost:hover{border-color:var(--accent);background:#f6f8ff}
.btn-ghost:disabled{opacity:.55;cursor:default}

/* Прогноз — сплит-раскладка список | анализ */
body.fc-split-body{height:100vh;overflow:hidden;display:flex;flex-direction:column;--drawer-w:min(574px,41vw)}
/* топбар: правая группа (иконки/Профиль/Выйти) сдвигается влево, освобождая место под панель */
.fc-split-body .topnav{transition:transform .26s ease}
.fc-split-body.drawer-open .topnav{transform:translateX(calc(-1 * var(--drawer-w)))}
/* вкладки тулбара «Закупка/Продвижение» + переключаемые нижние панели управления */
.fc-tabs2{display:inline-flex;gap:2px;border-bottom:1px solid var(--line)}
.fc-tab2{padding:7px 16px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--muted);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:color .12s,border-color .12s}
.fc-tab2:hover{color:var(--accent)}
.fc-tab2.active{background:transparent;color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.fc-tabpane{display:flex;align-items:center;gap:14px}
.fc-tabpane[hidden]{display:none}
.fc-listbar2{min-height:34px}   /* высота строки управления постоянна при переключении вкладок */
.fc-split{flex:1;display:flex;min-height:0;position:relative}   /* якорь для накладного drawer */
.fc-left{flex:1;display:flex;flex-direction:column;min-width:0}   /* список на всю ширину */
.fc-listbar{margin:6px 14px;flex-wrap:nowrap}   /* строка «Поиск … товаров:» — всегда в одну линию */
.fc-listbar #search{min-width:150px}            /* поиску можно сжаться, но не в ноль */
#fc-count-bar{transition:margin-right .26s ease}/* «товаров:» плавно едет к правому краю таблицы при откр/закр панели */
.fc-dl{display:inline-flex;align-items:center;justify-content:center;padding:7px 9px}   /* кнопка «скачать» — центр иконки */
.fc-listbar+.fc-listbar{margin-top:0}
/* счётчик «товаров:» — ширину задаём в JS равной ширине области таблицы,
   чтобы он ровнялся по правому краю ТАБЛИЦЫ, а не экрана */
.fc-count-bar{padding:0 14px 3px;text-align:right;color:var(--muted);font-size:13px}
/* прокрутка привязана к ТАБЛИЦЕ: контейнер ужимается по ширине таблицы (не на всю
   ширину экрана), поэтому вертикальный скролл идёт сразу справа от таблицы */
/* отступ по бокам — через MARGIN, не padding: липкие колонки (left:0) прижимаются к самому
   краю контейнера прокрутки, поэтому текст при горизонтальной прокрутке НЕ протекает в зазор
   слева от закреплённых колонок (padding создавал 14px-зазор, куда заходил скроллящийся текст). */
.fc-list-scroll{flex:1;overflow:auto;margin:0 14px;width:fit-content;max-width:calc(100% - 28px)}
/* при открытой панели область прокрутки СЖИМАЕТСЯ до места слева от панели: так вертикальный
   скроллбар стоит у самого края панели (виден и работает), а горизонтальной прокруткой
   выводим последние столбцы из-под панели. Таблица НЕ переверстывается (ширина колонок та же). */
.fc-split.drawer-open .fc-list-scroll{
  width:calc(100% - min(574px,41vw) - 14px);
  max-width:calc(100% - min(574px,41vw) - 14px)}
/* правая панель — НАКЛАДНОЙ drawer поверх таблицы (position:absolute): закрыт → ширина 0,
   открыт → выезжает справа ПОВЕРХ списка. Так fc-left НЕ ужимается → таблица НЕ переверстывается
   и не «скачет» при появлении панели. */
.fc-right{position:fixed;top:0;right:0;bottom:0;z-index:40;
  width:0;overflow:hidden;background:#fafbfc;
  border-left:1px solid var(--line);box-shadow:-14px 0 34px rgba(20,30,60,0);
  transition:width .26s ease, box-shadow .26s ease;display:flex;flex-direction:column}
.fc-right.open{width:var(--drawer-w);box-shadow:-14px 0 34px rgba(20,30,60,.16)}
.fc-drawer-head{flex:0 0 auto;width:var(--drawer-w);display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-bottom:1px solid var(--line);background:#fff}
.fc-drawer-close{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:7px 13px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text);
  white-space:nowrap;transition:border-color .12s,color .12s}
.fc-drawer-close:hover{border-color:var(--accent);color:var(--accent)}
.fc-drawer-title{color:var(--muted);font-size:13px}
.fc-drawer-body{flex:1;width:var(--drawer-w);position:relative;min-height:0}
.fc-right iframe{width:100%;height:100%;border:0;display:block}
.fc-right-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);padding:30px;font-size:14px}
/* «Литраж»: тело (список + накладной drawer графика прогресса), как в «Прогноз» */
.lz-body{position:relative;flex:1;min-height:0;display:flex}
.lz-body.drawer-open .fc-list-scroll{width:calc(100% - min(574px,41vw) - 14px);max-width:calc(100% - min(574px,41vw) - 14px)}
.lz-prog-wrap{position:absolute;inset:0;padding:12px;display:flex;flex-direction:column}
#lz-prog-canvas{flex:1;min-height:0;width:100%}
.lz-prog-legend{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;padding:8px 0 2px;font-size:13px;color:var(--text)}
.lz-prog-legend .lz-leg{display:inline-flex;align-items:center;gap:6px}
.lz-prog-legend .lz-leg i{width:16px;height:3px;border-radius:2px;display:inline-block}
.fc-row.active>td:first-child{box-shadow:inset 5px 0 0 var(--accent)}
.fc-go-wrap{display:flex;align-items:center;gap:8px}
.fc-res{white-space:nowrap;font-weight:600}
/* сводная строка закупки — sticky-футер внутри таблицы (как на «Товары»),
   глобальное правило tfoot td уже делает её прилипающей к низу и по колонкам */
.fc-totrow td{border-top:2px solid var(--line)}
.fc-buy-exp{cursor:pointer}
.fc-buy-exp .caret{color:var(--muted);font-size:11px}
.fc-size-row>td{background:#fafbfc;border-bottom:1px dashed var(--line);font-size:13px}
.fc-size-buy{width:62px;padding:3px 6px;border:1px solid var(--line);border-radius:5px;text-align:center;font-size:13px}
.fc-size-buy:focus{border-color:var(--accent);outline:none}
main.fc-embed{padding:0 18px 14px}
.fc-title{font-size:17px;font-weight:600;line-height:1.3;color:var(--text)}
main.fc-embed canvas{display:block;width:100%}
.fc-buy{display:flex;flex-wrap:wrap;gap:8px 22px;margin:2px 0 8px}
.fc-buy-num{display:flex;flex-direction:column;line-height:1.2}
.fc-buy-num span{font-size:11px;color:var(--muted)}
.fc-buy-num b{font-size:16px}
.fc-buy-flag{background:#fdecea;border:1px solid #e3b9b3;color:#a23;border-radius:8px;padding:7px 10px;font-size:12px;margin:0 0 8px}
.fc-lg{display:inline-block;width:14px;height:9px;border-radius:2px;vertical-align:middle;margin-right:2px}
.fc-sticky{position:sticky;top:0;z-index:5;background:var(--bg);margin:0 -18px 6px;padding:12px 18px 8px;border-bottom:1px solid var(--line)}
.fc-chk{position:absolute;top:6px;right:6px;width:17px;height:17px;cursor:pointer;z-index:2;accent-color:var(--accent)}
.fc-comp-distorted,.fc-comp-no_data{opacity:.55;filter:grayscale(.7);background:#f3f4f6}
.fc-comp-excluded{opacity:.7;background:#eaf0fb;border-color:#c3d2ec}
/* ИИ-генерация фразы — иконка ВНУТРИ поля справа (как глазик у пароля), акцентный цвет */
.fc-gen-star{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:24px;height:24px;
  border:0;background:none;color:var(--accent);cursor:pointer;padding:0;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;line-height:1;transition:background .12s}
.fc-gen-star:hover{background:#eef0fe}
.fc-gen-star:disabled{opacity:.5;cursor:default}
/* Виртуализация отрисовки списка «Прогноз»: браузер пропускает раскладку/отрисовку строк
   вне экрана (страница ~3.4 МБ, вес в основном от скрытых подстрок по размерам). Все строки
   и данные остаются в DOM. contain-intrinsic-size:auto 56px — резерв высоты (высота строки
   с фото 40×52). */
.fc-list tbody tr{content-visibility:auto;contain-intrinsic-size:auto 56px}
/* закреплённые колонки списка «Прогноз»: #, Фото, Артикул (скролл по горизонтали под ними) */
.fc-list .fzc{position:sticky;z-index:3;background:#fff}
.fc-list thead .fzc{z-index:8;background:#fafbfc}
/* ЛИПКАЯ ШАПКА поверх тела: у обычных th не был задан z-index → ячейки тела с input/кнопками
   (напр. «Поисковая фраза») накрывали заголовок при прокрутке. Поднимаем шапку над телом. */
.fc-list thead th{z-index:6}
/* Двухуровневая липкая шапка: строка-подгруппы (стиль .group-head как в «Товары»/«Литраж»,
   цвета grp-base/grp-price/grp-ms) закреплена вверху (top:0), основная — под ней (top=28px). */
.fc-list thead .fc-mainhead th{top:28px}                 /* высота .group-head th = 28px */
.fc-list thead .fc-mainhead th.filterable{top:28px}
/* цвета подгрупп «Прогноза» — как в «Товары»/«Литраж» (scoped-подстраховка спецификой) */
.fc-list .group-head .grp-base{background:#eceff4}       /* Базовые данные — серый */
.fc-list .group-head .grp-price{background:#efe7fb}      /* Продвижение — светло-фиолетовый */
.fc-list .group-head .grp-ms{background:#ffd9a6}         /* Закупка — оранжевый */
.fc-list .group-head .gh-id{background:#fafbfc}
.fc-recpct{font-size:11px;line-height:1.1;margin-top:1px}   /* % изменения под «было→стало» */
/* ширина закреплённых колонок — по содержимому (авто); смещения left выставляются в JS
   (fcStickyOffsets) по фактической ширине. Значения left ниже — стартовый фолбэк до JS. */
.fc-list .fzc-num{left:0}
.fc-list .fzc-photo{left:42px}
.fc-list .fzc-art{left:102px;max-width:240px;padding-right:16px;overflow:hidden;box-shadow:1px 0 0 var(--line),4px 0 6px -4px rgba(20,30,60,.18)}
/* последний столбец (стрелка «открыть анализ») ЗАКРЕПЛЁН СПРАВА — всегда виден у правого
   края списка при горизонтальной прокрутке, не уходит под правую панель */
/* ячейка ПРОЗРАЧНАЯ — прокручиваемое содержимое видно под ней; кнопка-стрелка (непрозрачная,
   с тенью) как бы «висит» у правого края */
.fc-list .fzc-r{position:sticky;right:0;z-index:3;background:transparent;width:42px;min-width:42px;max-width:42px}
.fc-list thead .fzc-r{z-index:8;background:#fafbfc}   /* заголовок оставляем непрозрачным */
/* область под кнопкой-стрелкой закрашивается в цвет строки (как ячейки левее):
   основные — серый фон, новинки — зелёный, выводимые (неликвид) — красный */
.fc-list tbody .fc-size-row>td.fzc-r{background:#fafbfc}   /* строки размеров — как их ячейки */
/* очень длинный артикул (>240px) обрезаем с «…», кнопка копирования остаётся видимой */
.fc-list .fzc-art .art-line{min-width:0}
.fc-list .fzc-art .art-code,.fc-list .fzc-art .art-line a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fc-list .fzc-art .copybtn{flex:0 0 auto}
/* «Юр. лицо» с фильтром — в одну строку; колонка достаточной ширины под текст + зазор +
   кнопку фильтра, чтобы фильтр не уходил под соседний столбец */
.fc-list .fc-ip-col{white-space:nowrap}   /* авто-ширина по содержимому, без ручного min-width */
/* сортируемые заголовки списка «Прогноз» */
.fc-sortable{cursor:pointer;user-select:none}
.fc-sortable:hover{color:var(--accent)}
.fc-sortable.sorted{color:var(--accent)}
.fc-sarrow{color:var(--accent);font-size:10px;font-weight:700}
/* кнопки массовых операций в режиме остановки — красноватые */
.fc-stopbtn{background:#fdecec;border-color:#e3a9a9;color:#c0392b}
.fc-stopbtn:hover{background:#f9dede;border-color:#d98a8a;color:#a83224}
.fc-ipf{margin-top:3px;max-width:108px;padding:3px 4px;border:1px solid var(--line);border-radius:6px;font-size:12px}
.fc-head-row{display:flex;gap:12px;align-items:flex-start}
.fc-head-img{flex:0 0 56px;width:56px;height:74px;display:block}
.fc-head-img img{width:56px;height:74px;object-fit:cover;border:1px solid var(--line);border-radius:6px;display:block}
.fc-head-text{min-width:0}
.fc-buycell{text-align:center;white-space:nowrap;font-size:13px}
/* Цвет строки ЕДИНЫЙ во всех колонках (в т.ч. закреплённых): основные — белые,
   новинки — зелёные, выводимые — красные. Специфичность перебивает .fzc{background:#fff}. */
.fc-list tbody .fc-grp-main>td{background:#fff}
.fc-list tbody .fc-grp-new>td{background:#e6f7ec}
.fc-list tbody .fc-grp-withdrawn>td{background:#fdeaea}
/* «Товары»: покраска строк по приоритету (как в «Прогноз»); id-специфичность перебивает
   белый фон липких Фото/Артикул */
#grid tbody tr.fc-grp-new>td{background:#e6f7ec}
#grid tbody tr.fc-grp-withdrawn>td{background:#fdeaea}
#grid tbody tr.fc-grp-new:hover>td,#grid tbody tr.fc-grp-withdrawn:hover>td{filter:brightness(0.98)}

/* УНИВЕРСАЛЬНАЯ покраска строки цветом приоритета (--rowbg из словаря, любой цвет, вкл.
   кастомные). Идёт ПОСЛЕ хардкод-правил → перебивает их при равной специфичности; та же
   специфичность, что у .fc-grp-* → перебивает белый фон липких Фото/Артикул. */
#grid tbody tr.prio-colored>td,
#lzgrid tbody tr.prio-colored>td,
.fc-list tbody tr.prio-colored>td{background:var(--rowbg)}
#grid tbody tr.prio-colored:hover>td,
#lzgrid tbody tr.prio-colored:hover>td,
.fc-list tbody tr.prio-colored:hover>td{filter:brightness(0.97)}
/* Липкие Фото/Артикул при ховере строки НЕ получают filter: filter создаёт containing block
   для position:fixed .syncbox (панель «Синхронизировать/Отменить» лежит внутри Артикула) —
   из-за него панель перескакивала из системы координат вьюпорта в систему ячейки и «убегала».
   Ховер этих ячеек и так виден по фону (#fafbff), потеря дима 2–3% незаметна. */
#grid tbody tr:hover>td.col-photo,#grid tbody tr:hover>td.col-article{filter:none}
/* закреплённые (sticky) ячейки НЕ красим по группе — оставляем белый фон */
.fc-view.fc-view-red{color:#fff;background:var(--danger);border-color:var(--danger)}
.fc-view.fc-view-red:hover{background:#c0392b;border-color:#c0392b}
.fc-num{text-align:right;color:var(--muted);font-size:12px}
.fc-buy-reason{background:#f4f6f9;border-left:3px solid var(--accent);border-radius:6px;padding:8px 11px;margin:8px 0 4px;font-size:13px;line-height:1.45;color:var(--text)}
.fc-row{cursor:pointer}
.fc-actions{display:flex;gap:6px;align-items:center}
.fc-view{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--accent);cursor:pointer;padding:0;box-shadow:0 1px 5px rgba(20,30,60,.22);transition:border-color .12s,background .12s,box-shadow .12s}
.fc-view:hover{border-color:var(--accent);background:#f6f8ff;box-shadow:0 2px 8px rgba(20,30,60,.28)}
.fc-view svg{display:block}
.fc-modal{display:none;position:fixed;inset:0;background:rgba(20,30,50,.45);z-index:200;align-items:center;justify-content:center}
.fc-modal-box{background:var(--card);border-radius:12px;padding:22px 24px;max-width:440px;box-shadow:0 12px 40px rgba(20,30,60,.25)}
.fc-modal-msg{font-size:14px;line-height:1.5;color:var(--text);margin-bottom:18px}
.fc-modal-actions{display:flex;gap:10px;justify-content:flex-end}
/* Сводка по загрузкам (Профиль → Загрузки) */
.uacts{white-space:nowrap}
.uacts form{display:inline}
.uacts>form,.uacts>button{margin-right:6px}
/* поле пароля с «глазиком» */
.pw-field{position:relative;display:block;margin:8px 0}
.pw-field input{width:100%;box-sizing:border-box;padding:9px 42px 9px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;margin:0}
.pw-field input:focus{outline:none;border-color:var(--accent)}
.card-form .pw-field{margin:5px 0 0}
/* глазик строго по высоте инпута (top:0;height:100%), по центру и у правого края */
.pw-eye{position:absolute;right:6px;top:0;height:100%;width:30px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:var(--muted);padding:0}
.pw-eye:hover{color:var(--accent)}
.pw-eye svg{display:block}
/* внутри .card-form общий .card-form button делает из глазика синий квадрат — сбрасываем */
.card-form .pw-eye{background:none;border:0;padding:0;margin:0;color:var(--muted);width:30px;height:100%}
.card-form .pw-eye:hover{background:none;color:var(--accent)}
/* кнопка генерации пароля — читаемый ghost-стиль (не сливается на hover) */
.card-form .pw-gen{width:auto;margin-top:6px;background:var(--card);color:var(--accent);
  border:1px solid var(--line);padding:8px 12px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer}
.card-form .pw-gen:hover{background:#eef0fe;border-color:var(--accent);color:var(--accent)}
.pw-err{color:var(--danger);font-size:13px;margin:2px 0 12px}
/* красивый выпадающий список ролей */
.role-select{padding:6px 30px 6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);
  font-size:13px;font-weight:600;color:var(--accent);cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%237a8699' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;transition:border-color .12s}
.role-select:hover{border-color:var(--accent)}
.role-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(90,110,240,.12)}
.loadsum-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 14px}
.loadsum-stats{margin-left:auto}   /* статистика выбранного кабинета — в тот же ряд, справа */
.loadsum{margin:8px 0 18px}
/* фиксированная раскладка: колонки одинаковы у всех кабинетов → не прыгают при переключении */
.loadsum table{table-layout:fixed;width:100%}
.loadsum th:nth-child(1){width:16%}   /* Источник */
.loadsum th:nth-child(2){width:10%}   /* Данные от */
.loadsum th:nth-child(3){width:10%}   /* Данные до */
.loadsum th:nth-child(4){width:12%}   /* Пропуски */
.loadsum th:nth-child(5){width:18%}   /* Последняя загрузка */
.loadsum th:nth-child(6){width:12%}   /* Статус */
.loadsum th:nth-child(7){width:12%}   /* Строк */
.loadsum th:nth-child(8){width:10%}   /* Мб */
.loadsum td{overflow:hidden;text-overflow:ellipsis}
.loadsum-cab{font-weight:600;margin:0 0 6px;padding:6px 10px;background:var(--bg);border-radius:8px}
.loadsum table{margin:0}
/* Строка размера: «остаток» прижат вправо к колонке закупки */
.fc-size-stock{text-align:right;white-space:nowrap;padding-right:10px}
/* Лайтбокс фото (Прогноз: наши + конкуренты) */
.fc-lb{position:fixed;inset:0;z-index:300;background:rgba(15,20,32,.86);display:flex;align-items:center;justify-content:center;padding:20px}
.fc-lb-inner{display:flex;flex-direction:column;align-items:center;gap:8px}
/* фото-область фиксированной ВЫСОТЫ — не зависит от загрузки/смены кадра → фото не прыгает */
.fc-lb-main{display:flex;align-items:center;gap:10px;height:70vh}
.fc-lb-stage{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;position:relative}
/* переключатель WB/Ozon поверх большого фото (когда есть фото обоих МП) */
.fc-lb-mp{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:3}
.fc-lb-mpbtn{font-size:12px;font-weight:700;padding:5px 12px;border-radius:6px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.5);color:#fff;cursor:pointer}
.fc-lb-mpbtn:hover{border-color:rgba(255,255,255,.7)}
.fc-lb-mpbtn.on{background:#fff;color:#111;border-color:#fff}
.fc-lb-stage>img{max-width:74vw;max-height:calc(70vh - 26px);object-fit:contain;border-radius:8px;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.fc-lb-bar{height:18px;display:flex;align-items:center;gap:16px;color:#dfe5ee;font-size:13px}
.fc-lb-count{font-variant-numeric:tabular-nums}
.fc-lb-x{position:fixed;top:14px;right:18px;width:38px;height:38px;border:none;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;cursor:pointer;z-index:2}
.fc-lb-x:hover{background:rgba(255,255,255,.28)}
.fc-lb-nav{width:46px;height:64px;border:none;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;font-size:34px;line-height:1;cursor:pointer;flex:0 0 auto}
.fc-lb-nav:hover{background:rgba(255,255,255,.26)}
/* лента миниатюр под фото: ПОСТОЯННАЯ ширина и зарезервированная высота — не меняются НИКОГДА.
   Сама лента центрирована под фото (inner align-items:center), миниатюры внутри тоже по центру
   (safe center — при переполнении переходит к началу, чтобы прокрутка доставала крайние).
   Один ряд + горизонт. прокрутка (колесо/полоса). */
.fc-lb-strip{width:min(80vw,940px);height:78px;display:flex;gap:6px;flex-wrap:nowrap;align-items:center;justify-content:safe center;overflow-x:auto;overflow-y:hidden;padding:0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.5) transparent}
.fc-lb-strip::-webkit-scrollbar{height:9px}
.fc-lb-strip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.45);border-radius:5px}
.fc-lb-strip::-webkit-scrollbar-track{background:rgba(255,255,255,.08);border-radius:5px}
.fc-lb-th{width:54px;height:70px;flex:0 0 auto;object-fit:cover;border-radius:5px;cursor:pointer;opacity:.55;border:2px solid transparent}
.fc-lb-th.on,.fc-lb-th:hover{opacity:1;border-color:#4f8cff}
.fc-head-img,.fc-comp-img,.fc-row-img,.col-photo img,.photo img[data-img]{cursor:zoom-in}

/* ===== Вкладка «Календарь событий» в панели анализа (журнал изменений цены/скидки) ===== */
.fc-tab-calendar{font-size:13px}
.fc-tab-calendar .chg-sub{padding:2px 2px 10px;line-height:1.4}
.fc-tab-calendar .chg-body{overflow:auto}
.chg-tbl{width:100%;border-collapse:collapse}
.chg-tbl th,.chg-tbl td{padding:6px 10px;border-bottom:1px solid var(--line);white-space:nowrap;text-align:left}
.chg-tbl thead th{position:sticky;top:0;background:var(--panel,#fff);z-index:1;font-weight:600;
  color:var(--muted);font-size:12px}
.chg-tbl .chg-num{text-align:right;font-variant-numeric:tabular-nums}
.chg-tbl .chg-art{font-weight:600}
.chg-tbl .chg-dt{color:var(--muted)}
.chg-tbl tbody tr:hover{background:rgba(79,140,255,.06)}
.chg-up{color:#c0392b}   /* цена вверх — красный (дороже покупателю) */
.chg-dn{color:#2e7d32}   /* цена вниз — зелёный */
.chg-ok{color:#2e7d32;font-weight:600}
.chg-no{color:#c0392b;font-weight:600}
.chg-tbl tr.chg-mine{background:rgba(79,140,255,.10)}
.chg-tbl tr.chg-mine .chg-art{color:var(--accent,#4f8cff)}

/* Тег фазы сезона в списке «Прогноз» */
.phase-chip{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;white-space:nowrap;
  color:#1f2937;border:1px solid rgba(0,0,0,.06)}
.fc-phase{white-space:nowrap}