/* ═══════════════════════════════════════════════════════════════════════
   SIDE MENU (боковое меню) — единая «широкая» поверхность навигации.

   Зачем: в шапке (десктопной и мобильной) физически нет места, чтобы
   рассказать про разделы и соседние проекты — там помещаются только иконки
   и однострочные пункты дропдауна. Здесь у каждого пункта есть заголовок,
   подпись и иконка, а разделы сгруппированы.

   Разметка: modules/header.ejs (внутри <main id="root">, поэтому доступны
   Vue-биндинги). Логика и жесты: modules/footer.ejs (инлайн-скрипты внутри
   #root Vue выбрасывает — см. docs и memory).

   Визуальный язык взят из .gm-модалок (index.css): полупрозрачные
   поверхности с backdrop-filter, 0.5px бордеры, радиусы 12/22/26,
   cubic-bezier(.16,1,.3,1), системный шрифт. Панель — слева, оттуда же
   бургер и жест открытия.
   ═══════════════════════════════════════════════════════════════════════ */

.sm {
    /* --sm-p: 0 — закрыто, 1 — открыто. Одна переменная управляет и сдвигом
       панели, и затемнением скрима, поэтому во время drag'а они едут вместе. */
    --sm-p: 0;
    --sm-w: 380px;
    --sm-inset: 12px;
    --sm-accent: rgb(127, 45, 232);
    --sm-fg: rgb(28, 28, 30);
    --sm-fg-2: rgba(60, 60, 67, 0.72);
    --sm-fg-3: rgba(60, 60, 67, 0.5);
    --sm-fill: rgba(120, 120, 128, 0.10);
    --sm-fill-hover: rgba(120, 120, 128, 0.16);
    --sm-hairline: rgba(60, 60, 67, 0.12);
    --sm-surface: rgba(250, 250, 252, 0.82);
    --sm-tile: rgba(255, 255, 255, 0.62);

    position: fixed;
    inset: 0;
    z-index: 9200;
    /* Закрытое меню не должно перехватывать клики и попадать в таб-порядок */
    visibility: hidden;
    pointer-events: none;
    /* Тот же стек, что у .gm-модалок (index.css) — общий «системный» язык
       премиальных поверхностей проекта */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--sm-fg);
}

#dark .sm {
    --sm-accent: rgb(179, 129, 255);
    --sm-fg: rgba(255, 255, 255, 0.95);
    --sm-fg-2: rgba(235, 235, 245, 0.62);
    --sm-fg-3: rgba(235, 235, 245, 0.42);
    --sm-fill: rgba(255, 255, 255, 0.08);
    --sm-fill-hover: rgba(255, 255, 255, 0.14);
    --sm-hairline: rgba(255, 255, 255, 0.10);
    --sm-surface: rgba(28, 28, 32, 0.84);
    --sm-tile: rgba(255, 255, 255, 0.05);
}

/* Три состояния вместо одного: is-visible держит панель отрисованной всё время
   анимации (иначе visibility срезала бы анимацию закрытия), is-open включает
   клики. Снимает is-visible скрипт по окончании transition. */
.sm.is-visible { visibility: visible; }
.sm.is-open { pointer-events: auto; }

/* Иконки внутри панели всегда рисуются в заданном размере: у inline-SVG без
   width/height своих размеров нет, и внутри flex-контейнера он растягивается
   на всю кнопку (так «ломались» крестик и иконка выхода) */
.sm svg { flex: none; display: block; }

/* ─── Скрим ─────────────────────────────────────────────────────────── */

.sm__scrim {
    position: absolute;
    inset: 0;
    background: rgba(6, 6, 10, 0.34);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    opacity: var(--sm-p);
    transition: opacity .42s cubic-bezier(.16, 1, .3, 1);
    /* Скрим не скроллится вместе со страницей под ним */
    touch-action: none;
}

