/* ==========================================================================
   DropHub — Маркет (dealer.html, логика — market.js)

   Раскладка по образцу (маркет CSGORUN): над товаром строка текстовых
   фильтров без рамок, под ней панель поиска отдельными блоками —
   название, потолок цены, быстрые суммы, шестерёнка, —
   и плотная сетка карточек: износ и цена сверху, скин по центру на
   водяном знаке, оружие и раскраска снизу, кнопки покупки не видно, пока
   на карточку не навели.

   Оформление наше, а не образца: фиолетовые подложки и обводки главной
   (index.css, --ht-*), лаймовый акцент вместо оранжевого, Oswald в
   заголовке, Inter в тексте, цвета редкостей — те же, что у карточек по
   всему сайту (drophub.skincard.css).

   Префикс mkt-, а не прежний mk-: под старые классы (.mk-page,
   .mk-filters, .pg-grid) в mobile.css остались правила раскладки с
   боковой колонкой, и новые блоки не должны под них попадать.

   Телефоны тормозят: ни одного backdrop-filter, анимируются только
   transform и opacity, при prefers-reduced-motion — ничего.
   ========================================================================== */

/* Фон страницы — тот же глубокий индиго, что у главной и подвала (подвал
   рисовался под #1A1430). Камуфляж из home.css лежит поверх, как везде. */
body.mk-body { background-color: #1A1430; }

.mkt {
  --mk-surface:   #221B3E;   /* панель поиска, выпадашки */
  --mk-surface-2: #2C2452;   /* наведение, кнопки в выпадашках */
  --mk-line:      #3A3166;   /* разделители и обводки */
  --mk-text:      #F5F3FF;
  --mk-dim:       #BDB7DE;   /* текст фильтров, 8.5:1 на панели */
  --mk-mute:      #8C86B3;
  --mk-lime:      #D7FF00;   /* акцент сайта */
  --mk-card:      #171129;   /* тёмный верх карточки */

  max-width: 1560px; margin: 0 auto;
  padding: 18px var(--pad-x, 20px) 48px;
  font-family: var(--f-body);
  color: var(--mk-text);
}
.mkt [hidden] { display: none !important; }
.mkt button { font: inherit; color: inherit; }
.mkt svg { display: block; flex: none; }

/* ─────────── заголовок ─────────── */

.mkt-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 6px 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.mkt-head h1 {
  margin: 0;
  font-family: var(--f-cond); font-size: clamp(24px, 2.4vw, 32px); font-weight: 700;
  line-height: 1.05; letter-spacing: .02em; text-transform: uppercase;
}
.mkt-head p { margin: 4px 0 0; font-size: 13px; color: var(--mk-dim); }
.mkt-head__side { flex: none; display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; }
/* второй «Найдено» — только на телефоне (см. @media ниже) */
.mkt-found.mkt-found--m { display: none; margin: 0; }
.mkt-inv {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--mk-dim); text-decoration: none;
  transition: color .14s;
}
.mkt-inv:hover { color: #fff; }
.mkt-inv b { color: var(--mk-lime); font-variant-numeric: tabular-nums; }

/* ─────────── строка фильтров ───────────
   Как на образце — просто текст без рамок: сортировка и три выпадашки. */

.mkt-bar {
  display: flex; align-items: center; gap: 4px 24px;
  min-height: 34px; margin-bottom: 8px;
}
.mkt-tab {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--mk-dim); white-space: nowrap;
  transition: color .14s;
}
.mkt-tab:hover, .mkt-tab[aria-expanded="true"] { color: #fff; }
.mkt-tab.is-on, .mkt-tab.is-set { color: var(--mk-lime); }
.mkt-tab svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* стрелка, по которой идёт порядок, — ярче второй */
.mkt-tab .a-up, .mkt-tab .a-dn { transition: opacity .14s; }
.mkt-tab[data-dir="desc"] .a-up, .mkt-tab[data-dir="asc"] .a-dn { opacity: .4; }
.mkt-tab:not(.is-on) .a-up, .mkt-tab:not(.is-on) .a-dn { opacity: 1; }

/* ▾ перед подписью — треугольник рамкой, без картинки */
.mkt-caret {
  width: 0; height: 0; flex: none;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .16s;
}
.mkt-dd.is-open .mkt-caret { transform: rotate(180deg); }
.mkt-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: inline-grid; place-items: center;
  background: var(--mk-lime); color: #0E1102;
  font-size: 11px; font-weight: 800; font-style: normal; line-height: 1;
}
.mkt-found {
  margin-left: auto; font-size: 13px; color: var(--mk-mute); white-space: nowrap;
}
.mkt-found b { color: var(--mk-text); font-variant-numeric: tabular-nums; }

