/* OnlyChats v2 — создание и редактирование персонажа (макет B, экран 4.9).
   Разметку перекладывает js/create.js: окно app.js становится полноэкранным
   мастером (на ПК модалка 640), поля разложены по четырём шагам, у
   редактирования — табы. Подтверждение удаления и «Правила» — шторки B.
   Все селекторы под html.v2. */

/* ============ 0. Служебное ============ */

html.v2 .v2-cr-sr,
html.v2 .v2-cr-emo {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    opacity: 0 !important;
}

html.v2 .v2-cr-off {
    display: none !important;
}

@keyframes v2CrStepF { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes v2CrStepB { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes v2CrShake {
    0%, 100% { transform: none; }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* ============ 1. Окно мастера ============ */

/* Телефон: полноэкранный экран, как в макете */
html.v2 .create-character-modal.v2-cr {
    display: block !important;
    background: var(--v2-bg-1) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    z-index: 1000;
}

html.v2 .create-character-modal.v2-cr .modal-content.v2-cr-panel {
    position: absolute;
    inset: 0;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    background: var(--v2-bg-1) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none;
    transform: translateY(12px);
    opacity: 0;
    transition: transform var(--v2-dur-screen) var(--v2-ease), opacity var(--v2-dur-screen) var(--v2-ease);
}

html.v2 .create-character-modal.v2-cr.show .modal-content.v2-cr-panel {
    transform: none;
    opacity: 1;
}

/* Шапка: крестик, заголовок, счётчик шагов */
html.v2 .v2-cr .v2-cr-panel > .modal-header {
    flex: none;
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px;
    padding: calc(var(--tg-safe-area-top, 0px) + 8px) 16px 0 !important;
    border: 0 !important;
    background: var(--v2-bg-1) !important;
}

html.v2 .v2-cr-titlerow {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
}

html.v2 .v2-cr .v2-cr-titlerow .close-btn {
    order: -1;
    margin-left: -10px;
    color: var(--v2-text-1) !important;
}

html.v2 .v2-cr .v2-cr-titlerow h2 {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    font-family: var(--v2-font-display) !important;
    font-weight: 800 !important;
    font-size: clamp(23px, 6.6vw, 28px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere;
}

html.v2 .v2-cr-count {
    flex: none;
    margin-left: auto;
    font: 700 13px/1 var(--v2-font-mono);
    color: var(--v2-text-3);
}

/* Прогресс: четыре неоновые черты */
html.v2 .v2-cr-progress {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

/* Заливка черты — слой ::after, растёт scaleX слева направо (transform, без
   перерисовки фона и тени на каждом кадре) */
html.v2 .v2-cr-seg-bar {
    position: relative;
    height: 5px;
    border-radius: 2px;
    background: var(--v2-line-2);
}

html.v2 .v2-cr-seg-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--v2-accent);
    box-shadow: var(--v2-neon);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--v2-dur-screen) var(--v2-ease);
}

html.v2 .v2-cr-seg-bar.v2-on::after {
    transform: none;
}

html.v2 .v2-cr-stepname {
    margin-top: -4px;
    font: 700 13px/1 var(--v2-font);
    color: var(--v2-accent-soft);
}

/* Табы редактирования: текст, активный светлый, неоновая черта снизу */
html.v2 .v2-cr-tabs {
    position: relative;
    display: flex;
    border-bottom: 1px solid var(--v2-line-1);
}

html.v2 .v2-cr .v2-cr-tab {
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
    padding: 0 4px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font: 700 14px/1 var(--v2-font);
    color: var(--v2-text-3) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.v2 .v2-cr .v2-cr-tab:hover {
    color: var(--v2-text-2) !important;
}

html.v2 .v2-cr .v2-cr-tab.v2-on {
    color: var(--v2-text-1) !important;
}

html.v2 .v2-cr .v2-cr-tab:active:not(:disabled) {
    transform: none;
}

html.v2 .v2-cr-tabind {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 25%;
    height: 4px;
    border-radius: 2px;
    background: var(--v2-accent);
    box-shadow: var(--v2-neon);
    pointer-events: none;
    transition: transform var(--v2-dur-base) var(--v2-ease);
}

/* Бейдж статуса модерации под заголовком */
html.v2 .v2-cr-badgerow {
    display: flex;
    margin-top: -4px;
}

html.v2 .v2-cr .status-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px !important;
    border-radius: var(--v2-r-pill) !important;
    font: 700 13px/1 var(--v2-font) !important;
    white-space: nowrap;
}

html.v2 .v2-cr .status-badge.approved {
    background: var(--v2-success-tint) !important;
    color: var(--v2-success) !important;
    border: 1px solid var(--v2-success-line) !important;
}

html.v2 .v2-cr .status-badge.pending {
    background: var(--v2-warning-tint) !important;
    color: var(--v2-warning) !important;
    border: 1px solid rgba(255, 181, 71, .45) !important;
}

html.v2 .v2-cr .status-badge.rejected {
    background: var(--v2-error-tint) !important;
    color: var(--v2-error) !important;
    border: 1px solid var(--v2-error-line) !important;
}

/* Тело: прокручивается, шаги внутри формы */
html.v2 .v2-cr .v2-cr-panel > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 18px 16px 20px !important;
}

html.v2 .v2-cr form {
    margin: 0;
}

html.v2 .v2-cr-step {
    display: none;
    flex-direction: column;
    gap: 18px;
}

html.v2 .v2-cr-step.v2-cr-on {
    display: flex;
}

html.v2 .v2-cr-step.v2-cr-in-f {
    animation: v2CrStepF var(--v2-dur-screen) var(--v2-ease) both;
}

html.v2 .v2-cr-step.v2-cr-in-b {
    animation: v2CrStepB var(--v2-dur-screen) var(--v2-ease) both;
}

/* ============ 2. Поля ============ */

html.v2 .v2-cr .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 !important;
    min-width: 0;
}

