/* ============================================================================
 * Калькулятор обменника и лист выбора валюты (07.10).
 * Токены — PayPage (`--pay-*`); тёмная и светлая темы приходят из них.
 * Только классы: прод отдаёт CSP без `unsafe-inline`.
 * ==========================================================================*/

.xc{--xc-r:14px;--xc-spring:cubic-bezier(.22,1,.36,1);--xc-ease:cubic-bezier(.2,.9,.3,1);display:flex;flex-direction:column}
.xc-form{display:flex;flex-direction:column}

/* ── поля «отдаёте / получаете» ─────────────────────────────────────────── */
.xc-field{background:var(--pay-bg-inset);border:1px solid var(--pay-line-subtle);border-radius:var(--xc-r);padding:12px 12px 14px 16px;transition:border-color .16s ease,background-color .16s ease}
.xc-field:focus-within{border-color:var(--pay-accent-line);background:var(--pay-surface-low)}
.xc-field-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;min-height:20px}
.xc-lab{font-size:var(--pay-type-small);font-weight:500;color:var(--pay-text-muted)}
/* Подсказка поля — лимит или пояснение сервера («сумма получения округлена в вашу пользу»): переносится, не режется. */
.xc-hint{font-size:var(--pay-type-small);color:var(--pay-text-muted);text-align:right;font-variant-numeric:tabular-nums;min-width:0;margin-left:auto}
.xc-row{display:flex;align-items:center;gap:12px;margin-top:4px}
.xc-amount{flex:1 1 auto;min-width:0;min-height:48px;background:none;border:0;outline:none;padding:0;color:var(--pay-text);font-family:inherit;font-size:28px;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.xc-amount::placeholder{color:var(--pay-text-quiet)}
.xc-amount.is-long{font-size:22px}
@media (max-width:480px){.xc-amount{font-size:24px}.xc-amount.is-long{font-size:18px}.xc-cur .xc-mk{display:none}.xc-cur:not(:has(.xc-cur-logo)){padding-left:14px}.xc-cur .xc-cur-logo,.xc-cur .xc-cur-logo .xc-logo-img,.xc-cur .xc-cur-logo .xc-logo-mono{width:26px;height:26px}.xc-nm small{white-space:nowrap}}

.xc-cur{flex:0 0 auto;display:flex;align-items:center;gap:10px;min-height:48px;max-width:58%;padding:6px 10px 6px 6px;border-radius:999px;border:1px solid var(--pay-line);background:var(--pay-surface);color:var(--pay-text);cursor:pointer;text-align:left;transition:border-color .16s ease,background-color .16s ease,transform .2s var(--xc-ease)}
.xc-cur:hover{border-color:var(--pay-line-strong);background:var(--pay-hover)}
.xc-cur:active{transform:scale(.97)}
.xc-cur:focus-visible,.xc-flip:focus-visible,.xc-go:focus-visible,.xc-ghost:focus-visible,.xc-suggest:focus-visible,.xc-back-link:focus-visible,.xc-icon:focus-visible,.xc-chip:focus-visible{outline:2px solid var(--pay-focus);outline-offset:2px}
.xc-nm{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.xc-nm b{font-size:15px;font-weight:650}
/* Сеть — часть денег: «TRON (TRC-…» на телефоне скрывал бы, куда уйдёт перевод. Переносится, а не режется. */
.xc-nm small{font-size:var(--pay-type-small);color:var(--pay-text-muted)}
.xc-chev{flex:0 0 auto;color:var(--pay-icon-muted)}
.xc-mk{flex:0 0 auto;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pay-accent-soft);color:var(--pay-accent);font-weight:700;font-size:14px}
.xc-mk-lg{width:44px;height:44px;font-size:17px}

/* ── переворот ──────────────────────────────────────────────────────────── */
.xc-flip-wrap{display:flex;justify-content:center;height:16px;position:relative;z-index:1}
.xc-flip{position:absolute;top:50%;translate:0 -50%;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--pay-line);background:var(--pay-surface);color:var(--pay-text-soft);cursor:pointer;transition:border-color .16s ease,color .16s ease,background-color .16s ease}
.xc-flip:hover{color:var(--pay-accent);border-color:var(--pay-accent-line)}

