/* fulfillment-cc UI — дизайн-система v3 */

/* ── Темы: базовая «Крафт» (:root) и «Уголь» ─────────────── */
:root{
  --bg:#F6F2EC;--surface:#FFFFFF;--surface2:#F3EEE6;
  --border:#EAE3D8;--border2:#DBD2C4;
  /* Чернила: 15,5 / 5,0 / 4,58 к самому светлому фону темы — все три ступени
     выше 4,5. --faint был #A39B8C (2,36!) — им покрашены шапки таблиц, подписи
     KPI и «пусто», то есть обычный читаемый текст, а не декор (замер 27.08). */
  --text:#1E1A14;--muted:#6E675B;--faint:#726A5B;
  /* Акцент и статусы — ТЕКСТОВЫЕ цвета: 414 мест красят ими буквы и лишь 35 —
     заливку. Поэтому порог держим по тексту; заливки от затемнения только
     выигрывают (белый на них читается лучше). Было 3,30 / 3,36 / 4,05 / 4,20 / 3,49. */
  --brand:#A25719;--brand-soft:#F7ECDC;--ink:#FFFFFF;
  --green:#117A4C;--green-soft:#E6F4EC;
  --amber:#8F6211;--amber-soft:#FBF0DC;
  --red:#C03B38;--red-soft:#FBEAEA;
  --teal:#0C7777;--teal-soft:#E0F3F3;
  --r:14px;--r-sm:9px;
  --shadow:0 1px 2px rgba(40,30,15,.05),0 2px 8px rgba(40,30,15,.05);
}
/* ── Синонимы и производные токены ────────────────────────────────────────
   🔴 Повод (аудит 27.08.2026). Пульт писали разные руки, и половина экранов
   просит цвета ДРУГИМИ именами: --danger, --line, --card, --accent, --ok…
   Таких имён 22, обращений к ним 114, и ни одно из них нигде не объявлено:
     · 34 места БЕЗ фолбэка — цвет не применялся вовсе. Строка «ошибок 5» в
       хвостах WB ФБС оставалась обычной чёрной, «Несоответствие» в ЧЗ не
       краснела, экран входа терял акцент (var(--accent) в login/register);
     · 80 мест С фолбэком — цвет прибит гвоздём и не слушает тему: свой красный
       #d33, свой зелёный #3ba55d. Отсюда и разнобой оттенков на экране.
   Лечение — не переписывать 114 мест поштучно (это ещё и сломало бы чужие
   ветки), а объявить синонимы. Они стоят на :root, но подставляются в точке
   использования, поэтому берут значение АКТИВНОЙ темы: в «Лазури» --danger
   станет её красным, в «Угле» — своим.
   Новые имена сюда не добавлять: сначала настоящий токен системы.

   --hover — единственный НОВЫЙ токен, а не синоним. Наведение в пульте писали
   девять раз по-разному (var(--surface2), rgba(127,127,127,.05), свой hex), и
   на светлых темах плёнка осветляла фон под светлым текстом — читаемость при
   наведении ПАДАЛА (замер: шапка 3,74 → 2,95). Формула сдвигает фон в сторону
   цвета текста, то есть всегда ОТ него: на светлой теме темнее, на тёмной
   светлее. Вторая строка — для старых WebView на ТСД, где нет color-mix. */
:root{
  --hover:var(--surface2);
  --hover:color-mix(in srgb,var(--text) 7%,var(--surface));
  --surface-hover:var(--hover);
  /* Прозрачный вариант того же наведения — для стеклянных панелей (шапка, колонка):
     плотная заливка под блюром читалась бы вторым прямоугольником. Направление то
     же: плёнка цвета текста, то есть всегда ОТ него. */
  --hover-film:color-mix(in srgb,var(--text) 10%,transparent);
  --accent:var(--brand);--acc:var(--brand);--brand2:var(--brand);
  --brand-faint:var(--brand-soft);--brand-muted:var(--brand-soft);--brand-ink:var(--brand);
  --card:var(--surface);--card-bg:var(--surface);--topbar:var(--surface);--mobbar:var(--surface);
  --card-2:var(--surface2);--surface-2:var(--surface2);--panel2:var(--surface2);
  --line:var(--border);--fg:var(--text);
  --danger:var(--red);--danger-faint:var(--red-soft);
  --ok:var(--green);--warn:var(--amber);--orange:var(--amber);
  --r-md:var(--r);
  /* Светлая тема — подсветка кнопки затемняет. Тёмные темы ниже её переворачивают. */
  --btn-hover-filter:brightness(.93) saturate(1.04);
}

html.theme-dark{
  --btn-hover-filter:brightness(1.12);
  --bg:#1A1813;--surface:#211E18;--surface2:#2A261F;
  --border:#2E2A22;--border2:#3A362C;
  /* faint был #7C7466 — 2,66 на подложке темы. Здесь светлеем, а не темнеем. */
  --text:#F2EDE3;--muted:#A8A092;--faint:#A59D91;
  --brand:#E18944;--brand-soft:#3A2A18;--ink:#1A1813;
  --green:#5FC9A8;--green-soft:#1F3A33;
  --amber:#E0A94B;--amber-soft:#3A2E14;
  --red:#E28579;--red-soft:#3A1E1A;
  --teal:#5FC9A8;--teal-soft:#1F3A33;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.22);
}
/* ── «Слоновая кость» — простая светлая тема: тёплый молочный фон, белые
   карточки, фирменный янтарь на кнопках. Ни картинки, ни эффектов. ── */
