/* Direct MM2 exchanges. Deliberately scoped to avoid changing the marketplace. */
.xt {
  --xt-bg: #f8f9fc; --xt-panel: #fff; --xt-text: #202235; --xt-muted: #667085;
  --xt-line: #e8eaf1; --xt-soft: #f3efff; --xt-purple: #7434e9; --xt-tint: #faf7ff;
  --xt-green: #087a5a; --xt-green-bg: #eaf8f2; --xt-red: #bb324c; --xt-shadow: 0 12px 40px #24213b08;
  color: var(--xt-text); font-family: Manrope, system-ui, sans-serif; font-size: 14px; line-height: 1.55;
}
body.theme-dark .xt {
  --xt-bg: #151927; --xt-panel: #1e2435; --xt-text: #eef0fb; --xt-muted: #b2b9ce;
  --xt-line: #333b51; --xt-soft: #322649; --xt-purple: #b38aff; --xt-tint: #252039;
  --xt-green: #77dfb8; --xt-green-bg: #173f36; --xt-red: #ffa1b0; --xt-shadow: 0 12px 40px #0002;
}
.xt *, .xt *::before, .xt *::after { box-sizing: border-box; }
.xt [hidden] { display: none !important; }
.xt button, .xt input, .xt textarea, .xt select { font: inherit; }
.xt button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.xt button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.xt :focus-visible { outline: 3px solid #ac8bf7; outline-offset: 3px; }
.xt a { color: var(--xt-purple); text-decoration: none; }
.xt p { margin: 0; }
.xt header { position: static; top: auto; z-index: auto; }
.xt footer { margin: 0; text-align: left; }
.xt h1, .xt h2, .xt h3, .xt h4 { color: var(--xt-text); font-family: inherit; }
.xt-icon { width: 20px; height: 20px; flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.xt-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#page-trades > main.xt { max-width: 1360px; padding: 30px 28px 88px; margin: 0 auto; }
.xt-hero { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 28px 32px; border: 1px solid var(--xt-line); border-radius: 24px; background: linear-gradient(115deg,var(--xt-panel) 32%,var(--xt-tint)); margin-bottom: 26px; overflow: hidden; }
.xt-eyebrow { color: var(--xt-purple); font-size: 10px; font-weight: 850; letter-spacing: 1.8px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.xt-eyebrow .xt-icon { width: 15px; height: 15px; }
.xt-eyebrow-ic { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 6px; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(124,58,237,.25); }
.xt-hero h1 { font-size: clamp(26px,2.5vw,36px); font-weight: 850; line-height: 1.22; letter-spacing: -1.2px; margin: 12px 0 9px; }
.xt-hero p { color: var(--xt-muted); max-width: 520px; font-size: 13px; }
.xt-hero-right { display: flex; align-items: center; gap: 28px; flex-shrink: 0; }
/* ЖИВЫЕ ЧИСЛА. На компьютере обложка была 1900px шириной с дырой посередине:
   заголовок слева, кнопка справа, между ними ничего. Картинку оттуда убрали,
   а место осталось. Ставим под заголовок строку таблеток: что в разделе
   происходит прямо сейчас.
   Таблетки, а не крупные счётчики — в тихий день «0» размером с заголовок
   выглядит как пустой зал. Пустые значения в строку просто не попадают. */
.xt-pulse { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.xt-pulse-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 100px;
  background: var(--xt-panel); border: 1px solid var(--xt-line);
  color: var(--xt-muted); font-size: 11px; font-weight: 650; white-space: nowrap;
}
.xt-pulse-chip strong { color: var(--xt-text); font-weight: 850; font-variant-numeric: tabular-nums; }
.xt-pulse-chip .xt-icon { width: 14px; height: 14px; color: var(--xt-purple); }
/* Зелёная точка загорается, только когда на сайте правда кто-то есть. */
.xt-pulse-chip.xt-pulse-live { border-color: #9fe3c5; background: var(--xt-green-bg); color: var(--xt-green); }
.xt-pulse-chip.xt-pulse-live strong { color: var(--xt-green); }
.xt-pulse-chip.xt-pulse-live .xt-icon { color: var(--xt-green); }
.xt-hero-cta { text-align: center; }
.xt-hero-cta small { display: block; margin-top: 9px; color: var(--xt-muted); font-size: 11px; }
.xt-btn { border: 1px solid var(--xt-line); background: var(--xt-panel); color: var(--xt-text); border-radius: 11px; min-height: 42px; padding: 10px 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 750 !important; font-size: 12px !important; line-height: 1.4; transition: border-color .16s, background .16s, box-shadow .16s; text-decoration: none; }
.xt-btn:hover { border-color: #c4aff0; background: var(--xt-tint); }
.xt-btn-primary { background: #7434e9; border-color: #7434e9; color: white; box-shadow: 0 5px 16px #7434e922; }
.xt-btn-primary:hover { background: #6224d3; color: white; border-color: #6224d3; }
.xt-btn-soft { background: var(--xt-soft); color: var(--xt-purple); border-color: transparent; }
.xt-btn-quiet { border-color: transparent; background: transparent; color: var(--xt-muted); }
.xt-btn-danger { color: var(--xt-red); }
.xt-btn-small { padding: 7px 11px; min-height: 34px; font-size: 11px !important; }
.xt-icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid transparent; border-radius: 10px; color: var(--xt-muted); background: transparent; padding: 0; flex-shrink: 0; }
.xt-icon-btn:hover, .xt-icon-btn[aria-pressed="true"] { background: var(--xt-soft); color: var(--xt-purple); }
/* ВКЛАДКИ НЕ ДОЛЖНЫ УЕЗЖАТЬ. Доска — это 12 карточек, три-четыре экрана
   прокрутки. Чтобы перейти в «Мои объявления», приходилось листать обратно
   наверх. Шапка сайта липкая и высотой 73px — встаём ровно под неё.
   Фон непрозрачный: под полосой проезжают карточки. */
.xt-topline {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-bottom: 1px solid var(--xt-line); margin-bottom: 22px;
  position: sticky; top: var(--xt-hdr, 73px); z-index: 12; background: var(--xt-bg);
  padding-top: 8px;
}
.xt-tabs { display: flex; gap: 24px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.xt-tabs::-webkit-scrollbar { display: none; }
.xt-tab { white-space: nowrap; border: 0; border-bottom: 3px solid transparent; background: none; padding: 0 0 15px; color: var(--xt-muted); font-weight: 750 !important; font-size: 13px !important; display: inline-flex; align-items: center; gap: 7px; }
.xt-tab[aria-selected="true"] { border-color: var(--xt-purple); color: var(--xt-purple); }
.xt-tab .xt-icon { width: 17px; height: 17px; }
.xt-tab-short { display: none; }
.xt-count { display: inline-flex; justify-content: center; align-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--xt-soft); color: var(--xt-purple); font-size: 10px; font-weight: 850; }
.xt-tools { position: relative; align-self: flex-start; padding-bottom: 12px; flex-shrink: 0; }
.xt-tools summary { list-style: none; cursor: pointer; font-size: 12px; color: var(--xt-muted); display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.xt-tools summary::-webkit-details-marker { display: none; }
.xt-tool-menu { position: absolute; top: 30px; right: 0; width: 210px; background: var(--xt-panel); border: 1px solid var(--xt-line); border-radius: 13px; padding: 6px; box-shadow: var(--xt-shadow); z-index: 15; }
.xt-tool-menu button { display: flex; gap: 9px; align-items: center; width: 100%; text-align: left; border: none; border-radius: 8px; padding: 10px; background: transparent; color: var(--xt-text); font-size: 12px; }
.xt-tool-menu button:hover { background: var(--xt-soft); }
.xt-filters { background: var(--xt-panel); border: 1px solid var(--xt-line); border-radius: 16px; padding: 16px; margin-bottom: 17px; }
.xt-filter-row { display: grid; grid-template-columns: 1fr 1fr auto auto; align-items: end; gap: 12px; }
.xt-label { display: block; color: var(--xt-muted); font-size: 11px; font-weight: 750; margin: 0 0 6px; }
.xt-search { position: relative; min-width: 0; }
.xt-search > .xt-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--xt-muted); pointer-events: none; }
.xt input:not([type="checkbox"]):not([type="radio"]), .xt textarea, .xt select { border: 1px solid var(--xt-line); border-radius: 10px; background: var(--xt-bg); color: var(--xt-text); padding: 10px 12px; width: 100%; min-width: 0; box-shadow: none; font-size: 12px; line-height: 1.5; }
.xt .xt-search input { padding-left: 38px !important; height: 42px; }
.xt input::placeholder, .xt textarea::placeholder { color: var(--xt-muted); opacity: .85; }
.xt input:focus, .xt textarea:focus, .xt select:focus { border-color: #ad8ce9; background: var(--xt-panel); }
.xt-filter-row > select { width: 170px; height: 42px; }
.xt-more-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--xt-line); }
.xt-more-filters > label:not(.xt-check) { flex: 1; min-width: 150px; }
.xt-check { display: flex; gap: 10px; align-items: flex-start; color: var(--xt-muted); font-size: 12px; cursor: pointer; line-height: 1.65; min-height: 36px; }
/* Квадратик был 17px. Нажимать можно и по тексту, но целиться человек будет
   в сам квадратик — делаем его заметнее и крупнее. */
/* Было 17px. Нажимать можно и по тексту рядом, но целится человек в сам
   квадратик — 20px попадают в палец, 17 уже нет. */
.xt input[type="checkbox"], .xt input[type="radio"] { accent-color: #7434e9; width: 20px; height: 20px; min-width: 20px; margin: 1px 0 0; border-radius: 4px; flex-shrink: 0; cursor: pointer; }
.xt-results-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; min-height: 30px; }
.xt-results-bar p { color: var(--xt-muted); font-size: 12px; }
.xt-results-bar strong { color: var(--xt-text); font-weight: 800; }
.xt-results-actions { display: flex; align-items: center; gap: 4px; }
/* ⚠️ ЖЁСТКИЕ ДВЕ КОЛОНКИ ЛОМАЛИ КАРТОЧКУ НА ПЛАНШЕТЕ.
   Внутри карточки свои две колонки — «отдаёт» и «ищет». На 768px карточка
   получалась 350px, на каждую вещь оставалось 150px: «Elderwood Scythe»
   переносился на две строки, «Открыт к предложениям» — на три.
   Считаем от карточки, а не от экрана: пока на колонку есть 430px — две,
   иначе одна. 1360px → две, 768px → одна во всю ширину. */
.xt-board { display: grid; grid-template-columns: repeat(auto-fill,minmax(430px,1fr)); gap: 18px; align-items: start; }
.xt-card { border: 1px solid var(--xt-line); border-radius: 18px; background: var(--xt-panel); overflow: hidden; transition: border-color .18s, box-shadow .18s; min-width: 0; }
.xt-card:hover { border-color: #d4c6ee; box-shadow: var(--xt-shadow); }
.xt-card-head { padding: 17px 18px 13px; display: flex; align-items: center; gap: 10px; }
.xt-avatar { width: 36px; height: 36px; border-radius: 12px; background: var(--xt-soft); color: var(--xt-purple); display: grid; place-items: center; font-size: 16px; font-weight: 800; flex-shrink: 0; overflow: hidden; }
.xt-person { min-width: 0; flex: 1; }
.xt-person strong, .xt-person a { font-size: 12px; font-weight: 800; color: var(--xt-text); overflow-wrap: anywhere; }
.xt-person small { display: flex; align-items: center; gap: 5px; color: var(--xt-muted); font-size: 10px; margin-top: 2px; }
.xt-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; display: inline-block; flex-shrink: 0; }
.xt-status { font-size: 10px; padding: 4px 8px; border-radius: 6px; background: var(--xt-bg); color: var(--xt-muted); display: inline-flex; align-items: center; gap: 5px; font-weight: 750; }
.xt-status.green { background: var(--xt-green-bg); color: var(--xt-green); }
.xt-status.purple { background: var(--xt-soft); color: var(--xt-purple); }
.xt-status.red { color: var(--xt-red); background: #d93b5510; }
.xt-sides { display: grid; grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr); gap: 10px; padding: 0 18px 16px; }
.xt-side { min-width: 0; }
.xt-side-title { font-size: 10px; font-weight: 750; color: var(--xt-muted); margin-bottom: 7px; display: flex; justify-content: space-between; gap: 7px; }
.xt-side-title span { font-weight: 500; }
.xt-exchange-mark { display: flex; align-items: center; justify-content: center; padding-top: 20px; color: var(--xt-purple); }
.xt-exchange-mark .xt-icon { width: 23px; height: 23px; }
.xt-item-list { display: grid; gap: 7px; }
.xt-item { display: flex; align-items: center; gap: 9px; padding: 8px; min-height: 65px; border-radius: 11px; background: var(--xt-bg); border: 1px solid var(--xt-line); min-width: 0; position: relative; }
.xt-thumb { --rarity: #9c62e8; width: 45px; height: 45px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; background: color-mix(in srgb,var(--rarity) 10%,var(--xt-panel)); color: var(--rarity); overflow: hidden; position: relative; }
.xt-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; position: absolute; inset: 0; }
.xt-thumb svg { width: 32px; height: 32px; }
.xt-r-godly { --rarity: #c04f91; }
.xt-r-chroma { --rarity: #a563e8; background: linear-gradient(125deg,#974fda14,#ea567317,#faac3c1c); }
.xt-r-ancient { --rarity: #4f86d6; }
.xt-r-vintage { --rarity: #aa831a; }
.xt-r-unique { --rarity: #b88211; }
.xt-r-legendary { --rarity: #cc5268; }
.xt-r-rare { --rarity: #368c61; }
.xt-r-uncommon { --rarity: #4f86d6; }
.xt-item-text { min-width: 0; flex: 1; }
.xt-item-text strong { display: block; font-size: 11px; line-height: 1.4; font-weight: 800; overflow-wrap: anywhere; }
.xt-item-text small { display: block; font-size: 9px; color: var(--xt-muted); margin-top: 3px; }
.xt-qty { font-size: 10px; font-weight: 800; color: var(--xt-purple); background: var(--xt-soft); padding: 1px 5px; border-radius: 5px; white-space: nowrap; }
.xt-open-want { min-height: 65px; padding: 12px; border: 1px dashed #d3c2ee; border-radius: 11px; display: flex; gap: 9px; align-items: center; background: var(--xt-tint); color: var(--xt-purple); }
.xt-open-want strong { display: block; font-size: 11px; line-height: 1.5; }
.xt-open-want small { font-size: 10px; color: var(--xt-muted); display: block; margin-top: 3px; }
/* Отступы задаём с той же специфичностью, что и общий сброс `.xt p { margin: 0 }`
   ниже по файлу: иначе он выигрывал, комментарий прилипал к рамке карточки
   и наезжал на строку со временем. */
.xt p.xt-card-note { margin: 0 18px 13px; }
/* Комментарий автора — это его условия сделки, а не сноска. Серым 11px его
   не читали. Даём фон, рамку слева и обычный размер текста. */
.xt-card-note { font-size: 13px; color: var(--xt-text); overflow-wrap: anywhere; white-space: pre-wrap;
    background: var(--xt-tint); border-left: 3px solid var(--xt-purple); border-radius: 0 10px 10px 0;
    padding: 9px 12px; }
.xt-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 18px 13px; color: var(--xt-muted); font-size: 10px; }
.xt-card-meta .xt-icon { width: 13px; height: 13px; }
.xt-card-footer { border-top: 1px solid var(--xt-line); padding: 12px 18px; display: flex; gap: 7px; align-items: center; justify-content: space-between; }
.xt-card-footer .xt-btn { min-height: 36px; font-size: 11px !important; }
.xt-footer-note { font-size: 10px; color: var(--xt-muted); }
.xt-card-actions { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.xt-empty { grid-column: 1 / -1; text-align: center; border: 1px solid var(--xt-line); border-radius: 20px; background: var(--xt-panel); padding: 44px 22px; }
.xt-empty-symbol { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 16px; color: var(--xt-purple); background: var(--xt-soft); border-radius: 20px; }
.xt-empty-symbol > svg { width: 30px; height: 30px; }
.xt-empty h3 { font-size: 18px; margin: 0 0 7px; letter-spacing: -.3px; }
.xt-empty p { max-width: 430px; margin: 0 auto 18px; color: var(--xt-muted); font-size: 12px; }
.xt-pager { padding: 23px 0 0; text-align: center; }
.xt-note { display: flex; gap: 9px; align-items: flex-start; padding: 13px 15px; border-radius: 11px; background: var(--xt-tint); border: 1px solid var(--xt-line); color: var(--xt-muted); font-size: 11px; line-height: 1.7; }
.xt-note > .xt-icon { width: 17px; height: 17px; margin-top: 2px; color: var(--xt-purple); }
.xt-note strong { color: var(--xt-text); }
.xt-page-note { margin-top: 22px; background: transparent; border: none; padding-left: 0; padding-right: 0; max-width: 800px; }
/* Ссылка «Как это работает» стояла внутри абзаца с padding:0 и min-height:0 —
   цель 97×21. Выносим её отдельной строкой и даём нормальную высоту. */
.xt-note-link { display: inline-flex; margin-top: 6px; min-height: 36px; padding: 0 12px 0 0; color: var(--xt-purple) !important; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #c7b2ee; }
.xt-note-link:hover { text-decoration-color: currentColor; background: transparent; }
.xt-page-note > div > .xt-note-link { display: flex; }
.xt-error { color: var(--xt-red); background: #d93b550b; border: 1px solid #d93b5533; padding: 12px; border-radius: 10px; font-size: 12px; margin-bottom: 12px; overflow-wrap: anywhere; }
.xt-skeleton { background: linear-gradient(90deg,var(--xt-bg),var(--xt-soft),var(--xt-bg)); background-size: 200% 100%; animation: xt-shimmer 1.6s infinite; border-radius: 10px; }
.xt-skeleton-card { border: 1px solid var(--xt-line); border-radius: 18px; padding: 20px; background: var(--xt-panel); min-height: 240px; }
.xt-skeleton-card div:nth-child(1) { height: 34px; width: 48%; margin-bottom: 23px; }
.xt-skeleton-card div:nth-child(2) { height: 90px; margin-bottom: 18px; }
.xt-skeleton-card div:nth-child(3) { height: 35px; width: 45%; margin-left: auto; }
@keyframes xt-shimmer { to { background-position: -200% 0; } }
.xt-offer-filter { display: flex; align-items: center; gap: 7px; overflow-x: auto; padding-bottom: 14px; scrollbar-width: none; }
/* Фильтр предложений — единственные кнопки раздела, до которых палец не
   дотягивался: 35px в высоту. Минимум для пальца — 36px. */
.xt-chip { border: 1px solid var(--xt-line); background: var(--xt-panel); color: var(--xt-muted); border-radius: 100px; padding: 8px 14px; min-height: 38px; display: inline-flex; align-items: center; font-size: 11px !important; white-space: nowrap; }
.xt-chip[aria-pressed="true"] { background: var(--xt-soft); color: var(--xt-purple); border-color: #b89ae6; }
.xt-legacy { margin-top: 22px; color: var(--xt-muted); font-size: 12px; border-top: 1px solid var(--xt-line); padding-top: 16px; }
.xt-legacy summary { cursor: pointer; }
.xt-legacy-row { padding: 10px 0; display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.xt-modal-open { overflow: hidden !important; }
dialog.xt-dialog { border: 1px solid var(--xt-line); border-radius: 22px; padding: 0; background: var(--xt-panel); color: var(--xt-text); margin: auto; width: min(1050px,calc(100% - 40px)); max-width: none; max-height: calc(100dvh - 48px); box-shadow: 0 28px 100px #0f132333; overflow: hidden; }
dialog.xt-dialog:not([open]) { display: none; }
dialog.xt-dialog[open] { display: flex; flex-direction: column; }
dialog.xt-dialog::backdrop { background: #15132966; backdrop-filter: blur(5px); }
.xt-dialog-head { padding: 20px 24px; display: flex; gap: 16px; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--xt-line); flex-shrink: 0; }
.xt-dialog-head h2 { font-size: 20px; margin: 0; letter-spacing: -.5px; line-height: 1.35; }
.xt-dialog-head p { margin-top: 3px; color: var(--xt-muted); font-size: 11px; }
.xt-dialog-body { padding: 24px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; }
.xt-dialog-footer { padding: 16px 24px; border-top: 1px solid var(--xt-line); display: flex; align-items: center; gap: 12px; justify-content: space-between; background: var(--xt-panel); flex-shrink: 0; }
.xt-dialog-footer small { font-size: 11px; color: var(--xt-muted); }
.xt-dialog-narrow { max-width: 610px !important; }
.xt-builder { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.xt-builder > div { min-width: 0; }
.xt-builder h3 { font-size: 13px; margin: 0 0 11px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.xt-builder h3 small { color: var(--xt-muted); font-size: 10px; font-weight: 500; }
.xt-builder-side { border: 1px solid var(--xt-line); border-radius: 13px; padding: 13px; margin-bottom: 14px; }
.xt-builder-side.active { border-color: #bc9bed; background: var(--xt-tint); }
.xt-builder-side > .xt-btn { width: 100%; margin-top: 8px; }
.xt-builder-row { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.xt-builder-row .xt-item { flex: 1; min-height: 55px; padding: 5px; }
.xt-builder-row .xt-thumb { width: 37px; height: 37px; }
.xt-quantity { display: flex; align-items: center; border: 1px solid var(--xt-line); border-radius: 8px; overflow: hidden; background: var(--xt-panel); flex-shrink: 0; }
.xt-quantity button { border: none; background: none; color: var(--xt-purple); width: 27px; height: 33px; padding: 0; }
.xt-quantity span { font-size: 11px; min-width: 22px; text-align: center; }
.xt-builder-row > .xt-icon-btn { width: 28px; height: 33px; }
.xt-builder-row > .xt-icon-btn .xt-icon { width: 15px; height: 15px; }
.xt-builder-field { margin-top: 17px; }
.xt-builder-field textarea { min-height: 76px; resize: vertical; }
.xt-field-foot { display: flex; justify-content: space-between; color: var(--xt-muted); font-size: 10px; gap: 10px; margin-top: 4px; }
.xt-builder-confirm { padding-top: 16px; border-top: 1px solid var(--xt-line); margin-top: 18px; }
.xt-catalog-head { display: flex; gap: 8px; margin-bottom: 12px; }
.xt-catalog-head .xt-search { flex: 1; }
.xt-catalog-head select { max-width: 125px; }
.xt-catalog-list { max-height: 400px; min-height: 220px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; display: grid; gap: 7px; align-content: start; scrollbar-width: thin; }
.xt-catalog-option { text-align: left; display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--xt-line); border-radius: 10px; color: var(--xt-text); background: var(--xt-panel); }
.xt-catalog-option:hover, .xt-catalog-option[aria-pressed="true"] { background: var(--xt-tint); border-color: #bda2e9; }
.xt-catalog-option > .xt-icon { margin-left: auto; color: var(--xt-purple); width: 17px; height: 17px; }
.xt-catalog-option .xt-thumb { width: 37px; height: 37px; }
.xt-catalog-caption { font-size: 10px; color: var(--xt-muted); margin: 9px 0 0; }
.xt-preview-stack { display: grid; gap: 15px; }
.xt-preview-stack .xt-sides { padding: 0; }
.xt-actions-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.xt-room-layout { display: grid; grid-template-columns: minmax(300px,.85fr) minmax(350px,1.15fr); height: min(660px,calc(100dvh - 160px)); min-height: 300px; }
.xt-room-summary { padding: 21px; overflow-y: auto; border-right: 1px solid var(--xt-line); scrollbar-width: thin; }
.xt-room-summary .xt-sides { padding: 0; grid-template-columns: minmax(0,1fr) 19px minmax(0,1fr); gap: 7px; }
.xt-room-summary .xt-item { padding: 6px; gap: 6px; flex-wrap: wrap; }
.xt-room-summary .xt-thumb { width: 35px; height: 35px; }
.xt-room-summary .xt-item-text { min-width: 65px; }
.xt-room-summary .xt-item-text strong { font-size: 10px; }
.xt-room-step { display: flex; gap: 8px; align-items: center; font-size: 10px; color: var(--xt-muted); margin: 0 0 17px; flex-wrap: wrap; }
.xt-room-step b { color: var(--xt-purple); background: var(--xt-soft); border-radius: 6px; padding: 4px 7px; }
.xt-room-status { background: var(--xt-tint); border: 1px solid var(--xt-line); border-radius: 13px; padding: 15px; margin-top: 17px; }
.xt-room-status h3 { font-size: 13px; line-height: 1.4; margin: 0 0 5px; }
.xt-room-status p { color: var(--xt-muted); font-size: 11px; line-height: 1.7; margin-bottom: 12px; }
.xt-room-status .xt-check { margin: 11px 0; font-size: 11px; }
.xt-room-status > .xt-btn-primary { width: 100%; }
.xt-room-tools { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; }
.xt-nicknames { display: grid; gap: 8px; margin: 14px 0; }
.xt-nickname { padding: 9px 10px; border: 1px solid var(--xt-line); border-radius: 9px; background: var(--xt-panel); display: flex; align-items: center; gap: 8px; }
.xt-nickname > div { flex: 1; min-width: 0; }
.xt-nickname small { display: block; color: var(--xt-muted); font-size: 9px; }
.xt-nickname strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
.xt-nickname .xt-icon-btn { width: 29px; height: 29px; }
.xt-room-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--xt-bg); }
.xt-chat-top { padding: 14px 18px; border-bottom: 1px solid var(--xt-line); display: flex; align-items: center; gap: 9px; background: var(--xt-panel); flex-shrink: 0; }
.xt-chat-top h3 { font-size: 12px; margin: 0; }
.xt-chat-top p { font-size: 10px; color: var(--xt-muted); }
.xt-chat-messages { padding: 18px; flex: 1; overflow-y: auto; overscroll-behavior: contain; min-height: 130px; scrollbar-width: thin; }
.xt-message { max-width: 87%; margin-bottom: 10px; padding: 10px 12px; border-radius: 12px 12px 12px 3px; background: var(--xt-panel); border: 1px solid var(--xt-line); width: fit-content; }
.xt-message.mine { margin-left: auto; background: var(--xt-soft); border-color: transparent; border-radius: 12px 12px 3px 12px; }
.xt-message > p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.xt-message > small { display: block; text-align: right; font-size: 9px; color: var(--xt-muted); margin-top: 4px; }
.xt-system-message { text-align: center; color: var(--xt-muted); font-size: 10px; padding: 9px 13px; margin: 10px auto; max-width: 95%; overflow-wrap: anywhere; white-space: pre-wrap; }
.xt-system-message.report, .xt-system-message.moderator { border: 1px solid var(--xt-line); border-radius: 10px; background: var(--xt-panel); padding: 13px; text-align: left; }
/* Предупреждение анти-скама: должно бросаться в глаза, а не теряться среди
   служебных строк — его читает тот, кого прямо сейчас пытаются развести. */
.xt-system-message.warn { border: 1px solid #F59E0B; border-radius: 10px; background: #FEF3C7; color: #92400E;
    padding: 12px 14px; text-align: left; font-size: 12.5px; line-height: 1.45; font-weight: 600; }
body.theme-dark .xt-system-message.warn { background: #3a2c10; border-color: #b7791f; color: #fcd9a0; }
.xt-photo-button { display: block; border: 0; background: var(--xt-bg); padding: 0; border-radius: 8px; overflow: hidden; margin-bottom: 7px; min-width: 100px; min-height: 70px; }
.xt-photo-button img { display: block; width: 100%; max-width: 240px; max-height: 240px; object-fit: contain; }
.xt-composer { background: var(--xt-panel); padding: 12px 14px; border-top: 1px solid var(--xt-line); flex-shrink: 0; }
.xt-composer-row { display: flex; align-items: flex-end; gap: 7px; }
.xt-composer textarea { resize: vertical; min-height: 42px; max-height: 120px; flex: 1; }
.xt-composer .xt-btn { min-width: 41px; padding: 10px; }
.xt-composer small { color: var(--xt-muted); font-size: 9px; display: block; margin-top: 6px; }
.xt-quick-messages { display: flex; gap: 6px; margin-bottom: 9px; overflow-x: auto; scrollbar-width: none; }
/* Готовые фразы — цель 26px в высоту. По такой в переписке промахиваются
   чаще, чем попадают. Поднимаем до 36px, как у остальных кнопок. */
.xt-quick-messages button { border: 1px solid var(--xt-line); background: transparent; color: var(--xt-muted); padding: 0 13px; min-height: 36px; display: inline-flex; align-items: center; border-radius: 100px; font-size: 11px; white-space: nowrap; transition: border-color .15s, color .15s, background .15s; }
.xt-quick-messages button:hover { border-color: #c4aff0; color: var(--xt-purple); background: var(--xt-tint); }
.xt-upload-preview { color: var(--xt-purple); font-size: 11px; display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.xt-history { margin-top: 14px; font-size: 11px; color: var(--xt-muted); }
.xt-history summary { cursor: pointer; padding: 7px 0; }
.xt-revision { border: 1px solid var(--xt-line); padding: 10px; border-radius: 9px; margin-top: 8px; }
.xt-revision p { overflow-wrap: anywhere; font-size: 10px; }
.xt-revision b { color: var(--xt-text); font-size: 10px; }
.xt-rating { display: flex; gap: 8px; padding: 6px 0; }
.xt-rating button { background: none; border: none; color: var(--xt-muted); padding: 4px; }
.xt-rating button[aria-pressed="true"] { color: #bd7a00; }
.xt-rating .xt-icon { width: 28px; height: 28px; }
.xt-inline-options { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; }
.xt-inline-options label { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.xt-help-steps { display: grid; gap: 22px; counter-reset: help; }
.xt-help-step { display: flex; align-items: flex-start; gap: 14px; }
.xt-help-step::before { counter-increment: help; content: counter(help); display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: 10px; background: var(--xt-soft); color: var(--xt-purple); font-weight: 800; }
.xt-help-step h3 { margin: 2px 0 4px; font-size: 13px; }
.xt-help-step p { color: var(--xt-muted); font-size: 12px; line-height: 1.75; }
@media (min-width: 1500px) { .xt-hero { padding: 32px 38px; } }
/* Высота липкой шапки сайта: 73px на компьютере, 70px на планшете, 58px на
   телефоне. Полоса вкладок встаёт ровно под неё. */
:root { --xt-hdr: 73px; }
@media (max-width: 860px) { :root { --xt-hdr: 70px; } }
@media (max-width: 640px) { :root { --xt-hdr: 58px; } }
@media (max-width: 1100px) {  .xt-tabs { gap: 19px; } .xt-room-layout { grid-template-columns: minmax(290px,.85fr) minmax(290px,1fr); } }
@media (max-width: 860px) {
  #page-trades > main.xt { padding: 22px 20px 100px; }
  .xt-hero { padding: 25px; gap: 18px; }
  .xt-hero h1 { font-size: 28px; }
  .xt-filter-row { grid-template-columns: 1fr 1fr; }
  /* Во втором ряду кнопка «Фильтры» растягивалась на половину строки и
     выглядела как главное действие раздела. Пусть занимает свою ширину. */
  .xt-filter-row > .xt-btn { justify-self: start; padding: 10px 20px; }
  .xt-filter-row > select { width: 100%; }
  .xt-board { gap: 13px; }
  .xt-card-head { padding: 14px 13px 11px; }
  .xt-sides { padding: 0 13px 13px; gap: 6px; grid-template-columns: minmax(0,1fr) 19px minmax(0,1fr); }
  .xt-card-footer { padding: 11px 13px; flex-wrap: wrap; }
  .xt-item { flex-wrap: wrap; gap: 5px; }
  .xt-item-text { min-width: 65px; }
  .xt-tools summary span { display: none; }
  .xt-dialog-body { padding: 20px; }
}
@media (max-width: 640px) {
  #page-trades > main.xt { padding: 16px 14px 100px; }
  /* ⚠️ ДО ПЕРВОГО ОБЪЯВЛЕНИЯ БЫЛО 820px ПРОКРУТКИ.
     Обложка занимала почти весь первый экран: надпись сверху, крупный
     заголовок, два абзаца текста и кнопка с припиской сбоку. Человек зашёл
     в раздел обменов — значит он уже знает, зачем пришёл; объяснять ему это
     экраном текста незачем. Оставляем заголовок и действие, объяснение
     убираем: оно целиком есть в «Как устроены трейды». */
  .xt-hero { padding: 18px 18px 20px; border-radius: 18px; display: block; margin-bottom: 16px; }
  .xt-hero h1 { font-size: 23px; letter-spacing: -.6px; margin: 8px 0 0; }
  .xt-hero p { display: none; }
  .xt-hero-right { margin-top: 14px; display: block; }
  .xt-hero-cta { text-align: left; display: block; }
  .xt-hero-cta .xt-btn { width: 100%; justify-content: center; padding: 13px 14px; min-height: 48px; }
  .xt-hero-cta small { display: block; max-width: none; margin: 8px 0 0; font-size: 11px; text-align: center; }

  /* ФИЛЬТРЫ — ОДНА СТРОКА.
     Было два подписанных поля, кнопка и сортировка: ещё 430px до первого
     объявления. На телефоне ищут по одному полю — «что хочу получить».
     Остальное уезжает под кнопку «Фильтры» и появляется, когда её открыли. */
  .xt-filters { padding: 12px; border-radius: 14px; margin-bottom: 14px; }
  .xt-filter-row { grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; }
  /* Позиции задаём ЯВНО. Скрытые элементы выпадают из сетки, и кнопка
     «Фильтры» автоматически уезжала в первую колонку второго ряда — строка
     разъезжалась на два этажа. */
  .xt-filter-row > label:first-child { grid-column: 1; grid-row: 1; }
  .xt-filter-row > .xt-btn { grid-column: 2; grid-row: 1; }
  .xt-filter-row > label:first-child > .xt-label { display: none; }
  .xt-filter-row > label:nth-of-type(2),
  .xt-filter-row > select { display: none; }
  /* Надпись над заголовком повторяет сам заголовок — на телефоне это просто
     лишняя строка. */
  .xt-hero .xt-eyebrow { display: none; }
  /* Строка живых чисел — украшение для большого экрана. На телефоне каждый
     её пиксель отодвигает первое объявление вниз, а «сколько нас» человек
     и так видит по доске. */
  .xt-pulse { display: none; }
  .xt-filters:has(#xtMoreFilters:not([hidden])) .xt-filter-row > label:nth-of-type(2),
  .xt-filters:has(#xtMoreFilters:not([hidden])) .xt-filter-row > select { display: block; grid-column: 1 / -1; }
  .xt-filter-row > .xt-btn { min-height: 42px; padding: 0 13px; }

  /* Последняя карточка не должна навсегда оставаться под плавающей кнопкой
     поддержки и нижним меню. */
  #page-trades > main.xt { padding-bottom: 150px; }
  .xt-topline { gap: 8px; margin-bottom: 14px; border-bottom: none; align-items: center; }
  /* ⚠️ ПЕРЕНОС НА ДВЕ СТРОКИ БЫЛ ОШИБКОЙ.
     Четыре вкладки не влезали в строку, и я разрешил перенос. Получилось
     хуже: «Избранное» висело одно на втором ряду, а подчёркивание активной
     вкладки сверху читалось как разделительная линия — раздел выглядел
     сломанным. Правильный ответ — короткие подписи и переключатель-таблетка:
     все четыре в одну строку, активная залита, как в системных настройках.
     Длинные подписи остаются на компьютере, где место есть. */
  .xt-tabs {
    gap: 4px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: var(--xt-soft); border-radius: 13px; padding: 4px; flex: 1;
  }
  .xt-tab-long { display: none; }
  .xt-tab-short { display: inline; }
  .xt-tab {
    flex: 1 1 0; justify-content: center; border-bottom: none; padding: 9px 6px;
    border-radius: 10px; min-height: 38px; color: var(--xt-muted);
    transition: background .16s ease, color .16s ease;
  }
  .xt-tab[aria-selected="true"] {
    background: var(--xt-panel); color: var(--xt-purple);
    box-shadow: 0 1px 3px rgba(24,24,27,.10), 0 0 0 1px rgba(24,24,27,.04);
  }
  /* У <br> в подзаголовке был класс xt-desktop-br, но правила под него не
     существовало — перенос срабатывал и на телефоне, оставляя висеть одно
     слово «игроками» отдельной строкой. */
  .xt-hero p br { display: none; }
  .xt-tab { font-size: 12px !important; padding-bottom: 12px; }
  .xt-tab > .xt-icon { display: none; }
  .xt-tab .xt-count { min-width: 17px; height: 17px; font-size: 9px; }
  .xt-tools { padding: 0; }
  .xt-tools summary { padding-top: 0; }
  .xt-filters { padding: 12px; border-radius: 13px; }
  .xt-filter-row { gap: 10px; }
  .xt-filter-row > label { grid-column: 1 / -1; }
  .xt input:not([type="checkbox"]):not([type="radio"]), .xt textarea, .xt select { font-size: 16px; }
  .xt-filter-row select { font-size: 12px; }
  .xt-label { font-size: 10px; }
  .xt-results-bar { margin-bottom: 12px; }
  .xt-board { grid-template-columns: 1fr; gap: 14px; }
  .xt-card-head { padding: 16px; }
  /* ⚠️ ДВЕ КОЛОНКИ НА ЭКРАНЕ 393px — ЭТО 145px НА КОЛОНКУ.
     Название вещи не помещалось рядом с картинкой и падало под неё, шрифт
     пришлось ужать до 10px, количество уехало значком в угол картинки.
     Карточка читалась как обрывки. На телефоне обмен читают сверху вниз:
     «отдаёт» → стрелка → «ищет». Одна колонка на всю ширину — и вещь снова
     помещается в строку нормальным шрифтом. */
  .xt-sides { padding: 0 16px 16px; grid-template-columns: minmax(0,1fr); gap: 9px; }
  /* Средняя ячейка сетки была вертикальной стрелкой между колонками.
     В стопке она становится разделителем: линия во всю ширину и стрелка
     вниз в кружке посередине. */
  .xt-exchange-mark { padding: 1px 0; position: relative; justify-content: center; }
  .xt-exchange-mark::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--xt-line); }
  .xt-exchange-mark .xt-icon { width: 17px; height: 17px; transform: rotate(90deg); position: relative; z-index: 1; background: var(--xt-panel); box-sizing: content-box; padding: 4px 5px; }
  .xt-item { flex-wrap: nowrap; padding: 9px; min-height: 60px; gap: 10px; }
  .xt-item-text { min-width: 0; }
  .xt-item-text strong { font-size: 12px; }
  .xt-item-text small { font-size: 10px; }
  .xt-thumb { width: 42px; height: 42px; }
  .xt-thumb svg { width: 30px; height: 30px; }
  /* Количество вернулось строкой: место под него теперь есть. */
  .xt-qty { position: static; font-size: 10px; padding: 1px 6px; }
  .xt-side-title { font-size: 11px; margin-bottom: 6px; }
  .xt-card-footer { padding: 12px 16px; }
  .xt-open-want { padding: 11px; display: flex; min-height: 60px; }
  .xt-open-want strong { font-size: 12px; }
  .xt-open-want small { font-size: 10px; }
  .xt-dialog-head { padding: 17px 16px; }
  .xt-dialog-head h2 { font-size: 18px; }
  .xt-dialog-head p { font-size: 10px; }
  dialog.xt-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 20px); border-radius: 18px; }
  .xt-dialog-body { padding: 16px; }
  .xt-dialog-footer { padding: 13px 16px max(13px,env(safe-area-inset-bottom)); }
  .xt-dialog-footer small { max-width: 115px; font-size: 10px; }
  .xt-builder { grid-template-columns: 1fr; gap: 22px; }
  .xt-catalog-list { max-height: 270px; min-height: 100px; }
  .xt-catalog-head select { max-width: 118px; font-size: 12px; }
  .xt-room-layout { display: flex; flex-direction: column; height: auto; max-height: calc(100dvh - 110px); overflow-y: auto; }
  .xt-room-summary { overflow: visible; border-right: 0; border-bottom: 1px solid var(--xt-line); padding: 16px; }
  .xt-room-summary .xt-item { flex-wrap: nowrap; }
  .xt-room-summary .xt-item-text { min-width: 0; }
  .xt-room-summary .xt-item-text strong { font-size: 10px; }
  .xt-room-chat { flex-shrink: 0; min-height: 450px; height: 62dvh; max-height: 620px; }
  .xt-room-status { margin-top: 14px; padding: 13px; }
  .xt-room-step { margin-bottom: 12px; }
  .xt-message { max-width: 92%; }
  .xt-page-note { margin-top: 17px; font-size: 10px; }
  .xt-nicknames { grid-template-columns: 1fr 1fr; gap: 6px; }
  .xt-nickname { padding: 7px; gap: 2px; }
  .xt-nickname strong { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .xt *, .xt *::before, .xt *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Keep the fallback available if a catalog image fails to load. */
.xt-thumb.has-image > svg { visibility: hidden; }
.xt-r-common { --rarity: #707784; }
.xt-legacy-explanation { color: var(--text-mute); font-size: 13px; line-height: 1.6; margin: 0 0 16px; }

.xt-history-more { grid-column: 1 / -1; text-align: center; padding: 12px; }
/* Comfortable reading and touch targets in compact cards. */
.xt-card .xt-item-text strong { font-size: 12px; }
.xt-card .xt-item-text small { font-size: 10px; }
.xt-card .xt-person strong { font-size: 13px; }
.xt-card .xt-card-note { font-size: 13px; }
.xt-card .xt-side-title { font-size: 11px; }
@media (max-width: 420px) {
  /* ⚠️ ЗДЕСЬ ПЕРЕНОС БЫЛ ВЫНУЖДЕННЫМ.
     Пока «отдаёт» и «ищет» стояли двумя колонками, на вещь приходилось
     145px — название не помещалось рядом с картинкой, и его приходилось
     ронять под неё (flex-basis: 100%), а количество уводить значком в угол.
     Колонка теперь одна и во всю ширину: перенос только ломает строку
     обратно. Правила сняты — вещь снова читается как строка списка. */
  .xt-hero-cta { flex-wrap: wrap; gap: 8px; }
  .xt-hero-cta small { max-width: none; }
  .xt-card .xt-card-footer > .xt-footer-note { flex-basis: 100%; }
}

.xt .xt-quantity input[type="number"] { width: 38px; min-width: 0; padding: 4px 0; font-size: 13px; text-align: center; background: transparent; border: 0; appearance: textfield; }
.xt .xt-quantity input::-webkit-inner-spin-button, .xt .xt-quantity input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.xt .xt-quantity input:invalid { outline: 2px solid var(--xt-red); outline-offset: -2px; }
@media (max-width: 640px) { .xt .xt-quantity input[type="number"] { font-size: 16px; } }

/* Имя игрока — ссылка на профиль обменов, а высота у неё была 20px.
   Промах пальцем по такой цели — норма. Растягиваем зону нажатия до 36px
   вертикальными отступами и гасим их отрицательным margin, чтобы шапка
   карточки не поехала. */
.xt-person-name { background: none; border: 0; padding: 8px 7px; margin: -8px -7px; color: inherit; font-size: inherit; font-weight: inherit; text-align: left; overflow-wrap: anywhere; min-height: 36px; display: inline-flex; align-items: center; }
.xt-person-name:hover { color: var(--xt-purple); text-decoration: underline; text-underline-offset: 3px; }
.xt-profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.xt-profile-stats > div { padding: 16px; border: 1px solid var(--xt-line); border-radius: 12px; background: var(--xt-tint); }
.xt-profile-stats strong { display: block; font-size: 24px; }
.xt-profile-stats span { display: block; color: var(--xt-muted); font-size: 11px; }
.xt-public-review { padding: 14px 0; border-bottom: 1px solid var(--xt-line); }
.xt-public-review > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.xt-public-review > div span { color: #a8740b; white-space: nowrap; }
.xt-public-review p { margin: 7px 0; font-size: 12px; overflow-wrap: anywhere; white-space: pre-wrap; }
.xt-public-review small { color: var(--xt-muted); font-size: 10px; }

/* ═══════ ЕДИНАЯ ПОДШАПКА ИНСТРУМЕНТОВ ОБМЕНОВ ═══════
   Требование доступности (WCAG 3.2.3): навигация в одном месте, одном порядке
   и одном стиле на всех страницах раздела. Раньше инструменты жили на старой
   полосе вкладок и выглядели как другой сайт. */
.xt-subnav {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    border-bottom: 1px solid var(--xt-line); margin-bottom: 22px; padding-bottom: 2px;
}
.xt-subnav-back {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    font-size: 13px; font-weight: 700; color: var(--xt-muted); text-decoration: none;
    padding: 10px 2px; border-radius: 10px; transition: color .15s;
}
.xt-subnav-back:hover { color: var(--xt-purple); }
.xt-subnav-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.xt-subnav-tab {
    position: relative; display: inline-flex; align-items: center;
    padding: 12px 14px; font-size: 14px; font-weight: 700;
    color: var(--xt-muted); text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.xt-subnav-tab:hover { color: var(--xt-text); }
.xt-subnav-tab[aria-current="page"] { color: var(--xt-purple); border-bottom-color: var(--xt-purple); }
.xt-subnav-tab:focus-visible { outline: 2px solid var(--xt-purple); outline-offset: -2px; border-radius: 8px; }

/* Живые цифры в шапке вместо декоративной картинки */
.xt-hero-stats { display: flex; gap: 26px; flex-shrink: 0; }
.xt-hero-stat { text-align: center; max-width: 120px; }
.xt-hero-stat strong { display: block; font-size: 28px; font-weight: 850; color: var(--xt-purple); line-height: 1.1; }
.xt-hero-stat span { display: block; margin-top: 4px; font-size: 11.5px; color: var(--xt-muted); line-height: 1.35; }

@media (max-width: 720px) {
    .xt-hero-stats { gap: 18px; }
    .xt-hero-stat strong { font-size: 22px; }
    .xt-subnav { gap: 10px; }
    .xt-subnav-tab { padding: 11px 10px; font-size: 13.5px; }
}

/* Заголовки страниц-инструментов — та же типографика, что в разделе обменов */
.xt-tool-eyebrow { margin-bottom: 7px; }
h2.xt-tool-title { margin: 0; font-size: 27px; font-weight: 850; letter-spacing: -0.5px; color: var(--xt-text); }
@media (max-width: 720px) { h2.xt-tool-title { font-size: 22px; } }

/* Токены дизайн-системы обменов для страниц-инструментов.
   В trades.css они объявлены внутри .xt, а у этих страниц такого класса нет —
   из-за этого подшапка теряла цвета и границы. Объявляем только переменные,
   не трогая типографику остальной страницы. */
#page-calculator, #page-valuechanges, #page-players {
  --xt-panel: #fff; --xt-text: #202235; --xt-muted: #667085;
  --xt-line: #e8eaf1; --xt-soft: #f3efff; --xt-purple: #7434e9; --xt-tint: #faf7ff;
}
body.theme-dark #page-calculator,
body.theme-dark #page-valuechanges,
body.theme-dark #page-players {
  --xt-panel: #1e2435; --xt-text: #eef0fb; --xt-muted: #b2b9ce;
  --xt-line: #333b51; --xt-soft: #322649; --xt-purple: #b38aff; --xt-tint: #252039;
}

/* ═══════ КОМНАТА ОБМЕНА, ВСТРОЕННАЯ В РАЗДЕЛ «ЧАТЫ» ═══════
   Раньше обмен открывался всплывающим окном поверх сайта, а сделка — внутри
   панели. Два разных поведения для двух одинаковых по смыслу чатов сбивали
   с толку. Теперь оба живут в одной панели. */
.chats-exchange { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
dialog.xt-dialog-embed {
    position: static; inset: auto; display: flex; flex-direction: column;
    width: 100%; max-width: none; height: 100%; max-height: none;
    margin: 0; padding: 0; border: 0; border-radius: 0;
    background: var(--xt-panel); box-shadow: none; overflow: hidden;
}
dialog.xt-dialog-embed::backdrop { background: transparent; }
dialog.xt-dialog-embed .xt-dialog-head { border-radius: 0; }
dialog.xt-dialog-embed .xt-dialog-body { flex: 1; min-height: 0; overflow-y: auto; }

/* ═══════ ВСТРОЕННАЯ КОМНАТА: РАБОЧАЯ ВЁРСТКА ═══════
   Комната свёрстана под широкое модальное окно: у неё жёсткая высота от окна
   браузера (min(660px, 100dvh - 160px)) и две колонки от 650px. Внутри панели
   чатов это срезало низ — поле ввода уезжало за край, и написать было нельзя.
   Здесь высота считается от самой панели, а поле ввода всегда на виду. */
dialog.xt-dialog-embed .xt-dialog-body { padding: 0; overflow: hidden; display: flex; min-height: 0; }
dialog.xt-dialog-embed #xtDialogContent { flex: 1; min-height: 0; display: flex; width: 100%; }
.chats-exchange dialog.xt-dialog-embed .xt-room-layout {
    display: grid;                 /* явно: иначе мобильное правило с flex перебивало сетку */
    height: 100%; max-height: none; min-height: 0; width: 100%; overflow: hidden;
    grid-template-columns: minmax(280px, .85fr) minmax(360px, 1.15fr);
}
dialog.xt-dialog-embed .xt-room-summary { overflow-y: auto; min-height: 0; }
dialog.xt-dialog-embed .xt-room-chat { min-height: 0; overflow: hidden; }
/* Аккуратные тонкие полосы прокрутки вместо толстых цветных */
dialog.xt-dialog-embed .xt-room-summary::-webkit-scrollbar,
dialog.xt-dialog-embed .xt-room-chat ::-webkit-scrollbar { width: 8px; }
dialog.xt-dialog-embed .xt-room-summary::-webkit-scrollbar-thumb,
dialog.xt-dialog-embed .xt-room-chat ::-webkit-scrollbar-thumb {
    background: var(--xt-line); border-radius: 50px; border: 2px solid transparent; background-clip: content-box;
}
dialog.xt-dialog-embed .xt-room-summary::-webkit-scrollbar-track,
dialog.xt-dialog-embed .xt-room-chat ::-webkit-scrollbar-track { background: transparent; }

/* Узкая панель: одна колонка, переписка первой — ради неё сюда и заходят.
   Состав обмена уезжает вниз, но остаётся полностью доступным прокруткой. */


/* ═══════ АРТ-ОБЪЕКТЫ В ШАПКЕ ОБМЕНОВ (возвращены) ═══════ */
.xt-hero-art { position: relative; width: 142px; height: 114px; flex-shrink: 0; }
.xt-art-tile { position: absolute; width: 80px; height: 98px; border-radius: 17px; display: grid; place-items: center; background: var(--xt-panel); border: 1px solid var(--xt-line); color: var(--xt-purple); box-shadow: 0 10px 22px #6525c213; }
.xt-art-tile:first-child { left: 4px; top: 1px; transform: rotate(-12deg); }
.xt-art-tile:nth-child(2) { right: 0; bottom: 0; transform: rotate(12deg); background: var(--xt-soft); }
.xt-art-tile > svg { width: 48px; height: 48px; }
.xt-art-swap { position: absolute; left: 49px; top: 42px; border: 3px solid var(--xt-panel); background: #7434e9; color: #fff; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; }
.xt-hero-art { display: none; }

/* ═══════ КОМНАТА ОБМЕНА: СКЛАДЫВАНИЕ ПО ШИРИНЕ ПАНЕЛИ ═══════
   Медиазапрос меряет окно, а комната живёт в панели чатов, которая уже окна на
   ширину списка. Поэтому на широком экране колонки всё равно оставались тесными.
   Контейнерный запрос меряет саму панель. Складываем только когда две
   колонки физически не помещаются — иначе остаётся привычный вид:
   состав слева, переписка справа. */

/* Пока открыт обмен — список чатов скрыт, комната занимает всю ширину.
   Иначе две её колонки делят остаток экрана и всё становится тесным. */
.chats-wrap.exchange-open .chats-sidebar { display: none; }
.chats-wrap.exchange-open .chats-panel { flex: 1 1 100%; width: 100%; }
/* Во встроенном режиме вместо «✕» — понятный возврат к списку переписок */
.xt-back-to-chats {
    flex-shrink: 0; border: 1px solid var(--xt-line); background: var(--xt-panel);
    color: var(--xt-text); font-size: 13px; font-weight: 700; cursor: pointer;
    padding: 9px 14px; border-radius: 50px; white-space: nowrap; transition: border-color .15s, color .15s;
}
.xt-back-to-chats:hover { border-color: var(--xt-purple); color: var(--xt-purple); }

/* Настоящий телефон: две колонки не помещаются — состав сверху, переписка под ним */
@media (max-width: 720px) {
    .chats-exchange dialog.xt-dialog-embed .xt-room-layout {
        display: flex; flex-direction: column;
    }
    .chats-exchange dialog.xt-dialog-embed .xt-room-summary { flex: 0 0 auto; max-height: 40%; }
    .chats-exchange dialog.xt-dialog-embed .xt-room-chat { flex: 1 1 auto; min-height: 260px; }
}

/* Цели нажатия на телефоне — минимум 44px по требованию Apple */
@media (max-width: 860px) {
    .xt-btn, .xt-btn-small, .xt-btn-quiet { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .xt-tab { min-height: 44px; }
    .xt-icon-btn { min-width: 44px; min-height: 44px; }
    .xt-subnav-tab { min-height: 44px; }
}

/* ═══════ КОМНАТА ОБМЕНА НА ТЕЛЕФОНЕ ═══════
   Состав обмена занимал верх экрана, переписке оставалась полоска, и до поля
   ввода приходилось доскроливать. На телефоне главное — написать человеку,
   поэтому состав сжимаем до компактной ленты, а переписке отдаём всё остальное. */
@media (max-width: 720px) {
    .chats-exchange dialog.xt-dialog-embed .xt-room-summary {
        max-height: 116px; overflow-y: auto;
        border-bottom: 1px solid var(--xt-line); padding: 10px 14px;
    }
    .chats-exchange dialog.xt-dialog-embed .xt-room-chat { min-height: 0; flex: 1 1 auto; }
    .chats-exchange dialog.xt-dialog-embed .xt-dialog-head { padding: 12px 14px; }
    /* Заголовок «Чат по обмену» на телефоне только отнимает строку */
    .chats-exchange dialog.xt-dialog-embed .xt-room-chat > header { display: none; }
}

/* ═══════ КОМНАТА ОБМЕНА НА ТЕЛЕФОНЕ: МАКСИМУМ МЕСТА ПЕРЕПИСКЕ ═══════
   На узком экране между шапкой и сообщениями стояли: состав обмена,
   предупреждение, заголовок «Чат по обмену» с иконкой, готовые фразы и
   подсказка про Enter. Переписке оставалась полоска в пару сообщений.
   Всё вспомогательное на телефоне убираем — писать можно сразу. */
@media (max-width: 720px) {
    .chats-exchange dialog.xt-dialog-embed .xt-room-summary { max-height: 88px; }
    /* Заголовок «Чат по обмену» дублирует шапку комнаты */
    .chats-exchange dialog.xt-dialog-embed .xt-chat-top { display: none; }
    /* Подсказка про Shift+Enter бессмысленна на телефоне — там нет Shift */
    .chats-exchange dialog.xt-dialog-embed #xtMessageHint { display: none; }
    /* Готовые фразы нужны для первого сообщения; когда переписка идёт — мешают */
    .chats-exchange dialog.xt-dialog-embed .xt-chat-suggest { gap: 6px; }
    .chats-exchange dialog.xt-dialog-embed .xt-chat-messages { min-height: 180px; }
}

/* На телефоне комната обмена разворачивается на весь экран.
   Иначе при тапе по полю ввода браузер прокручивал ВСЮ страницу, чтобы
   показать поле — экран «прыгал вверх», и писать было неудобно.
   Когда прокручивать нечего, прыжка не происходит. */
@media (max-width: 720px) {
    .chats-wrap.exchange-open {
        /* Комната начиналась от самого верха экрана, а шапка сайта (z-index 100)
           рисуется выше неё и закрывала заголовок обмена: номер, статус и кнопки
           «Об обмене» / «К чатам» уезжали под шапку. Ставим комнату ПОД шапку:
           её реальную высоту измеряет скрипт при открытии. */
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        top: var(--hdr-h, 56px);
        height: auto; max-height: none; margin: 0;
        border: 0; border-radius: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    body.exchange-fullscreen .bottom-nav,
    body.exchange-fullscreen .support-fab { display: none !important; }
    body.exchange-fullscreen { overflow: hidden; }
}

/* ═══════ СОСТАВ ОБМЕНА — ОТДЕЛЬНОЙ КНОПКОЙ, А НЕ КОЛОНКОЙ ═══════
   Пытаться ужать состав рядом с перепиской на телефоне бессмысленно: оба блока
   получаются тесными. Логичнее: чат занимает весь экран (за ним сюда и приходят),
   а состав, шаги и предупреждения открываются кнопкой «Об обмене» поверх чата. */
.xt-info-toggle {
    flex-shrink: 0; margin-left: auto; margin-right: 8px;
    border: 1px solid var(--xt-line); background: var(--xt-panel); color: var(--xt-text);
    font-size: 13px; font-weight: 700; cursor: pointer;
    padding: 9px 13px; border-radius: 50px; white-space: nowrap;
    transition: border-color .15s, color .15s;
}
.xt-info-toggle:hover { border-color: var(--xt-purple); color: var(--xt-purple); }
/* Кнопка «Свернуть» внизу панели состава. По умолчанию скрыта — показывается
   только когда панель открыта (правило в медиазапросе ниже). */
.xt-info-close {
    display: none; width: 100%; margin-top: 14px; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid var(--xt-line); background: var(--xt-panel); color: var(--xt-text);
    font-size: 14px; font-weight: 700; padding: 12px; border-radius: 12px; min-height: 44px;
}
.xt-info-close:hover { border-color: var(--xt-purple); color: var(--xt-purple); }
dialog.xt-dialog-embed.show-info .xt-info-toggle,
dialog.xt-room-dialog.show-info .xt-info-toggle { border-color: var(--xt-purple); color: var(--xt-purple); background: var(--xt-soft); }
/* Во всплывающем окне кнопка стоит рядом с крестиком — правый отступ не нужен. */
dialog.xt-room-dialog .xt-info-toggle { margin-right: 0; align-items: center; gap: 7px; min-height: 38px; }
dialog.xt-room-dialog .xt-info-toggle .xt-icon { width: 16px; height: 16px; }
/* ⚠️ Правило выше специфичнее общего «@media (min-width:721px) — скрыть» и
   перебивало его: на компьютере кнопка вылезала рядом с крестиком, хотя
   состав там и так стоит колонкой. Скрываем явно. */
@media (min-width: 721px) { dialog.xt-room-dialog:not(.xt-dialog-embed) .xt-info-toggle { display: none; } }
@media (max-width: 720px) { dialog.xt-room-dialog .xt-info-toggle { display: inline-flex; } }
@media (max-width: 720px) {
  /* Заголовок «Обмен с …» ломался на две строки: кнопка отъедала ширину.
     Ужимаем заголовок, а подпись у кнопки ОСТАВЛЯЕМ: за ней спрятаны
     «Согласовать обмен», «Предложить другой состав» и «Отозвать» — на
     телефоне это единственный путь к ним, и голый значок его прячет. */
  dialog.xt-room-dialog:not(.xt-dialog-embed) .xt-info-toggle { padding: 8px 12px; font-size: 12px; }
  dialog.xt-room-dialog:not(.xt-dialog-embed) .xt-dialog-head h2 { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  dialog.xt-room-dialog:not(.xt-dialog-embed) .xt-dialog-head > div:first-child { min-width: 0; }
  dialog.xt-room-dialog:not(.xt-dialog-embed) .xt-dialog-head p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  dialog.xt-room-dialog:not(.xt-dialog-embed) .xt-dialog-head { gap: 8px; padding: 13px 14px; }
  /* ВТОРОЙ ЗАГОЛОВОК ВНУТРИ ОКНА.
     Окно уже называется «Обмен с msv1seww» — строка «Чат по обмену» под ним
     повторяет то же самое и съедает 90px высоты переписки. Оставляем тонкую
     полосу: состояние связи и кнопка ограничения. */
  dialog.xt-room-dialog:not(.xt-dialog-embed) .xt-chat-top { padding: 8px 14px; gap: 8px; }
  dialog.xt-room-dialog:not(.xt-dialog-embed) .xt-chat-top > .xt-icon { display: none; }
  dialog.xt-room-dialog:not(.xt-dialog-embed) .xt-chat-top h3 { display: none; }
  dialog.xt-room-dialog:not(.xt-dialog-embed) .xt-chat-top p { font-size: 10px; }
}
/* На широком экране кнопка не нужна — обе колонки и так помещаются */
@media (min-width: 721px) { .xt-info-toggle { display: none; } }

@media (max-width: 720px) {
    /* ⚠️ РАНЬШЕ ЭТО РАБОТАЛО ТОЛЬКО ВНУТРИ «ЧАТОВ».
       Комната обмена, открытая из раздела «Трейды», показывала сверху шаги,
       состав, статус, две ссылки и предупреждение — а переписку в самом
       низу: поле ввода оказывалось примерно в полутора экранах прокрутки.
       Человек открывает обмен, чтобы договориться, а попадает в справку.
       Теперь оба входа ведут себя одинаково: сразу переписка, состав —
       по кнопке «Об обмене» поверх неё. */
    .chats-exchange dialog.xt-dialog-embed,
    dialog.xt-dialog.xt-room-dialog { position: relative; }
    /* Состав скрыт: экран целиком принадлежит переписке */
    .chats-exchange dialog.xt-dialog-embed .xt-room-summary,
    dialog.xt-dialog.xt-room-dialog .xt-room-summary { display: none; }
    .chats-exchange dialog.xt-dialog-embed .xt-room-chat,
    dialog.xt-dialog.xt-room-dialog .xt-room-chat { min-height: 0; }
    /* ⚠️ ТОЛЬКО ВСПЛЫВАЮЩЕЕ ОКНО, НЕ ВСТРОЕННОЕ.
       Комната, открытая внутри «Чатов», несёт обе метки сразу
       (xt-dialog-embed + xt-room-dialog). Высота 100dvh там сломала бы
       раскладку страницы чатов — поэтому :not(.xt-dialog-embed).
       Окну нужна ЗАДАННАЯ высота, а не только максимальная: переписка внутри
       тянется flex-ом, и без высоты окно схлопывалось до шапки (120px). */
    dialog.xt-dialog.xt-room-dialog:not(.xt-dialog-embed) { height: calc(100dvh - 20px); max-height: calc(100dvh - 20px); display: flex; flex-direction: column; }
    dialog.xt-dialog.xt-room-dialog:not(.xt-dialog-embed) .xt-dialog-head { flex-shrink: 0; }
    dialog.xt-dialog.xt-room-dialog:not(.xt-dialog-embed) .xt-dialog-body { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; padding: 0; overflow: hidden; }
    dialog.xt-dialog.xt-room-dialog:not(.xt-dialog-embed) #xtDialogContent { flex: 1 1 0; min-height: 0; display: flex; }
    dialog.xt-dialog.xt-room-dialog:not(.xt-dialog-embed) .xt-room-layout { flex: 1 1 0; min-height: 0; max-height: none; overflow: hidden; }
    dialog.xt-dialog.xt-room-dialog:not(.xt-dialog-embed) .xt-room-chat { flex: 1 1 0; height: auto; max-height: none; }
    /* Нажали «Об обмене» — состав выезжает поверх чата на весь экран */
    .chats-exchange dialog.xt-dialog-embed.show-info .xt-room-summary,
    dialog.xt-dialog.xt-room-dialog.show-info .xt-room-summary {
        display: block; position: absolute; left: 0; right: 0; bottom: 0;
        /* Отступ сверху равен реальной высоте шапки: её измеряет openRoom().
           Пока здесь стояло фиксированное значение, на узком экране заголовок
           переносился на две строки, панель залезала на шапку и закрывала
           кнопку «Об обмене» — закрыть её можно было только перезагрузкой. */
        top: var(--xt-head-h, 62px); z-index: 6;
        max-height: none; overflow-y: auto;
        background: var(--xt-panel); border: 0;
        padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
        animation: xtInfoIn .18s ease-out;
    }
    @keyframes xtInfoIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    /* Второй выход из панели: всегда виден внизу, даже если шапку чем-то перекрыло */
    .chats-exchange dialog.xt-dialog-embed.show-info .xt-info-close,
    dialog.xt-dialog.xt-room-dialog.show-info .xt-info-close { display: flex; }
}

/* ═══════ ШАПКА ОБМЕНОВ НА ТЕЛЕФОНЕ ═══════
   Заголовок в две строки, абзац описания, кнопка и подпись занимали весь
   первый экран — до самих объявлений приходилось листать. Ужимаем, чтобы
   доска начиналась сразу: человек пришёл смотреть предложения, а не баннер. */
@media (max-width: 640px) {
    .xt-hero { padding: 16px 16px 14px; }
    .xt-hero h1 { font-size: 24px; line-height: 1.18; }
    .xt-hero p { font-size: 13px; line-height: 1.45; }
    .xt-eyebrow { font-size: 10px; }
    .xt-hero-cta { font-size: 11.5px; margin-top: 6px; }
}