/* «Метчинг» — стили ПОРТАЛЬНОЙ СБОРКИ МАКЕТА владельца.
 *
 * Файл взят из пакета «Форма по системе Метчинг» (portal/css/matching.css) КАК
 * ЕСТЬ и правится только точечно — иначе вёрстка разойдётся с эталонными
 * скриншотами. Свои дополнения портала (оправа раздела, шрифт) — в конце файла,
 * отдельным блоком.
 *
 * Изоляция у сборки своя: все классы `mx-`, все переменные `--mx-`, правила
 * действуют внутри `.mx-app`. Поэтому со стилями портала она не конфликтует, а
 * запрет сторожа css_tokens на имена --bg и --acc её не касается.
 */

/* ==========================================================================
   Метчинг — рабочее место оператора приёма и выплат
   Слой 1: токены. Слой 2: каркас. Слой 3: компоненты. Слой 4: состояния.
   Тему задаёт портал: <html data-theme="dark">.
   ========================================================================== */

/* --- 1. Токены ----------------------------------------------------------- */
:root {
  --mx-bg: #f7f8fa;
  --mx-s1: #ffffff;
  --mx-s2: #f2f3f6;
  --mx-s3: #e9ebf0;
  --mx-line: rgba(16, 20, 30, .10);
  --mx-line2: rgba(16, 20, 30, .18);
  --mx-tx: #0d1016;
  --mx-tx2: #535c69;
  --mx-tx3: #646d7a;

  --mx-acc-raw: #2f62d8;
  --mx-acc: color-mix(in oklab, var(--mx-acc-raw) 76%, #05070c 24%);
  --mx-acc-soft: color-mix(in oklab, var(--mx-acc-raw) 10%, transparent);
  --mx-acc-sel: color-mix(in oklab, var(--mx-acc-raw) 14%, transparent);
  --mx-acc-glow: color-mix(in oklab, var(--mx-acc-raw) 22%, transparent);

  --mx-fill: #15181f;
  --mx-fill-tx: #ffffff;
  --mx-ok: #177a5b;
  --mx-ok-soft: rgba(23, 122, 91, .10);
  --mx-warn: #8a6510;
  --mx-warn-soft: rgba(160, 120, 20, .12);
  /* правка портала (19.09.2026): жёлтый значок чеков — заявка без чека. */
  --mx-doc-warn-bg: #f3cf5a;
  --mx-doc-warn-tx: #3d2c00;
  --mx-dng: #b8303f;
  --mx-dng-soft: rgba(184, 48, 63, .10);

  --mx-sh: 0 0 0 1px rgba(16, 20, 30, .05);
  --mx-sh-lift: 0 1px 2px rgba(16, 20, 30, .05), 0 14px 30px -18px rgba(16, 20, 30, .22);

  /* иконки банков: буква / подложка / контур */
  --mx-bank-sber: #005f21;      --mx-bank-sber-bg: rgba(0, 95, 33, .10);      --mx-bank-sber-bd: rgba(0, 95, 33, .22);
  --mx-bank-tbank: #753e00;     --mx-bank-tbank-bg: rgba(117, 62, 0, .10);    --mx-bank-tbank-bd: rgba(117, 62, 0, .22);
  --mx-bank-alfa: #862726;      --mx-bank-alfa-bg: rgba(134, 39, 38, .10);    --mx-bank-alfa-bd: rgba(134, 39, 38, .22);
  --mx-bank-vtb: #234993;       --mx-bank-vtb-bg: rgba(35, 73, 147, .10);     --mx-bank-vtb-bd: rgba(35, 73, 147, .22);
  --mx-bank-raif: #6b3078;      --mx-bank-raif-bg: rgba(107, 48, 120, .10);   --mx-bank-raif-bd: rgba(107, 48, 120, .22);
  --mx-bank-ozon: #005f6e;      --mx-bank-ozon-bg: rgba(0, 95, 110, .10);     --mx-bank-ozon-bd: rgba(0, 95, 110, .22);

  /* метрика */
  --mx-row-order: 34px;
  --mx-row-half: 38px;
  --mx-head: 34px;
  --mx-topbar: 46px;
  --mx-r-xs: 3px;
  --mx-r-sm: 6px;
  --mx-r-md: 8px;
  --mx-r-lg: 10px;
  --mx-r-xl: 12px;

  /* движение */
  --mx-fast: .13s ease-out;
  --mx-mid: .18s ease;
  --mx-ease-out: cubic-bezier(.32, .72, 0, 1);
  --mx-spring: cubic-bezier(.34, 1.4, .5, 1);
}

html[data-theme="dark"] {
  --mx-bg: #08090a;
  --mx-s1: #0f1011;
  --mx-s2: #141517;
  --mx-s3: #1c1e21;
  --mx-line: #23252a;
  --mx-line2: #383b3f;
  --mx-tx: #ffffff;
  --mx-tx2: #a3a9b3;
  --mx-tx3: #8b929c;

  --mx-acc-raw: #82a8ff;
  --mx-acc: color-mix(in oklab, var(--mx-acc-raw) 72%, #ffffff 28%);
  --mx-acc-soft: color-mix(in oklab, var(--mx-acc-raw) 12%, transparent);
  --mx-acc-sel: color-mix(in oklab, var(--mx-acc-raw) 14%, transparent);
  --mx-acc-glow: color-mix(in oklab, var(--mx-acc-raw) 20%, transparent);

  --mx-fill: #2c323c;
  --mx-fill-tx: #f4f6f9;
  --mx-ok: #43c98d;
  --mx-ok-soft: rgba(67, 201, 141, .12);
  --mx-warn: #e0b155;
  --mx-warn-soft: rgba(224, 177, 85, .12);
  --mx-doc-warn-bg: #e0b155;
  --mx-doc-warn-tx: #17130a;
  --mx-dng: #eb5f6b;
  --mx-dng-soft: rgba(235, 95, 107, .12);

  --mx-sh: inset 0 0 0 1px #23252a;
  --mx-sh-lift: inset 0 0 0 1px #23252a, 0 4px 32px rgba(0, 0, 0, .6);

  --mx-bank-sber: #9ce6ab;      --mx-bank-sber-bg: rgba(156, 230, 171, .16);  --mx-bank-sber-bd: rgba(156, 230, 171, .30);
  --mx-bank-tbank: #fbc77c;     --mx-bank-tbank-bg: rgba(251, 199, 124, .16); --mx-bank-tbank-bd: rgba(251, 199, 124, .30);
  --mx-bank-alfa: #ffb5ad;      --mx-bank-alfa-bg: rgba(255, 181, 173, .16);  --mx-bank-alfa-bd: rgba(255, 181, 173, .30);
  --mx-bank-vtb: #aad1ff;       --mx-bank-vtb-bg: rgba(170, 209, 255, .16);   --mx-bank-vtb-bd: rgba(170, 209, 255, .30);
  --mx-bank-raif: #f1bafe;      --mx-bank-raif-bg: rgba(241, 186, 254, .16);  --mx-bank-raif-bd: rgba(241, 186, 254, .30);
  --mx-bank-ozon: #6ce6f3;      --mx-bank-ozon-bg: rgba(108, 230, 243, .16);  --mx-bank-ozon-bd: rgba(108, 230, 243, .30);
}

/* --- 2. Каркас ----------------------------------------------------------- */
.mx-app,
.mx-app *,
.mx-app *::before,
.mx-app *::after { box-sizing: border-box; }

.mx-app {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--mx-bg);
  color: var(--mx-tx);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 420;
  letter-spacing: -.011em;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  -webkit-font-smoothing: antialiased;
}

/* Ресет через :where() — нулевая специфичность, чтобы любое компонентное правило его перебивало. */
:where(.mx-app button) { font: inherit; color: inherit; cursor: pointer; white-space: nowrap; line-height: 1; flex: 0 0 auto; border: 0; background: none; padding: 0; }
:where(.mx-app input, .mx-app select) { font: inherit; color: var(--mx-tx); flex: 0 0 auto; }
.mx-app button { transition: background var(--mx-fast), color var(--mx-fast), box-shadow var(--mx-fast), filter var(--mx-fast); }
.mx-app input,
.mx-app select { transition: border-color var(--mx-mid), background var(--mx-mid), box-shadow var(--mx-mid); }
.mx-app button:focus { outline: none; }
.mx-app :focus-visible { outline: 2px solid var(--mx-acc); outline-offset: 1px; }
.mx-app a { color: var(--mx-acc); text-decoration: none; }
.mx-app a:hover { color: var(--mx-tx); }

.mx-app ::-webkit-scrollbar { width: 10px; height: 10px; }
.mx-app ::-webkit-scrollbar-thumb { background: var(--mx-line2); border-radius: var(--mx-r-sm); border: 3px solid transparent; background-clip: content-box; }
.mx-app ::-webkit-scrollbar-track { background: transparent; }

.mx-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  white-space: nowrap;
}

.mx-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mx-workspace { flex: 1; min-height: 0; display: flex; }

.mx-intake { min-width: 0; display: flex; flex-direction: column; width: 31%; flex: 0 0 auto; }
.mx-right { flex: 1; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }

.mx-splitter { width: 7px; flex: 0 0 auto; cursor: col-resize; display: flex; align-items: center; justify-content: center; background: var(--mx-bg); }
.mx-splitter__grip { width: 3px; height: 44px; border-radius: var(--mx-r-xs); background: var(--mx-line2); transition: background var(--mx-mid), height var(--mx-mid); }
.mx-splitter:hover .mx-splitter__grip { background: var(--mx-acc); height: 64px; }

.mx-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--mx-s1); overflow: hidden; border-right: 1px solid var(--mx-line); }
.mx-pane__head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px; flex-wrap: nowrap;
  height: var(--mx-head); padding: 0 8px; border-bottom: 1px solid var(--mx-line); overflow: hidden;
}
.mx-pane__title { font-weight: 550; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.mx-pane__count { font-size: 11px; color: var(--mx-tx3); white-space: nowrap; }
.mx-pane__spacer { flex: 1; }
.mx-pane__sum { font-size: 11px; color: var(--mx-tx2); white-space: nowrap; }
/* Правка портала: тесная шапка переносится; сумма остаётся доступной. */
.mx-tabs { flex-shrink: 0; }
.mx-pane__body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.mx-pane__body--pad { padding: 6px; display: flex; flex-direction: column; gap: 4px; }

/* --- 3. Компоненты ------------------------------------------------------- */

/* 3.1 Кнопки */
.mx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: var(--mx-r-md);
  font-weight: 500; font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--mx-tx); background: var(--mx-s2);
  transition: background var(--mx-fast), color var(--mx-fast), box-shadow var(--mx-fast), filter var(--mx-fast);
}
.mx-btn:hover { background: var(--mx-s3); }
.mx-btn--fill { background: var(--mx-fill); color: var(--mx-fill-tx); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.mx-btn--fill:hover { background: var(--mx-fill); filter: brightness(1.08); }
.mx-btn--outline { background: none; box-shadow: inset 0 0 0 1px var(--mx-line2); }
.mx-btn--outline:hover { background: var(--mx-s2); }
.mx-btn--quiet { background: none; color: var(--mx-tx2); }
.mx-btn--quiet:hover { background: var(--mx-s2); color: var(--mx-tx); }
.mx-btn--sm { height: 22px; padding: 0 8px; }
.mx-btn--dashed { background: none; box-shadow: inset 0 0 0 1px var(--mx-line2); border-radius: var(--mx-r-lg); height: 32px; color: var(--mx-tx3); }
.mx-btn--dashed:hover { background: var(--mx-s2); color: var(--mx-tx); }
.mx-btn[disabled] { opacity: .4; cursor: not-allowed; }

.mx-icon-btn {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--mx-r-sm); color: var(--mx-tx3); font-size: 11px;
  transition: background var(--mx-fast), color var(--mx-fast);
}
.mx-icon-btn:hover { background: var(--mx-s3); color: var(--mx-tx); }
.mx-icon-btn--sm { width: 23px; height: 23px; }
.mx-icon-btn--lg { width: 30px; height: 30px; background: var(--mx-s2); }
.mx-icon-btn--ok { background: var(--mx-ok-soft); color: var(--mx-ok); font-size: 12px; font-weight: 550; }
.mx-icon-btn--ok:hover { background: var(--mx-ok-soft); filter: brightness(1.14); color: var(--mx-ok); }
.mx-icon-btn--muted { background: var(--mx-s3); color: var(--mx-tx3); font-size: 12px; font-weight: 550; }
.mx-icon-btn--muted:hover { background: var(--mx-s3); filter: brightness(1.14); color: var(--mx-tx2); }
.mx-icon-btn--dng:hover { background: var(--mx-dng-soft); color: var(--mx-dng); }

.mx-round-btn { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: filter var(--mx-fast), opacity var(--mx-fast); }
.mx-round-btn--ok { background: var(--mx-ok-soft); color: var(--mx-ok); }
.mx-round-btn--dng { background: var(--mx-dng-soft); color: var(--mx-dng); font-size: 13px; }
.mx-round-btn:hover { filter: brightness(1.12); }
.mx-round-btn--locked { opacity: .4; }

