.select_js.iselect_js.sg-on .sg-hidden,
.select_js.iselect_js.sg-on .sg-collapsed { display: none !important; }

/*
Оформление целиком из темы Crystal-Trade: цвета — переменные css/light.css и css/dark.css (тема переключает схему
сама, и модуль переключается вместе с ней), размеры — в rem, как во всей теме (html font-size: 0.5208vw, то есть
10px при ширине 1920 и меньше на мобильных). Свой цвет у модуля один — брендовый цвет сети на метке.

Два токена темы взяты не самые очевидные:
--colors-fills-form-deviders в обеих схемах чёрный 20% и на тёмной пропадает, поэтому линии берём с общего
--colors-fills-deviders (он инвертируется). Фон плашек — --form-fill, а не --field-fill: на --field-fill
выкрашена сама панель списка, и вкладки на ней были бы неотличимы от фона.
*/
.select_js.iselect_js.sg-on {
    --sg-ink: var(--colors-texts-form-text, #484848);
    --sg-ink-strong: var(--colors-texts-text, #000000);
    --sg-ink-dim: var(--colors-texts-form-secondary-text, #9b9b9b);
    --sg-accent: var(--colors-fills-primary, #00b9b0);
    --sg-on-accent: var(--colors-texts-on-primary, #ffffff);
    --sg-surface: var(--colors-fills-tab-fill, rgba(255 255 255 / .16));
    --sg-field: var(--form-fill, #ffffff);
    --sg-line: var(--colors-fills-deviders, rgba(0 0 0 / .08));
    --sg-hover: var(--colors-states-droplist-item-hover, rgba(69 218 228 / .1));
    --sg-selected: var(--colors-states-droplist-item-selected, rgba(69 218 228 / .2));
    --sg-scroll: var(--colors-fills-scrolls, #07c1b6);
    --sg-radius: var(--desktop-radius-corner-radius, 1.6rem);
    --sg-pad: var(--mobile-desktop-currency-item-paddings, 1.2rem);
    --sg-font: var(--font, Inter, sans-serif);
}

/*
Шапка со вкладками видна всегда, но без своей заливки: прокручиваются только строки, поэтому под шапку
ничего не заезжает и закрашивать её не нужно. Поиск в шапку не входит — он штатный, поверх заголовка списка.
*/
.select_js.iselect_js.sg-on .sg-bar {
    flex: none;
    padding: 0.4rem 0 0;
}

.select_js.iselect_js.sg-on .sg-flex {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.select_js.iselect_js.sg-on .sg-flex .sg-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/*
Строки лежат в своей области, поэтому колонку и просвет между ними тема больше не задаёт — повторяем её
значения (.select_js_ul_ins: flex-колонка, gap 0.4rem, на узких экранах 0.8rem).
*/
.select_js.iselect_js.sg-on .sg-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    /* строки не сжимаем: в колонке-флексе они иначе съезжаются, когда список длиннее панели */

    scrollbar-color: var(--sg-scroll) transparent;
    scrollbar-width: thin;
}

.select_js.iselect_js.sg-on .sg-list > * { flex: 0 0 auto; }

.select_js.iselect_js.sg-on .sg-list::-webkit-scrollbar { width: 0.8rem; height: 0.8rem; }
.select_js.iselect_js.sg-on .sg-list::-webkit-scrollbar-thumb { background: var(--sg-scroll); border-radius: 0.5rem; }
.select_js.iselect_js.sg-on .sg-list::-webkit-scrollbar-track { background: none; }

/* место под полосу прокрутки тема резервирует на своём контейнере; прокрутка теперь внутри — переносим отступ туда */
.select_js.iselect_js.sg-on .select_js_ul_ins.sg-flex { padding-right: 0; }
.select_js.iselect_js.sg-on .select_js_ul_ins.sg-flex > .sg-list { padding-right: 1.6rem; }

.select_js.iselect_js.sg-on .sg-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 0 0 1.2rem;
}

/* шапка нужна только полноэкранному окну на узких экранах */
.select_js.iselect_js.sg-on .sg-sheet-head { display: none; }

/* вкладка повторяет .tbl_icon темы — тот же размер, шрифт, регистр и скругление */
.select_js.iselect_js.sg-on .sg-tab {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.8rem 1.2rem;
    font-family: var(--sg-font);
    font-size: 1.4rem;
    line-height: 1.6rem;
    text-transform: uppercase;
    color: var(--sg-ink-strong);
    background-color: var(--sg-surface);
    border: 1px solid var(--sg-line);
    border-radius: var(--sg-radius);
    cursor: pointer;
    transition: all 0.1s ease-in-out;
}

.select_js.iselect_js.sg-on .sg-tab:hover {
    background-color: var(--sg-hover);
    border-color: var(--sg-accent);
    transition: all 0.1s ease-in-out;
}

.select_js.iselect_js.sg-on .sg-tab.is-active {
    background-color: var(--sg-accent);
    border-color: var(--sg-accent);
    color: var(--sg-on-accent);
}

/* поле поиска штатное — его оформляет сама тема, модуль в него не лезет */

.select_js.iselect_js.sg-on .sg-empty {
    padding: var(--sg-pad);
    font-size: 1.6rem;
    color: var(--sg-ink-dim);
}

/*
Заголовок группы носит класс .select_js_ulli, поэтому коробку строки — отступ, скругление, подсветку при
наведении и размер логотипа — рисует ему сама тема. Своего здесь только место под стрелку и метка раскрытой
группы цветом выбранного пункта списка.
*/
.select_js.iselect_js.sg-on .sg-head { position: relative; cursor: pointer; }
.select_js.iselect_js.sg-on .sg-head.is-open { background: var(--sg-selected); }

/* место справа оставлено под стрелку, чтобы длинное название не уезжало под неё */
.select_js.iselect_js.sg-on .sg-head > .sg-row-ins { flex: 1 1 auto; min-width: 0; padding-right: 2rem; }

/*
Строка остаётся такой же, как её рисует тема: логотип с её обтеканием и размерами, текст рядом.
Модуль не задаёт иконке ни ширины, ни формы, ни отступов — только добавляет свои подписи.
*/
.select_js.iselect_js.sg-on .sg-child > .sg-row-ins { padding-left: var(--sg-pad); }

.select_js.iselect_js.sg-on .sg-texts { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.select_js.iselect_js.sg-on .sg-line { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }

/* код валюты — размер и вес .select_txt темы */
.select_js.iselect_js.sg-on .sg-code {
    font-family: var(--sg-font);
    font-size: 1.8rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--sg-ink);
}

.select_js.iselect_js.sg-on .sg-name {
    display: block;
    font-size: 1.4rem;
    line-height: 2rem;
    color: var(--sg-ink-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.select_js.iselect_js.sg-on .sg-nets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }

/*
Метка сети — «неон под стеклом»: цвет сети живёт в переменной --sg-net, из неё делаются подсветка,
рамка и полупрозрачная заливка. Сначала простые значения для старых браузеров, ниже — цветные.

Текст метки замешивается не с белым, а с цветом текста формы: на тёмной схеме он светлый и бледно-жёлтый
Celo остаётся ярким, на светлой — тёмный, и та же метка становится читаемой вместо выцветшей.
*/
.select_js.iselect_js.sg-on .sg-net {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.6rem;
    border-radius: 99rem;
    font-family: var(--sg-font);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.8rem;
    white-space: nowrap;
    border: 1px solid var(--sg-line);
    background: var(--sg-surface);
    color: var(--sg-ink-dim);
    -webkit-backdrop-filter: blur(0.6rem);
    backdrop-filter: blur(0.6rem);
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
    .select_js.iselect_js.sg-on .sg-net {
        color: color-mix(in srgb, var(--sg-net, #8b93a5) 72%, var(--sg-ink));
        border-color: color-mix(in srgb, var(--sg-net, #8b93a5) 55%, transparent);
        background: color-mix(in srgb, var(--sg-net, #8b93a5) 16%, transparent);
        box-shadow:
            0 0 0.8rem color-mix(in srgb, var(--sg-net, #8b93a5) 28%, transparent),
            inset 0 0 0.8rem color-mix(in srgb, var(--sg-net, #8b93a5) 12%, transparent);
    }

    /* активная вкладка светится акцентом темы */
    .select_js.iselect_js.sg-on .sg-tab.is-active {
        box-shadow: 0 0 1rem color-mix(in srgb, var(--sg-accent) 45%, transparent);
    }
}

/* цвета сетей: как на биржах — сеть узнаётся по цвету метки, а не только по тексту.
   Почти белые бренды (Scroll, Celo, Linea, Aptos, NEAR) и почти чёрные (XRP, Cosmos, Starknet, Cardano,
   LTC, ETC, zkSync) взяты в сдвинутом варианте: в оригинале они сливались с панелью на одной из схем. */
.select_js.iselect_js.sg-on .sg-net[data-net="TRC20"] { --sg-net: #e8402a; }
.select_js.iselect_js.sg-on .sg-net[data-net="ERC20"] { --sg-net: #627eea; }
.select_js.iselect_js.sg-on .sg-net[data-net="BEP20"],
.select_js.iselect_js.sg-on .sg-net[data-net="BEP2"] { --sg-net: #f0b90b; }
.select_js.iselect_js.sg-on .sg-net[data-net="POLYGON"] { --sg-net: #8247e5; }
.select_js.iselect_js.sg-on .sg-net[data-net="ARBITRUM"] { --sg-net: #1b6fd6; }
.select_js.iselect_js.sg-on .sg-net[data-net="OPTIMISM"] { --sg-net: #ff0420; }
.select_js.iselect_js.sg-on .sg-net[data-net="BASE"] { --sg-net: #0052ff; }
.select_js.iselect_js.sg-on .sg-net[data-net="SOLANA"] { --sg-net: #9945ff; }
.select_js.iselect_js.sg-on .sg-net[data-net="TON"] { --sg-net: #0098ea; }
.select_js.iselect_js.sg-on .sg-net[data-net="OMNI"] { --sg-net: #5c6bc0; }
.select_js.iselect_js.sg-on .sg-net[data-net="AVALANCHEC"],
.select_js.iselect_js.sg-on .sg-net[data-net="AVALANCHEX"],
.select_js.iselect_js.sg-on .sg-net[data-net="AVALANCHE"] { --sg-net: #e84142; }
.select_js.iselect_js.sg-on .sg-net[data-net="ZKSYNC"] { --sg-net: #6b70c8; }
.select_js.iselect_js.sg-on .sg-net[data-net="LINEA"] { --sg-net: #2ca6cf; }
.select_js.iselect_js.sg-on .sg-net[data-net="SCROLL"] { --sg-net: #c08a3e; }
.select_js.iselect_js.sg-on .sg-net[data-net="MANTLE"] { --sg-net: #008e6d; }
.select_js.iselect_js.sg-on .sg-net[data-net="CELO"] { --sg-net: #a8ae00; }
.select_js.iselect_js.sg-on .sg-net[data-net="KAVA"] { --sg-net: #ff433e; }
.select_js.iselect_js.sg-on .sg-net[data-net="SUI"] { --sg-net: #4da2ff; }
.select_js.iselect_js.sg-on .sg-net[data-net="APTOS"] { --sg-net: #04c39a; }
.select_js.iselect_js.sg-on .sg-net[data-net="NEAR"] { --sg-net: #00b87a; }
.select_js.iselect_js.sg-on .sg-net[data-net="CARDANO"] { --sg-net: #3468d6; }
.select_js.iselect_js.sg-on .sg-net[data-net="STELLAR"] { --sg-net: #08b5e5; }
.select_js.iselect_js.sg-on .sg-net[data-net="XRP"] { --sg-net: #6b7a99; }
.select_js.iselect_js.sg-on .sg-net[data-net="POLKADOT"] { --sg-net: #e6007a; }
.select_js.iselect_js.sg-on .sg-net[data-net="COSMOS"] { --sg-net: #6f74a0; }
.select_js.iselect_js.sg-on .sg-net[data-net="TEZOS"] { --sg-net: #2c7df7; }
.select_js.iselect_js.sg-on .sg-net[data-net="INJECTIVE"] { --sg-net: #00a5ff; }
.select_js.iselect_js.sg-on .sg-net[data-net="KCC"] { --sg-net: #0fbf8f; }
.select_js.iselect_js.sg-on .sg-net[data-net="NOBLE"] { --sg-net: #4f7cff; }
.select_js.iselect_js.sg-on .sg-net[data-net="MONAD"] { --sg-net: #836ef9; }
.select_js.iselect_js.sg-on .sg-net[data-net="STARKNET"] { --sg-net: #7b78d6; }
.select_js.iselect_js.sg-on .sg-net[data-net="BTC"] { --sg-net: #f7931a; }
.select_js.iselect_js.sg-on .sg-net[data-net="LTC"] { --sg-net: #4f7fc4; }
.select_js.iselect_js.sg-on .sg-net[data-net="DOGE"] { --sg-net: #c2a633; }
.select_js.iselect_js.sg-on .sg-net[data-net="DASH"] { --sg-net: #008ce7; }
.select_js.iselect_js.sg-on .sg-net[data-net="ZEC"] { --sg-net: #f4b728; }
.select_js.iselect_js.sg-on .sg-net[data-net="XMR"] { --sg-net: #ff6600; }
.select_js.iselect_js.sg-on .sg-net[data-net="BCH"] { --sg-net: #8dc351; }
.select_js.iselect_js.sg-on .sg-net[data-net="ETC"] { --sg-net: #4aa04a; }

/* «ещё N» — не сеть, своего бренда у неё нет: остаётся нейтральной плашкой темы */
.select_js.iselect_js.sg-on .sg-net-more {
    --sg-net: initial;
    background: var(--sg-surface);
    border-color: var(--sg-line);
    color: var(--sg-ink-dim);
    box-shadow: none;
}

/* стрелка висит поверх строки справа, чтобы не влезать в раскладку темы */
.select_js.iselect_js.sg-on .sg-chevron {
    position: absolute;
    right: var(--sg-pad);
    top: 50%;
    width: 0.8rem;
    height: 0.8rem;
    margin-top: -0.6rem;
    border-right: 0.2rem solid currentColor;
    border-bottom: 0.2rem solid currentColor;
    transform: rotate(45deg);
    color: var(--sg-ink-dim);
    transition: transform .15s ease;
    pointer-events: none;
}

.select_js.iselect_js.sg-on .sg-head.is-open .sg-chevron { transform: rotate(-135deg); }

/*
Заголовок селекта стоит в поле суммы и по ширине не тянется — поэтому здесь строка сжимается:
без сетки, без названия монеты, метка сети мельче, лишнее прячется, а не вылезает за поле.
*/
.select_js.iselect_js.sg-on .select_js_title_ins.sg-title .sg-row-ins {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
}

.select_js.iselect_js.sg-on .select_js_title_ins.sg-title .sg-name,
.select_js.iselect_js.sg-on .select_js_title_ins.sg-title .sg-nets { display: none; }
.select_js.iselect_js.sg-on .select_js_title_ins.sg-title .sg-texts { display: flex; align-items: center; min-width: 0; }
.select_js.iselect_js.sg-on .select_js_title_ins.sg-title .sg-line { gap: 0.4rem; min-width: 0; }
.select_js.iselect_js.sg-on .select_js_title_ins.sg-title .sg-code { overflow: hidden; text-overflow: ellipsis; }

/* в поле суммы метка идёт после кода; небольшой отступ справа — чтобы не упиралась в стрелку темы */
.select_js.iselect_js.sg-on .select_js_title_ins.sg-title .sg-net {
    margin-right: 0.4rem;
    font-size: 1rem;
    padding: 0 0.5rem;
    line-height: 1.6rem;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none;
}

/* мобильные размеры — те же, что тема задаёт инпутам и строкам списка на узких экранах */
@media only screen and (max-width: 640px) {
    .select_js.iselect_js.sg-on {
        --sg-radius: var(--mobile-radius-corner-radius, 1.2rem);
    }

    .select_js.iselect_js.sg-on .sg-list { gap: 0.8rem; }
    .select_js.iselect_js.sg-on .sg-tab { font-size: 1.3rem; }

    /*
    Строку списка тема на узких экранах делает фиксированной высоты (4.8rem в форме обмена, 5.6rem вообще) —
    у неё строка однострочная. У нас строка из двух строк текста, а заголовок группы ещё и с метками сетей:
    содержимое не влезало в коробку и строки наезжали друг на друга. Высоту отпускаем, оставляя ту же как
    минимальную. Логотипа это не касается — его размер по-прежнему задаёт тема.
    Селектор длинный намеренно: у правила темы пять классов, более короткий его не перебьёт.
    */
    .select_js.iselect_js.sg-on .select_js_ul .select_js_ul_ins .sg-row,
    .select_js.iselect_js.sg-on .select_js_ul .select_js_ul_ins .sg-head {
        height: auto;
        min-height: 4.8rem;
    }

    /*
    Полноэкранное окно выбора валюты. Панель списка растягивается на весь экран и становится колонкой:
    шапка с названием и крестиком, под ней штатное поле поиска, вкладки, дальше прокручиваются строки.
    Своей разметки под это нет — те же .select_js_ul и .select_js_ul_ins, только положение другое.
    */
    body.sg-sheet-open { overflow: hidden; }

    .select_js.iselect_js.sg-on.open .select_js_ul {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10000;
        /* !important: панель показывает jQuery.show() Jselect, и в части случаев он пишет display инлайном */
        display: flex !important;
        flex-direction: column;
        width: auto;
        max-width: none;
        min-width: 0;
        max-height: none;
        min-height: 0;
        margin: 0;
        padding: 1.6rem;
        border: 0;
        border-radius: 0;
        background: var(--form-fill, #ffffff);
    }

    .select_js.iselect_js.sg-on.open .select_js_ul .select_js_ul_ins {
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
        padding-right: 0;
        /* тема красит панель списка в --field-fill; в окне это фон поля, поэтому пусть будет виден фон окна */
        background: transparent;
    }

    /*
    Поверх панели тема кладёт значок «ничего не найдено» (search_off.svg в ::after). Обычно его закрывает
    непрозрачный фон списка, а в окне фон прозрачный — и значок вылезал поверх заголовка. У модуля для пустого
    списка своя строка .sg-empty, так что значок тут не нужен.
    */
    .select_js.iselect_js.sg-on.open .select_js_ul::after { content: none; }

    .select_js.iselect_js.sg-on.open .sg-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.2rem;
        padding: 0 0 1.2rem;
    }

    /* margin: 0 — у темы .selector_title с отступом снизу 2rem, из-за него заголовок вставал выше крестика */
    .select_js.iselect_js.sg-on .sg-sheet-title {
        margin: 0;
        font: 600 2rem/2.8rem var(--sg-font);
        color: var(--sg-ink-strong);
    }

    .select_js.iselect_js.sg-on .sg-sheet-title::first-letter { text-transform: uppercase; }

    /* крестик рисуем сами — так он берёт цвет текста темы и одинаков в обеих схемах */
    .select_js.iselect_js.sg-on .sg-close {
        /* у темы .selector_close абсолютный, с top/right — сбрасываем смещение, иначе кнопка уезжает вниз */
        position: relative;
        top: auto;
        right: auto;
        flex: 0 0 auto;
        appearance: none;
        -webkit-appearance: none;
        width: 2.4rem;
        height: 2.4rem;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        color: var(--sg-ink);
        cursor: pointer;
    }

    .select_js.iselect_js.sg-on .sg-close::before,
    .select_js.iselect_js.sg-on .sg-close::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 15%;
        width: 70%;
        height: 2px;
        margin-top: -1px;
        background: currentColor;
        border-radius: 2px;
    }

    .select_js.iselect_js.sg-on .sg-close::before { transform: rotate(45deg); }
    .select_js.iselect_js.sg-on .sg-close::after { transform: rotate(-45deg); }

    /*
    Поле поиска переехало в шапку окна — там оно обычная строка, а не всплывашка над заголовком.
    Позиционирование оставляем: лупу тема рисует через ::before с position: absolute, и без точки
    отсчёта у обёртки иконка улетает в угол окна.
    */
    .select_js.iselect_js.sg-on .sg-bar .select_js_search,
    .select_js.iselect_js.sg-on .sg-bar .select_js_search_ins {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        /* в части раскладок тема прячет штатный поиск (.xchange_div .xchange_curs_line) — в окне он нужен */
        visibility: visible;
    }

    .select_js.iselect_js.sg-on .sg-bar .select_js_search { padding: 0 0 1.2rem; }

    /* стрелка выпадающего списка внутри поля поиска — в окне она ничего не открывает и только сорит */
    .select_js.iselect_js.sg-on .sg-bar .select_js_search_ins::after { content: none; }

    /*
    Вкладки — одной строкой с горизонтальной прокруткой, а не в два ряда: названия категорий у ядра длинные
    («Банковская карта», «Электронные валюты»), и переносом они съедали пол-экрана над списком.
    Отрицательные поля — чтобы прокрутка шла от края до края окна, а не внутри отступов.
    */
    .select_js.iselect_js.sg-on .sg-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        margin: 0 -1.6rem;
        padding: 0 1.6rem 1.2rem;
    }

    .select_js.iselect_js.sg-on .sg-tabs::-webkit-scrollbar { display: none; }
    .select_js.iselect_js.sg-on .sg-tab { flex: 0 0 auto; }
    .select_js.iselect_js.sg-on .sg-code { font-size: 1.6rem; font-weight: 400; }
    .select_js.iselect_js.sg-on .sg-name { font-size: 1.3rem; line-height: 1.8rem; }
}