/* PicSeller 2.0 — стили модуля «Товары и фото» (js/screens/catalog.js): #/products, #/products/:id, #/products/import,
   #/batch, #/photos. Классы только с префиксом pr-.
   Module "catalog" styles. Only pr--prefixed classes; tokens and components come from base.css.
   Брейкпоинты / breakpoints: 600 · 900 · 1200. Все цвета — через токены (тёмная тема). / All colours via tokens. */

/* ==================================================================
   0. Общие / Shared
   ================================================================== */
.pr-page { min-width: 0; }
.pr-page .page-head > div:first-child { flex: 1 1 420px; }
.pr-crumb-sep { color: var(--faint); }
.pr-card-title { margin: 0; font: 700 16px/1.3 var(--font-head); color: var(--ink); }
.pr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pr-card-sub { margin: -4px 0 10px; }
.pr-sub { display: flex; align-items: center; gap: 8px; margin: 24px 0 12px; font: 700 15px/1.3 var(--font-head); color: var(--ink); }
.pr-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pr-sec-head .section-title { margin-bottom: 4px; }
.pr-sec-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pr-note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.pr-note > .i { flex: none; margin-top: 1px; color: var(--ok); }
.pr-dlg { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pr-thumb-empty { color: var(--muted); background: var(--surface-2); border-style: dashed; }
.thumb.pr-thumb-empty > svg.i { width: 42%; height: 42%; }
.pr-input-err { border-color: var(--err) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 18%, transparent) !important; }
.pr-seg-wide { display: flex; width: 100%; }
.pr-seg-wide > * { flex: 1 1 0; }
.pr-frame { display: block; overflow: hidden; border-radius: 6px; box-shadow: var(--shadow-2); }
.pr-frame > svg { display: block; width: 100%; height: 100%; }
.pr-frame.is-tall { height: 100%; aspect-ratio: 3 / 4; }
.pr-frame.is-wide { width: 100%; aspect-ratio: 16 / 9; }

/* Полоска заполненности / Meter */
.pr-meter { display: block; width: 96px; height: 4px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.pr-meter > i { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
.pr-meter.warn > i { background: var(--warn); }

/* Сводка-счётчики / Summary pills */
.pr-sum { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1.2 var(--font); color: var(--ink-2); white-space: nowrap; }
.pr-sum.ok { color: var(--ok); }
.pr-sum.warn { color: var(--warn); }
.pr-sum.err { color: var(--err); }
.pr-sum.info { color: var(--info); }
.pr-sum-note { white-space: nowrap; }

/* Ключ — значение / Key-value list */
.pr-kv { display: flex; flex-direction: column; margin: 0; border-top: 1px solid var(--line); }
.pr-kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pr-kv dt { color: var(--muted); }
.pr-kv dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; }

/* Автор события / Event author */
.pr-who { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.pr-who-bot { display: inline-grid; }
.pr-who-bot .ps-mark { width: 20px; height: 20px; border-radius: 6px; }

/* Чекбокс-зона 36–40 px / Checkbox hit area */
.pr-check { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-s); cursor: pointer; }
.pr-check:hover { background: var(--surface-2); }
.pr-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); cursor: pointer; }

/* Шаги процесса в окне / Process steps in dialogs */
.pr-run { padding: 6px 0 4px; }
.pr-run-lead { margin: 0; color: var(--ink-2); }
.pr-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pr-steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.pr-steps li.is-done { color: var(--ink-2); }
.pr-steps li.is-cur { color: var(--ink); font-weight: 600; }
.pr-steps-ic { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; }
.pr-steps li.is-done .pr-steps-ic { background: var(--ok-bg); color: var(--ok); }
.pr-steps li.is-cur .pr-steps-ic { color: var(--primary); }
.pr-steps-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.pr-run-bar { display: flex; align-items: center; gap: 12px; }
.pr-run-bar .progress { flex: 1; }
.pr-run-pct { min-width: 38px; text-align: right; font-size: 13px; color: var(--muted); }

/* Списки в окнах / Lists in dialogs */
.pr-mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.pr-mini-list > li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line); min-width: 0; }
.pr-mini-list > li:first-child { border-top: 0; }
.pr-mini-list .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-mini-list a.grow { font-weight: 600; text-decoration: none; }
.pr-radio-list { display: flex; flex-direction: column; gap: 8px; }
.pr-radio-card { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); cursor: pointer; transition: border-color .15s, background-color .15s; }
.pr-radio-card:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--line-2)); }
.pr-radio-card:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 60%, var(--surface)); box-shadow: inset 0 0 0 1px var(--primary); }
.pr-radio-card input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.pr-radio-card .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-radio-card.is-disabled { opacity: .6; cursor: not-allowed; }
.pr-radio-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); color: var(--primary); }

/* Касания на телефоне ≥ 40 px / Touch targets on phones */
@media (max-width: 899px) {
  .pr-page .btn-sm, .pr-dlg .btn-sm { height: 40px; }
  .pr-page .btn-icon.btn-sm, .pr-dlg .btn-icon.btn-sm { width: 40px; }
  .pr-page .chip, .pr-dlg .chip { height: 40px; }
  .pr-page .seg > button, .pr-page .seg > a, .pr-dlg .seg > button, .pr-dlg .seg > a { height: 36px; }
  .pr-page .input-sm, .pr-dlg .input-sm { height: 40px; }
  .pr-check { width: 40px; height: 40px; }
  .pr-copy, .pr-used { min-height: 40px; }
  .pr-bchip { height: 44px; }
  .pr-bchip-x { width: 40px; height: 40px; }
}

/* ==================================================================
   1. Товары / Products list
   ================================================================== */
