/* OnlyChats v2 — экран «Настройки» в дизайне B (раскладка экрана «Я», 4.6).
   Разметку раскладывает v2/js/settings.js: карточки профиля, баланса,
   «Выбор модели ИИ» + озвучка + персоны, рефералка + задания + промокод,
   «Вход на сайте». На ПК ≥1024 две колонки, как в макете.
   Шторки моделей, голосов и редактора персоны — классы v2-cs из chat.css,
   здесь только их наполнение (префикс v2-st-).
   !important там, где app.js красит инлайном или base.css уже держит !important. */

html.v2 {
    --v2-st-ic-pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
    --v2-st-ic-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E");
    --v2-st-ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    --v2-st-ic-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8.3-8 9-4.6-.7-8-4.5-8-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
    --v2-st-ic-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='black'/%3E%3C/svg%3E");
    --v2-st-ic-stop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6.5' y='6.5' width='11' height='11' rx='2' fill='black'/%3E%3C/svg%3E");
    --v2-st-ic-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='12' r='2' fill='black'/%3E%3Ccircle cx='12' cy='12' r='2' fill='black' opacity='.7'/%3E%3Ccircle cx='18' cy='12' r='2' fill='black' opacity='.4'/%3E%3C/svg%3E");
}

/* ============ 1. Каркас: сетка карточек ============ */

html.v2 .page-container.v2-settings {
    padding-left: 0;
    padding-right: 0;
    /* низ последней карточки над таббаром с зазором 16: таббар 64 + отступ 12 */
    padding-bottom: calc(var(--v2-tabbar-h) + var(--v2-safe-bottom) + 12px + 16px);
}

/* У #app свой нижний отступ 80 из style.css — на этом экране его заменяет
   отступ страницы выше (без :has зазор просто будет больше, перекрытия нет) */
html.v2 #app:has(> .page-container.v2-settings) {
    padding-bottom: 0 !important;
}

html.v2 .v2-settings .v2-st-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 4px 16px 0;
}

html.v2 .v2-settings .v2-st-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

html.v2 .v2-settings .v2-st-col:empty {
    display: none;
}

/* Карточка-секция B: тёмная поверхность, тонкая линия, радиус 24 */
html.v2 .v2-settings .v2-st-card,
html.v2 .v2-settings .referral-section.v2-st-card,
html.v2 .v2-settings .settings-profile-section.v2-st-card {
    margin: 0 !important;
    padding: 16px !important;
    background: var(--v2-bg-2) !important;
    border: 1px solid var(--v2-line-2) !important;
    border-radius: var(--v2-r-xl) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    animation: v2Enter var(--v2-dur-screen) var(--v2-ease) both;
}

html.v2 .v2-settings .v2-st-col > :nth-child(2) { animation-delay: 40ms; }
html.v2 .v2-settings .v2-st-col > :nth-child(3) { animation-delay: 80ms; }

/* Старые обёртки секций внутри карточек: без своих фонов и отступов */
html.v2 .v2-settings .v2-st-block,
html.v2 .v2-settings .model-container,
html.v2 .v2-settings .promo-code-section,
html.v2 .v2-settings .v2-st-tariff,
html.v2 .v2-settings .v2-st-tariff .referral-card,
html.v2 .v2-settings .v2-st-sg .referral-card,
html.v2 .v2-settings .v2-st-web .referral-card,
html.v2 .v2-settings .v2-st-ref .referral-info,
html.v2 .v2-settings .v2-st-ref .referral-link-box {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transform: none !important;
}

/* Подблоки одной карточки разделены линией, как в «Как играем» B */
html.v2 .v2-settings .v2-st-play > .v2-st-block + .v2-st-block {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--v2-line-1) !important;
}

/* Заголовок-кикер карточки, как «КАК ИГРАЕМ» в B: капс 12px с разрядкой .08em.
   Не text-transform: он меняет innerText, а тексты должны остаться прежними.
   Капители all-small-caps синтезируются из прописных с коэффициентом .7,
   поэтому кегль 12/.7, разрядка .08 * 12 = .96px */
html.v2 .v2-settings .v2-st-kicker {
    margin: 0 0 12px !important;
    padding: 0 !important;
    font-family: var(--v2-font) !important;
    font-size: calc(12px / .7) !important;
    font-weight: 700 !important;
    font-variant-caps: all-small-caps;
    font-synthesis: weight small-caps;
    letter-spacing: .96px;
    line-height: 1;
    color: var(--v2-text-3) !important;
    text-align: left;
}

/* Подзаголовок внутри карточки: «Качество озвучки», «Персоны» и т.д. — 15/600, как в B */
html.v2 .v2-settings .v2-st-sub {
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-family: var(--v2-font) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2;
    color: var(--v2-text-1) !important;
    text-align: left;
}

