/* Оформление Mini App — белое с голубым.
   Светлую тему задаём сами, а не берём из Telegram: --tg-theme-bg-color
   там просто белый, и приложение выглядело бы как системный диалог. От
   Telegram берём только сигнал «тема тёмная» (класс body.dark), и тогда
   переключаем палитру на тёмно-синюю.
   Фирменные акценты вынесены в переменные: на следующем этапе их будет
   задавать админ-панель. */

:root {
    /* Синий — один на всё приложение: кнопки, выбранное, ссылки.
       Голубой (--sky) работает только как верх градиента и подсветка,
       самостоятельным цветом действия он слишком светлый. */
    --brand: #0071E3;
    --brand-ink: #0066CC;
    --sky: #2997FF;
    --brand-soft: #EEF5FD;
    --brand-line: #CFE2F8;
    --brand-glow: rgba(0, 113, 227, 0.22);
    /* Градиентов больше нет: переменная осталась ради старых правил и
       теперь означает просто фирменный цвет. */
    --brand-grad: var(--brand);

    /* Фон — белый с голубым подтоном, карточки — чистый белый. Разница
       небольшая намеренно: карточка должна читаться краем и тенью, а не
       перепадом яркости, иначе экран рассыпается на пятна. */
    --bg: #F5F5F7;
    --card: #FFFFFF;
    --card-2: #FAFAFC;
    --text: #1D1D1F;
    --hint: #6E6E73;
    --sep: rgba(0, 0, 0, 0.08);

    --radius-card: 20px;
    --radius-btn: 18px;
    --shadow: 0 8px 28px rgba(23, 61, 122, 0.10);
}

/* Тёмная тема. Ключ — класс body.dark, который ставит script.js по
   tg.colorScheme. На @media (prefers-color-scheme) полагаться нельзя:
   внутри Telegram тема приложения и тема системы расходятся сплошь и
   рядом, и тогда тёмный интерфейс оставался бы со светлой палитрой. */
body.dark {
    --brand: #2997FF;
    --brand-ink: #64B2FF;
    --sky: #2997FF;
    --brand-soft: rgba(41, 151, 255, 0.14);
    --brand-line: rgba(41, 151, 255, 0.28);
    --brand-glow: rgba(41, 151, 255, 0.25);
    --brand-grad: var(--brand);

    --bg: #000000;
    --card: #1C1C1E;
    --card-2: #232326;
    --text: #F5F5F7;
    --hint: #A1A1A6;
    --sep: rgba(255, 255, 255, 0.10);

    --shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

/* ---- бережный режим -----------------------------------------------------
   Включается для Android и слабых телефонов (класс ставится из script.js).
   Размытие фона у липких панелей — самое дорогое, что здесь есть: при
   прокрутке браузер пересчитывает его каждый кадр, и на Android это
   заметно дёргает страницу. На iPhone и на компьютере всё остаётся как
   было. */
body.lite .topbar,
body.lite .tabbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.lite .tabbar { background: var(--bg); }
/* Тени и плавные появления — мелочь по отдельности, но их тут десятки */
body.lite .card { box-shadow: none; }
body.lite .screen { animation: none; }
body.lite .skeleton { animation: none; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---- Шапка ---------------------------------------------------------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--card);
    color: var(--text);
    border-bottom: 1px solid var(--sep);
}

.brand {
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.2px;
    /* Имя набрано градиентом, а не сплошным синим: это единственное место,
       где голубой виден сам по себе, и шапка перестаёт быть просто белой
       полосой. */
    background: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.balance {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    color: var(--brand-ink);
    font-size: 14px;
    font-weight: 700;
}

.balance__unit { opacity: 0.8; font-size: 12px; }

/* Монета вместо надписи SLX. Рисуется тонкими линиями текущим цветом,
   поэтому одинаково уместна и на фиолетовой шапке, и на карточке. */
.coin {
    width: 15px;
    height: 15px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
}
.coin__body { opacity: 0.95; }
.coin__ring { opacity: 0.45; }
.coin__mark { stroke-width: 1.8; }
.coin--big { width: 26px; height: 26px; }

/* ---- Содержимое ------------------------------------------------------ */

.content {
    flex: 1;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 16px 14px 24px;
}

.screen { animation: fade-up 0.32s ease both; }
.screen--hidden { display: none; }

@keyframes fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.card {
    background: var(--card);
    border: 1px solid var(--sep);
    border-radius: var(--radius-card);
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: var(--shadow);
}

/* Заливка шапки профиля описана в конце файла, рядом с кнопками: там
   она уже вне досягаемости стеклянного слоя. Здесь остаётся только то,
   что тот слой не трогает. */
.card--hero { color: #fff; }

.hero__badge {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.hero__title { margin: 12px 0 4px; font-size: 24px; font-weight: 700; }
.hero__hint  { margin: 0; opacity: 0.85; font-size: 14px; }

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--sep);
}
.row--last { border-bottom: none; padding-bottom: 0; }
.row:first-child { padding-top: 0; }
.row__label { color: var(--hint); font-size: 14px; }
.row__value { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Загрузка -------------------------------------------------------- */

.loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 0 22px;
}

/* Сцена. Слои лежат друг на друге по центру, поэтому всё внутри —
   absolute, а размер задаёт сама сцена. */
.loader__scene {
    position: relative;
    width: 216px;
    height: 216px;
    display: grid;
    place-items: center;
    margin-bottom: 4px;
}

.loader__scene > * {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Мягкое свечение под кристаллом — оно и даёт сцене глубину */
.loader__halo {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: var(--brand-soft);
    filter: blur(14px);
    animation: halo-breathe 3.6s ease-in-out infinite;
}

@keyframes halo-breathe {
    0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1);    }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.10); }
}

/* Тонкое кольцо-дорожка, по которой идут значки */
.loader__ring {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    border: 1px solid var(--sep);
    box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.16);
    transition: opacity 0.4s ease;
}

/* Кольцо со значками вращается целиком, а каждый значок вращается назад
   с тем же периодом — так он едет по кругу, но не переворачивается. */
.loader__orbit {
    width: 168px;
    height: 168px;
    animation: orbit-spin 14s linear infinite;
    transition: opacity 0.4s ease;
}

.loader__moon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    display: grid;
    place-items: center;
    font-size: 17px;
    color: var(--brand);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow: 0 6px 18px rgba(20, 21, 26, 0.14);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
}

.loader__moon > svg { width: 26px; height: 26px; }

/* Раскладываем пятёрку по кругу. Поворот задаёт место на орбите, сдвиг
   вверх — радиус, обратный поворот держит значок ровно, а к нему уже
   добавляется встречное вращение — оно гасит вращение всего кольца. */
.loader__moon:nth-child(1) { transform: rotate(  0deg) translateY(-84px) rotate(  -0deg); animation: moon-hold-0 14s linear infinite; }
.loader__moon:nth-child(2) { transform: rotate( 72deg) translateY(-84px) rotate( -72deg); animation: moon-hold-1 14s linear infinite; }
.loader__moon:nth-child(3) { transform: rotate(144deg) translateY(-84px) rotate(-144deg); animation: moon-hold-2 14s linear infinite; }
.loader__moon:nth-child(4) { transform: rotate(216deg) translateY(-84px) rotate(-216deg); animation: moon-hold-3 14s linear infinite; }
.loader__moon:nth-child(5) { transform: rotate(288deg) translateY(-84px) rotate(-288deg); animation: moon-hold-4 14s linear infinite; }

@keyframes orbit-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

@keyframes moon-hold-0 {
    from { transform: rotate(  0deg) translateY(-84px) rotate(  -0deg); }
    to   { transform: rotate(  0deg) translateY(-84px) rotate(-360deg); }
}
@keyframes moon-hold-1 {
    from { transform: rotate( 72deg) translateY(-84px) rotate( -72deg); }
    to   { transform: rotate( 72deg) translateY(-84px) rotate(-432deg); }
}
@keyframes moon-hold-2 {
    from { transform: rotate(144deg) translateY(-84px) rotate(-144deg); }
    to   { transform: rotate(144deg) translateY(-84px) rotate(-504deg); }
}
@keyframes moon-hold-3 {
    from { transform: rotate(216deg) translateY(-84px) rotate(-216deg); }
    to   { transform: rotate(216deg) translateY(-84px) rotate(-576deg); }
}
@keyframes moon-hold-4 {
    from { transform: rotate(288deg) translateY(-84px) rotate(-288deg); }
    to   { transform: rotate(288deg) translateY(-84px) rotate(-648deg); }
}

/* Кристалл в центре — фирменный знак и он же индикатор работы. Грани
   набраны градиентами: ни одной картинки, а значит он на экране сразу,
   ещё до первого ответа сервера. */
.loader__core {
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    animation: core-float 3.2s ease-in-out infinite;
    transition: opacity 0.3s ease;
}

.loader__crystal {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background:
        var(--brand);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 14px 34px var(--brand-glow),
        inset 0 2px 10px rgba(255, 255, 255, 0.55);
    animation: crystal-turn 5.2s ease-in-out infinite;
}

@keyframes core-float {
    0%, 100% { transform: translate(-50%, -50%) scale(1);    }
    50%      { transform: translate(-50%, -53%) scale(1.05); }
}

@keyframes crystal-turn {
    0%, 100% { transform: rotate(45deg)  scale(1);    }
    50%      { transform: rotate(135deg) scale(0.94); }
}

/* Колода готовых шаблонов. Ложится поверх кристалла, когда доехали
   первые превью: три карточки веером, как раздача. */
.loader__deck {
    width: 216px;
    height: 132px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
}

.loader__deck--on { opacity: 1; }

/* Когда карточки легли, кольцо и кристалл уходят: свечение остаётся
   подложкой под шаблонами, а сцена не превращается в кашу. */
.loader__scene--dealt .loader__orbit,
.loader__scene--dealt .loader__ring,
.loader__scene--dealt .loader__core { opacity: 0; }

.loader__card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 104px;
    height: 104px;
    margin: -52px 0 0 -52px;
    border-radius: 22px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.46);
    box-shadow: 0 12px 30px rgba(20, 21, 26, 0.18);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    animation: card-deal 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.loader__card > svg { width: 100%; height: 100%; }

.loader__card:nth-child(1) { --deal-x: -64px; --deal-r: -13deg; z-index: 1; }
.loader__card:nth-child(2) { --deal-x:   0px; --deal-r:   0deg; z-index: 3; animation-delay: 0.09s; }
.loader__card:nth-child(3) { --deal-x:  64px; --deal-r:  13deg; z-index: 2; animation-delay: 0.18s; }

@keyframes card-deal {
    from { opacity: 0; transform: translate(0, 26px) rotate(0deg) scale(0.82); }
    to   { opacity: 1; transform: translate(var(--deal-x), 0) rotate(var(--deal-r)) scale(1); }
}

/* Имя набора под сценой. Блик пробегает по буквам слева направо — это
   единственная «реклама» на экране, и она никому не мешает. */
.loader__brand {
    margin: 2px 0 4px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.2px;
    background: var(--text);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: brand-shine 2.8s ease-in-out infinite;
}

@keyframes brand-shine {
    from { background-position: 130% 0; }
    to   { background-position: -30% 0; }
}

/* Вопрос и ответ — как реплики в переписке */
.loader__ask {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--hint);
    text-align: center;
    animation: fade-up 0.4s ease both;
}
.loader__answer {
    margin: 1px 0 0;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    color: var(--brand);
    animation: fade-up 0.4s ease both;
}

.loader__bar {
    position: relative;
    width: 200px;
    height: 6px;
    margin: 14px auto 2px;
    border-radius: 3px;
    background: var(--sep);
    overflow: hidden;
}
.loader__fill {
    position: relative;
    width: 0;
    height: 100%;
    border-radius: 3px;
    background: var(--brand);
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

/* Блик бежит по заполненной части: видно, что работа идёт, даже когда
   ширина какое-то время не меняется. */
.loader__fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%,
                rgba(255, 255, 255, 0.65) 50%, transparent 80%);
    background-size: 200% 100%;
    animation: bar-shine 1.5s linear infinite;
}

@keyframes bar-shine {
    from { background-position: -60% 0; }
    to   { background-position: 160% 0; }
}

.loader__phrase {
    margin: 0;
    color: var(--hint);
    font-size: 13px;
    text-align: center;
    min-height: 20px;
    animation: fade-up 0.4s ease both;
}

/* Уход с экрана: не мгновенная подмена, а подъём с растворением */
.loader--done { animation: loader-out 0.34s ease forwards; }

@keyframes loader-out {
    to { opacity: 0; transform: translateY(-10px) scale(0.97); }
}

/* Бережный режим: снимаем размытия и оставляем одно движение — кольцо.
   Остальное на слабых телефонах даёт рывки как раз тогда, когда
   процессор занят разбором каталога. */
body.lite .loader__halo,
body.lite .loader__core,
body.lite .loader__crystal { animation: none; }
body.lite .loader__moon,
body.lite .loader__card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--card);
}
body.lite .loader__brand { animation: none; color: var(--text); }
body.lite .loader__fill::after { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .loader__orbit, .loader__moon, .loader__halo,
    .loader__core, .loader__crystal, .loader__brand,
    .loader__fill::after { animation: none; }
}

/* Скелетоны карточек — вместо пустого экрана во время ожидания */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.skeleton {
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    background: linear-gradient(100deg, var(--card) 30%, rgba(128,128,128,0.13) 50%, var(--card) 70%);
    background-size: 220% 100%;
    animation: shimmer 1.3s ease-in-out infinite;
}

@keyframes shimmer {
    from { background-position: 180% 0; }
    to   { background-position: -20% 0; }
}

/* ---- Ошибка ---------------------------------------------------------- */

.card--error { text-align: center; }
.error__icon  { font-size: 34px; }
.error__title { margin: 10px 0 6px; font-size: 18px; }
.error__text  { margin: 0 0 16px; color: var(--hint); font-size: 14px; }

/* ---- Кнопки ---------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 24px;
    border: none;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, box-shadow 0.2s ease,
                background 0.2s ease, filter 0.2s ease;
}

/* Нажатие: кнопка проседает и прижимает тень к себе. Одного уменьшения
   мало — на светлом фоне сдвиг в 3% почти не виден, а исчезнувшая тень
   читается сразу. */
.btn:active {
    transform: translateY(1px) scale(0.985);
    filter: brightness(0.96);
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.45;
    filter: grayscale(0.4);
    cursor: default;
    box-shadow: none;
}

/* ---- Нижняя панель --------------------------------------------------- */

/* Имя бота под панелью вкладок. Раньше это была сплошная плашка в
   фирменном цвете, и внизу получались две полосы одна поверх другой:
   стеклянная панель и тёмный брусок под ней. Подпись нужна, брусок — нет. */
.bottombar {
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: transparent;
    color: var(--hint);
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* ---- Поле ввода ------------------------------------------------------ */

.field { display: block; position: relative; }
.field__label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.field__counter {
    position: absolute;
    right: 14px;
    bottom: 14px;
    font-size: 12px;
    color: var(--hint);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.input {
    width: 100%;
    min-height: 50px;
    padding: 12px 62px 12px 14px;
    border: 2px solid transparent;
    border-radius: 14px;
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft);
}

/* ---- Чипы (режимы переноса) ------------------------------------------ */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.chip {
    padding: 8px 14px;
    border: none;
    border-radius: 999px;
    background: var(--bg);
    color: var(--hint);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.14s ease, background 0.18s ease, color 0.18s ease;
}
.chip:active { transform: scale(0.96); }
.chip--on {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 4px 14px var(--brand-glow);
}

/* ---- Категории и сетка ----------------------------------------------- */

.cat { margin-bottom: 22px; }

.cat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 10px;
}
.cat__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--hint);
}
.cat__count {
    font-size: 12px;
    font-weight: 700;
    color: var(--hint);
    opacity: 0.7;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.tile {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: 8px;
    border: 2px solid transparent;
    border-radius: 16px;
    background: var(--card);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.14s ease, border-color 0.18s ease, box-shadow 0.2s ease;
}
.tile:active { transform: scale(0.96); }

/* Пока анимация не пришла — мягкое мерцание, а не пустой квадрат */
.tile:not(.tile--ready)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(128,128,128,0.13) 50%, transparent 70%);
    background-size: 220% 100%;
    animation: shimmer 1.3s ease-in-out infinite;
}

.tile__stage { width: 100%; height: 100%; }
.tile__stage svg { display: block; width: 100% !important; height: 100% !important; }

.tile--on {
    border-color: var(--brand);
    box-shadow: 0 6px 20px var(--brand-glow);
}

.tile__mark {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.tile--on .tile__mark { opacity: 1; transform: scale(1); }

/* ---- Панель выбора ---------------------------------------------------- */

.actionbar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 480px;
    margin: 0 auto;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(14px) saturate(150%);
    border-top: 1px solid var(--sep);
    transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}
.actionbar--hidden {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
}

.actionbar__info { display: flex; flex-direction: column; line-height: 1.25; }
.actionbar__count { font-size: 15px; }
.actionbar__price { font-size: 13px; color: var(--hint); }

/* ---- Таб-бар ---------------------------------------------------------- */

.tabbar {
    position: sticky;
    bottom: 0;
    z-index: 15;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(14px) saturate(150%);
    border-top: 1px solid var(--sep);
}

/* Четыре вкладки: правило обязано идти ПОСЛЕ .tabbar, иначе его
   перебьёт заданная там сетка из трёх колонок. */
.tabbar--4 { grid-template-columns: repeat(4, 1fr); }
.tabbar--5 { grid-template-columns: repeat(5, 1fr); }
/* Шесть вкладок появляются, когда включён розыгрыш. Без этого правила
   срабатывала сетка из пяти колонок и шестая кнопка уезжала на вторую
   строку, ломая высоту панели. */
.tabbar--6 { grid-template-columns: repeat(6, 1fr); }

.tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 0 6px;
    border: none;
    background: none;
    color: var(--hint);
    cursor: pointer;
    transition: color 0.18s ease, transform 0.14s ease;
}
.tab:active { transform: scale(0.94); }
/* Компактнее прежнего: пять вкладок на узком экране иначе не помещаются,
   а крупные значки занимали заметную часть высоты */
.tab__icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    filter: grayscale(1);
    opacity: 0.65;
    transition: all 0.18s ease;
}
.tab__label { font-size: 10px; font-weight: 600; letter-spacing: -0.1px; }
.tab--on { color: var(--brand); }
/* Выбранную вкладку помечаем ещё и подложкой: одного изменения цвета на
   мелком значке не видно, особенно на свету. */
.tab--on .tab__icon {
    background: var(--brand-soft);
    border-radius: 10px;
    box-shadow: 0 0 0 6px var(--brand-soft);
}
.tab--on .tab__icon { filter: none; opacity: 1; transform: translateY(-1px); }

/* Иконки вкладок — Lottie из public/icons. Они одноцветные (белые), а
   цвет в Lottie задаётся атрибутом fill, который CSS перебивает без
   !important: так иконка сама принимает цвет вкладки — серый у обычной,
   фирменный у выбранной, — и отдельных файлов на каждое состояние не нужно */
/* Размер задаёт контейнер, а не сам svg: lottie вешает на него инлайновые
   width/height: 100%, и они перебивают любое правило из таблицы стилей.
   Без фиксированного контейнера значок растягивался на всю ширину вкладки
   и поднимал её высоту вдвое. */
.tab__icon svg { display: block; width: 100%; height: 100%; }
.tab__icon svg path,
.tab__icon svg g { fill: currentColor; }

/* Свои значки рисуем линией, а не заливкой. Правило выше заливает всё
   подряд — оно рассчитано на Lottie, где фигуры сплошные, — и контурный
   значок оно превратило бы в чёрное пятно. */
.tab__icon svg.icon--own path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* У анимации свой размер шрифта не нужен, а grayscale гасил бы цвет */
.tab__icon:has(svg) { font-size: 0; filter: none; }
/* Короткий подскок при переходе — отклик на нажатие, раз сами иконки статичные */
.tab--on .tab__icon:has(svg) { animation: tab-pop 0.34s ease; }
@keyframes tab-pop {
    0%   { transform: scale(0.82); }
    55%  { transform: scale(1.12) translateY(-2px); }
    100% { transform: scale(1) translateY(-1px); }
}

/* ---- Профиль и розыгрыш ----------------------------------------------- */

/* Шапка профиля: аватар, имя, ник и ID в один блок */
.who {
    display: flex;
    align-items: center;
    gap: 14px;
}
.who__avatar {
    width: 62px;
    height: 62px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.22);
    font-size: 26px;
    font-weight: 700;
    color: #fff;
}
.who__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.who__body { min-width: 0; }
.who__body .hero__title { margin: 0; font-size: 21px; }
.who__body .hero__hint { margin: 2px 0 0; }
.who__id {
    margin: 4px 0 0;
    font-size: 12px;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

.premium__text {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--hint);
    line-height: 1.45;
}

.hero__balance {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.countdown {
    margin-top: 10px;
    font-size: 34px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px 10px;
    border-radius: 14px;
    background: var(--bg);
}
.stat__value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 12px; color: var(--hint); text-align: center; }

.copyrow { display: flex; gap: 8px; margin-top: 12px; }
.input--flat { padding: 10px 12px; font-size: 13px; font-weight: 500; }
.btn--small { min-height: 40px; padding: 0 14px; font-size: 13px; }