.pr-attn-strip { align-items: center; margin-bottom: 16px; }
.pr-attn-strip > .callout-body { flex: 1 1 260px; }
@media (max-width: 599px) { .pr-attn-strip { flex-wrap: wrap; } .pr-attn-strip > .btn { margin-left: 30px; } }
.pr-attn-list { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--ink-2); }
.pr-attn-list a { font-weight: 600; color: var(--ink); }
.pr-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; min-width: 0; }
.pr-search { flex: 1 1 220px; max-width: 300px; }
.pr-chip-n { margin-left: 2px; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .pr-chip-n { color: inherit; opacity: .75; }
.pr-shown { white-space: nowrap; }

.pr-table td { padding: 12px 14px; }
.pr-table th { padding: 10px 14px; }
.pr-table th.pr-td-check, .pr-table td.pr-td-check { width: 52px; padding-left: 8px; padding-right: 0; }
.pr-row { cursor: pointer; }
.pr-th-prod { width: 34%; }
.pr-row:focus-within { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.pr-prod { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pr-prod-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pr-prod-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pr-prod-name { font-weight: 600; color: var(--ink); text-decoration: none; }
.pr-prod-name:hover { color: var(--primary); text-decoration: underline; }
.pr-skus { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pr-td-cat { white-space: nowrap; }
.pr-price-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pr-facts-cell { display: flex; flex-direction: column; gap: 6px; }
.pr-facts-n { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.pr-facts-n b { color: var(--ink); }
.pr-td-issue { text-align: center; }
.pr-th-ic { display: inline-flex; color: var(--muted); }
.pr-issue { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: var(--r-pill); background: var(--warn-bg); color: var(--warn); font: 700 12px/1 var(--font); }
.pr-cta-link { display: inline-flex; align-items: center; gap: 4px; font: 600 13px/1.2 var(--font); color: var(--primary); text-decoration: none; white-space: nowrap; }
.pr-cta-link:hover { text-decoration: underline; }
.pr-td-act { width: 1%; padding-right: 10px !important; }

/* Карточки на телефоне / Phone cards */
.pr-mlist { display: none; list-style: none; margin: 0; padding: 0; flex-direction: column; gap: 10px; }
.pr-mcard { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1); }
.pr-mcard.is-selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface)); }
.pr-mcard-link { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding-right: 40px; color: inherit; text-decoration: none; }
.pr-mcard-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.pr-mcard-link:focus-visible { outline: none; }
.pr-mcard-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.pr-mcard-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pr-mcard-name { font-weight: 600; line-height: 1.3; color: var(--ink); }
.pr-mcard-sku { font-size: 12px; color: var(--muted); }
.pr-mcard-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; color: var(--ink-2); }
.pr-mcard-row b { color: var(--ink); font-size: 15px; }
.pr-mcard-check { position: absolute; top: 6px; right: 6px; z-index: 1; width: 40px; height: 40px; }
.pr-mcard-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 899px) {
  .pr-table-wrap { display: none; }
  .pr-mlist { display: flex; }
  .pr-search { max-width: none; flex-basis: 100%; }
  .pr-tb-div, .pr-shown { display: none; }
}

/* Панель массовых действий / Bulk action bar */
.pr-bulk {
  position: fixed; left: calc(50% + var(--side-w) / 2); bottom: 72px; z-index: 62; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; max-width: calc(100vw - var(--side-w) - 32px); padding: 8px 8px 8px 16px;
  border-radius: 14px; background: var(--toast-bg); color: var(--toast-fg); box-shadow: var(--shadow-3); animation: prUp .18s ease;
}
.pr-bulk-n { font-size: 14px; white-space: nowrap; margin-right: 4px; }
.pr-bulk-n b { font-variant-numeric: tabular-nums; }
.pr-bulk-btn { --btn-bg: transparent; --btn-fg: var(--toast-fg); --btn-bd: color-mix(in srgb, var(--toast-fg) 22%, transparent); --btn-bg-h: color-mix(in srgb, var(--toast-fg) 12%, transparent); }
.pr-bulk-x { --btn-bd: transparent; }
@keyframes prUp { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 899px) {
  .pr-bulk { left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + 58px + env(safe-area-inset-bottom)); transform: none; max-width: none; padding: 8px; gap: 6px; animation: none; }
  .pr-bulk-word, .pr-bulk-text { display: none; }
  .pr-bulk-n b { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--toast-fg) 14%, transparent); }
  .pr-bulk .btn-accent { flex: 1 1 auto; height: 40px; }
  .pr-bulk-btn { width: 40px; padding: 0; }
}

/* ==================================================================
   2. Товар / Product page
   ================================================================== */