html.v2 .v2-settings .v2-st-sub::before,
html.v2 .v2-settings .v2-st-sub::after,
html.v2 .v2-settings .v2-st-kicker::before,
html.v2 .v2-settings .v2-st-kicker::after {
    display: none !important;
}

html.v2 .v2-settings .v2-st-hint,
html.v2 .v2-settings .referral-description {
    margin: 0 0 12px !important;
    font-size: 14px !important;
    line-height: 1.45;
    color: var(--v2-text-2) !important;
    text-align: left;
}

/* Вторичная кнопка B: глухая, светлая линия */
html.v2 .v2-settings .v2-st-btn2,
html.v2 .v2-settings .promo-code-button {
    min-height: 48px;
    margin: 0 !important;
    padding: 0 16px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--v2-r-md) !important;
    background: var(--v2-control-2) !important;
    border: 1px solid var(--v2-line-2) !important;
    box-shadow: none !important;
    color: var(--v2-text-1) !important;
    -webkit-text-fill-color: currentColor;
    font-family: var(--v2-font) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap;
    transform: none;
}

html.v2 .v2-settings .v2-st-btn2::before,
html.v2 .v2-settings .promo-code-button::before {
    display: none;
}

html.v2 .v2-settings .v2-st-btn2:hover,
html.v2 .v2-settings .promo-code-button:hover {
    background: #34273f !important;
    border-color: var(--v2-line-3) !important;
    transform: none !important;
}

html.v2 .v2-settings .v2-st-btn2:active:not(:disabled),
html.v2 .v2-settings .promo-code-button:active {
    transform: scale(.97) !important;
}

/* Поля карточек: высота 52, тёмная заливка как в B */
html.v2 .v2-settings .v2-st-card input:not([type="checkbox"]):not([type="file"]) {
    height: 52px;
    margin: 0;
    padding: 0 14px !important;
    background: var(--v2-bg-1) !important;
    border: 1px solid var(--v2-line-2) !important;
    border-radius: var(--v2-r-md) !important;
    box-shadow: none;
    color: var(--v2-text-1) !important;
    font-size: 16px !important;
    min-width: 0;
    box-sizing: border-box;
}

html.v2 .v2-settings .v2-st-card input:not([type="checkbox"]):not([type="file"]):focus {
    border-color: var(--v2-accent) !important;
    box-shadow: 0 0 0 3px rgba(255, 45, 138, .16), 0 0 22px rgba(255, 45, 138, .3) !important;
}

/* ============ 2. Профиль ============ */

html.v2 .v2-settings .v2-st-profile-in {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}

html.v2 .v2-settings .v2-st-ph {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

html.v2 .v2-settings .v2-st-ava {
    position: relative;
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    cursor: pointer;
}

html.v2 .v2-settings .v2-st-ava:focus-visible {
    outline: 2px solid var(--v2-accent);
    outline-offset: 3px;
}

/* Кольцо аватара: малиново-золотое, с тёмным зазором, как в B */
html.v2 .v2-settings #settings-avatar {
    width: 72px !important;
    height: 72px !important;
    border: 3px solid var(--v2-bg-2) !important;
    box-shadow: 0 0 0 2px var(--v2-accent), 0 0 0 3.5px rgba(255, 196, 107, .55), 0 0 22px rgba(255, 45, 138, .35) !important;
    box-sizing: border-box;
    transform: none !important;
}

html.v2 .v2-settings #settings-avatar > span {
    font-family: var(--v2-font-display) !important;
    font-size: 34px !important;
    font-weight: 800 !important;
}

html.v2 .v2-settings .v2-st-ava-edit {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--v2-accent-fill);
    border: 2px solid var(--v2-bg-2);
    box-shadow: var(--v2-glow);
}

html.v2 .v2-settings .v2-st-uinfo {
    flex: 1;
    min-width: 0;
}

html.v2 .v2-settings .v2-st-namerow {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
}

/* Ник в одну строку: длинный мельче (классы из settings.js), не влез — многоточие.
   Рвать посреди слова («qa_layout_c / heck») нельзя */
html.v2 .v2-settings .v2-st-name {
    flex: 0 1 auto;
    min-width: 0;
    margin-right: 2px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-bottom: .08em;
    font-family: var(--v2-font-display) !important;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.005em;
}

html.v2 .v2-settings .v2-st-name.v2-st-name-long {
    font-size: 22px;
}

html.v2 .v2-settings .v2-st-name.v2-st-name-xl {
    font-size: 20px;
}

/* Без своего стиля ник золотой, как в профиле и сайдбаре. app.js красит ник
   инлайном (#fff или цвет стиля), поэтому !important — но только без стиля:
   класс settings.js ставит, лишь если у юзера нет цвета или градиента */