/* ─────────── панель поиска ───────────
   Раньше это была одна сплошная фиолетовая полоса с тонкими
   разделителями, и глазу было не понятно, где кончается одно поле и
   начинается другое. Теперь каждый блок — отдельная плашка со своим
   фоном, обводкой и промежутком до соседа, все одной высоты:

     [⌕ Название             ×]  [Цена до   ◎]  [◎20] [◎100] [◎500] [◎1000]  [⚙]

   Поля ввода — тёмные «колодцы» (#0F1011, как панели шапки), суммы и
   шестерёнка — кнопки на тон светлее (#16171A), выбранная сумма — лаймом.
   Вместо знака «₽» у сумм — монета сайта (.kz-cur из home.css). */

.mkt-panel {
  --mk-field:   #0F1011;   /* поля ввода */
  --mk-btn:     #16171A;   /* кнопки сумм и шестерёнка */
  --mk-btn-hi:  #1D1F23;   /* они же при наведении */
  --mk-edge:    #1E2023;   /* обводка блока */
  --mk-edge-hi: #3A3D44;   /* обводка при наведении */

  position: relative; z-index: 3;      /* выпадашка шестерёнки — над сеткой */
  display: flex; align-items: stretch; gap: 8px;
  height: 46px; margin-bottom: 16px;
}

.mkt-fld {
  position: relative; display: flex; align-items: center; min-width: 0;
  border-radius: 10px; border: 1px solid var(--mk-edge);
  background: var(--mk-field);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45), 0 8px 18px -14px rgba(0, 0, 0, .9);
  cursor: text;
  transition: border-color .14s, box-shadow .14s;
}
.mkt-fld:hover { border-color: var(--mk-edge-hi); }
.mkt-fld:focus-within {
  border-color: rgba(215, 255, 0, .6);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45), 0 0 0 3px rgba(215, 255, 0, .12);
}