.pr-hero { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 24px; align-items: start; padding: 20px; margin-bottom: 16px; }
.pr-hero-photo { position: relative; width: 184px; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: #eee8dc; }
.pr-hero-photo > svg { width: 100%; height: 100%; }
.pr-hero-flag { position: absolute; left: 8px; bottom: 8px; }
.pr-hero-nophoto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; background: var(--surface-2); color: var(--muted); font: 600 13px/1.2 var(--font); text-decoration: none; }
.pr-hero-nophoto:hover { color: var(--primary); }
.pr-hero-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pr-hero-top { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; }
.pr-hero-title { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pr-hero-title .page-title { font-size: 26px; }
.pr-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-hero-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.pr-price { font: 800 26px/1 var(--font-head); letter-spacing: -.01em; color: var(--ink); }
.pr-hero-price s { font-size: 16px; }
.pr-hero-price .badge { align-self: center; }
.pr-meta { display: grid; grid-template-columns: repeat(4, max-content); justify-content: start; gap: 8px 36px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.pr-meta dt { margin-bottom: 4px; font: 500 12px/1.3 var(--font); color: var(--muted); }
.pr-meta dd { display: flex; align-items: center; min-height: 26px; margin: 0; font-size: 14px; color: var(--ink); }
.pr-copy { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px; margin-left: -6px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: 600 14px/1.4 var(--font); cursor: pointer; }
.pr-copy .i { color: var(--muted); }
.pr-copy:hover { background: var(--surface-2); }
@media (max-width: 1199px) { .pr-meta { grid-template-columns: repeat(2, max-content); } }
@media (max-width: 899px) {
  .pr-hero { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "ph title" "act act" "price price" "meta meta"; gap: 14px 16px; padding: 16px; }
  .pr-hero-main, .pr-hero-top { display: contents; }
  .pr-hero-photo { grid-area: ph; width: 96px; }
  .pr-hero-flag { left: 4px; bottom: 4px; }
  .pr-hero-title { grid-area: title; align-self: center; }
  .pr-hero-title .page-title { font-size: 21px; }
  .pr-hero-actions { grid-area: act; }
  .pr-hero-actions [data-pr-create] { flex: 1 1 auto; order: 1; }
  .pr-hero-actions [data-pr-more] { order: 2; }
  .pr-hero-actions [data-pr-openwb] { order: 3; flex: 1 1 100%; }
  .pr-hero-price { grid-area: price; }
  .pr-meta { grid-area: meta; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
}

/* Баннер «Нужно внимание» / Attention banner */
.pr-attn { display: flex; gap: 14px; padding: 16px 18px; margin-bottom: 16px; border: 1px solid color-mix(in srgb, var(--warn) 28%, var(--line)); border-radius: var(--r-l); background: var(--warn-bg); }
.pr-attn.info { border-color: color-mix(in srgb, var(--info) 22%, var(--line)); background: var(--info-bg); }
.pr-attn-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--surface); color: var(--warn); box-shadow: var(--shadow-1); }
.pr-attn.info .pr-attn-ic { color: var(--info); }
.pr-attn-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.pr-attn-kicker { font: 700 11px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--warn); }
.pr-attn-title { font: 700 15px/1.4 var(--font-head); color: var(--ink); }
.pr-attn-text { color: var(--ink-2); }
.pr-attn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pr-attn-bar { max-width: 360px; margin-top: 6px; }
[data-pr-diff] .i { transition: transform .15s; }
[data-pr-diff].is-open .i { transform: rotate(180deg); }
.pr-diff { margin-top: 12px; }
.pr-diff-table { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.pr-diff-row { display: grid; grid-template-columns: minmax(0, 2.2fr) 88px 104px minmax(0, 1.6fr); align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 14px; }
.pr-diff-th { border-top: 0; background: var(--surface-2); font: 600 12px/1.3 var(--font); color: var(--muted); }
.pr-diff-where { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.pr-diff-where > .i { flex: none; margin-top: 2px; color: var(--muted); }
.pr-diff-where > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 699px) {
  .pr-attn { padding: 14px; gap: 12px; }
  .pr-diff-th { display: none; }
  .pr-diff-row { grid-template-columns: auto auto minmax(0, 1fr); gap: 6px 12px; }
  .pr-diff-where, .pr-diff-row > :last-child { grid-column: 1 / -1; }
}

/* Вкладки и факты / Tabs and facts */
.pr-ptabs { margin: 8px 0 20px; }
.pr-facts { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.pr-fact { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 158px auto; align-items: center; gap: 14px; min-height: 60px; padding: 10px 10px 10px 16px; border-top: 1px solid var(--line); }
.pr-fact:first-child { border-top: 0; }
.pr-fact:hover { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.pr-fact.is-unconfirmed { background: color-mix(in srgb, var(--warn-bg) 50%, var(--surface)); }
.pr-fact-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
.pr-fact-main { min-width: 0; }
.pr-fact-text { font-weight: 500; color: var(--ink); }
.pr-fact-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.pr-fact-used { display: flex; }
.pr-used { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; margin-left: -8px; border: 0; border-radius: var(--r-s); background: none; color: var(--ink-2); font: 500 13px/1.3 var(--font); white-space: nowrap; cursor: pointer; }
.pr-used .i { color: var(--muted); }
.pr-used:hover { background: var(--surface-2); color: var(--ink); }
.pr-fact-acts { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.pr-fact.is-editing .pr-fact-meta, .pr-fact.is-editing .pr-fact-used, .pr-fact.is-editing .pr-fact-acts { display: none; }
.pr-fact.is-editing .pr-fact-main { grid-column: 2 / -1; }
.pr-fact.is-editing { background: var(--surface); }
.pr-fact-edit { display: flex; flex-direction: column; gap: 8px; }
.pr-fact-edit-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 1099px) {
  .pr-fact { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "ic main acts" "ic meta meta" "ic used used"; gap: 6px 12px; padding: 12px 10px 12px 14px; }
  .pr-fact-ic { grid-area: ic; align-self: start; }
  .pr-fact-main { grid-area: main; align-self: center; }
  .pr-fact-meta { grid-area: meta; justify-content: flex-start; }
  .pr-fact-used { grid-area: used; }
  .pr-fact-acts { grid-area: acts; }
  .pr-fact.is-editing .pr-fact-main { grid-column: 2 / -1; }
}
@media (max-width: 599px) {
  .pr-fact { grid-template-areas: "ic main main" "ic meta meta" "ic used acts"; }
  .pr-fact-acts { align-self: center; }
}

/* Фото товара / Product photos */
.pr-ph-group .pr-sub:first-child { margin-top: 8px; }
.pr-ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
.pr-ph { display: flex; flex-direction: column; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1); }
.pr-ph-img { position: relative; aspect-ratio: 1; background: #eee8dc; }
.pr-ph-img > svg { width: 100%; height: 100%; }
.pr-ph-flags { position: absolute; left: 8px; top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.pr-ph-cap { display: flex; align-items: center; gap: 8px; padding: 8px 6px 8px 12px; }
.pr-ph-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pr-ph-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; font-size: 14px; color: var(--ink); }
.pr-ph-add, .pr-mat-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 176px; padding: 16px;
  border: 1.5px dashed var(--line-2); border-radius: var(--r-l); background: transparent; color: var(--ink-2); font: inherit; text-align: center; text-decoration: none; cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.pr-ph-add .i, .pr-mat-add .i { color: var(--primary); }
.pr-ph-add:hover, .pr-mat-add:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--ink); }
.pr-ph-add.is-busy { border-style: solid; cursor: progress; }
.pr-ph-add-bar { width: 80%; }
@media (max-width: 599px) { .pr-ph-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pr-ph-add, .pr-mat-add { min-height: 150px; } }

/* Материалы товара / Product materials */
.pr-mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.pr-mat { display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none; }
.pr-mat-pv { display: grid; place-items: center; height: 196px; padding: 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pr-mat-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; min-width: 0; }
.pr-mat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pr-mat-title { font: 700 15px/1.3 var(--font-head); color: var(--ink); }
.pr-mat-meta { display: flex; align-items: center; gap: 6px; }
.pr-mat-meta .i { color: var(--muted); }
.pr-mat-reason { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.35; color: var(--warn); }
.pr-mat-reason .i { flex: none; margin-top: 1px; }
.pr-mat-add { min-height: 300px; }

/* Каналы товара / Product channels */
.pr-chl { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.pr-chl-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 18px; border-top: 1px solid var(--line); }
.pr-chl-row:first-child { border-top: 0; }
.pr-chl-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); }
.pr-chl-ic.is-ok { background: var(--ok-bg); color: var(--ok); }
.pr-chl-ic.is-warn { background: var(--warn-bg); color: var(--warn); }
.pr-chl-ic.is-info { background: var(--info-bg); color: var(--info); }
.pr-chl-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pr-chl-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pr-chl-top b { font: 700 15px/1.3 var(--font-head); color: var(--ink); }
.pr-chl-line { font-size: 14px; color: var(--ink-2); }
.pr-chl-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
@media (max-width: 899px) {
  .pr-chl-row { grid-template-columns: 40px minmax(0, 1fr); gap: 10px 14px; padding: 14px; }
  .pr-chl-ic { width: 40px; height: 40px; }
  .pr-chl-acts { grid-column: 2; justify-content: flex-start; }
}