html.theme-ivory{
  --bg:#FBF7EA;--surface:#FFFFFF;--surface2:#F6F1E0;
  --border:#EBE4D0;--border2:#DACFB4;
  /* Те же замеры, что в «Крафте»: faint 2,60 и акценты 3,3–4,2 не проходили. */
  --text:#26221A;--muted:#6B6455;--faint:#726A58;
  --brand:#A25719;--brand-soft:#F9EFDE;--ink:#FFFFFF;
  --green:#117A4D;--green-soft:#E6F4EC;
  --amber:#8F6211;--amber-soft:#FBF0DC;
  --red:#C13B38;--red-soft:#FBEAEA;
  --teal:#0C7777;--teal-soft:#E0F3F3;
  --shadow:0 1px 2px rgba(60,45,20,.06),0 4px 12px rgba(60,45,20,.07);
}
html.theme-ivory,html.theme-ivory input{color-scheme:light}
html.theme-ivory body{background:#FBF7EA}

/* ── «Стекло» — по референсу Юрия 21.07 (Dark Glassmorphism dashboard):
   глубокий сине-дымчатый фон с облаками света, полупрозрачные стеклянные
   карточки с блюром и светлой кромкой, неоновые акценты и свечение. ── */
html.theme-glass{
  --btn-hover-filter:brightness(1.12);
  --bg:#0B1526;--surface:rgba(255,255,255,.065);--surface2:rgba(255,255,255,.09);
  --border:rgba(255,255,255,.14);--border2:rgba(255,255,255,.26);
  --text:#EAF2FF;--muted:#9FB4D8;--faint:#6C82A8;
  --brand:#38BDF8;--brand-soft:rgba(56,189,248,.16);--ink:#04121F;
  --green:#34D399;--green-soft:rgba(52,211,153,.16);
  --amber:#FBBF24;--amber-soft:rgba(251,191,36,.15);
  --red:#F87171;--red-soft:rgba(248,113,113,.16);
  --teal:#A78BFA;--teal-soft:rgba(167,139,250,.16);
  --shadow:0 8px 24px rgba(0,0,0,.35),0 20px 60px rgba(2,8,20,.45);
}
html.theme-glass,html.theme-glass input{color-scheme:dark}
html.theme-glass body{background:#0B1526}
/* Ночное небо по фото-эталону (21.07): глубокое тёмное небо, контрастный
   млечный путь из правого верхнего в левый нижний (клубы полосы + яркое ядро
   с тёмными пылевыми прожилками + звёздная россыпь двух размеров по всему
   небу), тёплое зарево у горизонта. Облаков нет — они белили всё небо. */
html.theme-glass .aurora-bg{
  opacity:1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.26' stop-color='%23000'/%3E%3Cstop offset='0.42' stop-color='%23fff'/%3E%3Cstop offset='0.58' stop-color='%23fff'/%3E%3Cstop offset='0.74' stop-color='%23000'/%3E%3C/linearGradient%3E%3ClinearGradient id='m2' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.44' stop-color='%23000'/%3E%3Cstop offset='0.475' stop-color='%23fff'/%3E%3Cstop offset='0.525' stop-color='%23fff'/%3E%3Cstop offset='0.56' stop-color='%23000'/%3E%3C/linearGradient%3E%3Cmask id='k'%3E%3Crect width='1600' height='900' fill='url(%23m)'/%3E%3C/mask%3E%3Cmask id='k2'%3E%3Crect width='1600' height='900' fill='url(%23m2)'/%3E%3C/mask%3E%3Cfilter id='n1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.011' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.85 0 0 0 0 0.88 0 0 0 0 1 1.5 0 0 0 -0.62'/%3E%3C/filter%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5 0.5' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 4 0 0 0 -2.4'/%3E%3C/filter%3E%3Cfilter id='n3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.015' numOctaves='5' seed='13'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.97 0 0 0 0 0.9 2 0 0 0 -0.8'/%3E%3C/filter%3E%3Cfilter id='n4'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.016' numOctaves='4' seed='21'/%3E%3CfeColorMatrix values='0 0 0 0 0.02 0 0 0 0 0.015 0 0 0 0 0.05 2 0 0 0 -1.05'/%3E%3C/filter%3E%3Cfilter id='n5'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45 0.45' numOctaves='2' seed='17'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 4.5 0 0 0 -3.15'/%3E%3C/filter%3E%3Cfilter id='n6'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.22 0.22' numOctaves='2' seed='33'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 5 0 0 0 -3.95'/%3E%3C/filter%3E%3C/defs%3E%3Cg mask='url(%23k)'%3E%3Crect width='1600' height='900' filter='url(%23n1)'/%3E%3Crect width='1600' height='900' filter='url(%23n2)'/%3E%3C/g%3E%3Cg mask='url(%23k2)'%3E%3Crect width='1600' height='900' filter='url(%23n3)'/%3E%3Crect width='1600' height='900' filter='url(%23n4)'/%3E%3C/g%3E%3Crect width='1600' height='900' filter='url(%23n5)'/%3E%3Crect width='1600' height='900' filter='url(%23n6)'/%3E%3C/svg%3E") center/cover no-repeat,
    linear-gradient(135deg,transparent 36%,rgba(200,215,255,.07) 46%,rgba(225,232,255,.12) 50%,rgba(200,215,255,.07) 54%,transparent 64%),
    radial-gradient(70% 36% at 20% 108%,rgba(244,140,66,.16),transparent 72%),
    radial-gradient(50% 30% at 42% 112%,rgba(233,90,120,.1),transparent 70%),
    radial-gradient(55% 45% at 85% 25%,rgba(56,110,220,.1),transparent 70%),
    linear-gradient(180deg,#04070F 0%,#081121 45%,#0D1B33 80%,#122544 100%);
}
html.theme-glass .aurora-bg .ga{background:rgba(59,130,246,.12)}
html.theme-glass .aurora-bg .g3{background:rgba(96,165,250,.2)}
/* Стеклянные поверхности: полупрозрачность + блюр + светлая кромка сверху */
html.theme-glass .card,html.theme-glass .kpi,html.theme-glass .action,html.theme-glass .ms-copy{
  background:linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.045) 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 24px rgba(0,0,0,.35);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
html.theme-glass .card-head{
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
html.theme-glass .sidebar{
  background:rgba(10,18,36,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-right:1px solid rgba(255,255,255,.1);
}
html.theme-glass .topbar{
  background:rgba(10,18,36,.66);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.1);
}
html.theme-glass .mob-bar{background:rgba(10,18,36,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* Кнопки: неоновый синий градиент со свечением; ghost — стекло */
html.theme-glass .btn,html.theme-glass button:not([class]),html.theme-glass button.sm{
  background:linear-gradient(135deg,#2563EB 0%,#38BDF8 100%);color:#fff;font-weight:600;border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 18px rgba(56,189,248,.4),0 4px 14px rgba(0,0,0,.3);
  transition:transform .18s ease,box-shadow .18s ease;
}
html.theme-glass .btn:hover,html.theme-glass button:not([class]):hover,html.theme-glass button.sm:hover{
  filter:none;transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 28px rgba(56,189,248,.6),0 8px 20px rgba(0,0,0,.35);
}
html.theme-glass .btn:active,html.theme-glass button:active{transform:translateY(1px)}
html.theme-glass .btn.ghost,html.theme-glass button.ghost{
  background:rgba(255,255,255,.08);color:var(--text);border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
html.theme-glass .btn.danger,html.theme-glass button.danger{
  background:linear-gradient(135deg,#DC2626 0%,#F87171 100%);color:#fff;border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 18px rgba(248,113,113,.4);
}
html.theme-glass .btn.success{
  background:linear-gradient(135deg,#059669 0%,#34D399 100%);color:#fff;border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 18px rgba(52,211,153,.4);
}
/* Цветные плитки-иконки светятся своим цветом (как на референсе) */
html.theme-glass .kpi-ico,html.theme-glass .action-ico{box-shadow:0 0 18px -6px currentColor}
/* Логин: фон прозрачный (облака видны), карточка входа — стекло;
   выпадающие списки — непрозрачное тёмное стекло, чтобы текст читался */
html.theme-glass .auth-wrap{background:transparent}
html.theme-glass .auth-box{
  background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.05) 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 20px 60px rgba(0,0,0,.5);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
html.theme-glass .ss-list{
  background:rgba(16,26,48,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-color:rgba(255,255,255,.16);
}
/* Поля: стекло с синим свечением на фокусе */
html.theme-glass input:not([type]),html.theme-glass input[type=text],html.theme-glass input[type=email],
html.theme-glass input[type=password],html.theme-glass input[type=number],html.theme-glass input[type=search],
html.theme-glass input[type=date],html.theme-glass input[type=datetime-local],html.theme-glass input[type=time],
html.theme-glass select,html.theme-glass textarea{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
html.theme-glass input:focus,html.theme-glass select:focus,html.theme-glass textarea:focus{
  border-color:#38BDF8;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 16px rgba(56,189,248,.35);
}

/* ── ФОТО-ТЕМЫ (снимки Юрия 23.07) ──────────────────────────────────────
   Каждая тема — это снимок на весь экран + гамма, взятая из него. Общий
   каркас (стекло карточек, вуаль поверх фото, кнопки с бликом) живёт один
   раз на классе html.photo — его вешает ffLook() рядом с theme-*; сама тема
   задаёт только переменные. Добавить фон = 15 строк переменных + свотч.
   --veil обязателен: без затемнения светлые буквы тонут в ярком небе. ── */
html.photo .aurora-bg{
  opacity:1;
  background:var(--veil),var(--photo) var(--photo-pos,center center)/cover no-repeat,var(--bg);
}
/* На снимке своё небо — гасим световые пятна и звёздную россыпь «Авроры»
   (звёзды сыплет скрипт в base.html для всех тем сразу). */
html.photo .aurora-bg .ga{background:transparent}
html.photo .aurora-star{display:none}
/* Текст вне карточек лежит прямо на снимке: тень отделяет его от фона */
html.photo .page-h2,html.photo .page-sub,html.photo .back,
html.photo .topbar h1,html.photo h1,html.photo h2,html.photo h3{text-shadow:var(--txt-shadow)}
html.photo .page-sub{color:var(--sub)}
/* Плашки-уведомления — плотное стекло, а не полупрозрачность */
html.photo .flash,html.photo .flash.warn,html.photo .flash.err,html.photo .flash.ok{
  background:var(--panel-solid);border:1px solid var(--edge-c);color:var(--text);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 var(--edge-hi),0 8px 22px var(--shadow-c);
}
html.photo .card,html.photo .kpi,html.photo .action,html.photo .ms-copy{
  background:linear-gradient(180deg,var(--glass-a) 0%,var(--glass-b) 100%);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 var(--edge-hi),0 10px 28px var(--shadow-c);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
html.photo .card-head{background:var(--head-bg);box-shadow:inset 0 1px 0 var(--edge-hi)}
html.photo .sidebar{
  background:var(--panel);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-right:1px solid var(--edge-c);
}
html.photo .topbar{
  background:var(--panel-solid);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 -1px 0 var(--edge-c);
}
html.photo .mob-bar{background:var(--panel-solid);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* Кнопки — цвет главного света на снимке: блик сверху, свечение вокруг */
html.photo .btn,html.photo button:not([class]),html.photo button.sm{
  background:var(--btn);color:var(--btn-txt);font-weight:700;border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,0,0,.22),
             0 0 20px var(--btn-glow),0 6px 16px var(--shadow-c);
  transition:transform .18s ease,box-shadow .18s ease;
}
html.photo .btn:hover,html.photo button:not([class]):hover,html.photo button.sm:hover{
  filter:none;transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(0,0,0,.22),
             0 0 32px var(--btn-glow2),0 10px 22px var(--shadow-c);
}
html.photo .btn:active,html.photo button:active{transform:translateY(1px)}
html.photo .btn.ghost,html.photo button.ghost{
  background:var(--ghost-bg);color:var(--text);border:1px solid var(--edge-c);
  box-shadow:inset 0 1px 0 var(--edge-hi);
}
html.photo .btn.danger,html.photo button.danger{
  background:linear-gradient(180deg,#FFA490 0%,#F2604F 52%,#D63A2C 100%);color:#2A0A05;border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 20px rgba(242,96,79,.45);
}
html.photo .btn.success{
  background:linear-gradient(180deg,#8FF0D6 0%,#31C4A2 52%,#0E9C7E 100%);color:#04231C;border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 20px rgba(49,196,162,.45);
}
html.photo .kpi-ico,html.photo .action-ico{box-shadow:0 0 18px -6px currentColor}
/* Логин: снимок виден вокруг формы, сама форма — стекло */
html.photo .auth-wrap{background:transparent}
html.photo .auth-box{
  background:linear-gradient(180deg,var(--glass-a) 0%,var(--glass-b) 100%);
  border:1px solid var(--edge-c);
  box-shadow:inset 0 1px 0 var(--edge-hi),0 20px 60px var(--shadow-c);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
html.photo .ss-list{
  background:var(--list-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-color:var(--edge-c);
}
html.photo input:not([type]),html.photo input[type=text],html.photo input[type=email],
html.photo input[type=password],html.photo input[type=number],html.photo input[type=search],
html.photo input[type=date],html.photo input[type=datetime-local],html.photo input[type=time],
html.photo select,html.photo textarea{
  background:var(--field);border:1px solid var(--border);
  box-shadow:inset 0 1px 0 var(--edge-hi);
}
html.photo input:focus,html.photo select:focus,html.photo textarea:focus{
  border-color:var(--brand);box-shadow:inset 0 1px 0 var(--edge-hi),0 0 16px var(--btn-glow);
}

/* «Пламя» — огненный закат: алое небо, чёрные облака, кнопки-угли */
html.theme-plamya{
  --bg:#1B0603;--surface:rgba(46,12,7,.7);--surface2:rgba(60,16,9,.8);
  --border:rgba(255,255,255,.15);--border2:rgba(255,150,90,.42);
  --text:#FFF0E6;--muted:#F0B9A2;--faint:#B98872;--sub:#FFD9C6;
  --brand:#FF8A3D;--brand-soft:rgba(255,138,61,.18);--ink:#2A0A02;
  --green:#3FD9A8;--green-soft:rgba(63,217,168,.16);
  --amber:#FFC24D;--amber-soft:rgba(255,194,77,.16);
  --red:#FF6B5A;--red-soft:rgba(255,107,90,.16);
  --teal:#58C7D8;--teal-soft:rgba(88,199,216,.16);
  --shadow:0 8px 24px rgba(20,4,2,.5),0 20px 60px rgba(14,3,1,.55);
  --photo:url("/static/bg-plamya.jpg");--photo-pos:center 42%;
  --veil:linear-gradient(180deg,rgba(24,5,2,.68) 0%,rgba(24,5,2,.52) 28%,rgba(20,4,2,.5) 62%,rgba(14,3,1,.66) 100%);
  --glass-a:rgba(44,11,6,.88);--glass-b:rgba(28,7,4,.84);--head-bg:rgba(255,255,255,.05);
  --panel:linear-gradient(180deg,rgba(30,8,4,.86) 0%,rgba(20,5,2,.92) 100%);--panel-solid:rgba(28,7,3,.9);
  --edge-hi:rgba(255,180,120,.22);--edge-c:rgba(255,150,90,.32);--shadow-c:rgba(16,4,2,.5);
  --field:rgba(30,8,4,.62);--list-bg:rgba(32,9,5,.96);--ghost-bg:rgba(255,255,255,.09);
  --btn:linear-gradient(180deg,#FFD9A0 0%,#FF9A3C 46%,#E8481A 100%);--btn-txt:#2A0A02;
  --btn-glow:rgba(255,120,50,.55);--btn-glow2:rgba(255,150,70,.75);
  --txt-shadow:0 1px 2px rgba(20,4,2,.7),0 2px 10px rgba(20,4,2,.55);
}
/* «Туманность» — малиново-пурпурные клубы в звёздах */
html.theme-tumannost{
  --bg:#150610;--surface:rgba(46,14,38,.7);--surface2:rgba(60,18,50,.8);
  --border:rgba(255,255,255,.16);--border2:rgba(232,140,205,.42);
  --text:#FBEAF4;--muted:#D9B0C8;--faint:#A3809A;--sub:#EFD0E4;
  --brand:#E86CC0;--brand-soft:rgba(232,108,192,.18);--ink:#2A0620;
  --green:#4ADCC0;--green-soft:rgba(74,220,192,.16);
  --amber:#FFC46B;--amber-soft:rgba(255,196,107,.16);
  --red:#FF7A8F;--red-soft:rgba(255,122,143,.16);
  --teal:#8F9BFF;--teal-soft:rgba(143,155,255,.16);
  --shadow:0 8px 24px rgba(14,4,12,.5),0 20px 60px rgba(10,3,9,.55);
  --photo:url("/static/bg-tumannost.jpg");--photo-pos:center center;
  --veil:linear-gradient(180deg,rgba(10,3,10,.54) 0%,rgba(10,3,10,.38) 28%,rgba(9,2,9,.36) 62%,rgba(8,2,8,.55) 100%);
  --glass-a:rgba(40,12,34,.88);--glass-b:rgba(26,7,22,.84);--head-bg:rgba(255,255,255,.05);
  --panel:linear-gradient(180deg,rgba(28,8,24,.86) 0%,rgba(18,5,16,.92) 100%);--panel-solid:rgba(26,7,22,.9);
  --edge-hi:rgba(255,190,235,.2);--edge-c:rgba(232,140,205,.32);--shadow-c:rgba(10,3,9,.5);
  --field:rgba(26,7,22,.62);--list-bg:rgba(28,8,24,.96);--ghost-bg:rgba(255,255,255,.09);
  --btn:linear-gradient(180deg,#FFD4F0 0%,#E872C4 46%,#B03A94 100%);--btn-txt:#2A0620;
  --btn-glow:rgba(232,114,196,.5);--btn-glow2:rgba(244,150,215,.72);
  --txt-shadow:0 1px 2px rgba(10,3,9,.7),0 2px 10px rgba(10,3,9,.55);
}
/* «Галактика» — красное ядро Млечного Пути крупным планом */
html.theme-galaktika{
  --bg:#180608;--surface:rgba(52,14,14,.7);--surface2:rgba(68,18,18,.8);
  --border:rgba(255,255,255,.15);--border2:rgba(255,150,130,.42);
  --text:#FFEDEA;--muted:#E8B2AC;--faint:#B0827E;--sub:#FFD6CE;
  --brand:#FF7B6A;--brand-soft:rgba(255,123,106,.18);--ink:#2C0705;
  --green:#46D9A8;--green-soft:rgba(70,217,168,.16);
  --amber:#FFC24D;--amber-soft:rgba(255,194,77,.16);
  --red:#FF6B5A;--red-soft:rgba(255,107,90,.16);
  --teal:#7FA8FF;--teal-soft:rgba(127,168,255,.16);
  --shadow:0 8px 24px rgba(16,4,5,.5),0 20px 60px rgba(12,3,4,.55);
  --photo:url("/static/bg-galaktika.jpg");--photo-pos:center center;
  --veil:linear-gradient(180deg,rgba(14,4,5,.58) 0%,rgba(14,4,5,.42) 28%,rgba(12,3,4,.4) 62%,rgba(10,2,3,.58) 100%);
  --glass-a:rgba(46,12,12,.88);--glass-b:rgba(30,8,8,.84);--head-bg:rgba(255,255,255,.05);
  --panel:linear-gradient(180deg,rgba(32,8,8,.86) 0%,rgba(20,5,5,.92) 100%);--panel-solid:rgba(30,7,7,.9);
  --edge-hi:rgba(255,190,175,.2);--edge-c:rgba(255,150,130,.32);--shadow-c:rgba(12,3,4,.5);
  --field:rgba(30,8,8,.62);--list-bg:rgba(32,8,8,.96);--ghost-bg:rgba(255,255,255,.09);
  --btn:linear-gradient(180deg,#FFD9C6 0%,#FF8A6E 46%,#D8412C 100%);--btn-txt:#2C0705;
  --btn-glow:rgba(255,138,110,.5);--btn-glow2:rgba(255,168,140,.72);
  --txt-shadow:0 1px 2px rgba(12,3,4,.7),0 2px 10px rgba(12,3,4,.55);
}
/* «Млечный путь» — синяя звёздная полоса над холмами, зарево у горизонта */
html.theme-mlechnyy{
  --bg:#050B1C;--surface:rgba(14,26,54,.7);--surface2:rgba(20,36,72,.8);
  --border:rgba(255,255,255,.16);--border2:rgba(140,185,255,.42);
  --text:#EAF0FF;--muted:#A9BEDF;--faint:#7A8FB4;--sub:#CFE0F8;
  --brand:#7EC0FF;--brand-soft:rgba(126,192,255,.18);--ink:#071426;
  --green:#46E0BC;--green-soft:rgba(70,224,188,.16);
  --amber:#FFB35C;--amber-soft:rgba(255,179,92,.16);
  --red:#FF7A87;--red-soft:rgba(255,122,135,.16);
  --teal:#8FA6FF;--teal-soft:rgba(143,166,255,.16);
  --shadow:0 8px 24px rgba(2,8,22,.5),0 20px 60px rgba(2,6,18,.55);
  --photo:url("/static/bg-mlechnyy.jpg");--photo-pos:center 30%;
  --veil:linear-gradient(180deg,rgba(3,7,20,.52) 0%,rgba(3,7,20,.36) 28%,rgba(3,6,18,.34) 62%,rgba(2,5,16,.52) 100%);
  --glass-a:rgba(12,26,54,.88);--glass-b:rgba(6,16,38,.84);--head-bg:rgba(255,255,255,.05);
  --panel:linear-gradient(180deg,rgba(8,18,42,.86) 0%,rgba(4,10,28,.92) 100%);--panel-solid:rgba(6,16,38,.9);
  --edge-hi:rgba(180,210,255,.2);--edge-c:rgba(140,185,255,.3);--shadow-c:rgba(2,6,18,.5);
  --field:rgba(6,16,38,.62);--list-bg:rgba(8,18,42,.96);--ghost-bg:rgba(255,255,255,.09);
  --btn:linear-gradient(180deg,#CFE6FF 0%,#6FA8FF 46%,#2E5FD0 100%);--btn-txt:#071426;
  --btn-glow:rgba(111,168,255,.55);--btn-glow2:rgba(150,196,255,.75);
  --txt-shadow:0 1px 2px rgba(2,6,18,.7),0 2px 10px rgba(2,6,18,.55);
}
html.theme-plamya,html.theme-plamya input,html.theme-tumannost,html.theme-tumannost input,html.theme-galaktika,html.theme-galaktika input,html.theme-mlechnyy,html.theme-mlechnyy input{color-scheme:dark}
html.photo body{background:var(--bg)}

.aurora-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .6s;background:radial-gradient(130% 100% at 50% 108%,#181109 0%,#0c0a07 55%,#070605 100%)}
html.theme-dark .aurora-bg{opacity:1}
.aurora-bg .ga{position:absolute;border-radius:50%;filter:blur(120px)}
.aurora-bg .g1{top:-8%;left:-6%;width:46vw;height:46vw;background:rgba(224,150,90,.07)}
.aurora-bg .g2{bottom:-12%;right:-8%;width:50vw;height:50vw;background:rgba(206,120,72,.07)}
.aurora-bg .g3{bottom:-14%;left:28%;width:48vw;height:44vw;background:rgba(224,131,59,.2)}
.aurora-star{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 2px rgba(255,255,255,.5);animation:auroraTw linear infinite}
@keyframes auroraTw{0%,100%{opacity:var(--o)}50%{opacity:calc(var(--o)*.5)}}

/* ── Примерка: фоновый узор выбирается отдельно от темы (html.bg-*).
   Без bg-класса — как раньше: звёздный космос на тёмных, чисто на светлых.
   Узоры рисуются на body от --text и работают на любой теме; они и bg-none
   гасят космос. ── */
html.bg-none .aurora-bg,html.bg-dots .aurora-bg,
html.bg-grid .aurora-bg,html.bg-contour .aurora-bg{opacity:0!important}
html.bg-dots body{
  background-image:radial-gradient(color-mix(in srgb,var(--text) 10%,transparent) 1px,transparent 1.4px);
  background-size:22px 22px;background-attachment:fixed;
}
html.bg-grid body{
  background-image:
    linear-gradient(color-mix(in srgb,var(--text) 7%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--text) 7%,transparent) 1px,transparent 1px);
  background-size:26px 26px;background-attachment:fixed;
}
html.bg-contour body{
  background-image:
    repeating-radial-gradient(circle at 88% 118%,transparent 0 54px,color-mix(in srgb,var(--text) 8%,transparent) 54px 55px),
    repeating-radial-gradient(circle at -6% -12%,transparent 0 64px,color-mix(in srgb,var(--text) 6%,transparent) 64px 65px);
  background-attachment:fixed;
}

/* ── Reset ───────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  /* Именно min-height, НЕ height:100%: липкий элемент живёт только внутри коробки
     своего родителя, и с body ростом ровно в экран шапка (.nv-head) отлипала после
     первого экрана прокрутки — жалоба владельца 18.08.2026 на «Остатках по складам
     площадок». min-height растит коробку под всю страницу, sticky держится до низа. */
  min-height:100%;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);font-size:14.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;transition:background .2s,color .2s;
}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:6px}
*{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}

/* ── Layout ──────────────────────────────────────────────── */
.app{display:flex;min-height:100vh;position:relative;z-index:1}

/* ── Sidebar ─────────────────────────────────────────────── */
:root{--ff-sidebar-w:250px}
.sidebar{
  width:var(--ff-sidebar-w);flex:0 0 var(--ff-sidebar-w);
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:18px 14px;
  position:sticky;top:0;height:100vh;overflow:hidden;
  transition:width .22s cubic-bezier(.4,0,.2,1),flex .22s cubic-bezier(.4,0,.2,1),opacity .15s,border-color .22s;
  z-index:20;
}html.theme-dark .sidebar{
  background:rgba(255,255,255,.025);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.sidebar.sb-collapsed{width:0!important;flex:0 0 0px!important;min-width:0!important;opacity:0;overflow:hidden;border-right-width:0;pointer-events:none}

/* Rail-toggle: плавающий «язычок» на шве сайдбар↔контент */
#rail-toggle{
  position:fixed;top:50%;transform:translateY(-50%);z-index:55;
  left:0;margin-left:calc(var(--ff-sidebar-w) - 14px);
  display:none;width:28px;height:28px;
  align-items:center;justify-content:center;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:#94a3b8;backdrop-filter:blur(8px);cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:margin-left .22s cubic-bezier(.4,0,.2,1),background .15s,color .15s,border-color .15s;
}
#rail-toggle:hover{background:var(--brand);color:var(--ink);border-color:var(--brand)}
@media(min-width:768px){#rail-toggle{display:flex}}
.sidebar.sb-collapsed + #rail-toggle{margin-left:6px}
#rail-ico{transition:transform .22s cubic-bezier(.4,0,.2,1);display:flex}
.sidebar.sb-collapsed + #rail-toggle #rail-ico{transform:rotateY(180deg)}

/* Brand */
.sb-brand{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 18px}
.sb-logo{display:flex;align-items:center;gap:11px;overflow:hidden;text-decoration:none;color:inherit;cursor:pointer}
/* Локап бренда для старого меню и мобильного бара — тот же, что в шапке nav_v2. */
.brand-lock{display:flex;flex-direction:column;line-height:1;
  border-left:2px solid var(--brand);padding-left:10px}
.brand-erp{font-weight:700;font-size:20px;letter-spacing:.05em;color:var(--text)}
.brand-sub{font-size:11px;letter-spacing:.12em;color:var(--faint);margin-top:4px}
/* overflow:hidden нужен свёрнутому меню (width:0), но nowrap здесь резал само
   название: в развёрнутом меню стояло «Пульт фулфилмен». Переносим. */
.sb-logo-text{overflow:hidden;transition:opacity .15s,width .22s}
.sb-collapse-btn{
  background:transparent;border:0;color:var(--faint);
  padding:5px;border-radius:7px;cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.15s;
}
.sb-collapse-btn:hover{background:var(--hover);color:var(--text)}
.sb-collapsed .sb-logo-text{opacity:0;width:0;pointer-events:none}
.sb-collapsed .sb-collapse-btn{margin:0 auto}
.sb-collapsed .sb-brand{justify-content:center;padding:6px 0 18px}

/* Nav */
.sb-nav{display:flex;flex-direction:column;gap:3px;margin-top:4px;flex:1;overflow-y:auto;overflow-x:hidden}
.sb-nav::-webkit-scrollbar{width:0}
.sb-section{
  font-size:11px;font-weight:600;color:var(--faint);text-transform:uppercase;
  letter-spacing:.04em;padding:14px 12px 6px;white-space:nowrap;overflow:hidden;transition:opacity .15s;
}
.sb-collapsed .sb-section{opacity:0;height:0;padding:0;pointer-events:none}
.sb-link{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm);
  color:var(--muted);font-weight:500;font-size:14px;transition:.15s;
  border:1px solid transparent;white-space:nowrap;
}
.sb-link:hover{
  background:linear-gradient(to right,rgba(124,58,237,.15),rgba(217,70,239,.08));
  border-color:rgba(124,58,237,.2);color:var(--text);
}
/* Активный пункт в кабинете контрагента. Плёнка была полупрозрачной, поэтому на
   светлой теме подложка получалась СВЕТЛОЙ, а текст оставался белым (1,2:1).
   Правило ниже по файлу задаёт этому же пункту surface2 + --brand и побеждает по
   порядку — здесь держим ТО ЖЕ, чтобы два места не расходились. */
.sb-link.sb-active{
  background:var(--surface2);
  border-color:transparent;color:var(--brand);font-weight:600;
}
.sb-icon{font-size:20px;flex-shrink:0;width:20px;text-align:center}
.sb-label{transition:opacity .15s;overflow:hidden;text-overflow:ellipsis}
.sb-collapsed .sb-label{opacity:0;width:0;padding:0}
.sb-collapsed .sb-link{margin:0 auto;width:46px;justify-content:center;padding:10px 0;gap:0}
.sb-collapsed .sb-icon{width:20px}

/* Footer */
.sb-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:10px}
.sb-themes{
  display:flex;gap:3px;border-radius:var(--r-sm);
  background:var(--surface2);border:1px solid var(--border);padding:4px;
}
.sb-th{
  flex:1;background:transparent;border:0;color:var(--muted);border-radius:7px;
  padding:7px 0;cursor:pointer;font-size:15px;display:flex;align-items:center;
  justify-content:center;transition:.15s;
}
.sb-th:hover{color:var(--text)}
.sb-th.on{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.15)}
/* Примерка: свотчи тем (кружок = фон+акцент темы) и кнопки фонового узора */
.sb-swatches{
  display:grid;grid-template-columns:repeat(5,1fr);gap:5px;justify-items:center;
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);padding:7px 6px;
}
.sb-sw{
  width:24px;height:24px;border-radius:50%;padding:0;cursor:pointer;
  border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);transition:transform .12s;
}
.sb-sw:hover{transform:scale(1.14)}
.sb-sw.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--brand)}
.sb-collapsed .sb-swatches{display:none}
.sb-sync{
  padding:10px 8px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);
}
.sb-sync-dot{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:var(--green-soft);color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.sb-user{
  display:flex;align-items:center;gap:9px;padding:8px;
  border-top:1px solid var(--border);
}
.sb-av{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.sb-user-info{flex:1;min-width:0;transition:opacity .15s}
.sb-user-email{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.sb-logout{font-size:11.5px;color:var(--red);display:flex;align-items:center;gap:3px;transition:.12s}
.sb-logout:hover{filter:brightness(1.2)}
.sb-collapsed .sb-user-info,.sb-collapsed .sb-sync > div{opacity:0;width:0;overflow:hidden}
.sb-collapsed .sb-user{justify-content:center}

/* ── Accordion nav items ─────────────────────────────────── */
.sb-acc-hd{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm);
  color:var(--muted);font-weight:500;font-size:14px;cursor:pointer;transition:.15s;
  border:1px solid transparent;
}
.sb-acc-hd:hover{
  background:linear-gradient(to right,rgba(124,58,237,.15),rgba(217,70,239,.08));
  border-color:rgba(124,58,237,.2);color:var(--text);
}
.sb-acc-chev{margin-left:auto;font-size:15px;transition:transform .2s;flex-shrink:0}
.sb-acc.open .sb-acc-chev{transform:rotate(90deg)}
.sb-acc-body{display:none;flex-direction:column;gap:1px;padding:2px 0 4px 20px}
.sb-acc.open .sb-acc-body{display:flex}
.sb-acc-link{
  display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:var(--r-sm);
  color:var(--muted);font-size:13px;font-weight:500;transition:.15s;border:1px solid transparent;
}
.sb-acc-link:hover{background:color-mix(in srgb,var(--brand) 10%,transparent);color:var(--text)}
.sb-acc-link.sb-active{color:var(--brand);font-weight:600;background:var(--brand-soft)}
.sb-soon{opacity:.45;pointer-events:none;cursor:default}
.sb-soon-tag{
  margin-left:auto;font-size:10px;background:var(--surface2);
  border:1px solid var(--border);padding:1px 7px;border-radius:99px;color:var(--faint);flex-shrink:0;
}
.sb-collapsed .sb-acc-body{display:none!important}
.sb-collapsed .sb-acc-hd{justify-content:center;padding:10px 0;margin:0 auto;width:46px}

/* Expand button (в topbar когда collapsed) */
.sb-expand-btn{
  background:transparent;border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--muted);padding:7px 9px;cursor:pointer;font-size:17px;
  display:flex;align-items:center;justify-content:center;transition:.12s;
}
.sb-expand-btn:hover{background:var(--hover);color:var(--text)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:15px 28px;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:10;gap:12px;flex-wrap:wrap;
}
/* Полоса заголовка — тем же стеклом, что шапка и колонка (владелец 19.08.2026):
   плотная плашка между двумя прозрачными панелями читалась чужой. Отдельной
   строкой: браузер без color-mix её пропустит и останется прежний фон. */
.topbar{
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
}
.topbar-l{display:flex;align-items:center;gap:10px}
.topbar h1{font-size:18px;font-weight:600;letter-spacing:-.01em}
/* Перенос обязателен: без него лишние кнопки уезжают за правый край и становятся
   недостижимы (поймано на 1024px, станция «Печать марок» с вкладками, 18.08.2026).
   На мобиле (<640px) тот же перенос задан отдельно в mobile.css. */
.topbar-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* Липкий topbar ОБЯЗАН быть непрозрачным: в dark/aurora --surface полупрозрачный →
   прокручиваемый контент просвечивал сквозь него (наезд текста). Матовое стекло. */
html.theme-dark .topbar{background:var(--topbar,#13131c)}
html.theme-dark .mob-bar{background:var(--mobbar,#13131c)}
/* width:100% + min-width:0 обязательны: .content — flex-элемент колонки .main, и
   без явной ширины он раздувался до max-content самого широкого ребёнка — рабочее
   поле становилось шире экрана, и вбок ехала ВСЯ страница (замер 20.08.2026:
   сообщение об ошибке МС с длинным URL растягивало /m/orders до 1759 px при экране
   1280). С фиксированной шириной поля широкий кусок разбирается сам: таблицы
   уезжают в .tbl-scroll, длинные слова переносятся правилом ниже. box-sizing
   глобально border-box, поэтому padding в 100% уже включён. */
.content{padding:22px 28px 60px;max-width:1280px;min-width:0;width:100%}
/* Текстовые карточки (сообщения, ошибки МС, подписи экранов) обязаны рвать
   неразрывное: URL и коды ответов приходят одним словом на 700 px. */
.card.pad,.page-sub,.flash{overflow-wrap:anywhere}
/* Реестры с широкими таблицами (счета, журналы): колонка 1280px заставляла таблицу
   скроллиться вбок при пустом правом крае экрана. `wide` снимает потолок. */
.content.wide{max-width:none}
/* Средний потолок: многоколоночные списки, которым безкрайний wide разносит
   колонки (первый случай — товары контрагента в Тарификации, 09.08.2026). */
.content.wide-m{max-width:1680px}
/* «Стоят» (wave/hanging): в колонке «Что именно» лежит объяснение предложением, и
   на естественной раскладке оно тянуло таблицу до 1397 px — при поле 1224 текст
   резался краем карточки, а человек листал вбок (жалоба владельца 25.08.2026).
   Фиксированная раскладка: справочные колонки держат свою ширину, объяснение
   забирает остаток и ПЕРЕНОСИТСЯ. Только на десктопе: на телефоне 706 px констант
   не влезают, колонка объяснения схлопывалась в ноль — там оставляем боковую
   прокрутку .tbl-scroll. `.tbl.tbl-hang` (0,3,0) обязателен: `.tbl-scroll .tbl`
   из mobile.css грузится позже и при равной специфичности победил бы. */
/* Лента WB ФБС (wb_fbs_orders): семь колонок, и естественной раскладке нужно 1978 px.
   На широком мониторе (≥2400) лента влезает целиком — там не трогаем; в середине
   диапазона «Позиций», «Следующий шаг» с кнопками и колонка действия уезжали за
   правый край (замер 25.08.2026: поле 1110 на окне 1440, прокрутка вбок на 868 px).
   Ниже 1400 раскладку не включаем: справочным колонкам нужно 814 px, «Следующему
   шагу» остаётся меньше 180 и строка раздувается до 435 px — там честнее прокрутка.
   Фиксированная раскладка отдаёт остаток «Следующему шагу»; чипам разрешён перенос —
   без него `white-space:nowrap` из .chip снова распирал бы колонку. Заголовки
   оставлены nowrap: с переносом «Позиций» рвалось пополам. */
@media(min-width:1400px) and (max-width:2400px){
  .tbl.tbl-wbfeed{table-layout:fixed;width:100%;min-width:0}
  .tbl-scroll .tbl.tbl-wbfeed{min-width:0}
  .tbl.tbl-wbfeed td{white-space:normal;overflow-wrap:anywhere}
  .tbl.tbl-wbfeed td .chip{white-space:normal}
  .tbl.tbl-wbfeed th:nth-child(1),.tbl.tbl-wbfeed td:nth-child(1){width:190px}
  .tbl.tbl-wbfeed th:nth-child(2),.tbl.tbl-wbfeed td:nth-child(2){width:140px}
  .tbl.tbl-wbfeed th:nth-child(3),.tbl.tbl-wbfeed td:nth-child(3){width:140px}
  .tbl.tbl-wbfeed th:nth-child(4),.tbl.tbl-wbfeed td:nth-child(4){width:170px}
  .tbl.tbl-wbfeed th:nth-child(5),.tbl.tbl-wbfeed td:nth-child(5){width:84px}
  .tbl.tbl-wbfeed th:nth-child(7),.tbl.tbl-wbfeed td:nth-child(7){width:100px}
}
/* Лента склада: восемь колонок — вторая это «Где лежит» с кнопкой быстрой сборки
   (05.09.2026). Свой блок, потому что у клиента кабинета колонок шесть и общие
   ширины nth-child после вставки уезжали: «Что происходит» получало 84 px и чипы
   рвались пополам («собр/ать»). Порядок: № · где лежит · КА · куда везти · что
   происходит · позиций · следующий шаг (остаток) · действия. */
@media(min-width:1400px) and (max-width:2400px){
  .tbl.tbl-wbfeed.tbl-wbfeed-op th:nth-child(2),
  .tbl.tbl-wbfeed.tbl-wbfeed-op td:nth-child(2){width:152px}
  .tbl.tbl-wbfeed.tbl-wbfeed-op th:nth-child(3),
  .tbl.tbl-wbfeed.tbl-wbfeed-op td:nth-child(3){width:132px}
  .tbl.tbl-wbfeed.tbl-wbfeed-op th:nth-child(4),
  .tbl.tbl-wbfeed.tbl-wbfeed-op td:nth-child(4){width:150px}
  .tbl.tbl-wbfeed.tbl-wbfeed-op th:nth-child(5),
  .tbl.tbl-wbfeed.tbl-wbfeed-op td:nth-child(5){width:186px}
  .tbl.tbl-wbfeed.tbl-wbfeed-op th:nth-child(6),
  .tbl.tbl-wbfeed.tbl-wbfeed-op td:nth-child(6){width:74px}
  .tbl.tbl-wbfeed.tbl-wbfeed-op th:nth-child(7),
  .tbl.tbl-wbfeed.tbl-wbfeed-op td:nth-child(7){width:auto}
  .tbl.tbl-wbfeed.tbl-wbfeed-op th:nth-child(8),
  .tbl.tbl-wbfeed.tbl-wbfeed-op td:nth-child(8){width:100px}
  /* Кнопка сборки — в две строки, но без разрыва слов посреди буквы. */
  .tbl.tbl-wbfeed-op td .qp-btn{white-space:normal;text-align:left;line-height:1.25}
}
@media(min-width:861px){
  .tbl.tbl-hang{table-layout:fixed;width:100%;min-width:0}
  .tbl-scroll .tbl.tbl-hang{min-width:0}
  .tbl.tbl-hang th,.tbl.tbl-hang td{white-space:normal;overflow-wrap:anywhere}
  .tbl.tbl-hang th:nth-child(1),.tbl.tbl-hang td:nth-child(1){width:280px}
  .tbl.tbl-hang th:nth-child(2),.tbl.tbl-hang td:nth-child(2){width:240px}
  .tbl.tbl-hang th:nth-child(3),.tbl.tbl-hang td:nth-child(3){width:78px}
  .tbl.tbl-hang th:nth-child(5),.tbl.tbl-hang td:nth-child(5){width:108px}
}
/* Пустота под списками при мелком масштабе браузера (80%/67%) — жалоба Юрия 25.07:
   карточка списка кончалась, и до низа окна оставался голый фон. Страницы, где
   ПОСЛЕДНИЙ блок контента — карточка с таблицей (списки), переводим во флекс-колонку
   и тянем эту карточку до низа окна. :has ограничивает радиус — формы и дашборды
   не трогаются. */
.content:has(> .card:last-child .tbl){display:flex;flex-direction:column;flex:1 1 auto}
.content:has(> .card:last-child .tbl) > .card:last-child{flex:1 0 auto}

/* ── Cards ───────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.card.pad{padding:20px 22px}
.card-head{
  /* Перенос обязателен: заголовок и счётчик справа на 360 px не вставали в строку
     и вылезали за край (замер 20.08.2026, /m/shipments/clients). Две строки лучше
     боковой прокрутки страницы. */
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
  padding:14px 20px;border-bottom:1px solid var(--border);
}
.card-title{font-size:14px;font-weight:600}
.card-body{padding:16px 20px}

/* ── KPI метрики ─────────────────────────────────────────── */
.kpi-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));margin-bottom:20px}

/* ── Лента-фильтр: ряд чипов-счётчиков вместо плиточной сетки ────────────────
   Плитки .kpi-grid на лентах ФБС занимали 193 px и отжимали список за нижний
   край: замер 23.08.2026 на /m/wb_fbs — до первой строки 904 px из 1000, в
   первом экране НИ ОДНОЙ строки. Тот же набор чипами — 40 px. Компонент общий:
   раньше жил локальным стилем в wave/_counters.html, теперь один на все ленты. */
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);text-decoration:none;
  font-size:13.5px;font-weight:600;min-height:38px}
.pill b{font-variant-numeric:tabular-nums;padding:0 7px;border-radius:999px;
  background:var(--surface2);font-size:13px}
/* Вторая величина в пилюле (доля, процент) — тише счётчика: он про «сколько»,
   она про «как идёт». */
.pill .pill-sub{font-size:12px;font-weight:600;color:var(--muted)}
.pill.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.pill.hot{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 9%,transparent)}
/* Счётчик в пилюле: заливка акцентом, чернила темы. Было #f0a500 + белый = 2,08 —
   число на плашке не читалось (аудит 27.08). */
.pill.hot b{background:var(--amber);color:var(--ink)}
.pill.bad{border-color:var(--red);background:var(--red-soft)}
.pill.bad b{background:var(--red);color:var(--ink)}
/* История (уехали/доставлены/отменены/все) — под рукой, но глазу не мешает:
   склад работает с первыми четырьмя, остальные смотрят по случаю. */
.pill.mute{font-weight:500;color:var(--muted);font-size:12.5px;min-height:32px;padding:5px 10px}
.pill.mute b{font-size:12px;background:transparent;padding:0 0 0 4px}
.pill:hover{box-shadow:0 2px 10px #0002}
.pill-sep{width:1px;align-self:stretch;background:var(--border2);margin:0 4px}
.kpi{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);padding:18px 20px;position:relative;overflow:hidden;
}
.kpi-ico{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.kpi-ico.brand{background:var(--brand-soft);color:var(--brand)}
.kpi-ico.green{background:var(--green-soft);color:var(--green)}
.kpi-ico.amber{background:var(--amber-soft);color:var(--amber)}
.kpi-ico.teal{background:var(--teal-soft);color:var(--teal)}
.kpi-ico.red{background:var(--red-soft);color:var(--red)}
.kpi-lbl{font-size:12.5px;color:var(--muted);font-weight:500}
/* Резерв под абсолютную .kpi-ico (34 + правый отступ): без него длинная подпись
   на узкой карточке (телефон, 2 в ряд) заезжала под иконку — «Этикеток напечата…»,
   ТСД-рентген 18.08.2026. Только соседним селектором: у карточек БЕЗ иконки
   (метрики заказов, логистика, прогресс ЧЗ) резерв был бы мёртвой зоной. */
.kpi-ico ~ .kpi-lbl{padding-right:46px}
.kpi-val{font-size:26px;font-weight:700;margin-top:4px;letter-spacing:-.03em;line-height:1.1}
.kpi-sub{font-size:12px;color:var(--faint);margin-top:5px}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:#fff;
  border:0;border-radius:var(--r-sm);padding:9px 16px;font:inherit;font-weight:500;
  font-size:13.5px;cursor:pointer;white-space:nowrap;transition:.12s;
}
/* Наведение на кнопку: на светлой теме ТЕМНЕЕ, на тёмной — светлее. Прежнее
   brightness(1.1) осветляло всегда, и на светлых темах белые буквы на цветной
   заливке при наведении читались хуже, чем до него. */
.btn:hover{filter:var(--btn-hover-filter)}
/* border:0 + inset box-shadow вместо border:1px — визуально та же рамка, но не
   добавляет +2px к размеру кнопки (border всегда добавляется к итоговым
   размерам поверх padding, из-за чего .ghost был выше/шире обычного .btn). */
.btn.ghost{background:var(--surface);color:var(--text);border:0;box-shadow:inset 0 0 0 1px var(--border2)}
.btn.ghost:hover{background:var(--hover)}
.btn.sm{padding:6px 12px;font-size:12.5px}
.btn.xs{padding:4px 10px;font-size:12px}
.btn.danger{background:var(--red)}
.btn.success{background:var(--green)}
.btn i{font-size:16px}
/* Полоса вкладок раздела (stock/_tabs.html): экраны одного раздела делят одну
   строку меню, переключение — здесь. Только раскладка: цвет несут сами .btn. */
.sec-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
button{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--brand);color:#fff;border:0;border-radius:var(--r-sm);
  padding:8px 14px;font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;transition:.12s;
}
button:hover{filter:var(--btn-hover-filter)}
button.ghost{background:var(--surface);color:var(--text);border:0;box-shadow:inset 0 0 0 1px var(--border2)}
button.ghost:hover{background:var(--hover)}
button.sm{padding:5px 11px;font-size:12.5px}
button.danger{background:var(--red)}

/* ── Chips / badges ──────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:99px;font-size:12px;font-weight:500;
  background:var(--surface2);border:1px solid var(--border);color:var(--muted);
  line-height:1.4;
}
.chip i{font-size:13px}
.chip.green{background:var(--green-soft);color:var(--green);border-color:transparent}
.chip.amber{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.chip.red{background:var(--red-soft);color:var(--red);border-color:transparent}
.chip.brand{background:var(--brand-soft);color:var(--brand);border-color:transparent}
.chip.teal{background:var(--teal-soft);color:var(--teal);border-color:transparent}
.chip.sm{font-size:11px;padding:2px 7px}
/* `chip ok` / `chip warn` — та же пара слов, что у .pill и .flash: так написано
   в 48 местах (приёмка, портал, закупки, супервайзер). Правил не было вовсе,
   и «сошлось», «подписан», «есть расхождение», «не подписан» рисовались одним
   нейтральным серым — цвет статуса до человека не доходил. */
.chip.ok{background:var(--green-soft);color:var(--green);border-color:transparent}
.chip.warn{background:var(--amber-soft);color:var(--amber);border-color:transparent}

/* ── Tables ──────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse}
.tbl th{
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--faint);padding:8px 16px;text-align:left;white-space:nowrap;
  border-bottom:1px solid var(--border);background:var(--surface2);
}
.tbl td{padding:11px 16px;font-size:13.5px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--hover)}
.tbl td strong{font-weight:600}
/* Группировка по ячейке: соседние ячейки чередуются заливкой, чтобы товары с
   одного паллета читались одним блоком. Полупрозрачность — чтобы работало и на
   светлых темах, и на фото-темах, где под таблицей своя подложка. */
.tbl tbody tr.cell-band td{background:color-mix(in srgb, var(--surface2) 55%, transparent)}
.tbl tbody tr.cell-band:hover td{background:var(--hover)}
.num{text-align:right!important;font-variant-numeric:tabular-nums}
.money{font-weight:600;font-variant-numeric:tabular-nums}

/* ── Forms ───────────────────────────────────────────────── */
input:not([type]),input[type=text],input[type=email],input[type=password],input[type=number],
input[type=search],input[type=date],input[type=datetime-local],input[type=time],select,textarea{
  background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r-sm);
  color:var(--text);font:inherit;font-size:13.5px;padding:8px 11px;
  width:100%;transition:.12s;outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);
}
input::placeholder,textarea::placeholder{color:var(--faint)}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator{filter:invert(0.6);cursor:pointer}
/* Нативный календарь/часы браузера — в цвет темы: без color-scheme Chromium
   рисует всплывающий пикер белым даже на тёмном фоне. */
html.theme-dark{color-scheme:dark}html.theme-dark input{color-scheme:dark}
input[readonly]{opacity:.7;cursor:default}
label{font-size:13px;font-weight:500;color:var(--muted);display:block}
label > input,label > select,label > textarea{margin-top:5px}
input[type=checkbox]{
  appearance:none;-webkit-appearance:none;width:17px;height:17px;flex:none;
  background:var(--surface2);border:1.5px solid var(--border2);border-radius:5px;
  display:inline-grid;place-content:center;cursor:pointer;transition:.12s;
}
input[type=checkbox]:hover{border-color:var(--faint)}
input[type=checkbox]:checked{background:var(--brand);border-color:var(--brand)}
input[type=checkbox]:checked::after{
  content:"";width:4px;height:8px;border:solid var(--ink);border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
input[type=checkbox]:focus-visible{box-shadow:0 0 0 3px var(--brand-soft)}

/* ── Выбор файла (.filepick) ─────────────────────────────────
   Нативный input[type=file] рисуется каждым браузером по-своему (серая кнопка
   «Выберите файл» + мелкий текст) и выпадает из темы. Прячем его прозрачностью
   ПОВЕРХ всей пилюли — не display:none: скрытому required-полю Chrome не может
   показать подсказку «Выберите файл», и форма молча не отправляется.
   Имя выбранного файла подставляет делегированный слушатель в base.html. */
.filepick{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  max-width:min(360px,100%);padding:4px 14px 4px 4px;border-radius:99px;
  background:var(--surface2);box-shadow:inset 0 0 0 1px var(--border2);transition:.12s;
}
.filepick input[type=file]{
  position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;
  opacity:0;font-size:0;cursor:pointer;
}
.fp-btn{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:6px 13px;border-radius:99px;background:var(--surface);color:var(--text);
  font-size:12.5px;font-weight:500;white-space:nowrap;
  box-shadow:inset 0 0 0 1px var(--border2);transition:.12s;
}
.fp-btn i{font-size:15px}
.filepick:hover{box-shadow:inset 0 0 0 1px var(--brand)}
.filepick:hover .fp-btn{background:var(--brand);color:var(--ink);box-shadow:none}
.filepick:focus-within{box-shadow:inset 0 0 0 1px var(--brand),0 0 0 3px var(--brand-soft)}
.fp-name{
  font-size:12.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.filepick.has-file{box-shadow:inset 0 0 0 1px var(--green)}
.filepick.has-file .fp-btn{color:var(--green)}
.filepick.has-file:hover .fp-btn{color:var(--ink)}
.filepick.has-file .fp-name{color:var(--text)}

/* ── Flash banner ────────────────────────────────────────── */
.flash{
  padding:11px 16px;border-radius:var(--r-sm);font-size:13.5px;
  display:flex;align-items:center;gap:9px;margin-bottom:14px;
}
.flash i{font-size:17px;flex-shrink:0}
.flash.info{background:var(--brand-soft);color:var(--brand);border:1px solid var(--brand-soft)}
/* .ok — то же, что .success: так написано в двадцати шаблонах, и без этого правила
   подтверждение «Готово» выводилось бесцветной строкой на пустом месте. */
.flash.success,.flash.ok{background:var(--green-soft);color:var(--green)}
.flash.warn{background:var(--amber-soft);color:var(--amber)}
.flash.err{background:var(--red-soft);color:var(--red)}
/* Денежные экраны исторически пишут `flash ok` и `chip sm` — классов не было,
   и «зелёная» плашка рисовалась бесцветной. Алиасы дешевле правки 8 шаблонов. */
.flash.ok{background:var(--green-soft);color:var(--green)}

/* ── Pills / tags ────────────────────────────────────────── */
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pill{
  display:inline-flex;align-items:center;gap:5px;padding:5px 13px;border-radius:99px;
  font-size:12.5px;font-weight:500;background:var(--brand-soft);color:var(--brand);
}
.pill.ok{background:var(--green-soft);color:var(--green)}
.pill.warn{background:var(--amber-soft);color:var(--amber)}
.pill.red{background:var(--red-soft);color:var(--red)}
.pill.muted{background:var(--surface2);color:var(--muted);border:1px solid var(--border)}

/* ── Details / accordion ─────────────────────────────────── */
details summary{
  padding:12px 20px;cursor:pointer;color:var(--brand);font-weight:600;font-size:13.5px;
  display:flex;align-items:center;gap:7px;list-style:none;
}
details summary::-webkit-details-marker{display:none}
/* \ea61 — chevron-right. Раньше стоял \ea6c: это clipboard-check, и у каждого
   аккордеона пульта крутился «планшет с галочкой» вместо стрелки. */
details summary::before{content:'\ea61';font-family:tabler-icons;font-size:16px;transition:.2s}
details[open] summary::before{transform:rotate(90deg)}
details .det-body{padding:6px 20px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}

/* ── Selectors / filters ─────────────────────────────────── */
.filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filter-bar form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filter-bar select,.filter-bar input{width:auto}

/* ── select[data-searchable] (base.html initSearchableSelects) ──────────── */
.ss-wrap{display:contents}
.ss-list{display:none;position:fixed;z-index:60;min-width:220px;max-width:calc(100vw - 16px);max-height:320px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.35);padding:6px}
.ss-list.open{display:block}
.ss-opt{padding:6px 10px;border-radius:8px;font-size:13px;cursor:pointer;user-select:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-opt:hover,.ss-opt.active{background:var(--hover)}
.ss-empty{padding:6px 10px;font-size:13px;color:var(--faint)}

/* ── Utils ───────────────────────────────────────────────── */
.mt{margin-top:14px}.mt2{margin-top:20px}.mb{margin-bottom:14px}.mb2{margin-bottom:20px}
.sep{height:1px;background:var(--border);margin:18px 0}
/* Листалка лент ФБС (_feed_pager.html): подпись слева, переходы справа. */
.pager{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 4px;font-size:13px}
.pager-links{display:flex;align-items:center;gap:8px;margin-left:auto}
.pager-links a{display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.muted{color:var(--muted)}.faint{color:var(--faint)}
/* Класс использовался в таблицах (например ord-th "Время"), но не был
   определён — ячейки без запрета переноса рвались на 2 строки и раздували
   всю строку таблицы вдвое. */
.nowrap{white-space:nowrap}
/* Код на этикетке: КИЗ Честного знака, штрихкод, номер отправления. Моноширинный —
   на складе в них путают 0 и O, 1 и l; перенос по любому символу, иначе 31-символьный
   КИЗ растягивает колонку. Класс scan-bc стоял в 16 шаблонах (журнал печати, сверка
   со сканами, товары площадок, пулы), а определения не было вовсе — коды шли обычным
   шрифтом (находка 20.08.2026). Размер строки задают сами шаблоны inline. */
.mono,.scan-bc{font-family:ui-monospace,'Fira Code',monospace;font-size:12.5px;word-break:break-all}
.label{font-size:11.5px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.empty{padding:48px 24px;text-align:center;color:var(--faint)}
.empty i{font-size:36px;display:block;margin-bottom:10px;opacity:.5}
/* minmax(0,…), а не 1fr: голый 1fr — это minmax(auto,1fr), и трек не сжимается
   ниже min-content содержимого. Таблица с nowrap-заголовками раздувала колонку и
   выносила карточку за экран (замер 20.08.2026: /m/earnings/accruals на 1013 → 1269). */
.g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:860px){.g2,.g3{grid-template-columns:1fr}}
.flex-sb{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.link{color:var(--brand);cursor:pointer}
.link:hover{text-decoration:underline}
.back{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:13.5px;margin-bottom:14px}
.back:hover{color:var(--text)}

/* ── Auth pages ──────────────────────────────────────────── */
/* position+z-index: иначе fixed-фон .aurora-bg (z-index:0, темы Уголь/Аврора)
   рисуется ПОВЕРХ непозиционированной формы — логин «исчезает» после выхода. */
.auth-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg);position:relative;z-index:1}
.auth-box{
  width:390px;max-width:94vw;
  background:var(--surface);border:1px solid var(--border);
  border-radius:18px;box-shadow:0 4px 24px rgba(15,23,42,.12);overflow:hidden;
}
.auth-head{padding:30px 28px 20px;text-align:center;border-bottom:1px solid var(--border)}
/* Логотип-локап: ERP крупно, имя бренда под ним разрядкой. Тот же приём, что в
   шапке пульта (nav.css), — экран входа и рабочий экран должны узнаваться как
   одно приложение. */
.auth-brand{display:inline-flex;flex-direction:column;align-items:flex-start;
  line-height:1;border-left:3px solid var(--brand);padding-left:12px;margin:0 0 16px}
.auth-brand-erp{font-size:30px;font-weight:800;letter-spacing:.05em;color:var(--text)}
.auth-brand-sub{font-size:13px;letter-spacing:.16em;color:var(--muted);margin-top:5px}
.auth-title{font-size:20px;font-weight:700;margin-bottom:5px}
.auth-sub{font-size:13.5px;color:var(--muted)}
.auth-body{padding:22px 28px 28px;display:flex;flex-direction:column;gap:14px}

/* ── Mobile ──────────────────────────────────────────────── */
.mob-bar{display:none}
.mob-menu-btn{
  /* Кнопка обязана быть заметной во всех темах: фирменный фон + контрастная иконка.
     История бага: сперва color:#fff на светлой теме = белая иконка на белом баре;
     затем полутон var(--surface2) на почти таком же баре читался слабо — сотрудник
     нащупывал кнопку по памяти. Подпись «Меню» держит её узнаваемой, даже если
     иконочный шрифт не загрузился. */
  background:var(--brand);border:1px solid transparent;border-radius:8px;
  color:var(--ink);padding:9px 12px;min-width:44px;min-height:44px;cursor:pointer;font-size:19px;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.mob-menu-lbl{font-size:13.5px;font-weight:600}
.sb-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:19;
}
@media(max-width:860px){
  .sidebar{position:fixed;top:0;left:0;height:100vh;transform:translateX(-100%);transition:transform .25s cubic-bezier(.4,0,.2,1);width:248px!important;flex:unset!important}
  .sidebar.mob-open{transform:translateX(0)}
  /* Свёрнутость (ff-sb) — десктопное состояние. На телефоне она гасила шторку в ноль
     (opacity:0 + pointer-events:none), и тап по «Меню» давал только затемнение экрана. */
  /* Ширину тоже перебиваем здесь: у .sidebar.sb-collapsed специфичность выше, чем у
     .sidebar в этом же @media, и её width:0!important иначе побеждает — шторка выезжала
     полоской в 28px (только padding). */
  .sidebar.sb-collapsed{opacity:1!important;pointer-events:auto!important;overflow:hidden;
    width:248px!important;min-width:248px!important;flex:unset!important;border-right-width:1px}
  .sidebar.sb-collapsed .sb-label,.sidebar.sb-collapsed .sb-logo-text{opacity:1!important;width:auto!important;padding:revert}
  .sb-overlay.open{display:block}
  .mob-bar{
    display:flex;align-items:center;justify-content:space-between;
    padding:11px 16px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    position:sticky;top:0;z-index:25;
  }
  .content{padding:16px 16px 50px}
  .topbar{padding:12px 16px}
  .topbar h1{font-size:16px}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .sb-expand-btn{display:none!important}
}

/* ── Who: аватар+имя+подпись в строке таблицы (облик макета) ─ */
.who{display:flex;align-items:center;gap:11px}
.who .av{
  width:34px;height:34px;border-radius:9px;flex:0 0 34px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;background:var(--brand-soft);color:var(--brand);
}
.who b{font-weight:600;display:block;line-height:1.25}
.who span{font-size:12px;color:var(--faint)}

/* ── Карточки сотрудников (.emp/.ecard) ──────────────────── */
.emp{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.ecard{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);padding:16px 18px;display:flex;gap:14px;align-items:center;
}
.ecard .av{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;
}
.ecard .inf b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.ecard .inf span{font-size:12px;color:var(--muted)}
.badge{margin-left:auto;font-size:12px;font-weight:500;padding:4px 10px;border-radius:99px}
.badge.on-shift{background:var(--green-soft);color:var(--green)}
.badge.off-shift{background:var(--surface2);color:var(--muted)}

/* ── Page header (шапка лендинга модуля) ─────────────────── */
.page-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:22px}
.page-h2{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--text)}
.page-sub{font-size:13.5px;color:var(--muted);margin-top:5px;max-width:720px;line-height:1.5}
.section-h{font-size:12px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px}
/* Шапка страницы с h1 (экраны волн: обзор, упаковка, сборка). Тот же воздух под
   заголовком, что у .page-header — без него шапка липла к первой карточке. */
.page-hd{margin-bottom:22px}

/* ── Action cards (карты-разделы: плотные, мелкая плашка, без chevron) ─ */
.action-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:14px;margin-bottom:26px}
.action{
  display:block;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--shadow);padding:18px;
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.action:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 40%,transparent);box-shadow:0 6px 24px color-mix(in srgb,var(--brand) 18%,transparent)}
.action-ico{
  width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:19px;background:var(--brand-soft);color:var(--brand);
}
.action-ico.green{background:var(--green-soft);color:var(--green)}
.action-ico.amber{background:var(--amber-soft);color:var(--amber)}
.action-ico.teal{background:var(--teal-soft);color:var(--teal)}
.action-ico.red{background:var(--red-soft);color:var(--red)}
.action-title{font-size:14.5px;font-weight:600;color:var(--text);margin-top:13px}
.action-desc{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.45}
.action-status{font-size:11.5px;margin-top:11px;color:var(--green);display:flex;align-items:center;gap:5px}
.action-status .dot{font-size:8px;line-height:1}
.action.primary{border-color:color-mix(in srgb,var(--brand) 35%,transparent);background:linear-gradient(to bottom right,var(--brand-soft),transparent)}

/* ── Команда: раскрытие строки редактирования (без JS) + пилюли разделов ──── */
.emp-edit{display:none;padding:14px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);margin:0 0 10px}
.emp-tgl:checked ~ .emp-edit{display:block}
.blk-pills{display:flex;flex-wrap:wrap;gap:8px}
.blk-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;font-size:12.5px;
  background:var(--surface);border:1px solid var(--border);color:var(--muted);cursor:pointer;transition:.12s}
.blk-pill:hover{border-color:var(--border2);color:var(--text)}
.blk-pill input{width:auto;margin:0;accent-color:var(--brand)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;align-items:end}

/* util */
.hide{display:none!important}

/* ═══ Облик «Тёплый склад» (выбран командой 17.06): тёплый уголь + янтарь ═══ */
/* Темы перекрашены в тёплую палитру выше (токены). Здесь — шрифт заголовков,   */
/* моноширинные цифры, фирменная марка и тёплые состояния вместо фиолетовых.     */
h1,h2,h3,.topbar h1,.page-h2,.card-title,.kpi-val,.auth-title,.action-title{
  font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
}
.num,.money,.kpi-val,.tbl,.kpi-val,.action-num{font-variant-numeric:tabular-nums}
.kpi-val{font-weight:700}
/* Космос «Звёздная пыль» — фон-слой включён в dark/aurora (.aurora-bg выше) */
html.theme-dark .aurora-bg{opacity:1}html.theme-dark .sidebar{background:rgba(255,247,236,.022)}
/* Марка: янтарная плашка вместо фиолетового градиента */
/* Первичная кнопка — тёмные чернила на янтаре; ghost/danger/success — свои */
.btn{color:var(--ink)} .btn i{color:inherit}
/* Чернила цветных кнопок — только --ink. Прибитые #fff и #06231B (аудит 27.08)
   не знали про светлоту темы: «Удалить» в «Угле» давала 2,67 (белым по светлому
   лососю), «Включить» в «Лазури» — 2,35 (тёмно-зелёным по тёмно-зелёному).
   --ink всегда контрастен акцентам своей темы: замер по восьми темам 5,3–8,8. */
.btn.ghost{color:var(--text)} .btn.danger{color:var(--ink)} .btn.success{color:var(--ink)}
button{color:var(--ink)} button.ghost{color:var(--text)} button.danger{color:var(--ink)}
/* Сайдбар: тёплая подсветка + левый янтарный кант (вместо violet→fuchsia) */
.sb-link:hover,.sb-acc-hd:hover{background:var(--hover);border-color:transparent;color:var(--text)}
.sb-link.sb-active{background:var(--surface2);border-color:transparent;color:var(--brand);
  font-weight:600;box-shadow:inset 3px 0 0 var(--brand)}
.sb-link.sb-active .sb-icon{color:var(--brand)}
.sb-sync-dot{background:var(--brand-soft);color:var(--brand)}
/* Карточки-действия: тёплая рамка вместо зашитого фиолета */
.action.primary{border-color:rgba(224,131,59,.4)}

/* ── Пульс системы (ЭКГ производительности) ───────────────────── */
.pulse-live{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 7px var(--teal);animation:pulse-blink 1.6s ease-in-out infinite}
@keyframes pulse-blink{0%,100%{opacity:1}50%{opacity:.15}}
@media(prefers-reduced-motion:reduce){.pulse-dot{animation:none}}
.pulse-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-bottom:1px solid var(--border)}
.pulse-tile{padding:14px 18px 15px;border-right:1px solid var(--border)}
.pulse-tile:last-child{border-right:none}
.pulse-tile-row{display:flex;align-items:baseline;gap:9px}
.pulse-val{font-size:30px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pulse-delta{font-size:12px;font-weight:600;color:var(--muted)}
.pulse-delta.up{color:var(--green)}
.pulse-delta.down{color:var(--amber)}
.pulse-tile-lbl{font-size:11px;color:var(--muted);margin-top:6px;
  text-transform:uppercase;letter-spacing:.05em}
.pulse-canvas-wrap{position:relative;padding:16px 16px 4px}
#pulse-canvas{display:block;width:100%}
.pulse-foot{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px;padding:10px 18px 14px}
.pulse-legend{display:flex;gap:20px;flex-wrap:wrap}
.pl-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.pl-swatch{width:16px;height:3px;border-radius:2px}
.pulse-note{font-size:11px;color:var(--faint)}
@media(max-width:560px){
  .pulse-val{font-size:24px}
  .pulse-tile{padding:11px 12px 12px}
}

/* ── «Заказы покупателей»: тема пульта, не белый остров МС ─────────────────
   Остров 10.07.2026 («вид как в МойСклад») снят 25.08: Пётр — тот же выбор,
   что у закупок 20.08. Токены --surface/--text/--bg наследуются с html.theme-*.
   Плашка статуса МС остаётся цветной заливкой API, не темой пульта. */
.ord-state-ms{border:0!important;border-radius:4px;color:#fff!important;
  font-weight:500;padding:2px 9px}
.ord-state-ms .ti-chevron-down{color:rgba(255,255,255,.85)}
.ord-dense tbody td:nth-child(2) b{color:var(--brand);font-weight:600}
tr:hover .ord-dense-num, .ord-dense tbody tr:hover td:nth-child(2) b{text-decoration:underline}

/* Плитки-счётчики, они же вкладки — общий канон (список контрагентов, карточка
   контрагента, и где ещё понадобится). Раньше стили лежали внутри одного шаблона —
   второй экран с теми же классами остался без вида. */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:16px }