html.v2 .v2-cr .form-group label {
    display: block;
    margin: 0 !important;
    font: 600 14px/1.25 var(--v2-font) !important;
    color: var(--v2-text-2) !important;
}

html.v2 .v2-cr .v2-cr-req {
    margin-left: 2px;
    color: var(--v2-accent-soft);
}

html.v2 .v2-cr-labelrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

html.v2 .v2-cr-labelrow label {
    min-width: 0;
}

html.v2 .v2-cr .char-counter {
    flex: none;
    margin: 0 !important;
    font: 500 12px/1 var(--v2-font-mono) !important;
    color: var(--v2-text-3) !important;
    text-align: right;
}

/* app.js красит счётчик в красный на пределе */
html.v2 .v2-cr .char-counter[style*="248, 113, 113"],
html.v2 .v2-cr .char-counter[style*="f87171"] {
    color: var(--v2-error) !important;
}

/* Подсказки под полями: фиолетовые, как в макете */
html.v2 .v2-cr .form-group small:not(.char-counter),
html.v2 .v2-cr .v2-cr-hint {
    display: block;
    margin: 0 !important;
    font: 400 12px/1.35 var(--v2-font) !important;
    color: var(--v2-violet-soft) !important;
}

html.v2 .v2-cr :is(#create-character-form, #edit-character-form) .form-group :is(input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"])), textarea, select) {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    margin: 0;
    padding: 0 14px !important;
    border-radius: 14px !important;
    background: var(--v2-bg-2) !important;
    border: 1px solid var(--v2-line-2) !important;
    color: var(--v2-text-1) !important;
    font: 500 16px/1.3 var(--v2-font) !important;
    box-shadow: none !important;
}

html.v2 .v2-cr :is(#create-character-form, #edit-character-form) .form-group textarea {
    min-height: 96px;
    padding: 12px 14px !important;
    font: 400 16px/1.45 var(--v2-font) !important;
    resize: vertical;
}

html.v2 .v2-cr :is(#create-character-form, #edit-character-form) :is(#character-system-prompt, #edit-character-system-prompt) {
    min-height: 168px;
}

/* Краткое описание — цитата на карточке: курсив, как в макете */
html.v2 .v2-cr :is(#create-character-form, #edit-character-form) :is(#character-description, #edit-character-description) {
    font-style: italic !important;
}

html.v2 .v2-cr :is(#create-character-form, #edit-character-form) .form-group :is(input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"])), textarea, select):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;
}

/* Незаполненное обязательное поле */
html.v2 .v2-cr :is(#create-character-form, #edit-character-form) .form-group.v2-cr-invalid :is(input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"])), textarea, select) {
    border: 1.5px solid var(--v2-error) !important;
    box-shadow: 0 0 0 3px rgba(255, 77, 106, .16) !important;
}

html.v2 .v2-cr .form-group.v2-cr-invalid label {
    color: var(--v2-error) !important;
}

html.v2 .v2-cr .form-group.v2-cr-invalid {
    animation: v2CrShake 280ms var(--v2-ease) 1;
}

/* ============ 3. Шаг «Внешность» ============ */

/* Дроп-зона 3:4 с превью */
html.v2 .v2-cr-media {
    align-items: stretch;
}