.mkt-name { flex: 1 1 auto; gap: 10px; padding: 0 10px 0 14px; }
.mkt-name svg { width: 18px; height: 18px; fill: none; stroke: var(--mk-mute); stroke-width: 2; stroke-linecap: round; transition: stroke .14s; }
.mkt-name:focus-within svg { stroke: var(--mk-lime); }
.mkt-panel input {
  width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; outline: none;
  background: none; color: var(--mk-text);
  font: inherit; font-size: 14px; font-weight: 500;
}
.mkt-panel input::placeholder { color: var(--mk-mute); opacity: 1; }
.mkt-x {
  flex: none; width: 24px; height: 24px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: var(--mk-btn-hi); color: var(--mk-dim); font-size: 16px; line-height: 1;
  transition: background-color .14s, color .14s;
}
.mkt-x:hover { background: var(--mk-edge-hi); color: #fff; }

.mkt-cap { flex: 0 0 190px; gap: 8px; padding: 0 12px 0 14px; }
.mkt-cap input { font-variant-numeric: tabular-nums; }
/* Подсказка «Цена до» пропадает вместе с плейсхолдером, когда сумма
   введена, — тогда перед числом остаётся короткое «до». */
.mkt-cap__t { display: none; flex: none; font-size: 13px; font-weight: 600; color: var(--mk-mute); }
.mkt-cap:has(input:not(:placeholder-shown)) .mkt-cap__t { display: block; }
.mkt-cap .kz-cur, .mkt-field .kz-cur { flex: none; width: 18px; height: 18px; margin: 0; vertical-align: 0; }

/* Быстрые суммы — отдельная группа кнопок, у каждой своя рамка. */
.mkt-chips { flex: none; display: flex; gap: 6px; }
.mkt-chip {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 78px; height: 100%; padding: 0 14px;
  border: 1px solid var(--mk-edge); border-radius: 10px; cursor: pointer;
  background: var(--mk-btn); color: var(--mk-dim);
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: background-color .14s, border-color .14s, color .14s, box-shadow .14s, transform .14s;
}
.mkt-chip .kz-cur { flex: none; width: 16px; height: 16px; margin: 0; vertical-align: 0; }
.mkt-chip:hover { background: var(--mk-btn-hi); border-color: rgba(215, 255, 0, .45); color: #fff; }
.mkt-chip:active { transform: translateY(1px); }
/* Выбранная сумма светится лаймом — у образца на этом месте тёплый
   оранжевый градиент, у нас акцент сайта. */
.mkt-chip.is-on, .mkt-chip.is-on:hover {
  border-color: transparent;
  background: linear-gradient(180deg, #ECFF5C 0%, #C8F000 55%, #A9CC00 100%);
  color: #0E1102;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 1px rgba(215, 255, 0, .35), 0 0 18px -3px rgba(215, 255, 0, .6);
}

/* Шестерёнка — своя квадратная кнопка той же высоты. */
.mkt-gearwrap { flex: none; }
.mkt-gear {
  position: relative; width: 46px; height: 100%;
  border: 1px solid var(--mk-edge); border-radius: 10px; cursor: pointer;
  display: grid; place-items: center; background: var(--mk-btn); color: var(--mk-dim);
  transition: color .14s, background-color .14s, border-color .14s;
}
.mkt-gear:hover, .mkt-gear[aria-expanded="true"] { color: #fff; background: var(--mk-btn-hi); border-color: rgba(215, 255, 0, .45); }
.mkt-gear svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* в настройках что-то включено — шестерёнка лаймовая и с точкой */
.mkt-gear.is-set { color: var(--mk-lime); }
.mkt-gear.is-set::after {
  content: ''; position: absolute; top: 7px; right: 7px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--mk-lime);
  box-shadow: 0 0 6px rgba(215, 255, 0, .7);
}

/* фокус с клавиатуры — лаймовое кольцо, как в подвале */
.mkt-tab:focus-visible, .mkt-chip:focus-visible, .mkt-gear:focus-visible, .mkt-x:focus-visible,
.mkt-inv:focus-visible, .mkt-pop button:focus-visible, .mkt-more button:focus-visible, .mkt-none button:focus-visible {
  outline: 2px solid var(--mk-lime); outline-offset: 2px; border-radius: 8px;
}
.mkt-chip:focus-visible, .mkt-gear:focus-visible { border-radius: 10px; }

/* ─────────── выпадашки ─────────── */

.mkt-dd { position: relative; }
/* Выпадашки — в тех же тёмных тонах, что и блоки панели поиска, из
   которых открывается шестерёнка: подложка #0F1011, наведение #16171A. */
.mkt-pop {
  --mk-surface: #0F1011; --mk-surface-2: #16171A; --mk-line: #1E2023;
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 80;
  width: max-content; min-width: 250px; max-width: min(340px, calc(100vw - 24px));
  max-height: min(430px, 70vh); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px;
  border-radius: 12px; border: 1px solid #2A2C31;
  background: var(--mk-surface);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .7);
  scrollbar-width: thin; scrollbar-color: var(--mk-line) transparent;
}
.mkt-pop--end { left: auto; right: 0; }
.mkt-pop__head { display: none; }
.mkt-pop__sub {
  margin: 8px 10px 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mk-mute);
}
.mkt-pop__sub:first-child { margin-top: 4px; }

.mkt-opt {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 38px; padding: 0 10px; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--mk-text);
  transition: background-color .12s;
}
.mkt-opt:hover { background: var(--mk-surface-2); }
.mkt-opt input {
  position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none;
}
.mkt-box {
  position: relative; flex: none; width: 17px; height: 17px; border-radius: 5px;
  border: 1.5px solid #4A4D55; background: rgba(0, 0, 0, .3);
  transition: background-color .12s, border-color .12s;
}
.mkt-opt input:checked + .mkt-box { background: var(--mk-lime); border-color: var(--mk-lime); }
.mkt-opt input:checked + .mkt-box::after {
  content: ''; position: absolute; left: 4.5px; top: 1px; width: 5px; height: 9px;
  border: solid #0E1102; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.mkt-opt input:focus-visible + .mkt-box { outline: 2px solid var(--mk-lime); outline-offset: 2px; }
.mkt-opt input:disabled ~ * { opacity: .45; }
.mkt-opt:has(input:disabled) { cursor: not-allowed; }
.mkt-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px -1px var(--c); }
.mkt-opt__t { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.mkt-opt__t small { font-size: 11px; font-weight: 500; color: var(--mk-mute); }
.mkt-opt em { flex: none; margin-left: 10px; font-style: normal; font-size: 12px; color: var(--mk-mute); font-variant-numeric: tabular-nums; }

.mkt-pop__foot {
  position: sticky; bottom: -6px; display: flex; gap: 6px;
  margin: 6px -6px -6px; padding: 8px;
  border-top: 1px solid var(--mk-line); background: var(--mk-surface);
}
.mkt-pop__foot button {
  flex: 1; height: 34px; border: 0; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 700;
  transition: background-color .14s, filter .14s;
}
.mkt-btn-ghost { background: var(--mk-surface-2); color: var(--mk-dim) !important; box-shadow: inset 0 0 0 1px #24262B; }
.mkt-btn-ghost:hover { background: #1D1F23; color: #fff !important; }
.mkt-btn-lime { background: var(--mk-lime); color: #0E1102 !important; }
.mkt-btn-lime:hover { filter: brightness(1.08); }

/* настройки за шестерёнкой */
.mkt-pop--gear { width: 280px; padding: 12px; }
.mkt-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.mkt-field > span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-mute); }
.mkt-field label {
  display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
  border-radius: 9px; border: 1px solid #24262B; background: #0A0A0B; cursor: text;
}
.mkt-field label:focus-within { border-color: rgba(215, 255, 0, .55); }
.mkt-field input {
  width: 100%; min-width: 0; padding: 0; border: 0; outline: none; background: none;
  color: var(--mk-text); font: inherit; font-size: 14px; font-variant-numeric: tabular-nums;
}
.mkt-field input::placeholder { color: var(--mk-mute); opacity: 1; }
.mkt-pop--gear .mkt-opt { margin: 0 -6px; }
.mkt-hint { margin: 2px 4px 6px 33px; font-size: 11px; line-height: 1.4; color: var(--mk-mute); }
.mkt-pop--gear .mkt-wide {
  width: 100%; height: 38px; margin-top: 8px; border: 0; border-radius: 9px; cursor: pointer;
  font-size: 13px; font-weight: 700;
}

.mkt-scrim { display: none; }

/* ─────────── сетка ─────────── */

.mkt-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;
  transition: opacity .15s;
}
/* новая выборка в пути (market.js apply) — прежние карточки приглушены */
.mkt-grid[aria-busy="true"] { opacity: .55; }

/* ─────────── карточка ───────────
   Сверху темнее, к низу насыщеннее цветом редкости; за скином — своя
   эмблема DropHub (шестигранник с молнией логотипа, 2026-10-15; раньше
   был чужой восьмиугольник). Кнопка — сама карточка: нажатие открывает
   подтверждение. */
.mkt-card {
  --rc: #4b69ff;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; min-width: 0;
  aspect-ratio: 140 / 172; padding: 10px;
  border: 0; border-radius: 10px; cursor: pointer;
  text-align: left; color: #fff;
  background:
    /* мягкий свет за скином */
    radial-gradient(62% 44% at 50% 46%, color-mix(in srgb, var(--rc) 28%, transparent), transparent 72%),
    /* свет снизу от полосы редкости — ниже и слабее, чтобы не глушить подпись */
    radial-gradient(120% 46% at 50% 114%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 70%),
    /* едва заметный блик сверху */
    linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 28%),
    /* основа: индиго, к низу насыщается редкостью; под подписью чуть темнее */
    linear-gradient(180deg,
      color-mix(in srgb, var(--rc) 9%, var(--mk-card)) 0%,
      color-mix(in srgb, var(--rc) 22%, #1A1430) 55%,
      color-mix(in srgb, var(--rc) 30%, #150F28) 82%,
      color-mix(in srgb, var(--rc) 40%, #1A1430) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 0 0 1px color-mix(in srgb, var(--rc) 18%, transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--rc) 70%, transparent);
  transition: transform .16s ease, box-shadow .16s ease;
  /* в сетке до 1 200 карточек (варианты скинов): невидимые не
     отрисовываются, высоту им даёт aspect-ratio, запас — contain-intrinsic-size */
  content-visibility: auto; contain-intrinsic-size: auto 210px;
}
/* Эмблема DropHub за скином: скруглённый шестиугольник вершиной вверх
   (как медальон баттлов), двойной контур, разомкнутый вокруг молнии из
   логотипа под углом монеты. SVG — только маска; цвет — светлый оттенок
   редкости, тающий от центра, поэтому вершины у цены и подписи гаснут. */
.mkt-card::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 47%;
  width: 82%; aspect-ratio: 1; transform: translate(-50%, -50%);
  --em: color-mix(in srgb, var(--rc) 45%, #fff);
  background: radial-gradient(closest-side, var(--em) 35%, color-mix(in srgb, var(--em) 50%, transparent) 75%, transparent 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000'%3E%3Cmask id='k'%3E%3Crect width='100' height='100' fill='%23fff' stroke='none'/%3E%3Cpath d='M11.5 2 5 12.2h4.3L7 20l7.2-10.8H9.8z' transform='translate(50 50) rotate(32) scale(4.4) translate(-9.6 -11)' fill='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/mask%3E%3Cg mask='url(%23k)'%3E%3Cpath d='M43.1 8Q50 4 56.9 8L82.9 23Q89.8 27 89.8 35L89.8 65Q89.8 73 82.9 77L56.9 92Q50 96 43.1 92L17.1 77Q10.2 73 10.2 65L10.2 35Q10.2 27 17.1 23Z' stroke-width='1.5'/%3E%3Cpath d='M43.9 13Q50 9.5 56.1 13L79 26.3Q85.1 29.8 85.1 36.8L85.1 63.3Q85.1 70.3 79 73.8L56.1 87Q50 90.5 43.9 87L21 73.8Q14.9 70.3 14.9 63.3L14.9 36.8Q14.9 29.7 21 26.2Z' stroke-width='.8' stroke-opacity='.45'/%3E%3C/g%3E%3Cpath d='M11.5 2 5 12.2h4.3L7 20l7.2-10.8H9.8z' transform='translate(50 50) rotate(32) scale(4.4) translate(-9.6 -11)' fill='%23000' fill-opacity='.08' stroke-width='.27' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000'%3E%3Cmask id='k'%3E%3Crect width='100' height='100' fill='%23fff' stroke='none'/%3E%3Cpath d='M11.5 2 5 12.2h4.3L7 20l7.2-10.8H9.8z' transform='translate(50 50) rotate(32) scale(4.4) translate(-9.6 -11)' fill='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/mask%3E%3Cg mask='url(%23k)'%3E%3Cpath d='M43.1 8Q50 4 56.9 8L82.9 23Q89.8 27 89.8 35L89.8 65Q89.8 73 82.9 77L56.9 92Q50 96 43.1 92L17.1 77Q10.2 73 10.2 65L10.2 35Q10.2 27 17.1 23Z' stroke-width='1.5'/%3E%3Cpath d='M43.9 13Q50 9.5 56.1 13L79 26.3Q85.1 29.8 85.1 36.8L85.1 63.3Q85.1 70.3 79 73.8L56.1 87Q50 90.5 43.9 87L21 73.8Q14.9 70.3 14.9 63.3L14.9 36.8Q14.9 29.7 21 26.2Z' stroke-width='.8' stroke-opacity='.45'/%3E%3C/g%3E%3Cpath d='M11.5 2 5 12.2h4.3L7 20l7.2-10.8H9.8z' transform='translate(50 50) rotate(32) scale(4.4) translate(-9.6 -11)' fill='%23000' fill-opacity='.08' stroke-width='.27' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .3;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.mkt-card__top {
  display: flex; align-items: center; gap: 6px; min-height: 18px;
}
.mkt-wear {
  flex: none; padding: 2px 6px; border-radius: 5px;
  background: rgba(10, 6, 24, .55); color: #EDEAFF;
  font-size: 10px; font-weight: 700; line-height: 14px; letter-spacing: .04em;
}
.mkt-price {
  margin-left: auto; min-width: 0;
  font-size: 13px; font-weight: 700; line-height: 18px; color: #F7F5FF;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.mkt-price .kz-cur { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
/* Не хватает баланса — цена приглушена; почему, скажет плашка или касание. */
.mkt-card.is-poor .mkt-price { color: rgba(247, 245, 255, .55); }

.mkt-card__pic { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; }
.mkt-card__pic img {
  display: block; width: 74%; height: auto; max-height: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45));
  transition: transform .2s ease;
}

/* Не-скины (наклейки, агенты, кейсы …, market.js cardCls): картинка
   Steam та же 4:3, но вокруг рисунка наклейки, нашивки, значка,
   граффити, брелока, кейса или ключа широкое пустое поле — крупнее,
   чтобы не терялись рядом со скинами. scale, а не transform: наведение
   (transform ниже) его не сбивает; лишнее поле обрезает карточка.
   Агент занимает кадр сам — как скин. */
.mkt-card--x .mkt-card__pic img { scale: 1.25; }
.mkt-card--agent .mkt-card__pic img { scale: none; }

.mkt-card__name {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  transition: opacity .14s;
}
.mkt-card__name b, .mkt-card__name u {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mkt-card__name b { font-size: 13px; font-weight: 700; line-height: 17px; color: #fff; }
.mkt-card__name u {
  font-size: 12px; font-weight: 600; line-height: 16px; text-decoration: none;
  color: color-mix(in srgb, var(--rc) 62%, #fff);
}
.mkt-card__name i { font-style: normal; margin-right: 4px; }
.mkt-st { color: #FF8A3D; }
.mkt-sv { color: #D4E157; }
.mkt-star { color: #FFC93C; margin-right: 3px !important; }

/* Плашка действия — на месте подписи, видна при наведении и в состояниях. */
.mkt-card__act {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1;
  min-height: 32px; padding: 3px 8px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--mk-lime); color: #0E1102;
  font-size: 13px; font-weight: 700; line-height: 1.15;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .14s, transform .14s;
}
.mkt-card.is-guest .mkt-card__act,
.mkt-card.is-poor .mkt-card__act { background: rgba(10, 6, 24, .82); color: #E3DEFF; }
.mkt-card.is-busy .mkt-card__act { background: rgba(10, 6, 24, .82); color: var(--mk-lime); }
.mkt-card.is-err .mkt-card__act { background: #E5384F; color: #fff; }
.mkt-card.is-done .mkt-card__act::before { content: '✓'; margin-right: 6px; }

.mkt-card.is-busy, .mkt-card.is-done, .mkt-card.is-err { cursor: default; }
.mkt-card.is-busy { cursor: progress; }
.mkt-card.is-poor { cursor: not-allowed; }
.mkt-card.is-busy .mkt-card__act, .mkt-card.is-done .mkt-card__act, .mkt-card.is-err .mkt-card__act,
.mkt-card:focus-visible .mkt-card__act { opacity: 1; transform: none; }
.mkt-card.is-busy .mkt-card__name, .mkt-card.is-done .mkt-card__name, .mkt-card.is-err .mkt-card__name,
.mkt-card:focus-visible .mkt-card__name { opacity: 0; }
.mkt-card:focus-visible { outline: 2px solid var(--mk-lime); outline-offset: 2px; }

@media (hover: hover) {
  .mkt-card:hover {
    transform: translateY(-3px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .1),
      inset 0 0 0 1px color-mix(in srgb, var(--rc) 50%, transparent),
      inset 0 -2px 0 var(--rc),
      0 12px 26px -14px color-mix(in srgb, var(--rc) 75%, transparent);
  }
  .mkt-card:hover::before { opacity: .46; transform: translate(-50%, -50%) scale(1.03); }
  .mkt-card:hover .mkt-card__pic img { transform: translateY(-4px) scale(1.05); }
  .mkt-card:hover .mkt-card__act { opacity: 1; transform: none; }
  .mkt-card:hover .mkt-card__name { opacity: 0; }
}

/* ─────────── пусто, подгрузка, сноска ─────────── */

.mkt-none {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 48px 16px; text-align: center;
  border-radius: 12px; border: 1px dashed var(--mk-line);
}
.mkt-none b { font-family: var(--f-cond); font-size: 22px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.mkt-none span { font-size: 13px; color: var(--mk-dim); }
.mkt-none button {
  margin-top: 8px; height: 40px; padding: 0 20px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--mk-lime); color: #0E1102; font-size: 13px; font-weight: 700;
}
.mkt-none button:hover { filter: brightness(1.08); }

.mkt-sentinel { height: 1px; }
.mkt-more { display: flex; justify-content: center; margin-top: 16px; }
.mkt-more button {
  height: 42px; padding: 0 24px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--mk-line); background: var(--mk-surface); color: var(--mk-dim);
  font-size: 13px; font-weight: 700;
  transition: background-color .14s, color .14s;
}
.mkt-more button:hover { background: var(--mk-surface-2); color: #fff; }
/* потолок сетки: «Показаны первые 1 200 из N — уточните фильтр» */
.mkt-ceil {
  margin: 16px auto 0; max-width: 520px; padding: 12px 16px; border-radius: 10px;
  border: 1px dashed var(--mk-line); color: var(--mk-dim);
  font-size: 13px; line-height: 1.45; text-align: center;
}
/* сервер списка не ответил — тот же блок, что «ничего не нашлось» */
.mkt-fail { margin-top: 4px; }

.mkt-note { margin: 20px 0 0; font-size: 12px; line-height: 1.5; color: var(--mk-mute); text-align: center; }
.mkt-note a { color: var(--mk-dim); text-decoration: underline; text-underline-offset: 2px; }
.mkt-note a:hover { color: #fff; }

/* ─────────── всплывающее сообщение ─────────── */

/* width: max-content — иначе у fixed-блока с left: 50% ширина по
   содержимому упирается в правую половину экрана, и на телефоне
   сообщение складывалось узким столбиком в три строки. */
.mkt-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 210;
  width: max-content; max-width: min(440px, calc(100vw - 24px)); padding: 11px 16px;
  border-radius: 12px; border: 1px solid var(--mk-line, #3A3166);
  background: #2C2452; color: #F5F3FF;
  font-family: var(--f-body); font-size: 13px; font-weight: 600; line-height: 1.4; text-align: center;
  box-shadow: 0 16px 34px rgba(6, 3, 16, .55);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.mkt-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.mkt-toast.is-ok { border-color: rgba(215, 255, 0, .5); }
.mkt-toast.is-err { border-color: rgba(255, 92, 116, .7); }

/* карточка скина в общем окне подтверждения (drophub.confirm.js) */
.kz-cf__skin.mkt-cf .mkt-cf__wear {
  margin-top: 10px; padding: 4px 10px; border-radius: 8px;
  background: rgba(160, 125, 255, .16); box-shadow: inset 0 0 0 1px rgba(160, 125, 255, .3); color: #E6E1FF;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
}

/* ─────────── ширина ───────────
   6 колонок на ~1200–1560 содержимого, 5 на ~1000–1200, 4 ниже,
   на телефоне 3 (от 430) и 2. */

@media (max-width: 1239px) { .mkt-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1039px) { .mkt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* планшет: названию нужно место — потолок и суммы поуже */
@media (min-width: 761px) and (max-width: 1039px) {
  .mkt-cap { flex-basis: 150px; }
  .mkt-chip { min-width: 0; padding: 0 11px; }
}

@media (max-width: 760px) {
  .mkt { padding-top: 12px; padding-bottom: 28px; }
  .mkt-head { margin-bottom: 10px; }
  .mkt-head p { font-size: 12px; }

  /* Строка фильтров уезжает вбок, а не переносится. Выпадашки здесь —
     нижние шторки (position: fixed), обрезка прокруткой им не мешает. */
  .mkt-bar {
    gap: 20px; margin: 0 calc(-1 * var(--pad-x, 12px)) 6px; padding: 0 var(--pad-x, 12px);
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .mkt-bar::-webkit-scrollbar { display: none; }
  /* «Найдено» в уезжающей строке обрезалось краем экрана — на телефоне
     оно стоит в заголовке, рядом со счётчиком инвентаря. */
  .mkt-bar .mkt-found { display: none; }
  .mkt-found.mkt-found--m { display: inline; font-size: 12px; }
  .mkt-head__side { gap: 4px 14px; }
  .mkt-inv { font-size: 12px; }

  /* Панель — в три ряда, вбок ничего не прокручивается: сверху название
     и шестерёнка, под ними цена «от» и «до» поровну, ниже четыре суммы. */
  .mkt-panel { flex-wrap: wrap; height: auto; gap: 6px; margin-bottom: 12px; }
  .mkt-panel > * { height: 44px; }
  /* основа «вся ширина минус шестерёнка» — она и переносит цены с
     суммами на следующие строки */
  .mkt-name { order: 1; flex: 1 1 calc(100% - 52px); padding: 0 8px 0 12px; }
  .mkt-gearwrap { order: 2; }
  .mkt-gear { width: 44px; }
  .mkt-cap { order: 4; flex: 1 1 calc(50% - 3px); min-width: 0; gap: 4px; padding: 0 8px 0 12px; }
  .mkt-cap--min { order: 3; }
  .mkt-cap .kz-cur { width: 16px; height: 16px; }
  .mkt-chips {
    order: 5; flex: 1 1 100%; min-width: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px;
  }
  .mkt-chip { min-width: 0; padding: 0 4px; gap: 3px; font-size: 12.5px; }
  .mkt-chip .kz-cur { width: 13px; height: 13px; }
  .mkt-panel input { font-size: 16px; }   /* меньше 16px — iOS приближает страницу при фокусе */
  .mkt-panel input::placeholder { font-size: 14px; }

  .mkt-grid { gap: 8px; }

  /* Нижняя шторка поверх полосы вкладок, с отступом под «чёлку» снизу. */
  .mkt-scrim:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 170;
    background: rgba(8, 5, 20, .62);
  }
  .mkt-pop, .mkt-pop--end, .mkt-pop--gear {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 175;
    width: auto; min-width: 0; max-width: none; max-height: 74vh;
    padding: 4px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0; border-width: 1px 0 0;
    box-shadow: 0 -16px 40px rgba(6, 3, 16, .6);
  }
  .mkt-pop__head {
    position: sticky; top: -4px; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 -12px 4px; padding: 14px 12px 10px;
    background: var(--mk-surface); border-bottom: 1px solid var(--mk-line);
  }
  .mkt-pop__head::before {
    content: ''; position: absolute; left: 50%; top: 5px; width: 36px; height: 4px; margin-left: -18px;
    border-radius: 2px; background: var(--mk-line);
  }
  .mkt-pop__head b { font-family: var(--f-cond); font-size: 17px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
  .mkt-pop__head button {
    width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
    background: var(--mk-surface-2); color: var(--mk-dim); font-size: 20px; line-height: 1;
  }
  .mkt-opt { min-height: 46px; font-size: 14px; }
  .mkt-pop__foot { margin: 8px -12px calc(-12px - env(safe-area-inset-bottom, 0px)); padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); bottom: calc(-12px - env(safe-area-inset-bottom, 0px)); }
  .mkt-pop__foot button { height: 44px; font-size: 14px; }
  .mkt-pop--gear .mkt-opt { margin: 0; }
  .mkt-field input { font-size: 16px; }

  /* Сообщение — над полосой вкладок. */
  .mkt-toast { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* Общее окно подтверждения размывает фон — на телефоне это дорого. */
  body .kz-cf { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, .8); }
}

@media (max-width: 600px) {
  .mkt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mkt-card { padding: 8px; border-radius: 9px; }
  .mkt-card__name b { font-size: 12px; line-height: 16px; }
  .mkt-card__name u { font-size: 11px; line-height: 15px; }
  .mkt-price { font-size: 12px; }
  .mkt-wear { padding: 1px 5px; font-size: 9.5px; }
  .mkt-card__act { left: 6px; right: 6px; bottom: 6px; min-height: 30px; font-size: 11px; }
}
@media (max-width: 429px) {
  .mkt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkt-card__name b { font-size: 13px; line-height: 17px; }
  .mkt-card__name u { font-size: 12px; line-height: 16px; }
  .mkt-price { font-size: 13px; }
  .mkt-card__act { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .mkt-card::before { transition: none; }
  .mkt-card:hover::before { transform: translate(-50%, -50%); }
  .mkt *, .mkt-toast { transition: none !important; animation: none !important; }
  .mkt-card:hover, .mkt-card:hover .mkt-card__pic img { transform: none !important; }
}