html.v2 .v2-settings .v2-st-name.v2-st-nick-plain {
    color: var(--v2-gold) !important;
}

/* 💎 кристаллом: у пустого inline-block базовая линия уезжала вниз,
   overflow ставит её на нижний край — значок встаёт в строку */
html.v2 .v2-settings .v2-gem-emoji,
html.v2 .v2-st-sheet .v2-gem-emoji {
    overflow: hidden;
    vertical-align: -2px;
}

/* Карандаш и палитра: иконки 20 с зоной тапа 40 */
html.v2 .v2-settings .v2-st-ico {
    flex: none;
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px;
    opacity: 1 !important;
    color: var(--v2-text-3);
    transition: color var(--v2-dur-fast) var(--v2-ease), background var(--v2-dur-fast) var(--v2-ease) !important;
}

html.v2 .v2-settings .v2-st-ico svg {
    width: 18px;
    height: 18px;
}

html.v2 .v2-settings .v2-st-ico:hover,
html.v2 .v2-settings .v2-st-ico:focus-visible {
    color: var(--v2-text-1);
    background: var(--v2-hover);
    outline: none;
}

html.v2 .v2-settings .v2-st-profile-btn {
    width: 100%;
    min-height: 48px;
    padding: 0 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: var(--v2-r-md) !important;
    background: var(--v2-control-2) !important;
    border: 1px solid var(--v2-line-2) !important;
    color: var(--v2-text-1) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

html.v2 .v2-settings .v2-st-profile-btn:hover {
    background: #34273f !important;
    border-color: var(--v2-line-3) !important;
}

html.v2 .v2-settings .v2-st-profile-btn svg {
    flex: none;
}

/* ============ 3. Баланс и тариф ============ */

/* Карточка баланса B: кромка кристального цвета, число и «Пополнить» справа */
html.v2 .v2-settings .v2-st-card.v2-st-balance {
    border-color: rgba(240, 147, 251, .22) !important;
}

html.v2 .v2-settings .v2-st-bal {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    min-width: 0;
    color: var(--v2-text-1);
}

html.v2 .v2-settings .v2-st-topup {
    flex: none;
    margin-left: auto;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 14px;
    background: var(--v2-accent-fill);
    box-shadow: var(--v2-glow);
    color: #fff;
    font: 700 15px/1 var(--v2-font);
    cursor: pointer;
    transition: background var(--v2-dur-fast) var(--v2-ease), transform var(--v2-dur-fast) var(--v2-ease);
}

html.v2 .v2-settings .v2-st-topup:hover {
    background: #e0177a;
}

html.v2 .v2-settings .v2-st-topup:active {
    transform: scale(.97);
}

html.v2 .v2-settings .v2-st-topup:focus-visible {
    outline: 2px solid var(--v2-accent);
    outline-offset: 2px;
}

html.v2 .v2-settings .v2-st-bal-num {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--v2-font-mono) !important;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
}

/* 💎 в разметке остаётся, на экране кристалл из макета и стоит первым */
html.v2 .v2-settings .v2-st-bal-gem {
    order: -1;
    flex: none;
    width: 32px;
    height: 32px;
    font-size: 0 !important;
    background: var(--v2-gem) center / contain no-repeat;
    filter: drop-shadow(0 0 10px rgba(240, 147, 251, .45));
}

html.v2 .v2-settings .v2-st-tariff {
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--v2-line-1) !important;
}

html.v2 .v2-settings .v2-st-tariff .referral-info-block {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 6px;
}

html.v2 .v2-settings .v2-st-tariff .referral-info-text {
    display: contents;
}

html.v2 .v2-settings .v2-st-tariff h4 {
    order: 0;
    flex: 1 1 auto;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--v2-text-1) !important;
}

html.v2 .v2-settings .v2-st-tariff .referral-info-text p {
    order: 1;
    margin: 0 !important;
    font-size: 14px !important;
    color: var(--v2-text-2) !important;
}

html.v2 .v2-settings .v2-st-tariff .referral-info-text p::after {
    content: ":";
}

html.v2 .v2-settings .v2-st-tariff .referral-icon {
    order: 2;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--v2-font-mono) !important;
    font-size: 15px !important;
    font-weight: 700;
    color: var(--v2-text-1);
}

/* ============ 4. Модель ИИ: строка с планетой ============ */

html.v2 .v2-settings .model-container.v2-st-block {
    display: block !important;
}

html.v2 .v2-settings .v2-st-model {
    position: relative;
    margin: 0 !important;
    z-index: auto !important;
}

html.v2 .v2-settings .v2-st-row {
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 4px 0 !important;
    display: flex;
    align-items: center;
    gap: 12px;
    background: none !important;
    border: 0 !important;
    border-radius: 12px;
    color: var(--v2-text-1);
    text-align: left;
    cursor: pointer;
}