/* История / Timeline */
.pr-tl-wrap { padding-top: 10px; }
.pr-tl-day { margin: 18px 0 10px; font: 700 12px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pr-tl-day:first-child { margin-top: 4px; }
.pr-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pr-tl-item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.pr-tl-item::before { content: ''; position: absolute; left: 15.5px; top: 36px; bottom: 4px; width: 1px; background: var(--line); }
.pr-tl-item:last-child { padding-bottom: 4px; }
.pr-tl-item:last-child::before { display: none; }
.pr-tl-ic { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); color: var(--ink-2); }
.pr-tl-ic.is-ok { border-color: transparent; background: var(--ok-bg); color: var(--ok); }
.pr-tl-ic.is-warn { border-color: transparent; background: var(--warn-bg); color: var(--warn); }
.pr-tl-ic.is-err { border-color: transparent; background: var(--err-bg); color: var(--err); }
.pr-tl-ic.is-info { border-color: transparent; background: var(--info-bg); color: var(--info); }
.pr-tl-ic.is-mock { border-color: transparent; background: var(--mock-bg); color: var(--mock); }
.pr-tl-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 5px; }
.pr-tl-title { font-weight: 600; color: var(--ink); }
.pr-tl-diff { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.pr-tl-diff s { color: var(--muted); }
.pr-tl-diff .i { color: var(--muted); }
.pr-tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Окна товара / Product dialogs */
.pr-upd-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--surface-2); }
.pr-upd-price { display: flex; align-items: center; gap: 12px; margin-top: 4px; font: 800 24px/1.1 var(--font-head); color: var(--ink); }
.pr-upd-price s { font-weight: 600; color: var(--muted); }
.pr-upd-price .i { color: var(--muted); }
.pr-upd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-upd-item { display: grid; grid-template-columns: auto 36px minmax(0, 1.6fr) auto minmax(0, 1.2fr); align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.pr-upd-item:hover { border-color: var(--line-2); background: var(--surface-2); }
.pr-upd-item input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.pr-upd-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
.pr-upd-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-upd-diff { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; }
.pr-upd-diff s { color: var(--muted); }
.pr-upd-diff .i { color: var(--muted); }
.pr-upd-fact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); }
.pr-upd-fact s { color: var(--muted); }
@media (max-width: 699px) {
  .pr-upd-item { grid-template-columns: auto 36px minmax(0, 1fr); }
  .pr-upd-diff, .pr-upd-act { grid-column: 3; }
}
.pr-ff-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pr-ff-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-ff-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.pr-ff-item:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 50%, var(--surface)); }
.pr-ff-item input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--primary); }
.pr-ff-item > .grow { display: flex; flex-direction: column; gap: 3px; }
.pr-ff-item.is-dup { background: var(--surface-2); cursor: default; }
.pr-ff-q { color: var(--ink); }
.pr-ff-q mark { padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 70%, transparent); color: var(--on-accent); }
.pr-ff-wait { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.pr-fh-fact { display: flex; align-items: center; gap: 12px; font-size: 16px; }

/* Маленькая зона загрузки / Small drop zone */
.pr-drop-sm { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px dashed var(--line-2); border-radius: var(--r); background: var(--surface); }
.pr-drop-sm > .i { flex: none; color: var(--primary); }
.pr-drop-sm > span { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pr-drop-sm.has-files { border-style: solid; border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 50%, var(--surface)); }
@media (max-width: 599px) { .pr-drop-sm { flex-wrap: wrap; } .pr-drop-sm .btn { flex: 1 1 100%; } }

/* ==================================================================
   3. Импорт / Import
   ================================================================== */
.pr-imp-tabs { margin-bottom: 20px; }
.pr-imp-steps { margin-bottom: 16px; }
.pr-imp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.pr-imp-grid-sku { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
@media (max-width: 1099px) { .pr-imp-grid, .pr-imp-grid-sku { grid-template-columns: minmax(0, 1fr); } }
.pr-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 300px; padding: 28px 20px;
  border: 2px dashed var(--line-2); border-radius: var(--r-l); background: var(--surface); text-align: center; transition: border-color .15s, background-color .15s;
}
.pr-drop.is-over { border-color: var(--primary); background: var(--primary-soft); }
.pr-drop.is-busy { border-style: solid; }
.pr-drop-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--primary-soft); color: var(--primary); }
.pr-drop-title { font: 700 18px/1.3 var(--font-head); color: var(--ink); }
.pr-drop-progress { display: flex; flex-direction: column; gap: 8px; width: min(360px, 100%); margin-top: 6px; text-align: left; }
.pr-drop-file { display: flex; align-items: center; gap: 8px; }
.pr-drop-file .i { color: var(--ok); }
.pr-help-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.pr-help-list li { display: flex; gap: 8px; }
.pr-help-list .i { flex: none; margin-top: 3px; color: var(--ok); }
.pr-imp-help .pr-card-title { margin-bottom: 6px; }

