:root {
  /* Единый вид (задание 7б-2): цвета, размеры шрифта и скругления - только здесь, в правилах ниже - var(--…).
     цвета One Price: красный #CE2D26, графит #1E1E1E, белый */
  /* красный One Price - только логотип; предупреждения - --err и --p1 (решение Константина 22.10, задание 7в) */
  --brand:#ce2d26; --graphite:#1e1e1e;
  --bg:#f6f5f5; --card:#fff; --ink:#1e1e1e; --muted:#696969;
  --line:#e8e8e8;         /* рамки карточек, строк таблиц */
  --line-mid:#d6d6d6;     /* рамка обычной кнопки, подчёркивание ссылок в таблицах */
  --line-strong:#949494;  /* поля ввода, −/+, рамка при наведении (контраст 3:1, WCAG 1.4.11) */
  --faint:#b5b5b5;        /* неактивное: ☆, −/+ без правки, подчёркивание «Подробнее» */
  --hover:#f3f3f3; --head:#fafafa; --chip-bg:#eef1f6; --edited:#fffaf0;
  --ok:#1d7a46; --err:#b42318;
  --ok-line:#b7dfc6; --err-line:#f3b8b2; --info-line:#c9d6e8;
  --warn-bg:#fff4e5; --warn-line:#f5d19a; --warn-tag:#ffe7c2; --warn-ink:#8a5300;
  /* тёмные полосы - шапка и низ прайса */
  --on-dark:#fff; --on-dark-muted:#cfcfcf; --on-dark-line:#5c5c5c; --on-dark-hover:#333;
  --shadow:0 4px 14px rgba(0,0,0,.2); --overlay:rgba(20,20,20,.75);
  /* срочность - те же цвета, что в файле ЗАКАЗ; --p2 темнее жёлтого ЗАКАЗа - контраст текста (26.09) */
  --p1:#d93025; --p1-bg:#fdecea; --p2:#b07800; --p2-bg:#fff6dc; --p3:#2e8b57; --p3-bg:#eaf6ee;
  --p4:#2f6fdb; --p4-bg:#e9f0fd; --p5:#8a8f99; --p5-bg:#f0f1f3;
  /* 6 «Можно отложить» - без цвета; 7 добор до минимума - сиреневый; 8 «Старт» (новый партнёр) - серо-синий */
  --p7:#8b5fbf; --p7-bg:#f3edfa; --p8:#5b7a99; --p8-bg:#edf1f6;
  /* кнопка «обычная»: белая с рамкой; тёмные полосы (шапка, низ прайса) меняют только её цвета и цвета главной */
  --btn-bg:var(--card); --btn-fg:var(--ink); --btn-line:var(--line-mid); --btn-hover:var(--hover);
  /* главная кнопка - тёмная (красный - только предупреждения и логотип, решение Константина 22.10, задание 7в); на тёмных
     полосах - светлая */
  --pri-bg:var(--graphite); --pri-fg:var(--on-dark); --pri-hover:var(--on-dark-hover);
  /* рамка фокуса с клавиатуры (задание 7г) - одна у всего, что нажимается; синяя (задание 7в): контраст 4,1 на белом,
     3,8 на сером фоне, 4,05 на тёмной шапке */
  --focus:#3b7be0;
  /* тень у края таблицы, которая прокручивается вбок (задание 7в, В2) */
  --scroll-shadow:rgba(0,0,0,.18);
  /* на телефоне всё, что нажимается, - не меньше этого (задание 7в, В4) */
  --tap:44px;
  /* шрифт - пять размеров: подписи; основной текст, кнопки, меню; заголовки разделов и поля на телефоне;
     суммы и числа плиток; заголовок страницы */
  --fs-s:12px; --fs:14px; --fs-m:16px; --fs-l:20px; --fs-xl:24px;
  /* скругления: поля, сообщения, фото, подсказки, номера страниц; карточки, плитки, таблицы; кнопки, чипы,
     пилюли, ярлыки, −/+ - полностью круглые края; точки и «?» - круг (50%) */
  --r-s:8px; --r:12px; --r-pill:999px;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }   /* классы с display (.btn, строки таблиц…) не перебивают hidden */
/* только для программ чтения с экрана: подписи таблиц, названия пустых заголовков (задание 7г) */
.vh { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0; }
/* «К содержимому» - первая ссылка страницы, видна при фокусе (задание 7г) */
.skip { position:absolute; left:8px; top:-100px; z-index:100; padding:8px 14px; background:var(--card); color:var(--ink);
  border-radius:var(--r-s); box-shadow:var(--shadow); }
.skip:focus { top:8px; }
main:focus { outline:none; }
body { margin:0; font:var(--fs)/1.45 Roboto, "Segoe UI", Arial, sans-serif; background:var(--bg); color:var(--ink); }
small { font-size:var(--fs-s); }
/* ссылки - тёмные с подчёркиванием (не красные, задание 7в, А6) */
a { color:var(--ink); }
a:hover { color:var(--ink); text-decoration-thickness:2px; }
td a:not(.btn), .crumbs a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-mid); }
td a:not(.btn):hover, .crumbs a:hover { color:var(--ink); border-color:var(--ink); }
.wrap { max-width:1280px; margin:0 auto; padding:0 16px; }
header.top { background:var(--graphite); color:var(--on-dark); }
header.top .wrap { display:flex; align-items:center; gap:14px; min-height:60px; flex-wrap:wrap; }
header.top .muted { color:var(--on-dark-muted); }
/* тёмные полосы: та же «обычная» кнопка, только светлая (ответ аналитика 21.10, вопрос 4); главная - светлая с тёмным
   текстом (ответ аналитика 22.10, вопрос 3) */
header.top, .price-bar { --btn-bg:transparent; --btn-fg:var(--on-dark); --btn-line:var(--on-dark-line); --btn-hover:var(--on-dark-hover);
  --pri-bg:var(--card); --pri-fg:var(--ink); --pri-hover:var(--hover); }