html.v2 .v2-cr-drop {
    position: relative;
    align-self: center;
    width: 62%;
    max-width: 240px;
    aspect-ratio: 3 / 4;
    border-radius: var(--v2-r-lg);
    border: 1.5px dashed var(--v2-accent-line);
    background: repeating-linear-gradient(135deg, #15101d 0 10px, #1a1322 10px 20px);
    overflow: hidden;
    transition: border-color var(--v2-dur-base) var(--v2-ease), box-shadow var(--v2-dur-base) var(--v2-ease), transform var(--v2-dur-fast) var(--v2-ease);
}

html.v2 .v2-cr-drop:active {
    transform: scale(.98);
}

html.v2 .v2-cr-drop.v2-drag,
html.v2 .v2-cr-drop:focus-within {
    border-style: solid;
    border-color: var(--v2-accent);
    box-shadow: var(--v2-glow);
}

html.v2 .v2-cr-drop.v2-has-img {
    border-style: solid;
    border-color: var(--v2-line-3);
}

html.v2 .v2-cr .v2-cr-drop #character-avatar-preview,
html.v2 .v2-cr .v2-cr-drop .v2-cr-urlprev {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: center 18%;
    z-index: 1;
    animation: v2Fade var(--v2-dur-screen) var(--v2-ease) both;
}

html.v2 .v2-cr .v2-cr-drop .v2-cr-urlprev {
    display: none;
}

html.v2 .v2-cr .v2-cr-drop.v2-url-ok:not(.v2-has-file) .v2-cr-urlprev {
    display: block;
}

/* Подпись «Изображение персонажа» — сама кнопка выбора, на всю зону */
html.v2 .v2-cr .form-group label.v2-cr-drop-label {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    font: 600 14px/1.3 var(--v2-font) !important;
    color: var(--v2-text-1) !important;
}

html.v2 .v2-cr-drop-ic {
    color: var(--v2-accent-soft);
}

/* С картинкой подпись уезжает вниз пилюлей, как «Заменить» в макете */
html.v2 .v2-cr .v2-cr-drop.v2-has-img label.v2-cr-drop-label {
    justify-content: flex-end;
    padding: 0 8px 10px;
    background: linear-gradient(180deg, transparent 60%, rgba(11, 7, 16, .55));
    font: 600 12px/30px var(--v2-font) !important;
}

html.v2 .v2-cr .v2-cr-drop.v2-has-img .v2-cr-drop-label .v2-cr-drop-ic {
    display: none;
}

html.v2 .v2-cr .v2-cr-drop.v2-has-img .v2-cr-drop-text {
    height: 30px;
    max-width: 100%;
    padding: 0 12px;
    border-radius: 15px;
    background: rgba(11, 7, 16, .75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Галерея: подсказка, плитка «+» и превью app.js одним рядом */
html.v2 .v2-cr .gallery-hint {
    text-align: center;
    margin-top: 4px !important;
    /* style.css гасил подсказку opacity .65 (контраст ~3:1); цвет и так приглушён */
    opacity: 1 !important;
}

html.v2 .v2-cr-gal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

html.v2 .v2-cr .v2-cr-gal .gallery-preview {
    display: contents;
}

html.v2 .v2-cr .v2-cr-gal-add,
html.v2 .v2-cr .gallery-preview-item {
    position: relative;
    flex: none;
    width: 64px;
    height: 85px;
    margin: 0 !important;
    border-radius: 12px;
}

html.v2 .v2-cr .form-group label.v2-cr-gal-add {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed var(--v2-line-3);
    background: var(--v2-bg-2);
    color: var(--v2-text-2) !important;
    cursor: pointer;
    transition: border-color var(--v2-dur-base) var(--v2-ease), color var(--v2-dur-base) var(--v2-ease);
}

html.v2 .v2-cr .form-group label.v2-cr-gal-add:hover,
html.v2 .v2-cr .form-group label.v2-cr-gal-add:focus-visible {
    border-color: var(--v2-accent);
    color: var(--v2-accent-soft) !important;
    outline: none;
}

html.v2 .v2-cr .gallery-preview-item {
    border: 1px solid var(--v2-line-2);
    overflow: visible;
}

html.v2 .v2-cr .gallery-preview-item img {
    border-radius: 11px;
}

html.v2 .v2-cr .gallery-preview-del {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px !important;
    height: 26px !important;
    min-width: 0;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(11, 7, 16, .78) !important;
    color: #fff !important;
    font: 400 18px/1 var(--v2-font) !important;
}

/* зона тапа 44 вокруг маленького крестика */
html.v2 .v2-cr .gallery-preview-del::after {
    content: "";
    position: absolute;
    inset: -9px;
}

html.v2 .v2-cr .gallery-preview-note {
    flex-basis: 100%;
    text-align: center;
    font: 500 12px/1 var(--v2-font-mono);
    color: var(--v2-text-3);
    opacity: 1;
}

/* Пол / тип персонажа: чипы вместо выпадашки */
html.v2 .v2-cr-seg {
    display: flex;
    gap: 6px;
}

html.v2 .v2-cr .v2-cr-seg-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
    padding: 0 8px;
    border-radius: 14px !important;
    background: transparent !important;
    border: 1px solid var(--v2-line-3) !important;
    color: var(--v2-text-2) !important;
    font: 700 14px/1 var(--v2-font);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.v2 .v2-cr .v2-cr-seg-btn:hover {
    border-color: var(--v2-accent-line) !important;
    color: var(--v2-text-1) !important;
}

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

/* ============ 4. Шаг «Личность»: теги ============ */

html.v2 .v2-cr-taghints {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

html.v2 .v2-cr .v2-cr-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    padding: 0 14px 0 10px;
    border-radius: var(--v2-r-pill) !important;
    background: transparent !important;
    border: 1px solid rgba(214, 190, 255, .16) !important;
    color: var(--v2-text-strong-2) !important;
    font: 600 13px/1 var(--v2-font);
}

html.v2 .v2-cr .v2-cr-chip::after {
    content: "";
    position: absolute;
    inset: -4px 0;
}

html.v2 .v2-cr .v2-cr-chip:hover {
    border-color: var(--v2-accent-line) !important;
}

html.v2 .v2-cr .v2-cr-chip[hidden] {
    display: none;
}

/* ============ 5. Шаг «Характер»: редактор Quill (только обёртка) ============ */

html.v2 .v2-cr .rich-text-editor.v2-cr-rte {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Панель в стиле поля B: поднятая поверхность, линия .12, радиус 14 сверху.
   Шрифт свой (у Quill Helvetica), кнопки 36×36, группы плотнее (4 вместо 15),
   чтобы второй ряд не зиял пустотами */
html.v2 .v2-cr .v2-cr-rte .ql-toolbar.ql-snow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 0;
    background: var(--v2-control) !important;
    border: 1px solid var(--v2-line-2) !important;
    border-bottom: 1px solid var(--v2-line-1) !important;
    border-radius: 14px 14px 0 0;
    padding: 4px 6px;
    font-family: var(--v2-font) !important;
}

html.v2 .v2-cr .v2-cr-rte .ql-toolbar.ql-snow .ql-formats {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
}

html.v2 .v2-cr .v2-cr-rte .ql-toolbar.ql-snow .ql-formats:last-child {
    margin-right: 0;
}

html.v2 .v2-cr .v2-cr-rte .ql-toolbar.ql-snow button {
    width: 36px;
    height: 36px;
    padding: 8px;
}

html.v2 .v2-cr .v2-cr-rte .ql-toolbar.ql-snow .ql-picker {
    height: 36px;
    font-family: var(--v2-font) !important;
    font-size: 14px;
    font-weight: 600;
}

html.v2 .v2-cr .v2-cr-rte .ql-toolbar.ql-snow .ql-picker-label {
    display: flex;
    align-items: center;
    border-radius: 8px;
}

html.v2 .v2-cr .v2-cr-rte .ql-toolbar.ql-snow .ql-picker.ql-color-picker,
html.v2 .v2-cr .v2-cr-rte .ql-toolbar.ql-snow .ql-picker.ql-icon-picker {
    width: 36px;
}

html.v2 .v2-cr .v2-cr-rte .ql-toolbar.ql-snow .ql-picker.ql-color-picker .ql-picker-label,
html.v2 .v2-cr .v2-cr-rte .ql-toolbar.ql-snow .ql-picker.ql-icon-picker .ql-picker-label {
    padding: 6px 7px;
}

html.v2 .v2-cr .v2-cr-rte .ql-snow .ql-picker-options {
    background: var(--v2-bg-3) !important;
    border: 1px solid var(--v2-line-2) !important;
    border-radius: 12px;
    box-shadow: var(--v2-shadow-2);
    font-family: var(--v2-font);
}

html.v2 .v2-cr .v2-cr-rte .ql-container.ql-snow {
    background: var(--v2-bg-2) !important;
    border: 1px solid var(--v2-line-2) !important;
    border-top: 0 !important;
    border-radius: 0 0 14px 14px;
    color: var(--v2-text-1) !important;
    font: 400 16px/1.45 var(--v2-font);
}

html.v2 .v2-cr .v2-cr-rte:focus-within .ql-container.ql-snow,
html.v2 .v2-cr .v2-cr-rte:focus-within .ql-toolbar.ql-snow {
    border-color: var(--v2-accent-line) !important;
}

html.v2 .v2-cr .v2-cr-rte .ql-editor.ql-blank::before {
    color: var(--v2-text-3);
    font-style: normal;
}

/* Кнопки панели Quill: без заливки общего слоя, светлые иконки */
html.v2 .v2-cr .v2-cr-rte .ql-toolbar button {
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

html.v2 .v2-cr .v2-cr-rte .ql-toolbar button:hover {
    background: var(--v2-hover) !important;
}

html.v2 .v2-cr .v2-cr-rte .ql-snow .ql-stroke {
    stroke: var(--v2-text-2);
}

html.v2 .v2-cr .v2-cr-rte .ql-snow .ql-fill {
    fill: var(--v2-text-2);
}

html.v2 .v2-cr .v2-cr-rte .ql-snow .ql-picker {
    color: var(--v2-text-2);
}

html.v2 .v2-cr .v2-cr-rte .ql-snow :is(button:hover, button.ql-active, .ql-picker-label:hover, .ql-picker-label.ql-active) .ql-stroke {
    stroke: var(--v2-accent-soft);
}

html.v2 .v2-cr .v2-cr-rte .ql-snow :is(button:hover, button.ql-active, .ql-picker-label:hover, .ql-picker-label.ql-active) .ql-fill {
    fill: var(--v2-accent-soft);
}

html.v2 .v2-cr .v2-cr-rte .ql-snow .ql-picker-label:hover,
html.v2 .v2-cr .v2-cr-rte .ql-snow .ql-picker-label.ql-active {
    color: var(--v2-accent-soft);
}

/* ============ 6. Шаг «Голос и публикация» ============ */

/* Список голосов с прослушкой */
/* Голосов много (три десятка): на телефоне от 375 именные идут в две
   колонки, «Авто» и заголовки групп на всю ширину. В колонках галочку
   не показываем (места мало), выбранный — акцентная рамка и подложка */
html.v2 .v2-cr-voices {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

@media (min-width: 375px) {
    html.v2 .v2-cr-voices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html.v2 .v2-cr-voices > .v2-cr-voice:not(:has(.v2-cr-play)),
    html.v2 .v2-cr-voices > .v2-cr-voice-group {
        grid-column: 1 / -1;
    }

    html.v2 .v2-cr-voices > .v2-cr-voice:has(.v2-cr-play) .v2-cr-voice-check {
        display: none;
    }

    html.v2 .v2-cr-voices > .v2-cr-voice:has(.v2-cr-play).v2-on {
        background: var(--v2-accent-tint);
    }
}

html.v2 .v2-cr-voice-group {
    margin: 6px 2px 0;
    font: 600 13px/1 var(--v2-font);
    color: var(--v2-text-3);
}

html.v2 .v2-cr-voice {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 0 0 12px;
    border-radius: 14px;
    background: var(--v2-bg-2);
    border: 1.5px solid var(--v2-line-1);
    transition: border-color var(--v2-dur-base) var(--v2-ease);
}

html.v2 .v2-cr-voice.v2-on {
    border-color: var(--v2-accent);
}

html.v2 .v2-cr .v2-cr-voice .v2-cr-play {
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    background: var(--v2-control-2) !important;
    border: 0 !important;
    color: var(--v2-text-1) !important;
    font: 400 12px/1 var(--v2-font) !important;
}

html.v2 .v2-cr .v2-cr-voice .v2-cr-play.playing {
    background: var(--v2-accent-fill) !important;
    box-shadow: var(--v2-glow) !important;
}

html.v2 .v2-cr .v2-cr-voice .v2-cr-play::after {
    content: "";
    position: absolute;
    inset: -6px;
}

html.v2 .v2-cr .v2-cr-voice-pick {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 14px 14px 0 !important;
    box-shadow: none !important;
    color: var(--v2-text-1) !important;
    font: 600 15px/1.2 var(--v2-font);
    text-align: left;
}

html.v2 .v2-cr .v2-cr-voice-pick:active:not(:disabled) {
    transform: none;
}

html.v2 .v2-cr-voice-name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

html.v2 .v2-cr-voice-check {
    flex: none;
    color: var(--v2-accent);
    stroke-width: 2.2;
    opacity: 0;
    transition: opacity var(--v2-dur-base) var(--v2-ease);
}

html.v2 .v2-cr-voice.v2-on .v2-cr-voice-check {
    opacity: 1;
}

/* Прежняя одиночная ▶ рядом с селектом не нужна: прослушка в каждой строке */
html.v2 .v2-cr .form-group > .tts-sample-btn:not(.v2-cr-play) {
    display: none !important;
}

/* «Публичный персонаж»: карточка с переключателем, как «Опубликовать в каталог» */
html.v2 .v2-cr .form-group.v2-cr-pub {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    padding: 14px;
    border-radius: var(--v2-r-md);
    background: var(--v2-bg-2);
    border: 1px solid var(--v2-line-1);
}

html.v2 .v2-cr .form-group.v2-cr-pub > label {
    display: contents !important;
}

html.v2 .v2-cr .v2-cr-pub .checkbox-label {
    grid-column: 1;
    grid-row: 1;
    font: 600 15px/1.25 var(--v2-font);
    color: var(--v2-text-1);
    cursor: pointer;
}

html.v2 .v2-cr .form-group.v2-cr-pub small {
    grid-column: 1;
    grid-row: 2;
    font: 400 13px/1.35 var(--v2-font) !important;
    color: var(--v2-text-3) !important;
}

html.v2 .v2-cr .v2-cr-pub input[type="checkbox"] {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    width: 48px;
    height: 28px;
    margin: 0 !important;
    padding: 0;
    flex: none;
    border-radius: 14px;
    background: var(--v2-control-2);
    border: 0;
    cursor: pointer;
    transition: background var(--v2-dur-base) var(--v2-ease);
}

html.v2 .v2-cr .v2-cr-pub input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    transition: transform var(--v2-dur-base) var(--v2-ease);
}

html.v2 .v2-cr .v2-cr-pub input[type="checkbox"]:checked {
    background: var(--v2-accent);
}

html.v2 .v2-cr .v2-cr-pub input[type="checkbox"]:checked::before {
    transform: translateX(20px);
}

html.v2 .v2-cr .v2-cr-pub input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--v2-accent);
    outline-offset: 2px;
}

/* Итог: карточка персонажа */
html.v2 .v2-cr-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--v2-r-md);
    background: var(--v2-bg-2);
    border: 1px solid var(--v2-line-1);
}