.pr-file { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 14px; margin-bottom: 16px; }
.pr-file > .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-file-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--ok-bg); color: var(--ok); }
.pr-file-sum { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pr-file-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-map-grid { display: grid; grid-template-columns: minmax(0, 410px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1199px) { .pr-map-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .pr-file-acts { width: 100%; } .pr-file-acts .btn { flex: 1 1 auto; } }
.pr-map-card, .pr-rows-card { padding: 16px; }
.pr-map { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pr-map-row { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 168px) 22px; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.pr-map-row:first-child { border-top: 0; padding-top: 2px; }
.pr-map-src { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pr-map-col { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--surface-2); color: var(--muted); font: 700 11px/1 var(--mono); }
.pr-map-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pr-map-name b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pr-map-arrow { display: inline-flex; color: var(--faint); }
.pr-map-sel { min-width: 0; padding-right: 30px; background-position: right 8px center; }
.pr-map-st { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.pr-map-st.ok { background: var(--ok-bg); color: var(--ok); }
.pr-map-st.warn { background: var(--warn-bg); color: var(--warn); }
.pr-map-row.is-warn .pr-map-sel { border-color: color-mix(in srgb, var(--warn) 55%, var(--line-2)); }
.pr-map-note { grid-column: 1 / -1; margin-top: -2px; padding-left: 30px; font-size: 12px; color: var(--warn); }
.pr-rows-wrap { margin: 0 -16px -16px; overflow-x: auto; border-top: 1px solid var(--line); }
.pr-rows { font-size: 13.5px; }
.pr-rows th { position: static; padding: 9px 12px; }
.pr-rows td { padding: 8px 12px; }
.pr-rows tr.is-warn td { background: color-mix(in srgb, var(--warn-bg) 60%, transparent); }
.pr-rows-n { white-space: nowrap; }
.pr-rows-n > * { vertical-align: middle; }
.pr-rowst { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; }
.pr-rowst.ok { background: var(--ok-bg); color: var(--ok); }
.pr-rowst.warn { background: var(--warn-bg); color: var(--warn); }
.pr-rows-prod { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pr-rows-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-rows-name { font-weight: 600; color: var(--ink); }
.pr-rows-name .badge { margin-left: 4px; }
.pr-rows-warn { font-size: 12px; line-height: 1.35; color: var(--warn); }
.pr-rows-found, .pr-rows-sku { white-space: nowrap; color: var(--ink-2); }
@media (max-width: 699px) {
  .pr-map-row { grid-template-columns: minmax(0, 1fr) 22px; gap: 6px 8px; }
  .pr-map-arrow { display: none; }
  .pr-map-sel { grid-column: 1; grid-row: 2; }
  .pr-map-st { grid-column: 2; grid-row: 1 / span 2; }
  .pr-map-note { padding-left: 0; }
  .pr-rows thead { display: none; }
  .pr-rows, .pr-rows tbody { display: block; }
  .pr-rows tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .pr-rows tr.is-warn { background: color-mix(in srgb, var(--warn-bg) 60%, transparent); }
  .pr-rows tr.is-warn td { background: none; }
  .pr-rows td { padding: 0; border: 0; }
  .pr-rows td.pr-rows-n { grid-row: 1 / span 3; }
  .pr-rows td:nth-child(2) { grid-column: 2 / 4; }
  .pr-rows td.pr-rows-sku { grid-column: 2; }
  .pr-rows td.num { grid-column: 3; }
  .pr-rows td.pr-rows-found { grid-column: 2 / 4; white-space: normal; }
}

.pr-sku-form .field { margin-bottom: 12px; }
.pr-sku-empty .empty { padding: 32px 12px; border: 0; }
.pr-found { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-found-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); }
.pr-found-row > .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-found-row.is-miss { background: color-mix(in srgb, var(--err-bg) 50%, transparent); }
.pr-found-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.pr-found-meta .i { color: var(--muted); }
@media (max-width: 599px) { .pr-found-row { flex-wrap: wrap; } .pr-found-row > .badge { margin-left: 60px; } }

.pr-store-form { margin-bottom: 16px; }
.pr-store-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.pr-store-row .field { flex: 1 1 320px; }
.pr-store-sub { justify-content: space-between; margin-top: 10px; }
.pr-store-wait { display: flex; flex-direction: column; gap: 8px; }
.pr-store-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 12px; }
.pr-store-head > .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-store-logo { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #F7F3EC; }
.pr-store-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.pr-store-item { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pr-store-item:hover { border-color: var(--line-2); }
.pr-store-item.is-on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.pr-store-item input { position: absolute; top: 16px; right: 16px; z-index: 1; width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.pr-store-img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r); background: #eee8dc; }
.pr-store-img > svg { width: 100%; height: 100%; }
.pr-store-name { font-weight: 600; font-size: 13.5px; line-height: 1.3; color: var(--ink); }
.pr-store-meta { font-size: 12px; color: var(--muted); }
.pr-store-item .badge { align-self: flex-start; margin-top: auto; }
@media (max-width: 599px) { .pr-store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .pr-store-row .btn { flex: 1 1 100%; } }

.pr-impbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1); }
.pr-impbar-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; min-width: 0; }
.pr-impbar-acts { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 599px) { .pr-impbar-acts, .pr-impbar-acts .btn { flex: 1 1 auto; } }

/* ==================================================================
   4. Сборка для нескольких товаров / Batch
   ================================================================== */
.pr-btabs { margin-bottom: 20px; }
.pr-bgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 1099px) { .pr-bgrid { grid-template-columns: minmax(0, 1fr); } }
.pr-baside { position: sticky; top: calc(var(--top-h) + 16px); display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1099px) { .pr-baside { position: static; } }
.pr-bmain { min-width: 0; }
.pr-bsec-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.pr-bsec-n { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font: 700 13px/1 var(--font); }
.pr-bchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pr-bchip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 40px; padding: 0 4px 0 6px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); font: 500 13.5px/1 var(--font); color: var(--ink); }
.pr-bchip .thumb { border-radius: 50%; }
.pr-bchip-x { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.pr-bchip-x:hover { background: var(--surface-2); color: var(--ink); }
.pr-bwarn { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding: 10px 12px; border-radius: var(--r); background: var(--warn-bg); font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.pr-bwarn p { display: flex; gap: 8px; margin: 0; }
.pr-bwarn .i { flex: none; margin-top: 2px; color: var(--warn); }
.pr-recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 16px; }
.pr-recipe { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r); cursor: pointer; transition: border-color .15s, background-color .15s; }
.pr-recipe:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--line-2)); }
.pr-recipe.is-on, .pr-recipe:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 60%, var(--surface)); box-shadow: inset 0 0 0 1px var(--primary); }
.pr-recipe input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--primary); }
.pr-recipe-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pr-rcp { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pr-rcp-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pr-rcp-row > .select { max-width: 380px; }
.pr-rcp-k { font: 600 13px/1.3 var(--font); color: var(--ink-2); }
.pr-rcp-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.pr-inline-field { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.pr-inline-field .select { width: auto; min-width: 176px; }
.pr-rcp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; }
.pr-rcp-foot > .muted { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 599px) { .pr-rcp-row { grid-template-columns: minmax(0, 1fr); gap: 8px; } .pr-inline-field { flex-wrap: wrap; } }
.pr-best-big { font: 800 34px/1 var(--font-head); letter-spacing: -.02em; color: var(--ink); }
.pr-zip-hint code { font-size: 11.5px; }

.pr-brun-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pr-brun-top > .grow { flex: 1 1 320px; }
.pr-brun-state { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.pr-brun-state > .i { color: var(--ok); }
.pr-brun-state > .spinner { color: var(--primary); }
.pr-brun-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-brun-bar { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; }
.pr-brun-bar .progress { flex: 1; height: 10px; }
.pr-brun-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.pr-brows { overflow: hidden; }
.pr-brow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.75fr) 108px 124px; align-items: center; gap: 14px; min-height: 60px; padding: 9px 16px; border-top: 1px solid var(--line); }
.pr-brow-th { min-height: 0; padding-top: 10px; padding-bottom: 10px; border-top: 0; background: var(--surface-2); font: 600 12px/1.3 var(--font); color: var(--muted); }
.pr-brow-prod { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pr-brow-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-brow-name b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; color: var(--ink); }
.pr-brow-prog { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pr-brow-sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: var(--muted); }
.pr-brow-err { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--err); }
.pr-brow-err .i { flex: none; margin-top: 2px; }
.pr-brow.is-error { background: color-mix(in srgb, var(--err-bg) 45%, transparent); }
.pr-brow.is-cancelled { opacity: .7; }
.pr-brow-act { display: flex; justify-content: flex-end; }
@media (max-width: 899px) {
  .pr-brow-th { display: none; }
  .pr-brow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "prod st" "prog prog" "act act"; gap: 10px; padding: 14px; }
  .pr-brow:first-of-type { border-top: 0; }
  .pr-brow-prod { grid-area: prod; }
  .pr-brow-st { grid-area: st; }
  .pr-brow-prog { grid-area: prog; }
  .pr-brow-act { grid-area: act; justify-content: flex-start; }
  .pr-brow-act:empty { display: none; }
  .pr-brun-acts { width: 100%; }
  .pr-brun-acts .btn { flex: 1 1 auto; }
}
.pr-bres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pr-bres figure { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.pr-bres-img { display: block; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--shadow-1); }
.pr-bres-img > svg { width: 100%; height: 100%; }
.pr-bres figcaption { display: flex; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.pr-bres figcaption .tnum { color: var(--muted); }
@media (max-width: 599px) { .pr-bres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pr-rc-sum { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); font-size: 14px; }
.pr-rc-sum > span { display: flex; align-items: center; gap: 8px; }
.pr-rc-sum .i { color: var(--muted); }

/* Выбор товаров / Product picker */
.pr-pk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pr-pk-item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.pr-pk-item:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface)); }
.pr-pk-item input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.pr-pk-item > .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-pk-all { padding: 6px 2px; }