/* 3.2 Копируемые значения */
.mx-copy { background: none; text-align: left; cursor: copy; transition: color var(--mx-fast); }
.mx-copy:hover { color: var(--mx-acc); }
.mx-copy--id { font-size: 11px; color: var(--mx-tx3); }
.mx-copy--amount { font-size: 14px; font-weight: 520; color: var(--mx-tx); }
.mx-copy--amount-lg { font-size: 15px; font-weight: 520; color: var(--mx-tx); }
.mx-copy--req { font-size: 12px; color: var(--mx-tx); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Номер реквизита сжимается до многоточия. */
.mx-app .mx-copy--req { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* 3.3 Вкладки */
.mx-tabs { display: flex; padding: 2px; border-radius: var(--mx-r-md); background: var(--mx-s2); flex: 0 1 auto; min-width: 0; overflow: hidden; }
.mx-tab {
  height: 20px; padding: 0 8px; border-radius: var(--mx-r-sm);
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; color: var(--mx-tx3);
  transition: background var(--mx-fast), color var(--mx-fast);
}
.mx-tab:hover { color: var(--mx-tx); }
.mx-tab.is-active { background: var(--mx-s3); color: var(--mx-tx); }
.mx-tab__count { font-size: 10px; opacity: .75; }
.mx-tab__short { display: none; }
.mx-app.is-compact .mx-tab__full { display: none; }
.mx-app.is-compact .mx-tab__short { display: inline; }
/* В тесной колонке приёма счётчики у вкладок уступают место подписям. */
/* Правка портала: счётчики доступны при любой ширине панели. */

/* 3.4 Иконка банка */
.mx-bank {
  width: 20px; height: 20px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 550; border-radius: var(--mx-r-sm);
}
.mx-bank--lg { width: 22px; height: 22px; font-size: 11px; }
.mx-bank--round { border-radius: 50%; }
.mx-bank--sber { color: var(--mx-bank-sber); background: var(--mx-bank-sber-bg); box-shadow: inset 0 0 0 1px var(--mx-bank-sber-bd); }
.mx-bank--tbank { color: var(--mx-bank-tbank); background: var(--mx-bank-tbank-bg); box-shadow: inset 0 0 0 1px var(--mx-bank-tbank-bd); }
.mx-bank--alfa { color: var(--mx-bank-alfa); background: var(--mx-bank-alfa-bg); box-shadow: inset 0 0 0 1px var(--mx-bank-alfa-bd); }
.mx-bank--vtb { color: var(--mx-bank-vtb); background: var(--mx-bank-vtb-bg); box-shadow: inset 0 0 0 1px var(--mx-bank-vtb-bd); }
.mx-bank--raif { color: var(--mx-bank-raif); background: var(--mx-bank-raif-bg); box-shadow: inset 0 0 0 1px var(--mx-bank-raif-bd); }
.mx-bank--ozon { color: var(--mx-bank-ozon); background: var(--mx-bank-ozon-bg); box-shadow: inset 0 0 0 1px var(--mx-bank-ozon-bd); }
.mx-bank--unknown { color: var(--mx-tx2); background: var(--mx-s3); box-shadow: inset 0 0 0 1px var(--mx-line); }

/* 3.5 Тумблер */
.mx-switch {
  width: 26px; height: 14px; flex: 0 0 auto; border-radius: 8px; padding: 2px;
  display: inline-flex; align-items: center; background: var(--mx-line2);
  transition: background var(--mx-mid);
}
.mx-switch.is-on { background: var(--mx-ok); }
.mx-switch--acc.is-on { background: var(--mx-acc); }
.mx-switch__knob { width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform var(--mx-mid) var(--mx-spring); }
.mx-switch.is-on .mx-switch__knob { transform: translateX(12px); }
.mx-switch--lg { width: 28px; height: 15px; }
.mx-switch--lg .mx-switch__knob { width: 11px; height: 11px; }
.mx-switch--lg.is-on .mx-switch__knob { transform: translateX(13px); }

/* 3.6 Чипы, статусы, таймеры */
.mx-chip {
  height: 20px; padding: 0 7px; border-radius: var(--mx-r-sm);
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  font-size: 10px; white-space: nowrap;
}
.mx-chip--acc { background: var(--mx-acc-soft); color: var(--mx-acc); }
.mx-chip--warn-outline { background: none; color: var(--mx-warn); box-shadow: inset 0 0 0 1px var(--mx-warn); border-style: dashed; }
.mx-chip--muted { background: var(--mx-s2); color: var(--mx-tx3); }
/* Правка портала (19.09.2026): «Оплата частями» — СПЛОШНАЯ тонкая обводка тоном
   предупреждения: пунктир `--warn-outline` закреплён за «брали и возвращали»
   (владелец 13.09.2026), и рядом с «2×» метки не должны сливаться. */
.mx-chip--limit { background: var(--mx-s1); color: var(--mx-warn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mx-warn) 60%, transparent); }
/* Владелец 19.09.2026: «чтобы жёлтая пилюля не сливалась с жёлтым фоном» —
   у метки СВОЯ непрозрачная подложка (поверхность карточки), и на тёплой
   подложке связки с оставленным реквизитом и строки «Остатков» она читается
   отдельным пятном, а не растворяется. */
.mx-chip--doc { background: var(--mx-s2); color: var(--mx-tx2); height: 26px; padding: 0 7px; gap: 5px; }
/* Владелец 19.09.2026: подтверждённая заявка приёма без чека и чек
   незавершённой заявки входят в число чеков по выплате, а значок и число —
   на ЖЁЛТОМ фоне. Подложка сплошная по
   той же причине, что выше: полупрозрачный жёлтый растворился бы на тёплой
   подложке связки. */
.mx-chip--doc.is-warn { background: var(--mx-doc-warn-bg); color: var(--mx-doc-warn-tx); }
.mx-chip--link { cursor: pointer; transition: background var(--mx-fast), color var(--mx-fast); }
.mx-chip--link:hover { background: var(--mx-acc-soft); color: var(--mx-acc); }

.mx-status { font-size: 10px; font-weight: 500; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; }
.mx-status--acc { color: var(--mx-acc); }
.mx-status--ok { color: var(--mx-ok); }
.mx-status--warn { color: var(--mx-warn); }
.mx-status--dng { color: var(--mx-dng); }
.mx-status--muted { color: var(--mx-tx3); }

.mx-time { height: 22px; padding: 0 5px; border-radius: var(--mx-r-sm); display: inline-flex; align-items: center; justify-content: flex-end; font-size: 12px; font-weight: 520; color: var(--mx-tx2); white-space: nowrap; flex: 0 0 auto; }
/* Таймер и 8-символьный номер не сжимаются: дефицит ширины уходит в скрытие второстепенных ячеек. */
.mx-pair__side--pay .mx-copy--id { flex: 0 0 auto; min-width: 55px; }
.mx-time--soon { background: var(--mx-warn-soft); color: var(--mx-warn); }
.mx-time--over { background: var(--mx-dng-soft); color: var(--mx-dng); font-size: 10px; letter-spacing: .02em; }
/* правка портала: срок ещё не назначен площадкой — приглушённый прочерк
   вместо красного «просроч», которое давал пустой срок. */
.mx-time--none { color: var(--mx-tx3); }

.mx-doc-icon { width: 10px; height: 12px; flex: 0 0 auto; }
.mx-glyph { width: 12px; height: 12px; flex: 0 0 auto; display: block; }
.mx-glyph--lg { width: 14px; height: 14px; }
.mx-glyph--sm { width: 10px; height: 10px; }
.mx-glyph--chev { width: 10px; height: 10px; }
.mx-acct__frozen { display: inline-flex; align-items: center; gap: 3px; }
.mx-acct__auto .mx-glyph { color: var(--mx-tx3); }
.mx-pool__chev, .mx-group__chev, .mx-trigger__chev { display: inline-flex; align-items: center; justify-content: center; }
.mx-pair__link .mx-glyph { width: 14px; height: 12px; }
.mx-pop-item__check .mx-glyph { width: 12px; height: 12px; }

/* 3.7 Верхняя полоса и аккаунты */
.mx-topbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.mx-topbar__scroll { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex: 1; min-width: 0; padding: 1px; }
.mx-topbar__scroll::-webkit-scrollbar { height: 6px; width: 0; }
.mx-topbar__tools { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
/* правка портала: Telegram входит в неизменяемый каркас слева от поиска. */
.mx-tg-portal { flex-shrink: 0; color: var(--mx-acc); }
.mx-tg-portal > span { display: flex; }
.mx-tg-portal svg { width: 19px; height: 19px; }
.mx-tg-portal[hidden] { display: none !important; }

/* Правка портала: состояние связи и возраст последних данных (решение
   владельца 09.09.2026). Строка спокойная — цветом кричит только тогда,
   когда данные встали или связь потеряна. */
.mx-link { font-size: 11px; letter-spacing: .04em; color: var(--mx-tx2); white-space: nowrap;
  padding: 0 8px 0 2px; }
.mx-link.is-bad { color: var(--mx-dng); }
@media (max-width: 720px) { .mx-link { display: none; } }

/* Правка портала (владелец 15.09.2026): КАПСУЛА ОБЩЕГО ПОИСКА ПО НОМЕРУ ОРДЕРА.
   Стоит рядом с «обновить данные» и сделана в материале шапки: подложка
   `--mx-s2`, кромка `--mx-line`, скругление как у `mx-input`. Слева лупа,
   справа крестик «очистить» и чип «Enter».

   НИ ОДНОГО `transition` И `@keyframes` здесь нет НАМЕРЕННО: блок
   `@media (prefers-reduced-motion: reduce)` ниже глушит внутри `.mx-app` и
   анимации, и переходы до 0,01 мс, а у владельца этот режим включён системно —
   он бы их просто не увидел. Всё движение капсулы играет Web Animations из
   `engine.js` (один `anim()`), а классы состояний задают конечный вид. */
.mx-find { position: relative; display: flex; align-items: center; gap: 2px; flex: 0 0 auto;
  height: 30px; padding: 0 2px 0 0; border: 1px solid var(--mx-line); border-radius: var(--mx-r-md);
  background: var(--mx-s2); }
.mx-find.is-focus { border-color: var(--mx-acc); box-shadow: 0 0 0 3px var(--mx-acc-soft), 0 0 12px var(--mx-acc-glow); }
.mx-find.is-bad { border-color: var(--mx-dng); box-shadow: 0 0 0 3px var(--mx-dng-soft); }
.mx-find__go { display: flex; align-items: center; justify-content: center; position: relative;
  width: 28px; height: 28px; flex: 0 0 auto; border: 0; background: none; padding: 0;
  color: var(--mx-tx3); cursor: pointer; border-radius: var(--mx-r-sm); }
.mx-find__go:hover { color: var(--mx-acc); }
.mx-find.is-focus .mx-find__go { color: var(--mx-acc); }
.mx-find__glyph { display: flex; }
/* Кольцо поиска: видно только пока летит запрос, крутит его Web Animations. */
.mx-find__ring { display: none; position: absolute; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--mx-acc-glow); border-top-color: var(--mx-acc); }
.mx-find.is-busy .mx-find__glyph { opacity: 0; }
.mx-find.is-busy .mx-find__ring { display: block; }
.mx-find.is-busy .mx-find__input { color: var(--mx-tx3); }
.mx-find .mx-find__input { width: 216px; min-width: 0; height: 26px; padding: 0; border: 0;
  background: none; font-size: 11px; font-weight: 500; color: var(--mx-tx); }
.mx-find.is-focus .mx-find__input { width: 320px; }
.mx-find__input::placeholder { color: var(--mx-tx3); font-weight: 420; }
.mx-find__input:focus { outline: none; }
.mx-find__input::-webkit-search-cancel-button { display: none; }
.mx-find__clear { display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 20px; height: 20px; border: 0; padding: 0; background: none; cursor: pointer;
  color: var(--mx-tx3); border-radius: var(--mx-r-sm); }
.mx-find__clear:hover { color: var(--mx-dng); background: var(--mx-s3); }
.mx-find__clear[hidden] { display: none; }
/* Чип-подсказка: как «Ctrl K» в макете библиотеки — виден, пока в поле работают. */
.mx-find__hint { flex: 0 0 auto; padding: 0 5px; height: 17px; line-height: 17px; opacity: 0;
  font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--mx-tx3);
  border-radius: var(--mx-r-sm); background: var(--mx-s3); box-shadow: inset 0 0 0 1px var(--mx-line); }
.mx-find.is-focus .mx-find__hint { opacity: 1; }
/* Строка ответа под капсулой: выезжает и уходит сама. */
.mx-find__msg { display: none; position: absolute; top: calc(100% + 5px); right: 0; z-index: 6;
  max-width: 280px; padding: 4px 9px; border-radius: var(--mx-r-md); background: var(--mx-s1);
  box-shadow: var(--mx-sh-lift);
  font-size: 11px; color: var(--mx-tx2); white-space: nowrap; overflow: hidden; }
.mx-find__msg.is-on { display: block; }
.mx-find__msg.is-bad { color: var(--mx-dng); }
/* Найденная строка: вспышку играет Web Animations, здесь — спокойная метка,
   которая живёт до следующего поиска (у пула и лент своей подсветки нет). */
.mx-app .is-found { box-shadow: inset 0 0 0 1px var(--mx-acc-glow); }
/* Узкий экран: капсула сворачивается в круглую лупу и выезжает по нажатию. */
.mx-app.is-single .mx-find { padding: 0; }
.mx-app.is-single .mx-find .mx-find__input,
.mx-app.is-single .mx-find .mx-find__clear,
.mx-app.is-single .mx-find .mx-find__hint { display: none; }
.mx-app.is-single .mx-find.is-open .mx-find__input { display: block; width: 150px; }
.mx-app.is-single .mx-find.is-open.is-focus .mx-find__input { width: 180px; }
/* `:not([hidden])` обязателен: без него правило узкого экрана перебивает
   `[hidden]` по специфичности и показывает крестик у пустого поля. */