html.v2 .v2-cr-summary img {
    flex: none;
    width: 60px;
    aspect-ratio: 3 / 4;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    background: var(--v2-control);
}

/* Пока картинки нет: пустая рамка со штриховкой, как зона загрузки на шаге 1 */
html.v2 .v2-cr-sum-ph {
    display: none;
    flex: none;
    width: 60px;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    border: 1.5px dashed var(--v2-accent-line);
    background: repeating-linear-gradient(135deg, #15101d 0 6px, #1a1322 6px 12px);
    box-sizing: border-box;
}

html.v2 .v2-cr-summary.v2-cr-sum-noimg .v2-cr-sum-ph {
    display: block;
}

html.v2 .v2-cr-summary.v2-cr-sum-noimg img {
    display: none;
}

/* Кристалл B вместо 💎 в «Стоимость создания…: 50 💎» (эмодзи скрыт в разметке) */
html.v2 .v2-cr .v2-cr-gemi {
    width: 14px;
    height: 14px;
    margin-left: 1px;
    overflow: hidden;
    vertical-align: -2px;
}

html.v2 .v2-cr-sum-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

html.v2 .v2-cr-sum-name {
    font: 800 17px/1.15 var(--v2-font-display);
    color: var(--v2-text-1);
    overflow-wrap: anywhere;
}

html.v2 .v2-cr-sum-desc {
    padding-left: 8px;
    border-left: 1.5px solid var(--v2-accent);
    font: italic 400 13px/1.35 var(--v2-font);
    color: var(--v2-text-2);
    overflow-wrap: anywhere;
}

html.v2 .v2-cr-sum-desc:empty {
    display: none;
}

/* Редактирование: статус и модерация */
html.v2 .v2-cr .form-group.v2-cr-status {
    display: flex;
}

html.v2 .v2-cr .v2-cr-status :is(.public-status-info, .make-public-section) {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px !important;
    text-align: left !important;
    border-radius: var(--v2-r-md) !important;
    background: var(--v2-bg-2) !important;
    border: 1px solid var(--v2-line-1) !important;
    box-shadow: none !important;
}

html.v2 .v2-cr .v2-cr-status .public-status-info:not(:has(> :not(.status-badge))) {
    display: none;
}

html.v2 .v2-cr .v2-cr-status .private-info {
    margin: 0 !important;
    font: 600 15px/1.3 var(--v2-font) !important;
    color: var(--v2-text-1) !important;
}

html.v2 .v2-cr .form-group.v2-cr-status small {
    color: var(--v2-text-3) !important;
    font: 400 13px/1.35 var(--v2-font) !important;
}

html.v2 .v2-cr .v2-cr-status .btn-make-public {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    margin: 0 !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    font: 700 15px/1.2 var(--v2-font) !important;
}

html.v2 .v2-cr .v2-cr-reason {
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--v2-error-tint);
    border: 1px solid var(--v2-error-line);
}