#dark .sm__scrim { background: rgba(2, 2, 4, 0.52); }

.sm.is-dragging .sm__scrim { transition: none; }

/* ─── Панель ────────────────────────────────────────────────────────── */

.sm__panel {
    position: absolute;
    /* Отступы одинаковые со всех сторон и на всех ширинах: панель читается как
       цельная плашка, а не как обрезанный с одной стороны лист. max() уводит её
       из-под «чёлки» и жестовой полосы на телефонах */
    top: max(var(--sm-inset), env(safe-area-inset-top, 0px));
    bottom: max(var(--sm-inset), env(safe-area-inset-bottom, 0px));
    left: max(var(--sm-inset), env(safe-area-inset-left, 0px));
    width: var(--sm-w);
    max-width: calc(100vw - var(--sm-inset) * 2);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-radius: 26px;
    background: var(--sm-surface);
    -webkit-backdrop-filter: blur(50px) saturate(180%);
    backdrop-filter: blur(50px) saturate(180%);
    border: 0.5px solid var(--sm-hairline);
    box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.34),
                0 16px 32px -16px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    /* translate3d вместо left — анимация уезжает на композитор, а во время
       drag'а панель следует за пальцем без перерасчёта раскладки. 100% здесь —
       собственная ширина панели, поэтому смещение верное при любом --sm-w */
    transform: translate3d(calc((var(--sm-p) - 1) * (100% + var(--sm-inset) + 24px)), 0, 0);
    transition: transform .48s cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
    touch-action: pan-y;
}

#dark .sm__panel {
    box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.7),
                0 16px 32px -16px rgba(0, 0, 0, 0.5);
}

.sm.is-dragging .sm__panel { transition: none; }

/* ─── Шапка панели ──────────────────────────────────────────────────── */

.sm__head {
    flex: 0 0 auto;
    padding: 10px 12px 12px;
    border-bottom: 0.5px solid var(--sm-hairline);
}

.sm__head-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 6px 10px;
}

.sm__head-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

.sm__close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: var(--sm-fill);
    color: var(--sm-fg-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: background .16s ease, color .16s ease, transform .1s ease;
}

.sm__close svg { width: 14px; height: 14px; }
.sm__close:hover { background: var(--sm-fill-hover); color: var(--sm-fg); }
.sm__close:active { transform: scale(.92); }

/* Блок пользователя — те же классы, что в меню аватара на десктопе
   (.usermenu-head из index.css); здесь только посадка в панель */
.sm .usermenu-head {
    border-bottom: none;
    border-radius: 16px;
    padding: 9px 10px;
    gap: 11px;
}

.sm .usermenu-head__avatar {
    width: 42px;
    height: 42px;
    box-shadow: 0 0 0 0.5px var(--sm-hairline);
    background-color: var(--sm-fill);
}

.sm .usermenu-head__name { font-size: 15px; }

.sm .usermenu-head__balance {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
}

.sm .usermenu-head__balance small { opacity: .7; }
.sm .balance-item--shards,
.sm .balance-item--crystals { color: var(--sm-fg-2); }
#dark .sm .balance-item--shards,
#dark .sm .balance-item--crystals { color: rgba(235, 235, 245, 0.66); }

/* Шкала уровня — тот же .profile-gm-bar (gamification.css), что на странице
   профиля и в меню аватара. Тут снимаем её внешние отступы и добавляем светлую
   тему: базовые стили написаны белым по тёмному */
.sm .profile-gm-bar.usermenu-gm {
    margin: 8px 0 0;
    padding: 10px 12px 10px 14px;
    gap: 12px;
}

.sm .usermenu-gm .pgb-meta { min-width: 38px; padding-right: 12px; }
.sm .usermenu-gm .pgb-meta__num { font-size: 18px; margin-top: 2px; }
.sm .usermenu-gm .pgb-progress__xp { font-size: 11px; }