.mx-app.is-single .mx-find.is-open.is-filled .mx-find__clear:not([hidden]) { display: flex; }
.mx-app.is-single .mx-find.is-open { padding: 0 2px 0 0; }

.mx-acct { display: flex; align-items: center; gap: 11px; padding: 7px 11px; background: var(--mx-s1); flex: 0 0 auto; }
.mx-acct__col { display: flex; flex-direction: column; gap: 3px; }
.mx-acct__row { display: flex; align-items: center; gap: 8px; }
.mx-acct__divider { width: 1px; height: 26px; background: var(--mx-line); flex: 0 0 auto; }
.mx-acct__name { font-size: 11px; font-weight: 550; letter-spacing: .06em; text-transform: uppercase; color: var(--mx-tx2); white-space: nowrap; }
.mx-acct__free { font-size: 14px; font-weight: 520; }
.mx-acct__frozen { font-size: 11px; color: var(--mx-tx3); display: inline-flex; align-items: center; gap: 3px; }
.mx-acct__toggles { display: flex; flex-direction: column; gap: 4px; }
.mx-acct__toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 500; letter-spacing: .045em; text-transform: uppercase; color: var(--mx-tx3); }
.mx-acct__toggle.is-on { color: var(--mx-tx); }
.mx-acct__auto { height: 26px; padding: 0 9px; border-radius: var(--mx-r-md); background: var(--mx-s2); box-shadow: inset 0 0 0 1px var(--mx-line); display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--mx-tx2); white-space: nowrap; }
.mx-acct__auto:hover { background: var(--mx-s3); color: var(--mx-tx); }

/* 3.8 Группа ордеров приёма */
.mx-group { border: 1px solid var(--mx-line); border-radius: var(--mx-r-lg); overflow: hidden; background: var(--mx-s2); margin-bottom: 6px; transition: box-shadow var(--mx-mid), border-color var(--mx-mid), background var(--mx-mid); }
.mx-group__head { display: flex; align-items: center; gap: 8px; padding: 7px 9px; cursor: pointer; overflow: hidden; }
.mx-group__head:hover { background: var(--mx-s3); }
.mx-group__chev { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--mx-tx3); font-size: 9px; transition: transform var(--mx-mid) var(--mx-spring); }
.mx-group.is-collapsed .mx-group__chev { transform: rotate(-90deg); }
.mx-group__num { font-size: 11px; color: var(--mx-tx2); white-space: nowrap; flex: 1 1 auto; min-width: 92px; overflow: hidden; text-overflow: ellipsis; }
.mx-group__meta { font-size: 10px; color: var(--mx-tx3); white-space: nowrap; flex: 0 0 auto; }
.mx-group__sum { font-size: 12px; font-weight: 520; white-space: nowrap; flex: 0 0 auto; }
.mx-group__rows { position: relative; display: flex; flex-direction: column; }
.mx-group.is-collapsed .mx-group__rows { display: none; }
.mx-group.is-hl { background: var(--mx-acc-soft); box-shadow: inset 3px 0 0 var(--mx-acc-glow); }
.mx-group.is-pin { background: var(--mx-acc-sel); box-shadow: inset 3px 0 0 var(--mx-acc), 0 0 0 1px var(--mx-acc); animation: mx-sel .4s var(--mx-ease-out) both; }

.mx-order {
  display: grid; align-items: center; gap: 9px;
  grid-template-columns: 66px minmax(74px, 1fr) 22px 44px 48px;
  height: var(--mx-row-order); padding: 0 9px; overflow: hidden;
  
}
.mx-order:hover { background: var(--mx-s3); }
.mx-order { cursor: pointer; }
/* Кнопки в гриде не растягиваются на всю ячейку — иначе «фон» строки оказывается кнопкой. */
.mx-order > .mx-copy,
.mx-hrow > .mx-copy { justify-self: start; }
.mx-order.is-busy { opacity: .45; pointer-events: none; }
.mx-order__actions { display: flex; gap: 3px; justify-content: flex-end; }
.mx-order__doc { height: 20px; padding: 0 6px; border-radius: var(--mx-r-sm); display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 550; transition: filter var(--mx-fast); }
.mx-order__doc:hover { filter: brightness(1.12); }
.mx-order__doc--ok { background: var(--mx-ok-soft); color: var(--mx-ok); }
.mx-order__doc--pending { background: var(--mx-warn-soft); color: var(--mx-warn); }
.mx-order__doc--fail { background: var(--mx-dng-soft); color: var(--mx-dng); }

/* 3.9 История (приём и выплаты) */
.mx-hist { display: flex; flex-direction: column; gap: 9px; padding: 6px; }
.mx-hist__tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mx-hist__shift { display: flex; align-items: center; gap: 8px; padding: 0 4px 3px; }
.mx-hist__label { font-size: 10px; font-weight: 500; letter-spacing: .045em; text-transform: uppercase; color: var(--mx-tx3); white-space: nowrap; }
.mx-hist__rule { height: 1px; flex: 1; background: var(--mx-line); }
.mx-hist__vol { font-size: 11px; color: var(--mx-tx2); }
.mx-hist__group { display: flex; flex-direction: column; gap: 3px; }

/* Правка портала: колонки строки истории СЖИМАЕМЫЕ (замечание владельца
   10.09.2026 — «косо отображается»). Прежняя сетка требовала 66+96+24+96+100
   плюс отступы, то есть больше 430 px, а панель приёма уже: колонка реквизита
   (1fr) схлопывалась в ноль — номер пропадал совсем, — а сумма уезжала под
   `overflow: hidden`. Теперь ширины считаются по содержимому и умеют ужиматься,
   а обрезается по многоточию то, что не жалко: номер заявки и реквизит. */
.mx-hrow {
  display: grid; align-items: center; gap: 6px; height: 30px; padding: 0 8px;
  border-radius: var(--mx-r-md); overflow: hidden; cursor: pointer;
  grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, 1fr) 20px minmax(0, auto) minmax(0, auto);
}
.mx-hrow > * { min-width: 0; }
.mx-hrow > .mx-copy--id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-hrow > .mx-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-hrow:nth-child(even) { background: var(--mx-s2); }
.mx-hrow:hover { background: var(--mx-s3); }
.mx-hrow__req { font-size: 10px; color: var(--mx-tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-hrow__time { font-size: 10px; color: var(--mx-tx3); white-space: nowrap; text-align: right; }

/* Правка портала: время строки — «18:02 → 20:07», где лента широкая, и одно
   завершение, где узкая (запрос владельца 10.09.2026). Решает ширина САМОЙ
   ленты, а не режим страницы: приёмная колонка бывает узкой при широких
   связках рядом, и общий класс на корне здесь не годится. */
.mx-hist { container-type: inline-size; }
.mx-when__from { color: var(--mx-tx3); }
@container (max-width: 640px) { .mx-when__from { display: none; } }
.mx-hrow__amount { font-size: 12px; font-weight: 520; text-align: right; white-space: nowrap; }
.mx-hrow__doc { display: inline-flex; align-items: center; justify-content: center; color: var(--mx-tx2); }
.mx-hrow__doc.is-empty { visibility: hidden; }

/* 3.10 Связка «реквизит ↔ выплата» */
.mx-pairs { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px; }
.mx-pair {
  display: flex; flex-wrap: nowrap; align-items: stretch;
  border-radius: var(--mx-r-xl); overflow: hidden; background: var(--mx-s2); cursor: pointer;
  box-shadow: inset 0 0 0 1px transparent;
  
  transition: box-shadow var(--mx-mid), background var(--mx-mid);
}
.mx-pair.is-hl { background: var(--mx-acc-soft); box-shadow: inset 3px 0 0 var(--mx-acc-glow); }
.mx-pair.is-pin { background: var(--mx-acc-sel); box-shadow: inset 3px 0 0 var(--mx-acc), 0 0 0 1px var(--mx-acc); animation: mx-sel .4s var(--mx-ease-out) both; }
.mx-pair__side { flex: 1 1 290px; min-width: 0; min-height: var(--mx-row-half); display: flex; align-items: center; gap: 8px; padding: 6px 10px; overflow: hidden; }
.mx-pair__side--pay { flex: 1 1 278px; background: var(--mx-s1); gap: 6px; padding: 6px 8px; }
.mx-pair__link { flex: 0 0 26px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--mx-tx3); transition: color var(--mx-mid); }
.mx-pair__link.is-linked { color: var(--mx-acc); }
.mx-pair__link.is-missing { color: var(--mx-warn); }
.mx-pair__stack { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow: hidden; }
/* В половине выплаты элементов больше — промежутки уже, иначе не хватает места номеру и таймеру. */
.mx-pair__side--pay .mx-pair__stack { gap: 6px; }
.mx-pair__meta { font-size: 10px; color: var(--mx-tx3); white-space: nowrap; flex: 0 0 auto; }
.mx-pair__meta--num { font-size: 10px; color: var(--mx-tx2); }
.mx-pair__spacer { flex: 1; }
.mx-pair__empty { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; min-height: 30px; border-radius: var(--mx-r-md); box-shadow: inset 0 0 0 1px var(--mx-line); }

/* 3.11 Общий пул */
.mx-pool { flex: 0 0 auto; background: var(--mx-s1); border-top: 1px solid var(--mx-line); overflow: hidden; display: flex; flex-direction: column; }
.mx-pool__head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: var(--mx-head); padding: 0 8px; border-bottom: 1px solid var(--mx-line); }
.mx-pool__toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 550; letter-spacing: .03em; text-transform: uppercase; }
.mx-pool__chev { font-size: 9px; color: var(--mx-tx3); transition: transform var(--mx-mid) var(--mx-spring); }
.mx-pool.is-collapsed .mx-pool__chev { transform: rotate(-90deg); }
.mx-pool.is-collapsed .mx-pool__grid { display: none; }
/* Правка портала: потолок пула зависит от экрана. В пакете он жёсткий (216px),
   и на большом мониторе пул не рос, хотя место под ним было: карточки уезжали
   в прокрутку раньше времени (замечание владельца 09.09.2026). Растём вверх до
   трети высоты окна, дальше — прокрутка, как и было. */
.mx-pool__grid { position: relative; max-height: clamp(216px, 32vh, 460px); overflow-y: auto; overflow-x: hidden; display: grid; grid-template-columns: repeat(auto-fill, minmax(204px, 1fr)); gap: 6px; padding: 8px; align-content: start; }
.mx-pool-card { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--mx-r-sm); background: var(--mx-s2); will-change: transform; }
.mx-pool-card__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mx-pool-card__meta { font-size: 10px; color: var(--mx-tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 3.12 Модальные окна */
.mx-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(6, 9, 14, .5); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: mx-fade .16s ease;
}
.mx-modal {
  width: 100%; max-height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: var(--mx-s1); border-radius: var(--mx-r-xl); box-shadow: var(--mx-sh-lift);
  animation: mx-pop .2s var(--mx-ease-out) both;
}
.mx-modal--sm { max-width: 420px; }
.mx-modal--md { max-width: 540px; }
.mx-modal--lg { max-width: 640px; }
.mx-modal__head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--mx-line); }
.mx-modal__title { font-size: 11px; font-weight: 550; letter-spacing: .045em; text-transform: uppercase; }
.mx-modal__sub { font-size: 11px; color: var(--mx-tx3); }
.mx-modal__body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px; }
.mx-modal__body.is-static { overflow: visible; }
.mx-modal__foot { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-top: 1px solid var(--mx-line); background: var(--mx-s2); }
.mx-modal__hint { font-size: 11px; color: var(--mx-tx3); overflow: hidden; text-overflow: ellipsis; }

.mx-stack { display: flex; flex-direction: column; gap: 11px; }
.mx-summary { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; padding: 11px 12px; border-radius: var(--mx-r-lg); background: var(--mx-s2); }
.mx-summary__amount { font-size: 20px; font-weight: 520; }
.mx-summary__meta { font-size: 11px; color: var(--mx-tx3); }
.mx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; }
.mx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 9px; }
.mx-card { display: flex; flex-direction: column; gap: 5px; padding: 10px 11px; border-radius: var(--mx-r-lg); background: var(--mx-s2); }
.mx-card__label { font-size: 10px; font-weight: 500; letter-spacing: .045em; text-transform: uppercase; color: var(--mx-tx3); }