.brand { display:flex; align-items:center; gap:10px; color:var(--on-dark); text-decoration:none; }
.brand:hover { color:var(--on-dark); }
.brand img { height:32px; display:block; }
.brand .word { font-weight:900; font-size:var(--fs-l); letter-spacing:-.5px; line-height:1; text-transform:lowercase; }
.brand .word i { font-style:normal; color:var(--brand); }
.brand .sep { width:1px; height:22px; background:var(--on-dark-line); }
.brand .what { color:var(--on-dark-muted); }
.sp { flex:1; }
/* кнопки шапки: на компьютере - в строку; на телефоне - в «Меню ▾» (ниже, задание 7в, В1) */
.top-btns { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
header.top [data-toggle], .price-bar [data-toggle] { display:none; }   /* сильнее .btn; на телефоне - есть */
main.wrap { padding-top:20px; padding-bottom:56px; }
h1 { font-size:var(--fs-xl); margin:0 0 4px; font-weight:700; }
h2 { font-size:var(--fs-m); margin:28px 0 10px; }
.muted { color:var(--muted); }
/* подпись (12 px) - только вторичное: строка под названием, «по 6 шт», «= 12 шт», цена за шт, «рекомендовано»,
   «за 8 нед.», счётчики; остальной текст строк и карточек - основной размер (задание 7б-2, Ж4) */
.sub { font-size:var(--fs-s); color:var(--muted); }
.warn { color:var(--err); }
.mine { color:var(--warn-ink); }
.note { margin:-4px 0 10px; max-width:900px; }
.nowrap { white-space:nowrap; }
.crumbs { margin:0 0 10px; color:var(--muted); }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px 20px; }
.card.narrow { max-width:640px; }
.note-card { margin-bottom:14px; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
form.inline { display:inline; }
/* кнопки - три вида: главная (тёмная, задание 7в), обычная (белая с рамкой), текстовая (.link); два размера - обычный и
   .small */
.btn { font:inherit; font-size:var(--fs); border:1px solid var(--btn-line); background:var(--btn-bg); color:var(--btn-fg);
  padding:7px 16px; border-radius:var(--r-pill); cursor:pointer; text-decoration:none; display:inline-block; }
.btn:hover { background:var(--btn-hover); color:var(--btn-fg); }
.btn.primary { --btn-bg:var(--pri-bg); --btn-line:var(--pri-bg); --btn-fg:var(--pri-fg); --btn-hover:var(--pri-hover); font-weight:500; }
.btn.primary:hover { border-color:var(--btn-hover); }
.btn.small { padding:4px 12px; }
.btn.link { --btn-bg:transparent; --btn-line:transparent; --btn-hover:transparent; --btn-fg:var(--muted);
  text-decoration:underline; padding-left:4px; padding-right:4px; }
.btn.link:hover { --btn-fg:var(--ink); }   /* .link - после .small: у текстовой узкие поля */
input, select { font:inherit; font-size:var(--fs); padding:7px 10px; border:1px solid var(--line-strong); border-radius:var(--r-s); background:var(--card); color:var(--ink); }
.msg { padding:10px 14px; border-radius:var(--r-s); margin:0 0 14px; border:1px solid var(--line); background:var(--card); }
.msg.err { border-color:var(--err-line); background:var(--p1-bg); }
.msg.ok { border-color:var(--ok-line); background:var(--p3-bg); }
.msg.warn, .msg.link { border-color:var(--warn-line); background:var(--warn-bg); color:var(--ink); }
input:focus, select:focus { outline:2px solid var(--focus); outline-offset:-1px; }
.msg.link input { width:100%; margin-top:6px; }
/* вход и пароль: поля столбиком */
.form-col { display:flex; flex-direction:column; gap:12px; max-width:360px; margin:0 0 12px; }
.form-col label { display:flex; flex-direction:column; gap:4px; }
.form-col p { margin:0; }
.tag { font-size:var(--fs-s); padding:1px 8px; border-radius:var(--r-pill); background:var(--chip-bg); color:var(--muted); font-weight:400; }
.tag.adm { color:var(--ink); font-weight:600; }
.tag.off { background:var(--p1-bg); color:var(--err); }
/* звёздочка «мой партнёр» в админке (только фильтр «Мои партнёры») */
button.star { font:inherit; font-size:var(--fs-m); line-height:1; border:0; background:transparent; color:var(--faint);
  cursor:pointer; padding:2px 4px; margin-right:2px; }
button.star:hover, button.star[aria-pressed="true"] { color:var(--ink); }
.up { color:var(--ok); }
.down { color:var(--err); }
.cnt { font-size:var(--fs-s); font-weight:600; color:var(--muted); background:var(--chip-bg); border-radius:var(--r-pill); padding:0 7px; margin-left:3px; }

/* шапка расчёта и вкладки */
.calc-head { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px; }
.calc-head p { margin:2px 0 0; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; overflow-x:auto; overflow-y:hidden; }
.tab-links { --scroll-bg:var(--bg); display:flex; gap:4px; }
.tabs a { padding:9px 14px; text-decoration:none; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap; margin-bottom:-1px; }
.tabs a.on { color:var(--ink); border-color:var(--ink); font-weight:700; }
.tabs a:hover { color:var(--ink); }

/* цифры сверху */
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; margin-bottom:14px; }
/* плитки - без заливки (задание 7в, А5); у плиток главной со смыслом - цветная полоса сверху, цвет точки срочности, и при
   нуле (решение Константина 22.10, задание 7е, правка 1); «Сумма заказа», «Позиций», «В пути» и плитки аналитики - без неё */