html.v2 .v2-settings .v2-st-row:hover {
    background: none !important;
}

html.v2 .v2-settings .v2-st-row:hover .v2-st-chev {
    color: var(--v2-text-1);
    transform: translateX(2px);
}

html.v2 .v2-settings .v2-st-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

html.v2 .v2-settings .v2-st-row-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.v2 .v2-settings .v2-st-row-sub {
    font-size: 12px;
    line-height: 1.3;
    color: var(--v2-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.v2 .v2-st-chev {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--v2-text-3);
    transition: transform var(--v2-dur-fast) var(--v2-ease), color var(--v2-dur-fast) var(--v2-ease);
}

/* Цена: моно-цифры на розовой плашке, 💎 рисуется кристаллом */
html.v2 .v2-st-pill {
    flex: none;
    height: 30px;
    padding: 0 10px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(240, 147, 251, .12);
    border: 1px solid rgba(240, 147, 251, .3);
    font-family: var(--v2-font-mono) !important;
    font-size: 14px;
    font-weight: 700;
    color: var(--v2-crystal);
    white-space: nowrap;
}

html.v2 .v2-st-pill .v2-gem-emoji {
    width: 14px;
    height: 14px;
    vertical-align: 0;
}

/* ============ 5. Качество озвучки ============ */

/* Два тира — сегмент B: тёмная подложка, выбранный тир светлой плашкой */
html.v2 .v2-settings .v2-st-tiers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: var(--v2-r-md);
    background: var(--v2-bg-1);
    border: 1px solid var(--v2-line-1);
}

html.v2 .v2-settings .v2-st-tier {
    min-height: 72px;
    margin: 0;
    padding: 10px 12px !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    border-radius: 12px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--v2-text-1);
    text-align: left;
    cursor: pointer;
}

html.v2 .v2-settings .v2-st-tier:hover {
    background: var(--v2-hover) !important;
}

html.v2 .v2-settings .v2-st-tier.v2-on {
    background: var(--v2-text-1) !important;
    color: var(--v2-on-light);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

html.v2 .v2-settings .v2-st-tier-name {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

html.v2 .v2-settings .v2-st-tick {
    color: var(--v2-accent-fill);
}

html.v2 .v2-settings .v2-st-tier-desc {
    font-size: 12px;
    line-height: 1.3;
    color: var(--v2-text-3);
}

html.v2 .v2-settings .v2-st-tier.v2-on .v2-st-tier-desc {
    color: #4a3d5e;
}

html.v2 .v2-settings .v2-st-tier-cost {
    margin-top: 2px;
    white-space: nowrap;
    font-family: var(--v2-font-mono) !important;
    font-size: 12px;
    font-weight: 700;
    color: var(--v2-crystal);
}

html.v2 .v2-settings .v2-st-tier.v2-on .v2-st-tier-cost {
    color: #8a1e5a;
}

html.v2 .v2-settings .v2-st-tier-cost .v2-gem-emoji {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
}

html.v2 .v2-settings .v2-st-quota {
    margin: 10px 2px 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--v2-text-2);
}

html.v2 .v2-settings .v2-st-voices-btn {
    width: 100%;
    min-height: 48px;
    margin-top: 10px;
    padding: 0 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--v2-r-md) !important;
    background: var(--v2-control-2) !important;
    border: 1px solid var(--v2-line-1) !important;
    color: var(--v2-text-1) !important;
    font-size: 15px;
    font-weight: 700;
}

html.v2 .v2-settings .v2-st-voices-btn:hover {
    background: #34273f !important;
}

html.v2 .v2-settings .v2-st-voices-btn .v2-st-ic {
    width: 14px;
    height: 14px;
}

/* ============ 6. Персоны ============ */

html.v2 .v2-settings .v2-st-plist {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

html.v2 .v2-settings .v2-st-plist:empty {
    display: none;
}

html.v2 .v2-settings .v2-st-persona {
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 8px 12px 8px 10px !important;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 14px !important;
    background: var(--v2-control) !important;
    border: 1px solid var(--v2-line-1) !important;
    color: var(--v2-text-1);
    text-align: left;
    cursor: pointer;
}

html.v2 .v2-settings .v2-st-persona:hover {
    background: var(--v2-control-2) !important;
    border-color: var(--v2-line-3) !important;
}

html.v2 .v2-st-pava-sm {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--v2-bg-3);
}

html.v2 .v2-st-pava-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html.v2 .v2-st-emoji {
    font-size: 18px;
    line-height: 1;
}

html.v2 .v2-settings .v2-st-persona .v2-st-row-title {
    font-size: 15px;
}