/* 3.13 Формы */
.mx-field { display: flex; flex-direction: column; gap: 5px; position: relative; min-width: 0; }
.mx-field__label { font-size: 10px; font-weight: 500; letter-spacing: .045em; text-transform: uppercase; color: var(--mx-tx3); }
.mx-input, .mx-trigger {
  height: 32px; padding: 0 10px; border: 1px solid var(--mx-line); border-radius: var(--mx-r-md);
  background: var(--mx-s2); font-size: 12px; font-weight: 500; width: 100%;
  transition: border-color var(--mx-mid), background var(--mx-mid), box-shadow var(--mx-mid);
}
.mx-input::placeholder { color: var(--mx-tx3); font-weight: 420; }
.mx-input:focus, .mx-trigger:focus-visible { outline: none; border-color: var(--mx-acc); box-shadow: 0 0 0 3px var(--mx-acc-soft); }
.mx-input--sm { height: 30px; font-size: 11px; }
.mx-input--num { text-align: right; }
/* Правка портала: сообщение корректировки — многострочное поле в обеих темах. */
.mx-app textarea.mx-input--area {
  height: auto; min-height: 160px; padding: 9px 10px; resize: vertical;
  color: var(--mx-tx); font-family: inherit; line-height: 1.5; box-sizing: border-box;
}
.mx-input.is-warn { border-color: var(--mx-warn); background: var(--mx-warn-soft); }
.mx-trigger { display: flex; align-items: center; gap: 8px; text-align: left; }
.mx-trigger:hover { background: var(--mx-s3); }
.mx-trigger__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-trigger__value.is-empty { color: var(--mx-tx3); font-weight: 420; }
.mx-trigger__chev { color: var(--mx-tx3); font-size: 9px; }
.mx-toggle-row { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 11px; border: 1px solid var(--mx-line); border-radius: var(--mx-r-md); background: var(--mx-s2); font-size: 11px; font-weight: 500; align-self: flex-start; }
.mx-toggle-row:hover { background: var(--mx-s3); }
.mx-collapse-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 500; letter-spacing: .045em; text-transform: uppercase; color: var(--mx-tx3); align-self: flex-start; }
.mx-collapse-btn:hover { color: var(--mx-tx); }
.mx-note { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: var(--mx-r-md); background: var(--mx-acc-soft); font-size: 11px; line-height: 1.45; }
.mx-note--warn { background: var(--mx-warn-soft); }
.mx-note--dng { background: var(--mx-dng-soft); }
.mx-methods { display: flex; gap: 6px; flex-wrap: wrap; }
.mx-method { height: 26px; padding: 0 11px; border-radius: var(--mx-r-md); font-size: 11px; font-weight: 500; background: var(--mx-s2); color: var(--mx-tx3); box-shadow: inset 0 0 0 1px var(--mx-line); }
.mx-method.is-on { background: var(--mx-acc-soft); color: var(--mx-acc); box-shadow: inset 0 0 0 1px var(--mx-acc); }

/* 3.14 Поисковый список */
.mx-pop {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 80;
  background: var(--mx-s1); border-radius: var(--mx-r-lg); box-shadow: var(--mx-sh-lift);
  overflow: hidden; display: flex; flex-direction: column;
  animation: mx-pop .16s var(--mx-ease-out) both;
}
.mx-pop--sheet { position: static; animation: none; box-shadow: none; }
.mx-pop__search { margin: 8px 8px 0; }
.mx-pop__list { max-height: 264px; overflow-y: auto; overflow-x: hidden; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.mx-pop-item {
  display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 9px;
  border-radius: var(--mx-r-md); text-align: left; flex: 0 0 auto;
  transition: background var(--mx-fast);
}
.mx-pop-item:hover { background: var(--mx-s2); }
.mx-pop-item.is-current { background: var(--mx-acc-soft); }
.mx-pop-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mx-pop-item__label { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-pop-item__sub { font-size: 10px; color: var(--mx-tx3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-pop-item__check { font-size: 11px; color: var(--mx-acc); flex: 0 0 auto; }
.mx-pop-item__check.is-hidden { visibility: hidden; }

/* 3.15 Полка чеков */
.mx-receipt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 10px; border-radius: var(--mx-r-lg); background: var(--mx-s2);  }
.mx-receipt__thumb { width: 32px; height: 42px; flex: 0 0 auto; border-radius: var(--mx-r-sm); background-image: repeating-linear-gradient(135deg, var(--mx-s3) 0 5px, var(--mx-s1) 5px 10px); box-shadow: inset 0 0 0 1px var(--mx-line); }
.mx-receipt__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.mx-receipt__file { font-size: 11px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* правка портала: длинные замечания не выходят за полку на узком экране. */
.mx-receipt__verdict { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.mx-receipt__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mx-receipt__amount { width: 108px; }
/* Полка выплаты и источник переноса — визуально разные сущности. */
.mx-shelf { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: var(--mx-r-lg); background: var(--mx-s2); }
.mx-shelf .mx-receipt { background: var(--mx-s1); }
.mx-shelf__empty { padding: 18px; text-align: center; font-size: 11px; color: var(--mx-tx3); }
.mx-source { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--mx-r-lg); box-shadow: inset 0 0 0 1px var(--mx-line); }
.mx-receipt--source { background: none; box-shadow: inset 0 0 0 1px var(--mx-line); padding: 7px 10px; }
.mx-totals { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--mx-r-lg); background: var(--mx-s2); }
.mx-totals__label { font-size: 10px; font-weight: 500; letter-spacing: .045em; text-transform: uppercase; color: var(--mx-tx3); }
.mx-totals__value { font-size: 15px; font-weight: 520; }
.mx-totals__value--ok { color: var(--mx-ok); }
.mx-totals__value--dng { color: var(--mx-dng); }
.mx-doc-preview { height: 250px; border-radius: var(--mx-r-lg); background-image: repeating-linear-gradient(135deg, var(--mx-s3) 0 8px, var(--mx-s2) 8px 16px); box-shadow: inset 0 0 0 1px var(--mx-line); flex: 1; min-width: 190px; }
.mx-doc-page { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 6px; }
.mx-doc-page__sheet { height: 180px; border-radius: var(--mx-r-md); background-image: repeating-linear-gradient(135deg, var(--mx-s3) 0 7px, var(--mx-s2) 7px 14px); box-shadow: inset 0 0 0 1px var(--mx-line2); }
.mx-thumbs { display: flex; gap: 9px; flex-wrap: wrap; }
.mx-thumb { width: 88px; display: flex; flex-direction: column; gap: 5px; }
.mx-thumb__sheet { height: 108px; border-radius: var(--mx-r-sm); background-image: repeating-linear-gradient(135deg, var(--mx-s3) 0 6px, var(--mx-s2) 6px 12px); box-shadow: inset 0 0 0 1px var(--mx-line2); }
.mx-thumb__file { font-size: 10px; color: var(--mx-tx3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-reason { display: flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: var(--mx-r-md); font-size: 12px; text-align: left; }
.mx-reason:hover { background: var(--mx-s2); }
.mx-stats { display: flex; gap: 20px; flex-wrap: wrap; }
.mx-stat { display: flex; flex-direction: column; gap: 3px; }
.mx-stat__value { font-size: 20px; font-weight: 520; }
.mx-stat__value--ok { color: var(--mx-ok); }
.mx-stat__value--muted { color: var(--mx-tx3); }
.mx-stat__label { font-size: 10px; color: var(--mx-tx3); }
.mx-skiprow { display: flex; align-items: center; gap: 8px; height: 26px; font-size: 11px; color: var(--mx-tx2); border-top: 1px solid var(--mx-line); }

/* 3.17 Тост */
.mx-toast {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 90;
  padding: 9px 14px; border-radius: var(--mx-r-lg); background: var(--mx-s1); color: var(--mx-tx);
  font-size: 11px; font-weight: 500; box-shadow: var(--mx-sh-lift);
  animation: mx-slide-up .16s var(--mx-ease-out) both;
}

/* 3.18 Мобильные вкладки */
.mx-mobile-tabs { display: none; }

/* --- 4. Состояния списков ------------------------------------------------ */
.mx-state { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 44px 14px; text-align: center; }
.mx-state__code { font-size: 11px; color: var(--mx-dng); }
.mx-state__title { font-size: 12px; font-weight: 550; }
.mx-state__text { font-size: 11px; color: var(--mx-tx3); }
.mx-skel { height: var(--mx-row-order); margin: 6px; border-radius: var(--mx-r-md); background: var(--mx-s2); animation: mx-breathe 1.2s ease-in-out infinite; }
.mx-stale { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin: 6px; border-radius: var(--mx-r-md); background: var(--mx-warn-soft); color: var(--mx-warn); font-size: 11px; }
.mx-stale__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mx-warn); animation: mx-breathe 1.7s infinite; }

/* --- 5. Адаптив ---------------------------------------------------------- */
/* Правка портала: правила переноса собраны в конце файла. Ширину режима
   определяет applyLayout, а mx-hide-* больше не скрывают данные и действия. */

/* --- 6. Анимации --------------------------------------------------------- */
/* Появление, уход и переезд узлов проигрываются из JS (Web Animations),
   чтобы CSS-анимации с fill-mode не конкурировали с FLIP-трансформами. */
@keyframes mx-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes mx-pop { from { opacity: 0; transform: scale(.97) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mx-slide-up { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes mx-sel { from { box-shadow: inset 3px 0 0 var(--mx-acc), 0 0 0 4px var(--mx-acc-glow); } to { box-shadow: inset 3px 0 0 var(--mx-acc), 0 0 0 1px var(--mx-acc); } }
@keyframes mx-breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes mx-spin { to { transform: rotate(360deg); } }
.mx-spinner { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: mx-spin .7s linear infinite; flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .mx-app *, .mx-app *::before, .mx-app *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* ============================================================
   ДОПОЛНЕНИЯ ПОРТАЛА (не из пакета макета)
   ============================================================ */

/* ВАРИАТИВНЫЙ Inter — тот, что скачан в проект (site/fonts/Inter-Var-*.woff2).
 *
 * Сборка рассчитана на Inter Variable: она пользуется промежуточными весами
 * (520, 550), которых у портального статичного Inter нет — он округляет их до
 * ближайшего, и текст выглядит иначе. Объявляем ОТДЕЛЬНОЕ семейство: перебивать
 * портальный `Inter` нельзя, им набран весь остальной портал. Google Fonts со
 * страницы не запрашивается, файлы наши. */
@font-face {
  font-family: "Inter Var";
  src: url("../../fonts/Inter-Var-cyrillic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter Var";
  src: url("../../fonts/Inter-Var-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.mx-app {
  font-family: "Inter Var", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* Оправа раздела в портале: страница занимает секцию целиком, общий скролл ей
   не нужен — прокручиваются только её колонки (так же устроен «Стакан»). */
.content[data-route="matching"] {
  overflow: hidden;
  padding: 0;
}

.page.mt-page {
  height: 100%;
  min-height: 0;
  width: 100%;
}

/* Правка портала: прокручиваются панели, в том числе на узком экране. */

/* Логотип банка вместо буквенной плитки макета: файлы наши (см. banks.js).
 * Своей рамки и фона у логотипа нет — знак читается сам; плашка даётся
 * ТОЧЕЧНО тем файлам, что тонут в тёмной теме (то же решение, что в
 * `ui/bankIcons.js`, и те же токены портала). */
.mx-bank--logo {
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  border-radius: var(--mx-r-sm);
}

.mx-bank--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: inherit;
}

.mx-bank--plate {
  background: var(--bank-plate);
  box-shadow: inset 0 0 0 1px var(--bank-plate-edge);
  padding: 1px;
}

/* «Скоро» — блок из макета, которого у площадки нет вовсе (наша доработка).
   Место занято, вид сохранён, но видно, что он ещё не живой. */
.mx-soon {
  opacity: .5;
  cursor: help;
}

.mx-soon:hover {
  opacity: .72;
}

/* Живой чек вместо заштрихованной заглушки макета. */
.mx-doc-preview--live {
  height: 420px;
  min-width: 320px;
  background: var(--mx-s1);
  background-image: none;
  border: 0;
  object-fit: contain;
  width: 100%;
}

/* Сторона площадки возле ника: приём и выплаты — разные учётные записи Echo. */
.mx-acct__side {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: var(--mx-r-xs);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  vertical-align: middle;
}

.mx-acct__side--in {
  color: var(--mx-acc);
  background: var(--mx-acc-sel);
  box-shadow: inset 0 0 0 1px var(--mx-acc);
}

.mx-acct__side--out {
  color: var(--mx-warn);
  background: color-mix(in srgb, var(--mx-warn) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mx-warn) 45%, transparent);
}

/* ОКНО ДОКУМЕНТА: чек читают, поэтому окно шире прочих, но не во весь экран.
   Прокручивается только правая колонка — кнопки прибиты к её низу, а место над
   ними отдано под разбор чека (Detecto приедет туда же). */
.mx-modal--doc {
  max-width: min(1400px, 100vw - 48px);
  height: min(90vh, 960px);
}

.mx-modal__body.is-doc {
  padding: 12px;
  overflow: hidden;
}

.mx-doc-win {
  display: flex;
  gap: 12px;
  height: 100%;
  min-height: 0;
}

.mx-doc-win__doc {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

.mx-doc-win__doc .mx-doc-preview {
  height: 100%;
  min-width: 0;
  flex: 1 1 auto;
}

.mx-doc-win__side {
  flex: 0 0 clamp(320px, 30%, 440px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 10px;
}

.mx-doc-win__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 2px;
}

.mx-doc-win__acts {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--mx-line);
}

.mx-doc-win__acts .mx-btn {
  justify-content: center;
}

@media (max-width: 900px) {
  .mx-modal--doc { height: min(90vh, 900px); }
  .mx-doc-win { flex-direction: column; }
  .mx-doc-win__side { flex: 0 0 auto; }
  .mx-doc-win__doc { flex: 1 1 320px; }
}

/* Переключатель из двух значений в форме (способ перевода): у площадки это
   один флажок, третьего состояния не бывает. */
.mx-seg {
  display: flex;
  gap: 4px;
}

.mx-seg .mx-method {
  flex: 1 1 0;
  justify-content: center;
}

/* Каталог банков площадки — 144 записи: списку нужен рост и своя прокрутка,
   поиск в нём уже есть. */
.mx-pop__list {
  max-height: 340px;
}

/* ПОПРАВКА К ОБЪЁМУ — одна цельная плашка в шапке связок: подпись, значение и
   галочка сохранения. Это настройка, а не фильтр, поэтому она не выглядит полем
   ввода, пока её не трогают: рамка появляется по наведению и фокусу.
   Несохранённая правка подсвечена и открывает галочку; после сохранения —
   короткая зелёная вспышка, потому что тост на такой мелкий жест избыточен. */
.mx-adjust {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  height: 26px;
  padding: 0 3px 0 9px;
  border-radius: var(--mx-r-md);
  background: var(--mx-s2);
  box-shadow: inset 0 0 0 1px transparent;
  transition: background var(--mx-mid), box-shadow var(--mx-mid);
}

.mx-adjust:hover {
  background: var(--mx-s3);
}

.mx-adjust:focus-within {
  background: var(--mx-s3);
  box-shadow: inset 0 0 0 1px var(--mx-acc), 0 0 0 3px var(--mx-acc-soft);
}

.mx-adjust.is-dirty {
  background: var(--mx-acc-sel);
  box-shadow: inset 0 0 0 1px var(--mx-acc);
}

.mx-adjust.is-dirty:focus-within {
  box-shadow: inset 0 0 0 1px var(--mx-acc), 0 0 0 3px var(--mx-acc-soft);
}

.mx-adjust.is-saved {
  animation: mx-adjust-saved .9s var(--mx-ease-out) both;
}

.mx-adjust__label {
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mx-tx3);
  user-select: none;
}

.mx-adjust__input {
  width: 62px;
  height: 22px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--mx-tx);
  font-size: 12px;
  font-weight: 550;
  text-align: center;
  /* Своей рамки у поля нет вовсе: фокус показывает плашка целиком. */
  outline: none;
  box-shadow: none;
  appearance: none;
}

.mx-adjust__input:focus,
.mx-adjust__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.mx-adjust.is-dirty .mx-adjust__input {
  color: var(--mx-acc);
}

.mx-adjust__input::placeholder {
  color: var(--mx-tx3);
  font-weight: 400;
}

/* Галочка живёт только при несохранённой правке: в покое плашка чистая. */
.mx-adjust__save {
  width: 0;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--mx-r-sm);
  background: transparent;
  color: var(--mx-acc);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.7);
  pointer-events: none;
  transition: width var(--mx-mid), opacity var(--mx-mid), transform var(--mx-mid), background var(--mx-mid);
}

.mx-adjust.is-dirty .mx-adjust__save,
.mx-adjust.is-saved .mx-adjust__save {
  width: 22px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.mx-adjust__save:hover {
  background: var(--mx-acc-sel);
}

.mx-adjust.is-saved .mx-adjust__save {
  animation: mx-adjust-check .9s var(--mx-ease-out) both;
}

@keyframes mx-adjust-saved {
  0% { background: var(--mx-acc-sel); box-shadow: inset 0 0 0 1px var(--mx-acc), 0 0 0 4px var(--mx-acc-glow); }
  100% { background: var(--mx-s2); box-shadow: inset 0 0 0 1px transparent, 0 0 0 0 transparent; }
}

@keyframes mx-adjust-check {
  0% { transform: scale(.6); opacity: .4; }
  35% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Карточка общего пула: номер получателя стоит под суммой — по нему видно, что
   это за выплата и не она ли уже возвращалась. */
.mx-pool-card__row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  /* Правка портала (19.09.2026): сумма, «N×» и «до N чек.» на узкой карточке
     не помещаются в строку — переносим, а не наезжаем на «взять». */
  flex-wrap: wrap;
  row-gap: 2px;
}

.mx-pool-card__dest {
  font-size: 11px;
  color: var(--mx-tx2);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.mx-pool-card__dest:hover {
  color: var(--mx-tx);
}

/* Принято по выплате — деньги, а не статус: чуть мельче суммы выплаты и
   зелёным, потому что это уже полученное. Ноль не кричит. */
.mx-app {
  --mx-money: #43c98d;
}

.mx-pair__taken {
  font-size: 13px;
  font-weight: 520;
  color: var(--mx-money);
  white-space: nowrap;
  flex: 0 0 auto;
}

.mx-pair__taken.is-zero {
  color: var(--mx-tx3);
  font-weight: 400;
}

/* Остаток по выплате в строке реквизита: сколько ещё ждать приёмом. Ноль —
   выплата закрыта, и это хорошая новость, поэтому зелёным. */
.mx-pair__left {
  font-size: 12px;
  font-weight: 520;
  color: var(--mx-tx2);
  white-space: nowrap;
  flex: 0 0 auto;
}

.mx-pair__left.is-done {
  color: var(--mx-money);
}

/* Наведение по связи было почти незаметным (замечание владельца 09.09.2026):
   серый фон на сером фоне. Теперь у пары «реквизит ↔ выплата» акцентная
   подложка и полоса, а закрепление (is-pin) остаётся заметно сильнее —
   иначе временное и постоянное перестали бы различаться. */
.mx-group.is-hl,
.mx-pair.is-hl {
  transition: background var(--mx-fast), box-shadow var(--mx-fast);
}

.mx-pair.is-hl .mx-pair__link,
.mx-group.is-hl .mx-group__num {
  color: var(--mx-acc);
}

.mx-pair.is-hl .mx-pair__side--pay {
  background: color-mix(in oklab, var(--mx-acc-raw) 8%, var(--mx-s1));
}

/* Причина отказа: подпись площадки и пояснение под ней — коды у Echo короткие,
   а ошибиться тут дорого (например, «фейк-чек» — обвинение). */
.mx-reason {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.mx-reason__hint {
  font-size: 10px;
  color: var(--mx-tx3);
}

/* Полка принимает файл мышью: пока чек тащат над ней, зона подсвечена — иначе
   непонятно, отпускать или нет. */
.mx-shelf {
  transition: background var(--mx-fast), box-shadow var(--mx-fast);
}

.mx-shelf.is-drop {
  background: var(--mx-acc-soft);
  box-shadow: inset 0 0 0 2px var(--mx-acc);
  border-radius: var(--mx-r-lg);
}

/* Место под общую панель разбора портала (`ui/detecto/docReport.js`): своих
   слов о проверенном чеке у раздела нет — они уже расходились по копиям. */
.mx-doc-report {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.mx-doc-report .drep {
  font-size: 12px;
}

/* Сверка чека по полям: галочка, крестик или прочерк. Прочерк значит «не
   сверяли» — это не то же самое, что «сошлось», и выглядеть должно иначе. */
.mx-match {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: var(--mx-r-md);
  background: var(--mx-s2);
}

.mx-match__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--mx-tx2);
}

.mx-match__mark {
  width: 14px;
  text-align: center;
  font-weight: 600;
}

.mx-match__row--ok .mx-match__mark { color: var(--mx-money); }
.mx-match__row--bad .mx-match__mark { color: var(--mx-dng); }
.mx-match__row--bad .mx-match__name { color: var(--mx-tx); }
.mx-match__row--unknown { color: var(--mx-tx3); }

/* Предпросмотр показывает НАСТОЯЩИЕ страницы полки, а не заштрихованные листы:
   оператор должен видеть то, что уйдёт площадке. */
.mx-doc-page__sheet--live {
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: var(--mx-r-md);
  background: var(--mx-s1);
}

/* Разбор в окне документа: панель портала рассчитана на широкую колонку — в
   узкой её таблица сверки складывается в кашу. */
.mx-doc-win__side .drep {
  font-size: 12px;
}

.mx-doc-win__side .mx-doc-report {
  min-width: 0;
}

/* Та же раскладка «документ + разбор» внутри окна заявки: там сверху ещё шапка
   со сводкой, поэтому высота своя, а не «во всё окно». */
.mx-modal__body.is-doc > .mx-stack {
  height: 100%;
  min-height: 0;
}

.mx-doc-win--inline {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.mx-doc-win--inline .mx-doc-preview--live {
  height: 100%;
  min-height: 340px;
}

/* Прокручивается ИМЕННО колонка разбора, а не окно целиком: чек должен
   оставаться на месте, пока читают вывод источника. */
.mx-doc-win__scroll {
  overscroll-behavior: contain;
}

/* Страница предпросмотра — ссылка на сам файл: встроенный просмотрщик мелкий,
   а читать чек чаще всего нужно целиком, в своей вкладке. */
.mx-doc-page__link {
  position: relative;
  display: block;
  border-radius: var(--mx-r-md);
  overflow: hidden;
}

.mx-doc-page__link .mx-doc-page__sheet--live {
  pointer-events: none;
}

.mx-doc-page__open {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 10px;
  border-radius: var(--mx-r-sm);
  background: var(--mx-s1);
  box-shadow: inset 0 0 0 1px var(--mx-line2);
  font-size: 10px;
  color: var(--mx-tx2);
  opacity: 0;
  transition: opacity var(--mx-fast);
}

.mx-doc-page__link:hover .mx-doc-page__open {
  opacity: 1;
}

/* ПОДВАЛ ОКНА. Подсказка стояла в одном ряду с тремя кнопками и в узком окне
   сжималась до одной буквы в строке — читать было нечего. Теперь она занимает
   свою строку, когда места не хватает, и обрезается многоточием, а не ломается
   посимвольно. */
.mx-modal__foot {
  flex-wrap: wrap;
}

.mx-modal__hint {
  flex: 1 1 160px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mx-modal__foot .mx-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.mx-btn--confirm {
  background: var(--mx-warn);
  border-color: var(--mx-warn);
  color: #17130a;
  font-weight: 600;
  letter-spacing: .02em;
  animation: mx-confirm-in .28s var(--mx-ease-out) both, mx-confirm-pulse 1.8s ease-in-out .28s infinite;
}

.mx-btn--confirm:hover {
  filter: brightness(1.06);
}

@keyframes mx-confirm-in {
  0% { transform: scale(.9); opacity: .5; box-shadow: 0 0 0 0 transparent; }
  60% { transform: scale(1.06); opacity: 1; box-shadow: 0 0 0 6px var(--mx-warn-soft); }
  100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 3px var(--mx-warn-soft); }
}

@keyframes mx-confirm-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--mx-warn-soft); }
  50% { box-shadow: 0 0 0 6px var(--mx-warn-soft); }
}

/* Кнопки подвала меняют ширину плавно: «завершить» → «точно?» иначе прыгает. */
.mx-modal__foot .mx-btn--fill {
  transition: background var(--mx-mid), color var(--mx-mid), border-color var(--mx-mid);
}

/* Миниатюра чека на полке — ссылка: до этого был заштрихованный прямоугольник,
   по которому нельзя было ни открыть чек, ни понять, что это. */
.mx-receipt__thumb--link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mx-tx3);
  background-image: none;
  background: var(--mx-s3);
  transition: color var(--mx-fast), background var(--mx-fast);
}

.mx-receipt__thumb--link:hover {
  color: var(--mx-acc);
  background: var(--mx-acc-sel);
}

/* Скриншот на полке (правка портала, владелец 26.09.2026): миниатюра — сама
   картинка, верх экрана по рамке; в предпросмотре — целиком, без обрезки. */
.mx-receipt__shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: inherit;
}

.mx-doc-page__sheet--shot {
  display: block;
  height: auto;
  max-height: 420px;
  object-fit: contain;
}

/* Отправленный чек не открывается ниоткуда, поэтому его прямоугольник —
   не ссылка, а значок документа: обещать открытие нечестно. */
.mx-thumb__sheet {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mx-tx3);
}