html.v2 .v2-cr .form-group .v2-cr-reason small {
    display: block;
    color: var(--v2-text-2) !important;
    font: 600 12px/1.3 var(--v2-font) !important;
}

html.v2 .v2-cr .v2-cr-reason p {
    margin: 4px 0 0;
    font: 400 14px/1.4 var(--v2-font);
    color: #ff8a9c;
    overflow-wrap: anywhere;
}

/* ============ 7. Низ: «Назад / Далее» ============ */

html.v2 .v2-cr .v2-cr-panel > .modal-footer.v2-cr-foot {
    flex: none;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 8px;
    padding: 12px 16px calc(var(--v2-safe-bottom) + 12px) !important;
    margin: 0;
    border-top: 1px solid var(--v2-line-1) !important;
    background: var(--v2-bg-1) !important;
}

html.v2 .v2-cr .v2-cr-foot button {
    width: 100%;
    height: 52px;
    min-width: 0;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 16px !important;
    font: 700 15px/1.1 var(--v2-font) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.v2 .v2-cr .v2-cr-foot :is(.v2-cr-back, .v2-cr-cancel) {
    background: var(--v2-control-2) !important;
    border: 1px solid var(--v2-line-3) !important;
    color: var(--v2-text-1) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

html.v2 .v2-cr .v2-cr-foot :is(.v2-cr-next, .v2-cr-submit) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--v2-accent-fill) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: var(--v2-glow) !important;
}

