/* Единая модалка магазина (спека 2026-08-27-unified-store-modal-design.md).
   Внешний вид — под копирку с модалки ФБС: значения те же, префикс свой (sm-),
   чтобы не зависеть от fbs-withdrawal.css и не конфликтовать с ним на странице ФБС. */
.sm-modal { max-width: 620px; }
.sm-modal .modal-body { background: #eef0f2; }
.sm-modal input { text-align: center; }
.sm-modal .modal-footer { justify-content: center; }
.sm-head, .sm-mod { padding: 11px 12px; background: #fff;
    border: 1px solid #dee2e6; border-radius: var(--ctr-radius); }
.sm-mod { margin-top: 10px; }

/* Подпись поля врезана в верхний бордер, как легенда fieldset: фон подписи совпадает с фоном секции */
.sm-field { position: relative; display: block; margin-top: 13px; font-size: 11px; font-weight: 600; }
.sm-field > span { position: absolute; top: -7px; left: 9px; z-index: 1; padding: 0 5px;
    background: #fff; line-height: 1.2; color: #000; white-space: nowrap; }
.sm-field select, .sm-field input { min-width: 220px; font-weight: 400; }
.sm-hint { font-size: 11px; font-weight: 600; letter-spacing: .2px; color: #6c757d; }
.sm-hint a { color: #b38705; text-decoration: underline; }
.sm-hint a:hover { color: #1a1a1a; }

/* Переключатель маркетплейса — как на страницах импорта: чёрный корпус у активного.
   Невыбранная половина — плоский призрак без заливки: пока обе были корпусами, пара читалась
   как две кнопки, и какая схема включена — приходилось угадывать. Выбранная ещё и вдавлена:
   это состояние, а не предложение нажать. */
.sm-mp-tgl { display: inline-flex; }
.sm-mp-tgl button { border: 1.5px solid #dee2e6; background: transparent; font-size: 12px; font-weight: 700;
    color: #8a9199; padding: 3px 16px; cursor: pointer; }
.sm-mp-tgl button:first-child { border-radius: var(--ctr-radius) 0 0 var(--ctr-radius); }
.sm-mp-tgl button:last-child { border-radius: 0 var(--ctr-radius) var(--ctr-radius) 0; border-left: 0; }
.sm-mp-tgl button:not(.active):hover { color: #1a1a1a; border-color: #adb5bd; }
.sm-mp-tgl button.active { background: #212529; border-color: #212529; color: #ffc107;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.45); }

/* Слот звезды — внизу модалки, показывается только когда есть из чего выбирать (≥2 магазинов) */
.sm-star-slot { margin-top: 10px; }
.sm-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; }
.sm-star-toggle input { width: 16px; height: 16px; flex: none; accent-color: #f09030; }
.sm-star-toggle b { font-weight: 700; color: #1a1a1a; }

/* Когда выводить коды. Значение видно и у свёрнутого блока: режим меняет саму выдачу продаж,
   и человек должен знать его, не открывая настройку. Раскрытому оно ни к чему — там пилюля. */
.sm-mode-now { margin-left: auto; font-weight: 700; color: #495057; }
.sm-mode-now.early { color: #b02a37; }
.sm-mode[open] .sm-mode-now { display: none; }
.sm-mode-tgl { display: flex; justify-content: center; margin: 2px 0 9px; }
/* Ранний режим — красный корпус: это не «улучшение», а схема с обязанностью возвращать невыкупы */
.sm-mode-tgl button.active[data-mode="shipped"] { background: #b02a37; border-color: #b02a37; color: #fff; }
/* Два абзаца: суть и цена выбора. Пустая строка между ними — граница между «что будет» и «чем платим» */
.sm-mode-why { text-align: center; }
.sm-mode-why p { margin: 0 0 9px; }
.sm-mode-why p:last-child { margin-bottom: 0; }

/* Ступенчатый замок: блок виден, но выключен, пока не сделан предыдущий шаг.
   pointer-events снимаем с детей, а не с контейнера — на нём живёт объясняющий data-tip */
.sm-locked { opacity: .55; }
.sm-locked > * { pointer-events: none; }

/* Реквизиты в одну строку: ИНН и МОД равными полями, под ними по центру — «Сверить с ЧЗ».
   МОД скрыт (Ozon) — ИНН растягивается на всю строку сам, потому и flex, а не grid */
.sm-req-row { display: flex; gap: 10px; }
.sm-req-row > * { flex: 1 1 0; min-width: 0; }
.sm-req-row .sm-field input { min-width: 0; width: 100%; }
/* Поле МОД: выглядит как инпут; внутри либо выпадашка мест (без своей рамки), либо текст-статус */
.sm-mod-box { display: flex; align-items: center; padding: 3px 8px; min-height: 31px;
    border: 1px solid #ced4da; border-radius: 6px; background: #fff; }
.sm-mod-box select { border: 0; background-color: transparent; min-width: 0; width: 100%;
    padding: 0 18px 0 2px; }
.sm-mod-box select:focus { box-shadow: none; }
/* Пункт-статус в выпадашке МОД: серый до сверки, зелёный «не требуются», красный «отсутствуют» */
.sm-mod-box select.wait { color: #6c757d; }
.sm-mod-box select.ok { color: #145822; font-weight: 650; }
.sm-mod-box select.miss { color: #dc3545; font-weight: 700; }
.sm-chz-row { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
/* Вторая строка кнопки сверки: чья сессия ЧЗ подписывает */
.sm-chz-who { display: block; margin-top: 1px; font-size: 11px; font-weight: 500; line-height: 1.2; opacity: .8; }

.sm-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;
    interpolate-size: allow-keywords; }
.sm-help b { color: #1a1a1a; }
/* Свой треугольник-стрелка: поворот вниз = открыто; у раскрытого подпись «свернуть» справа */
.sm-help summary { display: flex; align-items: center; gap: 7px; padding: 8px 0; cursor: pointer;
    color: #6c757d; font-weight: 600; list-style: none; transition: color .15s; }
.sm-help summary::-webkit-details-marker { display: none; }
.sm-help summary::before { content: ''; flex: none; width: 0; height: 0; border-left: 5px solid currentColor;
    border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .2s; }
.sm-help summary:hover, .sm-help[open] summary { color: #1a1a1a; }
.sm-help[open] summary::before { transform: rotate(90deg); }
.sm-help[open] summary::after { content: 'свернуть'; margin-left: auto; font-weight: 400; color: #8a9199; }
.sm-help[open] summary:hover::after { color: #1a1a1a; text-decoration: underline; }
/* Плавное раскрытие: высота — там, где браузер умеет ::details-content, фейд — везде */
.sm-help::details-content { height: 0; overflow: clip;
    transition: height .25s ease, content-visibility .25s allow-discrete; }
.sm-help[open]::details-content { height: auto; }
.sm-help[open] .sm-help-body { animation: smHelpIn .25s ease; }
@keyframes smHelpIn { from { opacity: 0; transform: translateY(-4px); } }
.sm-help-body { padding: 0 0 10px; }
.sm-help-note { margin-top: 7px; padding-top: 7px; border-top: 1px solid #dee2e6; color: #6c757d; }
.sm-cat { display: inline-block; color: #1a1a1a; font-weight: 700; white-space: nowrap; }
.sm-cat::before { content: '«'; color: #495057; font-weight: 400; }
.sm-cat::after { content: '»'; color: #495057; font-weight: 400; }
.sm-cat + .sm-cat { margin-left: 5px; }

.sm-key-check { margin-top: 8px; font-size: 11px; line-height: 1.5; border-radius: var(--ctr-radius);
    border: 1px solid #dee2e6; background: #f8f9fa; padding: 8px 10px; color: #495057; }
.sm-key-check.ok { border-color: #1e9e38; color: #166d28; }
.sm-key-check.bad { border-color: #dc3545; color: #b02a37; }
#smModal input.sm-bad { border-color: #dc3545; }
.sm-key-check.warn { border-color: #ffc107; color: #b38705; }
.sm-key-check > b { display: block; margin-bottom: 3px; }
/* Однострочный зелёный вердикт WB: жирный срок действия, категории — приглушённо следом */
.sm-key-ok { font-weight: 700; }
.sm-key-dim { color: #6c757d; }
.sm-cap-note { margin-top: 5px; padding-top: 5px; border-top: 1px solid #dee2e6; color: #6c757d; line-height: 1.45; }

/* Шапка секции подключения: слева переключатель маркетплейса, справа чипы доступа к разделам */
.sm-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sm-caps-row { display: flex; align-items: center; gap: 6px; }
/* Знак вопроса про чипы: мини-кнопка в глянце btn-3d, приподнимается на hover.
   Посадка знака жёсткая (line-height), не flex-центр */
.sm-qm { display: inline-block; width: 16px; height: 16px; line-height: 14px; box-sizing: border-box; flex: none;
    text-align: center; border: 1px solid #c28f04; border-radius: 50%;
    background: linear-gradient(180deg, #ffd254, #f5b301); color: #3a2c00;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.2);
    font-size: 11px; font-weight: 800; cursor: help; transition: all .15s; }
.sm-qm:hover { transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(0,0,0,.22); }
/* Стрелка-гид к следующему шагу: объёмный дротик, воткнувшийся в цель — absolute в теле модалки.
   Лёжа (.side, слева) у полей и кнопок: над полем сидит его подпись, врезанная в бордер, а слева
   от кнопки всегда есть место. Стоймя (сверху) — у блоков-инструкций. .foot — тот же дротик лёжа,
   но inline у Сохранить в подвале, где absolute не достаёт (минусовой margin гасит и gap подвала,
   и заход острия).
   .page — гид на самой странице, продолжение цепочки после модалки, координаты от документа */
.sm-modal .modal-body { position: relative; }
.sm-guide { position: absolute; z-index: 6; width: 18px; height: 30px; flex: none; pointer-events: none;
    background: linear-gradient(180deg, #ffd869, #ec8b2c);
    clip-path: polygon(50% 100%, 0 40%, 30.5% 45%, 30.5% 0, 69.5% 0, 69.5% 45%, 100% 40%);
    filter: drop-shadow(0 2px 3px rgba(24,28,33,.25)); animation: smGuideY 1.8s ease-in-out infinite; }
.sm-guide.side { width: 30px; height: 18px; background: linear-gradient(90deg, #ffd869, #ec8b2c);
    clip-path: polygon(100% 50%, 40% 0, 45% 30.5%, 0 30.5%, 0 69.5%, 45% 69.5%, 40% 100%);
    animation: smGuideX 1.8s ease-in-out infinite; }
/* Дротик у кнопки отходит дальше, чем у поля: кнопка не прижата к краю, и остриё в упор мельтешит */
.sm-guide.far { margin-left: -10px; }
.sm-guide.foot { position: relative; align-self: center; margin-right: -2px; }
/* Ниже липкого навбара (1020) и выше рабочей панели (50): при прокрутке дротик страницы
   рисовался поверх шапки — на телефоне она высокая, и стрелки висели прямо на её кнопках */
.sm-guide.page { z-index: 1010; }
/* Снизу цели, остриём вверх: над кнопкой активации ЧЗ сидит шапка зоны, а к кнопкам операций сверху
   вплотную подходит лента фильтров. Ход тот же, что и у верхнего дротика, и делится так же поровну:
   в покое остриё в 3px под кромкой, в дальней точке — на 3px внутри. Раньше этот дротик качался
   только наружу и на кромку не заходил — рядом с верхним это читалось как разная механика */
.sm-guide.up { background: linear-gradient(0deg, #ffd869, #ec8b2c);
    clip-path: polygon(50% 0, 0 60%, 30.5% 55%, 30.5% 100%, 69.5% 100%, 69.5% 55%, 100% 60%);
    animation: smGuideYu 1.8s ease-in-out infinite; }
/* Пара по бокам («+ Добавить магазин»): оба дротика стоят вплотную и качаются наружу, а не внутрь.
   .back — зеркальный, остриём влево */
.sm-guide.side.out { animation: smGuideXo 1.8s ease-in-out infinite; }
.sm-guide.side.back { background: linear-gradient(270deg, #ffd869, #ec8b2c);
    clip-path: polygon(0 50%, 60% 0, 55% 30.5%, 100% 30.5%, 100% 69.5%, 55% 69.5%, 60% 100%);
    animation: smGuideXb 1.8s ease-in-out infinite; }
@keyframes smGuideXo { 50% { transform: translateX(-6px); } }
@keyframes smGuideXb { 50% { transform: translateX(6px); } }
/* Ход 6px пополам: остриё стоит на 3px над целью и заходит внутрь на 3px — покачивается на её кромке.
   Раньше дротик был в цели всегда (4px и 10px) и читался как воткнутый, а не как указывающий. */
@keyframes smGuideY { 50% { transform: translateY(6px); } }
@keyframes smGuideYu { 50% { transform: translateY(-6px); } }
@keyframes smGuideX { 50% { transform: translateX(6px); } }
.sm-foot { display: flex; align-items: center; gap: 8px; }
.sm-foot-right { display: flex; gap: 8px; margin-left: auto; }

/* ==== Выпадашка магазинов (спека 2026-08-27-store-picker-dropdown) ==============================
   Имя магазина в карточке — триггер; сама выпадашка — absolute-оверлей поверх зоны,
   высоту зоны не трогает. Пункты двухрядные: имя, ниже вся доп. инфа в ряд. */
.sp-trig { cursor: pointer; border-radius: var(--ctr-radius); padding: 0 7px; margin: 0 -7px; }
.sp-trig:hover { background: rgba(255,255,255,.8); box-shadow: 0 1px 4px rgba(24,28,33,.12); }
/* Стрелка — янтарный рельефный чип в языке btn-3d, а не серый глиф: она и есть ручка выпадашки */
.sp-caret { display: grid; place-items: center; width: 22px; height: 22px; flex: none;
    font-style: normal; font-size: 11px; line-height: 1; color: #6b5200;
    background: linear-gradient(180deg, #ffd54f 0%, #ffc107 50%, #d9a406 100%); border-radius: 8px;
    box-shadow: inset 0 0 0 1px #b38705, inset 0 1px 0 rgba(255,255,255,.45), 0 1px 3px rgba(0,0,0,.22);
    text-shadow: 0 1px 1px rgba(255,255,255,.4); transition: box-shadow .15s; }
.sp-trig:hover .sp-caret { box-shadow: inset 0 0 0 1px #96690a, inset 0 1px 0 rgba(255,255,255,.62),
    0 0 10px rgba(0,0,0,.28); }
/* Стекло с янтарной обводкой и глубокой тенью: без них выпадашка сливалась с белыми карточками ниже */
.sp-drop { position: absolute; left: 10px; right: 10px; top: calc(42px - var(--sp-add-shift, 0px)); z-index: 60; display: grid; gap: 5px;
    padding: 7px; border: 1.5px solid #ffc107; border-radius: var(--ctr-radius);
    background: rgba(255,255,255,.82); backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 16px 40px rgba(24,28,33,.35), 0 2px 8px rgba(24,28,33,.15); }
/* Плашки — рельефные, как кнопки продукта: градиент, inset-кольцо, блик сверху; ховер приподнимает,
   нажатие вдавливает. Текущий магазин — зелёная плашка, менять его незачем — она без подъёма. */
/* min-width: 0 обязателен: плашка — элемент grid-выпадашки, а у него минимум по умолчанию равен
   ширине содержимого — на телефоне ряды вылезали за край выпадашки и уезжали за экран вместе с чипами */
.sp-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 11px; cursor: pointer;
    border-radius: var(--ctr-radius); background: linear-gradient(180deg, #fff 0%, #f1f3f5 100%);
    box-shadow: inset 0 0 0 1px #d4d9de, inset 0 1px 0 #fff, 0 2px 4px rgba(24,28,33,.14);
    transition: box-shadow .14s, transform .14s, background .14s; }
.sp-item:hover { transform: translateY(-1px);
    background: linear-gradient(180deg, color-mix(in srgb, #ffc107 6%, #fff) 0%, color-mix(in srgb, #ffc107 26%, #fff) 100%);
    box-shadow: inset 0 0 0 1px #ffc107, inset 0 1px 0 #fff, 0 5px 12px rgba(24,28,33,.22); }
.sp-item:active { transform: translateY(1px);
    box-shadow: inset 0 0 0 1px #d9a406, inset 0 2px 4px rgba(0,0,0,.14); }
.sp-item.fit-ok { background: linear-gradient(180deg, color-mix(in srgb, #1e9e38 5%, #fff), color-mix(in srgb, #1e9e38 15%, #fff));
    box-shadow: inset 0 0 0 1px rgba(30,158,56,.55), inset 0 1px 0 #fff, 0 2px 4px rgba(24,28,33,.12); }
.sp-item.fit-warn { background: linear-gradient(180deg, color-mix(in srgb, #ffc107 7%, #fff), color-mix(in srgb, #ffc107 22%, #fff));
    box-shadow: inset 0 0 0 1px rgba(179,135,5,.55), inset 0 1px 0 #fff, 0 2px 4px rgba(24,28,33,.12); }
.sp-item.fit-bad { background: linear-gradient(180deg, color-mix(in srgb, #dc3545 4%, #fff), color-mix(in srgb, #dc3545 14%, #fff));
    box-shadow: inset 0 0 0 1px rgba(220,53,69,.5), inset 0 1px 0 #fff, 0 2px 4px rgba(24,28,33,.12); }
.sp-item.fit-ok:hover { background: linear-gradient(180deg, color-mix(in srgb, #1e9e38 8%, #fff), color-mix(in srgb, #1e9e38 22%, #fff)); }
.sp-item.fit-warn:hover { background: linear-gradient(180deg, color-mix(in srgb, #ffc107 10%, #fff), color-mix(in srgb, #ffc107 30%, #fff)); }
.sp-item.fit-bad:hover { background: linear-gradient(180deg, color-mix(in srgb, #dc3545 7%, #fff), color-mix(in srgb, #dc3545 20%, #fff)); }
/* Демо-магазин в списке: серый, как и его зона. Ниже всех — spOrder не знает такого тона и кладёт в конец */
.sp-item.fit-demo { background: linear-gradient(180deg, color-mix(in srgb, #6c757d 4%, #fff), color-mix(in srgb, #6c757d 14%, #fff));
    box-shadow: inset 0 0 0 1px rgba(108,117,125,.5), inset 0 1px 0 #fff, 0 2px 4px rgba(24,28,33,.12); }
.sp-item.fit-demo:hover { background: linear-gradient(180deg, color-mix(in srgb, #6c757d 7%, #fff), color-mix(in srgb, #6c757d 20%, #fff)); }
.sp-item.fit-demo .sp-sub { color: #5a6268; }
.sp-item.fit-ok .sp-sub { color: #166d28; }
.sp-item.fit-warn .sp-sub { color: #705400; }
.sp-item.fit-bad .sp-sub { color: #b02a37; }
.sp-item.is-current, .sp-item.is-current:hover { transform: none;
    box-shadow: inset 0 0 0 2px #212529, inset 0 1px 0 #fff, 0 3px 7px rgba(24,28,33,.2); }
.sp-mp { display: grid; width: 30px; height: 30px; flex: none; place-items: center; border-radius: var(--ctr-radius);
    background: #212529; color: #ffc107; font: 800 11px/1 system-ui, sans-serif; letter-spacing: .5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 4px rgba(24,28,33,.22); }
.sp-main { flex: 1 1 auto; min-width: 0; text-align: left; }
.sp-name { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: #1a1a1a; }
.sp-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-sub { font-size: 12px; color: #6c757d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-features { display: flex; align-items: center; gap: 3px; flex: none; }
/* Чип-«таблетка» с ✓/✗: глифы рисует ::before, JS-рендеры (store-modal, store-auth) про них не знают.
   Посадка текста без flex-центра: line-height + 1px оптики снизу, иначе строчные проваливаются вниз */
.sp-cap { display: inline-block; height: 16px; line-height: 13px; padding: 0 5px 1px; box-sizing: border-box;
    border: 1px solid transparent; border-radius: 8px; font-size: 11px; font-weight: 750; letter-spacing: .15px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(24,28,33,.12); }
.sp-cap::before { content: '✓'; font-weight: 900; font-size: 10px; margin-right: 3px; }
.sp-cap.import { background: #fff8e1; border-color: #eec826; color: #7d5d02; }
/* .match — то же сопоставление GTIN: имя чипа в store-auth.js и store-modal.js разное */
:is(.sp-cap.gtin, .sp-cap.match) { background: #f5edff; border-color: #b58af2; color: #6427cf; }
.sp-cap.fbs { background: #e3f6e8; border-color: #6fc287; color: #145822; }
.sp-cap.upd { background: #e6f0ff; border-color: #7fa8e8; color: #1c4f9c; }
.sp-cap.off { background: #f6f7f8; border-color: #dfe3e6; color: #adb4ba; box-shadow: 0 1px 2px rgba(24,28,33,.08); }
.sp-cap.off::before { content: '✗'; color: #c8cdd2; }
.sp-picked { display: grid; width: 20px; height: 20px; flex: none; place-items: center; border-radius: 50%;
    background: #212529; color: #ffc107; font-size: 12px; font-weight: 850;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 3px rgba(24,28,33,.22); }
/* Служебная строка: «Добавить» по центру, демо у правого края. Демо выведено из потока, иначе оно
   сдвигало бы центр строки на свою ширину и «Добавить» переставала стоять посередине выпадашки. */
.sp-head { position: relative; display: flex; justify-content: center; }
/* Не во всю ширину выпадашки: короткая плашка по центру, чтобы не спорить с рядами магазинов */
.sp-add { padding: 8px 22px; justify-content: center; font-size: 13px; font-weight: 700; color: #fff;
    background: linear-gradient(180deg, color-mix(in srgb, #1e9e38 82%, #fff) 0%, #1e9e38 55%, #166d28 100%);
    box-shadow: inset 0 0 0 1px #166d28, inset 0 1px 0 rgba(255,255,255,.35), 0 2px 4px rgba(24,28,33,.18);
    text-shadow: 0 1px 1px rgba(0,0,0,.2); }
.sp-add:hover { background: linear-gradient(180deg, color-mix(in srgb, #1e9e38 68%, #fff) 0%, #1e9e38 60%, #166d28 100%);
    box-shadow: inset 0 0 0 1px #166d28, inset 0 1px 0 rgba(255,255,255,.45), 0 5px 12px rgba(24,28,33,.25); }
.sp-add:active { box-shadow: inset 0 0 0 1px #166d28, inset 0 2px 4px rgba(0,0,0,.25); }
/* Тост с несколькими вопросами (сверка магазина с ЧЗ). У каждого вопроса своя пара кнопок; выбранная
   залипает, остальные приглушены — так видно, что уже отвечено, пока окно ждёт ответа на второй вопрос.
   Разделитель между вопросами нужен: без него две пары кнопок читались как четыре кнопки одного. */
.sm-ask-q + .sm-ask-q { margin-top: 11px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.22); }
.sm-ask-q .g-toast-confirm-actions { margin-top: 7px; }
/* Кольцо выбора тёмное, а не белое: кнопки в паре разного тона — левая почти белая, правая тёмная, —
   и белое кольцо на левой было не видно вовсе. Тёмное одинаково читается на обеих и на фоне тоста. */
.sm-ask .g-toast-btn { opacity: .62; transition: opacity .15s, outline-color .15s, transform .15s; }
.sm-ask .g-toast-btn:hover { opacity: .85; }
.sm-ask .g-toast-btn.is-on { opacity: 1; outline: 2px solid #212529; outline-offset: 2px; }

/* Демо — вторая плашка под «Добавить»: серая и прижата к правому краю. «Добавить» держит центр как
   главное действие, а демо стоит в стороне — предлагает посмотреть, а не завести. */
.sp-demo { position: absolute; right: 0; top: 0; padding: 8px 20px; justify-content: center; font-size: 13px; font-weight: 700; color: #f8f9fa;
    background: linear-gradient(180deg, color-mix(in srgb, #6c757d 78%, #fff) 0%, #6c757d 55%, #495057 100%);
    box-shadow: inset 0 0 0 1px #495057, inset 0 1px 0 rgba(255,255,255,.3), 0 2px 4px rgba(24,28,33,.18);
    text-shadow: 0 1px 1px rgba(0,0,0,.2); }
.sp-demo:hover { background: linear-gradient(180deg, color-mix(in srgb, #6c757d 64%, #fff) 0%, #6c757d 60%, #495057 100%);
    box-shadow: inset 0 0 0 1px #495057, inset 0 1px 0 rgba(255,255,255,.4), 0 5px 12px rgba(24,28,33,.25); }
.sp-demo:active { box-shadow: inset 0 0 0 1px #495057, inset 0 2px 4px rgba(0,0,0,.25); }

/* Телефон: чипы возможностей уходят под имя магазина. В одну строку с ними на имя оставалось
   полтора слова — «Одежда и обувь» превращалась в «Одежда и…», а выбирают строку именно по имени.
   Отступ слева равен значку с зазором: чипы встают ровно под именем, а не под квадратом. */
@media (max-width: 640px) {
    .sp-item { flex-wrap: wrap; row-gap: 6px; }
    .sp-features { flex: 1 0 100%; padding-left: 40px; }
    /* На телефоне «Демо-магазин» возвращается в поток и встаёт рядом с «Добавить магазин», обе плашки
       уже. Выведенное из потока демо прижималось к правому краю и наезжало на центрированную соседку:
       на 477px нахлёст 42px (замерено), на 360px они перекрывались бы больше чем наполовину.
       Центр строки при этом теряется, но пара кнопок целиком важнее. */
    .sp-head { gap: 6px; flex-wrap: wrap; }
    .sp-demo { position: static; }
    .sp-add, .sp-demo { padding: 8px 10px; font-size: 12px; }
}

/* ==== Тёмная тема ================================================================================
   Своей темы у витрины магазина нет — она берёт тему страницы, на которой открыта: store-modal.js
   метит <body> атрибутом data-sm-theme перед показом выпадашки и модалки (разделы держат тему
   по-разному, см. skin() там же). Палитра — общий шаблон тёмной темы из DESIGN.md: грунт, стекло,
   три ступени канта, краски ролей прозрачностями. Структура выше пишется один раз на обе темы.
   На странице ФБС свои правила из fbs-theme.css подключены позже и при равном весе перебивают
   эти — вид там прежний, значения совпадают. */
[data-sm-theme="dark"] {
    --smd-card: #171a21;    /* бумага окна */
    --smd-sunk: #12151b;    /* утопленная подложка тела модалки */
    --smd-panel: #1a1e26;   /* секции внутри тела; на этот же тон садится врезанная подпись поля */
    --smd-well: #0f1218;    /* поля ввода */
    --smd-ink: #e8eaee; --smd-soft: #cfd3da; --smd-dim: #9aa3ae; --smd-mute: #7f8791;
    --smd-rim: rgba(255,255,255,.10); --smd-rim-hi: rgba(255,255,255,.20);
    --smd-green: #8fe8a0; --smd-amber: #ffc107; --smd-warn: #ffe08a; --smd-red: #ff9b9b;
}
/* color-scheme обязателен: без него браузер рисует светлыми список select и полосу прокрутки */
[data-sm-theme="dark"] #smModal .modal-content { color-scheme: dark; background: var(--smd-card);
    border-color: var(--smd-rim-hi); color: var(--smd-ink); }
[data-sm-theme="dark"] #smModal :is(.modal-header, .modal-footer) { border-color: var(--smd-rim); }
[data-sm-theme="dark"] #smModal .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }
[data-sm-theme="dark"] .sm-modal .modal-body { background: var(--smd-sunk); }
[data-sm-theme="dark"] :is(.sm-head, .sm-mod) { background: var(--smd-panel); border-color: var(--smd-rim); }
[data-sm-theme="dark"] .sm-field > span { background: var(--smd-panel); color: var(--smd-ink); }
[data-sm-theme="dark"] #smModal :is(input, select) { background-color: var(--smd-well);
    border-color: var(--smd-rim-hi); color: var(--smd-ink); }
[data-sm-theme="dark"] #smModal :is(input, select):focus { border-color: rgba(255,193,7,.55);
    box-shadow: 0 0 0 .2rem rgba(255,193,7,.12); }
[data-sm-theme="dark"] #smModal input[readonly] { background-color: var(--smd-sunk); color: var(--smd-dim); }
[data-sm-theme="dark"] #smModal input.sm-bad { border-color: var(--smd-red); }
[data-sm-theme="dark"] #smModal ::placeholder { color: var(--smd-mute); }
/* Галочка бутстрапа нарисована тёмной — на тёмном поле её не видно, берём светлую. Посадку
   пишем целиком: тёмные темы страниц красят поля сокращением background, а оно сбрасывает
   и повтор, и позицию — от одной background-image галочка расползлась бы плиткой по полю */
[data-sm-theme="dark"] #smModal .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aa3ae' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; }
[data-sm-theme="dark"] .sm-mp-tgl button { border-color: var(--smd-rim-hi); color: var(--smd-dim); }
[data-sm-theme="dark"] .sm-mp-tgl button:not(.active):hover { color: var(--smd-ink); border-color: rgba(255,255,255,.34); }
/* На тёмном корпус выбранного должен быть светлее фона, а не темнее: янтарная плашка с почти
   чёрными чернилами, глянец тот же, что у знака вопроса рядом. Чёрный корпус светлой темы здесь
   сливался с грунтом, и выбранная половина выглядела погашенной рядом с невыбранной.
   Красный корпус ранней схемы («после отгрузки») остаётся своим — он и в темноте читается. */
[data-sm-theme="dark"] .sm-mp-tgl button.active:not([data-mode="shipped"]) {
    background: linear-gradient(180deg, #ffd254, #f5b301); border-color: #c28f04; color: #3a2c00;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
[data-sm-theme="dark"] .sm-hint { color: var(--smd-dim); }
[data-sm-theme="dark"] :is(.sm-hint, .sm-help) a { color: var(--smd-amber); }
[data-sm-theme="dark"] :is(.sm-hint, .sm-help) a:hover { color: var(--smd-ink); }
[data-sm-theme="dark"] .sm-star-toggle { border-color: rgba(240,144,48,.5); background: rgba(240,144,48,.14); }
[data-sm-theme="dark"] .sm-star-toggle b { color: #ffd9ab; }
[data-sm-theme="dark"] .sm-mode-now { color: var(--smd-soft); }
[data-sm-theme="dark"] .sm-mode-now.early { color: var(--smd-red); }
/* Поле МОД: ложбинка держит краску, сама выпадашка внутри остаётся прозрачной */
[data-sm-theme="dark"] .sm-mod-box { background: var(--smd-well); border-color: var(--smd-rim-hi); }
[data-sm-theme="dark"] .sm-mod-box select { background-color: transparent; }
[data-sm-theme="dark"] .sm-mod-box select.wait { color: var(--smd-dim); }
[data-sm-theme="dark"] .sm-mod-box select.ok { color: var(--smd-green); }
[data-sm-theme="dark"] .sm-mod-box select.miss { color: var(--smd-red); }
[data-sm-theme="dark"] .sm-help { background: rgba(0,0,0,.24); border-color: var(--smd-rim); color: var(--smd-soft); }
[data-sm-theme="dark"] .sm-help summary { color: var(--smd-dim); }
[data-sm-theme="dark"] :is(.sm-help b, .sm-cat, .sm-help[open] summary, .sm-help summary:hover) { color: var(--smd-ink); }
[data-sm-theme="dark"] .sm-help[open] summary::after { color: var(--smd-mute); }
[data-sm-theme="dark"] :is(.sm-cat::before, .sm-cat::after) { color: var(--smd-dim); }
[data-sm-theme="dark"] :is(.sm-help-note, .sm-cap-note) { border-top-color: var(--smd-rim); color: var(--smd-dim); }
[data-sm-theme="dark"] .sm-key-check { background: rgba(255,255,255,.05); border-color: var(--smd-rim);
    color: var(--smd-soft); }
[data-sm-theme="dark"] .sm-key-check.ok { border-color: rgba(30,158,56,.55); color: var(--smd-green); }
[data-sm-theme="dark"] .sm-key-check.bad { border-color: rgba(220,53,69,.5); color: var(--smd-red); }
[data-sm-theme="dark"] .sm-key-check.warn { border-color: rgba(217,164,6,.55); color: var(--smd-warn); }
[data-sm-theme="dark"] .sm-key-dim { color: var(--smd-dim); }

/* ── Выпадашка магазинов: тот же грунт, краски строк — прозрачностями поверх него ── */
[data-sm-theme="dark"] .sp-drop { border-color: rgba(217,164,6,.6); background: var(--smd-card);
    /* панель непрозрачная: за ней таблица, размытие тёмного по тёмному даёт только грязь */
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 44px rgba(0,0,0,.62), 0 2px 8px rgba(0,0,0,.45); }
[data-sm-theme="dark"] .sp-drop > .sp-item { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
    box-shadow: inset 0 0 0 1px var(--smd-rim-hi), 0 2px 4px rgba(0,0,0,.35); }
[data-sm-theme="dark"] .sp-drop > .sp-item:hover { background: linear-gradient(180deg, rgba(255,193,7,.14), rgba(255,193,7,.26));
    box-shadow: inset 0 0 0 1px rgba(255,193,7,.6), 0 5px 12px rgba(0,0,0,.45); }
[data-sm-theme="dark"] .sp-drop > .sp-item:active { box-shadow: inset 0 0 0 1px rgba(217,164,6,.7), inset 0 2px 4px rgba(0,0,0,.4); }
[data-sm-theme="dark"] .sp-item.fit-ok { background: linear-gradient(180deg, rgba(30,158,56,.12), rgba(30,158,56,.24));
    box-shadow: inset 0 0 0 1px rgba(30,158,56,.55), 0 2px 4px rgba(0,0,0,.35); }
[data-sm-theme="dark"] .sp-item.fit-warn { background: linear-gradient(180deg, rgba(255,193,7,.10), rgba(255,193,7,.22));
    box-shadow: inset 0 0 0 1px rgba(217,164,6,.55), 0 2px 4px rgba(0,0,0,.35); }
[data-sm-theme="dark"] .sp-item.fit-bad { background: linear-gradient(180deg, rgba(220,53,69,.10), rgba(220,53,69,.22));
    box-shadow: inset 0 0 0 1px rgba(220,53,69,.5), 0 2px 4px rgba(0,0,0,.35); }
[data-sm-theme="dark"] .sp-item.fit-demo { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.10));
    box-shadow: inset 0 0 0 1px var(--smd-rim-hi), 0 2px 4px rgba(0,0,0,.35); }
[data-sm-theme="dark"] .sp-item.fit-ok:hover { background: linear-gradient(180deg, rgba(30,158,56,.18), rgba(30,158,56,.32)); }
[data-sm-theme="dark"] .sp-item.fit-warn:hover { background: linear-gradient(180deg, rgba(255,193,7,.16), rgba(255,193,7,.30)); }
[data-sm-theme="dark"] .sp-item.fit-bad:hover { background: linear-gradient(180deg, rgba(220,53,69,.16), rgba(220,53,69,.30)); }
[data-sm-theme="dark"] .sp-item.fit-demo:hover { background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.16)); }
/* Кольцо текущего магазина было чёрным по белой плашке — на тёмной его не видно вовсе */
[data-sm-theme="dark"] :is(.sp-item.is-current, .sp-item.is-current:hover) {
    box-shadow: inset 0 0 0 2px var(--smd-ink), 0 3px 7px rgba(0,0,0,.45); }
[data-sm-theme="dark"] .sp-name { color: var(--smd-ink); }
[data-sm-theme="dark"] .sp-sub { color: var(--smd-dim); }
[data-sm-theme="dark"] .sp-item.fit-ok .sp-sub { color: var(--smd-green); }
[data-sm-theme="dark"] .sp-item.fit-warn .sp-sub { color: var(--smd-amber); }
[data-sm-theme="dark"] .sp-item.fit-bad .sp-sub { color: var(--smd-red); }
[data-sm-theme="dark"] .sp-item.fit-demo .sp-sub { color: var(--smd-dim); }
[data-sm-theme="dark"] :is(.sp-mp, .sp-picked) { background: #0b0d11; }
/* Чипы разделов: пастельные заливки светлой темы на тёмной панели горят ярче самих строк.
   Только внутри выпадашки и модалки — чипы на карточке магазина одевает сама страница */
[data-sm-theme="dark"] :is(.sp-drop, #smModal) .sp-cap { box-shadow: none; }
[data-sm-theme="dark"] :is(.sp-drop, #smModal) .sp-cap.import { background: rgba(255,193,7,.16);
    border-color: rgba(217,164,6,.6); color: #ffd166; }
[data-sm-theme="dark"] :is(.sp-drop, #smModal) :is(.sp-cap.gtin, .sp-cap.match) { background: rgba(124,58,237,.26);
    border-color: rgba(124,58,237,.65); color: color-mix(in srgb, #7c3aed 40%, #e8eaee); }
[data-sm-theme="dark"] :is(.sp-drop, #smModal) .sp-cap.fbs { background: rgba(30,158,56,.18);
    border-color: rgba(30,158,56,.6); color: var(--smd-green); }
[data-sm-theme="dark"] :is(.sp-drop, #smModal) .sp-cap.upd { background: rgba(59,130,246,.2);
    border-color: rgba(59,130,246,.6); color: #93c5fd; }
[data-sm-theme="dark"] :is(.sp-drop, #smModal) .sp-cap.off { background: rgba(255,255,255,.05);
    border-color: var(--smd-rim); color: var(--smd-mute); }
[data-sm-theme="dark"] :is(.sp-drop, #smModal) .sp-cap.off::before { color: var(--smd-mute); }