.kpi { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; }
.kpi.p1 { --stripe:var(--p1); } .kpi.p2 { --stripe:var(--p2); } .kpi.p4 { --stripe:var(--p4); } .kpi.p7 { --stripe:var(--p7); }
.kpi.p1, .kpi.p2, .kpi.p4, .kpi.p7 { border-top:3px solid var(--stripe); }
.kpi span { display:block; color:var(--muted); }
.kpi b { display:block; font-size:var(--fs-l); margin-top:2px; font-weight:700; }
.kpi small { font-size:var(--fs); color:var(--muted); }
/* плитка-ссылка на свой список (задание 7а): нажимается вся, «›» после названия; наведение и фокус - рамка темнее
   (без ссылки - div, без реакции на мышь); цветная полоса при наведении остаётся */
a.kpi-link { color:inherit; text-decoration:none; cursor:pointer; }
a.kpi-link:hover, a.kpi-link:focus-visible { border-color:var(--ink); border-top-color:var(--stripe, var(--ink)); color:inherit; }
a.kpi-link span i { font-style:normal; }
/* «Подробнее» в таблице категорий: колонки .more скрыты, пока не нажали */
table:not(.show-more) .more { display:none; }
/* «Найти товар» в строке вкладок кабинета */
.tab-search { display:flex; gap:6px; align-items:center; margin-left:auto; padding:4px 0; }
.tab-search input { width:200px; }

/* поставщики */
.suppliers { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:10px; }
/* у всех карточек прайсов - одна тёмная рамка (решение Константина 22.10, задание 7е, правка 3); ниже минимума - только
   красная полоса минимума */
.supp { background:var(--card); border:1px solid var(--graphite); box-shadow:inset 0 0 0 1px var(--graphite); border-radius:var(--r);
  padding:12px 14px; display:flex; flex-direction:column; gap:4px; }
.supp-top { display:flex; justify-content:space-between; gap:8px; }
.supp-sum { font-size:var(--fs-l); font-weight:700; }
.supp .cond { margin-top:2px; }
.supp-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:auto; padding-top:8px; }
.bar { height:6px; background:var(--chip-bg); border-radius:var(--r-pill); overflow:hidden; margin-top:6px; }
.bar i { display:block; height:100%; background:var(--p3); }
.supp.bad .bar i { background:var(--p1); }
.bar.free i { background:var(--p4); }
/* «Как заказать ›» на главной: на компьютере открыто и без заголовка, на телефоне - свёрнуто (задание 7в, В1) */
details.how > summary { display:none; }

/* фильтры */
.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.filters .f-text, .filters input[type=search] { min-width:260px; flex:0 1 420px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { font:inherit; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:var(--r-pill); padding:4px 10px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
a.chip { text-decoration:none; }

/* прокрутка вбок (таблицы; вкладки на телефоне): у края, куда можно прокрутить, - тень (задание 7в, В2); полосы цвета
   фона (--scroll-bg) едут с содержимым (local) и закрывают тень, когда край уже виден */
.tbl, .tab-links {
  background:linear-gradient(to right, var(--scroll-bg) 30%, transparent) left / 32px 100% no-repeat local,
    linear-gradient(to left, var(--scroll-bg) 30%, transparent) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right / 12px 100% no-repeat scroll,
    var(--scroll-bg); }
.tbl { --scroll-bg:var(--card); overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); }
.card .tbl { border:none; border-radius:0; }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }   /* цифры одной ширины */
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
/* шапка - подпись: всегда в одну строку (задание 7е, правка 6), по нижнему краю, числа - вправо; «?» - справа от
   последнего слова на той же строке (7в, А9) */
th { font-size:var(--fs-s); color:var(--muted); font-weight:600; background:var(--head); position:sticky; top:0;
  vertical-align:bottom; white-space:nowrap; }
tbody tr:last-child td { border-bottom:none; }
td.r, th.r { text-align:right; }
td.r { white-space:nowrap; }
td.c-num, th.c-num { width:36px; }
.c-name { min-width:260px; max-width:420px; overflow-wrap:anywhere; }   /* длинное слово без пробелов переносится */
.c-why { color:var(--muted); min-width:220px; max-width:360px; }
.c-prio { width:6px; padding:8px 0 8px 10px; }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; background:var(--p5); margin-top:5px; flex:none; }
.p1 .dot { background:var(--p1); } .p2 .dot { background:var(--p2); } .p3 .dot { background:var(--p3); }
.p4 .dot { background:var(--p4); } .p5 .dot { background:var(--p5); } .p7 .dot { background:var(--p7); }
.p8 .dot { background:var(--p8); }
.chip .dot { margin-top:0; }
td .dot { margin-top:6px; }
/* полоса срочности слева и отступ первой клетки - только на компьютере (на телефоне строка - карточка) */
@media (min-width:641px) {
  table.lines tr.p1 td:first-child { box-shadow:inset 3px 0 0 var(--p1); }
  table.lines tr.p2 td:first-child { box-shadow:inset 3px 0 0 var(--p2); }
  table.lines tr.p3 td:first-child { box-shadow:inset 3px 0 0 var(--p3); }
  table.lines tr.p4 td:first-child { box-shadow:inset 3px 0 0 var(--p4); }
  table.lines tr.p5 td:first-child { box-shadow:inset 3px 0 0 var(--p5); }
  table.lines tr.p7 td:first-child { box-shadow:inset 3px 0 0 var(--p7); }
  table.lines tr.p8 td:first-child { box-shadow:inset 3px 0 0 var(--p8); }
  table.lines th:first-child, table.lines td:first-child { padding-left:12px; }
}
tr.off td { color:var(--muted); }
table.admin td { vertical-align:middle; }
.gaps { margin:6px 0 0; padding-left:20px; }

/* фото: ширина клетки = ширине фото, до названия - 12 px (телефон - ниже, Ж5); мини-фото - кнопка (задание 7г) */
.c-ph { width:56px; padding-right:0; }
/* кнопки без своего вида (мини-фото, название колонки, слово с пояснением) - сброс общий, ниже - .hint-text */
.ph-btn, .sort-btn, .hint-text, .tw { font:inherit; color:inherit; background:transparent; border:0; padding:0; margin:0; }
.ph-btn { display:block; cursor:zoom-in; border-radius:var(--r-s); }
.ph { width:44px; height:44px; object-fit:contain; border-radius:var(--r-s); background:var(--card); border:1px solid var(--line);
  display:block; margin-top:-2px; }