/* Строка списка: набор, приз, история, способ пополнения */
.item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--sep);
    text-decoration: none;
    color: inherit;
}
.item:last-child { border-bottom: none; padding-bottom: 0; }
.item__icon {
    flex: 0 0 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--brand-soft);
    font-size: 18px;
}
.item__body { flex: 1; min-width: 0; }
.item__title {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item__sub { font-size: 12px; color: var(--hint); }
.item__right { font-size: 13px; font-weight: 600; color: var(--brand); white-space: nowrap; }

.empty {
    padding: 18px 4px;
    text-align: center;
    color: var(--hint);
    font-size: 13px;
}

/* ---- Оформление и прогресс -------------------------------------------- */

.btn--wide { width: 100%; margin-bottom: 10px; }

.grid--preview { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grid--preview .tile { pointer-events: none; }

.progress {
    height: 8px;
    margin-top: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
}
.progress__bar {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #fff;
    transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Пользователи, которым важна плавность, а не эффекты */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---- Панель настроек стиля -------------------------------------------- */

.styles__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 14px;
    padding: 12px 14px;
    border: none;
    border-radius: 14px;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease;
}
.styles__arrow { color: var(--hint); transition: transform 0.22s ease; }
.styles--closed + .styles__toggle .styles__arrow { transform: rotate(0deg); }

.styles {
    overflow: hidden;
    max-height: 600px;
    opacity: 1;
    transition: max-height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease,
                margin-top 0.3s ease;
    margin-top: 12px;
}
.styles--closed { max-height: 0; opacity: 0; margin-top: 0; }

.styles__label {
    margin: 10px 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--hint);
}
.styles__hint { margin-top: 8px; font-size: 12px; color: var(--hint); }

/* Свёрнутый раздел: видно два ряда по три, остальное — за кнопкой.
   Плитки существуют в разметке, но скрытые не попадают в IntersectionObserver,
   поэтому их анимации и не запрашиваются, пока раздел не развернули. */
.cat--collapsed .grid > .tile:nth-child(n + 7) { display: none; }

.cat__more {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 11px 0;
    border: 0;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.14s ease;
}
.cat__more:active { transform: scale(0.98); }

/* «Выбрать весь пак» — показывается только когда раздел развёрнут */
.cat__pick {
    display: none;
    width: 100%;
    margin-top: 8px;
    padding: 11px 0;
    border: 2px solid var(--brand-soft);
    border-radius: 14px;
    background: transparent;
    color: var(--brand);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.14s ease;
}
.cat__pick--shown { display: block; }
.cat__pick:active { transform: scale(0.98); }
.cat__pick--on {
    border-color: var(--brand);
    background: var(--brand-soft);
}

/* Картинка подарка вместо эмодзи. Пока грузится — на её месте эмодзи,
   поэтому строка списка не прыгает по высоте. */
.item__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.item__emoji { line-height: 1; }

/* ---- Пополнение ------------------------------------------------------- */

.pay { margin-top: 14px; }
.pay:first-of-type { margin-top: 6px; }
/* Способ оплаты, который не настроен, показываем приглушённым, а не прячем:
   так видно, что он существует, и вопрос «а где крипта?» не возникает */
.pay--off { opacity: 0.45; pointer-events: none; }

.pay__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}
.pay__icon {
    width: 28px;
    height: 28px;
    font-size: 22px;
    line-height: 1;
    flex: none;
}
.pay__icon svg { display: block; width: 28px; height: 28px; }
.pay__name { font-size: 15px; font-weight: 700; }
.pay__hint { margin-left: auto; font-size: 12px; color: var(--hint); }

/* Карточки пакетов: две колонки — под большой палец, без мелких целей */
.packs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.pack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 16px 10px 13px;
    border: 2px solid transparent;
    border-radius: 16px;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.16s ease, transform 0.14s ease, box-shadow 0.2s ease;
}
.pack:active { transform: scale(0.97); }
.pack--on {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft);
}
.pack--hot { border-color: rgba(255, 149, 0, 0.55); }
.pack--best { border-color: rgba(52, 199, 89, 0.5); }

.pack__count { font-size: 26px; font-weight: 800; line-height: 1.1; }
/* Без text-transform: подпись у крипто-пакетов — это сумма «100 SLX»,
   и принудительный нижний регистр превращал её в «100 slx» */
.pack__label { font-size: 11px; color: var(--hint); }
.pack__price { margin-top: 5px; font-size: 14px; font-weight: 700; }

/* Ярлык «популярно» — поверх верхней границы карточки */
.pack__tag {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 9px;
    border-radius: 999px;
    background: #FF9500;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.pack--best .pack__tag { background: #34C759; }

.pack__price s { opacity: 0.5; font-weight: 600; margin-right: 3px; }
.pack__tag--sale { background: #34C759; }

.pay__old { opacity: 0.55; font-weight: 600; font-size: 15px; margin-right: 4px; }
.pay__save {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #34C759;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

/* Нехватка средств прямо в заказе: вместо тупика — кнопка пополнить */
.notenough {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 59, 48, 0.12);
    color: #FF3B30;
    font-size: 14px;
    font-weight: 600;
}
.notenough--hidden { display: none; }
.notenough .btn { min-height: 38px; padding: 0 16px; flex: none; }

.pack--small { padding: 12px 8px; }
.pack--small .pack__count { font-size: 20px; }

.field--flat { margin-top: 12px; }
.input--own { padding-right: 14px; text-align: center; }

.pay__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 14px 2px 10px;
    font-size: 14px;
    color: var(--hint);
}
.pay__total b { font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; }

/* Кнопка оплаты — фирменная жёлтая, как у Telegram Stars */
.btn--pay {
    background: #FF9F0A;
    color: #fff;
    box-shadow: 0 8px 22px rgba(255, 149, 0, 0.35);
}
.btn--pay:disabled {
    background: var(--sep);
    color: var(--hint);
    box-shadow: none;
    cursor: default;
}

/* Переключатель «Заливка / Обводка» */
.segmented {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    /* --card темнее --bg, поэтому подложка серая, а выбранный пункт —
       светлый: иначе активный и неактивный отличались бы почти ничем */
    background: var(--sep);
    margin-bottom: 12px;
}
.segmented__item {
    flex: 1;
    padding: 9px 0;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--hint);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.segmented__item--on { background: var(--bg); color: var(--text); box-shadow: var(--shadow); }

/* Кружки палитры: первый — «как в шаблоне» */
.swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.swatches--hidden { display: none; }

/* Ползунки размера, высоты и толщины обводки */
.slider { margin-top: 14px; }
.slider--hidden { display: none; }
.slider__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}
.slider__name { font-size: 13px; font-weight: 600; }
.slider__value {
    font-size: 13px;
    font-weight: 700;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}
.slider__input {
    width: 100%;
    height: 28px;
    margin: 0;
    background: transparent;
    appearance: none;
    cursor: pointer;
}
.slider__input::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: var(--sep);
}
.slider__input::-webkit-slider-thumb {
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -8px;
    border: 3px solid var(--card);
    border-radius: 50%;
    background: var(--brand);
    box-shadow: var(--shadow);
}
.slider__input::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: var(--sep);
}
.slider__input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 3px solid var(--card);
    border-radius: 50%;
    background: var(--brand);
}

.swatch {
    width: 34px;
    height: 34px;
    border: 2px solid transparent;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    position: relative;
    transition: transform 0.14s ease, border-color 0.18s ease;
}
.swatch:active { transform: scale(0.9); }
.swatch--on {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
/* «Исходный цвет» — перечёркнутый кружок, чтобы отличался от чёрного */
.swatch--none {
    background: var(--bg);
    border-color: var(--sep);
}
.swatch--none::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: linear-gradient(45deg, transparent 44%, var(--hint) 44%,
                var(--hint) 56%, transparent 56%);
}

.input--select {
    padding: 12px 14px;
    font-weight: 600;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--hint) 50%),
                      linear-gradient(135deg, var(--hint) 50%, transparent 50%);
    background-position: calc(100% - 18px) 22px, calc(100% - 13px) 22px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.btn--upload { margin-top: 12px; }

/* Поле выбора файла нельзя прятать через hidden или display:none: WebView
   Telegram отказывается открывать диалог у скрытого элемента, и кнопка
   просто ничего не делала. Убираем его с глаз, оставляя в раскладке. */
.file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

/* Строка управления логотипом. Появляется только когда логотип загружен:
   пустой переключатель «ставить логотип» без самого логотипа сбивает с толку */
.logo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}
.logo-row--hidden { display: none; }

.toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.toggle input {
    width: 20px;
    height: 20px;
    accent-color: var(--brand);
    cursor: pointer;
}

/* Плитка, превью которой не доехало. Раньше такая просто оставалась
   пустой, и было не отличить «ещё грузится» от «не загрузилось». */
.tile--failed .tile__stage::after {
    content: "↻";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 22px;
    color: var(--hint);
}
.tile--failed {
    opacity: 0.75;
}

/* Переключатель наборов над разделами каталога. */
.packs {
    margin: 0 0 4px;
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 8px 0;
    background: var(--bg);
}

/* ---- лента-конвейер над каталогом ---------------------------------------
   Едет сама, чтобы с первого взгляда было видно: шаблонов много и они
   живые. Останавливается под пальцем — иначе в движущуюся плитку не
   попасть. */
.belt {
    position: relative;
    overflow: hidden;
    margin: 14px 0 2px;
    padding: 2px 0;
    /* Края растворяются, иначе плитки обрубаются ровной линией и лента
       выглядит куском таблицы, а не потоком. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.belt--hidden { display: none; }

.belt__track {
    display: flex;
    gap: 8px;
    width: max-content;
    animation: belt-run 46s linear infinite;
}
.belt:active .belt__track,
.belt--paused .belt__track { animation-play-state: paused; }

@keyframes belt-run {
    from { transform: translateX(0); }
    /* Ровно половина: в дорожке две одинаковые копии, поэтому в момент
       перескока картинка совпадает сама с собой и шва не видно. */
    to   { transform: translateX(-50%); }
}

.belt__item {
    position: relative;
    flex: 0 0 auto;
    width: 74px;
    height: 74px;
    padding: 0;
    border: none;
    border-radius: 16px;
    background: var(--card);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.belt__item:active { transform: scale(0.94); }
.belt__item--on {
    box-shadow: 0 0 0 2px var(--brand), 0 6px 18px var(--brand-glow);
}
.belt__item--on::after {
    content: "✓";
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--brand);
}
.belt__stage { width: 100%; height: 100%; }
.belt__stage svg { display: block; width: 100%; height: 100%; }

/* В бережном режиме лента едет по-прежнему: сдвиг transform считает
   видеокарта, это почти бесплатно. Дорого стоят сами стикеры, поэтому в
   этом режиме они замирают на кадре — см. autoplay в mountBelt. */

/* ==========================================================================
   Liquid Glass
   ==========================================================================
   Стекло держится на backdrop-filter, а он и был причиной рывков на
   Android — из-за него мы когда-то и завели бережный режим. Поэтому здесь
   два уровня, и переключает их тот же класс body.lite:

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

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

:root {
    /* Стекло белое, а край и тень — синие. Нейтрально-серое стекло поверх
       голубого фона выглядело грязным: серая тень на голубом читается как
       пятно, а не как объём. */
    --glass: rgba(255, 255, 255, 0.78);
    --glass-strong: rgba(255, 255, 255, 0.88);
    --glass-line: rgba(0, 0, 0, 0.08);
    --glass-edge: rgba(255, 255, 255, 0.92);
    --glass-shade: rgba(0, 0, 0, 0.06);
    --glass-deep: rgba(0, 0, 0, 0.12);

    --blur: 20px;
    --blur-strong: 30px;
    --sat: 180%;

    --radius-card: 24px;
    --radius-btn: 20px;
}

/* Тёмная тема: то же стекло, но набранное светом по тёмному, а не
   белилами по белому — иначе поверхности выглядят молочными. */
/* Ключ — body.dark, как и у остальной палитры: @media отражает тему
   системы, а внутри Telegram важна тема Telegram. Медиа-запрос оставлен
   вторым ключом для случая, когда приложение открыли вне Telegram. */
body.dark {
    --glass: rgba(255, 255, 255, 0.06);
    --glass-strong: rgba(255, 255, 255, 0.10);
    --glass-line: rgba(255, 255, 255, 0.10);
    --glass-edge: rgba(255, 255, 255, 0.10);
    --glass-shade: rgba(0, 0, 0, 0.34);
    --glass-deep: rgba(0, 0, 0, 0.48);
}

@media (prefers-color-scheme: dark) {
    body:not(.light) {
        --glass: rgba(255, 255, 255, 0.06);
        --glass-strong: rgba(255, 255, 255, 0.10);
        --glass-line: rgba(255, 255, 255, 0.10);
        --glass-edge: rgba(255, 255, 255, 0.10);
        --glass-shade: rgba(0, 0, 0, 0.34);
        --glass-deep: rgba(0, 0, 0, 0.48);
    }
}

/* Общая заготовка поверхности. Световая грань сверху и тень снизу — то,
   что делает стекло стеклом: без них остаётся просто мутный прямоугольник.
   Шапки здесь намеренно нет: у неё своя сплошная заливка и тёмный текст,
   а полупрозрачный фон делал заголовок нечитаемым. */
.tabbar,
.card:not(.card--hero),
.actionbar,
.styles,
.belt__item,
.chip {
    background: var(--glass);
    border: 1px solid var(--glass-line);
    box-shadow:
        inset 0 1px 0 var(--glass-edge),
        0 1px 2px var(--glass-shade),
        0 10px 30px var(--glass-shade);
    backdrop-filter: blur(var(--blur)) saturate(var(--sat));
    -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
}

/* Липкая панель размывает сильнее: под ней едет содержимое, и слабое
   размытие читалось бы как грязное стекло. */
.tabbar {
    background: var(--glass-strong);
    backdrop-filter: blur(var(--blur-strong)) saturate(var(--sat));
    -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(var(--sat));
}

.card { border-radius: var(--radius-card); }

/* Плитки — единственное, что остаётся плоским: их сотни, и размытие под
   каждой означало бы пересчёт фона для всей сетки на каждый кадр. */
.tile {
    background: var(--glass);
    border: 1px solid var(--glass-line);
    box-shadow: inset 0 1px 0 var(--glass-edge);
}
.tile--on {
    border-color: transparent;
    box-shadow:
        inset 0 1px 0 var(--glass-edge),
        0 0 0 2px var(--brand),
        0 8px 22px var(--brand-glow);
}

.chip--on {
    border-color: transparent;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 4px 14px var(--brand-glow);
}

/* Нажатие: стекло чуть проседает и притухает — так понятно, что оно
   физическое, а не нарисованное. */
.btn:active,
.chip:active,
.tile:active,
.belt__item:active {
    box-shadow:
        inset 0 1px 0 var(--glass-line),
        0 1px 3px var(--glass-shade);
}

/* ---- бережный режим: тот же рисунок без пересчёта фона ---------------- */

body.lite .topbar,
body.lite .tabbar,
body.lite .card,
body.lite .actionbar,
body.lite .styles,
body.lite .belt__item,
body.lite .chip,
body.lite .btn--ghost,
body.lite .tile {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Без размытия полупрозрачность выглядит грязью, поэтому берём плотную
   заливку темы и оставляем только грань со слабой тенью — рисунок тот же,
   работы для браузера нет. */
body.lite .card:not(.card--hero),
body.lite .styles,
body.lite .chip,
body.lite .btn--ghost,
body.lite .belt__item,
body.lite .tile {
    background: var(--card);
    box-shadow: inset 0 1px 0 var(--glass-edge);
}
body.lite .topbar,
body.lite .tabbar,
body.lite .actionbar {
    background: var(--bg);
    box-shadow: 0 1px 0 var(--glass-line);
}
body.lite .tile--on {
    box-shadow: 0 0 0 2px var(--brand);
}

/* ---- акценты поверх стекла -------------------------------------------
   Блок выше выдал стеклянную заливку всем чипам и кнопкам разом, и этим
   перебил фирменный цвет у выбранных: «auto» становился блёклым. Здесь
   акцентные состояния забирают его обратно — стекло красиво ровно до тех
   пор, пока сквозь него не пропадает главное. */

.chip.chip--on {
    background: var(--brand);
    border-color: transparent;
    color: #fff;
}

/* ---- кнопки: единственное место, где им задают цвет ------------------
   Раньше .btn--primary описывался четырежды — в основном блоке, в
   стеклянном слое и здесь, — и каждое следующее описание перебивало
   предыдущее. Выяснить, какой цвет у кнопки на самом деле, можно было
   только через инструменты браузера. Теперь описание одно.

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

.btn--primary {
    background: var(--brand-grad);
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px var(--brand-glow);
}
.btn--primary:active { box-shadow: 0 2px 8px var(--brand-glow); }

/* Белая с синим краем. Край в 1.5px, а не 1px: на светлом фоне
   волосяная линия теряется, и кнопка перестаёт читаться как кнопка. */
.btn--ghost {
    background: var(--card);
    color: var(--brand);
    border: 1.5px solid var(--brand-line);
    box-shadow: 0 2px 8px rgba(23, 61, 122, 0.06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.btn--ghost:hover { background: var(--brand-soft); }
.btn--ghost:active { background: var(--brand-soft); box-shadow: none; }

/* Оплата — тот же синий, но плотнее и с более длинной тенью: это
   последний шаг, и он должен выглядеть весомее соседей. */
.btn--pay {
    background: var(--brand);
    color: #fff;
    border: none;
    box-shadow: 0 8px 24px var(--brand-glow);
}

/* Выбранная кнопка в группе (обычный/премиум, режимы обводки). */
.btn--on {
    background: var(--brand);
    color: #fff;
    border-color: transparent;
}

/* Шапка профиля — единственная цветная карточка в приложении: на ней
   имя и баланс, и она должна читаться как «это про тебя», а не как
   очередной белый блок. */
.card.card--hero {
    background: var(--brand-grad);
    border: none;
    color: #fff;
    box-shadow: 0 12px 32px var(--brand-glow);
}
.card--hero .hero__hint,
.card--hero .who__id { color: rgba(255, 255, 255, 0.78); }

/* ---- подложка под стекло ---------------------------------------------
   Стеклу нужно что-то преломлять: на ровной заливке размытие даёт серую
   муть, и весь эффект пропадает. Кладём мягкие пятна — они неподвижны,
   рисуются один раз и в прокрутке не участвуют. */
body::before {
    content: "";
    position: fixed;
    inset: -20% -20% auto -20%;
    height: 90vh;
    z-index: -1;
    pointer-events: none;
    background:
        none;
}

/* На слабых устройствах подложка остаётся — она статична и почти ничего
   не стоит, — но приглушается: без размытия яркие пятна лезут вперёд
   содержимого. */
body.lite::before { opacity: 0.45; }

/* Фон держит только html: у body он рисуется поверх собственного
   псевдоэлемента и прятал бы подложку целиком. */
body { background: transparent; }

/* Селектор body.lite тяжелее одиночного класса, поэтому плотные заливки
   бережного режима перебивали акценты и выбранное становилось невидимым.
   Возвращаем их отдельно — тем же весом. */
body.lite .chip--on {
    background: var(--brand);
    color: #fff;
}
body.lite .btn--primary {
    background: var(--brand);
    color: #fff;
}
body.lite .tab--on .tab__label,
body.lite .tab--on .tab__icon { color: var(--tab-accent); }


/* ==========================================================================
   Экран настроек стиля
   ==========================================================================
   Открывается после выбора шаблонов: сначала человек набирает стикеры,
   потом крутит оформление, глядя на них же. */

/* ---- кнопка логотипа у поля надписи ---------------------------------- */

.field__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Обёртка нужна счётчику символов: он позиционируется по ней, а не по
   всему полю, иначе ложится поверх кнопки логотипа. */
.field__wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.field__wrap .input { width: 100%; }

/* Кнопка загрузки логотипа. Раньше была бесцветным квадратиком и на
   карточке того же оттенка просто терялась — теперь это заметная плашка
   в фирменном цвете, да ещё и подписанная. */
.logochip {
    position: relative;
    flex: 0 0 auto;
    height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px 0 12px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    color: #fff;
    background: var(--brand);
    border: 1px solid transparent;
    box-shadow: 0 6px 18px var(--brand-glow);
    transition: transform 0.16s ease, filter 0.2s ease;
}

.logochip:active { transform: scale(0.95); filter: brightness(1.08); }
.logochip > svg { width: 22px; height: 22px; flex: 0 0 auto; }

/* На узких экранах подпись уезжает — иконки и цвета уже достаточно,
   чтобы кнопку было видно, а место под надпись важнее. */
@media (max-width: 360px) {
    .logochip__text { display: none; }
    .logochip { padding: 0 12px; }
}

/* Галочка о том, что логотип уже лежит на сервере. Атрибут hidden сам по
   себе тут не работает: правило класса перебивает display:none браузера. */
.logochip__badge[hidden] { display: none; }

.logochip__badge {
    position: absolute;
    right: -4px;
    top: -4px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--blue);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(20, 21, 26, 0.28);
}

/* Бережный режим снимает только тень — цвет кнопки остаётся: именно на
   нём она и держится. */
body.lite .logochip { box-shadow: none; }

/* ---- листаемый предпросмотр ------------------------------------------ */

.card--flush { padding-bottom: 8px; }

/* Прокрутка с прилипанием: палец бросает ленту, и она встаёт ровно на
   стикер, а не между двумя. */
.carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.carousel::-webkit-scrollbar { display: none; }

.carousel__track {
    display: flex;
    gap: 12px;
    padding: 4px 2px 10px;
}

.carousel__slide {
    flex: 0 0 auto;
    width: 168px;
    height: 168px;
    scroll-snap-align: center;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.26);
    border: 1px solid rgba(255, 255, 255, 0.40);
    box-shadow: 0 10px 26px rgba(20, 21, 26, 0.12);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform: scale(0.9);
    opacity: 0.55;
}

/* Текущий кадр крупнее соседних — видно, какой именно смотрим */
.carousel__slide--on { transform: scale(1); opacity: 1; }

.carousel__slide > svg { width: 100%; height: 100%; }

.carousel__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-top: 2px;
}