html.v2 .v2-st-tag {
    flex: none;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--v2-violet-tint);
    color: var(--v2-violet-soft);
    font-size: 11px;
    font-weight: 700;
    line-height: 22px;
    white-space: nowrap;
}

/* ✏️ остаётся текстом, на экране линейный карандаш B */
html.v2 .v2-st-pen {
    flex: none;
    width: 18px;
    height: 18px;
    font-size: 0 !important;
    background: currentColor;
    color: var(--v2-text-3);
    -webkit-mask: var(--v2-st-ic-pen) center / contain no-repeat;
    mask: var(--v2-st-ic-pen) center / contain no-repeat;
}

/* «+ Новая персона»: пунктирная кнопка на всю ширину, как в B */
html.v2 .v2-settings .v2-st-personas .v2-st-add {
    width: 100%;
    min-height: 48px;
    margin: 8px 0 0 !important;
    padding: 0 16px !important;
    border-radius: var(--v2-r-md) !important;
    background: transparent !important;
    border: 1.5px dashed var(--v2-line-3) !important;
    color: var(--v2-text-1) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

html.v2 .v2-settings .v2-st-personas .v2-st-add:hover {
    background: var(--v2-hover) !important;
    border-color: var(--v2-accent-line) !important;
}

/* ============ 7. Пригласи друга, задания, промокод ============ */

html.v2 .v2-settings .v2-st-free {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Подпанели «Кристаллы бесплатно» B: плитки #191324 без рамки (карточка в
   карточке не двоится), радиус 16 */
html.v2 .v2-settings .referral-section.v2-st-inner,
html.v2 .v2-settings .promo-code-section.v2-st-inner {
    margin: 0 !important;
    padding: 14px !important;
    background: var(--v2-bg-3) !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

html.v2 .v2-settings .v2-st-ref .referral-link-container {
    margin: 0 !important;
}

html.v2 .v2-settings .v2-st-ref .referral-link-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
}

html.v2 .v2-settings .v2-st-ref .referral-link-text {
    margin: 0 !important;
    padding: 10px 12px !important;
    background: var(--v2-bg-1) !important;
    border: 1px solid var(--v2-line-1) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-family: var(--v2-font-mono) !important;
    font-size: 12px !important;
    line-height: 1.4;
    color: var(--v2-text-2) !important;
    text-align: left !important;
    /* в одну строку с многоточием; «Скопировать ссылку» берёт ссылку из
       currentUser.referral_code, а не из этого текста — копируется целиком */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: all;
}

html.v2 .v2-settings .v2-st-copy {
    width: 100%;
}

html.v2 .v2-settings .v2-st-copy::before {
    content: "";
    display: block !important;
    position: static !important;
    width: 18px !important;
    height: 18px !important;
    flex: none;
    opacity: 1 !important;
    transform: none !important;
    background: currentColor !important;
    -webkit-mask: var(--v2-st-ic-link) center / contain no-repeat;
    mask: var(--v2-st-ic-link) center / contain no-repeat;
}

html.v2 .v2-settings .v2-st-copy.copied {
    background: var(--v2-success-tint) !important;
    border-color: var(--v2-success-line) !important;
    color: var(--v2-success) !important;
}

html.v2 .v2-settings .v2-st-copy.copied::before {
    -webkit-mask-image: var(--v2-st-ic-check);
    mask-image: var(--v2-st-ic-check);
}

/* Задания: строка с иконкой, как «Задания ›» в B, и кнопка перехода */
html.v2 .v2-settings .v2-st-sg .referral-info-block {
    display: flex;
    align-items: center;
    gap: 12px;
}

html.v2 .v2-settings .v2-st-sg .referral-icon {
    flex: none;
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: var(--v2-bg-3) !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--v2-text-1);
}

html.v2 .v2-settings .v2-st-sg .referral-icon::before {
    content: "";
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: var(--v2-st-ic-shield) center / contain no-repeat;
    mask: var(--v2-st-ic-shield) center / contain no-repeat;
}

html.v2 .v2-settings .v2-st-sg .referral-info-text h4 {
    margin: 0 0 2px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--v2-text-1) !important;
}

html.v2 .v2-settings .v2-st-sg .referral-info-text p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: var(--v2-text-2) !important;
}

html.v2 .v2-settings .v2-st-sg-go {
    width: 100%;
    margin-top: 12px !important;
}

/* Промокод: поле и кнопка в одну строку, как в B */
html.v2 .v2-settings .v2-st-promo .promo-code-form {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    margin: 0 !important;
}

html.v2 .v2-settings .v2-st-promo .promo-code-input {
    flex: 1 1 auto;
    min-width: 0 !important;
    width: auto;
    /* 48, как в B; общее правило полей карточки (52) специфичнее — поэтому !important */
    height: 48px !important;
    font-family: var(--v2-font-mono) !important;
    letter-spacing: .06em;
    backdrop-filter: none;
}