.ph.lg { width:64px; height:64px; }
table.catalog .c-ph { width:76px; }
/* крупное фото - окно (role="dialog"): фото, название, «Закрыть»; фон затемнён, нажатие на фон закрывает */
.lightbox { position:fixed; inset:0; background:var(--overlay); display:flex; align-items:center; justify-content:center; z-index:50; cursor:zoom-out; padding:16px; }
.lb-box { display:flex; flex-direction:column; align-items:center; gap:8px; max-width:min(92vw, 820px); padding:10px;
  background:var(--card); border-radius:var(--r-s); cursor:default; }
.lb-box img { max-width:100%; max-height:78vh; min-width:280px; object-fit:contain; image-rendering:auto; }
.lb-cap { margin:0; text-align:center; }

/* прайсы */
table.catalog tr.off td { color:var(--muted); }
.c-have, .c-inorder { min-width:130px; }
table.catalog tr:not([class=""]):not(.off) .c-inorder b { color:var(--ink); }

/* количество «− [ ] +» */
.qty { display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--r-pill); background:var(--card); overflow:hidden; }
.qty button { font:inherit; font-size:var(--fs-m); border:0; background:transparent; width:30px; padding:0; height:30px; cursor:pointer; color:var(--ink); }
.qty button:hover:not(:disabled) { background:var(--hover); }
.qty input { width:54px; border:0; border-radius:0; text-align:center; padding:4px 2px; font-weight:600; }
.qty input:focus { outline:none; background:var(--hover); }
.qty .q-unit { font-size:var(--fs-s); color:var(--muted); padding:0 10px 0 2px; }
.qty.busy { opacity:.6; }
.qty.err { border-color:var(--err); }
.qty.locked { background:var(--hover); }
.qty.locked button { cursor:default; color:var(--faint); }
.qty:focus-within { box-shadow:0 0 0 2px var(--focus); }
/* поле количества - по линии текста строки, а не ниже него */
td .qty { margin-top:-6px; vertical-align:top; }
td.c-qty .q-note, td.c-inorder .q-note { margin-top:2px; }
td.c-qty { white-space:nowrap; }
/* «Заказать» - по центру колонки; −/+ одной ширины, под полем - «по 15 шт», «Вернуть» (7б-1) */
th.c, td.c-qty, td.c-inorder { text-align:center; }
.stepper { display:inline-flex; flex-direction:column; align-items:center; gap:1px; }
tr.edited td { background:var(--edited); }
.dl-mark { margin-top:4px; }
.price-bar { position:sticky; bottom:0; margin:18px -16px -56px; background:var(--graphite); color:var(--on-dark); padding:10px 0; z-index:5; }
.price-bar .wrap { gap:14px; }
.price-bar .muted, .price-bar .sub { color:var(--on-dark-muted); }
.price-bar .muted b { color:var(--on-dark); }
/* на телефоне - кнопка с суммой, раскрывает подробности полосы (ниже, задание 7в, В5) */
/* минимум, доставка, «вернуть как было» (#bar-more): на компьютере - в общей строке полосы, «вернуть как было» - после
   «Скачать»; на телефоне - блоком по кнопке (ниже) */
.bar-more { display:contents; }
.bar-more form { order:1; }
.toast { position:fixed; left:50%; bottom:80px; transform:translateX(-50%); background:var(--graphite); color:var(--on-dark); padding:9px 16px; border-radius:var(--r-pill); z-index:60; box-shadow:var(--shadow); }

/* товары сети */
table.net tr.net-row { cursor:pointer; }
table.net tr.net-row:hover td { background:var(--head); }
table.net tr.net-row.open td { background:var(--hover); border-bottom-color:transparent; }
table.net tr.net-det > td { background:var(--hover); padding-top:0; }
table.inner { background:var(--card); border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden; }
table.inner th { background:var(--head); }
/* квадратики партнёров - не только цветом, но и формой (задание 7г): продаётся - залитый, кончился - перечёркнутый
   наискосок, есть, но не продаётся - пустой с точкой, нет в ассортименте - пустой */
.sdot { display:inline-block; width:12px; height:12px; border-radius:0; margin-right:3px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line-strong); }
.sdot.s-sells { background:var(--p3); box-shadow:none; }
.sdot.s-out { box-shadow:inset 0 0 0 2px var(--p1);
  background:linear-gradient(to top right, transparent 40%, var(--p1) 40%, var(--p1) 60%, transparent 60%), var(--card); }
.sdot.s-nosales { box-shadow:inset 0 0 0 2px var(--p2); background:radial-gradient(circle, var(--p2) 2.5px, transparent 3px), var(--card); }
/* колонки партнёров: над квадратиками - начало имени (portal.short_names), полное - «?»; по 12 в строке */
.net-slots { --slot:24px; display:flex; flex-wrap:wrap; max-width:calc(var(--slot) * 12); }
.net-slots .slot { width:var(--slot); display:inline-flex; justify-content:center; }
.net-slots .sdot { margin:0; }
th .net-slots { margin-top:2px; }
td .net-slots { padding-top:3px; }
.sbadge { font-size:var(--fs-s); padding:2px 9px; border-radius:var(--r-pill); background:var(--chip-bg); white-space:nowrap; }
tr.s-sells .sbadge { background:var(--p3-bg); color:var(--ok); }
tr.s-out .sbadge { background:var(--p1-bg); color:var(--err); }
tr.s-nosales .sbadge { background:var(--p2-bg); color:var(--warn-ink); }
tr.s-absent td { color:var(--muted); }
.hint { font-size:var(--fs-s); color:var(--ink); font-weight:600; white-space:nowrap; }
.legend { margin:0 0 8px; }
.legend .sdot { margin-left:8px; vertical-align:-1px; }
.det-note { margin:0 0 6px; max-width:900px; }