/* Плашка качества реквизита: три числа в одной строке, поэтому она шире
   обычного значка и не сжимается. */
.mx-reqstat {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 10px;
}

.mx-chip--ok {
  color: var(--mx-money);
  background: color-mix(in srgb, var(--mx-money) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mx-money) 35%, transparent);
}

.mx-chip--dng {
  color: var(--mx-dng);
  background: var(--mx-dng-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mx-dng) 35%, transparent);
}

/* Правка портала (владелец 13.09.2026): ЖЁЛТАЯ плашка — заливкой, как зелёная
   и красная. Пунктирная обводка с «горением» (`--warn-outline`) остаётся
   только у выплат общего пула, которые брали и возвращали. */
.mx-chip--warn {
  color: var(--mx-warn);
  background: color-mix(in srgb, var(--mx-warn) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mx-warn) 35%, transparent);
}

/* Правка портала: чек в окне завершённой выплаты открывается по ссылке —
   у площадки свой файл, у нас свой, но для оператора это одна и та же
   плитка (запрос владельца 09.09.2026). */
.mx-thumb--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow var(--mx-fast) var(--mx-ease-out), background var(--mx-fast) var(--mx-ease-out);
}

.mx-thumb--link:hover .mx-thumb__sheet { box-shadow: inset 0 0 0 1px var(--mx-acc); }

/* Значок документа — по центру листа, а не в углу штриховки. */
.mx-thumb__sheet { display: flex; align-items: center; justify-content: center; color: var(--mx-tx3); }

/* Правка портала: согласованный адаптив 09.09.2026. Меняется раскладка,
   исходные метрики значков, шрифтов и кнопок сохраняются. Правила оболочки
   действуют только пока открыт Метчинг и исчезают при смене маршрута. */