/* ── строка котировки ───────────────────────────────────────────────────── */
.xc-quote{display:flex;flex-direction:column;gap:2px;margin:12px 2px 14px;min-height:42px}
.xc .xc-rate{margin:0;font-size:var(--pay-type-body);color:var(--pay-text-soft);font-variant-numeric:tabular-nums}
/* Курс в рамке-таймере: рамка — обводка, убывающая за refreshSeconds; без таймера строка как была. */
.xc-ratebox{position:relative;display:flex;align-items:center;gap:10px;align-self:flex-start;max-width:100%}
.xc-ring{display:none;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.xc-ring rect{fill:none;stroke-width:1.5}
.xc-ring-track{stroke:var(--pay-line)}
.xc-ring-bar{stroke:var(--pay-accent);stroke-dasharray:100;stroke-dashoffset:0;stroke-linecap:round}
.xc-ring-sec{display:none;flex:none;min-width:3ch;text-align:right;font-size:var(--pay-type-small);color:var(--pay-text-quiet);font-variant-numeric:tabular-nums}
.xc-ratebox.is-timed{min-height:36px;padding:6px 14px}
.xc-ratebox.is-timed .xc-ring,.xc-ratebox.is-timed .xc-ring-sec{display:block}
.xc-ratebox.is-timed .xc-rate{color:var(--pay-text)}
.xc-ratebox.is-refreshing .xc-ring-bar{stroke-dashoffset:100}
.xc-ratebox.is-refreshing .xc-rate{color:var(--pay-text-soft)}
/* Знак выбранного способа в кнопке валюты — тот же, что в листе. */
.xc-cur .xc-cur-logo,.xc-cur .xc-cur-logo .xc-logo-img,.xc-cur .xc-cur-logo .xc-logo-mono{width:32px;height:32px}
.xc-cur .xc-cur-logo .xc-logo-img,.xc-cur .xc-cur-logo .xc-logo-mono{border-radius:9px}
.xc-cur .xc-cur-logo .xc-logo-badge{width:14px;height:14px;right:-4px;bottom:-4px;box-shadow:0 0 0 2px var(--pay-surface)}
.xc .xc-rate[data-tone=negative]{color:var(--pay-red)}
/* Отказы сервера пишутся со строчной («сумма меньше минимальной…»): в строке-предложении — с заглавной, текст не трогаем. */
.xc .xc-rate::first-letter,.xc .xc-result::first-letter{text-transform:uppercase}
.xc .xc-kind{margin:0;font-size:var(--pay-type-small);color:var(--pay-text-quiet)}
.xc-suggest{align-self:flex-start;margin-top:6px;min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--pay-accent-line);background:var(--pay-accent-soft);color:var(--pay-accent);font-weight:600;cursor:pointer}

.xc-go{width:100%;min-height:52px;border:0;border-radius:12px;background:var(--pay-accent-fill);color:var(--pay-accent-ink);font-size:16px;font-weight:600;cursor:pointer;transition:background-color .16s ease,transform .2s var(--xc-ease)}
.xc-go:hover{background:var(--pay-accent-fill-hover)}
.xc-go:active{transform:scale(.985)}
.xc-go:disabled{background:var(--pay-control);color:var(--pay-text-quiet);cursor:not-allowed;transform:none}
.xc-ghost{width:100%;min-height:48px;border-radius:12px;border:1px solid var(--pay-line);background:transparent;color:var(--pay-text);font-weight:600;cursor:pointer}
.xc-ghost:hover{background:var(--pay-hover)}
.xc .xc-fine{margin:10px 0 0;text-align:center;font-size:var(--pay-type-small);color:var(--pay-text-quiet)}