body:not(#dark) .sm .profile-gm-bar {
    background: var(--sm-fill);
    box-shadow: inset 0 0 0 1px var(--sm-hairline);
}
body:not(#dark) .sm .pgb-meta { border-right-color: var(--sm-hairline); }
body:not(#dark) .sm .pgb-meta__label { color: var(--sm-fg-3); }
body:not(#dark) .sm .pgb-meta__num { color: var(--sm-fg); }
body:not(#dark) .sm .pgb-progress__xp { color: var(--sm-fg-2); }
body:not(#dark) .sm .pgb-track { background: rgba(120, 120, 128, 0.18); }

/* Гостю — понятный призыв вместо аватара */
.sm__guest { display: flex; flex-direction: column; gap: 10px; padding: 0 2px; }

.sm__guest-text {
    margin: 4px 8px 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--sm-fg-2);
}

.sm__guest-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.sm__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 14px;
    border: 0.5px solid var(--sm-hairline);
    border-radius: 12px;
    background: var(--sm-tile);
    color: var(--sm-fg);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background .16s ease, transform .1s ease;
}

.sm__btn:hover { background: var(--sm-fill-hover); }
.sm__btn:active { transform: scale(.97); }

#root .sm__btn.acc {
    background: linear-gradient(120deg, var(--accent-blue) 0%, rgba(82, 79, 255, 0) 40%, var(--accent-magenta) 100%), var(--accent-indigo);
    box-shadow: 0 0 0 1px rgba(113, 101, 255, 0.5), 0 6px 18px rgba(63, 22, 255, 0.28);
    border: none;
    color: var(--ink-on-dark);
}

/* ─── Тело: скроллируемые секции ────────────────────────────────────── */

.sm__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 10px 10px 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--sm-hairline) transparent;
}

.sm__body::-webkit-scrollbar { width: 8px; }
.sm__body::-webkit-scrollbar-thumb {
    background: var(--sm-hairline);
    border-radius: 4px;
}

.sm__section + .sm__section { margin-top: 14px; }

.sm__section-title {
    padding: 8px 12px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--sm-fg-3);
}

/* ─── Строка меню ───────────────────────────────────────────────────── */

.sm__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: var(--sm-fg);
    font-family: inherit;
    font-size: 15px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .16s ease, transform .1s ease;
}

#root .sm__item { color: var(--sm-fg); }

.sm__item:hover { background: var(--sm-fill); }
.sm__item:active { transform: scale(.985); background: var(--sm-fill-hover); }

.sm__item.is-active { background: var(--sm-fill); }
.sm__item.is-active .sm__item-title { color: var(--sm-accent); font-weight: 600; }
.sm__item.is-active .sm__ic { color: var(--sm-accent); }

.sm__ic {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sm-fg-2);
}

.sm__ic svg { width: 20px; height: 20px; }
.sm__ic--img img { width: 20px; height: 20px; display: block; object-fit: contain; }

/* Круглая аватарка вместо иконки — телеграм-каналы и чаты */
.sm__ic--avatar {
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--sm-fill);
    box-shadow: 0 0 0 0.5px var(--sm-hairline);
}

.sm__item-text { flex: 1 1 auto; min-width: 0; }

.sm__item-title {
    display: block;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.2px;
    line-height: 1.25;
}

.sm__item-sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--sm-fg-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Текущее значение справа — тема, NSFW, язык */
.sm__value {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--sm-fg-3);
    letter-spacing: -0.1px;
}

.sm__item.is-on .sm__value { color: var(--sm-accent); font-weight: 500; }

.sm__badge {
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #FF3B30;
    color: var(--ink-on-dark);
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Плашка тира подписки у пункта (кардлисты — функция MAX); цвет — tierColor('max') */
.sm__tier {
    display: inline-block;
    margin-left: 7px;
    padding: 1px 5px 2px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .4px;
    color: #fd667f;
    background: rgba(253, 102, 127, .13);
    vertical-align: 1px;
}

.sm__chev {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--sm-fg-3);
}