html.v2 .v2-settings .v2-st-promo .promo-code-input::placeholder {
    font-family: var(--v2-font);
    letter-spacing: 0;
}

html.v2 .v2-settings .v2-st-promo .promo-code-button {
    flex: none;
    width: auto !important;
    height: 48px;
    min-height: 48px;
}

html.v2 .v2-settings .v2-st-promo .promo-code-description {
    margin: 8px 2px 0 !important;
    font-size: 12px !important;
    line-height: 1.4;
    color: var(--v2-text-3) !important;
    text-align: left !important;
}

/* ============ 8. Вход на сайте ============ */

html.v2 .v2-settings .v2-st-web #web-email-box {
    margin: 0 0 12px !important;
}

html.v2 .v2-settings .v2-st-web .v2-st-code {
    width: 100%;
    font-family: var(--v2-font-mono) !important;
    letter-spacing: .3em;
    text-align: center;
}

html.v2 .v2-settings .v2-st-web .v2-st-code::placeholder {
    font-family: var(--v2-font);
    letter-spacing: .02em;
}

html.v2 .v2-settings .v2-st-codebtns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

html.v2 .v2-settings .v2-st-codebtns .v2-st-btn2 {
    width: 100%;
    padding: 0 10px !important;
}

/* Поле и кнопка в строку, если плейсхолдер «Новый пароль, от 6 символов»
   влезает целиком (основа поля 250px); не влезает — кнопка уходит под поле
   на всю ширину */
html.v2 .v2-settings .v2-st-pwrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

html.v2 .v2-settings .v2-st-pwrow input {
    flex: 1 1 250px;
    width: auto !important;
}

html.v2 .v2-settings .v2-st-pwrow .v2-st-btn2 {
    flex: 1 0 auto;
    min-height: 52px;
}

/* ============ 9. Подвал: переключатель интерфейса ============ */

html.v2 .v2-settings .v2-st-foot {
    display: flex;
    justify-content: center;
    padding: 20px 16px 0;
}

html.v2 .v2-settings .v2-st-foot:empty {
    display: none;
}

html.v2 .v2-settings .v2-st-uiswitch {
    min-height: 44px;
    width: auto;
    margin: 0;
    padding: 0 18px;
    border-radius: var(--v2-r-pill) !important;
    background: transparent !important;
    border: 1px dashed var(--v2-line-3) !important;
    color: var(--v2-text-3) !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

html.v2 .v2-settings .v2-st-uiswitch:hover {
    color: var(--v2-text-1) !important;
    border-color: var(--v2-text-3) !important;
}

/* ============ 10. Шторки: модели, голоса, редактор персоны ============ */

/* Голоса: плитки по две, круглая малиновая ▶ как в B */
html.v2 .v2-st-voices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

html.v2 .v2-st-vkick {
    margin-top: 6px;
}

html.v2 .v2-st-voice {
    min-height: 56px;
    padding: 6px 10px 6px 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 16px;
    background: var(--v2-control-2);
    border: 1px solid var(--v2-line-1);
    cursor: pointer;
    min-width: 0;
    transition: border-color var(--v2-dur-base) var(--v2-ease), background var(--v2-dur-base) var(--v2-ease);
}

html.v2 .v2-st-voice:hover {
    border-color: var(--v2-line-3);
}

html.v2 .v2-st-voice:has(.v2-st-vplay[data-st="stop"]),
html.v2 .v2-st-voice:has(.v2-st-vplay[data-st="load"]) {
    border-color: var(--v2-accent);
    background: var(--v2-accent-tint);
}

html.v2 .v2-st-voice-name {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--v2-text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Текст кнопки (▶ / … / ■) пишет app.js; глиф прячем, иконку рисуем по data-st */
html.v2 .v2-st-vplay {
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--v2-accent-fill) !important;
    border: 0 !important;
    box-shadow: var(--v2-glow) !important;
    color: #fff !important;
    font-size: 0 !important;
}

html.v2 .v2-st-vplay::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--v2-st-ic-play) center / contain no-repeat;
    mask: var(--v2-st-ic-play) center / contain no-repeat;
}

html.v2 .v2-st-vplay[data-st="stop"]::before {
    -webkit-mask-image: var(--v2-st-ic-stop);
    mask-image: var(--v2-st-ic-stop);
}

html.v2 .v2-st-vplay[data-st="load"]::before {
    -webkit-mask-image: var(--v2-st-ic-dots);
    mask-image: var(--v2-st-ic-dots);
    animation: v2StBlink 1s ease-in-out infinite;
}