/* Сценарии / Scenarios */
.pr-sc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 16px; }
.pr-sc-top > p { max-width: 640px; }
.pr-sc { padding: 20px; }
.pr-sc-head { display: flex; align-items: flex-start; gap: 14px; }
.pr-sc-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.pr-sc-title { margin: 0 0 4px; font: 700 17px/1.3 var(--font-head); color: var(--ink); }
.pr-sc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: 18px 0 16px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--line); }
.pr-sc-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; background: var(--surface); }
.pr-sc-k { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1.2 var(--font); color: var(--muted); }
.pr-sc-v { font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--ink); }
@media (max-width: 1199px) { .pr-sc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pr-sc-cell:last-child { grid-column: span 2; } }
@media (max-width: 699px) { .pr-sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pr-sc { padding: 16px; } .pr-sc-head .status, .pr-sc-head .badge { display: none; } }
.pr-sc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pr-sc-log { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.pr-sc-log-t { margin: 0 0 6px; font: 700 13px/1.3 var(--font); color: var(--ink-2); }
.pr-sc-runs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pr-sc-runs li { display: grid; grid-template-columns: 128px 90px 104px minmax(0, 1fr); align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.pr-sc-runs li:first-child { border-top: 0; }
.pr-sc-runs .badge { justify-self: start; }
.pr-sc-note { color: var(--ink-2); }
@media (max-width: 699px) { .pr-sc-runs li { grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 10px; } .pr-sc-note { grid-column: 1 / -1; } .pr-sc-runs .badge { justify-self: end; } }

/* Рецепты на вкладке сценариев / Recipes on the scenarios tab */
.pr-rc-block { margin-top: 28px; }
.pr-rc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.pr-rc-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.pr-rc-item > .grow { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pr-rc-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); color: var(--primary); }
@media (max-width: 599px) { .pr-rc-list { grid-template-columns: minmax(0, 1fr); } .pr-rc-item { flex-wrap: wrap; } .pr-rc-item .btn { margin-left: 54px; } }

/* Конструктор сценария / Scenario builder */
.pr-sb .stepper { margin-bottom: 2px; }
.pr-sb-h { margin: 4px 0 0; font: 700 16px/1.3 var(--font-head); color: var(--ink); }
.pr-days .chip { justify-content: center; min-width: 46px; }
.pr-sb-time .select { max-width: 160px; }
.pr-sb-num { max-width: 120px; }
.pr-sb-preview { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r); background: var(--surface-2); font-weight: 600; color: var(--ink); }
.pr-sb-preview .i { color: var(--primary); }
.pr-sb-final { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--primary); border-radius: var(--r); background: color-mix(in srgb, var(--primary-soft) 60%, var(--surface)); }
.pr-sb-final b { font: 700 16px/1.3 var(--font-head); color: var(--ink); }