html:has(.content[data-route="matching"]),
body:has(.content[data-route="matching"]) { height: 100%; overflow: hidden; }
.app:has(.content[data-route="matching"]) { height: 100dvh; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.app:has(.content[data-route="matching"]) > .main { min-height: 0; }
.app:has(.content[data-route="matching"]) > .sidebar { min-height: 0; }
.app:has(.content[data-route="matching"]) > .sidebar > * { flex-shrink: 0; }
.content[data-route="matching"] { min-height: 0; transform: none; }
.app:has(.content[data-route="matching"]) .mobileBar { flex-shrink: 0; }
/* Окна остаются внутри .mx-app: делегирование кликов и drop не меняется.
   Поднимается только страница с открытым окном, ниже общих слоёв портала. */
.content[data-route="matching"]:has(.mx-overlay) { z-index: 10010; }
/* Правка портала: короткое меню прокручивается оболочкой, а рабочая область
   остаётся на месте. Сам sidebar не режет вынесенные вправо ::after-подсказки. */
@media (min-width: 861px) and (min-height: 521px) {
  .app:has(.content[data-route="matching"]) { overflow-y: auto; grid-template-rows: auto; }
  .app:has(.content[data-route="matching"]) > .sidebar { min-height: min-content; }
  .app:has(.content[data-route="matching"]) > .main { position: sticky; top: 0; height: 100dvh; }
  .app:has(.content[data-route="matching"] .mx-overlay) > .main { z-index: 10010; }
}

/* Отбиваем только общий мобильный min-height, раздувающий исходные кнопки.
   Правка портала (владелец 15.09.2026): лупа и крестик капсулы поиска стоят
   ВНУТРИ строки высотой 30 px — общий минимум разорвал бы капсулу. */
.mx-app :is(.mx-copy, .mx-btn, .mx-icon-btn, .mx-round-btn, .mx-switch,
  .mx-tab, .mx-order__doc, .mx-acct__toggle, .mx-acct__auto, .mx-group__chev,
  .mx-pool__toggle, .mx-adjust__save, .mx-chip, .mx-find__go, .mx-find__clear,
  /* правка портала (владелец 14.09.2026): галочка выбора чека в окне доплаты —
     квадрат 20 px, и общий мобильный min-height превратил бы её в полосу. */
  .mx-deliver__check) { min-height: 0; }
/* правка портала (27.09.2026): значок чека заявки стал кнопкой общего окна
   документов — 14 px в строке, не полоса в 40 px (ловушка (5) CLAUDE.md). */
.mx-app .mx-payins__doc { min-height: 0; }
.mx-app .mx-pane__head { height: auto; min-height: var(--mx-head); flex-wrap: wrap; padding-block: 4px; overflow: visible; }
.mx-app:not(.is-single) .mx-intake { min-width: 320px; max-width: calc(100% - 327px); }
.mx-app .mx-right { display: flex; flex-direction: column; }
.mx-app .mx-pane--pairs { flex: 1; }
.mx-app .mx-splitter { touch-action: none; }
.mx-app .mx-group__head { flex-wrap: wrap; overflow: visible; }
.mx-app .mx-group__num { flex: 0 1 auto; overflow-wrap: anywhere; white-space: normal; }
.mx-app .mx-order { grid-template-columns: 66px minmax(62px, 1fr) 22px 44px 48px; column-gap: 5px; height: auto; min-height: var(--mx-row-order); }
.mx-app .mx-order .mx-copy--amount { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
.mx-app .mx-pair__stack { flex-wrap: wrap; overflow: visible; }

/* Правка портала: подвал строки. Хвост (плашка и действия) — один блок: он
   либо стоит в конце первой строки, либо целиком уезжает во вторую, прижатый
   вправо. Так вторая строка выглядит намеренной, а не «что не влезло». */
.mx-app .mx-pair__tail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}
.mx-app .mx-pair__stack .mx-copy--req { flex: 0 1 auto; white-space: normal; overflow-wrap: anywhere; overflow: visible; }
.mx-app .mx-pair__meta { flex-shrink: 1; white-space: normal; overflow-wrap: anywhere; }
.mx-app .mx-pair__side { flex: 1 1 0; }
.mx-app.is-stacked .mx-pair { flex-direction: column; }
.mx-app.is-stacked .mx-pair__side { flex-basis: auto; width: 100%; }
.mx-app.is-stacked .mx-pair__side--pay { padding-left: 8px; box-shadow: inset 2px 0 0 var(--mx-line2); }
.mx-app.is-stacked .mx-pair__link { display: none; }
.mx-app .mx-pool { min-height: 0; max-height: 50%; flex: 0 1 auto; }
.mx-app .mx-pool__head { flex-wrap: wrap; padding-block: 4px; }
/* Сохраняем существующий clamp(216px, 32vh, 460px). Родитель дополнительно
   ограничивает пул половиной рабочей области на коротком экране. */
.mx-app .mx-pool__grid { grid-template-columns: repeat(auto-fill, minmax(min(204px, 100%), 1fr)); min-height: 0; }
.mx-app .mx-pool-card__dest { white-space: normal; overflow-wrap: anywhere; }
.mx-app .mx-hist__shift { flex-wrap: wrap; }
/* Правка портала: трёхрядная история — ТОЛЬКО на узком экране (решение
   владельца 09.09.2026). На широком она остаётся одноэтажной строкой в шесть
   колонок, как в пакете макета. */
@media (max-width: 900px) {
  .mx-app .mx-hrow {
    height: auto; min-height: 54px; padding: 5px 8px; gap: 5px 8px;
    grid-template-columns: minmax(80px, 1fr) 24px minmax(80px, auto);
  }
  /* Именованные ячейки: появление нового поля не меняет смысл соседних. */
  .mx-app .mx-hrow > .mx-copy--id { grid-row: 1; grid-column: 1; justify-self: start; }
  .mx-app .mx-hrow > .mx-status { grid-row: 1; grid-column: 2 / -1; justify-self: end; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .mx-app .mx-hrow__req { grid-row: 2; grid-column: 1; white-space: normal; overflow-wrap: anywhere; overflow: visible; }
  .mx-app .mx-hrow__doc { grid-row: 2; grid-column: 2; }
  .mx-app .mx-hrow__time { grid-row: 3; grid-column: 1 / -1; justify-self: end; }
  .mx-app .mx-hrow__amount { grid-row: 2; grid-column: 3; }
}

.mx-app.is-single .mx-mobile-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 0 10px 8px; flex: 0 0 auto; }
.mx-app .mx-mobile-tab { min-height: 44px; border-radius: var(--mx-r-lg); background: var(--mx-s2); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--mx-tx3); }
.mx-app .mx-mobile-tab.is-active { background: var(--mx-acc-soft); color: var(--mx-acc); }
.mx-app .mx-mobile-tab__count { font-size: 12px; font-weight: 520; }
.mx-app.is-single .mx-splitter { display: none; }
.mx-app.is-single .mx-intake { width: 100% !important; flex: 1; }
.mx-app.is-single[data-mobile="orders"] .mx-right,
.mx-app.is-single[data-mobile="pairs"] .mx-intake,
.mx-app.is-single[data-mobile="pool"] .mx-intake,
.mx-app.is-single[data-mobile="pairs"] .mx-pool,
.mx-app.is-single[data-mobile="pool"] .mx-pane--pairs { display: none; }
.mx-app.is-single[data-mobile="pool"] .mx-pool { flex: 1; max-height: none; }
.mx-app.is-single[data-mobile="pool"] .mx-pool__grid { max-height: none; flex: 1; }

/* Окна и списки выбора остаются прокручиваемыми; список в потоке формы
   не обрезается её overflow и не перекрывает кнопки подтверждения. */
.mx-app .mx-modal__body.is-static { overflow-y: auto; }
.mx-app .mx-modal__hint { flex-basis: 100%; white-space: normal; line-height: 1.4; overflow: visible; }
/* Правка портала (владелец 14.09.2026): в общем пуле выплата на реквизит,
   который уже стоит у нас, нежелательна — её номер подсвечен жёлтым. */
.mx-app .mx-pool-card__dest--ours { color: var(--mx-warn); font-weight: 600; }
/* Правка портала (14.09.2026): режим удержания анимации окна — `backwards`, а
   не `both`. Замер в Chrome: при `both` у `.mx-modal` после проигрыша остаётся
   `transform: matrix(1, 0, 0, 1, 0, 0)` — ключевой кадр `transform: none` в
   интерполяции становится единичной матрицей. А любой transform делает элемент
   точкой отсчёта для `position: fixed` потомков И начинает резать их своим
   `overflow: hidden`: вынесенный из потока список выбора обрезался по нижней
   кромке окна, то есть ровно там же, где и раньше. `backwards` конечного
   состояния не удерживает, а оно и так равно собственным стилям окна
   (`opacity: 1`, `transform: none`) — вход анимируется по-прежнему. */
.mx-app .mx-modal { animation-fill-mode: backwards; }
/* Правка портала: список выбора становится потоковым ТОЛЬКО на узком экране.
   На широком он, как и в пакете, накрывает форму, а не раздвигает её, и место
   под него считает `placePops()` в сборке — CSS-координат у него больше нет. */
@media (max-width: 900px) {
  .mx-app .mx-pop:not(.mx-pop--sheet) { position: static; margin-top: 4px; max-height: 320px; flex-shrink: 0; }
  .mx-app .mx-pop__list { max-height: 250px; }
}
.mx-app .mx-pop__search { width: calc(100% - 16px); }
.mx-app .mx-toast { max-width: calc(100vw - 24px); white-space: normal; text-align: center; line-height: 1.4; }
.mx-app .mx-modal__head { flex-wrap: wrap; }
.mx-app .mx-modal__title, .mx-app .mx-modal__sub { overflow-wrap: anywhere; min-width: 0; }
.mx-app .mx-grid { grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr)); }
.mx-app .mx-note { overflow-wrap: anywhere; }
.mx-app .mx-summary__meta, .mx-app .mx-summary__meta > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .mx-app .mx-overlay { padding: 12px; }
  .mx-app .mx-modal__body.is-doc, .mx-app .mx-modal__body.is-doc > .mx-stack { height: auto; overflow-y: auto; }
  .mx-app .mx-doc-win, .mx-app .mx-doc-win--inline { height: auto; overflow: visible; flex: none; }
  .mx-app .mx-doc-win__doc { flex: none; height: clamp(200px, 55dvh, 500px); }
  .mx-app .mx-doc-win__doc .mx-doc-preview--live { min-width: 0; min-height: 0; height: 100%; }
  .mx-app .mx-doc-win__side, .mx-app .mx-doc-win__scroll { flex: none; overflow: visible; }
  .mx-app .mx-doc-win__acts { padding-bottom: 8px; }
}

/* Условие оболочки повторяет mobile.css, включая телефон в альбомной ориентации. */
@media (max-width: 860px), (orientation: landscape) and (max-height: 520px) {
  .content[data-route="matching"]:has(.mx-overlay) { z-index: 100; }
}