.carousel__nav {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
    color: var(--text);
    cursor: pointer;
    border-radius: 50%;
    background: var(--card);
    border: 1px solid var(--sep);
}
.carousel__nav:disabled { opacity: 0.35; cursor: default; }

.carousel__pos {
    min-width: 74px;
    text-align: center;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--hint);
}

body.lite .carousel__slide {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--card);
    transition: none;
}

/* ---- цветовой круг ---------------------------------------------------- */

.chips--targets { margin-bottom: 12px; }

.wheel {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 4px auto 10px;
    touch-action: none;
}

.wheel__disc {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    display: block;
    cursor: crosshair;
    box-shadow: 0 10px 30px rgba(20, 21, 26, 0.18),
                inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

/* Метка выбранной точки. pointer-events снят: иначе она перехватывала бы
   палец у самого круга и цвет переставал меняться при перетаскивании. */
.wheel__dot {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    pointer-events: none;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(20, 21, 26, 0.45);
    transition: left 0.05s linear, top 0.05s linear;
}

.wheel__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.wheel__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--hint);
}

.wheel__chip::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 7px;
    background: var(--chip-color, transparent);
    border: 1px solid var(--sep);
}

/* ---- вид набора: премиум или обычные --------------------------------- */

.kinds {
    display: grid;
    gap: 10px;
}

.kind {
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-rows: auto auto;
    gap: 2px 12px;
    padding: 14px;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-card);
    background: var(--card);
    border: 1.5px solid transparent;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.kind--on {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.kind__icon {
    grid-row: 1 / 3;
    align-self: center;
    font-size: 24px;
    line-height: 1;
}

.kind__name { font-weight: 700; }

.kind__note {
    font-size: 12px;
    line-height: 1.35;
    color: var(--hint);
}

.field--tight { margin-top: 12px; }

/* ==========================================================================
   Бело-голубая гамма и живой фон
   ==========================================================================
   Серый ушёл вслед за фиолетовым: на сланцевом акценте интерфейс читался
   как выключенный — кнопка действия и неактивная плашка выглядели
   одинаково. Теперь действие синее, а подложка белая с голубым.

   Голубой держим бледным. Стикеры у нас всех цветов сразу, и насыщенный
   фон с ними дерётся — по этой же причине в прошлый раз ушли в серый.
   Разница в том, что бледный фон и яркая кнопка — это разные роли, а
   серый фон с серой кнопкой были одной. */

:root {
    --sky-pale:  #DCEBFF;   /* самый светлый голубой — пятна на фоне */
    --sky-mid:   #B7D5FF;
    --sky-deep:  #8FBEFF;
    --azure:     #2997FF;   /* голубой                              */
    --blue:      #0071E3;   /* синий: всё, что можно нажать         */
    --blue-ink:  #0066CC;   /* нажатое состояние                    */

    --brand: var(--blue);
    --brand-soft: rgba(0, 113, 227, 0.10);
    --brand-glow: rgba(0, 113, 227, 0.22);
}

/* Живой фон в духе обоев айфона: два слоя мягких пятен, каждый дышит и
   плывёт по своей траектории. Двигаем только transform и opacity —
   их считает видеокарта, разметка при этом не пересчитывается. */
body::before,
body::after {
    content: "";
    position: fixed;
    inset: -35%;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}

/* Пятна заметно бледнее прежних серых. Серое пятно на белом читается как
   грязь и его приходилось делать плотным, чтобы выглядело нарочно; голубое
   на белом читается как свет и в полную силу не нужно. */
body::before {
    height: auto;
    background:
        none;
    animation: drift-a 38s ease-in-out infinite alternate;
}

body::after {
    background:
        none;
    animation: drift-b 52s ease-in-out infinite alternate;
}

/* На тёмной теме те же пятна, но приглушённые: на тёмно-синем фоне
   светлый голубой в полную силу светится как прожектор. */
body.dark::before,
body.dark::after { opacity: 0.45; }

@keyframes drift-a {
    from { transform: translate3d(-3%, -2%, 0) scale(1.00) rotate(0deg); }
    50%  { transform: translate3d( 4%,  3%, 0) scale(1.09) rotate(6deg); }
    to   { transform: translate3d(-2%,  5%, 0) scale(1.04) rotate(-4deg); }
}

@keyframes drift-b {
    from { transform: translate3d( 3%,  4%, 0) scale(1.06) rotate(0deg); }
    50%  { transform: translate3d(-4%, -3%, 0) scale(1.00) rotate(-7deg); }
    to   { transform: translate3d( 2%, -5%, 0) scale(1.08) rotate(5deg); }
}

/* На слабых устройствах фон живёт, но вдвое медленнее и тише: движение
   почти бесплатное, а вот яркие пятна без размытия лезут вперёд
   содержимого. */
body.lite::before,
body.lite::after {
    opacity: 0.5;
    animation-duration: 80s, 80s;
}

/* Кому движение мешает — системная настройка это уже говорит. */
@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after { animation: none; }
    .belt__track { animation: none; }
}

/* ---- таб-бар: читаемость и подсветка ---------------------------------
   На тёмной теме подписи вкладок сливались с полупрозрачной панелью:
   var(--hint) рассчитан на плотный фон, а под стеклом его не хватает.
   Поднимаем контраст и даём каждой кнопке собственную подложку — так
   видно, что это кнопка, а не надпись. */

.tab {
    position: relative;
    color: var(--text);
    opacity: 0.62;
    border-radius: 16px;
    margin: 5px 4px;
    padding: 7px 0 6px;
    transition: opacity 0.18s ease, background 0.2s ease, transform 0.14s ease;
}
.tab:active { transform: scale(0.94); }

.tab::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass);
    box-shadow: inset 0 1px 0 var(--glass-edge);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.tab:hover::before { opacity: 0.6; }

.tab--on {
    color: var(--brand);
    opacity: 1;
}
.tab--on::before {
    opacity: 1;
    background: var(--brand-soft);
    box-shadow:
        inset 0 1px 0 var(--glass-edge),
        0 4px 14px var(--brand-glow);
}
.tab__icon,
.tab__label { position: relative; }

/* Подписи мелкие, поэтому им нужен вес, а не только цвет. */
.tab__label { font-weight: 700; }


/* ==========================================================================
   Нижняя панель: Создать · Подарки · Профиль · Прочее
   ==========================================================================
   Панель собиралась слоями и к концу растеряла вид: подпись выбранной
   вкладки была белой (правило писалось для чипов с плотной заливкой, а
   тут подложка полупрозрачная — на светлой теме подпись пропадала),
   значки были мелкие и приглушены прозрачностью целиком, а снизу не было
   отступа под индикатор айфона. Собираем панель заново, одним куском. */

/* Акцент нижней панели держим отдельно от общего фирменного цвета:
   на тёмном фоне сланцевый слишком глухой, а трогать им же покрашенные
   кнопки нельзя — там белый текст, и по светлой стали он бы поплыл. */
:root { --tab-accent: var(--blue); }
body.dark { --tab-accent: var(--azure); }

.tabbar {
    display: grid;
    gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--glass-line);
}

.tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* Прозрачность больше не глушит всю кнопку разом: значку и подписи
       нужен разный вес, а общий opacity делал их одинаково блёклыми. */
    opacity: 1;
    margin: 0;
    padding: 8px 2px 7px;
    border-radius: 14px;
    color: var(--hint);
    transition: color 0.18s ease, transform 0.14s ease;
}

.tab:active { transform: scale(0.93); }

/* Подложка выбранной вкладки. Прижата к содержимому, а не растянута на
   всю колонку: широкая плашка читалась как серый брусок. */
.tab::before {
    content: "";
    position: absolute;
    inset: 2px 6px;
    border-radius: 14px;
    /* Не плоская заливка, а мягкий объём: сверху светлее, снизу глубже —
       иначе плашка читается как серый брусок. */
    background:
        color-mix(in srgb, var(--tab-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--tab-accent) 30%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 4px 12px color-mix(in srgb, var(--tab-accent) 30%, transparent);
    opacity: 0;
    transform: scale(0.86);
    transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.tab--on::before { opacity: 1; transform: scale(1); }
.tab:hover::before { opacity: 0.55; transform: scale(1); }

/* Выбранная — фирменным цветом целиком, и значок, и подпись. Раньше
   значок был фирменным, а подпись белой, и они не смотрелись парой. */
.tab--on { color: var(--tab-accent); }
.tab--on .tab__label { color: inherit; }

.tab__icon {
    position: relative;
    width: 25px;
    height: 25px;
    font-size: 18px;
    filter: none;
    opacity: 0.7;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.tab--on .tab__icon { opacity: 1; transform: translateY(-1px); }

.tab__label {
    position: relative;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.1px;
    line-height: 1;
}

.tab--on .tab__label { font-weight: 700; }

/* Бережный режим: подложку оставляем — на ней всё и держится, — а
   уезжают только тени и плавное появление. */
body.lite .tab::before {
    box-shadow: none;
    transition: none;
    transform: none;
}
body.lite .tab--on .tab__icon { transform: none; }
body.lite .tab--on .tab__label,
body.lite .tab--on .tab__icon { color: var(--tab-accent); }

@media (prefers-reduced-motion: reduce) {
    .tab, .tab::before, .tab__icon { transition: none; }
    .tab--on .tab__icon:has(svg) { animation: none; }
}


/* ==========================================================================
   Полноэкранный режим
   ==========================================================================
   Telegram отдаёт приложению весь экран, а свои кнопки «назад», «меню» и
   «закрыть» рисует поверх. Под них нужно место: без отступа шапка с
   балансом оказывается ровно под крестиком, и по нему невозможно попасть.

   Отступы приходят из Telegram и лежат в переменных, которые ставит
   script.js: --safe-* — вырез и скруглённые углы устройства, --content-top
   — место под кнопки самого Telegram. Пока приложение не в полном экране,
   все они нули, и разметка ведёт себя как раньше. */

:root {
    --safe-top: 0px;
    --safe-bottom: 0px;
    --safe-left: 0px;
    --safe-right: 0px;
    --content-top: 0px;
}

body.fullscreen .topbar {
    padding-top: calc(14px + var(--safe-top) + var(--content-top));
    padding-left: calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
}

/* Боковые вырезы бывают только в альбомной ориентации, но если уж они
   есть — содержимое не должно под них заезжать. */
body.fullscreen main,
body.fullscreen .tabbar {
    padding-left: calc(var(--safe-left) + 6px);
    padding-right: calc(var(--safe-right) + 6px);
}

body.fullscreen .tabbar {
    padding-bottom: calc(6px + max(var(--safe-bottom), env(safe-area-inset-bottom, 0px)));
}

body.fullscreen .bottombar {
    padding-bottom: calc(12px + max(var(--safe-bottom), env(safe-area-inset-bottom, 0px)));
}


/* ==========================================================================
   Приглашения и обмен кристаллов
   ========================================================================== */

.card--invite { text-align: center; }

.invite__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
}

.invite__gem {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    filter: drop-shadow(0 4px 12px var(--brand-glow));
}

.invite__gem > svg { width: 100%; height: 100%; }

/* Нарисованный кристалл. Грани разной светлоты дают объём, цвета —
   переменными, поэтому камень одинаково читается на светлой и тёмной
   теме, а не выглядит чужим эмодзи. */
:root {
    --gem-light: #DCE9F7;
    --gem-mid:   #7FA8D4;
    --gem-deep:  #3F6FA8;
    --gem-line:  #2B4E7A;
}

body.dark {
    --gem-light: #EAF3FF;
    --gem-mid:   #8FB8E4;
    --gem-deep:  #4E82BE;
    --gem-line:  #1E3A5C;
}

.gem {
    width: 1em;
    height: 1em;
    vertical-align: -0.14em;
    margin: 0 0.12em;
    flex: 0 0 auto;
}

.gem path { stroke: var(--gem-line); stroke-width: 0.7; stroke-linejoin: round; }
.gem__table { fill: var(--gem-light); }
.gem__crown { fill: var(--gem-mid); }
.gem__front { fill: var(--gem-mid); }
.gem__side  { fill: var(--gem-deep); }
.gem__side--dark { fill: var(--gem-line); }

/* В шапке карточки камень крупный — там обводка мешает, а не помогает */
.invite__gem .gem { width: 100%; height: 100%; margin: 0; vertical-align: 0; }

.tier__prize, .trade__rate, .invite__pitch, .stat__value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.invite__pitch { display: block; }
.invite__pitch .gem { vertical-align: -0.16em; }

.invite__count {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.invite__unit {
    font-size: 12px;
    color: var(--hint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.invite__pitch {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--hint);
    line-height: 1.45;
}

.card--invite .copyrow { margin-top: 10px; }
.card--invite .stats { margin-top: 14px; }

/* Пороги. Достигнутые гасим, но не прячем: видно, сколько уже пройдено. */
.tiers { display: flex; flex-direction: column; gap: 6px; }

.tier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 12px;
    background: var(--card);
    font-size: 13px;
    text-align: left;
}

.tier__goal { color: var(--text); }
.tier__prize { font-weight: 700; color: var(--brand); white-space: nowrap; }
.tier--done { opacity: 0.55; }
.tier--done .tier__prize::after { content: " ✓"; }

/* Обмен */
.trade {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
}

.trade + .trade { border-top: 1px solid var(--sep); }
.trade__left { text-align: left; min-width: 0; }
.trade__name { font-weight: 600; font-size: 15px; }
.trade__rate { font-size: 12px; color: var(--hint); margin-top: 2px; }

.trade__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.trade__right .input--own { width: 68px; padding: 10px 8px; }

.trade--soon { opacity: 0.6; }

.soon {
    padding: 6px 12px;
    border-radius: 10px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}


/* ==========================================================================
   Движение выключено
   ==========================================================================
   Класс ставит script.js по настройке в «Прочее». Гасим то, что крутится
   само по себе: бегущую ленту и живой фон. Анимации самих стикеров
   останавливает плеер — они остаются видимыми, просто замирают на кадре.

   Переходы кнопок и появление экранов не трогаем: они короткие, случаются
   по нажатию и на плавность прокрутки не влияют. */

body.still .belt__track { animation: none; }

body.still::before,
body.still::after { animation: none; }

/* Строка-переключатель: подпись слева, галочка справа — как в настройках
   Telegram, а не как случайный чекбокс посреди карточки. */
.toggle--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 12px;
    width: 100%;
    padding: 4px 0;
    cursor: pointer;
}

.toggle--row > span { flex: 1 1 auto; font-size: 15px; }
.toggle--row input { flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--brand); }


/* ==========================================================================
   Магазин шаблонов
   ========================================================================== */

.card--hidden { display: none; }

.mkcard { display: flex; flex-direction: column; gap: 10px; }

.mkcard__stage {
    width: 100%;
    height: 190px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: var(--card);
    overflow: hidden;
}

.mkcard__stage > svg { width: 190px; height: 190px; }

.mkcard__wait { color: var(--hint); font-size: 13px; }

.mkcard__title { font-size: 16px; font-weight: 700; }
.mkcard__desc { font-size: 13px; color: var(--hint); margin-top: 2px; }
.mkcard__author { font-size: 12px; color: var(--hint); margin-top: 6px; }

.mkcard__row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mkcard__row .btn { margin-left: auto; }
.mkcard__stat { font-size: 13px; color: var(--hint); }

/* Лайк — кнопка, а не значок: по нему жмут, и это должно быть видно. */
.mkbtn {
    padding: 7px 12px;
    border-radius: 12px;
    border: 1px solid var(--sep);
    background: transparent;
    color: var(--hint);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, transform 0.14s ease;
}

.mkbtn:active { transform: scale(0.94); }
.mkbtn--on { color: #FF375F; border-color: rgba(255, 55, 95, 0.45); }

/* ---- редактор рамки --------------------------------------------------
   Сцена квадратная, как холст стикера: иначе рамка, отмеченная на
   вытянутом поле, легла бы на готовом стикере не туда. */
.zone {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    background: var(--card);
    overflow: hidden;
    touch-action: none;
}

.zone__art { position: absolute; inset: 0; display: grid; place-items: center; }
.zone__art > svg { width: 100%; height: 100%; }

.zone__box {
    position: absolute;
    border: 2px dashed var(--brand);
    border-radius: 8px;
    background: var(--brand-soft);
    cursor: move;
}

.zone__grip {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(20, 21, 26, 0.3);
}

.zone__grip[data-grip="nw"] { left: -9px; top: -9px; cursor: nwse-resize; }
.zone__grip[data-grip="se"] { right: -9px; bottom: -9px; cursor: nwse-resize; }


/* ---- набор шаблонов на карточке магазина ------------------------------
   Один шаблон занимает всю сцену, как раньше. Набор делится на ячейки:
   иначе полсотни шаблонов выглядят на витрине как один. */

.mkcard__art--set {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
}

.mkcard__cell {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
}

.mkcard__cell > svg { width: 100%; height: 100%; }

/* Сколько шаблонов не поместилось. Не молчим об остатке: набор из
   полусотни иначе читается как набор из четырёх. */
.mkcard__more {
    flex: 0 0 auto;
    padding: 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--hint);
    white-space: nowrap;
}


/* ---- отбор шаблонов внутри набора -------------------------------------
   Купленный набор можно взять не целиком. Отметка идёт по текущему кадру
   ленты: сетка из полусотни живых превью телефон не потянет, а листать
   набор человек всё равно будет. */

.pick { margin-top: 10px; }
.pick--hidden { display: none; }

.pick__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.pick__count {
    font-size: 13px;
    font-weight: 600;
    color: var(--hint);
}

/* Кадр, который решили не брать, гаснет — но остаётся виден: человек
   должен понимать, что шаблон в наборе есть, просто не выбран. */
.carousel__slide--off {
    opacity: 0.32;
    filter: grayscale(1);
}

/* Кнопка «взять/не брать» в выбранном состоянии — фирменным цветом, как
   отмеченная плитка каталога. */
.btn--on {
    background: var(--brand-soft);
    border-color: color-mix(in srgb, var(--brand) 40%, transparent);
    color: var(--brand);
}


/* ---- нарисованные значки оформления -----------------------------------
   Эмодзи рисует система: они разного стиля, разной толщины и на разных
   платформах выглядят по-разному. Рядом с нашими вкладками, у которых
   контур в 1,7, они смотрелись чужеродно. Здесь один набор линий. */

.glyph {
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

/* Значок в списке инструментов и наборов крупнее строчного. */
.item__emoji .glyph { width: 22px; height: 22px; vertical-align: 0; }

/* Сердце у отмеченного лайка заливается: пустой контур и залитый —
   привычная пара «не нравится / нравится». */
.glyph--like { stroke-width: 1.6; }
.mkbtn--on .glyph--like { fill: currentColor; }


/* ---- липкая кнопка загрузки в магазине --------------------------------
   Выложить свой шаблон — главное действие раздела, а лента бывает на
   сотню карточек. Прокручивать её до низа ради кнопки незачем: она едет
   вместе с содержимым и всегда на виду. */

.mkbar {
    position: sticky;
    bottom: 8px;
    z-index: 12;
    margin-top: 12px;
    padding: 8px 0;
}

/* Подложка, чтобы карточки не просвечивали сквозь кнопку. */
.mkbar::before {
    content: "";
    position: absolute;
    inset: -6px -10px;
    border-radius: 20px;
    background: var(--glass-strong);
    backdrop-filter: blur(var(--blur-strong)) saturate(var(--sat));
    -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(var(--sat));
}

.mkbar .btn { position: relative; }

/* В бережном режиме размытие снимаем — остаётся плотный фон. */
body.lite .mkbar::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg);
}


/* ---- правка своего набора в ленте -------------------------------------
   Раскрывается прямо на карточке: менять тут ровно две вещи — цену и
   состав, — и ради них отдельный экран заводить незачем. */

.mkedit {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--sep);
    animation: fade-up 0.25s ease both;
}

.mkedit__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--hint);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.mkedit__note {
    min-height: 18px;
    font-size: 12px;
    color: var(--hint);
}


/* ==========================================================================
   Стеклянная панель и параллакс
   ==========================================================================
   Нижняя панель больше не прибита к краю: она парит над содержимым
   стеклянной «таблеткой», и лента прокручивается под ней. Выбранную
   вкладку отмечает одна общая подсветка, которая переезжает от кнопки к
   кнопке, — так видно, откуда и куда ты перешёл. При прокрутке вниз
   панель уезжает, при прокрутке вверх возвращается; шапка у самого верха
   прозрачная, а как только под неё заезжает лента — становится матовой.
   Первая карточка экрана отстаёт от прокрутки — это и есть параллакс.

   Всё движение — только transform и opacity: их браузер считает на
   видеокарте, и прокрутка не дёргается. */

.tabbar {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 24px);
    max-width: 456px;
    margin: 0 auto;
    padding: 6px;
    border: 1px solid var(--glass-line);
    border-radius: 26px;
    background: color-mix(in srgb, var(--card) 62%, transparent);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 10px 30px rgba(15, 35, 75, 0.18);
    transition:
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s ease;
}
body.dark .tabbar {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 30px rgba(0, 0, 0, 0.45);
}
body.fullscreen .tabbar {
    bottom: calc(10px + max(var(--safe-bottom), env(safe-area-inset-bottom, 0px)));
    padding: 6px;
}