.tile { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:var(--r-sm);
        background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--border2);
        text-decoration:none; color:var(--text); transition:transform .08s, border-color .12s }
.tile:hover { transform:translateY(-1px) }
.tile.is-on { border-color:var(--brand2); background:var(--surface2) }
.tile-n { font-size:24px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums }
.tile-t { font-size:13.5px; font-weight:600 }
.tile-h { font-size:11.5px; color:var(--faint); line-height:1.3 }
.t-active { border-left-color:var(--green) }
.t-quiet  { border-left-color:var(--amber) }
.t-asleep { border-left-color:var(--border2) }
.t-unlisted { border-left-color:var(--red) }
.t-all    { border-left-color:var(--teal) }
.tile.is-on.t-active { border-color:var(--green) }
.tile.is-on.t-quiet { border-color:var(--amber) }
.tile.is-on.t-unlisted { border-color:var(--red) }

/* Поиск по строкам таблицы на месте (макрос _list_search.html + ffListFilter в
   base.html). Поле живёт в шапке карточки рядом с заголовком списка. */
.list-search{display:inline-flex;align-items:center;gap:6px}
.list-search > i{color:var(--faint);font-size:15px}
.list-search input{display:inline-block;height:32px;padding:4px 10px;font-size:13px}
.list-search-n{color:var(--faint);font-size:12px;white-space:nowrap}