html.v2 .v2-cr .v2-cr-foot :is(.v2-cr-next, .v2-cr-submit):hover {
    background: #e0177a !important;
}

html.v2 .v2-cr .v2-cr-foot :is(.v2-cr-next, .v2-cr-submit):active:not(:disabled) {
    background: var(--v2-accent-press) !important;
}

/* Цена из кода на кнопке создания: «Создать персонажа · 50» и кристалл */
html.v2 .v2-cr .v2-cr-foot .v2-cr-submit[data-v2-price]::after {
    content: "· " attr(data-v2-price);
    flex: none;
    padding-right: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3.5h10l4.5 5.5L12 21 2.5 9z' fill='%23f093fb'/%3E%3Cpath d='M2.5 9h19M8.5 9L12 21l3.5-12' fill='none' stroke='%237a2a86' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 16px no-repeat;
}

/* ============ 8. ПК: модалка 640 по центру ============ */

@media (min-width: 1024px) {
    html.v2 .create-character-modal.v2-cr {
        display: flex !important;
        align-items: center;
        justify-content: center;
        /* центр по колонке контента справа от сайдбара (desktop.css), а не по окну */
        padding-left: var(--v2-side-w, 0px);
        box-sizing: border-box;
        background: var(--v2-scrim) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        backdrop-filter: blur(6px) !important;
    }

    html.v2 .create-character-modal.v2-cr .modal-content.v2-cr-panel {
        position: relative;
        inset: auto;
        width: 640px !important;
        height: min(860px, calc(100vh - 64px)) !important;
        border: 1px solid var(--v2-line-2) !important;
        border-radius: var(--v2-r-sheet) !important;
        box-shadow: var(--v2-shadow-modal) !important;
        transform: scale(.96) translateY(12px);
    }

    html.v2 .v2-cr .v2-cr-panel > .modal-header {
        padding: 20px 24px 0 !important;
        background: transparent !important;
    }

    html.v2 .v2-cr .v2-cr-panel > .modal-body {
        padding: 20px 24px 20px !important;
    }

    html.v2 .v2-cr .v2-cr-panel > .modal-footer.v2-cr-foot {
        padding: 14px 24px 18px !important;
        background: transparent !important;
    }

    html.v2 .v2-cr .v2-cr-titlerow h2 {
        font-size: 28px !important;
    }
}