@media (max-width: 600px) {
  /* Правка портала: денежным кнопкам возвращаем тач-цель. Общая отбивка выше
     сняла мобильный минимум со ВСЕХ кнопок страницы, а «завершить выплату» и
     «вернуть в пул» стоят рядом — два кружка по 28px в шести пикселях друг от
     друга промахиваются пальцем, и цена промаха денежная. */
  .mx-app .mx-round-btn { min-height: 38px; min-width: 38px; }

  .mx-app .mx-topbar { align-items: flex-start; gap: 4px; min-height: 0; max-height: 30%; }
  .mx-app .mx-topbar__scroll { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; max-height: 100%; overflow-y: auto; }
  .mx-app .mx-acct { min-width: 0; gap: 8px; flex-wrap: wrap; padding: 6px 8px; }
  .mx-app .mx-acct__col { flex: 1 1 auto; min-width: 0; }
  .mx-app .mx-acct__row { gap: 6px; flex-wrap: wrap; }
  .mx-app .mx-acct__name { white-space: normal; overflow-wrap: anywhere; }
  .mx-app .mx-acct__divider { display: none; }
  .mx-app .mx-acct__toggles { margin-left: auto; }
  .mx-app .mx-intake .mx-pane__head .mx-tabs,
  .mx-app .mx-pane--pairs > .mx-pane__head .mx-tabs { order: 5; flex-basis: 100%; }
  .mx-app .mx-pane__head .mx-tab { flex: 1; justify-content: center; }
  .mx-app .mx-group__head { gap: 6px; }
  .mx-app .mx-group__num { min-width: 0; }
  .mx-app .mx-group__head .mx-chip { margin-left: auto; }
  .mx-app .mx-group__head .mx-pane__spacer { display: none; }
  .mx-app .mx-group__meta { margin-left: auto; }
  .mx-app .mx-order { grid-template-columns: 62px minmax(54px, 1fr) 22px 44px 48px; gap: 3px; padding-inline: 7px; }
  .mx-app .mx-pair__stack:has([data-act="toggle-requisite"]) { gap: 5px 7px; }
  .mx-app .mx-pair__stack:has([data-act="toggle-requisite"]) > .mx-copy--req { flex: 1 0 calc(100% - 62px); }
  .mx-app .mx-pair__stack:has([data-act="toggle-requisite"]) > .mx-pair__spacer { display: none; }
  .mx-app .mx-pair__stack > .mx-reqstat { margin-left: auto; }
  .mx-app .mx-pair__side--pay .mx-pair__stack { gap: 4px 6px; }
  .mx-app .mx-pair__side--pay .mx-pair__stack > .mx-copy--id { order: 0; }
  .mx-app .mx-pair__side--pay .mx-pair__stack > .mx-copy--amount-lg { order: 1; flex: 1; }
  .mx-app .mx-pair__side--pay .mx-pair__stack > span:has(.mx-bank) { order: 2; }
  .mx-app .mx-pair__side--pay .mx-pair__stack > .mx-time { order: 3; }
  .mx-app .mx-pair__side--pay .mx-pair__stack > .mx-pair__spacer { display: block; order: 4; flex: 0 0 100%; height: 0; }
  .mx-app .mx-pair__side--pay .mx-pair__stack > .mx-pair__taken,
  /* правка портала: пометка «автозабор» встаёт во второй ряд к статусу — без
     своего порядка она с order:0 уехала бы в начало строки, перед номером. */
  .mx-app .mx-pair__side--pay .mx-pair__stack > .mx-chip--acc,
  .mx-app .mx-pair__side--pay .mx-pair__stack > .mx-status { order: 5; }
  .mx-app .mx-pair__side--pay .mx-pair__stack > .mx-pair__meta { order: 6; margin-right: auto; }
  .mx-app .mx-pair__side--pay .mx-pair__stack > .mx-chip--doc { order: 7; }
  .mx-app .mx-pair__side--pay .mx-pair__stack > .mx-round-btn--ok { order: 8; }
  .mx-app .mx-pair__side--pay .mx-pair__stack > .mx-round-btn--dng { order: 9; }
  .mx-app .mx-pair__stack .mx-status { white-space: normal; line-height: 1.3; }
  .mx-app .mx-overlay { padding: 0; }
  .mx-app .mx-modal { max-width: 100vw; max-height: 100dvh; }
  .mx-app .mx-modal--doc { height: 100dvh; }
  .mx-app .mx-modal__foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .mx-app .mx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-app .mx-receipt__info { flex-basis: calc(100% - 54px); }
  .mx-app .mx-note { align-items: flex-start; }
}
@media (max-width: 359px) {
  .mx-app .mx-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   ПЕРЕЛЁТ ВЗЯТОЙ ВЫПЛАТЫ (правка портала поверх пакета макета)

   Общий пул стоит ПОД списком связок, и взятие раньше выглядело двумя
   несвязанными событиями в разных концах экрана. Теперь карточка летит из
   пула в свою строку — призрак (клон карточки) поверх страницы, всё
   движение считает `matching/flight.js` на Web Animations.

   Почему здесь только оправа призрака и ни одного @keyframes: блок
   `prefers-reduced-motion` выше глушит любую css-анимацию внутри `.mx-app`
   до 0,01 мс, а на машине владельца этот режим включён системно — он бы
   анимации и не увидел. Web Animations этот блок не трогает.
   Цветных подсветок здесь нет намеренно: правило владельца 19.08.2026 —
   «вспышки нет, движение можно».
   ============================================================ */
.mx-flight {
  position: fixed;
  /* НИЖЕ модального окна (оверлей 60) и выше обычного содержимого: автозабор
     берёт выплату и тогда, когда оператор завершает другую, — призрак не имеет
     права пролететь поверх открытого окна. Под затемнением он просто не виден,
     а строка к закрытию окна уже на месте. */
  z-index: 55;
  margin: 0;
  box-sizing: border-box;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--mx-r-sm);
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .45);
  will-change: transform, width, height;
}

/* ============================================================
   ОСТАТКИ (правка портала поверх пакета макета, docs/ТЗ_ОСТАТКИ.md)
   ============================================================ */
/* Шаг «точно?»: разница выделяется, если она есть (решение владельца
   13.09.2026). Рамка, а не вспышка: правило «вспышки нет» действует. */
.mx-totals.is-attn { box-shadow: inset 0 0 0 2px var(--mx-warn); }
/* Фиксация остатка рядом с разницей: подпись, поле суммы, кнопка. */
.mx-remfix { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: var(--mx-r-lg); box-shadow: inset 0 0 0 1px var(--mx-line); }
.mx-remfix .mx-input { width: 120px; height: 30px; font-size: 12px; }
/* правка портала (владелец 13.09.2026): вкладка «Остатки» — двухэтажная
   карточка (сверху реквизит ⟷ выплата как в «активных», снизу полоса остатка)
   и СЕТКА: на широком экране карточек несколько в ряд, иначе одна связка
   растягивалась на весь экран с пустотами. */
/* Второй заход по визуалу (владелец 13.09.2026): строка ОДНОЭТАЖНАЯ, в стиле
   «активных», вся строка — кнопка окна завершения. Наведение подсвечивает
   строку как выделенную связку; успешное закрытие — зелёная вспышка с галкой,
   потом строка гаснет анимацией согласования. Сетка: на широком экране строки
   в два столбца, чтобы одна выплата не тянулась на весь экран. */
/* Ширина адаптивная (владелец 13.09.2026: «при сильном сужении данные выходят
   за браузер»): столбец не шире панели — `min(680px, 100%)`, а не голые
   680 px; на узкой панели — один столбец, а хвост строки переносится под
   первую строку, не вылезая за край. */