.sm__chev svg { width: 100%; height: 100%; }

/* ─── Раскрывающиеся списки (серии, языки) ──────────────────────────── */

.sm__disclosure { display: block; }

.sm__row { display: flex; align-items: center; }
.sm__row .sm__item { flex: 1 1 auto; min-width: 0; }

.sm__chev-btn,
.sm__chev--rot {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 8px;
    box-sizing: border-box;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--sm-fg-3);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .16s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}

.sm__chev-btn svg,
.sm__chev--rot svg { width: 100%; height: 100%; }
.sm__chev-btn:hover { background: var(--sm-fill); }

.sm__disclosure.is-expanded .sm__chev-btn,
.sm__disclosure.is-expanded .sm__chev--rot { transform: rotate(90deg); }

/* grid-template-rows 0fr→1fr анимирует раскрытие без знания высоты содержимого */
.sm__sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .38s cubic-bezier(.16, 1, .3, 1);
}

.sm__disclosure.is-expanded .sm__sub { grid-template-rows: 1fr; }

.sm__sub-inner { overflow: hidden; min-height: 0; }

.sm__sub-list {
    display: flex;
    flex-direction: column;
    margin: 2px 0 6px 25px;
    padding-left: 14px;
    /* Тонкая направляющая, как в сайдбарах Xcode/Finder */
    border-left: 1px solid var(--sm-hairline);
}

.sm__sub-item {
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--sm-fg-2);
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#root .sm__sub-item { color: var(--sm-fg-2); }
.sm__sub-item:hover { background: var(--sm-fill); color: var(--sm-fg); }

/* Текущий пункт подсписка — той же логикой, что и .sm__item.is-active:
   заливка плюс акцентный цвет. Понадобился для рынка, у которого два адреса
   (/market и /market/real) и в раскрывашке нужно видеть, где ты сейчас.
   #root в селекторе обязателен: рядом стоит «#root .sm__sub-item { color }»,
   и по специфичности (id+класс) он перебил бы акцент. */
.sm__sub-item.is-active,
#root .sm__sub-item.is-active {
    background: var(--sm-fill);
    color: var(--sm-accent);
    font-weight: 500;
}

/* ─── Выбор языка ───────────────────────────────────────────────────── */

.sm__lang-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 6px;
    padding: 4px;
    border-radius: 14px;
    background: var(--sm-fill);
}

.sm__lang {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--sm-fg-2);
    font-size: 14px;
    transition: background .16s ease, color .16s ease;
}

#root .sm__lang { color: var(--sm-fg-2); }
.sm__lang:hover { background: var(--sm-fill-hover); color: var(--sm-fg); }

.sm__lang img {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: block;
    flex: none;
}

.sm__lang-name { flex: 1 1 auto; }

.sm__lang-check {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--sm-accent);
    opacity: 0;
}

.sm__lang-check svg { width: 100%; height: 100%; }

.sm__lang.is-active {
    background: var(--sm-tile);
    color: var(--sm-fg);
    box-shadow: 0 0 0 0.5px var(--sm-hairline);
}

.sm__lang.is-active .sm__lang-check { opacity: 1; }

/* ─── Плитки проектов ───────────────────────────────────────────────── */

.sm__tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 2px;
}

.sm__tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 18px;
    background: var(--sm-tile);
    border: 0.5px solid var(--sm-hairline);
    color: var(--sm-fg);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .16s ease, transform .12s cubic-bezier(.16, 1, .3, 1);
}

#root .sm__tile { color: var(--sm-fg); }
.sm__tile:hover { background: var(--sm-fill-hover); }
.sm__tile:active { transform: scale(.97); }

.sm__tile-ic {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sm-fill);
    color: var(--sm-fg-2);
}

.sm__tile-ic svg { width: 18px; height: 18px; }