/* видимый фокус для клавиатуры (WCAG 2.4.7, задание 7г): кнопки, ссылки, пилюли, «?», «Подробнее», строки сети,
   области таблиц - одна рамка; у области таблицы, строки сети и пунктов меню - внутрь, чтобы края не обрезали */
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.tbl:focus-visible, tr.net-row:focus-visible, .menu-pop :focus-visible, .tabs a:focus-visible,
.qty button:focus-visible { outline-offset:-2px; }   /* у вкладок и −/+ родитель обрезает края (overflow) */
select { max-width:100%; }
.card > :first-child { margin-top:0; }
.card > :last-child { margin-bottom:0; }

/* ---- сортировка по колонкам (задание 7в, А3) - в браузере (th.sortable, portal.js) и на сервере (a.sort-link): стрелка
   справа от подписи (после «?»), место под неё есть всегда - текст не сдвигается; видна, только когда сортировку выбрал
   пользователь (data-dir), при наведении и фокусе - бледная ⇅ ---- */
th.sortable { cursor:pointer; user-select:none; }
th.sortable:hover { color:var(--ink); }
/* название колонки - кнопка (portal.js, задание 7г): с клавиатуры Tab и Enter / пробел, вид прежний */
.sort-btn { cursor:pointer; text-align:inherit; }
.sort-ic { display:inline-block; width:10px; margin-left:2px; text-align:center; line-height:1; color:var(--ink); }
.sort-ic::after { content:""; }
th.sortable:not([data-dir]):hover .sort-ic::after,
th:not([data-dir]):has(.sort-btn:focus-visible, .sort-link:hover, .sort-link:focus-visible) .sort-ic::after { content:"⇅"; opacity:.6; }
th[data-dir="desc"] .sort-ic::after { content:"▼"; }
th[data-dir="asc"] .sort-ic::after { content:"▲"; }
/* прайс целиком: карточка суммы сверху, галочки новинок, номера страниц (28.09) */
.price-card { margin-bottom:14px; }
.pick-bar { gap:8px; margin:0 0 10px; align-items:center; }
table.lines .c-pick { width:30px; padding-right:0; }
/* перенос товара в другую категорию (задание 10): кнопки в строке товара, страница «Перенести товар» */
.move-btns { display:flex; flex-wrap:wrap; gap:2px 10px; align-items:center; margin-top:2px; }
.move-items { margin:0 0 12px; padding-left:18px; }
.move-items li { margin-bottom:6px; }
.move-form { display:flex; flex-direction:column; gap:12px; max-width:640px; }
.move-form label { display:flex; flex-direction:column; gap:4px; }
.move-form select { width:100%; }
/* какие категории видит партнёр (задание 11): настройка на карточке партнёра в админке */
.cat-view { margin:14px 0 0; }
.cat-view fieldset { border:0; margin:0; padding:0; min-width:0; }
.cat-view legend { padding:0; margin-bottom:6px; font-weight:600; }
.cat-view legend .sub { font-weight:400; }
.cat-view .row { gap:8px 16px; }
.cat-view p { margin:6px 0 0; max-width:900px; }
/* пилюли вида «Категорий» у администратора и «партнёр видит» рядом (задание 11) */
.cat-views { margin:0 0 12px; }
.cat-views .pills { margin:0; }
/* ветка строки «Категорий» (задание 12): ▸ / ▾ перед названием (по aria-expanded; значок скрыт от программ чтения -
   у них подпись кнопки), уровни - с отступом, строка раздела - заголовком над его категориями */
/* кнопка ветки заметнее (задание 7в, Б4): ▸ / ▾ крупнее и тёмные, нажимается квадрат 32 px (на телефоне 44) */
.tw-row { display:flex; align-items:flex-start; gap:4px; }
.tw, .tw-no { flex:none; min-width:32px; height:32px; margin:-6px 0; }
.tw { display:inline-flex; align-items:center; justify-content:center; gap:4px; color:var(--ink); font-size:var(--fs-l);
  line-height:1; cursor:pointer; border-radius:var(--r-s); }
.tw:hover { background:var(--hover); }
.tw-ic::before { content:"▸"; }
.tw[aria-expanded="true"] .tw-ic::before { content:"▾"; }
.tw-wait { font-size:var(--fs-s); white-space:nowrap; }
.tw-msg { display:block; color:var(--err); }
.tw-msg:empty { display:none; }
table.cats-tbl tr.lv1 .tw-row { padding-left:20px; }
table.cats-tbl tr.lv2 .tw-row { padding-left:40px; }
table.cats-tbl tr.lv3 .tw-row { padding-left:60px; }
table.cats-tbl tr.div-row { background:var(--head); }
.c-pick input { width:18px; height:18px; margin:6px 0 0; cursor:pointer; }
/* галочка - в label: на телефоне нажимается квадрат 44 px (задание 7в, В4) */
.pick { display:inline-flex; cursor:pointer; }
.pager { display:flex; justify-content:center; flex-wrap:wrap; gap:4px; margin:14px 0 4px; }
.pager a, .pager span { min-width:36px; padding:6px 10px; border-radius:var(--r-s); text-align:center; text-decoration:none;
  border:1px solid var(--line); background:var(--card); color:var(--ink); }
.pager a:hover { border-color:var(--line-strong); color:var(--ink); }
.pager .gap { border-color:transparent; background:transparent; color:var(--muted); min-width:0; }
/* «Запасы» (бывший «Залежалый товар»): ниже пилюль - только выбранный список, «Рано судить» - серый */
.stale-block { margin:0 0 22px; }
.stale-why { max-width:900px; }
.stale-block.grey, .stale-block.grey h2, .stale-block.grey td, .stale-block.grey td b { color:var(--muted); }
table.stale-tbl .c-cat { min-width:120px; max-width:200px; }
table.stale-tbl .c-why { max-width:none; min-width:200px; }
/* «похоже на ошибку прихода»: не только цвет - значок и текст */
table.stale-tbl tr.suspect > td { background:var(--warn-bg); }
table.stale-tbl tr.suspect > td:first-child { box-shadow:inset 3px 0 0 var(--p2); }
table.stale-tbl tr.suspect .c-why { color:var(--ink); }
.suspect-tag { display:inline-block; margin-top:3px; font-size:var(--fs-s); font-weight:700; color:var(--warn-ink);
  background:var(--warn-tag); border-radius:var(--r-pill); padding:1px 7px; }