/* ==================================================================
   5. Фото-студия / Photo studio
   ================================================================== */
.pr-studio { display: grid; grid-template-columns: 264px minmax(0, 1fr) 316px; gap: 16px; align-items: start; }
.pr-lib { position: sticky; top: calc(var(--top-h) + 16px); display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - var(--top-h) - 32px); padding: 14px; min-width: 0; }
.pr-lib-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pr-lib-filters { display: flex; flex-direction: column; gap: 8px; }
.pr-lib-seg { width: 100%; }
.pr-lib-seg > button { flex: 1 1 auto; padding: 0 6px; }
.pr-lib-seg { overflow: hidden; }
.pr-lib-groups { display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; min-height: 0; margin: 0 -6px; padding: 2px 6px; overflow-y: auto; }
.pr-lib-gh { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 6px; font: 600 13px/1.2 var(--font); color: var(--ink-2); }
.pr-lib-gh .thumb { border-radius: 6px; }
.pr-lib-gh .muted { margin-left: auto; }
.pr-lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pr-lib-ph { position: relative; display: block; aspect-ratio: 1; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 10px; background: var(--surface-2); cursor: pointer; transition: border-color .12s; }
.pr-lib-ph > svg { width: 100%; height: 100%; }
.pr-lib-ph:hover { border-color: var(--line-2); }
.pr-lib-ph[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.pr-lib-flag { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--warn); color: var(--surface); }
.pr-lib-up { flex: none; }