@keyframes v2StBlink { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* Играет: кольцо-пульс вокруг кнопки на transform/opacity (v2Ring, motion.css).
   Было v2Pulse на box-shadow — перерисовка на каждом кадре, да и !important у
   box-shadow кнопки её глушил */
html.v2 .v2-st-vplay {
    position: relative;
}

html.v2 .v2-st-vplay[data-st="stop"]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 45, 138, .6);
    opacity: 0;
    animation: v2Ring 1.6s ease-out infinite;
    pointer-events: none;
}

/* Редактор персоны */
html.v2 .v2-st-pava-wrap {
    display: flex;
    justify-content: center;
    margin: 2px 0 6px;
}

html.v2 .v2-st-pava {
    position: relative;
    display: block;
    width: 88px;
    height: 88px;
    cursor: pointer;
    border-radius: 50%;
}

html.v2 .v2-st-pava:focus-within {
    outline: 2px solid var(--v2-accent);
    outline-offset: 3px;
}

html.v2 .v2-st-pava #persona-avatar-preview {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    background: var(--v2-bg-1);
    box-shadow: 0 0 0 1px var(--v2-line-2), 0 0 0 4px var(--v2-bg-3), 0 0 0 5.5px var(--v2-accent-line);
}

html.v2 .v2-st-pava #persona-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html.v2 .v2-st-pava #persona-avatar-preview .v2-st-emoji {
    font-size: 36px;
}

html.v2 .v2-st-pava-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--v2-accent-fill);
    border: 2px solid var(--v2-bg-3);
    color: #fff;
}

html.v2 .v2-st-pava-badge svg {
    width: 15px;
    height: 15px;
}

html.v2 .v2-st-field {
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

html.v2 .v2-st-field > label {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--v2-text-2);
}

html.v2 .v2-st-field input[type="text"] {
    height: 52px;
    font-size: 16px !important;
}

html.v2 .v2-st-field textarea {
    min-height: 140px;
    font-size: 16px !important;
}

html.v2 .v2-st-help {
    font-size: 12px;
    line-height: 1.35;
    color: var(--v2-text-3);
}

html.v2 .v2-st-field .char-counter {
    margin-top: -2px !important;
    font-family: var(--v2-font-mono);
}

/* Переключатель «по умолчанию» вместо чекбокса */
html.v2 .v2-st-switch {
    position: relative;
    min-height: 44px;
    margin: 2px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: var(--v2-text-1);
}

html.v2 .v2-st-switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

html.v2 .v2-st-switch-ui {
    position: relative;
    flex: none;
    width: 46px;
    height: 28px;
    border-radius: 14px;
    background: var(--v2-control-2);
    border: 1px solid var(--v2-line-3);
    transition: background var(--v2-dur-base) var(--v2-ease), border-color var(--v2-dur-base) var(--v2-ease);
}

html.v2 .v2-st-switch-ui::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--v2-text-2);
    transition: transform var(--v2-dur-base) var(--v2-ease), background var(--v2-dur-base) var(--v2-ease);
}

html.v2 .v2-st-switch input:checked + .v2-st-switch-ui {
    background: var(--v2-accent-fill);
    border-color: var(--v2-accent);
    box-shadow: 0 0 14px rgba(255, 45, 138, .35);
}

html.v2 .v2-st-switch input:checked + .v2-st-switch-ui::after {
    transform: translateX(18px);
    background: #fff;
}

html.v2 .v2-st-switch input:focus-visible + .v2-st-switch-ui {
    outline: 2px solid var(--v2-accent);
    outline-offset: 2px;
}

html.v2 .v2-st-switch .checkbox-label {
    font-size: 14px;
    line-height: 1.35;
    color: var(--v2-text-1);
}

html.v2 .v2-cs-actions.v2-st-one {
    grid-template-columns: 1fr;
}

/* Промокод: на телефонах в строку поле выходит ~156px и режет плейсхолдер — кладём в столбик */
@media (max-width: 479px) {
    html.v2 .v2-settings .v2-st-promo .promo-code-form {
        flex-direction: column !important;
    }

    html.v2 .v2-settings .v2-st-promo .promo-code-button {
        width: 100% !important;
    }
}

/* ============ 11. Ширины ============ */

/* Узкие телефоны: кнопка пароля под полем, кнопки кода в столбик */
@media (max-width: 359px) {
    html.v2 .v2-settings .v2-st-codebtns {
        grid-template-columns: 1fr;
    }

    /* тиры озвучки в одну колонку: в две цена «6 💎 / сообщение» не влезала */
    html.v2 .v2-settings .v2-st-tiers {
        grid-template-columns: 1fr;
    }

    html.v2 .v2-settings .v2-st-tier {
        min-height: 64px;
    }

    /* «Пополнить» компактнее, чтобы число баланса не жалось */
    html.v2 .v2-settings .v2-st-topup {
        padding: 0 14px;
    }
}