.sm__tile-title {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.2px;
    line-height: 1.2;
}

.sm__tile-sub {
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--sm-fg-3);
}

/* ─── Подвал ────────────────────────────────────────────────────────── */

.sm__foot {
    flex: 0 0 auto;
    padding: 8px 12px 10px;
    border-top: 0.5px solid var(--sm-hairline);
}

.sm__logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 42px;
    border: none;
    border-radius: 13px;
    background: transparent;
    color: rgba(215, 0, 21, 0.85);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background .16s ease;
}

.sm__logout svg { width: 17px; height: 17px; }
#dark .sm__logout { color: rgba(255, 105, 97, 0.9); }
.sm__logout:hover { background: rgba(215, 0, 21, 0.08); }
#dark .sm__logout:hover { background: rgba(255, 105, 97, 0.1); }

/* ─── Кнопка-триггер: бургер слева от логотипа ──────────────────────── */

/* Обёртка занимает грид-область logo в .header (index.css: 'logo nav auth') */
.header__brand {
    grid-area: logo;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* margin-right логотипа задан в index.css для грид-раскладки — внутри флекса
   он лишний, отступ до навигации держит сам грид */
.header__brand .logo,
.header__brand .logo-en { margin-right: 0; }

.mobile-header .header__brand { gap: 10px; }

.sm-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(164, 156, 193, 1);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .16s ease, transform .1s ease;
}

.sm-trigger svg { width: 22px; height: 22px; }
.sm-trigger:hover { color: rgba(127, 45, 232, 1); }
#dark .sm-trigger:hover { color: rgba(179, 129, 255, 1); }
.sm-trigger:active { transform: scale(.9); }

/* В мобильной шапке иконки залиты фиксированным #D1D3DA в обеих темах —
   бургер подстраивается под них, а не под акцент десктопной навигации */