.suspect-note { max-width:900px; background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:var(--r-s); padding:8px 12px; margin:0 0 12px; }
.suspect-note ul { margin:6px 0; padding-left:20px; }
.suspect-note li { margin:2px 0; }
/* состояние спроса: «растёт» / «падает» - цветом, «стабильно» / «мало истории» - серым */
.trend { white-space:nowrap; }

/* ---- таблица заказа помещается в экран без прокрутки вбок (28.09) ---- */
/* «почему» - под названием товара, а не отдельной колонкой; заголовки в одну строку */
table.lines td.c-name { min-width:240px; max-width:none; }
table.lines .c-name .why { color:var(--muted); margin-top:3px; line-height:1.35; }
table.lines th, table.lines td { padding-left:7px; padding-right:7px; }
/* небольшой экран (окно уже 1200 точек): плотнее, чтобы таблица помещалась без прокрутки вбок */
@media (min-width:641px) and (max-width:1200px) {
  table.lines th, table.lines td { padding-left:5px; padding-right:5px; }
  table.lines td.c-name { min-width:160px; }
  table.lines .c-ph { width:46px; }
  table.lines .ph { width:38px; height:38px; }
  table.lines .qty button { width:24px; }
  table.lines .qty input { width:40px; }
  table.lines .qty .q-unit { padding-right:6px; }
}

h2.block-head { margin-top:22px; }
/* новый партнёр: спокойная плашка и раздел «Стартовая матрица» */
.msg.start-msg { border-color:var(--info-line); background:var(--p8-bg); }
.start-head p { margin:4px 0; }
.start-head ul { margin:4px 0; padding-left:20px; }
.start-cats { margin-top:10px; }
.start-supp { margin:10px 0; padding-left:20px; }
.start-skip { margin:12px 0; }
.start-skip summary { cursor:pointer; font-weight:600; }

/* ---- задание 7б ---- */
/* «пилюли» - выбор внутри страницы (разделы аналитики, списки «Запасов», разделы «Требуют внимания», «Что кончается»):
   один спокойный вид, без красного; выбранная - тёмная рамка и жирный текст, число - серым (решение 21.10) */
.pills { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.pill { text-decoration:none; color:var(--ink); background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:5px 12px; display:inline-flex; align-items:baseline; gap:5px; }
.pill:hover { color:var(--ink); border-color:var(--line-strong); }
/* выбранное - один вид везде: пилюля, чип фильтра, номер страницы - тёмная рамка и жирный, без заливки */
.pill[aria-current], .chip[aria-current], .pager .on {
  border-color:var(--graphite); box-shadow:inset 0 0 0 1px var(--graphite); font-weight:700; }
.pill .cnt, .pill-sum { background:transparent; padding:0; margin:0; font-weight:400; color:var(--muted); font-size:var(--fs-s); }
.pills + h2, .kpis + .pills { margin-top:4px; }
/* подсказка «?» - по нажатию и наведению (portal.js, data-hint), окно - над страницей */
.hint-q { font:inherit; font-size:var(--fs-s); font-weight:700; line-height:16px; width:18px; height:18px; padding:0; margin-left:3px;
  border-radius:50%; border:1px solid var(--line-strong); background:var(--card); color:var(--muted); cursor:pointer; vertical-align:1px; }
th .hint-q { margin-left:0; }   /* в заголовке «?» отделён неразрывным пробелом (head) */
.hint-q:hover, .hint-q[aria-expanded="true"] { color:var(--ink); border-color:var(--ink); }
/* пояснение на самом слове (статус пробы) или на точке приоритета - то же окно по нажатию */
.hint-text { cursor:help; border-bottom:1px dotted currentColor; }
button.dot { border:0; padding:0; cursor:help; }
.hint-pop { position:absolute; z-index:40; max-width:340px; background:var(--graphite); color:var(--on-dark); line-height:1.4;
  padding:8px 12px; border-radius:var(--r-s); box-shadow:var(--shadow); white-space:pre-line; }   /* абзацы текстов движка (7г) */
/* «почему» движка - под «Подробнее» (<details>, без JS) */
details.why summary { cursor:pointer; display:inline; list-style:none; color:var(--ink); text-decoration:underline;
  text-decoration-color:var(--faint); text-underline-offset:2px; }
details.why summary::-webkit-details-marker { display:none; }
details.why summary:hover { text-decoration-color:currentColor; }
details.why > div { margin-top:2px; }
/* «Что кончается», страница категории: сортировка - ссылками в заголовке */
th a.sort-link { color:inherit; text-decoration:none; border-bottom:1px dotted var(--line-strong); }
th a.sort-link:hover { color:var(--ink); }
/* админка, таблица партнёров (Ж1): на 1280 / 1366 помещается целиком - подписи в одну строку, без «?» (задание 7е);
   уже - прокрутка внутри .tbl, имя слева и кнопки справа остаются на месте */
/* действия партнёра - одной кнопкой «Действия ▾» с меню (задание 7д): окно поверх таблицы (portal.js ставит
   position:fixed - прокрутка .tbl его не обрезает) */
details.menu { position:relative; display:inline-block; }
details.menu > summary { list-style:none; white-space:nowrap; }
details.menu > summary::-webkit-details-marker { display:none; }
.menu-pop { position:absolute; right:0; top:100%; z-index:30; min-width:180px; padding:4px 0; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-s); box-shadow:var(--shadow); }
/* сильнее «td a:not(.btn)» - пункты меню без подчёркивания */
details.menu .menu-pop button, details.menu .menu-pop a { display:block; width:100%; font:inherit; text-align:left; padding:8px 14px; border:0;
  background:transparent; color:var(--ink); text-decoration:none; cursor:pointer; white-space:nowrap; }