/* ── подтверждение ──────────────────────────────────────────────────────── */
.xc-confirm{display:flex;flex-direction:column;gap:14px;outline:none}
.xc-back-link{align-self:flex-start;min-height:44px;padding:0 4px;border:0;background:none;color:var(--pay-text-muted);font-weight:500;cursor:pointer}
.xc-back-link:hover{color:var(--pay-text)}
.xc-confirm-title{margin:0;font-size:var(--pay-type-heading-small);font-weight:600}
.xc .xc-lead{margin:-6px 0 0;font-size:var(--pay-type-body);color:var(--pay-text-muted)}
.xc-sum{margin:0;border:1px solid var(--pay-line-subtle);border-radius:var(--xc-r);background:var(--pay-bg-inset);padding:4px 14px}
.xc-sum-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--pay-line-subtle)}
.xc-sum-row:first-child{border-top:0}
.xc-sum dt{color:var(--pay-text-muted)}
.xc-sum dd{margin:0;text-align:right;font-weight:600;overflow-wrap:anywhere}
.xc-sum .xc-money{font-variant-numeric:tabular-nums}
.xc-reqs{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:8px}
.xc-reqs legend{padding:0;margin-bottom:8px;font-weight:600}
.xc-req{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border:1px solid var(--pay-line);border-radius:12px;cursor:pointer;transition:border-color .16s ease,background-color .16s ease}
.xc-req:has(input:checked){border-color:var(--pay-accent-line);background:var(--pay-accent-soft)}
.xc-req input{width:18px;height:18px;accent-color:var(--pay-accent-fill)}
.xc-req-text{display:flex;flex-direction:column;min-width:0}
.xc-req-text small{color:var(--pay-text-muted);font-size:var(--pay-type-small)}
.xc .xc-req-empty{margin:0;color:var(--pay-text-muted)}
.xc-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.xc-stepline{display:flex;justify-content:space-between;gap:12px;font-size:var(--pay-type-body)}
.xc .xc-mail{margin:0;color:var(--pay-text-muted);font-size:var(--pay-type-small)}
.xc .xc-actions{margin:0;display:flex;flex-direction:column;gap:8px}
.xc-action{display:flex;flex-direction:column;gap:4px}
.xc-why{color:var(--pay-text-muted);font-size:var(--pay-type-small);text-align:center}
.xc .xc-result{margin:0;min-height:20px;font-size:var(--pay-type-body)}
.xc-result[data-tone=negative]{color:var(--pay-red)}
.xc-result[data-tone=positive]{color:var(--pay-mint)}

.xc-state{font-size:var(--pay-type-small);color:var(--pay-text-muted)}
.xc-state[data-tone=positive]{color:var(--pay-mint)}
.xc-state[data-tone=negative]{color:var(--pay-red)}

/* ── лист выбора: телефон — шит снизу ───────────────────────────────────── */
/* Каркас: шапка и инструменты стоят; лента листается вбок, тело — вниз, если не влезло. */
.xc-sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;height:auto;max-height:min(88dvh,760px);padding:0;border:0;border-radius:20px 20px 0 0;background:var(--pay-surface);color:var(--pay-text);overflow:hidden;box-shadow:0 -8px 24px rgba(0,0,0,.3)}
.xc-sheet::backdrop{background:rgba(5,6,8,.56);backdrop-filter:blur(2px)}
.xc-sheet-in{display:flex;flex-direction:column;max-height:min(88dvh,760px);padding-top:6px}
.xc-sh-head{position:relative;flex:none;display:flex;align-items:flex-start;gap:12px;padding:14px 16px 8px}
.xc-sh-titles{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;padding-top:4px}
.xc-sh-title{margin:0;font-size:var(--pay-type-heading-small);font-weight:600}
.xc .xc-sh-sub{margin:0;color:var(--pay-text-muted);font-size:var(--pay-type-small);font-variant-numeric:tabular-nums}
.xc-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:0;background:var(--pay-control);color:var(--pay-text-soft);cursor:pointer;transition:background-color .16s ease,color .16s ease}
.xc-icon:hover{background:var(--pay-hover);color:var(--pay-text)}