/* Уехала вниз при прокрутке. Не display:none — тогда не было бы
   анимации и страница прыгала бы на высоту панели. */
.tabbar--away {
    transform: translateY(calc(100% + 24px));
    opacity: 0;
    pointer-events: none;
}

/* Подсветка выбранной вкладки — общая на всю панель. Плашки у самих
   кнопок прячем: две подсветки сразу смотрелись бы двоением. */
.tabbar__glow {
    position: absolute;
    top: 6px;
    left: 0;
    height: calc(100% - 12px);
    width: 0;
    border-radius: 20px;
    background:
        color-mix(in srgb, var(--tab-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--tab-accent) 30%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 4px 14px color-mix(in srgb, var(--tab-accent) 28%, transparent);
    pointer-events: none;
    transition:
        transform 0.46s cubic-bezier(0.34, 1.4, 0.5, 1),
        width 0.46s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.tabbar--glow .tab::before { display: none; }
.tabbar--glow .tab { background: none; }

/* Вход в приложение: шапка опускается сверху, панель поднимается снизу. */
.topbar--enter { animation: glass-drop 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.tabbar--enter { animation: glass-rise 0.7s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes glass-drop {
    from { transform: translateY(-110%); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
@keyframes glass-rise {
    from { transform: translateY(140%) scale(0.92); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* Шапка: прозрачная, пока лента у верха, матовое стекло — когда под неё
   что-то заехало. */
.topbar {
    background: color-mix(in srgb, var(--bg) 40%, transparent);
    border-bottom-color: transparent;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.topbar--scrolled {
    background: color-mix(in srgb, var(--card) 66%, transparent);
    border-bottom-color: var(--glass-line);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 6px 24px rgba(15, 35, 75, 0.1);
}
/* Имя в шапке чуть уменьшается вместе с прокруткой — шапка «собирается». */
.brand {
    transform-origin: left center;
    transform: scale(calc(1 - var(--scroll-k, 0) * 0.08));
}

/* Параллакс: первая карточка экрана едет медленнее ленты и гаснет. */
.parallax {
    transform: translate3d(0, calc(var(--scroll-y, 0) * 0.3px), 0);
    opacity: calc(1 - var(--scroll-k, 0) * 0.55);
    will-change: transform;
}

/* Лента не должна прятаться под парящей панелью в самом низу. */
.content { padding-bottom: 24px; }

/* Бережный режим и «меньше движения»: стекло без размытия, без
   параллакса и без прыжков подсветки. */
body.lite .tabbar { background: var(--card); }
body.lite .topbar,
body.lite .topbar--scrolled { background: var(--card); }
body.lite .parallax,
body.lite .brand { transform: none; opacity: 1; }
body.lite .tabbar__glow { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .parallax, .brand { transform: none; opacity: 1; }
    .tabbar, .tabbar__glow { transition: none; }
    .topbar--enter, .tabbar--enter { animation: none; }
}
.tabbar--glow .tab--on .tab__icon { background: none; box-shadow: none; }


/* ==========================================================================
   Пополнение: способы оплаты, кошелёк TON и нижний лист
   ==========================================================================
   Подача как у Apple: плоские светло-серые строки, логотипы настоящих
   сервисов, синие кнопки-таблетки. Ни градиентов, ни эмодзи. */

/* Значок Telegram Stars вместо эмодзи ⭐ — в тексте, ценах и кнопках. */
.ic-star {
    display: inline-block;
    width: 1em; height: 1em;
    vertical-align: -0.14em;
    background: url(/static/icons/brands/star.svg) center / contain no-repeat;
}

/* Контейнер для TGS-значка: lottie кладёт внутрь svg на всю площадь. */
[data-icon-tgs] { display: inline-grid; place-items: center; overflow: hidden; }
[data-icon-tgs] svg { width: 100% !important; height: 100% !important; }
.kind__icon[data-icon-tgs] { width: 34px; height: 34px; }
.pay__icon[data-icon-tgs] { width: 28px; height: 28px; }
.error__icon[data-icon-tgs] { width: 72px; height: 72px; margin: 0 auto; display: grid; }

/* Кнопка-таблетка */
.pill {
    border: 0;
    border-radius: 980px;
    padding: 0 18px;
    min-height: 44px;
    background: var(--brand);
    color: #fff;
    font: inherit; font-size: 16px; font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}
.pill:hover { background: var(--brand-ink); }
.pill:active { transform: scale(0.97); }
.pill:disabled { opacity: 0.4; pointer-events: none; }
.pill--small { min-height: 34px; padding: 0 14px; font-size: 14px; }
.pill--wide { width: 100%; min-height: 50px; font-size: 17px; }
.pill--ghost { background: var(--bg); color: var(--brand); }
.pill--ghost:hover { background: var(--brand-soft); }

/* Строка TON-кошелька */
.wallet {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin: 4px 0 14px;
    border-radius: 16px;
    background: var(--bg);
}
.wallet__logo { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.wallet__body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.wallet__title { font-weight: 600; font-size: 15px; }
.wallet__addr { font-size: 13px; color: var(--hint); font-variant-numeric: tabular-nums; }
.wallet--on .wallet__addr { color: var(--text); font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* Список способов: одна сплошная плашка с тонкими разделителями. */
.methods {
    border-radius: 16px;
    background: var(--bg);
    overflow: hidden;
}
.method {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}
.method + .method::before {
    content: "";
    position: absolute;
    top: 0; right: 0; left: 64px;
    border-top: 1px solid var(--sep);
}
.method:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.method:active { background: color-mix(in srgb, var(--text) 8%, transparent); }
.method__logo {
    width: 40px; height: 40px;
    flex: none;
    border-radius: 11px;
    object-fit: cover;
}
.method__logo--stars { background: #FFF4D6; }
body.dark .method__logo--stars { background: rgba(255, 184, 0, 0.16); }
.method__body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.method__body b { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.method__body small { font-size: 13px; color: var(--hint); }
.method__chev {
    width: 8px; height: 8px;
    margin-right: 6px;
    border-top: 2px solid color-mix(in srgb, var(--hint) 70%, transparent);
    border-right: 2px solid color-mix(in srgb, var(--hint) 70%, transparent);
    transform: rotate(45deg);
}
.method--off { opacity: 0.45; }

/* ---- нижний лист ---- */
body.sheet-open { overflow: hidden; }
.sheet { position: fixed; inset: 0; z-index: 60; }
.sheet[hidden] { display: none; }
.sheet__backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.32);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.sheet__panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-width: 520px;
    max-height: 88vh;
    margin: 0 auto;
    overflow-y: auto;
    padding: 8px 20px calc(20px + max(var(--safe-bottom, 0px), env(safe-area-inset-bottom, 0px)));
    border-radius: 24px 24px 0 0;
    background: var(--card);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.14);
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.28, 0.11, 0.32, 1);
}
.sheet--open .sheet__backdrop { opacity: 1; }
.sheet--open .sheet__panel { transform: none; }
.sheet__grab {
    width: 36px; height: 5px;
    margin: 0 auto 10px;
    border-radius: 3px;
    background: var(--sep);
}
.sheet__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sheet__logo { width: 44px; height: 44px; flex: none; border-radius: 12px; overflow: hidden; }
.sheet__logo img, .sheet__logo [data-icon-tgs] { width: 100%; height: 100%; object-fit: cover; display: grid; }
.sheet__logo [data-icon-tgs] { background: #FFF4D6; }
.sheet__titles { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.sheet__titles b { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.sheet__titles small { font-size: 13px; color: var(--hint); }
.sheet__close {
    position: relative;
    width: 30px; height: 30px;
    border: 0; border-radius: 50%;
    background: var(--bg);
    cursor: pointer;
}
.sheet__close::before, .sheet__close::after {
    content: "";
    position: absolute;
    left: 9px; top: 14px;
    width: 12px; height: 2px;
    border-radius: 1px;
    background: var(--hint);
    transform: rotate(45deg);
}
.sheet__close::after { transform: rotate(-45deg); }
.sheet__step[hidden] { display: none; }
.sheet .pay { padding: 0; border: 0; background: none; }
.packs--usd { margin-bottom: 14px; }
.sheet__status { min-height: 20px; margin: 12px 0 0; text-align: center; font-size: 14px; color: var(--hint); }
.sheet__status--ok { color: #248A3D; font-weight: 600; }
.sheet__status--error { color: #E30000; }
body.dark .sheet__status--ok { color: #30D158; }
body.dark .sheet__status--error { color: #FF453A; }


/* ==========================================================================
   Шрифты
   ==========================================================================
   Три роли, как в современных интерфейсах: плотный широкий гротеск для
   заголовков и цифр, спокойный гротеск для текста, рукописный — для
   редких акцентов (подписи над заголовками, метки на карточках). Для
   китайского, хинди и арабского браузер сам подставит системный шрифт. */

:root {
    --font-display: "Unbounded", "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: "Onest", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
}

html, body, button, input, select, textarea { font-family: var(--font-body); }

.brand,
.hero__title,
.error__title,
.sheet__titles b,
.pack__count,
.balance__value,
.ob-title {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}
.hero__title { font-weight: 800; }
.brand { font-weight: 700; font-size: 16px; }
.pack__count { font-weight: 700; }
.sheet__titles b { font-weight: 700; font-size: 18px; }

/* Заголовки карточек — жирный текстовый, без капса: капс в 2026-м
   читается как интерфейс десятилетней давности. */
.cat__title {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.015em;
    text-transform: none;
}

/* Рукописные акценты */
.pack__tag,
.ob-hand {
    font-family: var(--font-hand);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}
.pack__tag { font-size: 15px; }
.ob-hand { font-size: 24px; line-height: 1.1; }

.method__body b,
.wallet__title { font-weight: 700; }


/* Кнопка «Пополнить» в профиле и шаги листа */
.pill--topup { margin-top: 6px; }
.sheet__logo[hidden] { display: none; }
.sheet__back {
    position: relative;
    width: 30px; height: 30px;
    flex: none;
    border: 0; border-radius: 50%;
    background: var(--bg);
    cursor: pointer;
}
.sheet__back[hidden] { display: none; }
.sheet__back::before {
    content: "";
    position: absolute;
    left: 12px; top: 10px;
    width: 8px; height: 8px;
    border-left: 2px solid var(--text);
    border-bottom: 2px solid var(--text);
    transform: rotate(45deg);
}
#sheetMethods .wallet { margin-top: 0; }


/* ==========================================================================
   Обои
   ==========================================================================
   Тот же узор, что в обучении: контуры стикеров набора RHINO, как
   обои чатов Telegram. Нарисован маской, цвет берётся из темы, поэтому
   на светлой теме он графитовый, на тёмной — светлый, и всегда тихий. */
body::before {
    inset: 0 0 -80px 0;   /* запас снизу под сдвиг при прокрутке */
    height: auto;
    background: var(--text);
    opacity: 0.05;
    -webkit-mask: url(/static/onboarding/pattern.png) 0 0 / 300px 300px repeat;
    mask: url(/static/onboarding/pattern.png) 0 0 / 300px 300px repeat;
    animation: none;
    transform: translate3d(0, calc(var(--scroll-y, 0) * -0.15px), 0);
}
body.dark::before { opacity: 0.08; }
body::after { display: none; }
body.lite::before { opacity: 0.05; }
body.dark.lite::before { opacity: 0.08; }


/* ==========================================================================
   Кошелёк в профиле (как в Crypto Bot) и монета Rpoint
   ========================================================================== */
.ic-soloist {
    display: inline-block;
    width: 1em; height: 1em;
    vertical-align: -0.14em;
    background: url(/static/icons/brands/soloist.svg) center / contain no-repeat;
}
.coin { width: 18px; height: 18px; }
.coin--big { width: 34px; height: 34px; }

#profile .card.wcard {
    position: relative;
    overflow: hidden;
    padding: 18px 18px 16px;
    background: #1D1D1F;
    color: #F5F5F7;
    border: 0;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.dark #profile .card.wcard { background: #1C1C1E; border: 1px solid rgba(255, 255, 255, 0.08); }
/* Узор стикеров поверх — белым, еле заметно. */
.wcard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0.06;
    -webkit-mask: url(/static/onboarding/pattern.png) 0 0 / 260px 260px repeat;
    mask: url(/static/onboarding/pattern.png) 0 0 / 260px 260px repeat;
    pointer-events: none;
}
.wcard > * { position: relative; }
.wcard .hero__title { color: #F5F5F7; font-size: 18px; }
.wcard .hero__hint, .wcard .who__id { color: rgba(245, 245, 247, 0.6); }
.wcard .who__avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12); }
.wcard__balance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}
.wcard__num {
    font-family: var(--font-display);
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.wcard__label {
    margin-top: 8px;
    text-align: center;
    font-size: 14px;
    color: rgba(245, 245, 247, 0.6);
}
.wcard__label .cat__count { color: inherit; }
.wcard__actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 22px;
}
.wact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: 0;
    background: none;
    color: #F5F5F7;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.wact__ic {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    transition: background 0.2s ease, transform 0.15s ease;
}
.wact:hover .wact__ic { background: rgba(255, 255, 255, 0.2); }
.wact:active .wact__ic { transform: scale(0.92); }
.wact__ic svg {
    width: 22px; height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#openTopup .wact__ic { background: var(--brand); }
.wcard .styles__hint:empty { display: none; }

.wcard__actions { grid-template-columns: repeat(4, 1fr); }
#sheetSend .field { margin-bottom: 10px; display: block; }
#sheetSend .input { width: 100%; }
.sheet__note { margin: 4px 2px 14px; font-size: 13px; line-height: 1.4; color: var(--hint); }


/* ==========================================================================
   Темы: цвет акцента
   ==========================================================================
   Акцент меняет только «действующий» цвет — кнопки, выбранное, ссылки.
   Фон и текст остаются нейтральными, поэтому любой акцент читается и на
   светлой, и на тёмной теме. */
body[data-accent="violet"] {
    --brand: #7D4CDB; --blue: #7D4CDB; --azure: #7D4CDB; --sky: #7D4CDB; --brand-ink: #7D4CDB;
    --brand-soft: rgba(125, 76, 219, 0.12); --brand-line: rgba(125, 76, 219, 0.3); --brand-glow: rgba(125, 76, 219, 0.25);
    --tab-accent: #7D4CDB;
}
body.dark[data-accent="violet"] {
    --brand: #A98BFF; --blue: #A98BFF; --azure: #A98BFF; --sky: #A98BFF; --brand-ink: #A98BFF;
    --brand-soft: rgba(169, 139, 255, 0.12); --brand-line: rgba(169, 139, 255, 0.3); --brand-glow: rgba(169, 139, 255, 0.25);
    --tab-accent: #A98BFF;
}
body[data-accent="pink"] {
    --brand: #E5307A; --blue: #E5307A; --azure: #E5307A; --sky: #E5307A; --brand-ink: #E5307A;
    --brand-soft: rgba(229, 48, 122, 0.12); --brand-line: rgba(229, 48, 122, 0.3); --brand-glow: rgba(229, 48, 122, 0.25);
    --tab-accent: #E5307A;
}
body.dark[data-accent="pink"] {
    --brand: #FF6FA8; --blue: #FF6FA8; --azure: #FF6FA8; --sky: #FF6FA8; --brand-ink: #FF6FA8;
    --brand-soft: rgba(255, 111, 168, 0.12); --brand-line: rgba(255, 111, 168, 0.3); --brand-glow: rgba(255, 111, 168, 0.25);
    --tab-accent: #FF6FA8;
}
body[data-accent="orange"] {
    --brand: #E8650A; --blue: #E8650A; --azure: #E8650A; --sky: #E8650A; --brand-ink: #E8650A;
    --brand-soft: rgba(232, 101, 10, 0.12); --brand-line: rgba(232, 101, 10, 0.3); --brand-glow: rgba(232, 101, 10, 0.25);
    --tab-accent: #E8650A;
}
body.dark[data-accent="orange"] {
    --brand: #FF9F43; --blue: #FF9F43; --azure: #FF9F43; --sky: #FF9F43; --brand-ink: #FF9F43;
    --brand-soft: rgba(255, 159, 67, 0.12); --brand-line: rgba(255, 159, 67, 0.3); --brand-glow: rgba(255, 159, 67, 0.25);
    --tab-accent: #FF9F43;
}
body[data-accent="green"] {
    --brand: #1F9D55; --blue: #1F9D55; --azure: #1F9D55; --sky: #1F9D55; --brand-ink: #1F9D55;
    --brand-soft: rgba(31, 157, 85, 0.12); --brand-line: rgba(31, 157, 85, 0.3); --brand-glow: rgba(31, 157, 85, 0.25);
    --tab-accent: #1F9D55;
}
body.dark[data-accent="green"] {
    --brand: #35D07F; --blue: #35D07F; --azure: #35D07F; --sky: #35D07F; --brand-ink: #35D07F;
    --brand-soft: rgba(53, 208, 127, 0.12); --brand-line: rgba(53, 208, 127, 0.3); --brand-glow: rgba(53, 208, 127, 0.25);
    --tab-accent: #35D07F;
}
body[data-accent="graphite"] {
    --brand: #3A3A3C; --blue: #3A3A3C; --azure: #3A3A3C; --sky: #3A3A3C; --brand-ink: #3A3A3C;
    --brand-soft: rgba(58, 58, 60, 0.12); --brand-line: rgba(58, 58, 60, 0.3); --brand-glow: rgba(58, 58, 60, 0.25);
    --tab-accent: #3A3A3C;
}
body.dark[data-accent="graphite"] {
    --brand: #636366; --blue: #636366; --azure: #636366; --sky: #636366; --brand-ink: #636366;
    --brand-soft: rgba(99, 99, 102, 0.12); --brand-line: rgba(99, 99, 102, 0.3); --brand-glow: rgba(99, 99, 102, 0.25);
    --tab-accent: #AEAEB2;
}
#themeMode { margin-bottom: 14px; }
.swatches { display: flex; gap: 12px; justify-content: space-between; }
.swatch {
    width: 36px; height: 36px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.4), box-shadow 0.2s ease;
}
.swatch:active { transform: scale(0.9); }
.swatch[data-accent="blue"] { background: #0071E3; }
.swatch[data-accent="violet"] { background: #7D4CDB; }
.swatch[data-accent="pink"] { background: #E5307A; }
.swatch[data-accent="orange"] { background: #E8650A; }
.swatch[data-accent="green"] { background: #1F9D55; }
.swatch[data-accent="graphite"] { background: #3A3A3C; }
.swatch--on {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px var(--card), 0 0 0 5px currentColor;
}
.swatch--on[data-accent="blue"] { color: #0071E3; }
.swatch--on[data-accent="violet"] { color: #7D4CDB; }
.swatch--on[data-accent="pink"] { color: #E5307A; }
.swatch--on[data-accent="orange"] { color: #E8650A; }
.swatch--on[data-accent="green"] { color: #1F9D55; }
.swatch--on[data-accent="graphite"] { color: #3A3A3C; }


/* ==========================================================================
   Магазин: витрина карточками
   ==========================================================================
   Две колонки, превью на скруглённой плитке, поверх — оверлеи: лайк и
   цена сверху, автор и скачивания снизу. Под превью только название и
   одна кнопка-таблетка. */
#mkFeed {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 0 8px;
}
#mkFeed > .empty, #mkFeed > p { grid-column: 1 / -1; }
#market .card.mkcard {
    margin: 0;
    padding: 6px 6px 10px;
    gap: 8px;
    border-radius: 22px;
    background: var(--card);
    border: 0;
    box-shadow: 0 1px 0 var(--sep), 0 10px 26px rgba(0, 0, 0, 0.07);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: ob-rise 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
body.dark #market .card.mkcard { background: #1C1C1E; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); }
#market .mkcard__stage {
    position: relative;
    height: auto;
    aspect-ratio: 1;
    border-radius: 17px;
    background: var(--bg);
}
body.dark #market .mkcard__stage { background: #2C2C2E; }
#market .mkcard__stage > svg { width: 88%; height: 88%; }
#market .mkcard__art--set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 10px;
}
#market .mkcard__more {
    position: absolute;
    right: 8px; bottom: 34px;
    padding: 3px 8px;
    border-radius: 980px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 11px;
}
#market .mkcard__body { padding: 0 6px; min-width: 0; }
#market .mkcard__title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#market .mkcard__desc {
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#market .mkcard__row { padding: 0 6px; flex-wrap: wrap; gap: 6px; }
#market .mkcard__row .mkbtn { font-size: 12px; padding: 4px 8px; }
.mkbuy { width: 100%; }

.mkov {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: calc(100% - 16px);
    padding: 4px 8px;
    border: 0;
    border-radius: 980px;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
}
.mkov--author { left: 8px; bottom: 8px; max-width: 62%; color: #fff; background: rgba(0, 0, 0, 0.45); }
.mkov--dl { right: 8px; bottom: 8px; color: #fff; background: rgba(0, 0, 0, 0.45); }
.mkov--price { right: 8px; top: 8px; color: #fff; background: var(--brand); }
.mkov--like {
    left: 8px; top: 8px;
    color: #FF2D55;
    background: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: transform 0.15s ease;
}
.mkov--like:active { transform: scale(0.9); }
.mkov--like .glyph { width: 12px; height: 12px; fill: currentColor; }
.mkov--like:not(.mkov--on) .glyph { fill: none; stroke: currentColor; stroke-width: 2.2; }
body.lite .mkov { backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 340px) { #mkFeed { grid-template-columns: 1fr; } }


/* ==========================================================================
   Монета Rpoint — монохром
   ==========================================================================
   Рисуется текущим цветом текста: чёрная на светлой теме, белая на
   тёмной и на графитовой карточке кошелька. Никакого фирменного синего —
   валюта не должна спорить с акцентом, который человек выбрал сам. */
.balance {
    background: var(--card);
    border: 1px solid var(--sep);
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 700;
}
.coin, .coin--big { color: inherit; }
.wcard .coin { color: #F5F5F7; }
.ic-soloist {
    display: inline-block;
    width: 1em; height: 1em;
    vertical-align: -0.14em;
    background: currentColor;
    -webkit-mask: url(/static/icons/brands/soloist.svg) center / contain no-repeat;
    mask: url(/static/icons/brands/soloist.svg) center / contain no-repeat;
}
.ic-soloist--tile { width: 100%; height: 100%; color: var(--text); }
.sheet__logo .ic-soloist--tile { display: block; padding: 8px; background-clip: content-box; }

/* ==========================================================================
   Типографика: три голоса
   ==========================================================================
   Рукописный (Caveat) — тихая подпись над заголовком: «есть вопрос?»,
   «ваши стикеры». Плотный дисплейный (Unbounded) — заголовки и цифры.
   Текстовый (Onest) — всё остальное. Одинаковая связка во всех разделах,
   поэтому экраны выглядят частями одного приложения. */
.sec-hand {
    display: block;
    margin: 0 0 2px;
    font-family: var(--font-hand);
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: var(--brand);
    transform: rotate(-2deg);
    transform-origin: left center;
}
.cat__title,
.prem__title,
.supcard__title,
.mkcard__title,
.segmented__item--on {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}
.cat__title { font-weight: 700; font-size: 18px; }
.btn, .pill, .chip, .segmented__item { font-family: var(--font-body); }
.pill, .btn--primary, .btn--pay { font-weight: 700; letter-spacing: -0.01em; }
.hint, .styles__hint, .premium__text { font-family: var(--font-body); }
.tab__label { font-family: var(--font-body); font-weight: 700; }
.wact span { font-family: var(--font-body); }
.wcard__num, .hero__title, .brand { font-family: var(--font-display); }

/* ==========================================================================
   Профиль: поддержка, промокод-билет, премиум, настройки
   ========================================================================== */

/* Поддержка — живой стикер, подпись и «печатает…» */
#profile .card.supcard {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px 14px 10px;
    text-align: left;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.15s ease;
}
#profile .card.supcard:active { transform: scale(0.98); }
.supcard__sticker { width: 76px; height: 76px; flex: none; }
.supcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.supcard__title { font-size: 20px; font-weight: 800; line-height: 1.15; }
.supcard__bot { font-size: 14px; font-weight: 600; color: var(--brand); }
.supcard__bubble {
    display: flex;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 18px 18px 18px 6px;
    background: var(--brand);
}
.supcard__bubble i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: sup-dot 1.2s ease-in-out infinite;
}
.supcard__bubble i:nth-child(2) { animation-delay: 0.15s; }
.supcard__bubble i:nth-child(3) { animation-delay: 0.3s; }
@keyframes sup-dot { 0%, 60%, 100% { opacity: 0.35; translate: 0 0; } 30% { opacity: 1; translate: 0 -3px; } }
.support-extra:empty { display: none; }

/* Промокод — билет: пунктир по краю, поле с кнопкой внутри */
#profile .card.ticket {
    position: relative;
    padding-top: 14px;
    border: 1.5px dashed color-mix(in srgb, var(--brand) 45%, transparent);
    background: color-mix(in srgb, var(--brand) 5%, var(--card));
}
.ticket__field {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 5px 5px 5px 16px;
    border-radius: 980px;
    background: var(--card);
    border: 1px solid var(--sep);
}
body.dark .ticket__field { background: #000; }
.ticket__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    outline: none;
}
.ticket__input::placeholder {
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--hint);
}
.ticket__go {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.ticket__go:active { transform: scale(0.9); }
.ticket__go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Премиум */
#profile .card.prem { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; }
.prem__ic { width: 54px; height: 54px; grid-row: span 1; }
.prem__body { min-width: 0; }
.prem__title { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; }
.prem__status { font-size: 13px; color: var(--hint); }
.prem .premium__text { margin: 4px 0 0; font-size: 14px; color: var(--hint); }
.prem .pill { grid-column: 1 / -1; margin-top: 10px; }

/* Настройки — строки как в iOS */
.setrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--sep);
}
.setrow:first-of-type { border-top: 0; }
.setrow__t { font-weight: 700; font-size: 15px; }
.segmented--compact { margin: 0; }
.segmented--compact .segmented__item { padding: 6px 10px; font-size: 13px; }
.setrow .swatches { gap: 8px; }
.setrow .swatch { width: 26px; height: 26px; }
.setgroup__note { margin: 4px 0 0; font-size: 12px; color: var(--hint); }
#themeMode { margin-bottom: 0; }


/* ==========================================================================
   Экран «Настройки» и вход в него из профиля
   ========================================================================== */
#profile .card.setlink {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease;
}
#profile .card.setlink:active { transform: scale(0.98); }
.setlink__ic {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex: none;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
}
.setlink__ic svg, .wcard__gear svg {
    width: 22px; height: 22px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.setlink__body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.setlink__body b { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.setlink__body small { font-size: 13px; color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setlink__chev {
    width: 8px; height: 8px;
    margin-right: 4px;
    border-top: 2px solid var(--hint);
    border-right: 2px solid var(--hint);
    transform: rotate(45deg);
}
.wcard__gear {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #F5F5F7;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.wcard__gear:active { transform: rotate(60deg) scale(0.92); }

.subhead {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 12px;
}
.subhead__back {
    position: relative;
    width: 36px; height: 36px;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: var(--card);
    box-shadow: 0 1px 0 var(--sep);
    cursor: pointer;
}
.subhead__back::before {
    content: "";
    position: absolute;
    left: 14px; top: 13px;
    width: 9px; height: 9px;
    border-left: 2px solid var(--text);
    border-bottom: 2px solid var(--text);
    transform: rotate(45deg);
}
.subhead__title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.03em;
}
#settings .card.prem { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; }
#settings .card.setgroup .setrow:first-of-type { border-top: 0; }


/* ==========================================================================
   Загрузка — переписка
   ==========================================================================
   Два человека в чате: вопрос, «печатает…», ответ со ссылкой на бота и
   два живых стикера RHINO. Реплики выпрыгивают по очереди (--d —
   задержка), текст пузырей рукописный, как будто набран от руки. */
.loader.lchat {
    min-height: calc(100vh - 140px);
    justify-content: center;
    gap: 14px;
    padding: 12px 16px 24px;
}
.lchat__brand {
    margin: 0;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text);
    animation: lchat-in 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.lchat__thread {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 380px;
}
.lmsg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    opacity: 0;
    animation: lchat-pop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.25) var(--d, 0s) both;
}
.lmsg--in { align-self: flex-start; transform-origin: left bottom; }
.lmsg--out { align-self: flex-end; transform-origin: right bottom; }
.lmsg__ava {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    flex: none;
    border-radius: 50%;
    background: #FF9F0A;
    color: #fff;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
}
.lmsg__bubble {
    max-width: 250px;
    padding: 8px 14px 9px;
    border-radius: 20px;
    font-family: var(--font-hand);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    box-shadow: 0 1px 0 var(--sep), 0 6px 16px rgba(0, 0, 0, 0.06);
}
.lmsg--in .lmsg__bubble {
    background: var(--card);
    color: var(--text);
    border-bottom-left-radius: 6px;
}
.lmsg--out .lmsg__bubble {
    background: var(--brand);
    color: #fff;
    border-bottom-right-radius: 6px;
}
.lmsg__bubble b {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.lmsg__name {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    color: #FF9F0A;
    margin-bottom: 2px;
}

/* «печатает…» — появляется и исчезает до ответа */
.lmsg--typing { animation: lchat-typing 0.6s ease var(--d, 0s) both; }
.lmsg--typing .lmsg__bubble { display: flex; gap: 4px; padding: 13px 14px; }
.lmsg--typing i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #fff;
    animation: sup-dot 1s ease-in-out infinite;
}
.lmsg--typing i:nth-child(2) { animation-delay: 0.12s; }
.lmsg--typing i:nth-child(3) { animation-delay: 0.24s; }
@keyframes lchat-typing {
    0%   { opacity: 0; scale: 0.6; height: 38px; }
    20%  { opacity: 1; scale: 1; height: 38px; }
    80%  { opacity: 1; scale: 1; height: 38px; margin: 0; }
    100% { opacity: 0; scale: 0.6; height: 0; margin: -8px 0 0; }
}

/* Стикеры — без пузыря, как в Telegram */
.lmsg--sticker .lmsg__sticker { width: 112px; height: 112px; }
.lmsg__sticker--none { display: none; }

@keyframes lchat-pop {
    0%   { opacity: 0; scale: 0.4; translate: 0 18px; }
    70%  { opacity: 1; scale: 1.05; translate: 0 -2px; }
    100% { opacity: 1; scale: 1; translate: 0 0; }
}
@keyframes lchat-in { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }

.lchat .loader__bar { width: min(220px, 60%); margin-top: 6px; }
.lchat .loader__phrase { font-family: var(--font-hand); font-size: 18px; color: var(--hint); }

@media (prefers-reduced-motion: reduce) {
    .lmsg, .lchat__brand { animation: none; opacity: 1; }
    .lmsg--typing { display: none; }
}

.lmsg__ava { overflow: hidden; background: var(--brand); }
.lmsg__ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lmsg__name { color: var(--brand); }


/* ==========================================================================
   Логотип в шапке
   ========================================================================== */
.topbar .brand {
    display: flex;
    align-items: center;
    gap: 9px;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--text);
    transform: none;
}
.brand__mark {
    width: 36px; height: 36px;
    flex: none;
    border-radius: 50%;
    background: var(--card);
    box-shadow: 0 0 0 1.5px var(--sep), 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: grid;
    place-items: center;
}
.brand__mark svg { width: 120% !important; height: 120% !important; }
.brand__text { position: relative; display: flex; flex-direction: column; line-height: 1; }
.brand__text b {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.045em;
}
.brand__text i {
    align-self: flex-end;
    margin: -3px -6px 0 0;
    font-family: var(--font-hand);
    font-style: normal;
    font-size: 17px;
    font-weight: 700;
    color: var(--brand);
    transform: rotate(-6deg);
}

/* ==========================================================================
   Магазин: шапка, топ недели, приглашение стать автором
   ========================================================================== */
.mkhead { padding: 6px 4px 14px; }
.mkhead__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mkhead__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.045em;
}
.mkhead__count { font-size: 14px; color: var(--hint); white-space: nowrap; }
.mkhead__count b { font-family: var(--font-display); color: var(--text); }
.mkpills {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.mkpills::-webkit-scrollbar { display: none; }
#market .mkpill {
    flex: none;
    padding: 9px 16px;
    border: 1px solid var(--sep);
    border-radius: 980px;
    background: var(--card);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
#market .mkpill:active { transform: scale(0.95); }
#market .mkpill.segmented__item--on,
#market .mkpill.chip--on {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
}
.mkpills__sep { flex: none; width: 1px; margin: 6px 2px; background: var(--sep); }

.mktop { margin: 0 -16px 16px; }
.mktop .sec-hand { margin-left: 20px; }
.mktop__rail {
    display: flex;
    gap: 12px;
    padding: 8px 16px 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.mktop__rail::-webkit-scrollbar { display: none; }
#market .card.mkcard--top {
    position: relative;
    flex: none;
    width: 168px;
    scroll-snap-align: start;
}
#market .mkcard--top .mkcard__desc,
#market .mkcard--top .mkcard__row .mkbtn { display: none; }
.mktop__rank {
    position: absolute;
    left: -4px; top: -10px;
    z-index: 3;
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    color: var(--text);
    -webkit-text-stroke: 3px var(--bg);
    paint-order: stroke fill;
}

#market .card.mkinvite {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 16px;
    padding: 12px 14px 12px 8px;
    border: 1.5px dashed color-mix(in srgb, var(--brand) 45%, transparent);
    background: color-mix(in srgb, var(--brand) 6%, var(--card));
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease;
}
#market .card.mkinvite:active { transform: scale(0.98); }
.mkinvite__sticker { width: 72px; height: 72px; flex: none; }
.mkinvite__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mkinvite__body b { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.03em; }
.mkinvite__body small { font-size: 13px; color: var(--hint); margin-top: 2px; }
.mkinvite__go {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    flex: none;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
}
.mkinvite__go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }


/* ==========================================================================
   Нижняя панель: таблетка у выбранной вкладки
   ========================================================================== */
.tabbar--pills { display: flex; justify-content: space-around; gap: 6px; }
.tabbar--pills .tabbar__glow { display: none; }
.tabbar--pills .tab {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 0;
    min-width: 52px;
    height: 46px;
    padding: 0 14px;
    border-radius: 980px;
    color: var(--hint);
    transition: background 0.35s cubic-bezier(0.2, 0.9, 0.3, 1), color 0.25s ease, padding 0.35s ease, transform 0.15s ease;
}
.tabbar--pills .tab::before { display: none; }
.tabbar--pills .tab__icon { width: 24px; height: 24px; opacity: 1; transform: none; background: none; box-shadow: none; }
.tabbar--pills .tab__icon svg {
    width: 24px; height: 24px;
    fill: none; stroke: currentColor; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
}
.tabbar--pills .tab__label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    opacity: 0;
    transition: max-width 0.4s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.25s ease, margin 0.4s ease;
}
.tabbar--pills .tab--on {
    background: var(--brand);
    color: #fff;
    padding: 0 18px 0 14px;
}
.tabbar--pills .tab--on .tab__label { max-width: 110px; opacity: 1; margin-left: 8px; color: #fff; }
.tabbar--pills .tab--on .tab__icon svg { animation: tab-bounce 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.5); }
@keyframes tab-bounce { 0% { scale: 0.7; } 60% { scale: 1.15; } 100% { scale: 1; } }
.tabbar--pills .tab:active { transform: scale(0.94); }

/* ==========================================================================
   Шапка профиля
   ========================================================================== */
.who--card { display: flex; align-items: center; gap: 14px; padding-right: 44px; }
.who__ring {
    flex: none;
    padding: 3px;
    border-radius: 50%;
    background: var(--brand);
}
.who__ring .who__avatar {
    width: 58px; height: 58px;
    border: 3px solid #1D1D1F;
    box-shadow: none;
}
body.dark .who__ring .who__avatar { border-color: #1C1C1E; }
.who--card .who__body { min-width: 0; }
.who__hi { color: rgba(245, 245, 247, 0.65); font-size: 18px; margin: 0; }
.wcard .who--card .hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.who__meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.who__meta .hero__hint { margin: 0; font-size: 13px; }
.who__meta .hero__hint:empty { display: none; }
.wcard .who__id {
    border: 0;
    padding: 3px 9px;
    border-radius: 980px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(245, 245, 247, 0.8);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s ease;
}
.wcard .who__id--copied { background: #34C759; color: #fff; }
.wcard .who__id--copied span { display: none; }
.wcard .who__id--copied::after { content: " ✓"; }

/* ==========================================================================
   Настройки: меню разделов
   ========================================================================== */
.setmenu[hidden], .setpane--hidden { display: none !important; }
.setpane--in { animation: ob-rise 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
#settings .card.setmenu__group { padding: 12px 6px 6px; }
.setmenu__group .sec-hand { margin: 0 0 6px 10px; }
.setmenu__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px;
    border: 0;
    border-radius: 14px;
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}
.setmenu__row:active { background: color-mix(in srgb, var(--text) 7%, transparent); }
.setmenu__row + .setmenu__row::before {
    content: "";
    position: absolute;
    top: 0; right: 10px; left: 58px;
    border-top: 1px solid var(--sep);
}
.setmenu__ic {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    flex: none;
    border-radius: 10px;
    color: #fff;
}
.setmenu__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.setmenu__body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.setmenu__body b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.setmenu__body small { font-size: 13px; color: var(--hint); }
.setmenu__chev {
    width: 8px; height: 8px;
    margin-right: 4px;
    border-top: 2px solid var(--hint);
    border-right: 2px solid var(--hint);
    transform: rotate(45deg);
}
.ob-replay[hidden] { display: none; }
/* Лента топа: без «магнита» — он мешал бы плавной автопрокрутке. */
.mktop__rail { scroll-snap-type: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.mktop__rail--drag { cursor: grabbing; }
.mktop__rail--drag * { pointer-events: none; }
#market .card.mkcard--top { scroll-snap-align: none; }

/* Монета Rpoint: цельный диск с вырезанной «S», размер — по высоте цифр. */
.balance { align-items: center; gap: 6px; }
.balance .coin { width: 17px; height: 17px; }
.coin--big { width: 36px; height: 36px; }
.wcard__balance { gap: 12px; }


/* ==========================================================================
   Раздел «Создать»
   ==========================================================================
   Та же подача, что у магазина и профиля: рукописная подпись, плотный
   заголовок, поле надписи — крупная «таблетка», каталог без общей
   подложки, плитки — отдельные карточки, выбранная — с цветным кольцом и
   выпрыгивающей галочкой. Панель выбора парит над нижней навигацией. */
.crhead { padding: 6px 4px 12px; }
.crhead__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.045em;
}
#create .card.crfield { padding: 10px; }
#create .crfield .field__label { display: none; }
#create .crfield .field__row { gap: 8px; }
#create .crfield .field__wrap { flex: 1; }
#create .crfield .input {
    height: 56px;
    padding: 0 64px 0 20px;
    border: 1.5px solid var(--sep);
    border-radius: 980px;
    background: var(--bg);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#create .crfield .input::placeholder { font-family: var(--font-body); font-weight: 500; color: var(--hint); }
#create .crfield .input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); outline: none; }
#create .crfield .field__counter {
    right: 16px;
    padding: 3px 8px;
    border-radius: 980px;
    background: var(--card);
    font-size: 12px;
    font-weight: 700;
    color: var(--hint);
}
#create .logochip {
    flex: none;
    flex-direction: column;
    gap: 2px;
    width: 56px; height: 56px;
    padding: 0;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    border: 0;
    justify-content: center;
}
#create .logochip svg { width: 22px; height: 22px; }
#create .logochip__text { display: none; }

/* Лента шаблонов — без подложки, края растворяются */
#create .belt { margin: 14px -16px 4px; background: none; border: 0; box-shadow: none; }

/* Наборы — таблетки, как сортировка в магазине */
#create .chips.packs { margin: 14px 0 6px; gap: 8px; }
#create .chips.packs .chip {
    padding: 9px 16px;
    border: 1px solid var(--sep);
    border-radius: 980px;
    background: var(--card);
    color: var(--text);
    font-weight: 700;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
#create .chips.packs .chip--on { background: var(--text); border-color: var(--text); color: var(--bg); }

/* Разделы каталога */
#create .cat { margin-top: 18px; }
#create .cat__head { align-items: center; margin: 0 4px 10px; }
#create .cat__title { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.035em; }
.cat__count--chip {
    padding: 3px 10px;
    border-radius: 980px;
    background: var(--card);
    border: 1px solid var(--sep);
    font-size: 12px;
    font-weight: 700;
    color: var(--hint);
}
#create .grid { gap: 10px; }
#create .tile {
    border-radius: 22px;
    background: var(--card);
    border: 0;
    box-shadow: 0 1px 0 var(--sep), 0 8px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.4), box-shadow 0.2s ease;
}
body.dark #create .tile { background: #1C1C1E; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }
#create .tile--on {
    transform: scale(0.95);
    box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--brand);
}
#create .tile__mark {
    top: 8px; right: 8px;
    width: 24px; height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 0 0 2px var(--card);
}
#create .tile--on .tile__mark { animation: tile-check 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.6); }
@keyframes tile-check { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
#create .cat__more,
#create .cat__pick {
    margin-top: 10px;
    border: 1px solid var(--sep);
    border-radius: 980px;
    background: var(--card);
    color: var(--text);
    font-weight: 700;
    box-shadow: none;
}
#create .cat__pick--on { background: var(--text); color: var(--bg); border-color: var(--text); }

/* Панель выбора — тёмная таблетка над нижней навигацией */
body #actionbar.actionbar {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    z-index: 25;
    max-width: 456px;
    margin: 0 auto;
    padding: 8px 8px 8px 18px;
    border: 0;
    border-radius: 980px;
    background: var(--text);
    color: var(--bg);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.25s ease;
}
body.fullscreen #actionbar.actionbar { bottom: calc(80px + max(var(--safe-bottom), env(safe-area-inset-bottom, 0px))); }
body #actionbar.actionbar--hidden { transform: translateY(160%) scale(0.9); opacity: 0; }
.actionbar__count { font-family: var(--font-display); font-weight: 800; color: var(--bg); }
.actionbar__count b { color: var(--brand); }
body.dark .actionbar__count b { color: var(--brand); }
.actionbar__price { color: color-mix(in srgb, var(--bg) 65%, transparent); }
.actionbar .btn--primary {
    border-radius: 980px;
    background: var(--brand);
    color: #fff;
    padding: 12px 22px;
    font-weight: 800;
    box-shadow: none;
}
#create { padding-bottom: 90px; }
#create .crfield .field__counter { top: 50%; bottom: auto; transform: translateY(-50%); }

/* Статичные превью каталога и ленты */
.tile__img, .belt__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    animation: thumb-in 0.35s ease both;
}
@keyframes thumb-in { from { opacity: 0; scale: 0.92; } to { opacity: 1; scale: 1; } }

/* Разделы каталога — таблетки с количеством, лента листается вбок */
.cattabs {
    display: flex;
    gap: 8px;
    margin: 14px -16px 4px;
    padding: 2px 16px 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.cattabs::-webkit-scrollbar { display: none; }
.cattab {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1px solid var(--sep);
    border-radius: 980px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.cattab:active { transform: scale(0.95); }
.cattab small {
    padding: 1px 7px;
    border-radius: 980px;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    font-size: 11px;
    font-weight: 800;
    color: var(--hint);
}
.cattab--on { background: var(--text); border-color: var(--text); color: var(--bg); }
.cattab--on small { background: color-mix(in srgb, var(--bg) 22%, transparent); color: var(--bg); }
#create .cat--single { margin-top: 10px; animation: ob-rise 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
#create .cat--single .cat__head { display: none; }


/* Экран оформления: разделы-таблетки, один раздел на экране */
.stpane--hidden { display: none !important; }
.sttabs { margin: 12px -16px 10px; }
#style .card.stpane .cat__head { display: none; }
#style #styleNext {
    border-radius: 980px;
    min-height: 54px;
    font-size: 17px;
    font-weight: 800;
    background: var(--brand);
    color: #fff;
    box-shadow: 0 10px 26px var(--brand-glow);
}
#style #styleBack {
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--brand);
    font-weight: 700;
}

/* «Популярное сейчас» в «Создать» — карточки как в «Топе недели» */
#create .belt.crpop { margin: 16px -16px 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
#create .crpop .sec-hand { margin-left: 20px; }
#create .crrail { animation: none !important; transform: none !important; width: auto; }
#create .crrail .belt__item {
    position: relative;
    flex: none;
    width: 128px; height: 128px;
    padding: 8px;
    border: 0;
    border-radius: 22px;
    background: var(--card);
    box-shadow: 0 1px 0 var(--sep), 0 10px 24px rgba(0, 0, 0, 0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.4), box-shadow 0.2s ease;
}
body.dark #create .crrail .belt__item { background: #1C1C1E; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); }
#create .crrail .belt__stage { width: 100%; height: 100%; }
#create .crrail .belt__item--on { transform: scale(0.95); box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--brand); }
#create .crrail .belt__item--on::after {
    content: "✓";
    position: absolute;
    top: 8px; right: 8px;
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}


/* ==========================================================================
   Горизонтальные ленты: разделы оформления и «что красим»
   ==========================================================================
   Тянутся рукой, края растворяются маской (это не градиент цвета, а
   прозрачность по краю — без неё лента обрубалась бы ровной линией). */
.cattabs, .hstrip, .mkpills {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
}
.hstrip--drag { cursor: grabbing; scroll-snap-type: none; }
.cattab, .hstrip .chip { scroll-snap-align: start; }

/* Разделы оформления — плитки со значком */
.sttabs { gap: 8px; padding-top: 4px; padding-bottom: 8px; }
.cattab.sttab {
    flex-direction: column;
    gap: 5px;
    min-width: 76px;
    padding: 10px 10px 9px;
    border-radius: 18px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.sttab__ic {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--text) 7%, transparent);
    transition: background 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.5);
}
.sttab__ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cattab.sttab.cattab--on { background: var(--brand); border-color: var(--brand); color: #fff; }
.cattab.sttab.cattab--on .sttab__ic { background: rgba(255, 255, 255, 0.2); transform: scale(1.08); }

/* «Что красим» — одна строка, у пункта точка его текущего цвета */
#stTargets.hstrip {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 -18px 14px;
    padding: 2px 18px 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
#stTargets.hstrip::-webkit-scrollbar { display: none; }
#stTargets .chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px 8px 8px;
    border: 1px solid var(--sep);
    border-radius: 980px;
    background: var(--bg);
    color: var(--text);
    font-weight: 700;
    white-space: nowrap;
    box-shadow: none;
}
#stTargets .chip--on { background: var(--text); border-color: var(--text); color: var(--bg); }
.tdot {
    width: 18px; height: 18px;
    flex: none;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--text) 25%, transparent);
    background: var(--card);
}
#stTargets .chip--on .tdot { border-color: color-mix(in srgb, var(--bg) 40%, transparent); }
.tdot { position: relative; overflow: hidden; }
.tdot--none { background: var(--card); }
.tdot--none::after {
    content: "";
    position: absolute;
    left: 50%; top: -2px; bottom: -2px;
    width: 2px;
    margin-left: -1px;
    background: #FF3B30;
    transform: rotate(45deg);
}

/* Заголовки разделов на экране оформления — рукописная подпись над
   плотным названием, как во всём приложении */
#style .card.stpane .field__label,
#style .card.stpane .slider__label { font-family: var(--font-body); font-weight: 700; }

/* Разделы «Создать» — те же таблетки, что сортировка в магазине */
#create .cattabs .cattab {
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 980px;
}
#create .cattabs .cattab small { display: none; }
#create .cattabs { margin-top: 18px; }