details.menu .menu-pop button:hover, details.menu .menu-pop a:hover,
details.menu .menu-pop button:focus-visible, details.menu .menu-pop a:focus-visible { background:var(--hover); color:var(--ink); }
table.admin.partners td.acts:has(details[open]) { z-index:3; }
/* строка партнёра - в одну линию (задание 7д): без переносов, подписи («за 8 нед.», «правил») - рядом с числом */
table.admin.partners td { white-space:nowrap; }
table.admin.partners td .sub { display:inline; margin-left:4px; }
table.admin.partners td.wrap { white-space:normal; }      /* замечание о формате данных - длинный текст */
/* таблицы админки (и кандидаты стартовой матрицы) не помещаются - прокрутка внутри, первая колонка (имя) на месте
   (задание 7в, В2); у «Товаров сети» на месте - название товара */
@media (max-width:1250px) {
  table.admin tr > :first-child, table.net tr > .c-name { position:sticky; left:0; z-index:1; background:var(--card); }
  table.admin tr > th:first-child, table.net tr > th.c-name { z-index:2; background:var(--head); }
  table.admin.partners td.acts { position:sticky; right:0; background:var(--card); box-shadow:-1px 0 0 var(--line); }
}
/* выбор партнёра в шапке кабинета администратора */
.crumbs.row { gap:6px 12px; }
.crumbs select { padding:4px 8px; }