.xc-sh-tools{flex:none;display:flex;flex-direction:column;gap:10px;padding:4px 0 10px;border-bottom:1px solid var(--pay-line-subtle)}
.xc-search{display:flex;align-items:center;gap:10px;margin:0 16px;min-height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--pay-line);background:var(--pay-bg-inset);color:var(--pay-icon-muted);transition:border-color .16s ease}
.xc-search:focus-within{border-color:var(--pay-accent-line)}
.xc-search input{flex:1 1 auto;min-width:0;min-height:46px;border:0;outline:none;background:none;color:var(--pay-text);font-size:16px}
.xc-search input::-webkit-search-cancel-button{cursor:pointer}
.xc .xc-understood{margin:-2px 16px 0;font-size:var(--pay-type-small);color:var(--pay-accent)}

/* Фишки — оглавление ленты: чернила под активной переезжают (Web Animations — CSP без инлайновых стилей). */
.xc-chips{position:relative;list-style:none;margin:-4px 0;padding:4px 16px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;scroll-padding-inline:16px}
.xc-chips::-webkit-scrollbar{display:none}
.xc-chips[hidden]{display:none}
.xc-chips li{flex:none;position:relative;z-index:1}
.xc-chips .xc-chip-ink{position:absolute;z-index:0;top:4px;left:0;width:0;height:44px;border-radius:999px;background:var(--pay-accent-soft);box-shadow:inset 0 0 0 1px var(--pay-accent-line);pointer-events:none}
.xc-chip{min-height:44px;min-width:52px;padding:0 14px;border-radius:999px;border:0;background:transparent;color:var(--pay-text-muted);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em;cursor:pointer;white-space:nowrap;transition:color .2s ease}
.xc-chip:hover{color:var(--pay-text)}
.xc-chip[aria-current=true]{color:var(--pay-text)}

.xc-sh-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--pay-line-strong) transparent;scrollbar-width:thin;padding:14px 0 calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px}
.xc-sheet.is-busy .xc-rail{opacity:.6;transition:opacity .2s ease .15s}

/* Лента: разделы валют подряд по горизонтали; заголовок раздела липнет к левому краю, пока раздел в ленте. */
.xc-rail{position:relative;display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:16px;padding:0 16px 10px;scrollbar-width:thin;scrollbar-color:var(--pay-line) transparent}
.xc-rail[hidden]{display:none}
.xc-sec{flex:none;display:flex;flex-direction:column;gap:10px;scroll-snap-align:start}
.xc-sec-head{position:sticky;left:0;align-self:flex-start;display:flex;align-items:center;gap:8px;min-height:28px;padding-right:8px;background:var(--pay-surface)}
.xc-sec-flag-img,.xc-sec-flag-mono{flex:none;width:20px;height:20px;border-radius:50%;box-shadow:0 0 0 1px var(--pay-line)}
.xc-sec-flag-mono{display:grid;place-items:center;background:var(--pay-control);color:var(--pay-text-soft);font-size:11px;font-weight:700}
.xc-sec-name{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.xc-sec-name b{font-size:14px;font-weight:650;letter-spacing:.02em}
.xc-sec-name small{font-size:var(--pay-type-small);color:var(--pay-text-quiet)}
.xc-sec-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:84px;gap:8px}

.xc-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;width:84px;min-height:88px;padding:10px 4px 8px;border-radius:14px;border:1px solid transparent;background:var(--pay-surface-low);color:var(--pay-text);text-align:center;cursor:pointer;transition:border-color .16s ease,background-color .16s ease,transform .2s var(--xc-ease)}
.xc-tile:hover{border-color:var(--pay-line-strong);background:var(--pay-hover)}
.xc-tile:active{transform:scale(.96)}
.xc-tile:focus-visible{outline:2px solid var(--pay-focus);outline-offset:2px}
.xc-tile.is-current{border-color:var(--pay-accent-line);background:var(--pay-accent-soft)}
.xc-tile.is-match{border-color:var(--pay-line-strong)}
.xc-tile.is-off{cursor:not-allowed;background:transparent;border:1px dashed var(--pay-line);color:var(--pay-text-quiet)}
.xc-tile.is-off:hover{background:transparent}
.xc-tile.is-off:active{transform:none}
.xc-tile.is-off .xc-logo{filter:grayscale(1);opacity:.45}