/* ═══ Куда привела кнопка «Разобрать» ═══════════════════════════════════════
   Стол ведёт не в раздел, а в саму строку (#op12 — ставка, #acc51 — блокер,
   #issue7 — жалоба, #sku9 — ТЗ на проверке). Подсветка держится на :target,
   без JS: пришёл — видишь, куда пришёл, и не ищешь строку глазами на экране в
   сотню строк. scroll-margin-top — чтобы строку не закрыла шапка раздела. */
.tbl tbody tr:target > td{background:var(--brand-soft);box-shadow:inset 0 1px 0 var(--brand),inset 0 -1px 0 var(--brand)}
.tbl tbody tr:target > td:first-child{box-shadow:inset 3px 0 0 var(--brand),inset 0 1px 0 var(--brand),inset 0 -1px 0 var(--brand)}
tr:target{scroll-margin-top:90px}

/* ── Плашки-предупреждения на лентах ФБС ─────────────────────────────────── */
/* «почему так» — объяснение плашки под раскрывашкой: суть видна строкой, разбор
   по клику. Плашки-предупреждения сами стали плотнее: между ними и списком
   заданий не должно стоять пол-экрана текста (владелец 23.08.2026). */
.why>summary{cursor:pointer;font-size:12px;color:var(--muted);list-style:none;
  display:inline-flex;align-items:center;gap:4px;border-bottom:1px dashed var(--border2);
  width:auto;margin-bottom:2px}