/* ---- телефон ---- */
@media (max-width:640px) {
  h1 { font-size:var(--fs-l); }
  .brand .sep, .brand .what { display:none; }
  /* шапка - одной строкой: кнопки - в «Меню ▾» (задание 7в, В1; правило 7б-2 «переносятся» для телефона снято) */
  header.top .wrap { position:relative; gap:8px; min-height:56px; padding-top:6px; padding-bottom:6px; flex-wrap:nowrap; }
  header.top .wrap > .muted { display:none; }
  header.top [data-toggle] { display:inline-flex; }
  .top-btns { display:none; position:absolute; right:16px; top:100%; z-index:40; min-width:220px; flex-direction:column;
    align-items:stretch; gap:6px; padding:8px; background:var(--graphite); border:1px solid var(--on-dark-line);
    border-radius:var(--r-s); box-shadow:var(--shadow); }
  header.top:has([data-toggle="menu"][aria-expanded="true"]) .top-btns { display:flex; }
  .top-btns a, .top-btns form, .top-btns button { width:100%; justify-content:flex-start; }
  .filters .f-text, .filters input[type=search] { flex:1 1 60%; min-width:0; }   /* «Найти» - рядом, не строкой ниже */
  .c-name { min-width:200px; }
  /* вкладки - одной строкой с прокруткой вбок (тень у края - есть ещё), поиск - строкой под ними (задание 7в, В1) */
  .tabs { flex-wrap:wrap; overflow:visible; gap:8px; border-bottom:0; margin-bottom:14px; }
  .tab-links { flex:1 1 100%; gap:0; overflow-x:auto; border-bottom:1px solid var(--line); scrollbar-width:none; }
  .tabs a { display:inline-flex; align-items:center; min-height:var(--tap); padding:0 10px; }
  .tab-search { flex:1 1 100%; margin-left:0; padding:0; }
  .tab-search input { flex:1 1 auto; width:auto; min-width:0; }
  /* плитки - по две в строке, компактно; «Сумма заказа» и «Позиций» - в заголовке «Стоит заказать» (задание 7в, В1, В3) */
  .kpis { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  .kpi { padding:8px 10px; }
  .kpi-dup { display:none; }
  details.how > summary { display:flex; gap:6px; cursor:pointer; list-style:none; font-weight:600; }
  details.how > summary::-webkit-details-marker { display:none; }
  details.how[open] > summary span { display:inline-block; transform:rotate(90deg); }
  /* всё, что нажимается, - не меньше --tap (44 px, задание 7в, В4); сама кнопка, без выхода за свою клетку и без наложения
     на соседние кнопки (замечания проверки кода 1, 2) */
  .btn, .btn.small { min-height:var(--tap); padding:10px 16px; display:inline-flex; align-items:center; justify-content:center; }
  .btn.link { padding-left:4px; padding-right:4px; }
  .chip { min-height:var(--tap); padding:7px 12px; }
  .pill { min-height:var(--tap); align-items:center; }
  .qty button { width:var(--tap); height:var(--tap); }
  .qty input { height:var(--tap); width:56px; font-size:var(--fs-m); }
  .stepper { align-items:flex-start; }
  input, select { font-size:var(--fs-m); min-height:var(--tap); }       /* 16 px - телефон не увеличивает страницу при вводе */
  .pager a, .pager span { min-width:var(--tap); min-height:var(--tap); display:inline-flex; align-items:center; justify-content:center; }
  /* «?» - кнопка --tap в обе стороны, видимый кружок 18 px рисует ::before; слово с пояснением - не меньше 44 px, подчёркнуто
     у текста */
  .hint-q { position:relative; z-index:0; display:inline-flex; align-items:center; justify-content:center; width:var(--tap);
    height:var(--tap); border:0; background:transparent; vertical-align:middle; }
  .hint-q::before { content:""; position:absolute; z-index:-1; left:13px; top:13px; width:18px; height:18px;
    border:1px solid var(--line-strong); border-radius:50%; background:var(--card); }
  .hint-q:hover::before, .hint-q[aria-expanded="true"]::before { border-color:var(--ink); }
  .hint-text { display:inline-flex; align-items:center; min-width:var(--tap); min-height:var(--tap); border-bottom:0;
    text-decoration:underline dotted; text-underline-offset:3px; }
  main summary { min-height:var(--tap); display:flex; align-items:center; }
  details.why summary { display:inline-flex; }
  details.menu .menu-pop button, details.menu .menu-pop a { min-height:var(--tap); }
  button.star { min-width:var(--tap); min-height:var(--tap); }
  .tw, .tw-no { min-width:var(--tap); height:var(--tap); margin:0; }
  .pick { width:var(--tap); height:var(--tap); align-items:center; justify-content:center; }
  table.lines td.c-pick { width:auto; flex:0 0 auto; }            /* клетка - по ширине галочки, соседняя не наезжает */
  .c-pick input { margin:0; }
  .cat-view label { display:inline-flex; align-items:center; gap:6px; min-height:var(--tap); }
  /* отдельные ссылки (имя в таблице, «← К заказу», «сбросить») - не меньше 44 px, подчёркивание - у текста; ссылки
     внутри текста абзаца - как есть (правило доступности их не требует, замечание проверки кода 2) */
  main td > a:not([class]), main td b > a:not([class]), main td .tw-row a, .crumbs a, .filters > a {
    display:inline-flex; align-items:center; min-width:var(--tap); min-height:var(--tap); border-bottom:0; text-decoration:underline;
    text-decoration-color:var(--line-mid); text-underline-offset:3px; }
  .ph-btn { min-width:var(--tap); min-height:var(--tap); }
  .brand { min-height:var(--tap); }
  .skip { padding:12px 14px; }
  /* таблица партнёров: на телефоне на месте только имя - «Действия ▾» справа закрывали бы половину узкого экрана */
  table.admin.partners td.acts { position:static; box-shadow:none; }
  /* «Товары сети»: подписи партнёров (по нажатию - полное имя) - по --tap, 6 в строке */
  .net-slots { --slot:var(--tap); width:calc(var(--slot) * 6); max-width:none; }
  .slot .hint-text { width:var(--slot); justify-content:center; }
  form.row label { display:block; width:100%; }
  form.row label select { display:block; width:100%; margin-top:4px; }
  /* строки таблиц - карточками: фото и название, под ними цифры, количество целиком видно;
     клетка фото - по ширине самого фото, до названия 12 px (находка 31, Ж5) */
  table.lines thead { display:none; }
  table.lines, table.lines > tbody { display:block; }
  table.lines > tbody > tr { display:flex; flex-wrap:wrap; align-items:flex-start; gap:4px 12px; padding:12px; border-bottom:1px solid var(--line); }
  table.lines > tbody > tr > td { display:block; border:0; padding:0; text-align:left; min-width:0; max-width:none; }
  table.lines td.c-prio { display:none; }
  table.lines td.c-ph { flex:0 0 auto; width:auto; }
  table.lines td.c-ph:empty { display:none; }
  table.lines td.c-name { flex:1 1 calc(100% - 76px); }
  table.lines td.c-why { overflow-wrap:anywhere; }   /* слово без пробелов не шире экрана (у .c-name - везде) */
  table.lines td[data-label]::before { content:attr(data-label) ": "; color:var(--muted); }
  table.lines td[data-label]:empty { display:none; }
  table.lines td[data-label] .sub { display:inline; margin-left:4px; }
  table.lines td.c-qty, table.lines td.c-inorder { flex:1 1 100%; text-align:left; }
  table.lines td.c-qty .qty, table.lines td.c-inorder .qty { margin-top:4px; }
  table.lines td.row-sum { font-size:var(--fs-m); font-weight:600; }
  table.lines td.c-why { flex:1 1 100%; }
  table.lines tr.p1 { box-shadow:inset 3px 0 0 var(--p1); } table.lines tr.p2 { box-shadow:inset 3px 0 0 var(--p2); }
  table.lines tr.p3 { box-shadow:inset 3px 0 0 var(--p3); } table.lines tr.p4 { box-shadow:inset 3px 0 0 var(--p4); }
  table.lines tr.p5 { box-shadow:inset 3px 0 0 var(--p5); } table.lines tr.p7 { box-shadow:inset 3px 0 0 var(--p7); }
  table.lines tr.p8 { box-shadow:inset 3px 0 0 var(--p8); }
  table.lines > tbody > tr.edited { background:var(--edited); }
  table.lines > tbody > tr.edited > td { background:transparent; }
  table.stale-tbl tr.suspect { background:var(--warn-bg); box-shadow:inset 3px 0 0 var(--p2); }
  table.stale-tbl td.c-cat, table.stale-tbl td.c-why { flex:1 1 100%; max-width:none; }
  /* «События» в карточке пользователя (задание 7в, Б3): что и когда - строкой, подробно - под ними */
  table.events td.ev-kind { font-weight:600; }
  /* ветка «Категорий» (задание 12): строка уровня - карточка с отступом целиком, а не только название */
  table.cats-tbl > tbody > tr.lv1 { padding-left:32px; }
  table.cats-tbl > tbody > tr.lv2 { padding-left:52px; }
  table.cats-tbl > tbody > tr.lv3 { padding-left:72px; }
  table.cats-tbl tr.lv1 .tw-row, table.cats-tbl tr.lv2 .tw-row, table.cats-tbl tr.lv3 .tw-row { padding-left:0; }
  /* нижняя полоса прайса - одной строкой, не выше 64 px: сумма, кнопка «подробнее» (минимум, доставка, «вернуть как
     было» - по нажатию) и коротко «Скачать» (задание 7в, В5) */
  .price-bar { margin-left:-16px; margin-right:-16px; padding:8px 0; }
  .price-bar .wrap { gap:6px 10px; }
  .price-bar .bar-more, .price-bar .wide-only { display:none; }
  .price-bar [data-toggle] { display:inline-flex; min-width:var(--tap); padding:0; }
  .bar-ic::before { content:"▴"; }
  .price-bar [aria-expanded="true"] .bar-ic::before { content:"▾"; }
  .price-bar:has([data-toggle][aria-expanded="true"]) .bar-more { display:flex; flex-wrap:wrap; align-items:center;
    gap:0 10px; order:1; flex:1 1 100%; }
}