.xc-logo{position:relative;flex:none;display:grid;place-items:center;width:36px;height:36px}
.xc-logo-img{display:block;width:36px;height:36px;border-radius:10px;object-fit:contain}
.xc-logo-mono{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--pay-control);box-shadow:inset 0 0 0 1px var(--pay-line);color:var(--pay-text-soft);font-size:16px;font-weight:650}
.xc-logo-badge{position:absolute;right:-5px;bottom:-5px;width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 2px var(--pay-surface-low)}
.xc-tile-name{max-width:100%;font-size:12px;font-weight:550;line-height:1.2;hyphens:auto;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Быстрые направления: один ряд пилюль «отдаю → получаю». Под рукой по рамке бежит свет акцента. */
@property --xc-sweep{syntax:"<angle>";inherits:false;initial-value:0deg}
.xc-hot{display:flex;flex-direction:column;gap:8px}
.xc-hot[hidden]{display:none}
.xc-hot-title{margin:0 16px;font-size:var(--pay-type-small);font-weight:600;color:var(--pay-text-muted);letter-spacing:.02em}
.xc-hot-list{list-style:none;margin:0;padding:3px 16px 6px;display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:16px;scrollbar-width:none}
.xc-hot-list::-webkit-scrollbar{display:none}
/* Хвост ряда гаснет у края: видно, что пилюль больше, чем влезло (подсказка прокрутки без стрелок). */
.xc-hot-list{mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.xc-hot-list li{flex:none;scroll-snap-align:start}
.xc-hotpill{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 14px 4px 6px;border-radius:999px;border:1px solid var(--pay-line);background:var(--pay-surface-low);color:var(--pay-text);cursor:pointer;white-space:nowrap;transition:background-color .16s ease,border-color .16s ease,transform .2s var(--xc-ease)}
.xc-hotpill::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--xc-sweep),transparent 0deg 250deg,var(--pay-accent) 310deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .2s ease}
.xc-hotpill:hover,.xc-hotpill:focus-visible{background:var(--pay-hover);border-color:var(--pay-accent-line)}
.xc-hotpill:hover::before,.xc-hotpill:focus-visible::before{opacity:1;animation:xc-sweep 2.2s linear infinite}
.xc-hotpill:focus-visible{outline:2px solid var(--pay-focus);outline-offset:3px}
.xc-hotpill:active{transform:scale(.97)}
@keyframes xc-sweep{to{--xc-sweep:360deg}}
.xc-hot-side{display:inline-flex;align-items:center;gap:6px}
.xc-hot-logo{flex:none;display:grid;place-items:center;width:24px;height:24px}
.xc-hot-logo-img{display:block;width:24px;height:24px;border-radius:7px;object-fit:contain}
.xc-hot-logo-mono{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--pay-control);box-shadow:inset 0 0 0 1px var(--pay-line);color:var(--pay-text-soft);font-size:12px;font-weight:650}
.xc-hot-text{display:inline-flex;align-items:baseline;gap:4px}
.xc-hot-text b{font-size:13px;font-weight:650}
.xc-hot-text small{font-size:12px;color:var(--pay-text-muted)}
.xc-hot-swap{flex:none;color:var(--pay-accent)}
.xc-hot-fwd,.xc-hot-back{transition:transform .3s var(--xc-spring)}
.xc-hotpill:hover .xc-hot-fwd,.xc-hotpill:focus-visible .xc-hot-fwd{animation:xc-fwd 1.2s var(--xc-ease) infinite}
.xc-hotpill:hover .xc-hot-back,.xc-hotpill:focus-visible .xc-hot-back{animation:xc-back 1.2s var(--xc-ease) infinite}
@keyframes xc-fwd{50%{transform:translateX(2px)}}
@keyframes xc-back{50%{transform:translateX(-2px)}}