/* ==========================================================================
   «Создать»: разделы Stickers · Carve · Рамка · Avatars
   ========================================================================== */
.crmodes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 0 0 14px;
}
.crmode {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px 10px;
    border: 1px solid var(--sep);
    border-radius: 20px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.25s ease, color 0.25s ease;
}
.crmode:active { transform: scale(0.95); }
.crmode__ic {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--text) 7%, transparent);
    transition: background 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.5);
}
.crmode__ic svg, .crsoon__ic svg {
    width: 23px; height: 23px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.crmode small {
    position: absolute;
    top: 6px; right: 6px;
    padding: 1px 6px;
    border-radius: 980px;
    background: color-mix(in srgb, var(--brand) 16%, transparent);
    color: var(--brand);
    font-family: var(--font-hand);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}
.crmode--on { background: var(--brand); border-color: var(--brand); color: #fff; }
.crmode--on .crmode__ic { background: rgba(255, 255, 255, 0.2); transform: scale(1.06); }
.crmode--on small { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* В «скоро»-разделах прячем конструктор стикеров */
#create[data-mode]:not([data-mode="stickers"]) .crfield,
#create[data-mode]:not([data-mode="stickers"]) #belt,
#create[data-mode]:not([data-mode="stickers"]) #cats { display: none !important; }

#create .card.crsoon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 20px 22px;
}
#create .card.crsoon[hidden] { display: none; }
.crsoon__ic {
    display: grid;
    place-items: center;
    width: 72px; height: 72px;
    margin-bottom: 10px;
    border-radius: 24px;
    background: var(--brand);
    color: #fff;
}
.crsoon__ic svg { width: 36px; height: 36px; }
.crsoon__title { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.04em; }
.crsoon__text { margin: 6px 0 16px; max-width: 280px; font-size: 14px; line-height: 1.45; color: var(--hint); }
/* Значок и подпись выбранной вкладки — белые на цветной таблетке
   (старое правило красило их в цвет акцента, и они сливались с фоном). */
.tabbar--pills .tab--on,
.tabbar--pills .tab--on .tab__label,
.tabbar--pills .tab--on .tab__icon,
.tabbar--pills .tab--on .tab__icon svg { color: #fff !important; }


/* ==========================================================================
   Выбор раздела «Создать»: метка у заголовка и стеклянное окошко
   ========================================================================== */
#crModes { display: none; }
.crmodechip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--sep);
    border-radius: 980px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}
.crmodechip__ic {
    display: grid; place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
}
.crmodechip__ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.crmodechip__chev {
    width: 7px; height: 7px;
    margin: -3px 2px 0 2px;
    border-right: 2px solid var(--hint);
    border-bottom: 2px solid var(--hint);
    transform: rotate(45deg);
}

.modepop {
    position: fixed;
    z-index: 70;
    width: 230px;
    padding: 10px 8px 8px;
    border-radius: 24px;
    background: color-mix(in srgb, var(--card) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
    opacity: 0;
    transform: translateY(14px) scale(0.92);
    transform-origin: var(--arrow-x, 50%) 100%;
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.modepop[hidden] { display: none; }
.modepop--open { opacity: 1; transform: none; }
/* Хвостик к кнопке «Создать» */
.modepop::after {
    content: "";
    position: absolute;
    left: var(--arrow-x, 50%);
    bottom: -7px;
    width: 14px; height: 14px;
    margin-left: -7px;
    background: inherit;
    border-right: inherit;
    border-bottom: inherit;
    transform: rotate(45deg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.modepop__hand {
    display: block;
    margin: 0 0 6px 8px;
    font-family: var(--font-hand);
    font-size: 18px;
    font-weight: 700;
    color: var(--brand);
}
.modepop__list { display: flex; flex-direction: column; gap: 2px; }
.modepop__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    border: 0;
    border-radius: 14px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.modepop__item span { flex: 1; }
.modepop__item small {
    font-family: var(--font-hand);
    font-size: 15px;
    font-weight: 700;
    color: var(--hint);
}
.modepop__ic {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--text) 8%, transparent);
}
.modepop__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.modepop__item--hover, .modepop__item:hover { background: color-mix(in srgb, var(--text) 8%, transparent); transform: scale(1.02); }
.modepop__item--on .modepop__ic { background: var(--brand); color: #fff; }
.modepop__item--on span { color: var(--brand); }
body.lite .modepop { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--card); }
/* Долгое нажатие на вкладку не должно вызывать системное меню и выделение */
.tabbar--pills .tab { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: none; }


/* ==========================================================================
   Логотип RHINO
   ========================================================================== */
.brand__word {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}
.brand__word > span {
    display: inline-block;
    animation:
        brand-in 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4) calc(var(--i) * 0.05s) both,
        brand-wave 3.2s ease-in-out calc(1.2s + var(--i) * 0.12s) infinite;
}
/* «o» — кружок со стикером внутри, по высоте строчной буквы */
.brand__o {
    width: 0.9em; height: 0.9em;
    margin: 0 0.02em;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: inset 0 0 0 0.11em var(--text);
    overflow: hidden;
    display: grid !important;
    place-items: center;
    vertical-align: middle;
    transform: translateY(0.06em);
}
.brand__o svg { width: 135% !important; height: 135% !important; }
.brand__text i {
    margin: -2px -10px 0 0;
    font-size: 19px;
}
@keyframes brand-in {
    from { opacity: 0; transform: translateY(0.6em) rotate(-12deg) scale(0.6); }
    to   { opacity: 1; transform: none; }
}
@keyframes brand-wave {
    0%, 70%, 100% { translate: 0 0; }
    80%           { translate: 0 -0.12em; }
    90%           { translate: 0 0.03em; }
}
@media (prefers-reduced-motion: reduce) { .brand__word > span { animation: none; } }
/* Логотип крупнее: кружок со стикером должен читаться как буква «o» */
.brand__word { font-size: 24px; }
.brand__o { width: 1.02em; height: 1.02em; box-shadow: inset 0 0 0 0.1em var(--text), 0 0 0 2px var(--bg); transform: none; }
.brand__o svg { width: 150% !important; height: 150% !important; }

/* Объёмный логотип: светлая лицевая сторона и «выдавленный» торец из
   смещённых слоёв цвета акцента — как 3D-надпись на стикере, без
   градиентов. */
.brand__word {
    font-size: 25px;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    text-shadow:
        1px 1px 0 color-mix(in srgb, var(--brand) 85%, #000),
        2px 2px 0 color-mix(in srgb, var(--brand) 75%, #000),
        3px 3px 0 color-mix(in srgb, var(--brand) 65%, #000),
        4px 4px 0 color-mix(in srgb, var(--brand) 55%, #000),
        5px 6px 8px rgba(0, 0, 0, 0.35);
    -webkit-text-stroke: 0.6px color-mix(in srgb, var(--brand) 40%, #000);
    paint-order: stroke fill;
}
body:not(.dark) .brand__word {
    color: #FFFFFF;
    -webkit-text-stroke: 0.8px color-mix(in srgb, var(--brand) 60%, #000);
}
.brand__text i { margin: -1px -12px 0 0; }
/* Торец букв — чистый цвет акцента, ступенями чуть темнее: на чёрном
   фоне затемнённые слои сливались, и объёма не было видно. */
.brand__word {
    text-shadow:
        1px 1px 0 var(--brand),
        2px 2px 0 var(--brand),
        3px 3px 0 color-mix(in srgb, var(--brand) 88%, #000),
        4px 4px 0 color-mix(in srgb, var(--brand) 76%, #000),
        5px 5px 0 color-mix(in srgb, var(--brand) 64%, #000),
        6px 7px 10px rgba(0, 0, 0, 0.4);
    -webkit-text-stroke: 0;
}
body:not(.dark) .brand__word { color: #FFFFFF; -webkit-text-stroke: 1px var(--brand); }

/* Логотип: шрифт Lilita One вместо объёма, слива-стикер снова рядом */
.brand__word {
    font-family: "Lilita One", var(--font-display);
    font-size: 27px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--text);
    text-shadow: none;
    -webkit-text-stroke: 0;
}
body:not(.dark) .brand__word { color: var(--text); -webkit-text-stroke: 0; }
.brand__text i { margin: -6px -14px 0 0; }
/* «Design» чуть ниже, чтобы не наезжал на RHINO */
.brand__text i { margin: 3px -14px 0 0; }
/* «Design» — вплотную под словом, без зазора */
.brand__text i { margin: -1px -14px 0 0; }


/* ==========================================================================
   Раздел «Рамка» (frames.js)
   ========================================================================== */
.frapp[hidden], .frEditor[hidden], .frstart[hidden] { display: none !important; }
#create .card.frstart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 26px 20px 20px;
    text-align: center;
}
.frstart__ic {
    display: grid; place-items: center;
    width: 76px; height: 76px;
    border-radius: 24px;
    background: var(--brand);
    color: #fff;
    margin-bottom: 4px;
}
.frstart__ic svg, .tgprof__actions svg, .tgprof__music svg, .frcolor--shot svg {
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.frstart__ic svg { width: 40px; height: 40px; }
.frstart__title { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.04em; }
.frstart__text { margin: 0 0 6px; max-width: 300px; font-size: 14px; line-height: 1.45; color: var(--hint); }

/* Макет шапки профиля Telegram */
.tgprof {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 14px 0;
    margin: 0 0 14px;
    border-radius: 26px;
    overflow: hidden;
    color: #fff;
    background: #111;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
    transition: background 0.35s ease;
}
.tgprof--light { color: #111; }
.tgprof__ava {
    position: relative;
    width: 128px; height: 128px;
    border-radius: 50%;
    overflow: hidden;
}
.tgprof__ava img { width: 100%; height: 100%; display: block; object-fit: cover; transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.tgprof--loading .tgprof__ava img { opacity: 0.55; transform: scale(0.96); }
.tgprof__spin {
    position: absolute;
    inset: 40%;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    opacity: 0;
    animation: fr-spin 0.8s linear infinite;
}
.tgprof--loading .tgprof__spin { opacity: 1; }
@keyframes fr-spin { to { transform: rotate(360deg); } }
.tgprof__name { margin-top: 12px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.tgprof__seen { font-size: 14px; opacity: 0.7; margin-top: 2px; }
.tgprof__actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
    margin-top: 16px;
}
.tgprof__actions span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 9px 0 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 12px;
    font-weight: 700;
}
.tgprof--light .tgprof__actions span { background: rgba(0, 0, 0, 0.08); }
.tgprof__actions svg { width: 20px; height: 20px; }
.tgprof__music {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(100% + 28px);
    margin-top: 14px;
    padding: 11px 0 12px;
    background: rgba(0, 0, 0, 0.22);
    font-size: 14px;
    font-weight: 700;
}
.tgprof--light .tgprof__music { background: rgba(0, 0, 0, 0.06); }
.tgprof__music svg { width: 16px; height: 16px; }
.tgprof__music i {
    width: 6px; height: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.7;
}

.frkinds { margin: 0 0 10px; }
.frstrip {
    display: flex;
    gap: 10px;
    margin: 0 -16px 14px;
    padding: 2px 16px 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.frstrip::-webkit-scrollbar { display: none; }
.frtile {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 92px;
    padding: 6px 6px 8px;
    border: 0;
    border-radius: 20px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 0 var(--sep);
    transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.4), box-shadow 0.2s ease;
}
.frtile img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: block; background: var(--bg); }
.frtile span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frtile--on { transform: scale(0.95); box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--brand); }
.frtile--own i {
    display: grid; place-items: center;
    width: 80px; height: 80px;
    border-radius: 50%;
    border: 2px dashed color-mix(in srgb, var(--text) 30%, transparent);
    font-style: normal;
    font-size: 30px;
    font-weight: 300;
    color: var(--hint);
}
.frhand { margin-left: 4px; }
.frcolors { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }
.frcolor {
    width: 38px; height: 38px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.5);
}
.frcolor--on { transform: scale(1.1); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--brand); }
.frcolor--shot {
    display: grid; place-items: center;
    background: var(--card);
    color: var(--text);
    border: 1.5px dashed color-mix(in srgb, var(--text) 35%, transparent);
}
.frcolor--shot svg { width: 18px; height: 18px; }
.frtint { margin-bottom: 14px; }
.frtint[hidden] { display: none; }
.frmake { min-height: 54px; font-size: 17px; font-weight: 800; box-shadow: 0 10px 26px var(--brand-glow); }

/* Пипетка */
.frpicker {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.frpicker[hidden] { display: none; }
.frpicker--open { opacity: 1; }
.frpicker__panel {
    max-width: 460px;
    width: 100%;
    padding: 14px;
    border-radius: 24px;
    background: var(--card);
    transform: scale(0.94);
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.frpicker--open .frpicker__panel { transform: none; }
.frpicker__wrap { position: relative; margin: 8px 0 12px; display: grid; place-items: center; }
#frShot { max-width: 100%; border-radius: 14px; touch-action: none; cursor: crosshair; display: block; }
.frpicker__loupe {
    position: absolute;
    width: 46px; height: 46px;
    margin: -64px 0 0 -23px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    opacity: 0;
}
.frpicker__loupe--on { opacity: 1; }
.frpicker__row { display: flex; align-items: center; gap: 10px; }
.frpicker__row .pill { flex: 1; }
.frpicker__swatch {
    width: 44px; height: 44px;
    flex: none;
    border-radius: 50%;
    border: 1.5px dashed color-mix(in srgb, var(--text) 35%, transparent);
}
/* Таблетки «Кляксы / Кольца» — как сортировка в магазине */
#create .frkinds .mkpill {
    flex: none;
    padding: 9px 16px;
    border: 1px solid var(--sep);
    border-radius: 980px;
    background: var(--card);
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
}
#create .frkinds .mkpill.segmented__item--on { background: var(--text); border-color: var(--text); color: var(--bg); }
/* Кнопки макета шапки — цветом шапки, без акцента приложения */
.tgprof__actions span, .tgprof__actions span:first-child { color: inherit !important; }
/* Лента рамок: листается пальцем (pan-x), тянется мышью, края растворяются */
.frstrip {
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
}
.frstrip--drag { cursor: grabbing; scroll-snap-type: none; }
.frstrip .frtile { scroll-snap-align: start; }
.frtile img { -webkit-user-drag: none; pointer-events: none; }
/* «429 шаблонов» — только в разделе Stickers */
#create[data-mode]:not([data-mode="stickers"]) .crhead .mkhead__count { display: none; }

/* ==========================================================================
   Раздел «Carve»: стенка из сторис (carve.js)
   ========================================================================== */
.cvviews { margin: 0 0 14px; }
#create .cvviews .mkpill {
    flex: none;
    padding: 9px 16px;
    border: 1px solid var(--sep);
    border-radius: 980px;
    background: var(--card);
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
}
#create .cvviews .mkpill.segmented__item--on { background: var(--text); border-color: var(--text); color: var(--bg); }

/* Телефон: один размер для обоих видов — экран не прыгает.
   Корпус в духе iPhone: титановая рамка (несколько колец тенями), чёрная
   рамка экрана, кнопки по бокам, Dynamic Island, строка статуса и
   полоска «домой». Без градиентов — только плоские слои. */
.cvphone {
    position: relative;
    width: min(calc(100% - 12px), 258px);
    aspect-ratio: 9 / 19.2;
    margin: 6px auto 0;
    border-radius: 48px;
    background: #000;
    box-shadow:
        0 0 0 2px #2c2c2e,          /* грань рамки */
        0 0 0 4.5px #8e8e93,        /* титан */
        0 0 0 5.5px #3a3a3c,        /* внешняя кромка */
        0 26px 60px rgba(0, 0, 0, 0.35),
        0 8px 18px rgba(0, 0, 0, 0.18);
}
body.lite .cvphone { box-shadow: 0 0 0 2px #2c2c2e, 0 0 0 4.5px #c7c7cc, 0 0 0 5.5px #aeaeb2, 0 26px 60px rgba(0, 0, 0, 0.22), 0 8px 18px rgba(0, 0, 0, 0.12); }
.cvphone__btn {
    position: absolute;
    width: 4px;
    border-radius: 2px;
    background: #8e8e93;
}
body.lite .cvphone__btn { background: #aeaeb2; }
.cvphone__btn--action  { left: -9px; top: 17%; height: 5.5%; }
.cvphone__btn--volup   { left: -9px; top: 26%; height: 10%; }
.cvphone__btn--voldown { left: -9px; top: 38%; height: 10%; }
.cvphone__btn--power   { right: -9px; top: 29%; height: 15%; }
.cvscreen {
    position: absolute;
    inset: 9px;
    border-radius: 40px;
    overflow: hidden;
    background: #0e0f12;
    color: #fff;
}
.cvphone__island {
    position: absolute;
    z-index: 3;
    top: 19px;
    left: 50%;
    width: 31%;
    height: 24px;
    margin-left: -15.5%;
    border-radius: 14px;
    background: #000;
    pointer-events: none;
}
.cvphone__island::after {
    content: "";
    position: absolute;
    right: 9px; top: 7px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #14161c;
    box-shadow: inset 0 0 0 2.5px #0b0c10;
}
.cvphone__status {
    position: absolute;
    z-index: 2;
    top: 9px; left: 9px; right: 9px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 24px 0 30px;
    color: #fff;
    pointer-events: none;
}
.cvphone__status b { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; font-family: -apple-system, "SF Pro Text", var(--font-body, system-ui); }
.cvphone__icons { display: flex; align-items: center; gap: 5px; }
.cvphone__icons svg { height: 10px; width: auto; fill: currentColor; }
.cvphone__battery {
    position: relative;
    width: 22px; height: 11px;
    border-radius: 3.5px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    padding: 1.5px;
}
.cvphone__battery::after {
    content: "";
    position: absolute;
    right: -3.5px; top: 3px;
    width: 1.5px; height: 4px;
    border-radius: 0 1px 1px 0;
    background: rgba(255, 255, 255, 0.45);
}
.cvphone__battery i { display: block; width: 78%; height: 100%; border-radius: 2px; background: #fff; }
.cvphone__home {
    position: absolute;
    z-index: 2;
    bottom: 16px;
    left: 50%;
    width: 36%;
    height: 4.5px;
    margin-left: -18%;
    border-radius: 3px;
    background: #fff;
    opacity: 0.85;
    pointer-events: none;
}
.cvscreen[hidden], .cvwarn[hidden] { display: none !important; }

/* Экран профиля Telegram */
.cvprof { overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.cvprof::-webkit-scrollbar { display: none; }
.cvprof__nav {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    padding: 50px 14px 6px;
    background: #0e0f12;
    font-size: 15px; font-weight: 700;
}
.cvprof__nav svg { width: 22px; height: 22px; fill: none; stroke: #5eb5f7; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cvprof__nav svg:last-child { fill: #5eb5f7; stroke: none; }
.cvprof__head { display: flex; flex-direction: column; align-items: center; padding: 4px 12px 12px; text-align: center; }
.cvprof__ava {
    display: grid; place-items: center;
    flex: none;
    width: 64px; height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: #3a3c44;
    color: #fff;
    font-weight: 800;
    font-size: 24px;
}
.cvprof__ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cvprof__head b { margin-top: 8px; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvprof__head small { font-size: 12px; opacity: 0.55; }
.cvprof__tabs {
    position: sticky; top: 78px; z-index: 1;
    display: flex; justify-content: center; gap: 18px;
    background: #0e0f12;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px; font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
}
.cvprof__tabs span { padding: 8px 0 7px; }
.cvprof__tabs .cvprof__tab--on { color: #5eb5f7; box-shadow: inset 0 -2px 0 #5eb5f7; }
.cvgrid { padding-bottom: 34px; }
.cvgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5px;
    padding-top: 1.5px;
}
.cvcell {
    position: relative;
    display: block;
    min-width: 0;
    aspect-ratio: 4 / 5;
    padding: 0;
    border: 0;
    background: #1b1d22;
    cursor: pointer;
    overflow: hidden;
}
.cvcell canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cvcell i {
    position: absolute;
    left: 4px; bottom: 4px;
    min-width: 15px; height: 15px;
    padding: 0 4px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-style: normal;
    font-size: 9px;
    font-weight: 800;
    line-height: 15px;
    text-align: center;
}
.cvcell--old { cursor: default; background: #16181c; }

/* Открытая история */
/* Кадр 9:16 — карточкой под строкой статуса, как в Telegram на
   вытянутых iPhone; снизу под ним — строка ответа. */
.cvstory { background: #000; }
.cvstory canvas { position: absolute; top: 44px; left: 0; width: 100%; height: auto; aspect-ratio: 9 / 16; display: block; border-radius: 14px; }
.cvstory__bars { position: absolute; top: 50px; left: 12px; right: 12px; display: flex; gap: 3px; }
.cvstory__bars i { position: relative; flex: 1; height: 2.5px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.35); }
.cvstory__bars .cvbar--done { background: #fff; }
.cvstory__bars .cvbar--now::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: cv-bar 3s linear forwards; }
@keyframes cv-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cvstory__head { position: absolute; top: 60px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.cvstory__head .cvprof__ava { width: 28px; height: 28px; font-size: 12px; }
.cvstory__head small { opacity: 0.75; }
.cvstory__tap { position: absolute; top: 0; bottom: 80px; width: 40%; border: 0; background: transparent; cursor: pointer; }
.cvstory__tap--prev { left: 0; }
.cvstory__tap--next { right: 0; }
.cvstory__reply { position: absolute; left: 12px; right: 12px; bottom: 20px; display: flex; align-items: center; gap: 10px; }
.cvstory__reply span { flex: 1; padding: 8px 14px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.4); font-size: 12px; opacity: 0.85; }
.cvstory__reply svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; }

.cvhint { display: block; margin: 10px 0 14px; text-align: center; }

/* Настройки: подпись слева, сегменты справа — в одну строку */
.cvrow { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.cvrow__label { flex: none; width: 70px; font-size: 13px; font-weight: 700; color: var(--hint); }
.cvseg {
    flex: 1;
    min-width: 0;
    display: flex;
    padding: 3px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--text) 8%, transparent);
}
.cvseg__item {
    flex: 1;
    min-width: 0;
    padding: 8px 2px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.cvseg__item--on { background: var(--text); color: var(--bg); }
#cvParts .cvseg__item { font-family: var(--font-display); font-size: 14px; font-weight: 800; }
.cvwarn { margin: -2px 0 12px; font-size: 13px; color: #ff9f0a; font-weight: 600; }
/* Ряд видов Carve листается: края растворяются, мышью тянется */
#create .cvviews {
    margin: 0 -16px 14px;
    padding: 2px 16px;
    overscroll-behavior-x: contain;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
}
#create .cvviews.frstrip--drag { cursor: grabbing; }
#create .cvviews .mkpill { white-space: nowrap; }

/* ==========================================================================
   Раздел «Avatars»: конструктор аватарок (avatars.js + avatar_engine.js)
   ========================================================================== */
.avpick[hidden], .avrobot[hidden], .aveditor[hidden] { display: none !important; }

/* Два пути: роботом / самому */
.avpick { display: flex; flex-direction: column; gap: 12px; }
#create .card.avway {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 18px 16px;
    border: 0;
    text-align: left;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
#create .card.avway:active { transform: scale(0.98); }
.avway__ic {
    display: grid; place-items: center;
    flex: none;
    width: 58px; height: 58px;
    border-radius: 18px;
    background: var(--text);
    color: var(--bg);
}
.avway__ic--ghost { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); }
.avway__ic svg, .avway__go svg, .avstage__shape svg, .avtile__art--icon svg {
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.avway__ic svg { width: 30px; height: 30px; }
.avway__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.avway__txt b { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }
.avway__txt small { font-size: 13px; line-height: 1.4; color: var(--hint); }
.avway__txt .sec-hand { margin: 0; }
.avway__go { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--text) 8%, transparent); }
.avway__go svg { width: 18px; height: 18px; }
.avway__soon {
    position: absolute;
    top: 12px; right: 12px;
    padding: 3px 9px;
    border-radius: 980px;
    background: color-mix(in srgb, var(--text) 9%, transparent);
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    color: var(--hint);
}
#create .card.avway:not(.avway--robot) { opacity: 0.75; }
.avway--shake { animation: av-shake 0.45s ease; }
@keyframes av-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* Шаг робота: надпись, подпись, фото */
#create .card.avsetup { display: flex; flex-direction: column; gap: 10px; padding: 14px; margin-bottom: 12px; }
.avfield { display: flex; align-items: center; gap: 12px; }
.avfield span { flex: none; width: 70px; font-size: 13px; font-weight: 700; color: var(--hint); }
.avfield input, .avinput {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    border: 0;
    border-radius: 14px;
    background: color-mix(in srgb, var(--text) 7%, transparent);
    color: var(--text);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    outline: none;
}
.avfield input:focus, .avinput:focus { box-shadow: 0 0 0 2px var(--text); }
.avsetup__photo { margin: 0; }
.avsetup .sheet__status:empty { display: none; }

/* Варианты робота */
.avvariants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 14px; }
.avvar {
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    background: #0b0b0d;
    cursor: pointer;
    aspect-ratio: 1;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
.avvar:active { transform: scale(0.96); }
.avvar canvas { width: 100%; height: 100%; display: block; transition: opacity 0.3s ease; }
.avvar--loading canvas { opacity: 0; }
.avvar--loading::after {
    content: "";
    position: absolute; inset: 42%;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    animation: fr-spin 0.8s linear infinite;
}
.avvar__name {
    position: absolute;
    left: 8px; bottom: 8px;
    padding: 4px 10px;
    border-radius: 980px;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}
.avbtns { display: flex; gap: 10px; margin: 0 0 12px; }
.avbtns .pill { flex: 1; }
.avbtns .frmake { flex: 2; }

/* Редактор: сцена, превью в списке чатов, разделы */
.avstage {
    position: relative;
    width: min(100%, 360px);
    aspect-ratio: 1;
    margin: 0 auto 12px;
    border-radius: 26px;
    overflow: hidden;
    background: #0b0b0d;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
    transition: border-radius 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.avstage--round { border-radius: 50%; }
.avstage canvas { width: 100%; height: 100%; display: block; transition: opacity 0.15s ease; }
.avstage--busy canvas { opacity: 0.92; }
.avstage__shape {
    position: absolute;
    right: 10px; bottom: 10px;
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
}
.avstage--round .avstage__shape { right: 18%; bottom: 6%; }
.avstage__shape svg { width: 18px; height: 18px; }
.avchat {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 18px;
    background: var(--card);
    box-shadow: 0 1px 0 var(--sep);
}
.avchat__ava { flex: none; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; background: #0b0b0d; }
.avchat__ava canvas { width: 100%; height: 100%; display: block; }
.avchat__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.avchat__txt b { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avchat__txt small { font-size: 13px; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avchat time { flex: none; align-self: flex-start; font-size: 12px; color: var(--hint); margin-top: 3px; }

.avtabs { margin: 0 -16px 12px !important; padding: 2px 16px; }
#create .avtabs .mkpill {
    flex: none;
    padding: 9px 16px;
    border: 1px solid var(--sep);
    border-radius: 980px;
    background: var(--card);
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
    white-space: nowrap;
}
#create .avtabs .mkpill.segmented__item--on { background: var(--text); border-color: var(--text); color: var(--bg); }
.avpanel { min-height: 120px; margin-bottom: 12px; }
.avlabel { display: block; margin: 12px 0 6px 4px; }

/* Плитки выбора */
.avgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.avstrip { margin-bottom: 4px; }
.avtile {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    padding: 4px 4px 7px;
    border: 0;
    border-radius: 18px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    box-shadow: 0 1px 0 var(--sep);
    transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
.avstrip .avtile { flex: none; width: 96px; }
.avtile:active { transform: scale(0.95); }
.avtile__art {
    display: grid; place-items: center;
    aspect-ratio: 1;
    border-radius: 14px;
    overflow: hidden;
    background: #0b0b0d;
}
.avtile__art canvas, .avtile__art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.avtile--char .avtile__art { background: color-mix(in srgb, var(--text) 8%, transparent); }
.avtile--char .avtile__art img { object-fit: contain; padding: 6px; }
.avtile--ov .avtile__art img { object-fit: cover; }
.avtile__art--icon { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.avtile__art--icon svg { width: 30%; height: 30%; }
.avtile__label { font-size: 11px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.avtile--on { box-shadow: 0 0 0 2.5px var(--text); }
.avnote { margin: 10px 4px 4px; font-size: 13px; color: var(--hint); line-height: 1.4; }
.avinputs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.avinput--sub { font-size: 14px; }

/* Шрифты: образец надписи этим шрифтом */
.avfont {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 120px;
    height: 74px;
    padding: 6px;
    border: 0;
    border-radius: 16px;
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    box-shadow: 0 1px 0 var(--sep);
}
.avfont b { max-width: 100%; font-size: 20px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avfont small { font-size: 10px; color: var(--hint); font-family: var(--font-body, Onest), sans-serif; }
.avfont--on { box-shadow: 0 0 0 2.5px var(--text); }
.avfont:disabled { opacity: 0.35; cursor: not-allowed; }

/* Эффекты-переключатели */
.avchips { display: flex; flex-wrap: wrap; gap: 8px; }
.avchip {
    padding: 9px 14px;
    border: 1px solid var(--sep);
    border-radius: 980px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.avchip--on { background: var(--text); border-color: var(--text); color: var(--bg); }

/* Палитры */
.avpals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.avpal {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 0;
    border-radius: 16px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 0 var(--sep);
}
.avpal__dot { flex: none; width: 30px; height: 30px; border-radius: 50%; }
.avpal--on { box-shadow: 0 0 0 2.5px var(--text); }
.avrange { flex: 1; accent-color: var(--text); }

/* ==========================================================================
   Уровни (levels.js)
   ========================================================================== */
#profile .card.lvcard {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 14px 16px; border: 0;
    text-align: left; color: var(--text); font: inherit; cursor: pointer;
}
.lvcard__badge {
    flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 18px; background: var(--text); color: var(--bg);
}
.lvcard__badge small { font-size: 10px; font-weight: 700; opacity: .7; line-height: 1; }
.lvcard__badge b { font-family: var(--font-display); font-size: 24px; font-weight: 900; line-height: 1; }
.lvcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lvcard__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lvcard__top b { font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.lvcard__top i { font-family: Caveat, cursive; font-style: normal; font-weight: 700; font-size: 18px; color: var(--hint); }
.lvcard__body small { font-size: 13px; color: var(--hint); }
.lvcard__track { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.lvcard__track i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--text); transition: width .6s cubic-bezier(.2,.9,.3,1); }
.lvcard__xp { font-size: 11px !important; }
.lvcard--warn .lvcard__body small:first-of-type { color: #ff9f0a; font-weight: 700; }

.lvsheet__head { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 4px 4px 10px; }
.lvsheet__head b { font-family: var(--font-display); font-size: 24px; font-weight: 900; letter-spacing: -.04em; }
.lvsheet__close { position: absolute; right: 0; top: 0; width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); font-size: 15px; cursor: pointer; }
.lvsheet__body { display: flex; flex-direction: column; gap: 10px; max-height: 70vh; overflow-y: auto; padding-bottom: 12px; }
.lvtask {
    display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 4px 12px;
    padding: 12px; border-radius: 18px; background: color-mix(in srgb, var(--text) 5%, transparent);
}
.lvtask__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--card); color: var(--text); }
.lvtask__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lvtask__body { display: flex; flex-direction: column; min-width: 0; }
.lvtask__body b { font-size: 15px; font-weight: 800; }
.lvtask__body small { font-size: 12px; color: var(--hint); line-height: 1.35; }
.lvtask__xp { font-style: normal; font-weight: 800; font-size: 12px; white-space: nowrap; padding: 4px 9px; border-radius: 980px; background: var(--card); }
.lvtask--done .lvtask__ic { background: var(--text); color: var(--bg); }
.lvtask > .lvrow, .lvtask > .lvsponsors { grid-column: 1 / -1; }
.lvrow { display: flex; gap: 8px; }
.lvrow .pill { flex: 1; }
.lvsponsors { display: flex; flex-direction: column; gap: 6px; }
.lvsp { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 0; border-radius: 14px;
    background: var(--card); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.lvsp span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lvsp i { flex: none; font-style: normal; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 980px; background: var(--text); color: var(--bg); }
.lvsp--on i { background: transparent; color: var(--hint); }
.lvtable { display: flex; flex-direction: column; gap: 4px; }
.lvtable__row { display: grid; grid-template-columns: 1fr auto 70px; gap: 10px; align-items: baseline; padding: 9px 12px; border-radius: 12px; font-size: 13px; }
.lvtable__row b { font-weight: 800; }
.lvtable__row small { text-align: right; color: var(--hint); }
.lvtable__row--on { background: var(--text); color: var(--bg); }
.lvtable__row--on small { color: color-mix(in srgb, var(--bg) 65%, transparent); }
.lvnote { margin: 4px; font-size: 12px; color: var(--hint); line-height: 1.4; }

/* Лист уровней — вкладки вместо длинной ленты */
.lvtabs { margin-bottom: 12px; }
.lvpanel { display: flex; flex-direction: column; gap: 10px; min-height: 300px; }
.lvsheet__body { max-height: none; overflow: visible; }
.lvchips { display: flex; flex-wrap: wrap; gap: 6px; }
.lvchip { padding: 7px 12px; border-radius: 980px; background: color-mix(in srgb, var(--text) 7%, transparent); font-size: 13px; font-weight: 700; color: var(--hint); }
.lvchip--on { background: var(--text); color: var(--bg); }
.lvbig { text-align: center; font-family: var(--font-display); font-size: 64px; font-weight: 900; letter-spacing: -.05em; line-height: 1; margin-top: 8px; }
.lvnote--center { text-align: center; margin-top: -4px; }
.lvtask__btn { grid-column: 3; grid-row: 2; justify-self: end; border: 0; padding: 6px 12px; border-radius: 980px; background: var(--text); color: var(--bg); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }

/* Фирменный кот вместо сливы — логотип и главный герой обучения */
.brand__mark { background: #0b0b0d !important; }
.brand__mark img { width: 86%; height: 86%; margin-top: 10%; display: block; }
.ob-cat { display: grid; place-items: end center; }
.ob-cat img { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 24px rgba(0,0,0,.35)); }

/* Кот-логотип: настоящий кот из аватарок RHINO (brand/cat.png) */
.brand__mark img { width: 92% !important; height: auto !important; margin-top: 30% !important; }

/* ==========================================================================
   RHINO Pass (pass.js)
   ========================================================================== */
#profile .card.pscard {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 14px 16px; border: 0;
    text-align: left; color: var(--text); font: inherit; cursor: pointer;
}
.pscard__badge { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 18px; background: #c4a46a; color: #1a1408; }
.pscard__badge small { font-size: 9px; font-weight: 800; line-height: 1; opacity: .75; }
.pscard__badge b { font-family: var(--font-display); font-size: 24px; font-weight: 900; line-height: 1; }
.pscard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pscard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pscard__top b { font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.pscard__top em { font-style: normal; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 980px; background: var(--text); color: var(--bg); }
.pscard__top em[hidden] { display: none; }
.pscard__body small { font-size: 13px; color: var(--hint); }
#passBar { background: #c4a46a; }

.pssheet .sheet__panel { max-height: 92vh; }
.pshead { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 4px 10px; text-align: center; }
.pshead .lvsheet__close { position: absolute; right: 0; top: 0; }
.pshead__title { font-family: var(--font-display); font-size: 28px; font-weight: 900; letter-spacing: -.04em; }
.pshead__season { font-size: 13px; font-weight: 700; color: var(--hint); }
.pshead__row { display: flex; align-items: center; gap: 12px; width: 100%; margin: 8px 0 6px; }
.pshead__tier { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 60px; height: 60px; border-radius: 50%; background: var(--text); color: var(--bg); }
.pshead__tier small { font-size: 9px; font-weight: 800; opacity: .7; line-height: 1; }
.pshead__tier b { font-family: var(--font-display); font-size: 24px; font-weight: 900; line-height: 1; }
.pshead__prog { flex: 1; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.pshead__prog small { font-size: 12px; color: var(--hint); }
#psBar { background: var(--text); }
.psbuy { background: #c4a46a !important; color: #1a1408 !important; font-weight: 800; }
.psbuy[hidden], .pspremium[hidden] { display: none !important; }
.pspremium { font-size: 13px; font-weight: 800; color: #c4a46a; }
.psbag { font-size: 12px; color: var(--hint); min-height: 14px; }
.pslegend { display: flex; justify-content: space-between; padding: 0 6px 6px; font-size: 11px; font-weight: 800; color: var(--hint); text-transform: uppercase; letter-spacing: .08em; }
.pslegend span:last-child { color: #c4a46a; }

.pstrack { display: flex; gap: 8px; margin: 0 -16px; padding: 4px 16px 10px; overflow-x: auto; }
.pscol { flex: none; width: 96px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; scroll-snap-align: center; }
.pscell {
    position: relative; height: 112px; border-radius: 18px; padding: 10px 6px 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: color-mix(in srgb, var(--text) 6%, transparent); text-align: center;
}
.pscell--paid { background: color-mix(in srgb, #c4a46a 18%, var(--card)); }
.pscell--empty { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--text) 10%, transparent); }
.pscell__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--card); color: var(--text); overflow: hidden; }
.pscell__ic img { width: 30px; height: 30px; object-fit: contain; }
.pscell--style .pscell__ic { background: #0b0b0d; }
.pscell--style .pscell__ic img { width: 42px; height: auto; }
.pscell__ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pscell__txt { font-size: 12px; font-weight: 800; line-height: 1.15; }
.pscell__get { position: absolute; left: 6px; right: 6px; bottom: -10px; padding: 6px 0; border: 0; border-radius: 980px;
    background: var(--text); color: var(--bg); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
    box-shadow: 0 6px 14px rgba(0,0,0,.25); }
.pscell--paid .pscell__get { background: #c4a46a; color: #1a1408; }
.pscell__done { position: absolute; top: 6px; right: 8px; font-style: normal; font-weight: 900; color: var(--hint); }
.pscell__lock { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; color: var(--hint); }
.pscell__lock svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
.pscell--claimed { opacity: .5; }
.pscell--locked .pscell__ic, .pscell--locked .pscell__txt { opacity: .55; }
.pscell--ready { box-shadow: 0 0 0 2.5px var(--text); animation: ps-pulse 1.6s ease-in-out infinite; }
.pscell--paid.pscell--ready { box-shadow: 0 0 0 2.5px #c4a46a; }
@keyframes ps-pulse { 50% { transform: translateY(-2px); } }
.psnode { position: relative; height: 30px; display: grid; place-items: center; }
.psnode::before { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 4px; margin-top: -2px;
    background: color-mix(in srgb, var(--text) 12%, transparent); }
.pscol--reached .psnode::before { background: var(--text); }
.psnode span { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--card); color: var(--hint); font-size: 12px; font-weight: 800; box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 12%, transparent); }
.pscol--reached .psnode span { background: var(--text); color: var(--bg); box-shadow: none; }
.pscol--next .psnode span { box-shadow: 0 0 0 2.5px var(--text); color: var(--text); }

/* Эксклюзивные стили пасса в Avatars */
.avtile--pass .avtile__label::before { content: "PASS · "; color: #c4a46a; font-weight: 900; }
.avtile--locked { position: relative; }
.avtile--locked .avtile__art { filter: grayscale(1) brightness(.45); }
.avtile--locked::after { content: "🔒"; position: absolute; top: 8px; right: 10px; font-size: 14px; }
.avtile--locked .avtile__label::before { content: "PASS · "; color: #c4a46a; font-weight: 900; }

/* ==========================================================================
   «Сделать самому» — ручной редактор (avatar_editor.js)
   ========================================================================== */
.aemanual[hidden] { display: none !important; }
.aestage { width: min(100%, 420px); aspect-ratio: 1; margin: 0 auto 8px; border-radius: 22px; overflow: hidden;
    background: #050505; box-shadow: 0 16px 40px rgba(0,0,0,.25); touch-action: none; }
.aestage canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.aestage--brush canvas { cursor: crosshair; }
.aebar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.aebar__btn { width: 38px; height: 38px; border: 0; border-radius: 12px; background: var(--card); color: var(--text);
    font-size: 18px; font-weight: 800; cursor: pointer; box-shadow: 0 1px 0 var(--sep); }
.aebar__btn:disabled { opacity: .35; }
.aebar__hint { flex: 1; text-align: center; font-family: Caveat, cursive; font-size: 17px; color: var(--hint); }
.aeseg { margin-bottom: 10px; }
.aerow { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.aerow .pill { flex: 1; }
.aelayers { display: flex; flex-direction: column; gap: 6px; }
.aelayer { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 14px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.aelayer--on { box-shadow: 0 0 0 2px var(--text); }
.aelayer__name { flex: 1; min-width: 0; text-align: left; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 700; font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; padding: 6px; }
.aelayer__btn { width: 32px; height: 32px; border: 0; border-radius: 10px; background: var(--card); color: var(--text); cursor: pointer; font-size: 13px; }
.aecolor { width: 38px; height: 38px; border: 0; border-radius: 50%; padding: 0; background: none; cursor: pointer; }
.aeprops__name { display: block; margin: 0 4px 8px; font-size: 15px; font-weight: 800; }

/* ==========================================================================
   RHINO Pass — экран в духе Brawl Pass (ярко, по-игровому).
   Это единственное место, где разрешены цветные градиенты: так выглядит
   сам Brawl Pass, и плоская версия читалась как «странная».
   ========================================================================== */
.pssheet .sheet__panel.bp {
    max-height: 96vh; height: 96vh; padding: 14px 14px 10px; overflow-y: auto;
    color: #fff; border-radius: 26px 26px 0 0;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 18px, rgba(255,255,255,0) 18px 36px),
        radial-gradient(120% 60% at 50% 0%, #4f8bff 0%, rgba(79,139,255,0) 60%),
        linear-gradient(180deg, #2b5cff 0%, #1835b8 48%, #0e1f72 100%);
}
.bp, .bp * { font-family: "Lilita One", var(--font-display), sans-serif; }
.bp__close { position: absolute; right: 14px; top: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 12px;
    border: 3px solid #0b1033; background: #ff4d4d; color: #fff; font-size: 16px; cursor: pointer; box-shadow: 0 4px 0 #0b1033; }
.bp__head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 4px; text-align: center; }
.bp__season { padding: 4px 14px; border-radius: 980px; background: #0b1033; color: #8fd3ff; font-size: 14px; letter-spacing: .04em; }
.bp__title {
    font-size: 44px; line-height: .92; letter-spacing: .01em; color: #ffd23f;
    -webkit-text-stroke: 2.5px #0b1033; paint-order: stroke fill;
    text-shadow: 0 5px 0 #0b1033, 0 10px 24px rgba(0,0,0,.35);
}
.bp__timer { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 980px;
    background: rgba(11,16,51,.55); font-size: 15px; }
.bp__timer i { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid #fff; position: relative; }
.bp__timer i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 2px; height: 5px; background: #fff; }

.bp__prog { display: flex; align-items: center; gap: 10px; margin: 16px 2px 12px; }
.bp__token {
    flex: none; display: grid; place-items: center; width: 62px; height: 62px;
    clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
    background: #0b1033;
}
.bp__token b {
    display: grid; place-items: center; width: 54px; height: 54px;
    clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
    background: linear-gradient(180deg, #ffe680, #ffb800); color: #3b2500; font-size: 26px;
}
.bp__bar { position: relative; flex: 1; height: 26px; border-radius: 13px; background: #0b1033; padding: 3px; }
.bp__bar i { display: block; height: 100%; border-radius: 10px; background: linear-gradient(180deg, #ffe680 0%, #ffcf33 55%, #e9a400 100%);
    box-shadow: inset 0 3px 0 rgba(255,255,255,.45); transition: width .6s cubic-bezier(.2,.9,.3,1); min-width: 20px; }
.bp__bar small { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: #fff;
    -webkit-text-stroke: 1px #0b1033; paint-order: stroke fill; }

.bp__buy {
    display: flex; flex-direction: column; align-items: center; width: 100%; padding: 10px 0 9px; border-radius: 18px;
    border: 3px solid #0b1033; background: linear-gradient(180deg, #ffe066 0%, #ffc61a 60%, #f0a800 100%);
    color: #3b2500; cursor: pointer; box-shadow: 0 6px 0 #0b1033, inset 0 3px 0 rgba(255,255,255,.55);
    transition: transform .1s ease;
}
.bp__buy:active { transform: translateY(4px); box-shadow: 0 2px 0 #0b1033; }
.bp__buy span { font-size: 22px; letter-spacing: .02em; }
.bp__buy small { font-size: 13px; opacity: .8; }
.bp__buy[hidden], .bp__premium[hidden] { display: none !important; }
.bp__premium { display: block; text-align: center; padding: 8px; border-radius: 14px; background: #0b1033; color: #ffd23f; font-size: 17px; }
.bp__bag { display: block; text-align: center; margin: 10px 0 4px; font-size: 13px; color: #cfe2ff; font-family: Onest, sans-serif; font-weight: 700; min-height: 16px; }

.bp__track { display: flex; gap: 10px; margin: 6px -14px 0; padding: 10px 14px 18px; overflow-x: auto; }
.pscol { flex: none; width: 104px; display: flex; flex-direction: column; gap: 10px; scroll-snap-align: center; }
.pscol--labels { width: 52px; position: sticky; left: -14px; z-index: 3; }
.bp__lab { height: 124px; display: grid; place-items: center; border-radius: 14px; border: 3px solid #0b1033; font-size: 15px;
    writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .08em; box-shadow: 0 4px 0 #0b1033; }
.bp__lab--free { background: #2fb4ff; color: #fff; -webkit-text-stroke: 1px #0b1033; paint-order: stroke fill; }
.bp__lab--pass { background: linear-gradient(180deg, #ffe066, #f0a800); color: #3b2500; }
.pscol--labels .psnode { visibility: hidden; }

.bp .pscell {
    position: relative; height: 124px; padding: 10px 6px 12px; border-radius: 16px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border: 3px solid #0b1033; box-shadow: 0 5px 0 #0b1033; color: #fff; overflow: visible;
}
.bp .pscell--empty { background: rgba(11,16,51,.35); border-style: dashed; border-color: rgba(11,16,51,.6); box-shadow: none; }
.bp .pscell--common { background: linear-gradient(180deg, #5ee08f 0%, #22b35e 100%); }
.bp .pscell--rare   { background: linear-gradient(180deg, #59d4ff 0%, #1f8fe6 100%); }
.bp .pscell--epic   { background: linear-gradient(180deg, #c58bff 0%, #8b3dff 100%); }
.bp .pscell--legend { background: linear-gradient(180deg, #ffe680 0%, #ffb000 55%, #ff7a00 100%); }
.bp .pscell--legend::before { content: ""; position: absolute; inset: -3px; border-radius: 16px; pointer-events: none;
    box-shadow: 0 0 18px 4px rgba(255,214,64,.65); animation: bp-glow 2.2s ease-in-out infinite; }
@keyframes bp-glow { 50% { box-shadow: 0 0 28px 8px rgba(255,214,64,.9); } }
.bp .pscell--paid { box-shadow: 0 5px 0 #0b1033, inset 0 0 0 3px rgba(255,214,64,.85); }
.bp .pscell__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(11,16,51,.28); color: #fff; }
.bp .pscell__ic img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(11,16,51,.6)); }
.bp .pscell--common .pscell__ic img { filter: invert(1) drop-shadow(0 3px 0 rgba(11,16,51,.6)); }
.bp .pscell--legend .pscell__ic { background: #0b0b0d; width: 64px; }
.bp .pscell--legend .pscell__ic img { width: 60px; height: auto; filter: none; }
.bp .pscell__ic svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 2px 0 rgba(11,16,51,.6)); }
.bp .pscell__txt { font-size: 16px; line-height: 1; color: #fff; -webkit-text-stroke: 1.5px #0b1033; paint-order: stroke fill;
    text-shadow: 0 2px 0 #0b1033; }
.bp .pscell__get {
    position: absolute; left: 4px; right: 4px; bottom: -14px; z-index: 2; padding: 6px 0; border-radius: 12px;
    border: 3px solid #0b1033; background: linear-gradient(180deg, #7dff6a, #2ecc40); color: #fff; font-size: 14px;
    -webkit-text-stroke: 1px #0b1033; paint-order: stroke fill; box-shadow: 0 3px 0 #0b1033; cursor: pointer;
    animation: bp-bounce 1.1s ease-in-out infinite;
}
@keyframes bp-bounce { 50% { transform: translateY(-3px); } }
.bp .pscell__done { position: absolute; top: -10px; right: -8px; width: 28px; height: 28px; display: grid; place-items: center;
    border-radius: 50%; border: 3px solid #0b1033; background: #2ecc40; color: #fff; font-style: normal; font-size: 15px; }
.bp .pscell--claimed { filter: saturate(.35) brightness(.8); }
.bp .pscell--locked::after { content: ""; position: absolute; inset: 0; border-radius: 13px; background: rgba(11,16,51,.55); }
.bp .pscell__lock { position: absolute; z-index: 1; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; color: #fff;
    filter: drop-shadow(0 3px 0 #0b1033); }
.bp .pscell__lock svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2.4; }
.bp .pscell--ready { animation: none; box-shadow: 0 5px 0 #0b1033, 0 0 0 3px #fff; }
.bp .pscell--locked .pscell__ic, .bp .pscell--locked .pscell__txt { opacity: 1; }

.bp .psnode { position: relative; height: 34px; display: grid; place-items: center; }
.bp .psnode::before { content: ""; position: absolute; left: -10px; right: -10px; top: 50%; height: 10px; margin-top: -5px;
    background: #0b1033; }
.bp .pscol--reached .psnode::before { background: linear-gradient(180deg, #ffe680, #ffb800); box-shadow: 0 0 0 2px #0b1033; }
.bp .psnode span { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid #0b1033; background: #3a4ea8; color: #fff; font-size: 15px; box-shadow: none; }
.bp .pscol--reached .psnode span { background: #ffd23f; color: #3b2500; }
.bp .pscol--next .psnode span { background: #fff; color: #0b1033; animation: bp-bounce 1.1s ease-in-out infinite; }
.bp__status { color: #fff; text-align: center; font-family: Onest, sans-serif; font-weight: 700; }

/* Pass: кнопка «Забрать» не наезжает на подпись награды */
.bp .pscell { height: 136px; justify-content: flex-start; padding: 12px 6px 26px; }
.bp__lab { height: 136px; }
.bp .pscell__get { bottom: -12px; }

/* ==========================================================================
   RHINO Pass — в стиле приложения (заменяет игровую версию .bp):
   чёрная шапка как у кошелька, кот, один акцент — шампань у платного.
   ========================================================================== */
.pssheet .sheet__panel.psx { max-height: 94vh; overflow-y: auto; padding-bottom: 12px; }
.psx__close { position: absolute; right: 14px; top: 14px; z-index: 3; }
.psx__hero {
    position: relative; overflow: hidden;
    margin: 4px 0 12px; padding: 22px 18px 18px; border-radius: 26px;
    background: #0b0b0d; color: #fff;
    box-shadow: 0 16px 40px rgba(0,0,0,.22);
}
.psx__cat { position: absolute; right: -18px; top: -6px; width: 150px; opacity: .95; pointer-events: none; }
.psx__hand { position: relative; display: block; font-family: Caveat, cursive; font-weight: 700; font-size: 20px; color: rgba(255,255,255,.6); }
.psx__title { position: relative; display: block; margin-top: 2px; font-family: var(--font-display); font-size: 30px; font-weight: 900; letter-spacing: -.045em; line-height: 1; }
.psx__timer { position: relative; display: inline-block; margin-top: 10px; padding: 4px 11px; border-radius: 980px;
    background: rgba(255,255,255,.1); font-size: 12px; font-weight: 700; color: rgba(255,255,255,.75); }
.psx__prog { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.psx__tier { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 58px; height: 58px; border-radius: 18px; background: #fff; color: #0b0b0d; }
.psx__tier small { font-size: 9px; font-weight: 800; opacity: .6; line-height: 1; }
.psx__tier b { font-family: var(--font-display); font-size: 24px; font-weight: 900; line-height: 1; }
.psx__progbody { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.psx__bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
.psx__bar i { display: block; height: 100%; border-radius: 4px; background: #fff; transition: width .6s cubic-bezier(.2,.9,.3,1); }
.psx__progbody small { font-size: 12px; color: rgba(255,255,255,.6); }
.psx__buy { background: #c4a46a !important; color: #1a1408 !important; font-weight: 800; }
.psx__buy[hidden], .psx__premium[hidden] { display: none !important; }
.psx__premium { display: block; text-align: center; padding: 10px; border-radius: 16px; font-size: 13px; font-weight: 800;
    color: #8a6d3b; background: color-mix(in srgb, #c4a46a 16%, var(--card)); }
.psx__bag { display: block; text-align: center; margin: 8px 0 2px; font-size: 12px; color: var(--hint); min-height: 15px; }
.psx__legend { display: flex; justify-content: space-between; padding: 4px 4px 6px; font-family: Caveat, cursive; font-size: 18px; font-weight: 700; color: var(--hint); }
.psx__legend span:last-child { color: #a8884f; }

.psx__track { display: flex; gap: 8px; margin: 0 -16px; padding: 4px 16px 18px; overflow-x: auto; }
.psx .pscol { flex: none; width: 100px; display: flex; flex-direction: column; gap: 8px; }
.psx .pscell {
    position: relative; height: 132px; padding: 14px 6px 24px; border-radius: 22px;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; text-align: center;
    background: var(--card); color: var(--text); box-shadow: 0 1px 0 var(--sep), 0 6px 16px rgba(0,0,0,.05);
}
.psx .pscell--paid { background: #0b0b0d; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(196,164,106,.55), 0 6px 16px rgba(0,0,0,.12); }
.psx .pscell--empty { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 8%, transparent); }
.psx .pscell__ic { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; overflow: hidden;
    background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.psx .pscell--paid .pscell__ic { background: rgba(255,255,255,.08); color: #fff; }
.psx .pscell__ic img { width: 34px; height: 34px; object-fit: contain; }
.psx .pscell--paid .pscell__ic img[src*="soloist"] { filter: invert(1); }
.psx .pscell__ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.psx .pscell--legend .pscell__ic { width: 76px; background: #0b0b0d; }
.psx .pscell--legend .pscell__ic img { width: 72px; height: auto; }
.psx .pscell--legend { box-shadow: inset 0 0 0 1.5px rgba(196,164,106,.75), 0 0 22px rgba(196,164,106,.35); }
.psx .pscell__txt { font-size: 13px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.psx .pscell__get { position: absolute; left: 8px; right: 8px; bottom: -12px; padding: 7px 0; border: 0; border-radius: 980px;
    background: var(--text); color: var(--bg); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 14px rgba(0,0,0,.2); }
.psx .pscell--paid .pscell__get { background: #c4a46a; color: #1a1408; }
.psx .pscell__done { position: absolute; top: 8px; right: 10px; font-style: normal; font-weight: 900; font-size: 13px; color: var(--hint); }
.psx .pscell__lock { position: absolute; top: 9px; right: 9px; width: 16px; height: 16px; color: rgba(255,255,255,.55); }
.psx .pscell__lock svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
.psx .pscell--claimed { opacity: .45; }
.psx .pscell--locked .pscell__ic, .psx .pscell--locked .pscell__txt { opacity: .6; }
.psx .pscell--ready { box-shadow: 0 0 0 2px var(--text), 0 8px 20px rgba(0,0,0,.12); }
.psx .pscell--paid.pscell--ready { box-shadow: 0 0 0 2px #c4a46a, 0 8px 20px rgba(0,0,0,.18); }
.psx .psnode { position: relative; height: 28px; display: grid; place-items: center; }
.psx .psnode::before { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 3px; margin-top: -1.5px;
    background: color-mix(in srgb, var(--text) 10%, transparent); }
.psx .pscol--reached .psnode::before { background: var(--text); }
.psx .psnode span { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--card); color: var(--hint); font-size: 12px; font-weight: 800; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--text) 12%, transparent); }
.psx .pscol--reached .psnode span { background: var(--text); color: var(--bg); box-shadow: none; }
.psx .pscol--next .psnode span { color: var(--text); box-shadow: 0 0 0 2px var(--text); }

/* Pass: крестик над шапкой, пустые ячейки — едва заметный пунктир */
.psx__close { top: 8px !important; right: 12px !important; }
.psx__hero { margin-top: 38px; }
.psx .pscell--empty { background: transparent !important; box-shadow: none !important; border: 1.5px dashed color-mix(in srgb, var(--text) 10%, transparent); }

/* Покупка уровня за Rpoint */
.lvbuy { margin-bottom: 2px; }

/* Стиль оформления — темы для всего набора */
.themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.theme { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 12px;
    border: 0; border-radius: 20px; background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text);
    font: inherit; cursor: pointer; text-align: center; }
.theme img { width: 96px; height: 96px; border-radius: 16px; background: #fff; object-fit: contain; }
.theme b { font-size: 15px; font-weight: 800; }
.theme small { font-size: 11px; color: var(--hint); }
.theme--on { box-shadow: 0 0 0 2.5px var(--text); }
.theme__lock { display: none; position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 980px;
    background: #c4a46a; color: #1a1408; font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.theme--locked .theme__lock { display: block; }
.theme--locked img { filter: grayscale(.6) brightness(.85); }
.theme__hint { margin: 10px 4px 0; font-size: 12px; color: var(--hint); text-align: center; }

/* Подсказка «со спонсорами бесплатно» на экране заказа */
.sponsorhint { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 16px;
    background: color-mix(in srgb, var(--text) 6%, transparent); font-size: 13px; font-weight: 600; }
.sponsorhint span { flex: 1; }
.sponsorhint.notenough--hidden { display: none; }
.sponsorhint .btn { min-height: 36px; padding: 0 14px; flex: none; background: var(--text); color: var(--bg); }

/* Запуск обновления: до него уровней и пасса не видно */
#levelCard[hidden], #passCard[hidden] { display: none !important; }
/* Распродажа x2 в пополнении */
.salebar { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; padding: 12px 16px; border-radius: 18px;
    background: #0b0b0d; color: #fff; }
.salebar[hidden] { display: none; }
.salebar b { font-family: var(--font-display); font-size: 20px; font-weight: 900; letter-spacing: -.02em; }
.salebar span { font-size: 13px; color: rgba(255,255,255,.7); }
.salebar .ic-star { filter: none; }

/* Темы: цена в магазине и превью темы в пассе */
.theme__lock--price { background: var(--text); color: var(--bg); display: none; }
.theme--locked .theme__lock--price { display: inline-flex; align-items: center; gap: 3px; }
.theme__lock--price .ic-star { width: 10px; height: 10px; }
.themes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.theme img { width: 100%; height: auto; aspect-ratio: 1; }
.theme small { line-height: 1.2; }
.psx .pscell__ic img.pscell__theme { width: 58px; height: 58px; border-radius: 14px; object-fit: cover; background: #fff; }
.themes .theme--locked img { filter: none; }  /* витрина: закрытый стиль показываем в цвете */

/* ---- RTL (персидская сборка) -----------------------------------------
   Интерфейс идёт справа налево, но латинский логотип собран из отдельных
   букв во flex-ряду — без ltr он читался бы задом наперёд. Юзернеймы и
   адреса — тоже латиница: держим их слева направо, иначе «@» уезжает в
   конец. Поля ввода подстраиваются под то, что в них набрали. */
[dir="rtl"] .brand { direction: ltr; }
[dir="rtl"] #botname,
[dir="rtl"] #chatBot,
[dir="rtl"] .wallet__addr,
[dir="rtl"] code { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] input,
[dir="rtl"] textarea { unicode-bidi: plaintext; }