.why>summary::-webkit-details-marker{display:none}
.why>summary::marker{content:""}
.why>summary::before{content:"?";display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;border:1px solid currentColor;font-size:10px;line-height:1}
.why[open]>summary{margin-bottom:0}
/* Плашка-предупреждение: строка + раскрытие. Суть (что случилось, сколько, чем
   опасно) видна всегда; таблицы, кнопки и объяснения — по клику. Три такие
   плашки занимали 534 px из 1000, и список заданий уезжал за нижний край. */
.alert{border:1px solid var(--border);border-radius:var(--r-sm,10px);background:var(--surface);
  margin-bottom:8px;border-left:4px solid var(--border2)}
.alert.bad{border-left-color:var(--danger,#d33)}
.alert.warn{border-left-color:var(--amber,#e0a800)}
.alert>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;padding:9px 14px;font-size:13.5px}
.alert>summary::-webkit-details-marker{display:none}
.alert>summary::marker{content:""}
.alert>summary::before{content:none}
.alert.bad>summary>i,.alert.bad>summary>b{color:var(--danger,#d33)}
.alert.warn>summary>i,.alert.warn>summary>b{color:var(--amber,#8a5a00)}
.alert>summary>i{font-size:16px}
.alert-inline{display:inline-flex;gap:5px;flex-wrap:wrap;align-items:center}
.alert-more{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.alert-more::after{content:" ▾"}
.alert[open]>summary>.alert-more::after{content:" ▴"}
.alert-body{padding:2px 14px 12px}


/* Строка фильтров в шапке таблицы (лента ФБС). Своя строка под заголовками, а не
   поля рядом с названием колонки: заголовок должен читаться как заголовок. */
tr.flt th { padding-top: 2px; padding-bottom: 6px; font-weight: 400; }
/* 🔴 Цвета здесь НЕ переопределяем. Правило форм выше уже красит select по теме
   (surface2/border2/text) и подхватывается всеми темами — glass, photo, белой.
   Первая версия ставила свои: var(--card,#fff) и var(--line,#d9d9d9). Токенов
   --card/--line/--accent в системе нет вовсе, поэтому в дело шли фолбэки, и на
   тёмной ленте фильтры рисовались БЕЛЫМИ окнами (владелец 24.08.2026). */
tr.flt select { width: 100%; max-width: 190px; font-size: 11px; padding: 3px 6px; }
tr.flt select.on { border-color: var(--brand); font-weight: 600; }

/* Связанные документы: родители ← текущий → дети, вилка на каждую карточку. */
.rel-graph{
  display:flex;align-items:center;gap:0;padding:16px 12px;overflow-x:auto;
}
.rel-col{display:flex;flex-direction:column;justify-content:center}
.rel-col.is-branch{position:relative;gap:12px}
.rel-col.is-branch::before{
  content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;background:var(--border2);
}
.rel-col.is-branch.is-left::before{left:auto;right:0}
.rel-branch{display:flex;align-items:center;min-width:0}
.rel-arm{
  flex:0 0 20px;height:2px;background:var(--border2);align-self:center;
}
.rel-edge{
  flex:0 0 24px;height:2px;background:var(--border2);align-self:center;
}
.rel-node{
  display:flex;flex-direction:column;gap:2px;min-width:176px;max-width:240px;
  padding:10px 12px 10px 16px;border-radius:var(--r-sm);position:relative;
  background:var(--surface);color:var(--text);text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--border2);
  overflow:hidden;
}
.rel-node::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:4px;
  background:var(--rel-state);
}
.rel-node.is-current{background:var(--text);color:var(--surface);box-shadow:none}
.rel-node.is-current .rel-kind,
.rel-node.is-current .rel-when,
.rel-node.is-current .rel-state{color:inherit;opacity:.78}
a.rel-node:hover{background:var(--hover)}
.rel-kind{
  font-size:11px;color:var(--muted);letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.rel-name,.rel-when,.rel-state{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.rel-name{font-weight:600;font-size:14px;line-height:1.25}
.rel-when,.rel-state{font-size:12px;color:var(--muted)}

/* Вкладки карточки документа (Позиции / Связанные / Файлы). */
.card-tabs{position:relative}
.card-tab{
  position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;
}
.card-tab-nav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.card-pane{display:none}
.card-tabs:has(.tab-pos:checked) > .pane-pos,
.card-tabs:has(.tab-rel:checked) > .pane-rel,
.card-tabs:has(.tab-files:checked) > .pane-files{display:block}
.card-tabs:has(.tab-pos:checked) .btn.tab-lbl-pos,
.card-tabs:has(.tab-rel:checked) .btn.tab-lbl-rel,
.card-tabs:has(.tab-files:checked) .btn.tab-lbl-files{
  background:var(--brand);color:#fff;box-shadow:none;
}
.btn.tab-lbl-pos,.btn.tab-lbl-rel,.btn.tab-lbl-files{box-shadow:none}
.rel-bind-dlg{
  /* *{margin:0} сбивает UA-центрирование <dialog> — как у dialog#measure-box. */
  position:fixed;inset:0;margin:auto;height:fit-content;
  border:0;border-radius:var(--r);padding:0;
  max-width:920px;width:calc(100% - 32px);max-height:calc(100vh - 48px);
  overflow:auto;background:var(--surface);color:var(--text);box-shadow:var(--shadow);
}
.rel-bind-dlg::backdrop{background:rgba(30,26,20,.45)}
.rel-bind-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--border);
}
.rel-bind-search{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:8px;padding:12px 16px;align-items:end;
}
.rel-bind-search label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.rel-bind-search select,.rel-bind-search input{width:100%;min-width:0}
.rel-bind-hint{grid-column:1/-1;margin:0;font-size:12px;color:var(--muted)}
.rel-bind-actions{grid-column:1/-1;display:flex;gap:8px;align-items:center}
.rel-bind-body{padding:0 16px 16px;min-height:80px}
.rel-stack{display:flex;flex-direction:column;gap:6px;min-width:0}
.rel-node-kids{
  display:flex;flex-direction:column;gap:0;margin:4px 0 0 8px;
  padding-left:0;position:relative;
}
.rel-node-kids::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;background:var(--border2);
}
/* Подбор товара на карточке: datalist прячет хвост ШК (Chrome матчит prefix). */
.oc-ass-wrap{position:relative}
.oc-ass-hits{position:absolute;left:0;right:0;top:100%;z-index:30;max-height:240px;overflow:auto;
  margin-top:4px;background:var(--surface);border:1px solid var(--border);border-radius:8px;
  box-shadow:var(--shadow)}
.oc-ass-hits button{display:block;width:100%;text-align:left;padding:8px 12px;border:0;
  background:transparent;color:var(--text);cursor:pointer;font:inherit}
.oc-ass-hits button:hover{background:var(--hover)}
.oc-ass-miss{padding:8px 12px;color:var(--muted);font-size:13px}

/* Очередь замера габаритов (.tbl.mq). Имя товара у канцелярии длиной в предложение,
   и при естественной раскладке оно распирало таблицу: «Клиент» уезжал за правый край,
   ленту приходилось крутить вбок (владелец 04.09.2026). Раскладку держит .tbl-fit
   (fixed), здесь только ширины справочных колонок — остаток достаётся имени. */
/* 🔴 Только шире 640: на ТСД строка становится карточкой (mobile.css), и заданная
   здесь ширина держала бы ячейку кнопки на 132 px — «Померить» выходило в треть
   строки вместо полной ширины (замер живой страницы 04.09.2026: ячейка 132 из 345). */
@media (min-width:641px){
  .tbl.mq th:nth-child(2),.tbl.mq td:nth-child(2){width:200px}
  .tbl.mq th:nth-child(3),.tbl.mq td:nth-child(3){width:104px}
  .tbl.mq th:nth-child(4),.tbl.mq td:nth-child(4){width:230px}
  .tbl.mq th:nth-child(5),.tbl.mq td:nth-child(5){width:132px}
  .tbl.mq td:nth-child(5){text-align:right}
}

/* ── Карточка замера габаритов ──────────────────────────────────────────────
   Три числа — вся работа, поэтому поля крупные, а редкое (заметка, фото) под
   катом: на ТСД оно отжимало кнопку «Сохранить» за нижний край экрана. */
.m-dims{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.m-dims label,.m-weight label{display:block;font-size:12px;color:var(--muted)}
.m-dims input,.m-weight input{width:100%;margin-top:4px;font-size:19px;padding:12px}
.m-weight{margin-top:12px;max-width:220px}
.m-s{display:none}
.m-vol{margin-top:10px;font-size:13px;color:var(--muted)}
.m-vol b{color:var(--ink);font-size:15px}
/* Больше сотни литров — короб размером с холодильник. Не запрещаем, но красим:
   лишний ноль в высоте видно ещё до сохранения, а не в счёте клиента. */
.m-vol-big b{color:var(--amber)}
.m-more{margin-top:14px}
.m-more summary{cursor:pointer;font-size:13px;color:var(--muted);padding:6px 0}
.m-save{margin-top:16px}
/* Найденное списком: имя строкой, под ним клиент, артикул и штрихкод. */
.m-picks{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.m-pick{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
        text-align:left;padding:8px 12px;height:auto}
.m-pick-name{font-weight:600}
.m-pick-sub{font-size:12px;color:var(--muted)}

/* Пилот «полка за один тап»: карточка плана в проходе. Своя рамка, а не общий
   .card: это не сводка, а предложение действия — человек должен отличать её от
   строк очереди с первого взгляда, стоя у стеллажа. */
.zn-auto{border:2px solid var(--teal);border-radius:12px;padding:12px;margin:10px 0;
  background:var(--teal-soft)}
.zn-auto-hd{font-weight:700;font-size:16px;display:flex;align-items:center;gap:6px;
  margin-bottom:4px}
.zn-auto form{display:flex;gap:8px;align-items:center;margin-top:10px}
.zn-auto input[type=number]{width:84px;font-size:20px;font-weight:700;text-align:center;
  padding:8px;border-radius:8px}
.zn-auto .btn{flex:1;font-size:16px;padding:12px}
#zn-auto-hint{margin-top:8px;font-size:12.5px}