/* ============ 9. Подтверждение удаления — шторка B ============ */

html.v2 .v2-cr-grab {
    flex: none;
    height: 24px;
    margin: 0 -16px -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    touch-action: none;
}

html.v2 .v2-cr-grab::before {
    content: "";
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: rgba(214, 190, 255, .24);
}

html.v2 .create-character-modal.v2-cr-del {
    align-items: flex-end !important;
    background: var(--v2-scrim) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    z-index: 1300;
}

html.v2 .create-character-modal.v2-cr-del .modal-content {
    width: 100% !important;
    max-width: none !important;
    max-height: 92vh !important;
    margin: 0 !important;
    padding: 0 16px calc(var(--v2-safe-bottom) + 20px) !important;
    display: flex;
    flex-direction: column;
    background: var(--v2-bg-3) !important;
    border: 1px solid var(--v2-line-2) !important;
    border-bottom: 0 !important;
    border-radius: var(--v2-r-sheet) var(--v2-r-sheet) 0 0 !important;
    box-shadow: var(--v2-shadow-sheet) !important;
    transform: translateY(100%) !important;
    transition: transform var(--v2-dur-screen) var(--v2-ease) !important;
    touch-action: pan-y;
}

html.v2 .create-character-modal.v2-cr-del.show .modal-content {
    transform: none !important;
}

html.v2 .v2-cr-del .modal-header {
    padding: 4px 0 0 !important;
    border: 0 !important;
    gap: 8px;
}

html.v2 .v2-cr-del .modal-header h2 {
    font-size: 28px !important;
    text-align: left;
}

html.v2 .v2-cr-del .modal-header .close-btn {
    display: none !important;
}

html.v2 .v2-cr-del .modal-body {
    padding: 12px 0 0 !important;
}

html.v2 .v2-cr-del .modal-body p {
    margin: 0;
    font: 400 15px/1.45 var(--v2-font);
    color: var(--v2-text-2);
    overflow-wrap: anywhere;
}

html.v2 .v2-cr-del .modal-footer {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 8px;
    margin-top: 20px;
    padding: 0 !important;
    border: 0 !important;
}

html.v2 .v2-cr-del .modal-footer button {
    width: 100%;
    height: 52px;
    margin: 0 !important;
    padding: 0 16px !important;
    border-radius: 16px !important;
    font: 700 16px/1 var(--v2-font) !important;
}

html.v2 .v2-cr-del .modal-footer .btn-danger {
    background: var(--v2-error) !important;
    color: #22040a !important;
    -webkit-text-fill-color: #22040a;
    border: 0 !important;
    box-shadow: none !important;
}

html.v2 .v2-cr-del .modal-footer .btn-secondary {
    background: rgba(214, 190, 255, .06) !important;
    border: 0 !important;
    font-weight: 600 !important;
}

@media (min-width: 1024px) {
    html.v2 .create-character-modal.v2-cr-del {
        align-items: center !important;
        -webkit-backdrop-filter: blur(6px) !important;
        backdrop-filter: blur(6px) !important;
    }

    html.v2 .create-character-modal.v2-cr-del .modal-content {
        width: 480px !important;
        padding: 24px !important;
        border-bottom: 1px solid var(--v2-line-2) !important;
        border-radius: var(--v2-r-sheet) !important;
        box-shadow: var(--v2-shadow-modal) !important;
        transform: scale(.96) translateY(12px) !important;
    }

    html.v2 .v2-cr-del .v2-cr-grab {
        display: none;
    }

    html.v2 .v2-cr-del .modal-header {
        padding: 0 !important;
    }

    html.v2 .v2-cr-del .modal-header .close-btn {
        display: inline-flex !important;
        margin: -8px -8px 0 0;
    }
}