.pr-stage { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; }
.pr-stage-head { display: flex; align-items: center; gap: 12px; }
.pr-stage-title { font: 700 16px/1.3 var(--font-head); color: var(--ink); }
.pr-cmp { --x: 50%; position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--r); background: var(--surface-2); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.pr-cmp.is-drag { cursor: grabbing; }
.pr-cmp-layer { position: absolute; inset: 0; }
.pr-cmp-layer > svg, .pr-cmp-layer > div { display: block; width: 100%; height: 100%; }
.pr-cmp-layer > div > svg { width: 100%; height: 100%; }
.pr-cmp-before { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.pr-cmp-line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 0 12px rgba(0, 0, 0, .25); pointer-events: none; }
.pr-cmp-handle { position: absolute; top: 50%; left: var(--x); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #1c2e26; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); cursor: ew-resize; touch-action: none; }
.pr-cmp-handle .i { margin: 0 -3px; }
.pr-cmp-handle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pr-cmp-tag { position: absolute; top: 12px; padding: 6px 10px; border-radius: var(--r-pill); background: rgba(20, 30, 24, .64); color: #fff; font: 600 12px/1 var(--font); pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pr-cmp-tag.is-before { left: 12px; }
.pr-cmp-tag.is-after { right: 12px; }
.pr-cmp-busy { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--surface) 55%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); cursor: progress; }
.pr-busy-card { display: flex; align-items: center; gap: 12px; width: min(300px, 86%); padding: 14px 16px; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-3); color: var(--ink); }
.pr-busy-card > .spinner { color: var(--primary); }
.pr-busy-card > .grow { display: flex; flex-direction: column; gap: 8px; }
.pr-enh { filter: saturate(1.06) contrast(1.04) brightness(1.03); }
.pr-crop { display: grid; place-items: center; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface-3) 0 50%) 0 0 / 20px 20px; }
.pr-crop-frame { height: 90%; max-width: 90%; overflow: hidden; border-radius: 6px; outline: 2px solid #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.pr-crop-frame > svg { display: block; width: 100%; height: 100%; }
.pr-integrity { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent); border-radius: var(--r); background: var(--ok-bg); color: var(--ink); }
.pr-integrity > .i { flex: none; margin-top: 1px; color: var(--ok); }
.pr-integrity > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-integrity b { font-size: 14px; }
.pr-stage-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pr-vars { padding-top: 2px; }
.pr-vars-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; margin-bottom: 8px; }
.pr-vars-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pr-var { display: flex; flex-direction: column; gap: 6px; padding: 4px; border: 2px solid var(--line); border-radius: var(--r); background: var(--surface); cursor: pointer; }
.pr-var > svg, .pr-var-skel { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r-s); }
.pr-var:hover { border-color: var(--line-2); }
.pr-var[aria-checked="true"] { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.pr-var:disabled { cursor: progress; }
.pr-var-cap { display: flex; align-items: center; justify-content: center; gap: 4px; padding-bottom: 2px; font: 600 12px/1.2 var(--font); color: var(--ink-2); }
.pr-var[aria-checked="true"] .pr-var-cap { color: var(--primary); }

.pr-ops { padding: 6px; min-width: 0; }
.pr-ops-head { display: flex; flex-direction: column; gap: 2px; padding: 10px 10px 8px; }
.pr-op { border-radius: var(--r); }
.pr-op + .pr-op { margin-top: 2px; }
.pr-op.is-on { background: var(--surface-2); }
.pr-op-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 10px; border: 0; border-radius: var(--r); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pr-op:not(.is-on) .pr-op-head:hover { background: var(--surface-2); }
.pr-op-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--surface-2); color: var(--ink-2); }
.pr-op.is-on .pr-op-ic { background: var(--primary); color: var(--on-primary); }
.pr-op-name { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.pr-op-name b { font-size: 14px; }
.pr-op-price { font: 600 12px/1 var(--font); color: var(--muted); white-space: nowrap; }
.pr-op-chev { color: var(--muted); transition: transform .15s; }
.pr-op.is-on .pr-op-chev { transform: rotate(180deg); }
.pr-op-body { display: flex; flex-direction: column; gap: 12px; padding: 0 10px 12px; }
.pr-op-desc { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.pr-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pr-preset { display: flex; flex-direction: column; gap: 5px; padding: 3px; border: 2px solid var(--line); border-radius: var(--r); background: var(--surface); text-align: left; cursor: pointer; }
.pr-preset-custom { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; min-height: 40px; padding: 4px 10px; }
.pr-preset-custom > .i { color: var(--primary); }
.pr-preset-custom .pr-preset-name { padding: 0; }
.pr-preset:hover { border-color: var(--line-2); }
.pr-preset[aria-checked="true"] { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.pr-preset-img { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-s); background: var(--surface-2); color: var(--muted); }
.pr-preset-img > svg { width: 100%; height: 100%; }
.pr-preset-name { padding: 0 3px 2px; font: 600 12px/1.25 var(--font); color: var(--ink); }
.pr-op-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.pr-op-list li { display: flex; align-items: center; gap: 8px; }
.pr-op-list .i { color: var(--ok); }
.pr-op-batch { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.pr-crop-chips .chip .muted { font-weight: 500; }

/* Пакетное применение / Batch apply dialog */
.pr-bp { display: flex; flex-direction: column; gap: 12px; max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.pr-bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.pr-bp-item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; }
.pr-bp-item > svg { width: 100%; height: 100%; }
.pr-bp-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pr-bp-check { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid #fff; border-radius: 50%; background: rgba(0, 0, 0, .25); color: transparent; }
.pr-bp-item:has(input:checked) { border-color: var(--primary); }
.pr-bp-item:has(input:checked) .pr-bp-check { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.pr-bp-item:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.pr-bp-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); font-size: 14px; }

@media (max-width: 1199px) {
  .pr-studio { grid-template-columns: minmax(0, 1fr) 316px; }
  .pr-lib { grid-column: 1 / -1; position: static; max-height: none; }
  .pr-lib-filters { flex-direction: row; flex-wrap: wrap; }
  .pr-lib-filters .select { width: auto; min-width: 180px; }
  .pr-lib-seg { width: auto; }
  .pr-lib-groups { flex-direction: row; gap: 18px; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; }
  .pr-lib-group { flex: none; }
  .pr-lib-grid { display: flex; gap: 6px; }
  .pr-lib-ph { flex: none; width: 64px; }
  .pr-lib-up { align-self: flex-start; width: auto; }
}
@media (max-width: 899px) {
  .pr-studio { grid-template-columns: minmax(0, 1fr); }
  .pr-lib-filters .select { flex: 1 1 100%; }
  .pr-lib-seg { width: 100%; }
  .pr-stage { padding: 12px; }
  .pr-vars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}