/* ФБС · вывод из оборота. Палитра и плотность — из DESIGN.md: жёлтый ведёт, зелёный завершает,
   красный означает необратимое, серый отступает. Синий не добавляется. Радиус только переменной. */

.fbs-page { padding-bottom: 24px; }

.fbs-heading { text-align: center; margin: 10px 0 14px; }
.fbs-heading h1 { font-size: 1.5rem; margin: 0 0 2px; font-weight: 700; }
.fbs-heading p { width: max-content; max-width: 100%; margin: 0 auto; font-size: 13px; color: #6c757d; }

/* Памятка «как это устроено по правилам» в шапке: свёрнута — нужна при знакомстве, потом мешает.
   Шаги в <ol> одной колонкой: сверху вниз, как их и выполняют — порядок держит разметка,
   а не раскладка, и он же переживает копирование текста. */
.fbs-guide { max-width: 820px; margin: 12px auto 0; text-align: left; background: #fff;
    border: 1px solid #dee2e6; border-radius: var(--ctr-radius); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.fbs-guide > summary { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px;
    cursor: pointer; list-style: none; color: #495057; }
.fbs-guide > summary::-webkit-details-marker { display: none; }
.fbs-guide > summary h2 { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.3; color: inherit; }
.fbs-guide > summary::after { content: ''; flex: none; border: 4px solid transparent;
    border-left-color: currentColor; transition: transform .15s; }
.fbs-guide > summary:hover, .fbs-guide[open] > summary { color: #1a1a1a; }
.fbs-guide[open] > summary { border-bottom: 1px solid #dee2e6; }
.fbs-guide[open] > summary::after { transform: rotate(90deg); }
.fbs-guide-body { padding: 12px 16px 14px; font-size: 13px; line-height: 1.5; color: #495057; }
.fbs-guide-steps { display: flex; flex-direction: column; gap: 9px;
    margin: 0; padding: 0; list-style: none; counter-reset: fbsg; }
.fbs-guide-steps li { counter-increment: fbsg; position: relative; padding-left: 30px; }
.fbs-guide-steps li::before { content: counter(fbsg); position: absolute; left: 0; top: 0; width: 21px; height: 21px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 11px; font-weight: 700;
    background: rgba(30,158,56,.17); border: 1px solid rgba(30,158,56,.55); color: #14702a; }
.fbs-guide-steps b { color: #1a1a1a; font-weight: 650; }
/* Два вывода после шагов: жёлтый — что будет, если этого не делать, зелёный — что из этого берёт на себя страница */
.fbs-guide-warn, .fbs-guide-here { margin: 12px 0 0; padding: 7px 11px; border-radius: 0 var(--ctr-radius) var(--ctr-radius) 0; }
.fbs-guide-warn { border-left: 3px solid #ffc107; background: #fff8dc; color: #5d4700; }
.fbs-guide-here { margin-top: 8px; border-left: 3px solid #1e9e38; background: rgba(30,158,56,.09); color: #1a1a1a; }
.fbs-guide-here a { color: #14702a; font-weight: 600; }
.fbs-guide-lead { margin: 0 0 12px; padding: 7px 11px; border-left: 3px solid #0d6efd;
    background: rgba(13,110,253,.07); border-radius: 0 var(--ctr-radius) var(--ctr-radius) 0; color: #1a1a1a; }
.fbs-guide-lead b { font-weight: 650; }
.fbs-guide-table { width: 100%; margin: 13px 0 0; border-collapse: collapse; font-size: 12.5px; }
.fbs-guide-table caption { text-align: left; padding: 0 0 4px; font-weight: 650; color: #1a1a1a; }
.fbs-guide-table td { padding: 5px 8px; border-top: 1px solid #e9ecef; }
.fbs-guide-table td + td { width: 42%; color: #1a1a1a; font-weight: 600; white-space: nowrap; }
@media (max-width: 520px) { .fbs-guide-body { padding: 10px 12px 12px; } .fbs-guide-steps { gap: 8px; }
    .fbs-guide-table td + td { white-space: normal; } }

/* Значки — из уже загруженного Font Awesome; псевдоэлемент переживает смену textContent в JS. */
.fbs-icon::before { display: inline-block; min-width: 1.1em; margin-right: .42em; font-family: "Font Awesome 6 Free";
    font-weight: 900; line-height: 1; text-align: center; text-rendering: auto; }
.fbs-i-search::before { content: "\f002"; }.fbs-i-upload::before { content: "\f574"; }
.fbs-i-scan::before { content: "\f02a"; }.fbs-i-plug::before { content: "\f1e6"; }
.fbs-i-return::before { content: "\f2ea"; }.fbs-i-withdraw::before { content: "\f2f5"; }
.fbs-i-bulk::before { content: "\f5fd"; }.fbs-i-apply::before { content: "\f00c"; }
.fbs-i-save::before { content: "\f0c7"; }.fbs-i-close::before { content: "\f00d"; }
.fbs-i-check::before { content: "\f058"; }.fbs-i-sign::before { content: "\f5b7"; }
.fbs-i-download::before { content: "\f019"; }.fbs-i-trash::before { content: "\f2ed"; }

/* Идёт запрос: значок кнопки сменяется вертушкой, гасить кнопку при этом нельзя — выключенная кнопка
   читается как отказ, а не как работа. Остальные зоны выключены через inert и приглушены. */
.fbs-icon.is-busy::before { content: "\f110"; animation: fbs-spin .9s linear infinite; }
.btn.is-busy:disabled, .btn.is-busy.disabled { opacity: 1; cursor: progress; }
@keyframes fbs-spin { to { transform: rotate(360deg); } }
.fbs-top[inert], .fbs-controls[inert], #fbsGrid[inert], #historyZone[inert], .fbs-demo-box[inert] {
    opacity: .5; transition: opacity .12s; }

.fbs-sticky-notices { position: sticky; top: var(--nav-h, 70px); z-index: 60; margin-bottom: 10px; }
.fbs-dev-note { padding: 6px 10px; border: 1px solid rgba(179,135,5,.45); border-radius: var(--ctr-radius);
    background: #fff8dc; color: #5d4700; font-size: 12px; line-height: 1.35; text-align: center; }
.fbs-dev-note strong { color: #403000; font-weight: 650; }

/* Короткие ответы в подвале страницы, над тестовым блоком. Свёрнуты в одну строку;
   вопрос лежит в <summary> — это и подсказка на странице, и готовая структура под поиск. */
.fbs-faq { max-width: 720px; margin: 18px auto 0; text-align: left; font-size: 13px; line-height: 1.5;
    color: #495057; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: var(--ctr-radius);
    padding: 0 14px; }
.fbs-faq summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.fbs-faq summary::-webkit-details-marker { display: none; }
.fbs-faq summary::before { content: ''; flex: none; border: 4px solid transparent;
    border-left-color: currentColor; transition: transform .15s; }
.fbs-faq summary:hover { color: #1a1a1a; }
.fbs-faq details[open] > summary::before { transform: rotate(90deg); }
.fbs-faq > summary { justify-content: center; padding: 7px 0; font-size: 11px; font-weight: 600;
    letter-spacing: .2px; color: #6c757d; }
.fbs-faq[open] > summary { color: #1a1a1a; border-bottom: 1px solid #dee2e6; }
.fbs-faq[open] > summary::before { transform: rotate(90deg); }
.fbs-faq-body { padding: 2px 0 6px; }
.fbs-faq-body > details { border-bottom: 1px solid #e9ecef; }
.fbs-faq-body > details:last-child { border-bottom: 0; }
.fbs-faq-body > details > summary { padding: 7px 2px; font-weight: 600; color: #495057; }
.fbs-faq-body > details[open] > summary { color: #1a1a1a; }
.fbs-faq-body p { margin: 0 0 9px; padding-left: 14px; color: #6c757d; }
.fbs-faq-body b { color: #1a1a1a; font-weight: 600; }

.fbs-alert { background: #f8f9fa; border: 1px solid #dc3545; color: #b02a37; border-radius: var(--ctr-radius);
    padding: 9px 14px; font-size: 13px; margin-top: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.fbs-alert b { display: block; margin-bottom: 2px; }

/* Верх страницы: две зоны рядом — магазин на 70%, сессия Честного Знака на 30%. Живут порознь:
   у каждой свой выход и свой цвет состояния, и погасшая сессия больше не красит карточку кабинета.
   Оттенки — прозрачности системных цветов, новых красок не вводим. */
.fbs-top { width: 74%; min-width: 640px; max-width: 100%; margin: 0 auto 10px;
    display: grid; grid-template-columns: 70fr auto 30fr; gap: 8px; align-items: stretch;
    --cz-h: 131px; }   /* высота зоны ЧЗ при выбранном магазине: под неё же её и фиксируем в списке */
.fbs-store-zone, .fbs-cz { display: flex; flex-direction: column; min-width: 0; padding: 10px 16px 11px;
    border: 1px solid #dee2e6; border-radius: var(--ctr-radius); background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: background .15s, border-color .15s; }
/* Цвет у зон общий и решается разом: зелёные — когда ИНН сходятся и всё заполнено, жёлтые — когда
   чего-то не хватает или связка не подтверждена. Красная бывает только эта зона и только от токена. */
.fbs-store-zone.is-off { background: rgba(220,53,69,.14); border-color: rgba(220,53,69,.5); }
.fbs-store-zone.is-on { background: rgba(30,158,56,.12); border-color: rgba(30,158,56,.55); }
.fbs-store-zone.is-warn { background: rgba(255,193,7,.20); border-color: #ffc107; }
/* Список магазинов: строки стеклянные, а стеклу нужен цветной фон под собой */
.fbs-store-zone.is-pick { background: linear-gradient(158deg, rgba(255,193,7,.13) 0%, rgba(108,117,125,.07) 52%, rgba(30,158,56,.11) 100%); }
/* Значок на шве: сходятся ли ИНН кабинета и организация Честного Знака. Красный он только сам —
   зоны от него бледнеют, но не краснеют: работать можно, просто коды могут оказаться не вашими. */
.fbs-link { align-self: center; display: grid; place-items: center; width: 26px; height: 26px; flex: none;
    border: 1.5px solid rgba(30,158,56,.55); border-radius: 50%; background: #fff; color: #1e9e38;
    font: 800 13px/1 system-ui, sans-serif; cursor: help; box-shadow: 0 1px 3px rgba(0,0,0,.10); }
.fbs-link.no { border-color: rgba(220,53,69,.5); color: #dc3545; }
/* Магазин не выбран: слева список кабинетов во всю высоту, а сессия и значок остаются наверху.
   Отступ значка — ровно половина зоны ЧЗ, поэтому он держится её середины без всякой сетки. */
.fbs-link.top { align-self: start; margin-top: calc((var(--cz-h) - 26px) / 2); }

/* Шапка зоны: слева подпись, справа кнопки. У ЧЗ подпись стоит по центру, а по краям — отсчёт и выход. */
.fbs-zone-h { display: flex; align-items: center; gap: 8px; min-height: 30px; margin-bottom: 3px; }
.fbs-z-l { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #6c757d; }
.fbs-zone-b { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }

/* Карточка кабинета: слева квадрат маркетплейса, справа три строки данных. Квадрат — чёрный с янтарным,
   фирменная пара продукта: брать бренд-цвет маркетплейса значило бы завести в палитру краску,
   которой больше нигде нет, а различать пока всё равно нечего — только WB. */
.fbs-store-row { display: flex; align-items: center; gap: 11px; min-width: 0; }
.fbs-store-main { flex: 1 1 auto; min-width: 0; }
.fbs-mp { display: grid; width: 44px; height: 44px; flex: none; place-items: center; border-radius: var(--ctr-radius);
    background: #212529; color: #ffc107; font: 800 13px/1 system-ui, sans-serif; letter-spacing: .5px; }
.fbs-store-name { font-size: 17px; font-weight: 750; color: #1a1a1a; line-height: 1.25;
    display: flex; align-items: center; gap: 6px; }
.fbs-store-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbs-store-star { color: #f09030; font-size: 14px; flex: none; }
.fbs-store-req { margin-top: 1px; font-size: 13px; color: #495057; line-height: 1.4; }
.fbs-store-req b { color: #1a1a1a; font-weight: 650; }
/* Незаполненная строка: знак вопроса объясняет, зачем реквизит вообще нужен.
   Отрицательные поля по вертикали — чтобы кружок не растягивал строку: без них он выше текста и разводит строки. */
.fbs-qm { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
    margin: -4px 0 -4px 4px; vertical-align: middle;
    border: 1px solid #b38705; border-radius: 50%; background: #fffdf3; color: #b38705;
    font: 800 10px/1 system-ui, sans-serif; cursor: help; }
/* Третья строка — срок токена. Она же единственное место, где кричит любая беда с ключом:
   отдельной пилюли под состояние ключа больше нет, и заводить её заново незачем. */
.fbs-store-tok { margin-top: 1px; font-size: 12px; color: #6c757d; line-height: 1.4; }
.fbs-store-tok.bad { color: #b02a37; font-weight: 650; }
.fbs-store-tok.bad a { color: #b02a37; }
.fbs-store-tok.warn { color: #96690a; }
.fbs-store-tok.warn a { color: #96690a; }
.fbs-dot { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #6c757d; }
.fbs-dot.ok { background: #1e9e38; }
.fbs-dot.warn { background: #ffc107; }
.fbs-dot.bad { background: #dc3545; }

/* Квадратные кнопки зон: обводка называет последствие — жёлтая правит, серая выходит, красная удаляет */
.fbs-sq { display: grid; width: 30px; height: 30px; flex: none; place-items: center; padding: 0;
    border: 1.5px solid #dee2e6; border-radius: var(--ctr-radius); background: #fff; font-size: 14px;
    line-height: 1; color: #495057; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.08);
    transition: border-color .12s, color .12s, background .12s; }
.fbs-sq:active { box-shadow: none; transform: translateY(1px); }
.fbs-sq svg { width: 15px; height: 15px; display: block; pointer-events: none; }
.fbs-sq.edit { border-color: #ffc107; color: #b38705; }
.fbs-sq.edit:hover { background: rgba(255,193,7,.12); color: #1a1a1a; }
.fbs-sq.exit { border-color: #adb5bd; }
.fbs-sq.exit:hover { background: rgba(108,117,125,.12); color: #1a1a1a; }
.fbs-sq.del { border-color: #dc3545; color: #b02a37; }
.fbs-sq.del:hover { background: rgba(220,53,69,.1); }
.fbs-store-acts { display: flex; gap: 6px; flex: none; margin-left: auto; }

/* Магазин выровнен по центру, как соседняя зона ЧЗ. Подпись шапки уходит из потока и ложится
   поверх строки: кнопки остаются справа, а слово стоит по центру плитки, а не после них.
   Значок WB остаётся слева и тоже выходит из потока, зато строка получает одинаковые поля
   с обеих сторон — иначе «центр» съехал бы вправо ровно на ширину значка с отступом. */
.fbs-store-zone .fbs-zone-h { position: relative; }
.fbs-store-zone .fbs-z-l { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; }
.fbs-store-row { padding: 0 55px; }
/* Значок висит на самой плитке, а не на строке текста: так он по центру всей зоны, и его не двигают
   ни число строк, ни звезда в углу. left равен боковому полю зоны — значок стоит там же, где стоял. */
.fbs-store-zone { position: relative; }
.fbs-store-row .fbs-mp { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }
/* Звезда «открывается по умолчанию» — в углу плитки. Из потока, поэтому на значок не влияет вовсе */
.fbs-store-star.corner { position: absolute; top: 7px; left: 9px; font-size: 13px; line-height: 1; }
.fbs-store-main { text-align: center; }
.fbs-store-name { justify-content: center; }

/* Зона Честного Знака: подпись по центру шапки, отсчёт слева, выход справа. Вся плитка — кнопка
   к данным сессии, кроме самого выхода: он ловится раньше по data-store и наверх не всплывает. */
.fbs-cz { cursor: pointer; text-align: center; min-height: var(--cz-h);
    border-color: rgba(30,158,56,.55); background: rgba(30,158,56,.16); }
.fbs-cz.fixed { align-self: start; }
.fbs-cz:hover { border-color: rgba(30,158,56,.8); background: rgba(30,158,56,.26); }
.fbs-cz .fbs-zone-h { position: relative; justify-content: space-between; }
.fbs-cz .fbs-z-l { position: absolute; left: 0; right: 0; text-align: center; color: #2f6b3c; pointer-events: none; }
.fbs-cz-t { font-size: 10.5px; font-weight: 750; line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: .3px; color: #166d28; }
.fbs-cz-t.none { color: #8d9a90; }
.fbs-cz .fbs-zone-b { align-items: center; gap: 1px; }
.fbs-cz-n { font-size: 13px; font-weight: 750; color: #1a1a1a; line-height: 1.3;
    display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; }
.fbs-cz-n span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbs-cz-i { font-size: 12px; color: #4a6b52; line-height: 1.4; }
/* Выход из ЧЗ на цветной плитке: белая подложка, чтобы кнопка не сливалась с заливкой зоны */
.fbs-sq.exit.cz { border-color: rgba(30,158,56,.55); color: #166d28; background: rgba(255,255,255,.7); }
.fbs-sq.exit.cz:hover { border-color: rgba(30,158,56,.9); background: #fff; color: #0f5c1f; }
/* Жёлтый у зоны один на два повода: сессии нет вовсе либо чего-то не хватает — своей товарной группы,
   МОД у магазина, сходства ИНН. Красной эта зона не бывает: подпись жива в любом из этих случаев. */
.fbs-cz.off, .fbs-cz.warn { border-color: #ffc107; background: rgba(255,193,7,.26); }
.fbs-cz.off:hover, .fbs-cz.warn:hover { border-color: #d9a406; background: rgba(255,193,7,.34); }
.fbs-cz.off .fbs-z-l, .fbs-cz.warn .fbs-z-l, .fbs-cz.warn .fbs-cz-t { color: #96690a; }
.fbs-cz.off .fbs-cz-n { color: #b38705; margin-bottom: 5px; }
.fbs-cz.warn .fbs-cz-i { color: #96690a; }
.fbs-cz.warn .fbs-sq.exit.cz { border-color: rgba(217,164,6,.6); color: #96690a; }

/* Список магазинов — то, что видно после выхода из текущего */
.fbs-store-list { display: grid; gap: 6px; margin-bottom: 10px; }
.fbs-store-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.7); border-radius: var(--ctr-radius);
    background: rgba(255,255,255,.6); backdrop-filter: blur(9px) saturate(140%);
    -webkit-backdrop-filter: blur(9px) saturate(140%);
    box-shadow: 0 2px 8px rgba(24,28,33,.09), inset 0 1px 0 rgba(255,255,255,.85);
    transition: background .14s, border-color .14s, box-shadow .14s, transform .14s; }
.fbs-store-item:hover { background: rgba(255,255,255,.86); border-color: rgba(255,193,7,.85);
    transform: translateY(-1px); box-shadow: 0 5px 14px rgba(24,28,33,.14), inset 0 1px 0 #fff; }
.fbs-store-item:active { transform: translateY(0); box-shadow: 0 1px 5px rgba(24,28,33,.12); }
/* Кнопка удаления на стекле тоже полупрозрачна — сплошной белый квадрат выдавал бы подмену материала */
.fbs-store-item .fbs-sq { width: 26px; height: 26px; font-size: 13px;
    background: rgba(255,255,255,.55); box-shadow: none; }
.fbs-store-item .fbs-sq:hover { background: rgba(220,53,69,.14); }
.fbs-store-item .fbs-sq svg { width: 14px; height: 14px; }
.fbs-store-item .fbs-mp { width: 30px; height: 30px; font-size: 11px; }
.fbs-store-item-main { flex: 1; min-width: 0; }
.fbs-store-item-name { font-size: 14px; font-weight: 700; color: #1a1a1a; display: flex; align-items: center; gap: 5px; }
.fbs-store-item-sub { font-size: 12px; color: #6c757d; }

/* Пустое состояние: шаг с Честным Знаком стоит в соседней зоне, здесь остаётся только магазин */
.fbs-store-empty { padding: 4px 0 2px; text-align: center; color: #495057; }
.fbs-store-empty-h { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 5px; }
.fbs-store-empty p { max-width: 540px; margin: 0 auto 12px; font-size: 13px; line-height: 1.5; }

/* Мелкие квадратные кнопки: строки МОД в модалке магазина и ряд МОД в «Заполнить массово».
   Кнопка «?» отсюда ушла вместе с двумя половинами — разъяснять состояние теперь некому. */
.fbs-mini { width: 30px; height: 30px; flex: none; border: 1.5px solid #dee2e6; background: #fff;
    border-radius: var(--ctr-radius); font-size: 15px; font-weight: 600; line-height: 1; color: #495057;
    cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,.08); transition: border-color .12s, color .12s, background .12s; }
/* Пока нет ни одного МОД — над плюсом висит подсказка, а не прячется в наведение */
.fbs-add-wrap { position: relative; display: inline-flex; flex: none; }
.fbs-callout { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
    white-space: nowrap; background: #212529; color: #fff; font-size: 11px; font-weight: 600;
    letter-spacing: .2px; padding: 5px 10px; border-radius: var(--ctr-radius); z-index: 5;
    box-shadow: 0 3px 10px rgba(0,0,0,.25); pointer-events: none; }
.fbs-callout::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #212529; }
.fbs-mini:active { box-shadow: none; transform: translateY(1px); }
.fbs-mini:disabled { opacity: .4; cursor: default; box-shadow: none; }
/* Обводка называет последствие: зелёный добавляет, жёлтый правит, оранжевый отмечает, красный удаляет */
.fbs-mini.edit { border-color: #ffc107; color: #b38705; }
.fbs-mini.edit:hover { background: rgba(255,193,7,.12); color: #1a1a1a; }
.fbs-mini.star { border-color: #f09030; color: #d07020; }
.fbs-mini.star:hover { background: rgba(240,144,48,.12); color: #a85818; }
.fbs-mini.danger { border-color: #dc3545; }
.fbs-mini.danger:hover { background: rgba(220,53,69,.1); color: #b02a37; }
/* Плюс рисуем двумя полосками, а не символом: глиф «+» сидит в своём боксе не по центру,
   и выравнивание flex-ом это не лечит — центрируется строка, а не рисунок внутри неё */
.fbs-mini.add { border-color: #1e9e38; color: #1e9e38; font-size: 0; position: relative; }
.fbs-mini.add::before, .fbs-mini.add::after { content: ''; position: absolute; top: 50%; left: 50%;
    background: currentColor; transform: translate(-50%, -50%); }
.fbs-mini.add::before { width: 13px; height: 2px; }
.fbs-mini.add::after { width: 2px; height: 13px; }
.fbs-mini.add:hover { background: rgba(30,158,56,.1); color: #166d28; border-color: #166d28; }
.fbs-mini.star.on { color: #1a1a1a; border-color: #f09030; background: #f09030; }

.fbs-zone { background: #fff; border: 1px solid #dee2e6; border-radius: var(--ctr-radius);
    padding: 10px 14px; margin-bottom: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: background .15s, border-color .15s; }
/* Состояние зоны читается фоном: жёлтый — идёт выбор, зелёный — выбор сделан, серый — выводить нечего.
   Приглушённого состояния нет: зона, до которой очередь не дошла, скрыта целиком (hidden в скрипте). */
.fbs-zone.is-choosing { background: rgba(255,193,7,.22); border-color: #ffc107; }
.fbs-zone.is-done { background: rgba(30,158,56,.17); border-color: rgba(30,158,56,.55); }
.fbs-zone.is-empty { background: #eef0f2; border-color: rgba(43,48,53,.22); }
/* Зона результата — не карточка: под цвет отдана только панель управления, таблица остаётся на белом.
   Панель зелёная почти всегда: с ней работают постоянно, и жёлтый «идёт выбор» на всю ширину экрана
   читался как предупреждение. Мягкий зелёный — рабочее состояние, насыщенный — выбор сделан.
   «Выводить и возвращать нечего» — не ошибка, а обычный итог поиска, поэтому серый, а не красный:
   красной панель кричала о том, что человек ничего не нарушал. Тот же серый, что у ненужных строк. */
/* Оба зелёных — money-green (#1e9e38) из палитры, разной прозрачности: рабочее состояние светлее,
   «выбор сделан» плотнее. Отдельных hex не заводим, обводка — inset, иначе панель прыгала бы на 2px. */
#resultZone.is-choosing .fbs-controls { background: linear-gradient(180deg, rgba(30,158,56,.06) 0%, rgba(30,158,56,.13) 100%);
    box-shadow: inset 0 0 0 1px rgba(30,158,56,.26), 0 1px 4px rgba(0,0,0,.08); }
#resultZone.is-done .fbs-controls { background: linear-gradient(180deg, rgba(30,158,56,.13) 0%, rgba(30,158,56,.22) 100%);
    box-shadow: inset 0 0 0 1px rgba(30,158,56,.45), 0 1px 4px rgba(0,0,0,.08); }
#resultZone.is-empty .fbs-controls { background: rgba(43,48,53,.07);
    box-shadow: inset 0 0 0 1px rgba(43,48,53,.22), 0 1px 4px rgba(0,0,0,.08); }
/* Единая линия у мелких элементов: #dee2e6 растворялся на подкрашенном фоне панели, и поиск,
   фильтры и пейджер читались как плоские пятна без границ. Кнопкам btn-3d контур рисует --c4. */
#resultZone { --fbs-line: color-mix(in srgb, #6c757d 55%, #fff); }
.fbs-controls select, .fbs-controls input[type="date"] { border-color: var(--fbs-line); }

.fbs-zone-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fbs-zone-row + .fbs-zone-row { margin-top: 8px; }
.grow { flex: 1 1 auto; }

.fbs-field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600;
    letter-spacing: .2px; color: #6c757d; }
.fbs-field select, .fbs-field input { min-width: 220px; font-weight: 400; }
.fbs-label { font-size: 11px; font-weight: 600; letter-spacing: .2px; color: #6c757d; }

.fbs-status { font-size: 13px; color: #495057; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.fbs-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #6c757d; flex: none; }
.fbs-status .dot.ok { background: #1e9e38; }
.fbs-status .dot.warn { background: #ffc107; }
.fbs-status .dot.bad { background: #dc3545; }
.fbs-status small { color: #6c757d; }

.fbs-note { margin-top: 8px; font-size: 13px; background: #f8f9fa; border: 1px solid #ffc107;
    border-radius: var(--ctr-radius); padding: 8px 12px; color: #495057; }
.fbs-note.bad { border-color: #dc3545; color: #b02a37; }
.fbs-hint { font-size: 11px; font-weight: 600; letter-spacing: .2px; color: #6c757d; }
.fbs-hint a { color: #b38705; text-decoration: underline; }
.fbs-hint a:hover { color: #1a1a1a; }
/* Тестовый ряд заметно тише боевых кнопок: он для админа, а не для работы */
.fbs-demo { opacity: .75; }
.fbs-demo:hover { opacity: 1; }

/* Ряд запроса: период слева, файлы отчётов прижаты вправо. Переключателя источников больше нет —
   оба пути стоят рядом и не спорят за один экран, а сам ряд виден всегда, поэтому «шага выбора
   периода» на странице не осталось. */
.fbs-controls-period { flex-wrap: wrap; gap: 6px; }
.fbs-controls-period > .fbs-upload-pick { margin-left: auto; }
.fbs-chip { border: 1px solid var(--fbs-line); background: #fff; border-radius: var(--ctr-radius);
    padding: 4px 10px; font-size: 13px; color: #495057; cursor: pointer; }
.fbs-chip:hover { border-color: #ffc107; }
.fbs-chip.active { background: #212529; color: #fff; border-color: #212529; }
.fbs-chip:focus-visible { outline: 2px solid #1a1a1a; outline-offset: -2px; }
.fbs-dates { display: flex; gap: 6px; }
.fbs-dates input { width: 150px; }
.fbs-drag-overlay { position: fixed; z-index: 1090; inset: 10px; display: grid; place-items: center;
    border: 2px dashed #ffc107; border-radius: var(--ctr-radius); background: rgba(255,255,255,.92);
    pointer-events: none; }
.fbs-drag-overlay div { display: flex; flex-direction: column; gap: 4px; padding: 18px 26px; text-align: center;
    color: #1a1a1a; background: #ffc107; border-radius: var(--ctr-radius); box-shadow: 0 5px 18px rgba(0,0,0,.16); }
.fbs-drag-overlay b { font-size: 16px; }
.fbs-drag-overlay span { font-size: 11px; color: #594500; }

/* Высота слота одна на оба состояния: до поиска в нём подсказка, после — плитки. Значение с запасом
   над естественной высотой плитки (~56px), иначе min-height ничего не выровняет и панель дёрнется. */
.fbs-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px;
    margin: 4px 0 10px; --fbs-num-h: 58px; }
.fbs-num, .fbs-num-hint { min-height: var(--fbs-num-h); }
.fbs-num { border: 1px solid var(--fbs-line); border-radius: var(--ctr-radius); padding: 5px 12px; background: #fff; }
.fbs-num-hint { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--fbs-line); border-radius: var(--ctr-radius); padding: 5px 16px;
    text-align: center; color: #6c757d; font-size: 13px; background: #fff; }
.fbs-num b { display: block; font-size: 1.5rem; line-height: 1.15; color: #495057; font-variant-numeric: tabular-nums; }
.fbs-num span { font-size: 11px; font-weight: 600; letter-spacing: .2px; color: #6c757d; }
/* Индикатор запроса живёт в слоте счётчиков: высота та же, поэтому панель не дёргается. Этапы известны
   заранее и висят списком: идущий — жирным с песочными часами, пройденные — галочкой. Секундомера нет:
   цифра ничего не объясняла, а этап приходит с сервера и говорит, где именно сейчас ждём. */
.fbs-progress { grid-column: 1 / -1; position: relative; isolation: isolate; overflow: hidden;
    min-height: var(--fbs-num-h); border-radius: var(--ctr-radius); }
/* Огонёк по периметру: квадрат из conic-gradient крутится под коробкой, ::after прикрывает середину
   белым и оставляет светиться только рамку в 2px. Квадрат в 140% ширины перекрывает углы на любом угле. */
.fbs-progress::before { content: ""; position: absolute; top: 50%; left: 50%; width: 140%; aspect-ratio: 1;
    z-index: -2; transform: translate(-50%, -50%) rotate(0);
    background: conic-gradient(var(--fbs-line) 0 58%, rgba(30,158,56,.45) 76%, #1e9e38 87%, #7fd694 94%, var(--fbs-line));
    animation: fbs-orbit 2.4s linear infinite; }
.fbs-progress::after { content: ""; position: absolute; inset: 2px; z-index: -1; background: #fff;
    border-radius: calc(var(--ctr-radius) - 2px); }
@keyframes fbs-orbit { to { transform: translate(-50%, -50%) rotate(1turn); } }
.fbs-stages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px 14px;
    min-height: var(--fbs-num-h); padding: 7px 14px; font-size: 13px; color: #adb5bd; text-align: center; }
.fbs-stage::before { content: "\f111"; display: inline-block; margin-right: .45em; font-family: "Font Awesome 6 Free";
    font-weight: 900; font-size: .5em; vertical-align: middle; }
.fbs-stage i { font-style: normal; font-weight: 400; opacity: .75; }  /* «3 из 7» у текущего этапа */
.fbs-stage.done { color: #6c757d; }
.fbs-stage.done::before { content: "\f00c"; font-size: .95em; color: #1e9e38; }
.fbs-stage.now { font-weight: 700; color: #166d28; }
.fbs-stage.now::before { content: "\f252"; font-size: .95em; animation: fbs-hourglass 1.8s ease-in-out infinite; }
@keyframes fbs-hourglass { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } }

.fbs-num.hero { border-color: #1e9e38; }
.fbs-num.hero b { color: #166d28; }
.fbs-num.warn { border-color: #ffc107; }
.fbs-num.warn b { color: #b38705; }
/* Возврат в оборот — операция, обратная выводу, поэтому и цвет у неё свой, не зелёный */
.fbs-num.back { border-color: #3b82d9; }
.fbs-num.back b { color: color-mix(in srgb, #3b82d9 62%, #1a1a1a); }

/* flex-wrap: nowrap обязателен: общий .compact-controls ставит wrap, а тут флекс колоночный — ряды
   тогда считают ширину по своему содержимому, а не по панели, и на телефоне страница ехала вбок. */
.fbs-controls { display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    gap: 8px; padding: 7px 8px; margin-bottom: 8px;
    border-radius: var(--ctr-radius); transition: background .15s; }
/* min-width: 0 у ряда и его частей: панель — колоночный флекс, а у флекс-элемента минимум по умолчанию
   равен ширине содержимого. Из-за этого лента фильтров и поле поиска распирали панель шире экрана. */
.fbs-controls-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.fbs-controls-row > * { min-width: 0; }
.fbs-controls-row:empty { display: none; }
/* Ряд отбора: поиск и фильтры по статусу, прижаты влево. */
.fbs-controls-filters { justify-content: flex-start; }
/* Снизу три колонки: действие прижато влево, массовое заполнение строго по центру
   (не зависит от ширины зелёной кнопки), навигация — вправо. */
.fbs-controls-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
/* justify-self обязателен: без него кнопка растягивается на всю колонку 1fr — это половина панели. */
.fbs-controls-bottom > .fbs-ops { grid-column: 1; justify-self: start; display: flex; gap: 8px; }
/* Ширина одна на оба состояния и на обе кнопки: подпись меняется с «К выводу» на «Вывести из оборота (12)»,
   и без фиксированной ширины панель дёргалась бы при каждом выделении.
   Верх у обеих светло-жёлтый, поэтому текст тёмный с белой подсветкой — как у btn-3d-yellow. */
.fbs-op { min-width: 205px; text-shadow: 0 1px 1px rgba(255,255,255,.45); }
/* Вывод — жёлтый к оранжевому, возврат — жёлтый к зелёному; оба набраны токенами палитры
   (brand-yellow-light, mark-orange*, money-green*). Без выделения цвет приглушён, но остаётся читаемым:
   кнопка ничего не отправляет, однако должна быть видна на панели, а не растворяться в ней.
   С выделением — полная насыщенность и число строк в подписи. */
/* Контур у btn-3d рисует не рамка, а внутренняя тень в цвете --c4. Приглушая кнопку, мы разбавляли
   белым и его — граница пропадала, и кнопка сливалась с панелью. Теперь --c4 всегда полной
   насыщенности: очертания чёткие в любом состоянии, а «выключенность» несёт только заливка. */
.fbs-op-withdraw { color: #343a40 !important;
    --c1: color-mix(in srgb, #ffd54f 54%, #fff); --c2: color-mix(in srgb, #f09030 40%, #fff);
    --c3: color-mix(in srgb, #d07020 42%, #fff); --c4: #a85818; }
.fbs-op-return { color: #343a40 !important;
    --c1: color-mix(in srgb, #ffd54f 48%, #fff); --c2: color-mix(in srgb, #1e9e38 38%, #fff);
    --c3: color-mix(in srgb, #1e9e38 44%, #fff); --c4: #166d28; }
.fbs-op-withdraw.is-armed { color: #1a1a1a !important;
    --c1: #ffd54f; --c2: #f09030; --c3: #d07020; --c4: #a85818; }
.fbs-op-return.is-armed { color: #1a1a1a !important;
    --c1: color-mix(in srgb, #ffd54f 76%, #1e9e38); --c2: color-mix(in srgb, #1e9e38 78%, #ffd54f);
    --c3: #1e9e38; --c4: #166d28; }
.fbs-controls-bottom > .fbs-right { grid-column: 3; justify-self: end; }
.fbs-controls-row { padding: 0; }
.fbs-right { display: flex; align-items: center; gap: 10px; }
/* Вторичное действие — та же клавиша btn-3d, что и зелёная рядом; цвета берём из base.html, не дублируем */
.fbs-data-details { position: relative; grid-column: 2; justify-self: center; }
.fbs-data-details > summary { display: flex; align-items: center; justify-content: center;
    list-style: none; cursor: pointer; white-space: nowrap; }
.fbs-data-details > summary::-webkit-details-marker { display: none; }
.fbs-data-details > summary::after { content: ''; margin-left: 8px; border: 4px solid transparent;
    border-top-color: currentColor; transform: translateY(2px); transition: transform .18s; }
/* Раскрытое состояние = нажатая клавиша, рецепт тот же, что у .btn-3d:active */
.fbs-data-details[open] > summary { transform: translateY(1px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--c2) 92%, #000) 0%, var(--c3) 50%,
        color-mix(in srgb, var(--c3) 84%, #000) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c4) 82%, #000), inset 0 2px 5px rgba(0,0,0,.28),
        0 0 4px rgba(0,0,0,.16); }
.fbs-data-details[open] > summary::after { transform: rotate(180deg) translateY(2px); }
.fbs-data-popover { position: absolute; z-index: 60; top: calc(100% + 7px); left: 50%; display: flex;
    width: min(760px, calc(100vw - 28px)); flex-direction: column; gap: 8px; padding: 10px;
    transform: translateX(-50%); border: 1px solid #c5c5be; border-radius: var(--ctr-radius); background: #fff;
    box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.fbs-data-group { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 10px; }
.fbs-data-group + .fbs-data-group { padding-top: 8px; border-top: 1px solid #e4e4df; }
.fbs-data-label { color: #495057; font-size: 11px; font-weight: 700; letter-spacing: .2px; }
.fbs-data-popover .fbs-bulk { width: 100%; min-width: 0; }
.fbs-data-popover .fbs-place-bar { flex-wrap: wrap; }
/* Поле поиска — «ложбинка»: утоплено внутрь панели, в противоположность выступающим клавишам */
.fbs-search { position: relative; display: flex; align-items: center; }
.fbs-search input { border: 1px solid var(--fbs-line); border-radius: 6px; height: 30px; padding: 0 24px 0 9px;
    font-size: 13px; width: 230px; background: #fff; box-shadow: inset 0 2px 4px rgba(0,0,0,.07); }
.fbs-search button { position: absolute; right: 4px; border: 0; background: none; color: #dc3545;
    font-size: 13px; line-height: 1; cursor: pointer; }
.fbs-filters { display: flex; gap: 5px; flex-wrap: wrap; }
.fbs-filters button { border: 1px solid var(--fbs-line); background: #fff; border-radius: var(--ctr-radius);
    padding: 3px 9px; font-size: 11px; font-weight: 600; letter-spacing: .2px; color: #495057; cursor: pointer; }
.fbs-filters button.active { background: #212529; color: #fff; border-color: #212529; }
.fbs-filters button span { opacity: .65; margin-left: 3px; }
.fbs-stats { font-size: 11px; font-weight: 600; letter-spacing: .2px; color: #6c757d;
    margin-left: auto; font-variant-numeric: tabular-nums; }
.fbs-pager { display: flex; align-items: center; gap: 3px; }
.fbs-pager button { border: 1px solid var(--fbs-line); background: #fff; border-radius: var(--ctr-radius);
    width: 26px; height: 26px; font-size: 13px; line-height: 1; cursor: pointer; color: #495057; }
.fbs-pager button:disabled { opacity: .4; cursor: default; }
.fbs-pager select { width: 68px; margin-left: 4px; }

#fbsGrid { height: auto; min-height: 0; width: 100%; --ag-row-height: 27px !important; --ag-header-height: 29px;
    --ag-row-border-color: rgba(43,48,53,.13); box-shadow: none; border-color: rgba(43,48,53,.18); }
#fbsGrid .ag-root-wrapper { border-color: rgba(43,48,53,.18); border-radius: 0 !important; box-shadow: none; }
#fbsGrid .ag-row { border-bottom: 0; box-shadow: inset 0 -1px 0 rgba(43,48,53,.13) !important; }
#fbsGrid .ag-row:last-child { box-shadow: none !important; }
#fbsGrid .ag-row.fbs-row-ready { background: #e2f3e6 !important; color: #174f27; }
#fbsGrid .ag-row.fbs-row-return { background: rgba(59,130,217,.13) !important;
    color: color-mix(in srgb, #3b82d9 45%, #1a1a1a); }
#fbsGrid .ag-row.fbs-row-action { background: #fff3c7 !important; color: #624800; }
#fbsGrid .ag-row.fbs-row-muted { background: #eef0f2 !important; color: #5d666e; }
#fbsGrid .ag-row.fbs-row-error { background: #f9e2e2 !important; color: #762525; }
#fbsGrid .ag-row-hover::before { background: transparent !important; }
#fbsGrid .ag-row-hover { box-shadow: inset 0 0 0 1px rgba(47,51,55,.34) !important; }
/* Массовое заполнение цен: архив WB их не содержит, а руками по строке — это часы работы */
.fbs-bulk { display: inline-flex; align-items: center; gap: 6px; }
.fbs-bulk input { width: 110px; height: 30px; padding: 0 9px; font-size: 13px; border: 1px solid #dee2e6;
    border-radius: var(--ctr-radius); }
.fbs-bulk input:focus { outline: none; border-color: #ffc107; }
/* Нативному календарю 110px мало: в поле помещается только часть даты */
.fbs-bulk input[type=date] { width: 145px; }
.fbs-status-cell { font-weight: 650 !important; }
/* Чужой вывод — единственный случай, когда мы не знаем, что стало с товаром после отказа */
.fbs-warn { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
    border-radius: 50%; background: #ffc107; color: #1a1a1a; font-size: 10px; font-weight: 700;
    margin-right: 6px; vertical-align: 1px; cursor: help; }
.fbs-cell-action { color: #624800; font-weight: 650 !important; text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 2px; }
/* Код маркировки моноширинным: в пропорциональном шрифте путаются 0/O и 1/l/I, а код сверяют глазами */
.fbs-code { font-family: monospace; font-size: 11px; }
/* Всё содержимое таблицы по центру: колонки узкие и разнородные, левый край читается рвано */
#fbsGrid .ag-cell { padding: 0 3px !important; border-right-color: rgba(43,48,53,.08) !important;
    text-align: center; justify-content: center; font-weight: 500 !important; }
#fbsGrid .ag-cell:first-child { border-left-color: rgba(43,48,53,.08) !important; }
#fbsGrid .ag-header-cell-label { justify-content: center; }
/* products-ag-grid-balham.css делает .ag-cell-value флекс-контейнером, а центрирование включает
   отдельным классом center-cell — он писался под страницу товаров. Во флексе text-align положение
   не двигает, поэтому здесь нужен именно justify-content, иначе всё липнет к левому краю. */
#fbsGrid .ag-cell-wrapper { width: 100%; justify-content: safe center; }
#fbsGrid .ag-cell-value { width: 100%; justify-content: safe center; text-align: center; }
#fbsGrid .ag-cell-inline-editing { justify-content: center; }
#fbsGrid .ag-cell-edit-wrapper, #fbsGrid .ag-cell-editor { width: 100%; }
#fbsGrid .ag-cell-edit-input, #fbsGrid .ag-picker-field-display { text-align: center; }
/* Галочка — самый частый клик на странице: делаем крупнее стандартной и со скруглением,
   чтобы попадать по ней было легче, а угол не выглядел рубленым рядом с закруглёнными кнопками */
#fbsGrid .ag-checkbox-input-wrapper { width: 17px; height: 17px; font-size: 17px; border-radius: 3px; }
#fbsGrid .ag-checkbox-input-wrapper::after { border-radius: 3px; }
#fbsGrid .ag-checkbox-input { cursor: pointer; }
/* Рамку выделения ячейки убираем стилем, а не опцией грида: опция заодно ломала выход из правки —
   редактор цены оставался открытым при клике по соседней ячейке. Правку не трогаем, её рамка нужна. */
#fbsGrid .ag-cell-focus:not(.ag-cell-inline-editing) {
    outline: none !important; box-shadow: none !important; border-color: transparent !important; }
/* Незаполненное — это не красный текст в ячейке, а пустая заготовка поля: место, цена и дата
   выглядят одинаково, и сразу видно, куда кликать, чтобы заполнить.
   Позиция абсолютная, а не поток: ячейка грида — inline-block во всю высоту строки, и блок внутри
   встаёт по базовой линии текста, из-за чего поле съезжало вниз.
   Числа в inset считаются от padding-box, а у ячейки есть прозрачная рамка в 1px — 2px сверху и 3px
   снизу дают на экране 3px и 4px от краёв строки (последний пиксель занимает разделительная линия),
   а самому полю — ровно 20px высоты.
   line-height задаём по внутренней высоте поля (20px минус рамки): `font: inherit` тянет из ячейки
   и строку в 24px, она в поле не помещается и уезжает вниз — у кнопки было 5px сверху против 1px снизу.
   Выпадашки это не касалось: для select Chrome ставит `normal` сам, потому МОД и выглядел ровным. */
#fbsGrid .fbs-cell-select { position: absolute; inset: 2px 3px 3px; box-sizing: border-box; width: auto; height: auto;
    padding: 0 2px; border: 1px solid #dee2e6; border-radius: 6px; background: #fff; font: inherit; line-height: 18px;
    color: inherit; text-align: center; text-align-last: center; cursor: pointer; }
#fbsGrid .fbs-cell-select:hover { border-color: #1a1a1a; }
/* Пунктирная рамка вместо сплошной — поле читается как «ещё не заполнено», а не как ошибка ввода */
#fbsGrid .fbs-cell-select.fbs-cell-empty { border: 1px dashed rgba(176,42,55,.5);
    background: rgba(220,53,69,.07); color: #b02a37; font-weight: 650; }
#fbsGrid .ag-cell:hover .fbs-cell-empty, #fbsGrid .fbs-cell-select.fbs-cell-empty:hover {
    border-style: solid; border-color: #dc3545; background: rgba(220,53,69,.14); }
/* Сам класс остаётся якорем: по нему кнопка вывода находит строку и мигает подсветкой */
#fbsGrid .ag-cell.fbs-cell-need { cursor: pointer; }
/* Куда нас перебросила кнопка вывода: подсветка гаснет сама, задерживать внимание тут нечем */
#fbsGrid .is-blink { animation: fbs-blink 1.2s ease-out; }
@keyframes fbs-blink {
    0%, 100% { background: transparent; }
    15% { background: rgba(220,53,69,.3); }
    60% { background: rgba(220,53,69,.12); }
}
#fbsGrid .ag-cell.fbs-code { cursor: pointer; }
#fbsGrid .ag-cell.fbs-code:hover { text-decoration: underline; }

.fbs-empty { border: 1px dashed #dee2e6; border-radius: var(--ctr-radius); padding: 22px;
    text-align: center; color: #6c757d; font-size: 13px; background: #fff; }

.fbs-history { margin-top: 14px; }
/* Куда смотреть после отправки: журнал внизу страницы, и переход к нему надо заметить */
.fbs-history.is-fresh { animation: fbs-fresh 2.4s ease-out; }
@keyframes fbs-fresh {
    0% { box-shadow: 0 0 0 0 rgba(30,158,56,0); }
    12% { box-shadow: 0 0 0 4px rgba(30,158,56,.35); }
    100% { box-shadow: 0 0 0 4px rgba(30,158,56,0); }
}
.fbs-history table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.fbs-history th { text-align: left; font-weight: 600; color: #6c757d; font-size: 11px; letter-spacing: .2px;
    padding: 5px 7px; border-bottom: 1px solid #dee2e6; }
.fbs-history td { padding: 6px 7px; border-bottom: 1px solid #dee2e6; color: #495057; }
.fbs-history .ok { color: #166d28; }
.fbs-history .bad { color: #b02a37; }
/* Пилюля статуса: ЧЗ отвечает не сразу, поэтому в строке видно и стадию, и время до следующей проверки */
.fbs-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: .2px; border: 1px solid #dee2e6;
    background: #f8f9fa; color: #495057; }
.fbs-pill i { font-style: normal; font-variant-numeric: tabular-nums; opacity: .75; }
.fbs-pill.ok { border-color: #1e9e38; color: #166d28; }
.fbs-pill.bad { border-color: #dc3545; color: #b02a37; }
.fbs-pill.wait { border-color: #ffc107; color: #b38705; }
.fbs-pill.act { cursor: pointer; border-color: #6c757d; color: #495057; }
.fbs-pill.act:hover:not(:disabled) { background: #fff; border-color: #1a1a1a; color: #1a1a1a; }
.fbs-pill.act:disabled { cursor: default; opacity: .55; }

/* Ряд выбора места стоит в панели над таблицей, а не в своей зоне: отдельная зона стоила клика
   на каждом заходе, а место по умолчанию и так проставляется молча. */
.fbs-place-bar #placeSelect { flex: 0 1 260px; min-width: 0; }
.fbs-place-bar .fbs-mini { width: 26px; height: 26px; font-size: 13px; }
/* Объяснение МОД: термин незнакомый, но текста много — держим свёрнутым в аккордеоне */
.fbs-mod-help { max-width: 660px; margin: 8px auto 10px; font-size: 11px; line-height: 1.45; color: #495057;
    background: #f8f9fa; border: 1px solid #dee2e6; border-radius: var(--ctr-radius); padding: 0 12px; }
.fbs-mod-help summary { display: flex; align-items: center; gap: 6px; padding: 7px 0; cursor: pointer;
    font-weight: 600; letter-spacing: .2px; color: #6c757d; list-style: none; }
.fbs-mod-help summary::-webkit-details-marker { display: none; }
.fbs-mod-help summary::before { content: ''; margin-left: 1px; border: 4px solid transparent;
    border-left-color: currentColor; transition: transform .15s; }
.fbs-mod-help summary:hover { color: #1a1a1a; }
.fbs-mod-help[open] summary { color: #1a1a1a; border-bottom: 1px solid #dee2e6; }
.fbs-mod-help[open] summary::before { transform: rotate(90deg); }
.fbs-mod-help-body { padding: 8px 0 10px; }
.fbs-mod-lead { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #dee2e6; color: #1a1a1a; }
.fbs-mod-help-body b { color: #1a1a1a; }
.fbs-mod-steps { margin: 0; padding: 0 0 0 19px; }
.fbs-mod-steps li { margin: 0 0 5px; padding-left: 2px; }
.fbs-mod-note { margin-top: 7px; padding-top: 7px; border-top: 1px solid #dee2e6; }

/* Разбор вставленного токена: категории видно до сохранения, запрос к WB для этого не нужен */
.fbs-key-check { margin-top: 8px; font-size: 11px; line-height: 1.5; border-radius: var(--ctr-radius);
    padding: 8px 11px; border: 1px solid #dee2e6; background: #f8f9fa; color: #495057; }
.fbs-key-check.ok { border-color: #1e9e38; color: #166d28; }
.fbs-key-check.bad { border-color: #dc3545; color: #b02a37; }
.fbs-key-check.warn { border-color: #ffc107; color: #b38705; }  /* сохранить можно, работать нельзя */
.fbs-key-check > b { display: block; margin-bottom: 3px; }
/* Пункт = строка: без отступов между ними и без переносов, как на остальных страницах */
.fbs-cap { line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #6c757d; }
.fbs-cap b { font-weight: 600; }
.fbs-cap.yes { color: #166d28; }
.fbs-cap.no { color: #b02a37; }
.fbs-cap.off { opacity: .7; }
.fbs-cap-note { margin-top: 5px; padding-top: 5px; border-top: 1px solid #dee2e6; color: #6c757d; line-height: 1.45; }

/* Магазин и его МОД редактируются одним черновиком; сервер применяет всё только по общей кнопке. */
.fbs-key-modal { max-width: 620px; }
/* Окно магазина длинное, и сплошная белая простыня в нём читается как один поток. Тело подкрашено,
   а каждый раздел лежит на своей белой подложке — видно, где кончается один и начинается другой. */
.fbs-key-modal .modal-body { background: #eef0f2; }
.fbs-store-head, .fbs-store-mod, .fbs-store-api { padding: 11px 12px; background: #fff;
    border: 1px solid #dee2e6; border-radius: var(--ctr-radius); }
.fbs-store-mod, .fbs-store-api { margin-top: 10px; }
/* Звезда живёт здесь, а не на карточке: она решает не «где я сейчас», а «куда попаду при следующем заходе» */
.fbs-star-toggle { display: flex; align-items: center; gap: 9px; padding: 9px 11px; cursor: pointer;
    border: 1px solid #f09030; border-radius: var(--ctr-radius); background: rgba(240,144,48,.09); font-size: 13px; }
.fbs-star-toggle input { width: 16px; height: 16px; flex: none; accent-color: #f09030; }
.fbs-star-toggle b { font-weight: 700; color: #1a1a1a; }
.fbs-star-toggle small { display: block; margin-top: 1px; color: #6c757d; font-size: 11px; }
/* Отказ ЧЗ по МОД: остаётся на экране, пока его не устранили — тост для такого текста короток */
.fbs-warnbox { margin-top: 10px; padding: 9px 11px; border: 1px solid #ffc107; border-radius: var(--ctr-radius);
    background: #f8f9fa; font-size: 12px; line-height: 1.6; color: #495057; }
.fbs-warnbox b { color: #1a1a1a; }
.fbs-warnbox .wh { display: block; margin-bottom: 4px; color: #b38705; }
.fbs-key-foot { display: flex; align-items: center; gap: 8px; }
.fbs-key-foot-right { display: flex; gap: 8px; margin-left: auto; }
#keyModal input { text-align: center; }
#keyModal .fbs-field > span { color: #1a1a1a; }
.fbs-store-mod-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.fbs-store-mod-title { color: #1a1a1a; font-size: 12px; font-weight: 700; }
.fbs-store-mod-head .btn { flex: none; }
.fbs-store-mod-btns { display: flex; justify-content: center; gap: 7px; }
.fbs-store-mod-add { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 7px; align-items: end;
    margin-top: 9px; padding: 10px 11px; border: 1px solid #ffc107; border-radius: var(--ctr-radius); background: #fffdf3; }
.fbs-store-mod-add .fbs-field input { min-width: 0; }
.fbs-store-place-list { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.fbs-store-place-row { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr) 28px 28px;
    gap: 6px; align-items: center; min-height: 34px; padding: 4px 5px 4px 9px;
    border: 1px solid #dee2e6; border-radius: var(--ctr-radius); background: #f8f9fa; font-size: 11px; }
.fbs-store-place-row .name { overflow: hidden; color: #1a1a1a; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.fbs-store-place-row .value { overflow: hidden; color: #6c757d; text-overflow: ellipsis; white-space: nowrap; }
.fbs-store-place-row.is-editing { border-color: #ffc107; background: #fffdf2; }
.fbs-store-place-empty { padding: 6px 0 1px; color: #6c757d; font-size: 11px; text-align: center; }

/* Инструкция по токену — тот же порядок шагов, что на странице импорта, чтобы не расходились */
.fbs-key-hint { margin-top: 12px; font-size: 11px; line-height: 1.45; color: #495057;
    background: #f8f9fa; border: 1px solid #dee2e6; border-radius: var(--ctr-radius); padding: 0 12px; }
.fbs-key-hint b { color: #1a1a1a; }
.fbs-key-hint summary { padding: 8px 0; cursor: pointer; color: #6c757d; font-weight: 600; }
.fbs-key-hint-body { padding: 0 0 10px; }
.fbs-key-hint-note { margin-top: 7px; padding-top: 7px; border-top: 1px solid #dee2e6; color: #6c757d; }
/* Категории токена — три отдельные галочки в кабинете WB, а строкой подряд они читались как одна
   длинная. Кавычки те же, что у пункта 1, и рисует их CSS: в самом тексте остаются чистые названия,
   их удобнее искать глазами в кабинете и копировать. Цвет и насыщенность кавычек — как у обычного
   текста подсказки, жирное внутри: иначе «ёлочки» спорят за внимание с самим названием */
.fbs-key-hint .fbs-cat { display: inline-block; color: #1a1a1a; font-weight: 700; white-space: nowrap; }
.fbs-key-hint .fbs-cat::before { content: '«'; color: #495057; font-weight: 400; }
.fbs-key-hint .fbs-cat::after { content: '»'; color: #495057; font-weight: 400; }
.fbs-key-hint .fbs-cat + .fbs-cat { margin-left: 5px; }

.fbs-sign .fbs-field { margin: 10px 0; }
.fbs-sign-summary { font-size: 13px; color: #495057; }
.fbs-sign-summary ul { margin: 6px 0 0; padding-left: 18px; }

/* Ручной сканер: плотная рабочая консоль, где строка сканера — главный визуальный якорь. */
.fbs-manual-modal { --manual-line: #d9dde1; max-height: min(760px, calc(100dvh - 24px)); }
#manualScanModal .modal-dialog { width: calc(100% - 24px); max-width: 820px; margin: 12px auto; }
#manualScanModal .modal-header { position: relative; flex: 0 0 auto; justify-content: center; text-align: center; }
#manualScanModal .modal-header .btn-close { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
#manualScanModal .modal-header .fbs-hint { text-align: center; }
.fbs-manual-modal .modal-body { display: flex; min-height: 0; flex-direction: column; padding: 10px 14px; overflow: hidden; background: #f8f9fa; }
#manualScanModal input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
#manualScanModal select, #manualScanModal textarea { text-align: center; }
#manualScanModal select { text-align-last: center; }
#manualScanModal .modal-footer { flex: 0 0 auto; }
#keyModal .modal-footer, #codesModal .modal-footer,
#manualScanModal .modal-footer, #signModal .modal-footer { justify-content: center; }
.fbs-manual-top { display: flex; flex: 0 0 auto; flex-direction: column; justify-content: center; align-items: center; gap: 6px; margin-bottom: 7px; }
.fbs-manual-switch, .fbs-manual-return-kind { position: relative; isolation: isolate; display: inline-grid; grid-template-columns: 1fr 1fr;
    padding: 2px; overflow: hidden; border-radius: var(--ctr-radius); font-size: 11px; font-weight: 650; }
.fbs-manual-switch::before, .fbs-manual-return-kind::before { content: ""; position: absolute; z-index: -1; top: 2px; bottom: 2px; left: 2px;
    width: calc(50% - 2px); border: 1px solid; border-radius: calc(var(--ctr-radius) - 2px); pointer-events: none;
    transition: transform .2s cubic-bezier(.22,1,.36,1), opacity .15s, background-color .2s, border-color .2s, box-shadow .2s; }
.fbs-manual-switch input, .fbs-manual-return-kind input { position: absolute; opacity: 0; pointer-events: none; }
.fbs-manual-switch label, .fbs-manual-return-kind label { min-width: 0; margin: 0; padding: 5px 7px; text-align: center; cursor: pointer;
    opacity: .48; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; transition: color .2s, opacity .2s; }
.fbs-manual-switch input:checked + label, .fbs-manual-return-kind input:checked + label { opacity: 1; }
.fbs-manual-switch input:focus-visible + label, .fbs-manual-return-kind input:focus-visible + label { outline: 2px solid #1a1a1a; outline-offset: 2px; }
.fbs-manual-switch { width: min(100%, 430px); border: 1px solid #c9cdd1; background: #f1f3f5; font-size: 14px; font-weight: 700; }
.fbs-manual-switch label { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 7px 9px; line-height: 1.2; }
.fbs-manual-switch::before { transform: translateX(100%); border-color: rgba(168,88,24,.58); background: rgba(240,144,48,.42);
    box-shadow: 0 2px 5px rgba(168,88,24,.18); }
.fbs-manual-switch:has(#manualReturn:checked)::before { transform: translateX(0); border-color: rgba(22,109,40,.55);
    background: rgba(30,158,56,.42); box-shadow: 0 2px 5px rgba(22,109,40,.18); }
.fbs-manual-switch label { color: #495057 !important; }
.fbs-manual-switch #manualReturn:checked + label { color: #0e4c1b !important; }
.fbs-manual-switch #manualWithdraw:checked + label { color: #71370e !important; }
.fbs-manual-counts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-bottom: 6px; color: #6c757d; font-size: 11px; }
.fbs-manual-counts span { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.fbs-manual-counts span + span::before { content: "·"; margin: 0 8px; color: #adb5bd; font-weight: 400; }
.fbs-manual-counts b { color: #1a1a1a; font-size: inherit; font-weight: 750; font-variant-numeric: tabular-nums; }
.fbs-manual-counts .dup { color: #9d5963; }.fbs-manual-counts .bad { color: #b02a37; }
.fbs-manual-config { flex: 0 0 auto; overflow: hidden; }
.fbs-manual-bulk, .fbs-manual-doc { display: grid; grid-template-columns: 150px 170px minmax(220px, 1fr) auto;
    align-items: end; gap: 7px; padding: 7px; margin: 0; border: 1px solid var(--manual-line);
    border-radius: var(--ctr-radius); background: #fff; }
.fbs-manual-config-title { grid-column: 1 / -1; color: #495057; font-size: 11px; font-weight: 750; text-align: center; }
.fbs-manual-bulk-field, .fbs-manual-doc label { display: flex; flex-direction: column; gap: 3px; margin: 0;
    color: #6c757d; font-size: 10px; font-weight: 650; letter-spacing: .2px; text-align: center; text-transform: uppercase; }
.fbs-manual-apply-toggle { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 13px; margin: 0; cursor: pointer; }
.fbs-manual-apply-toggle input { width: 13px; height: 13px; margin: 0; accent-color: #1e9e38; }
.fbs-manual-bulk-field:has(.fbs-manual-apply-toggle input:checked) .fbs-manual-apply-toggle { color: #166d28; }
.fbs-manual-doc label.is-disabled { opacity: .48; }
.fbs-manual-return-kind { width: min(100%, 330px); border: 1px solid #b8d8bf; background: rgba(30,158,56,.08); }
.fbs-manual-return-kind::before { border-color: rgba(30,158,56,.35); background: rgba(30,158,56,.20);
    box-shadow: 0 2px 5px rgba(22,109,40,.15); backdrop-filter: blur(8px); }
.fbs-manual-return-kind:has(#manualReturnPaid:checked)::before { transform: translateX(100%); border-color: rgba(14,76,27,.52); background: rgba(22,109,40,.42); }
.fbs-manual-return-kind label { color: #166d28; }
.fbs-manual-return-kind #manualReturnPaid:checked + label { color: #0e4c1b; }
.fbs-manual-return-kind.is-disabled { border-color: #d9dde1; background: #f1f3f5; }
.fbs-manual-return-kind.is-disabled::before { opacity: 0; }
.fbs-manual-return-kind.is-disabled label,
.fbs-manual-return-kind.is-disabled input:checked + label { color: #6c757d; opacity: .48; cursor: default; }
.fbs-manual-doc { grid-template-columns: 155px minmax(150px, 1fr) 135px minmax(150px, 1fr); }
.fbs-manual-scan { position: relative; isolation: isolate; flex: 0 0 auto; padding: 7px 9px; border: 1px dashed #b38705; border-radius: var(--ctr-radius); background: #fff9dc;
    transition: background .12s, border-color .12s; }
.fbs-manual-scan::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; background: rgba(30,158,56,0);
    pointer-events: none; transition: background-color .15s; }
.fbs-manual-scan:has(#manualFileBtn:is(:hover,:focus-visible)) { border-color: #1e9e38; }
.fbs-manual-scan:has(#manualFileBtn:is(:hover,:focus-visible))::after { background: rgba(30,158,56,.10); }
.fbs-manual-scan.drag { background: #fff0a3; border-color: #1a1a1a; }
.fbs-manual-scanline { display: flex; justify-content: center; }
.fbs-manual-scanline input { flex: 1; min-width: 0; height: 36px; padding: 4px 14px; border: 2px solid #1a1a1a;
    border-radius: var(--ctr-radius); background: #fff; font: 600 15px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.08); }
.fbs-manual-scanline input::placeholder { color: #b02a37; opacity: 1; text-align: center; }
.fbs-manual-scanline input:focus::placeholder { color: #6c757d; }
.fbs-manual-scanline input:focus { outline: 3px solid rgba(255,193,7,.36); border-color: #b38705; }
.fbs-manual-scan.ok { border-color: #1e9e38; background: rgba(30,158,56,.10); }
.fbs-manual-scan.bad { border-color: #dc3545; background: rgba(220,53,69,.10); }
.fbs-manual-input-warnings { display: grid; gap: 4px; margin-top: 6px; }
.fbs-manual-input-warnings[hidden] { display: none; }
.fbs-manual-input-warnings div { padding: 5px 9px; border: 1px solid #dc3545; border-radius: var(--ctr-radius);
    background: #fff0f2; color: #9d2434; font-size: 11px; font-weight: 650; text-align: center; }
.fbs-manual-input-warnings div::before { content: "\f071"; margin-right: 6px; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.fbs-manual-feedback { min-height: 17px; padding-top: 5px; color: #6c757d; font-size: 11px; font-weight: 600; text-align: center; }
.fbs-manual-scan.ok .fbs-manual-feedback { color: #166d28; }.fbs-manual-scan.bad .fbs-manual-feedback { color: #b02a37; }
.fbs-manual-filebar { display: flex; align-items: center; flex-direction: column; gap: 4px; margin-top: 6px; padding-top: 7px;
    border-top: 1px solid rgba(179,135,5,.25); text-align: center; }
.fbs-manual-tools { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; flex-direction: column; gap: 4px; margin: 6px 0 4px; text-align: center; }
.fbs-manual-checkall { margin: 0; color: #495057; font-size: 12px; font-weight: 650; }
.fbs-manual-checkall input, .fbs-manual-row-check { accent-color: #1e9e38; }
.fbs-manual-tools div { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.fbs-manual-tools button { border: 0; background: transparent; padding: 2px 5px; color: #6c757d; font-size: 11px; text-decoration: underline; }
.fbs-manual-tools button:hover { color: #1a1a1a; }.fbs-manual-tools #manualClear { color: #b02a37; }
.fbs-manual-tools[hidden], .fbs-manual-list[hidden] { display: none; }
.fbs-manual-list { flex: 0 1 auto; min-height: 0; max-height: 270px; overflow: auto; border: 1px solid var(--manual-line);
    border-radius: var(--ctr-radius); background: #fff; }
.fbs-manual-row { display: grid; grid-template-columns: 18px 24px minmax(180px, 1.5fr) minmax(90px, 1fr) 104px 78px 104px 24px;
    align-items: center; gap: 4px; min-height: 30px; padding: 2px 5px; border-bottom: 1px solid #edf0f2; font-size: 10.5px; }
.fbs-manual-row-return { grid-template-columns: 18px 24px minmax(260px, 1.7fr) minmax(150px, 1fr) 24px; }
.fbs-manual-row:last-child { border-bottom: 0; }.fbs-manual-row:hover { background: #fafafa; }
.fbs-manual-row.duplicate, .fbs-manual-row.invalid { background: #fff0f2; }
.fbs-manual-row.blocked { background: #fff7ed; }.fbs-manual-row.fixable { background: #fff9dc; }
.fbs-manual-row-num { color: #8a8f94; text-align: right; font-variant-numeric: tabular-nums; }
.fbs-manual-code { min-width: 0; padding: 0; border: 0; background: transparent; overflow: hidden; text-overflow: ellipsis;
    text-align: left; white-space: nowrap; color: #1a1a1a; font: 600 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.fbs-manual-row.duplicate .fbs-manual-code, .fbs-manual-row.invalid .fbs-manual-code { color: #a12a3a; text-decoration: line-through; }
.fbs-manual-meta { min-width: 0; overflow: hidden; color: #6c757d; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.fbs-manual-meta b { color: #495057; font-weight: 650; }.fbs-manual-meta .from-wb { color: #8a5e00; }
.fbs-manual-row input[type="text"], .fbs-manual-row input[type="date"], .fbs-manual-row select { width: 100%; min-width: 0; height: 24px;
    padding: 1px 4px; border: 1px solid #ced4da; border-radius: var(--ctr-radius); background: #fff; font-size: 10px; }
.fbs-manual-row-return .fbs-manual-row-date, .fbs-manual-row-return .fbs-manual-row-price,
.fbs-manual-row-return .fbs-manual-row-place { display: none; }
.fbs-manual-remove { width: 22px; height: 22px; padding: 0; border: 1px solid transparent; border-radius: var(--ctr-radius);
    background: transparent; color: #b02a37; font-size: 15px; line-height: 1; }.fbs-manual-remove:hover { border-color: #dc3545; background: #fff; }
.fbs-manual-result { flex: 0 0 auto; min-height: 18px; margin-top: 4px; color: #495057; font-size: 11px; text-align: center; }
.fbs-manual-result.ok { color: #166d28; }.fbs-manual-result.bad { color: #b02a37; }
.fbs-manual-copy-pop { position: fixed; z-index: 1090; padding: 4px 8px; border-radius: var(--ctr-radius); background: #1b1b1c;
    box-shadow: 0 4px 12px rgba(0,0,0,.25); color: #fff; font-size: 10px; font-weight: 650; pointer-events: none;
    transform: translate(-50%, -100%); animation: fbs-copy-pop .5s ease-out both; }
@keyframes fbs-copy-pop { 0% { opacity: 0; transform: translate(-50%, -80%); } 18%, 75% { opacity: 1; transform: translate(-50%, -100%); }
    100% { opacity: 0; transform: translate(-50%, -112%); } }
.fbs-danger { margin-top: 10px; font-size: 13px; background: #f8f9fa; border: 1px solid #dc3545;
    color: #b02a37; border-radius: var(--ctr-radius); padding: 8px 11px; }
/* Возврат в оборот: без этой галочки кнопка подписи не оживает — статуса WB для такого решения мало */
.fbs-confirm { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 13px;
    background: #f8f9fa; border: 1px solid #3b82d9; color: color-mix(in srgb, #3b82d9 45%, #1a1a1a);
    border-radius: var(--ctr-radius); padding: 8px 11px; cursor: pointer; }
.fbs-confirm input { margin-top: 2px; }

@media (max-width: 1100px) { .fbs-top { width: 100%; min-width: 0; } }
/* Зоны рядом перестают помещаться раньше остальной страницы: ЧЗ уходит под магазин */
@media (max-width: 900px) { .fbs-top { grid-template-columns: 1fr; } .fbs-link { justify-self: center; } }

@media (max-width: 820px) {
    .fbs-heading span { margin-left: 0; }
    .fbs-field { width: 100%; }
    .fbs-field select, .fbs-field input { min-width: 100%; }
    .fbs-store-mod-head { align-items: stretch; flex-direction: column; }
    .fbs-store-mod-head .btn { align-self: flex-end; }
    .fbs-store-mod-add { grid-template-columns: 1fr; }
    .fbs-store-place-row { grid-template-columns: minmax(0,1fr) 28px 28px; }
    .fbs-store-place-row .value { grid-column: 1; grid-row: 2; }
    .fbs-stats { margin-left: 0; }
    .fbs-search, .fbs-search input { width: 100%; }
    .fbs-controls-filters { flex-wrap: wrap; }
    .fbs-controls-filters .fbs-search { order: -1; }
    .fbs-controls-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; }
    /* На узких экранах раскрытие тянется во всю панель — иначе оно свисает за край кнопки */
    .fbs-controls { position: relative; }
    .fbs-data-details { position: static; }
    .fbs-data-popover { top: calc(100% + 4px); left: 6px; right: 6px; width: auto; transform: none; }
    .fbs-manual-modal { max-height: calc(100dvh - 16px); }
    #manualScanModal .modal-dialog { width: calc(100% - 16px); margin: 8px auto; }
    .fbs-manual-modal .modal-body { padding: 8px; }
    .fbs-manual-top { align-items: stretch; flex-direction: column; }
    .fbs-manual-switch { width: 100%; }.fbs-manual-switch label { padding-inline: 5px; }
    .fbs-manual-counts span + span::before { margin-inline: 5px; }
    .fbs-manual-bulk, .fbs-manual-doc { grid-template-columns: 1fr 1fr; }
    .fbs-manual-return-kind { width: 100%; }.fbs-manual-return-kind label { min-width: 0; }
    .fbs-manual-filebar, .fbs-manual-tools { align-items: stretch; flex-direction: column; }
    .fbs-manual-tools div { justify-content: center; }
    .fbs-manual-row { min-width: 720px; }
    .fbs-manual-row-return { min-width: 520px; }
}

@media (max-width: 520px) {
    .fbs-controls-period { gap: 6px; }
    .fbs-chip { flex: 1 1 auto; }
    .fbs-dates { width: 100%; }
    .fbs-dates input { min-width: 0; width: 50%; }
    .fbs-controls-period > .fbs-upload-pick, .fbs-controls-period > #manualScanBtn { margin-left: 0; width: 100%; }
    /* min-width: 0 обязателен: у флекс-элемента он по умолчанию auto, и лента фильтров вместо
       собственной прокрутки растягивала всю панель по ширине содержимого — страница ехала вбок. */
    .fbs-controls-top .fbs-filters { width: 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
    .fbs-controls-bottom { gap: 8px; }
    /* На узком экране пара кнопок занимает всю строку и делит её поровну — подписи длинные */
    .fbs-controls-bottom > .fbs-ops { width: 100%; }
    .fbs-ops > .fbs-op { flex: 1; min-width: 0; }
    .fbs-controls-period > #searchBtn { flex: 1 0 100%; }
    .fbs-controls-bottom > .fbs-right { width: 100%; justify-content: flex-end; }
    .fbs-data-details { flex: 1; }
    .fbs-data-details > summary { width: 100%; }
    .fbs-data-popover { align-items: stretch; }
    .fbs-data-group { grid-template-columns: 1fr; gap: 5px; }
    .fbs-data-popover .fbs-bulk { align-items: stretch; flex-wrap: wrap; }
    .fbs-data-popover .fbs-place-bar #placeSelect { flex-basis: calc(100% - 116px); }
    .fbs-data-popover #bulkPrice input, .fbs-data-popover #bulkDate input { flex: 1; width: auto; }
}

@media (max-width: 360px) {
    .fbs-controls-bottom { display: grid; grid-template-columns: 1fr; }
    .fbs-controls-bottom > #withdrawBtn, .fbs-data-details { width: 100%; margin: 0; }
    .fbs-controls-bottom > .fbs-right { grid-column: 1; justify-self: stretch; }
    .fbs-data-details { grid-column: 1; }
}


/* Тот же вид, что у соседних мини-кнопок, но с подписью — квадрат 30x30 её не вмещает.
   Рядом со знаком стоит слово, поэтому размер берётся из шкалы: метка 11px, а не «знак вместо буквы» */

/* Тестовые кнопки: тот же аккордеон, что у подсказки МОД. Все четыре держим одной строкой —
   на узком экране она прокручивается вбок, а не разваливается на два ряда разной длины. */
.fbs-demo-box { max-width: 640px; margin: 10px auto; }
.fbs-demo-box .fbs-zone-row { flex-wrap: nowrap; justify-content: center; gap: 6px;
    padding: 8px 0 10px; overflow-x: auto; }
.fbs-demo-box .fbs-zone-row .btn { flex: none; white-space: nowrap; }

/* Автор подачи в общем журнале: почта длинная, режем многоточием — важно «вы» или «не вы» */
.fbs-by { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Микроподтверждение на месте клика: живёт полсекунды и ничего не перекрывает */
.fbs-flash { position: fixed; z-index: 1100; transform: translate(-50%, -100%); pointer-events: none;
    padding: 3px 9px; border-radius: var(--ctr-radius); background: #212529; color: #fff;
    font-size: 11px; font-weight: 600; letter-spacing: .2px; white-space: nowrap;
    box-shadow: 0 3px 10px rgba(0,0,0,.25); opacity: 0; transition: opacity .12s; }
.fbs-flash.on { opacity: 1; }

/* Гостевая витрина. Плашка сверху предупреждает, что и магазин, и таблица — пример; два CTA стоят
   там, где взгляд уже упёрся в конец: под лидом первого экрана и после «коротких ответов». */
.fbs-guest-note { border-color: rgba(38,119,59,.4); background: #edf7ef; color: #1c4527; }
.fbs-guest-note strong { color: #14351d; }
.fbs-guest-note a { color: #14351d; font-weight: 650; }
.fbs-guest-cta { max-width: 820px; margin: 12px auto 0; display: flex; align-items: center;
    justify-content: space-between; gap: 16px; padding: 12px 16px; text-align: left;
    border: 1px solid #cfe4d5; border-radius: var(--ctr-radius); background: #f4faf5; }
.fbs-guest-cta.bottom { margin: 18px auto 0; }
.fbs-guest-cta b { display: block; font-size: 14px; color: #1c4527; }
.fbs-guest-cta span { font-size: 12.5px; color: #4a5b50; line-height: 1.4; }
.fbs-guest-cta .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
    .fbs-guest-cta { flex-direction: column; align-items: stretch; text-align: center; }
}
/* Окно гостя: одна строка и две кнопки, без шапки и подвала — вопрос здесь ровно один */
.fbs-guest-modal { max-width: 380px; }
.fbs-guest-modal .modal-body { padding: 20px; text-align: center; }
.fbs-guest-modal p { margin: 0 0 16px; color: #212529; font-size: 14px; line-height: 1.45; }
.fbs-guest-modal-acts { display: flex; justify-content: center; gap: 10px; }