.mx-pairs.mx-rems { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(680px, 100%), 1fr)); align-items: start; min-width: 0; }
.mx-rem { cursor: pointer; min-width: 0; }
.mx-rem__side { flex: 1 1 auto; min-width: 0; }
.mx-rem .mx-pair__stack { flex-wrap: wrap; row-gap: 4px; overflow: visible; }
.mx-rem .mx-pair__stack > .mx-copy--req { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mx-rem:hover { background: var(--mx-acc-soft); box-shadow: inset 3px 0 0 var(--mx-acc-glow); }
.mx-rem:focus-visible { outline: none; box-shadow: inset 3px 0 0 var(--mx-acc), 0 0 0 1px var(--mx-acc); }
.mx-rem__tail { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.mx-rem__amount { cursor: copy; }
.mx-rem__who { font-size: 11px; color: var(--mx-tx); white-space: nowrap; }
/* Микроистория остатка в окне деталей выплаты (владелец 14.09.2026). */
.mx-remhist__events { display: flex; flex-direction: column; gap: 3px; padding: 2px 4px 0; }
.mx-remhist__ev { display: flex; align-items: baseline; gap: 8px; font-size: 11px; color: var(--mx-tx2); min-width: 0; }
.mx-remhist__at { flex: 0 0 auto; color: var(--mx-tx3); }
.mx-remhist__what { flex: 1 1 auto; min-width: 0; color: var(--mx-tx); }
.mx-remhist__who { flex: 0 0 auto; color: var(--mx-tx3); white-space: nowrap; }
/* Прошлая (заменённая) расписка — одной тихой строкой без кнопок (владелец
   19.09.2026): видно, что было, а нажать нечего. Приглушаем весь блок, чтобы
   глаз сразу шёл к текущей расписке и её кнопкам. */
.mx-remhist--past { opacity: .62; }
.mx-remhist--past .mx-chip { background: var(--mx-s2); color: var(--mx-tx2); }
/* правка портала (19.09.2026): подпись и вложения сообщения бота — под его
   строкой единого журнала (на телефоне подсказки `title` нет). */
.mx-journal__sub { display: flex; flex-direction: column; gap: 4px; padding: 0 0 4px 12px; min-width: 0; }
/* Журнал сообщений бота в чат отчёта (владелец 14.09.2026). Подпись сообщения
   МОНОШИРИННО: её читают, сверяя с тем, что видно в Telegram, — перенос строк
   там значим, а пропорциональный шрифт съедает выравнивание. Движения нет:
   `prefers-reduced-motion` у владельца включён системно. */
.mx-botlog__msg { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: 8px; background: var(--mx-s2); box-shadow: inset 0 0 0 1px var(--mx-line); min-width: 0; }
.mx-botlog__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 11px; min-width: 0; }
.mx-botlog__at { flex: 0 0 auto; color: var(--mx-tx3); }
.mx-botlog__act { flex: 0 0 auto; color: var(--mx-tx); font-weight: 520; }
.mx-botlog__who { flex: 0 0 auto; color: var(--mx-tx3); white-space: nowrap; }
.mx-botlog__ref { flex: 0 0 auto; color: var(--mx-tx3); }
.mx-botlog__link { flex: 0 0 auto; color: var(--mx-acc); text-decoration: none; border-bottom: 1px solid var(--mx-acc-glow); }
.mx-botlog__link:hover { border-bottom-color: var(--mx-acc); }
.mx-botlog__cap { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; line-height: 1.45; color: var(--mx-tx2); white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.mx-botlog__files { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
/* Значок завершения выплаты: галка — завершена (остаток в долге), кружок — ждёт. */
.mx-rem__mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; box-sizing: border-box; }
.mx-rem__mark--done { background: var(--mx-ok-soft); color: var(--mx-ok); box-shadow: inset 0 0 0 1px var(--mx-ok); }
.mx-rem__mark--done svg { width: 11px; height: 11px; }
.mx-rem__mark--wait { box-shadow: inset 0 0 0 1.5px var(--mx-tx3); opacity: .55; }
/* Доставка чека доплаты: галка — ушёл в чат, восклицание — не ушёл. */
.mx-rem__chat { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; flex: 0 0 auto; }
.mx-rem__chat--ok { background: var(--mx-ok-soft); color: var(--mx-ok); }
.mx-rem__chat--ok svg { width: 11px; height: 11px; }
.mx-rem__chat--fail { background: var(--mx-dng-soft, rgba(200, 60, 60, .12)); color: var(--mx-dng, #b3261e); }
.mx-rem.is-closed { opacity: .82; }
.mx-rem.is-closing { background: var(--mx-ok-soft); box-shadow: inset 3px 0 0 var(--mx-ok), 0 0 0 1px var(--mx-ok); cursor: default; }
.mx-rem__done { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--mx-ok); color: #fff; }
.mx-rem__done svg { width: 14px; height: 14px; }
/* Вкладка «Остатки» горит зелёным, пока есть оплаченный остаток, который можно закрыть. */
.mx-tab.is-attn { color: var(--mx-ok); box-shadow: inset 0 0 0 1px var(--mx-ok); }
.mx-tab.is-attn.is-active { background: var(--mx-ok-soft); color: var(--mx-ok); }
/* ============================================================
   ОСТАТКИ V2 (правка портала, владелец 14.09.2026)
   ============================================================ */
/* Порог «реквизит от» — вторая плашка шапки рядом с поправкой к объёму. Вид у
   них ОДИН (это настройки одного ряда), разнятся только подпись и ширина поля:
   у порога число до шести знаков и без знака. Разницу «личная / общая на
   команду» несёт подсказка, а не цвет: два разных цвета в ряду читались бы как
   «одна из них сломана». */
.mx-adjust--team .mx-adjust__input { width: 74px; }
/* Рамка «все» — порога у неё нет: плашка показывает умолчание портала и
   выглядит подписью, а не полем. Галочки у неё нет вовсе. */
.mx-adjust--team.is-locked { background: none; box-shadow: inset 0 0 0 1px var(--mx-line); }
.mx-adjust--team.is-locked:hover { background: none; }
.mx-adjust--team.is-locked .mx-adjust__input { color: var(--mx-tx3); cursor: default; }

/* Заглушка выплаты в связке — ниже, в разделе «СВЯЗКА С ОСТАВЛЕННЫМ
   РЕКВИЗИТОМ»: 14.09.2026 у неё поменялся состав (чип, три числа, пометка), и
   держать половину правил здесь, а половину там значило бы спорить с самим
   собой порядком файла. */

/* Тумблер «создать ордер по остатку»: живёт в ПОДВАЛЕ окна, рядом со своей
   кнопкой «перевести в долг» (вид — там же, ниже). Показывается только при
   сумме от порога команды. Прячем `hidden`-ом: у ряда раскладка flex, и без
   явного правила бокс остался бы на месте. */
.mx-remfix__order { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1 1 100%; min-width: 0; }
.mx-remfix__order[hidden] { display: none; }
.mx-remfix__hint { font-size: 10px; color: var(--mx-tx3); min-width: 0; }
.mx-toggle-row--sm { height: 28px; font-size: 10px; }
/* Ряд действий по остатку в окне закрытой выплаты: кнопки своим рядом, без
   рамки — рамка уже есть у блока остатка над ним. */
.mx-remfix--acts { box-shadow: none; padding: 0 2px; gap: 8px; }

/* Окно доплаты: список чеков-кандидатов. Разметка общая с полкой завершения
   (`.mx-shelf` + `.mx-receipt`), своё здесь только галочка выбора и статичная
   сумма чека исполнителя — её на сервер не шлют, и поля у неё нет. */
.mx-deliver__row { opacity: .58; transition: opacity var(--mx-mid), box-shadow var(--mx-mid); }
.mx-deliver__row.is-on { opacity: 1; box-shadow: inset 0 0 0 1px var(--mx-line); }
.mx-deliver__check {
  width: 20px; height: 20px; flex: 0 0 auto; padding: 0; border: 0;
  border-radius: var(--mx-r-sm); background: var(--mx-s3); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px var(--mx-line);
  transition: background var(--mx-mid), box-shadow var(--mx-mid), transform var(--mx-mid);
}
.mx-deliver__check:hover { box-shadow: inset 0 0 0 1px var(--mx-acc); }
.mx-deliver__check.is-on { background: var(--mx-ok); box-shadow: inset 0 0 0 1px var(--mx-ok); }
.mx-deliver__check.is-on svg { width: 12px; height: 12px; }
/* Отклик на выбор — движением, а не вспышкой (правило владельца 19.08.2026). */
.mx-deliver__check:active { transform: scale(.9); }
.mx-deliver__amount { width: 108px; text-align: right; font-size: 12px; font-weight: 520; color: var(--mx-tx2); flex: 0 0 auto; }

/* Полка окна завершения: чеки остатка идут после разделителя «остаток». */
.mx-shelf__divider { display: flex; align-items: center; gap: 8px; padding: 4px 4px 0; }
.mx-shelf__divider .mx-hist__label { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mx-warn); }

/* ============================================================
   ЗАЯВКИ ПРИЁМА В ОКНЕ ЗАВЕРШЕНИЯ (правка портала, владелец 14.09.2026)
   ============================================================ */
/* «Небольшой блок с суммой, номером ордера приема и статусом» НАД строчкой
   «итого». Окно завершения бывает узким (на телефоне — во весь экран), и
   строка обязана оставаться ОДНОЭТАЖНОЙ: сумма и номер держат ширину, статус
   и время — по содержимому, лишнее обрезается, за край не выходит ничего. */
.mx-payins { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mx-payins__note { padding: 2px 4px 0; }
.mx-payins__list { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* «Показать все» раскрывает список целиком — у выплаты их бывает десятки,
   поэтому высота ограничена, а не растягивает окно до края экрана. */
.mx-payins__list.is-all { max-height: 200px; overflow-y: auto; overscroll-behavior: contain; }
.mx-payins__row {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 4px 8px; border-radius: var(--mx-r-sm);
  box-shadow: inset 0 0 0 1px var(--mx-line);
}
/* Распорка остаётся распоркой: правило `> *` со сбросом flex её бы придавило,
   и время уехало бы к статусу вместо правого края. */
.mx-payins__row .mx-pane__spacer { flex: 1 1 auto; min-width: 4px; }
.mx-payins__amount { flex: 0 0 auto; font-size: 12px; font-weight: 520; color: var(--mx-tx); white-space: nowrap; }
.mx-payins__row > .mx-copy--id { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-payins__row > .mx-status { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mx-payins__doc { display: inline-flex; align-items: center; color: var(--mx-tx3); }
/* Чек заявки открывается ссылкой, когда адрес известен (заявка ещё в кадре).
   Значок — не кнопка, поэтому мобильный `min-height: 40px` ему не нужен, а
   вот отклик на наведение нужен: иначе ссылка неотличима от значка. */
.mx-payins__doc--link { color: var(--mx-acc); }
.mx-payins__doc--link:hover { color: var(--mx-acc-raw); }
/* правка портала (владелец 15.09.2026): куда уехал чек заявки. Слово длинное,
   а строка одноэтажная — режем его, как и статус, а не переносим строку. */
.mx-payins__row > .mx-payins__sent { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Подсказка о неподтверждённой заявке с чеком: строка-кнопка того же вида, что
   предупреждения окна (`.mx-note--warn`), но нажимаемая — она показывает
   заявку в колонке приёма. */
/* `font-family` — а не `font`: шрифт у кнопки свой, но размер и междустрочье
   обязаны остаться от `.mx-note` (обе — один класс по весу, и `font` перебил бы
   их целиком). */
.mx-payins__pend {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 0; cursor: pointer; font-family: inherit; color: inherit;
}
.mx-payins__pend > span:last-child { flex: 1 1 auto; min-width: 0; }
.mx-payins__at { flex: 0 0 auto; font-size: 11px; color: var(--mx-tx3); white-space: nowrap; }

/* ============================================================
   СВЯЗКА С ОСТАВЛЕННЫМ РЕКВИЗИТОМ (правка портала, владелец 14.09.2026)
   ============================================================ */
/* Дословно: «поменять внешний вид у ордера, у которого есть созданный реквизит
   (который мы создавали с остатком больше положенного)». Такая связка живёт не
   как все: выплата уже уехала в «Остатки», а реквизит слева остался живым, и
   приём по нему сам гасит долг. Отмечаем её тёплой подложкой и левой кромкой —
   тем же приёмом, каким отмечены подсветка и закрепление, только цветом
   `--mx-warn`. Подсветка и закрепление ГЛАВНЕЕ (оператор сам навёл или
   закрепил), поэтому подложка отступает, а кромка остаётся: по ней связку и
   узнают в ленте. */
.mx-pair.is-kept:not(.is-hl):not(.is-pin) {
  background: var(--mx-warn-soft);
  box-shadow: inset 3px 0 0 var(--mx-warn);
}
.mx-pair.is-kept.is-hl { box-shadow: inset 3px 0 0 var(--mx-warn), inset 0 0 0 1px var(--mx-acc-glow); }
.mx-pair.is-kept.is-pin { box-shadow: inset 3px 0 0 var(--mx-warn), 0 0 0 1px var(--mx-acc); }
/* Половина выплаты у такой связки стоит на своём светлом фоне — без тёплой
   примеси она читалась бы как чужая вставка посреди отмеченной строки. */
.mx-pair.is-kept .mx-pair__side--pay { background: color-mix(in srgb, var(--mx-warn) 7%, var(--mx-s1)); }

/* Заглушка выплаты: та же высота, что у живой строки, но без кнопок — выплата
   уже в «Остатках», и «завершить» с «вернуть в пул» у неё нет. Курсор и
   подсветка говорят, что строка открывается. */
.mx-pair__stub { cursor: pointer; border-radius: var(--mx-r-md); padding: 2px 4px; margin: -2px -4px; transition: background var(--mx-mid); }
.mx-pair__stub:hover { background: color-mix(in srgb, var(--mx-warn) 10%, transparent); }
.mx-pair__stub:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--mx-acc); }
.mx-pair__stub-chip { flex: 0 0 auto; font-weight: 600; }
/* Три числа — главное содержимое заглушки, ради них она и стоит на месте
   выплаты. Подпись мелкая и приглушённая, само число — крупное: читается пара
   «что» + «сколько», а не сплошная строка мелкого текста. */
.mx-pair__stub-sums { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.mx-pair__stub-sum { display: inline-flex; align-items: baseline; gap: 4px; flex: 0 0 auto; white-space: nowrap; }
.mx-pair__stub-sum + .mx-pair__stub-sum::before { content: '·'; color: var(--mx-tx3); }
.mx-pair__stub-key { font-size: 10px; color: var(--mx-tx3); }
.mx-pair__stub-val { font-size: 13px; font-weight: 560; color: var(--mx-tx); }
.mx-pair__stub-sum.is-due .mx-pair__stub-val { color: var(--mx-warn); }
.mx-pair__stub-sum.is-clear .mx-pair__stub-val { color: var(--mx-ok); }
.mx-pair__stub-word { flex: 0 0 auto; white-space: nowrap; }
/* Правка портала (владелец 19.09.2026): пометки «реквизит оставлен» на
   заглушке связки больше нет — реквизит виден слева в той же связке, полная
   фраза живёт в `title` строки; вместе с ней снято и её правило узкой колонки
   (`.mx-app.is-tight`). На строке вкладки «Остатки» пометка осталась (ниже):
   там реквизита в строке нет. */

/* Пометка «реквизит оставлен» на строке вкладки «Остатки» — контуром, а не
   заливкой: рядом с ней уже стоят залитые чипы остатка и покрытия, и
   четвёртое пятно цвета читалось бы как ещё одно число. */
.mx-chip--kept {
  flex: 0 0 auto; white-space: nowrap; font-size: 10px;
  color: var(--mx-warn); background: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mx-warn) 40%, transparent);
}

/* ТУМБЛЕР «СОЗДАТЬ ОРДЕР ПО ОСТАТКУ» В ПОДВАЛЕ (владелец 14.09.2026).
   Он относится ТОЛЬКО к кнопке «перевести в долг» и потому стоит вплотную к
   ней: в разметке — сразу перед кнопкой, после распорки, то есть у правого
   края подвала. Ряд не тянется (`flex: 0 1 auto`) — иначе он отобрал бы место
   у самих кнопок; когда места не хватает, подвал переносит его целой строкой
   НАД кнопками, и связь не теряется — её держит подпись «при завершении с
   остатком». Подсказка занимает внутри ряда свою строку: она и есть «под
   тумблером». */
/* Строка тумблера занимает ВСЮ ширину подвала и прижимает содержимое вправо
   (владелец 15.09.2026: «сместить вправо, чтобы она была под кнопкой скачать
   чек»). Раньше ряд был `flex: 0 1 auto`, но подсказка внутри него тянется на
   100 %, и ряд всё равно разрастался на всю строку — тумблер оставался у левого
   края, а подсказка под ним у правого. */
.mx-remfix__order--foot { flex: 1 1 100%; justify-content: flex-end; align-items: center; gap: 4px 8px; min-width: 0; }
/* Перенос строки в подвале НЕ должен уносить кнопки к левому краю: распорка
   выравнивает только первую строку, а перенесённая идёт от начала. Замер в
   Chrome 14.09.2026 — «завершить с остатком» и «завершить» уехали влево, как
   только тумблер занял свою строку. Правило узкое, ровно для окна завершения:
   у остальных окон подвал в одну строку и распорки хватает. */
.mx-app .mx-overlay[data-modal="complete"] .mx-modal__foot { justify-content: flex-end; }
.mx-remfix__tie {
  flex: 0 0 auto; font-size: 10px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--mx-warn); white-space: nowrap;
}
.mx-remfix__order--foot .mx-remfix__hint { flex: 1 1 100%; text-align: right; }

/* Правка портала (27.09.2026, ТЗ окна разбора чека, раздел F): чек заявки в
   строке приёма — те же ПЯТЬ состояний и те же цвета, что у скрепки «Приёма»
   и «Истории» (`css/ui/doc-clip.css`): серый контур — проверки не было,
   синий с дугой — проверяем, зелёный — подлинный и сошлось, янтарный —
   подлинный, но чего-то не смотрели, красный — не прошёл или расхождение.
   Форма кнопки — своя, страницы. «Проверяем» читается и БЕЗ движения: дуга
   нарисована рамкой, вращение — поверх (`prefers-reduced-motion` выше глушит
   его до одного оборота, а у владельца режим включён системно). Прежние три
   класса (`--ok/--pending/--fail`) выше остаются для данных без состояния. */
.mx-order__doc { position: relative; }
.mx-order__doc--none { background: transparent; color: var(--mx-tx3); box-shadow: inset 0 0 0 1px var(--mx-line2); }
.mx-order__doc--busy { --mx-doc-busy: #2f6fd8; background: color-mix(in srgb, var(--mx-doc-busy) 12%, transparent); color: var(--mx-doc-busy); }
html[data-theme="dark"] .mx-order__doc--busy { --mx-doc-busy: #86b4ff; }
.mx-order__doc--busy::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid transparent;
  border-top-color: var(--mx-doc-busy); pointer-events: none; animation: mx-doc-rot .9s linear infinite; }
@keyframes mx-doc-rot { to { transform: rotate(360deg); } }
.mx-order__doc--warn { background: var(--mx-warn-soft); color: var(--mx-warn); }
.mx-order__doc--bad { background: var(--mx-dng-soft); color: var(--mx-dng); }
/* Правка портала (владелец 27.09.2026, опрос): причина тревоги у скрепки —
   бейдж «!» (реквизит не наш, операция не выполнена), как у общей скрепки
   `doc-clip.css`. Абсолютный — размер строки не меняет. */
.mx-order__docbd { position: absolute; right: -5px; top: -5px; min-width: 13px; height: 13px; padding: 0 3px; box-sizing: border-box;
  border-radius: 7px; display: grid; place-items: center; font-size: 9px; font-weight: 800; line-height: 1; color: #fff; background: var(--mx-dng);
  box-shadow: 0 0 0 2px var(--mx-bg); pointer-events: none; }

/* ДОКУМЕНТЫ ОТКРЫВАЮТСЯ В ОБЩЕМ ОКНЕ ПОРТАЛА (правка портала, 27.09.2026, ТЗ
   `docs/ТЗ_ОКНО_РАЗБОРА_ЧЕКА.md`): миниатюры полки, листы предпросмотра, чек
   заявки в окне заявки и в блоке заявок, «чем завершили», чипы расписок стали
   КНОПКАМИ (`open-doc`/`view-receipt`), а не ссылками в новую вкладку и не
   встроенным `<embed>`. Наведение меняет только цвет и тень — размер не
   трогаем (ловушка №4 CLAUDE.md). */
.mx-thumb--link { text-align: left; background: none; padding: 0; }
.mx-doc-page__link { display: block; width: 100%; padding: 0; text-align: left; cursor: pointer; }
.mx-doc-page__sheet--doc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--mx-tx3);
  font-size: 11px;
  transition: color var(--mx-fast), box-shadow var(--mx-fast);
}
.mx-doc-page__link:hover .mx-doc-page__sheet--doc { color: var(--mx-acc); box-shadow: inset 0 0 0 1px var(--mx-acc); }
.mx-doc-page__link:focus-visible .mx-doc-page__open { opacity: 1; }
.mx-doc-preview--open {
  /* окно заявки обычного размера: без своей высоты лист схлопывался бы в полоску */
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  color: var(--mx-tx3);
  cursor: pointer;
  transition: color var(--mx-fast), box-shadow var(--mx-fast);
}
.mx-doc-preview--open:hover { color: var(--mx-acc); box-shadow: inset 0 0 0 1px var(--mx-acc); }
.mx-doc-preview__doc { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; }
.mx-doc-preview__doc svg { width: 28px; height: 28px; }
.mx-doc-preview__shot { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--mx-s1); }
.mx-payins__doc--link { padding: 0; }
.mx-chip--doc[data-act="open-doc"] { cursor: pointer; }
.mx-chip--doc[data-act="open-doc"]:hover { color: var(--mx-acc); }