.xc .xc-empty{margin:0 16px;padding:32px 16px;border-radius:12px;background:var(--pay-bg-inset);color:var(--pay-text-muted);text-align:center}
.xc .xc-empty:empty{display:none}
.xc .xc-note{margin:0 16px 4px;font-size:var(--pay-type-small);line-height:1.45;color:var(--pay-text-muted)}
.xc .xc-note[hidden]{display:none}
.xc .xc-fail{margin:0 16px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 16px;border-radius:12px;background:var(--pay-bg-inset);color:var(--pay-text-muted);text-align:center}
.xc .xc-fail[hidden]{display:none}
.xc .xc-retry{width:auto;padding:0 20px}
.xc .xc-sr{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.xc-skel{display:block;width:84px;height:88px;border-radius:14px;background:var(--pay-bg-inset)}
.xc-skel-head{display:block;width:120px;height:20px;border-radius:999px;background:var(--pay-bg-inset)}
.xc-sheet.is-busy .xc-skel,.xc-sheet.is-busy .xc-skel-head{animation:xc-pulse 1.1s ease-in-out infinite alternate}
@keyframes xc-pulse{to{opacity:.5}}

/* ── десктоп: широкая панель ─────────────────────────────────────────────── */
@media (min-width:900px){
  .xc-sheet{inset:10vh 0 auto 0;margin:0 auto;width:min(960px,calc(100vw - 48px));max-height:min(760px,80dvh);border-radius:20px;box-shadow:0 24px 64px -12px rgba(0,0,0,.55)}
  .xc-sheet[open]{display:flex}
  .xc-sheet-in{flex:1 1 auto;min-width:0;min-height:0;max-height:min(760px,80dvh);padding-top:8px}
  .xc-sh-head{padding:14px 24px 8px}
  .xc-search{margin:0 24px}
  .xc .xc-understood{margin:-2px 24px 0}
  .xc .xc-note{margin:0 24px 4px}
  .xc-chips{padding:4px 24px;scroll-padding-inline:24px}
  .xc-sh-body{padding:18px 0 22px}
  .xc-rail{padding:0 24px 12px;scroll-padding-inline:24px;gap:28px}
  .xc-sec-grid{grid-auto-columns:92px}
  .xc-tile,.xc-skel{width:92px}
  .xc-hot-title{margin:0 24px}
  .xc-hot-list{padding:3px 24px 6px;scroll-padding-inline:24px}
  .xc .xc-empty,.xc .xc-fail{margin:0 24px}
}

@media (max-width:420px){
  .xc-amount{font-size:24px}
  .xc-cur{max-width:62%}
}

@media (prefers-reduced-motion:reduce){
  .xc-cur,.xc-go,.xc-field,.xc-flip,.xc-tile,.xc-chip,.xc-hotpill,.xc-hot-fwd,.xc-hot-back{transition:none}
  .xc-tile:active,.xc-chip:active,.xc-hotpill:active{transform:none}
  .xc-sheet.is-busy .xc-skel,.xc-sheet.is-busy .xc-skel-head{animation:none}
  /* Свет по рамке и стрелки стоят: под рукой рамка просто акцентная. */
  .xc-hotpill:hover::before,.xc-hotpill:focus-visible::before{animation:none;background:var(--pay-accent)}
  .xc-hotpill:hover .xc-hot-fwd,.xc-hotpill:focus-visible .xc-hot-fwd,.xc-hotpill:hover .xc-hot-back,.xc-hotpill:focus-visible .xc-hot-back{animation:none}
  .xc-rail,.xc-hot-list{scroll-behavior:auto}
}