/* ============ 10. «Правила создания персонажей» — шторка B ============ */

html.v2 .rules-context-menu.v2-cr-rules.show {
    align-items: flex-end;
    background: var(--v2-scrim) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    animation: v2Fade var(--v2-dur-screen) var(--v2-ease) both;
    z-index: 1300;
}

html.v2 .v2-cr-rules .rules-menu-content {
    width: 100% !important;
    max-width: none !important;
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 16px calc(var(--v2-safe-bottom) + 20px) !important;
    display: flex;
    flex-direction: column;
    background: var(--v2-bg-3) !important;
    border: 1px solid var(--v2-line-2) !important;
    border-bottom: 0 !important;
    border-radius: var(--v2-r-sheet) var(--v2-r-sheet) 0 0 !important;
    box-shadow: var(--v2-shadow-sheet) !important;
    touch-action: pan-y;
}

html.v2 .v2-cr-rules.show .rules-menu-content {
    animation: v2SheetIn var(--v2-dur-screen) var(--v2-ease) both;
}

html.v2 .v2-cr-rules .rules-menu-content h3 {
    margin: 4px 0 14px !important;
    text-align: left !important;
    font: 800 28px/1.05 var(--v2-font-display) !important;
    letter-spacing: 0;
    color: var(--v2-text-1) !important;
}

html.v2 .v2-cr-rules .rules-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 18px;
}

html.v2 .v2-cr-rules .rule-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--v2-line-1) !important;
    border-radius: 14px;
    background: var(--v2-bg-2);
}

html.v2 .v2-cr-rules .rule-icon {
    flex: none;
    width: 36px;
    height: 36px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--v2-accent-tint);
    color: var(--v2-accent-soft);
    font-size: 0;
}

html.v2 .v2-cr-rules .rule-icon.v2-gem {
    background: rgba(240, 147, 251, .12);
}

html.v2 .v2-cr-rules .rule-text {
    font: 400 14px/1.4 var(--v2-font);
    color: var(--v2-text-1);
}

html.v2 .v2-cr-rules .rules-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

html.v2 .v2-cr-rules .rules-buttons .rules-close-btn {
    width: 100% !important;
    height: 52px !important;
    min-width: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 16px !important;
    border-radius: 16px !important;
    background: var(--v2-accent-fill) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: var(--v2-glow) !important;
    font: 700 16px/1 var(--v2-font) !important;
}

html.v2 .v2-cr-rules .rules-buttons .rules-close-btn:hover {
    background: #e0177a !important;
    transform: none;
}

html.v2 .v2-cr-rules .rules-guide-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 52px;
    box-sizing: border-box;
    padding: 0 16px;
    border-radius: 16px;
    background: var(--v2-control-2);
    border: 1px solid var(--v2-line-2);
    color: var(--v2-text-1) !important;
    font: 600 15px/1 var(--v2-font);
    text-decoration: none;
    transition: border-color var(--v2-dur-base) var(--v2-ease);
}

html.v2 .v2-cr-rules .rules-guide-link:hover {
    border-color: var(--v2-accent-line);
    background: var(--v2-control-2);
    transform: none;
}

html.v2 .v2-cr-rules .rules-guide-link svg {
    color: var(--v2-accent-soft);
}

@media (min-width: 1024px) {
    html.v2 .rules-context-menu.v2-cr-rules.show {
        align-items: center;
        -webkit-backdrop-filter: blur(6px) !important;
        backdrop-filter: blur(6px) !important;
    }

    html.v2 .v2-cr-rules .rules-menu-content {
        width: 480px !important;
        padding: 24px !important;
        border-bottom: 1px solid var(--v2-line-2) !important;
        border-radius: var(--v2-r-sheet) !important;
        box-shadow: var(--v2-shadow-modal) !important;
    }

    html.v2 .v2-cr-rules.show .rules-menu-content {
        animation: v2ModalIn var(--v2-dur-screen) var(--v2-ease) both;
    }

    html.v2 .v2-cr-rules .v2-cr-grab {
        display: none;
    }
}

/* ============ 11. Меньше движения ============ */

@media (prefers-reduced-motion: reduce) {
    html.v2 .create-character-modal.v2-cr .modal-content.v2-cr-panel {
        transform: none !important;
    }

    html.v2 .v2-cr .form-group.v2-cr-invalid {
        animation: none;
    }

    html.v2 .v2-cr-step.v2-cr-in-f,
    html.v2 .v2-cr-step.v2-cr-in-b {
        animation: none;
    }

    html.v2 .v2-cr-seg-bar::after {
        transition: none;
    }
}