.mobile-header .sm-trigger { color: #D1D3DA; }

/* Кнопка-«книжка» переехала в боковое меню, и в этой строке осталось 2–3 иконки:
   space-between растаскивал их по краям, оставляя пустую полосу посередине */
.mobile-header_social .container {
    justify-content: flex-start;
    gap: 22px;
}

/* ─── Адаптив ───────────────────────────────────────────────────────── */

@media screen and (max-width: 1359px) {
    .sm { --sm-w: 360px; }
}

@media screen and (max-width: 767px) {
    .sm {
        --sm-inset: 10px;
        --sm-w: min(84vw, 380px);
    }

    .sm__panel { border-radius: 24px; }
    .sm__head { padding: 8px 10px 12px; }
    .sm__body { padding: 8px 8px 14px; }
}

@media (hover: none) {
    .sm__item:hover { background: transparent; }
    .sm__tile:hover { background: var(--sm-tile); }
    .sm__lang:hover { background: transparent; color: var(--sm-fg-2); }
    .sm__lang.is-active:hover { background: var(--sm-tile); color: var(--sm-fg); }
}

@media (prefers-reduced-motion: reduce) {
    .sm__panel,
    .sm__scrim,
    .sm__sub,
    .sm__chev-btn,
    .sm__chev--rot { transition-duration: .01ms; }
}

/* Блокировка скролла страницы под открытым меню (класс вешает footer.ejs) */
html.sm-locked, body.sm-locked { overflow: hidden; }

/* Фокус-обводка только для клавиатуры, в тон .gm-модалкам */
.sm__item:focus-visible,
.sm__tile:focus-visible,
.sm__btn:focus-visible,
.sm__close:focus-visible,
.sm__chev-btn:focus-visible,
.sm__lang:focus-visible,
.sm__sub-item:focus-visible,
.sm__logout:focus-visible,
.sm-trigger:focus-visible {
    outline: 2px solid rgba(127, 45, 232, 0.55);
    outline-offset: 2px;
}

#dark .sm__item:focus-visible,
#dark .sm__tile:focus-visible,
#dark .sm__btn:focus-visible,
#dark .sm__close:focus-visible,
#dark .sm__chev-btn:focus-visible,
#dark .sm__lang:focus-visible,
#dark .sm__sub-item:focus-visible,
#dark .sm__logout:focus-visible,
#dark .sm-trigger:focus-visible { outline-color: rgba(179, 129, 255, 0.65); }

.sm *:focus:not(:focus-visible) { outline: none; }

/* ─── Переключатель рынка ───────────────────────────────────────────────
   Свёрнут в обычную строку меню, развёрнут — список рынков со счётчиками.
   Первая версия была тремя плитками в три строки: занимала сто пикселей,
   обрезала подписи и вмещала только «мир/СНГ». Раскрывашка дешевле по месту
   и вмещает и свою страну, и каждый регион отдельно. */
.smk-cur {
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.smk-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
}
.smk-opt[hidden] { display: none; }
.smk-opt__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Метка своего региона: подсказывает, куда посылка дойдёт как внутренняя */
.smk-opt__mark {
    flex: none;
    font-size: 10px;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 5px;
    background: var(--sm-fill);
    color: var(--sm-fg-3);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.smk-opt__mark[hidden] { display: none; }
.smk-opt__n { flex: none; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--sm-fg-3); }

/* Выбранный — акцентный градиент проекта (тот же, что у .card-price.purple и
   .cf-switch.on). Он тёмный во всех трёх точках, поэтому белый текст читается
   и в светлой теме, и в тёмной: отдельного правила под #dark не нужно. */
/* #root в селекторе обязателен: рядом живёт «#root .sm__sub-item { color:
   var(--sm-fg-2) }», и по специфичности (id+класс) он перебивал бы белый —
   текст выбранного оставался серым прямо на градиенте. */
.smk-opt.is-on,
.smk-opt.is-on:hover,
#root .smk-opt.is-on,
#root .smk-opt.is-on:hover {
    background: linear-gradient(120deg, var(--accent-blue) -4.18%, var(--accent-indigo) 40.2%, var(--accent-magenta) 100%);
    color: var(--ink-on-dark);
}
.smk-opt.is-on .smk-opt__n { color: var(--ink-on-dark); opacity: .82; }
.smk-opt.is-on .smk-opt__mark { background: rgba(255, 255, 255, .22); color: var(--ink-on-dark); }

/* ─── Переключатель валюты ──────────────────────────────────────────────
   Соседка языка, и устроена так же: строка с текущим значением, которая
   раскрывается в список. Отдельное семейство от .smk-opt (рынок), хотя
   выглядят они похоже: у рынка справа счётчик продавцов и метка своего
   региона, у валюты — символ СЛЕВА, как опознавательный знак строки.
   Подсветку текущего пункта берём у .sm__sub-item.is-active, своей нет. */
.smc-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
}
/* Фиксированная ширина, а не auto: символы разной ширины (₽ против Br), и
   без неё колонка названий прыгала бы от строки к строке */
.smc-opt__sym {
    flex: 0 0 auto;
    width: 18px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--sm-fg-3);
}
.smc-opt__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Выбранная строка красит символ вместе с текстом: приглушённый знак рядом с
   акцентной подписью выглядел бы недорисованным */
.sm__sub-item.is-active .smc-opt__sym,
#root .sm__sub-item.is-active .smc-opt__sym { color: inherit; }

/* Шеврон внутри кнопки, а не рядом: строка целиком — одна зона нажатия.
   Поворот вешаем на .sm__chev--rot, правило которого уже есть выше и
   срабатывает от .sm__disclosure.is-expanded — своей анимации не нужно. */
.smk-cur { display: flex; align-items: center; }
.smk-cur__chev {
    margin-left: auto;
    color: var(--sm-fg-3);
    padding: 6px;
    width: 28px;
    height: 28px;
}