/* Телефоны до 379: аватар и иконки ника компактнее, чтобы ник помещался */
@media (max-width: 379px) {
    html.v2 .v2-settings .v2-st-ava,
    html.v2 .v2-settings #settings-avatar {
        width: 64px !important;
        height: 64px !important;
    }

    html.v2 .v2-settings .v2-st-ph {
        gap: 12px;
    }

    html.v2 .v2-settings .v2-st-ico {
        width: 36px !important;
        height: 44px !important;
    }
}

/* ПК: две колонки, как экран «Я» в B на 1440 */
@media (min-width: 1024px) {
    html.v2 .page-container.v2-settings {
        max-width: 1120px;
        padding-bottom: calc(var(--v2-tabbar-h) + 16px + 16px);
    }

    html.v2 .v2-settings .v2-st-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 16px;
        align-items: start;
        padding-top: 8px;
    }

    html.v2 .v2-settings .v2-st-grid.v2-st-single {
        grid-template-columns: minmax(0, 720px);
        justify-content: center;
    }

    html.v2 .v2-settings .v2-st-col {
        gap: 16px;
    }

    /* Пилюля баланса в шапке на ПК лишняя: баланс уже в сайдбаре и в карточке */
    html.v2 .v2-settings > .header .crystal-counter {
        display: none !important;
    }

    html.v2 .v2-settings .v2-st-card,
    html.v2 .v2-settings .referral-section.v2-st-card,
    html.v2 .v2-settings .settings-profile-section.v2-st-card {
        padding: 18px !important;
    }

    html.v2 .v2-st-voices {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html.v2 .v2-cs.v2-st-voices-sheet {
        width: 640px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.v2 .v2-settings .v2-st-card {
        animation: none;
    }

    html.v2 .v2-st-vplay[data-st="stop"],
    html.v2 .v2-st-vplay[data-st="stop"]::after,
    html.v2 .v2-st-vplay[data-st="load"]::before {
        animation: none !important;
    }

    html.v2 .v2-st-switch-ui,
    html.v2 .v2-st-switch-ui::after,
    html.v2 .v2-st-chev {
        transition: none;
    }
}

/* ============ Вид чата ============ */

html.v2 .v2-settings .v2-st-look-hint {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--v2-text-3);
}

html.v2 .v2-settings .v2-st-look-row {
    margin-bottom: 12px;
}

html.v2 .v2-settings .v2-st-look-name {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-text-2);
}

/* Сегменты как переключатель тарифов озвучки: подложка, выбранный — светлый */
html.v2 .v2-settings .v2-st-seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: var(--v2-bg-3, #191324);
}

html.v2 .v2-settings .v2-st-seg-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 11px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--v2-text-1) !important;
    font-family: var(--v2-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

html.v2 .v2-settings .v2-st-seg-btn.v2-on {
    background: var(--v2-text-1) !important;
    color: var(--v2-on-light) !important;
}

@media (hover: hover) {
    html.v2 .v2-settings .v2-st-seg-btn:not(.v2-on):hover {
        background: var(--v2-hover) !important;
    }
}

/* Образец переписки: те же переменные вида, что у ленты чата */
html.v2 .v2-settings .v2-st-look-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    padding: 12px;
    border-radius: 16px;
    background: var(--v2-bg-1);
}

html.v2 .v2-st-look-preview .message-content {
    padding: 10px 13px;
    border-radius: 16px;
    background: var(--v2-chat-card, rgba(21, 16, 29, .84));
    border: 1px solid var(--v2-ct-card-border);
    box-shadow: var(--v2-ct-card-glow);
}

html.v2 .v2-st-look-preview .message-text {
    margin: 0;
    font-size: var(--v2-ct-fs);
    line-height: 1.45;
    color: var(--v2-ct-text);
}

html.v2 .v2-st-look-preview .message-text em {
    font-family: var(--v2-ct-act-font) !important;
    font-style: italic;
    font-weight: var(--v2-ct-act-weight);
    color: var(--v2-ct-action);
}

html.v2 .v2-st-look-preview .message.user {
    align-self: flex-end;
    max-width: 82%;
}

html.v2 .v2-st-look-preview .message.user .message-content {
    border: 0;
    border-radius: 18px 18px 6px 18px;
    background: var(--v2-ct-user-bg);
    box-shadow: var(--v2-ct-user-glow);
}

html.v2 .v2-st-look-preview .message.user .message-text {
    font-size: var(--v2-ct-ufs);
    color: #fff;
}

html.v2 .v2-st-look-preview .message.user .message-text em {
    font-weight: 700;
    color: rgba(255, 255, 255, .92);
}