/* /Layout/CookieNotice.razor.rz.scp.css */
/* Снизу по центру и узкой полосой: сообщает, но не закрывает страницу.
   Выше тостов по слою — она появляется раньше них и уходит одним нажатием. */
.vx-cookie[b-4utbf315ng]{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:130;
  display:flex;align-items:center;gap:var(--space-4);width:min(640px,calc(100% - 32px));
  padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3)}
.vx-cookie__text[b-4utbf315ng]{flex:1;margin:0;font:var(--type-small);color:var(--text-2)}

@media (max-width:480px){
  .vx-cookie[b-4utbf315ng]{flex-direction:column;align-items:stretch;gap:var(--space-2)}
}
/* /Layout/EditorLayout.razor.rz.scp.css */
/* Полосу ошибки Blazor показывает сам, выставляя display прямо в атрибуте стиля,
   поэтому по умолчанию её надо прятать. Повторяет MainLayout: это часть каркаса
   страницы, а не оформление, и в слое без него ошибка висела бы на пустом месте. */
#blazor-error-ui[b-4ac2rpl7au]{display:none;position:fixed;left:0;right:0;bottom:0;z-index:1000;
  padding:12px 44px 12px 20px;background:var(--surface-1);color:var(--text-1);
  border-top:1px solid rgba(226,75,75,.4);box-shadow:0 -8px 24px rgba(0,0,0,.45);
  font:var(--type-small)}
#blazor-error-ui .reload[b-4ac2rpl7au]{color:var(--text-accent);margin-left:8px}
#blazor-error-ui .dismiss[b-4ac2rpl7au]{position:absolute;top:8px;right:16px;cursor:pointer;
  font-size:20px;line-height:1;color:var(--text-3)}
#blazor-error-ui .dismiss:hover[b-4ac2rpl7au]{color:var(--text-1)}
/* /Layout/GameLayout.razor.rz.scp.css */
#blazor-error-ui[b-0prwtdbsbt]{display:none;position:fixed;left:0;right:0;bottom:0;z-index:1000;
  padding:12px 20px;background:#2A2421;color:var(--text-1);font:var(--type-small);
  border-top:1px solid var(--border-1);box-shadow:var(--shadow-2)}

#blazor-error-ui .reload[b-0prwtdbsbt]{color:var(--text-accent);margin-left:8px}

#blazor-error-ui .dismiss[b-0prwtdbsbt]{position:absolute;top:8px;right:16px;cursor:pointer;
  color:var(--text-3);font-size:18px;border:0;background:none;padding:4px}

#blazor-error-ui .dismiss:hover[b-0prwtdbsbt]{color:var(--text-1)}
/* /Layout/MainLayout.razor.rz.scp.css */
.vx-shell[b-4pdytum4yw]{min-height:100vh;display:flex;flex-direction:column}
.vx-shell__main[b-4pdytum4yw]{flex:1;width:100%;max-width:var(--content-max);margin:0 auto;padding:var(--space-8) var(--space-6)}

/* Полосу ошибки Blazor показывает сам, выставляя display прямо в атрибуте стиля,
   поэтому по умолчанию её надо прятать. В шаблонном проекте это делал app.css,
   удалённый вместе с bootstrap, — и полоса осталась висеть на каждой странице
   без всякой ошибки. */
#blazor-error-ui[b-4pdytum4yw]{display:none;position:fixed;left:0;right:0;bottom:0;z-index:1000;
  padding:12px 44px 12px 20px;background:var(--surface-1);color:var(--text-1);
  border-top:1px solid rgba(226,75,75,.4);box-shadow:0 -8px 24px rgba(0,0,0,.45);
  font:var(--type-small)}
#blazor-error-ui .reload[b-4pdytum4yw]{color:var(--text-accent);margin-left:8px}
#blazor-error-ui .dismiss[b-4pdytum4yw]{position:absolute;top:8px;right:16px;cursor:pointer;
  font-size:20px;line-height:1;color:var(--text-3)}
#blazor-error-ui .dismiss:hover[b-4pdytum4yw]{color:var(--text-1)}

/* Форма выхода не должна ломать раскладку правой части шапки: display:contents
   убирает саму форму из потока, и кнопка становится обычным элементом флексбокса. */
.vx-shell__logout[b-4pdytum4yw]{display:contents}

/* Счётчик монет — ссылкой в магазин, янтарём, как акцент системы. */
.vx-shell__coins[b-4pdytum4yw]{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:999px;border-bottom:0;
  background:var(--accent-soft);color:var(--text-accent);font:var(--type-small-strong);white-space:nowrap}
.vx-shell__coins:hover[b-4pdytum4yw]{background:var(--accent-soft-hover)}

/* Подвал. Приглушён и отделён чертой: за ним приходят намеренно, и спорить с
   содержимым страницы он не должен. Прижат к низу окна на коротких страницах —
   это делает flex-раскладка .vx-shell, здесь ничего для этого не нужно. */
.vx-foot[b-4pdytum4yw]{border-top:1px solid var(--border-1);background:var(--surface-sunken)}
.vx-foot__inner[b-4pdytum4yw]{width:100%;max-width:var(--content-max);margin:0 auto;
  padding:var(--space-8) var(--space-6);
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-8);flex-wrap:wrap}
.vx-foot__brand[b-4pdytum4yw]{display:flex;flex-direction:column;gap:var(--space-3);max-width:34ch}
.vx-foot__about[b-4pdytum4yw]{font:var(--type-small);color:var(--text-3);margin:0}
/* Реквизиты — самой тихой строкой: они нужны тем, кто их ищет, а не всем. */
.vx-foot__seller[b-4pdytum4yw]{font:var(--type-caption);color:var(--text-3);margin:0}

/* Колонкой, а не строкой: ссылок четыре, и в ряд они на узком экране
   переносятся вразнобой. */
.vx-foot__links[b-4pdytum4yw]{display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-start}
.vx-foot__links a[b-4pdytum4yw]{font:var(--type-small);color:var(--text-2);border-bottom:0}
.vx-foot__links a:hover[b-4pdytum4yw]{color:var(--text-accent)}

/* Телефон. Отступы по краям вдвое меньше: при 24px с каждой стороны карточке
   на экране 390px оставалось меньше трёх четвертей ширины. «Выйти» — одной
   иконкой (подпись остаётся для чтения с экрана и в подсказке): вместе
   с ней шапка укладывается в строку рядом со знаком. */
@media (max-width:640px){
  .vx-shell__main[b-4pdytum4yw]{padding:var(--space-6) var(--space-4)}
  .vx-shell__logout-text[b-4pdytum4yw]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* Значок премиума у аватарки: янтарём, как акцент системы, и без рамки — это
   пометка состояния, а не кнопка, хотя по нему и можно перейти. */
.vx-shell__prem[b-4pdytum4yw]{display:inline-flex;align-items:center;gap:4px;border-bottom:0;
  font:var(--type-caption);color:var(--text-accent);white-space:nowrap}
@media (max-width:640px){
  .vx-shell__prem span[b-4pdytum4yw]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
/* /Pages/Admin/AdminHome.razor.rz.scp.css */
/* Обновление на главной: форма слева, предпросмотр справа.
   Оболочка vx-adm повторена в css каждой админ-страницы — изоляция стилей
   Blazor не даёт разделить её между страницами. */

.vx-adm[b-6fia1z4m40]{min-height:100vh}
.vx-adm__wrap[b-6fia1z4m40]{max-width:var(--content-max);margin:0 auto;padding:28px 24px 48px}
.vx-adm__hero[b-6fia1z4m40]{margin-bottom:20px}
.vx-adm__title[b-6fia1z4m40]{font:var(--type-display-l);color:var(--text-1);margin:4px 0 0}
.vx-adm__sub[b-6fia1z4m40]{font:var(--type-body);color:var(--text-2);max-width:560px;margin:6px 0 0}
.vx-adm__loading[b-6fia1z4m40]{padding:40px 24px;font:var(--type-body);color:var(--text-3)}
.vx-adm__error[b-6fia1z4m40]{font:var(--type-small);color:var(--text-danger);margin:0}

.vx-admhome[b-6fia1z4m40]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:var(--space-8);
  align-items:start;margin-top:var(--space-6)}
.vx-admhome__form[b-6fia1z4m40]{display:flex;flex-direction:column;gap:var(--space-4)}
/* Markdown пишут моноширинным и с запасом высоты: текст новости — это абзацы, а не строка. */
.vx-admhome__form[b-6fia1z4m40]  .vx-field__area{min-height:240px;font:var(--type-mono-s);line-height:1.55}
.vx-admhome__button[b-6fia1z4m40]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-4)}
.vx-admhome__hint[b-6fia1z4m40]{font:var(--type-caption);color:var(--text-3);margin:0}
.vx-admhome__hint code[b-6fia1z4m40]{font:var(--type-mono-s);color:var(--text-2)}
.vx-admhome__chip[b-6fia1z4m40]{font:var(--type-mono-s);color:var(--accent);background:var(--accent-soft);
  border:0;border-radius:4px;padding:1px 6px;cursor:pointer}
.vx-admhome__chip:hover[b-6fia1z4m40]{background:var(--accent-soft-hover)}
.vx-admhome__actions[b-6fia1z4m40]{display:flex;align-items:center;gap:var(--space-4)}
.vx-admhome__ok[b-6fia1z4m40]{font:var(--type-small);color:var(--text-3)}

.vx-admhome__preview[b-6fia1z4m40]{display:flex;flex-direction:column;gap:var(--space-3);position:sticky;top:var(--space-6)}
.vx-admhome__empty[b-6fia1z4m40]{font:var(--type-small);color:var(--text-3);margin:0}

@media (max-width:900px){
  .vx-admhome[b-6fia1z4m40]{grid-template-columns:minmax(0,1fr)}
  .vx-admhome__preview[b-6fia1z4m40]{position:static}
}

@media (max-width:640px){
  .vx-adm__wrap[b-6fia1z4m40]{padding-left:0;padding-right:0}
  .vx-admhome__button[b-6fia1z4m40]{grid-template-columns:minmax(0,1fr)}
}
/* /Pages/Admin/AdminShop.razor.rz.scp.css */
/* Каталог магазина: витрина недели сверху, каталог ниже, форма вещи — окном.
   Оболочка vx-adm повторена в css каждой админ-страницы — изоляция стилей
   Blazor не даёт разделить её между страницами. */

.vx-adm[b-hrcwlrid74] {
    min-height: 100vh;
}

.vx-adm__wrap[b-hrcwlrid74] {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 28px 24px 48px;
}

.vx-adm__hero[b-hrcwlrid74] {
    margin-bottom: 20px;
}

.vx-adm__title[b-hrcwlrid74] {
    font: var(--type-display-l);
    color: var(--text-1);
    margin: 4px 0 0;
}

.vx-adm__sub[b-hrcwlrid74] {
    font: var(--type-body);
    color: var(--text-2);
    max-width: 560px;
    margin: 6px 0 0;
}

.vx-adm__loading[b-hrcwlrid74] {
    padding: 40px 24px;
    font: var(--type-body);
    color: var(--text-3);
}

.vx-adm__error[b-hrcwlrid74] {
    font: var(--type-small);
    color: var(--text-danger);
    margin: 0 0 12px;
}
.vx-admsh__block[b-hrcwlrid74] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.vx-admsh__bar[b-hrcwlrid74] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vx-admsh__h[b-hrcwlrid74] {
    font: var(--type-title);
    color: var(--text-1);
    margin: 0;
}

.vx-admsh__table[b-hrcwlrid74] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
}

.vx-admsh__row[b-hrcwlrid74] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-1);
}

.vx-admsh__row:first-child[b-hrcwlrid74] {
    border-top: 0;
}

/* Превью — одной ширины у всех видов: рамка, плашка темы и картинка фона
   стоят в одну колонку, и глаз сравнивает вещи, а не их размеры. */
.vx-admsh__prev[b-hrcwlrid74] {
    flex: 0 0 160px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    overflow: hidden;
}

.vx-admsh__prev img[b-hrcwlrid74] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vx-admsh__theme[b-hrcwlrid74] {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 48px;
    padding: 0;
    margin: 0;
    max-width: none;
    border-radius: var(--radius-sm);
    background: var(--profile-banner);
    box-shadow: inset 0 -3px 0 var(--accent);
}

.vx-admsh__noimg[b-hrcwlrid74] {
    font: var(--type-caption);
    color: var(--text-3);
}

.vx-admsh__info[b-hrcwlrid74] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.vx-admsh__name[b-hrcwlrid74] {
    font: var(--type-body-strong);
    color: var(--text-1);
}

.vx-admsh__meta[b-hrcwlrid74] {
    font: var(--type-caption);
    color: var(--text-3);
}

.vx-admsh__acts[b-hrcwlrid74] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.vx-admsh__empty[b-hrcwlrid74] {
    padding: 16px;
    margin: 0;
    font: var(--type-small);
    color: var(--text-3);
}

.vx-admsh__form[b-hrcwlrid74] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vx-admsh__pair[b-hrcwlrid74] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.vx-admsh__live[b-hrcwlrid74] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    overflow: hidden;
}

.vx-admsh__upload[b-hrcwlrid74] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vx-admsh__hint[b-hrcwlrid74] {
    font: var(--type-small);
    color: var(--text-3);
    margin: 0;
}

/* Телефон: отступ по краям уже даёт раскладка; строка каталога — в столбик. */
@media (max-width: 640px) {
    .vx-adm__wrap[b-hrcwlrid74] {
        padding-left: 0;
        padding-right: 0;
    }

    .vx-admsh__row[b-hrcwlrid74] {
        flex-wrap: wrap;
    }

    .vx-admsh__acts[b-hrcwlrid74] {
        width: 100%;
        justify-content: flex-start;
    }

    .vx-admsh__pair[b-hrcwlrid74] {
        grid-template-columns: 1fr;
    }
}

/* Превью листа питомца — все ряды разом, по одному на ячейку. */
.vx-admsh__pet[b-hrcwlrid74] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--space-2);
}

.vx-admsh__petrow[b-hrcwlrid74] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: var(--space-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.vx-admsh__petrow figcaption[b-hrcwlrid74] {
    font: var(--type-caption);
    color: var(--text-3);
}

/* В строке списка питомец — в натуральную величину (32 px): ×2 в ячейку
   высотой 48 не влезает, а половина от ×2 — снова целый масштаб. */
.vx-admsh__prev .vx-pet-anim[b-hrcwlrid74] {
    transform: scale(.5);
}
/* /Pages/Admin/AdminTabs.razor.rz.scp.css */
/* Ряд разделов админки — по виду сегментного переключателя кита, но из ссылок:
   разделы — обычные маршруты, и переход между ними обязан работать как переход. */

.vx-admt[b-xy0ylk810n] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    box-shadow: var(--inset-top);
    margin-bottom: 22px;
}

.vx-admt__tab[b-xy0ylk810n] {
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font: var(--type-small-strong);
    color: var(--text-2);
    text-decoration: none;
    transition: var(--transition-control);
}

.vx-admt__tab:hover[b-xy0ylk810n] {
    color: var(--text-1);
    background: var(--ghost-hover);
}

.vx-admt__tab--on[b-xy0ylk810n] {
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: var(--inset-top-strong);
}

.vx-admt__tab--on:hover[b-xy0ylk810n] {
    color: var(--accent-ink);
    background: var(--accent);
}

/* Число неразобранных сообщений об ошибках. Не значок дизайн-системы (Badge):
   тот рассчитан на строку статуса и в ряду вкладок ломает их высоту. Здесь
   нужен именно счётчик — маленький кружок с числом внутри ссылки. */
.vx-admt__tab[b-xy0ylk810n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vx-admt__count[b-xy0ylk810n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--accent-ink);
    font: var(--type-mono-s);
}

/* На выбранной вкладке фон уже акцентный — счётчик на нём потерялся бы,
   поэтому там он выворачивается. */
.vx-admt__tab--on .vx-admt__count[b-xy0ylk810n] {
    background: var(--accent-ink);
    color: var(--accent);
}
/* /Pages/Admin/BugReports.razor.rz.scp.css */
/* Разбор сообщений об ошибках: новое — во всю силу, закрытое приглушено.
   Оболочка vx-adm повторена в css каждой админ-страницы — изоляция стилей
   Blazor не даёт разделить её между страницами, а файлы должны сливаться
   независимо. */

.vx-adm[b-zygrl5mhgw] {
    min-height: 100vh;
}

.vx-adm__wrap[b-zygrl5mhgw] {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 28px 24px 48px;
}

.vx-adm__hero[b-zygrl5mhgw] {
    margin-bottom: 20px;
}

.vx-adm__title[b-zygrl5mhgw] {
    font: var(--type-display-l);
    color: var(--text-1);
    margin: 4px 0 0;
}

.vx-adm__sub[b-zygrl5mhgw] {
    font: var(--type-body);
    color: var(--text-2);
    max-width: 560px;
    margin: 6px 0 0;
}

.vx-adm__loading[b-zygrl5mhgw] {
    padding: 40px 24px;
    font: var(--type-body);
    color: var(--text-3);
}

.vx-admb__filter[b-zygrl5mhgw] {
    margin-bottom: 18px;
}

.vx-admb__list[b-zygrl5mhgw] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vx-admb__item[b-zygrl5mhgw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    border-left: 3px solid var(--border-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--inset-top);
}

/* Неразобранное отмечено полосой акцента: список открывают ради него. */
.vx-admb__item--new[b-zygrl5mhgw] {
    border-left-color: var(--accent);
}

.vx-admb__item--done[b-zygrl5mhgw] {
    opacity: 0.72;
}

.vx-admb__head[b-zygrl5mhgw] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.vx-admb__area[b-zygrl5mhgw] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: var(--type-small);
    color: var(--text-2);
}

.vx-admb__date[b-zygrl5mhgw] {
    margin-left: auto;
    font: var(--type-small);
    color: var(--text-3);
}

.vx-admb__body[b-zygrl5mhgw] {
    font: var(--type-body);
    color: var(--text-1);
    white-space: pre-wrap;
    margin: 0;
}

.vx-admb__shots[b-zygrl5mhgw] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Миниатюра — ссылка, поэтому рамка задаётся целиком: подчёркивание ссылок из
   base.css здесь превратилось бы в лишнюю черту под картинкой. */
.vx-admb__shot[b-zygrl5mhgw] {
    display: block;
    width: 140px;
    height: 96px;
    overflow: hidden;
    background: var(--surface-sunken);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    transition: var(--transition-control);
}

.vx-admb__shot:hover[b-zygrl5mhgw] {
    border-color: var(--accent);
}

.vx-admb__shot img[b-zygrl5mhgw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Технический контекст — плотной сеткой пар: его читают глазами по диагонали,
   а не изучают построчно. */
.vx-admb__facts[b-zygrl5mhgw] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 2px 0 0;
}

.vx-admb__facts > div[b-zygrl5mhgw] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.vx-admb__facts dt[b-zygrl5mhgw] {
    font: var(--type-caption);
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vx-admb__facts dd[b-zygrl5mhgw] {
    font: var(--type-small);
    color: var(--text-2);
    margin: 0;
    min-width: 0;
}

/* Адрес страницы и строка браузера бывают безразмерными: они не должны
   растягивать карточку и ломать раскладку остального. */
.vx-admb__url[b-zygrl5mhgw],
.vx-admb__ua[b-zygrl5mhgw] {
    max-width: 46ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-admb__anon[b-zygrl5mhgw] {
    font: var(--type-caption);
    color: var(--text-3);
    margin: 0;
}

.vx-admb__work[b-zygrl5mhgw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.vx-admb__buttons[b-zygrl5mhgw] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.vx-admb__confirm[b-zygrl5mhgw] {
    margin-right: auto;
    font: var(--type-small);
    color: var(--text-danger);
}

.vx-admb__resolved[b-zygrl5mhgw] {
    font: var(--type-small);
    color: var(--text-3);
    margin: 0;
    text-align: right;
}

.vx-admb__error[b-zygrl5mhgw] {
    font: var(--type-small);
    color: var(--text-danger);
    margin: 0;
}

/* Телефон: отступ по краям уже даёт раскладка, второй его удваивал. */
@media (max-width: 640px) {
    .vx-adm__wrap[b-zygrl5mhgw] {
        padding-left: 0;
        padding-right: 0;
    }
}
/* /Pages/Admin/Complaints.razor.rz.scp.css */
/* Журнал обращений: новые — во всю силу, разобранные приглушены, но на месте.
   Оболочка vx-adm повторена в css каждой админ-страницы — изоляция стилей
   Blazor не даёт разделить её между страницами, а файлы должны сливаться
   независимо. */

.vx-adm[b-aggjrv2001] {
    min-height: 100vh;
}

.vx-adm__wrap[b-aggjrv2001] {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 28px 24px 48px;
}

.vx-adm__hero[b-aggjrv2001] {
    margin-bottom: 20px;
}

.vx-adm__title[b-aggjrv2001] {
    font: var(--type-display-l);
    color: var(--text-1);
    margin: 4px 0 0;
}

.vx-adm__sub[b-aggjrv2001] {
    font: var(--type-body);
    color: var(--text-2);
    max-width: 560px;
    margin: 6px 0 0;
}

.vx-adm__loading[b-aggjrv2001] {
    padding: 40px 24px;
    font: var(--type-body);
    color: var(--text-3);
}

.vx-admc__filter[b-aggjrv2001] {
    margin-bottom: 18px;
}

.vx-admc__list[b-aggjrv2001] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vx-admc__item[b-aggjrv2001] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--inset-top);
}

/* Разобранное: серо-спокойный вид «это уже история» — но текст и решение
   читаются, журнал на то и журнал. */
.vx-admc__item--done[b-aggjrv2001] {
    border-left-color: var(--border-2);
    opacity: 0.72;
}

.vx-admc__head[b-aggjrv2001] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.vx-admc__kind[b-aggjrv2001] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: var(--type-small);
    color: var(--text-2);
}

.vx-admc__date[b-aggjrv2001] {
    margin-left: auto;
    font: var(--type-small);
    color: var(--text-3);
}

.vx-admc__pack[b-aggjrv2001] {
    font: var(--type-title);
    color: var(--text-1);
    margin: 0;
}

.vx-admc__body[b-aggjrv2001] {
    font: var(--type-body);
    color: var(--text-1);
    white-space: pre-wrap;
    margin: 0;
}

.vx-admc__contact[b-aggjrv2001] {
    display: flex;
    align-items: center;
    gap: 6px;
    font: var(--type-small);
    color: var(--text-2);
    margin: 0;
}

.vx-admc__resolved[b-aggjrv2001] {
    font: var(--type-small);
    color: var(--text-3);
    margin: 8px 0 0;
}

.vx-admc__note[b-aggjrv2001] {
    font: var(--type-small);
    color: var(--text-3);
    margin: 0;
}

.vx-admc__resolve[b-aggjrv2001] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.vx-admc__buttons[b-aggjrv2001] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.vx-admc__error[b-aggjrv2001] {
    font: var(--type-small);
    color: var(--text-danger);
    margin: 0;
}

/* Телефон: отступ по краям уже даёт раскладка, второй его удваивал. */
@media (max-width: 640px) {
    .vx-adm__wrap[b-aggjrv2001] {
        padding-left: 0;
        padding-right: 0;
    }
}
/* /Pages/Admin/FrameEditor.razor.rz.scp.css */
.vx-fred[b-zvs60m61vp]{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:16px}
.vx-fred__side[b-zvs60m61vp]{display:flex;flex-direction:column;gap:6px;min-width:0}
.vx-fred__label[b-zvs60m61vp]{font:var(--type-caption);color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.vx-fred__code[b-zvs60m61vp]{min-height:260px;resize:vertical;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--border-2);
  background:var(--surface-sunken);color:var(--text-1);font:var(--type-mono-s);tab-size:2;white-space:pre;overflow:auto}
.vx-fred__code:focus-visible[b-zvs60m61vp]{outline:none;box-shadow:var(--ring)}
.vx-fred__error[b-zvs60m61vp]{font:var(--type-small);color:var(--text-danger)}
.vx-fred__help[b-zvs60m61vp]{font:var(--type-small);color:var(--text-2)}
.vx-fred__help summary[b-zvs60m61vp]{cursor:pointer;color:var(--text-accent)}
.vx-fred__help ul[b-zvs60m61vp]{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.vx-fred__help code[b-zvs60m61vp]{font:var(--type-mono-s);color:var(--text-1)}
/* Превью — на утопленном фоне с запасом по краям: свечение и «извивы» рамки
   выходят за аватарку, и их должно быть видно целиком. */
.vx-fred__live[b-zvs60m61vp]{display:flex;flex-direction:column;gap:18px;align-items:stretch;padding:18px;border-radius:var(--radius-md);
  background:var(--surface-sunken);border:1px solid var(--border-1)}
.vx-fred__sizes[b-zvs60m61vp]{display:flex;align-items:center;justify-content:space-around;gap:14px;min-height:110px}

@media (max-width:640px){
  .vx-fred[b-zvs60m61vp]{grid-template-columns:minmax(0,1fr)}
}
/* /Pages/Admin/Grants.razor.rz.scp.css */
/* Премиум в админке: форма выдачи сверху, журнал ниже.
   Оболочка vx-adm повторена в css каждой админ-страницы — изоляция стилей
   Blazor не даёт разделить её между страницами. */

.vx-adm[b-n08yk7nlpc]{min-height:100vh}
.vx-adm__wrap[b-n08yk7nlpc]{max-width:var(--content-max);margin:0 auto;padding:28px 24px 48px}
.vx-adm__hero[b-n08yk7nlpc]{margin-bottom:20px}
.vx-adm__title[b-n08yk7nlpc]{font:var(--type-display-l);color:var(--text-1);margin:4px 0 0}
.vx-adm__sub[b-n08yk7nlpc]{font:var(--type-body);color:var(--text-2);max-width:560px;margin:6px 0 0}
.vx-adm__loading[b-n08yk7nlpc]{padding:40px 24px;font:var(--type-body);color:var(--text-3)}
.vx-adm__error[b-n08yk7nlpc]{font:var(--type-small);color:var(--text-danger);margin:0 0 12px}

.vx-admgr__h2[b-n08yk7nlpc]{font:var(--type-title);color:var(--text-1);margin:0}

.vx-admgr__issue[b-n08yk7nlpc]{display:flex;flex-direction:column;gap:var(--space-3);max-width:560px;
  padding:var(--pad-card);margin:var(--space-5) 0 var(--space-8);
  background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--radius-lg)}
.vx-admgr__find[b-n08yk7nlpc]{display:flex;gap:var(--space-2);align-items:flex-end}
.vx-admgr__user[b-n08yk7nlpc]{display:flex;justify-content:space-between;gap:var(--space-3);text-align:left;
  padding:var(--space-2) var(--space-3);border:1px solid var(--border-1);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--text-1);font:var(--type-small);cursor:pointer}
.vx-admgr__user:hover[b-n08yk7nlpc]{border-color:var(--border-2)}
.vx-admgr__user span[b-n08yk7nlpc]{color:var(--text-3)}
.vx-admgr__target[b-n08yk7nlpc]{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);
  font:var(--type-small);color:var(--text-2)}
.vx-admgr__target strong[b-n08yk7nlpc]{color:var(--text-1)}
.vx-admgr__msg[b-n08yk7nlpc]{margin:0;font:var(--type-small);color:var(--text-2)}

.vx-admgr__log[b-n08yk7nlpc]{display:flex;flex-direction:column;gap:var(--space-4)}
.vx-admgr__logbar[b-n08yk7nlpc]{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.vx-admgr__empty[b-n08yk7nlpc]{font:var(--type-body);color:var(--text-3);margin:0}

/* Журнал — строками-сетками, а не таблицей: на телефоне колонки
   складываются в карточку без второй разметки. */
.vx-admgr__rows[b-n08yk7nlpc]{display:flex;flex-direction:column}
.vx-admgr__row[b-n08yk7nlpc]{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,1.4fr) auto;
  gap:var(--space-3);align-items:start;padding:var(--space-3) 0;border-bottom:1px solid var(--border-1)}
.vx-admgr__row > div[b-n08yk7nlpc]{display:flex;flex-direction:column;gap:2px;min-width:0;font:var(--type-small);color:var(--text-3)}
.vx-admgr__row strong[b-n08yk7nlpc]{color:var(--text-1);font-weight:600}
.vx-admgr__who span[b-n08yk7nlpc],.vx-admgr__comment[b-n08yk7nlpc]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-admgr__comment[b-n08yk7nlpc]{color:var(--text-2)}
.vx-admgr__row--off[b-n08yk7nlpc]{opacity:.55}
.vx-admgr__off[b-n08yk7nlpc]{font:var(--type-small);color:var(--text-3)}
.vx-admgr__pages[b-n08yk7nlpc]{display:flex;gap:var(--space-2)}

@media (max-width:640px){
  .vx-adm__wrap[b-n08yk7nlpc]{padding-left:0;padding-right:0}
  .vx-admgr__row[b-n08yk7nlpc]{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
}
/* /Pages/Admin/Moderation.razor.rz.scp.css */
/* Очередь модерации: карточка-заявка, превью слева, решение справа.
   Оболочка vx-adm повторена в css каждой админ-страницы — изоляция стилей
   Blazor не даёт разделить её между страницами, а файлы должны сливаться
   независимо. */

.vx-adm[b-ln8822apvk] {
    min-height: 100vh;
}

.vx-adm__wrap[b-ln8822apvk] {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 28px 24px 48px;
}

.vx-adm__hero[b-ln8822apvk] {
    margin-bottom: 20px;
}

.vx-adm__title[b-ln8822apvk] {
    font: var(--type-display-l);
    color: var(--text-1);
    margin: 4px 0 0;
}

.vx-adm__sub[b-ln8822apvk] {
    font: var(--type-body);
    color: var(--text-2);
    max-width: 560px;
    margin: 6px 0 0;
}

.vx-adm__loading[b-ln8822apvk] {
    padding: 40px 24px;
    font: var(--type-body);
    color: var(--text-3);
}

.vx-admm__list[b-ln8822apvk] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vx-admm__item[b-ln8822apvk] {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 18px;
    padding: 16px;
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-lg);
    box-shadow: var(--inset-top);
}

/* Превью — видео во врезке на тёмной подложке: пейлеры каталога здесь читаются
   так же, как на витрине. Высоту рамки держит сам видеопоток. */
.vx-admm__preview[b-ln8822apvk] {
    display: block;
    overflow: hidden;
    width: 100%;
    border-radius: var(--radius-md);
    background: var(--warm-950);
    aspect-ratio: 16 / 9;
}

.vx-admm__info[b-ln8822apvk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.vx-admm__name[b-ln8822apvk] {
    font: var(--type-title);
    color: var(--text-1);
    margin: 0;
}

.vx-admm__meta[b-ln8822apvk] {
    font: var(--type-small);
    color: var(--text-3);
    margin: 0;
}

/* Описание из заявки: его читают перед решением, поэтому оно светлее меты. */
.vx-admm__desc[b-ln8822apvk] {
    font: var(--type-small);
    color: var(--text-2);
    margin: 8px 0 0;
    white-space: pre-line;
}

.vx-admm__buttons[b-ln8822apvk] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
}

/* Подсказка у мёртвой кнопки: почему она мертва, человек должен читать,
   а не догадываться. */
.vx-admm__hint[b-ln8822apvk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: var(--type-small);
    color: var(--text-3);
    margin-right: auto;
}

.vx-admm__error[b-ln8822apvk] {
    font: var(--type-small);
    color: var(--text-danger);
    margin: 0;
}

.vx-admm__reject[b-ln8822apvk] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.vx-admm__reject .vx-admm__buttons[b-ln8822apvk] {
    margin-top: 0;
    padding-top: 0;
    justify-content: flex-end;
}

@media (max-width: 720px) {
    .vx-admm__item[b-ln8822apvk] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Телефон: отступ по краям уже даёт раскладка, второй его удваивал. */
@media (max-width: 640px) {
    .vx-adm__wrap[b-ln8822apvk] {
        padding-left: 0;
        padding-right: 0;
    }
}
/* /Pages/Admin/Payments.razor.rz.scp.css */
/* Покупки в админке: доход за месяц сверху, список ниже. Строки — та же
   сетка, что у журнала выдач; оболочка vx-adm повторена, потому что изоляция
   стилей Blazor не даёт разделить её между страницами. */

.vx-adm[b-c9lc4juej1]{min-height:100vh}
.vx-adm__wrap[b-c9lc4juej1]{max-width:var(--content-max);margin:0 auto;padding:28px 24px 48px}
.vx-adm__hero[b-c9lc4juej1]{margin-bottom:20px}
.vx-adm__title[b-c9lc4juej1]{font:var(--type-display-l);color:var(--text-1);margin:4px 0 0}
.vx-adm__sub[b-c9lc4juej1]{font:var(--type-body);color:var(--text-2);max-width:560px;margin:6px 0 0}
.vx-adm__loading[b-c9lc4juej1]{padding:40px 24px;font:var(--type-body);color:var(--text-3)}
.vx-adm__error[b-c9lc4juej1]{font:var(--type-small);color:var(--text-danger);margin:0 0 12px}

.vx-admgr__h2[b-c9lc4juej1]{font:var(--type-title);color:var(--text-1);margin:0}

.vx-admgr__issue[b-c9lc4juej1]{display:flex;flex-direction:column;gap:var(--space-3);max-width:560px;
  padding:var(--pad-card);margin:var(--space-5) 0 var(--space-8);
  background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--radius-lg)}
.vx-admgr__find[b-c9lc4juej1]{display:flex;gap:var(--space-2);align-items:flex-end}
.vx-admgr__user[b-c9lc4juej1]{display:flex;justify-content:space-between;gap:var(--space-3);text-align:left;
  padding:var(--space-2) var(--space-3);border:1px solid var(--border-1);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--text-1);font:var(--type-small);cursor:pointer}
.vx-admgr__user:hover[b-c9lc4juej1]{border-color:var(--border-2)}
.vx-admgr__user span[b-c9lc4juej1]{color:var(--text-3)}
.vx-admgr__target[b-c9lc4juej1]{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);
  font:var(--type-small);color:var(--text-2)}
.vx-admgr__target strong[b-c9lc4juej1]{color:var(--text-1)}
.vx-admgr__msg[b-c9lc4juej1]{margin:0;font:var(--type-small);color:var(--text-2)}

.vx-admgr__log[b-c9lc4juej1]{display:flex;flex-direction:column;gap:var(--space-4)}
.vx-admgr__logbar[b-c9lc4juej1]{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.vx-admgr__empty[b-c9lc4juej1]{font:var(--type-body);color:var(--text-3);margin:0}

/* Журнал — строками-сетками, а не таблицей: на телефоне колонки
   складываются в карточку без второй разметки. */
.vx-admgr__rows[b-c9lc4juej1]{display:flex;flex-direction:column}
.vx-admgr__row[b-c9lc4juej1]{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,1.4fr) auto;
  gap:var(--space-3);align-items:start;padding:var(--space-3) 0;border-bottom:1px solid var(--border-1)}
.vx-admgr__row > div[b-c9lc4juej1]{display:flex;flex-direction:column;gap:2px;min-width:0;font:var(--type-small);color:var(--text-3)}
.vx-admgr__row strong[b-c9lc4juej1]{color:var(--text-1);font-weight:600}
.vx-admgr__who span[b-c9lc4juej1],.vx-admgr__comment[b-c9lc4juej1]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-admgr__comment[b-c9lc4juej1]{color:var(--text-2)}
.vx-admgr__row--off[b-c9lc4juej1]{opacity:.55}
.vx-admgr__off[b-c9lc4juej1]{font:var(--type-small);color:var(--text-3)}
.vx-admgr__pages[b-c9lc4juej1]{display:flex;gap:var(--space-2)}

@media (max-width:640px){
  .vx-adm__wrap[b-c9lc4juej1]{padding-left:0;padding-right:0}
  .vx-admgr__row[b-c9lc4juej1]{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
}

/* Доход за месяц — две цифры для сверки с «Моим налогом». */
.vx-admpay__income[b-c9lc4juej1]{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-8);align-items:baseline;
  padding:var(--pad-card);margin:var(--space-5) 0 var(--space-8);
  background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--radius-lg)}
.vx-admpay__income > div[b-c9lc4juej1]{display:flex;flex-direction:column;gap:2px}
.vx-admpay__income span[b-c9lc4juej1]{font:var(--type-small);color:var(--text-3)}
.vx-admpay__income strong[b-c9lc4juej1]{font:var(--type-title);color:var(--text-1)}
.vx-admpay__income p[b-c9lc4juej1]{flex-basis:100%;margin:0;font:var(--type-small);color:var(--text-3)}

.vx-admpay__only[b-c9lc4juej1]{margin:0;font:var(--type-small);color:var(--text-2)}
.vx-admpay__link[b-c9lc4juej1]{padding:0;border:0;background:none;color:var(--text-accent);font:inherit;cursor:pointer}
.vx-admpay__st[b-c9lc4juej1]{color:var(--text-2)}
.vx-admpay__st--paid[b-c9lc4juej1]{color:var(--text-1)}
.vx-admpay__st--muted[b-c9lc4juej1]{color:var(--text-3)}

.vx-admpay__refund[b-c9lc4juej1]{display:flex;flex-direction:column;gap:var(--space-3);font:var(--type-body);color:var(--text-2)}
.vx-admpay__refund p[b-c9lc4juej1]{margin:0}
.vx-admpay__refund strong[b-c9lc4juej1]{color:var(--text-1)}
.vx-admpay__refund ul[b-c9lc4juej1]{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font:var(--type-small)}
.vx-admpay__warn[b-c9lc4juej1]{padding:var(--space-3);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-1)}
/* /Pages/Admin/Proxy.razor.rz.scp.css */
/* Настройки прокси: заметка о хранилище сверху, три карточки направлений ниже.
   Оболочка vx-adm повторена в css каждой админ-страницы — изоляция стилей
   Blazor не даёт разделить её между страницами, а файлы должны сливаться
   независимо. */

.vx-adm[b-gnc7pc2an7] {
    min-height: 100vh;
}

.vx-adm__wrap[b-gnc7pc2an7] {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 28px 24px 48px;
}

.vx-adm__hero[b-gnc7pc2an7] {
    margin-bottom: 20px;
}

.vx-adm__title[b-gnc7pc2an7] {
    font: var(--type-display-l);
    color: var(--text-1);
    margin: 4px 0 0;
}

.vx-adm__sub[b-gnc7pc2an7] {
    font: var(--type-body);
    color: var(--text-2);
    max-width: 560px;
    margin: 6px 0 0;
}

.vx-adm__loading[b-gnc7pc2an7] {
    padding: 40px 24px;
    font: var(--type-body);
    color: var(--text-3);
}

/* Заметка «не ищите проблему не там» — плоская карточка, читается до форм. */
.vx-admp__notice[b-gnc7pc2an7] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-lg);
    font: var(--type-small);
    color: var(--text-2);
    margin-bottom: 16px;
}

.vx-admp__cards[b-gnc7pc2an7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    align-items: start;
}

/* Телефон: отступ по краям уже даёт раскладка, второй его удваивал. */
@media (max-width: 640px) {
    .vx-adm__wrap[b-gnc7pc2an7] {
        padding-left: 0;
        padding-right: 0;
    }
}
/* /Pages/Admin/ProxyCard.razor.rz.scp.css */
/* Карточка направления прокси. Разметка внутри Card, поэтому всё здесь —
   про внутренности формы: рамки и фон даёт сам Card. */

.vx-admp__cardhead[b-6hlf0l4hyu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.vx-admp__cardname[b-6hlf0l4hyu] {
    font: var(--type-title);
    color: var(--text-1);
    margin: 0;
}

.vx-admp__cardrole[b-6hlf0l4hyu] {
    font: var(--type-small);
    color: var(--text-3);
    margin: 2px 0 0;
}

/* Состояние направления: последний успешный вызов и ошибки за сутки. */
.vx-admp__status[b-6hlf0l4hyu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    font: var(--type-small);
    color: var(--text-2);
    margin: 0 0 14px;
}

.vx-admp__errors[b-6hlf0l4hyu] {
    color: var(--text-3);
}

.vx-admp__form[b-6hlf0l4hyu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Порт и логин живут в одну строку: оба короткие, а карточек три.
   Колонки — minmax(0, 1fr), а не 1fr: собственная ширина поля ввода около
   200px, и от «1fr» колонка получала бы её как минимум — пара вылезала бы
   за карточку и налезала на соседнюю. */
.vx-admp__pair[b-6hlf0l4hyu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.vx-admp__error[b-6hlf0l4hyu] {
    font: var(--type-small);
    color: var(--text-danger);
    margin: 12px 0 0;
}

/* Ответ пробы — моноширинно по брифу: и задержка в мс, и текст ошибки
   читаются как технический вывод, а не как реплика интерфейса. */
.vx-admp__probe[b-6hlf0l4hyu] {
    font: var(--type-mono-s);
    color: var(--text-1);
    background: var(--surface-3);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin: 12px 0 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.vx-admp__actions[b-6hlf0l4hyu] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

/* «Сохранено» — отдельной строкой над кнопками: в один ряд с ними оно не
   помещается, и кнопки переносились, уезжая из-под курсора сразу после
   нажатия. */
.vx-admp__saved[b-6hlf0l4hyu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    justify-content: flex-end;
    font: var(--type-small);
    color: var(--status-ready);
}

@media (max-width: 480px) {
    .vx-admp__pair[b-6hlf0l4hyu] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Pages/Admin/Sounds.razor.rz.scp.css */
/* Словарь тегов: заметка про механику/настроение сверху, плоский список строк ниже.
   Оболочка vx-adm повторена в css каждой админ-страницы — изоляция стилей
   Blazor не даёт разделить её между страницами, а файлы должны сливаться
   независимо. */

.vx-adm[b-a19gprfjrf] {
    min-height: 100vh;
}

.vx-adm__wrap[b-a19gprfjrf] {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 28px 24px 48px;
}

.vx-adm__hero[b-a19gprfjrf] {
    margin-bottom: 20px;
}

.vx-adm__title[b-a19gprfjrf] {
    font: var(--type-display-l);
    color: var(--text-1);
    margin: 4px 0 0;
}

.vx-adm__sub[b-a19gprfjrf] {
    font: var(--type-body);
    color: var(--text-2);
    max-width: 560px;
    margin: 6px 0 0;
}

.vx-adm__loading[b-a19gprfjrf] {
    padding: 40px 24px;
    font: var(--type-body);
    color: var(--text-3);
}

.vx-adm__error[b-a19gprfjrf] {
    font: var(--type-small);
    color: var(--text-danger);
    margin: 0 0 12px;
}


/* Звуки: загрузка сверху, ниже — группы по категориям, строка на звук. */
.vx-admsnd__upload[b-a19gprfjrf] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    flex-wrap: wrap;
}

.vx-admsnd__upload label[b-a19gprfjrf] {
    cursor: pointer;
}

.vx-admsnd__hint[b-a19gprfjrf] {
    font: var(--type-small);
    color: var(--text-3);
}

.vx-admsnd__group[b-a19gprfjrf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: var(--space-6);
}

.vx-admsnd__h[b-a19gprfjrf] {
    margin: 0 0 var(--space-2);
    font: var(--type-title);
    color: var(--text-1);
}

.vx-admsnd__h span[b-a19gprfjrf] {
    font: var(--type-small);
    color: var(--text-3);
    margin-left: 6px;
}

.vx-admsnd__row[b-a19gprfjrf] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 6px 10px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    background: var(--surface-1);
}

.vx-admsnd__row.is-off[b-a19gprfjrf] {
    opacity: .55;
}

.vx-admsnd__name[b-a19gprfjrf] {
    flex: 1;
    min-width: 0;
    font: var(--type-body-strong);
    color: var(--text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-admsnd__meta[b-a19gprfjrf] {
    font: var(--type-small);
    color: var(--text-3);
    white-space: nowrap;
}

.vx-admsnd__form[b-a19gprfjrf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.vx-admsnd__replace[b-a19gprfjrf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* /Pages/Admin/Stats.razor.rz.scp.css */
/* Статистика: оболочка vx-adm повторена — изоляция стилей Blazor не даёт
   разделить её между страницами (см. Payments.razor.css). */

.vx-adm[b-c3dn8dt7hr]{min-height:100vh}
.vx-adm__wrap[b-c3dn8dt7hr]{max-width:var(--content-max);margin:0 auto;padding:28px 24px 48px}
.vx-adm__hero[b-c3dn8dt7hr]{margin-bottom:20px}
.vx-adm__title[b-c3dn8dt7hr]{font:var(--type-display-l);color:var(--text-1);margin:4px 0 0}
.vx-adm__sub[b-c3dn8dt7hr]{font:var(--type-body);color:var(--text-2);max-width:620px;margin:6px 0 0}
.vx-adm__loading[b-c3dn8dt7hr]{padding:40px 24px;font:var(--type-body);color:var(--text-3)}
.vx-adm__error[b-c3dn8dt7hr]{font:var(--type-small);color:var(--text-danger);margin:0 0 12px}

.vx-stats__bar[b-c3dn8dt7hr]{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin:0 0 var(--space-5)}
.vx-stats__range[b-c3dn8dt7hr]{font:var(--type-small);color:var(--text-3)}

.vx-stats__now[b-c3dn8dt7hr]{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-6);margin:0 0 var(--space-4)}
.vx-stats__now > div[b-c3dn8dt7hr]{display:flex;align-items:baseline;gap:var(--space-2);font:var(--type-small);color:var(--text-2)}
.vx-stats__now strong[b-c3dn8dt7hr]{font:var(--type-title);color:var(--text-1)}
.vx-stats__now p[b-c3dn8dt7hr]{flex-basis:100%;margin:0;font:var(--type-small);color:var(--text-3)}

.vx-stats__cards[b-c3dn8dt7hr]{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3);margin:0 0 var(--space-4)}
.vx-stats__card[b-c3dn8dt7hr]{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--pad-card);
  background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--radius-lg)}
.vx-stats__cardtitle[b-c3dn8dt7hr]{font:var(--type-small);color:var(--text-2)}
.vx-stats__cardvalue[b-c3dn8dt7hr]{font:var(--type-display-m);color:var(--text-1);font-variant-numeric:tabular-nums}
.vx-stats__delta[b-c3dn8dt7hr]{font:var(--type-small);color:var(--text-3)}
.vx-stats__delta--up[b-c3dn8dt7hr]{color:var(--status-ready)}
.vx-stats__delta--down[b-c3dn8dt7hr]{color:var(--status-failed)}

.vx-stats__charts[b-c3dn8dt7hr]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin:0 0 var(--space-8)}

.vx-stats__block[b-c3dn8dt7hr]{display:flex;flex-direction:column;gap:var(--space-3);margin:0 0 var(--space-8)}
.vx-stats__h2[b-c3dn8dt7hr]{font:var(--type-title);color:var(--text-1);margin:0}
.vx-stats__h3[b-c3dn8dt7hr]{font:var(--type-body);font-weight:600;color:var(--text-1);margin:var(--space-4) 0 0}
.vx-stats__hint[b-c3dn8dt7hr]{margin:0;font:var(--type-small);color:var(--text-3);max-width:640px}
.vx-stats__warn[b-c3dn8dt7hr]{margin:0;font:var(--type-small);color:var(--status-review);max-width:640px}
.vx-stats__empty[b-c3dn8dt7hr]{margin:0;font:var(--type-body);color:var(--text-3)}

.vx-stats__tablewrap[b-c3dn8dt7hr]{overflow-x:auto}
.vx-stats__table[b-c3dn8dt7hr]{border-collapse:collapse;min-width:520px;font:var(--type-small);color:var(--text-1)}
.vx-stats__table th[b-c3dn8dt7hr],.vx-stats__table td[b-c3dn8dt7hr]{padding:var(--space-2) var(--space-4) var(--space-2) 0;text-align:left;
  border-bottom:1px solid var(--border-1);font-variant-numeric:tabular-nums}
.vx-stats__table thead th[b-c3dn8dt7hr]{color:var(--text-3);font-weight:500}
.vx-stats__table tbody th[b-c3dn8dt7hr]{font-weight:500;color:var(--text-2)}

.vx-stats__facts[b-c3dn8dt7hr]{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.vx-stats__facts > div[b-c3dn8dt7hr]{display:flex;flex-direction:column;gap:2px;min-width:150px;padding:var(--space-3) var(--space-4);
  background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--radius-md);font:var(--type-small);color:var(--text-2)}
.vx-stats__facts strong[b-c3dn8dt7hr]{font:var(--type-title);color:var(--text-1)}

.vx-stats__sizes[b-c3dn8dt7hr]{display:flex;flex-direction:column;gap:var(--space-2);max-width:520px}
.vx-stats__size[b-c3dn8dt7hr]{display:grid;grid-template-columns:110px minmax(0,1fr) 40px;gap:var(--space-3);align-items:center;
  font:var(--type-small);color:var(--text-2)}
.vx-stats__size strong[b-c3dn8dt7hr]{color:var(--text-1);text-align:right}
.vx-stats__sizebar[b-c3dn8dt7hr]{height:10px;background:var(--surface-2);border-radius:var(--radius-sm);overflow:hidden}
.vx-stats__sizebar > div[b-c3dn8dt7hr]{height:100%;background:var(--accent)}

@media (max-width:720px){
  .vx-stats__charts[b-c3dn8dt7hr]{grid-template-columns:1fr}
}

@media (max-width:640px){
  .vx-adm__wrap[b-c3dn8dt7hr]{padding:20px 16px 40px}
}
/* /Pages/Admin/StatsChart.razor.rz.scp.css */
.vx-chart[b-mssfpnsr67]{margin:0;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--pad-card);
  background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--radius-lg);min-width:0}
.vx-chart__head[b-mssfpnsr67]{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);
  font:var(--type-small);color:var(--text-2)}
.vx-chart__head strong[b-mssfpnsr67]{font:var(--type-title);color:var(--text-1)}
.vx-chart__plot[b-mssfpnsr67]{width:100%;height:96px;display:block}
.vx-chart__bar[b-mssfpnsr67]{fill:var(--accent)}
.vx-chart__bar:hover[b-mssfpnsr67]{fill:var(--accent-hover)}
/* Нулевой день — тонкая черта, а не пустота: видно, что день был и в нём ноль. */
.vx-chart__bar--zero[b-mssfpnsr67]{fill:var(--border-2)}
.vx-chart__axis[b-mssfpnsr67]{display:flex;justify-content:space-between;font:var(--type-small);color:var(--text-3)}
/* /Pages/Admin/StatsFunnel.razor.rz.scp.css */
.vx-funnel[b-ng7fgjl2g3]{display:flex;flex-direction:column;gap:var(--space-2)}
.vx-funnel__row[b-ng7fgjl2g3]{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) 130px;gap:var(--space-3);align-items:center;
  font:var(--type-small);color:var(--text-2)}
.vx-funnel__track[b-ng7fgjl2g3]{position:relative;height:28px;background:var(--surface-2);border-radius:var(--radius-sm);overflow:hidden}
.vx-funnel__bar[b-ng7fgjl2g3]{height:100%;background:var(--accent-soft);border-right:2px solid var(--accent)}
.vx-funnel__count[b-ng7fgjl2g3]{position:absolute;left:var(--space-2);top:50%;transform:translateY(-50%);color:var(--text-1)}
.vx-funnel__conv[b-ng7fgjl2g3]{color:var(--text-3);text-align:right}

@media (max-width:640px){
  .vx-funnel__row[b-ng7fgjl2g3]{grid-template-columns:1fr auto}
  .vx-funnel__track[b-ng7fgjl2g3]{grid-column:1 / -1;grid-row:2}
}
/* /Pages/Admin/Tags.razor.rz.scp.css */
/* Словарь тегов: заметка про механику/настроение сверху, плоский список строк ниже.
   Оболочка vx-adm повторена в css каждой админ-страницы — изоляция стилей
   Blazor не даёт разделить её между страницами, а файлы должны сливаться
   независимо. */

.vx-adm[b-qscjbkrhs5] {
    min-height: 100vh;
}

.vx-adm__wrap[b-qscjbkrhs5] {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 28px 24px 48px;
}

.vx-adm__hero[b-qscjbkrhs5] {
    margin-bottom: 20px;
}

.vx-adm__title[b-qscjbkrhs5] {
    font: var(--type-display-l);
    color: var(--text-1);
    margin: 4px 0 0;
}

.vx-adm__sub[b-qscjbkrhs5] {
    font: var(--type-body);
    color: var(--text-2);
    max-width: 560px;
    margin: 6px 0 0;
}

.vx-adm__loading[b-qscjbkrhs5] {
    padding: 40px 24px;
    font: var(--type-body);
    color: var(--text-3);
}

.vx-adm__error[b-qscjbkrhs5] {
    font: var(--type-small);
    color: var(--text-danger);
    margin: 0 0 12px;
}

.vx-admtg__notice[b-qscjbkrhs5] {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-lg);
    font: var(--type-small);
    color: var(--text-2);
}

.vx-admtg__list[b-qscjbkrhs5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.vx-admtg__row[b-qscjbkrhs5] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-md);
}

.vx-admtg__row--edit[b-qscjbkrhs5] {
    align-items: flex-end;
}

.vx-admtg__name[b-qscjbkrhs5] {
    flex: 1;
    font: var(--type-body);
    color: var(--text-1);
}

.vx-admtg__use[b-qscjbkrhs5] {
    font: var(--type-small);
    color: var(--text-3);
}

/* Телефон: отступ по краям уже даёт раскладка, второй его удваивал. */
@media (max-width: 640px) {
    .vx-adm__wrap[b-qscjbkrhs5] {
        padding-left: 0;
        padding-right: 0;
    }
}
/* /Pages/Admin/ThemeEditor.razor.rz.scp.css */
.vx-thed[b-6oqebdl2md]{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px}
.vx-thed__side[b-6oqebdl2md]{display:flex;flex-direction:column;gap:10px;min-width:0}
.vx-thed__base[b-6oqebdl2md]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}
.vx-thed__row[b-6oqebdl2md]{display:flex;align-items:center;gap:8px;min-width:0}
.vx-thed__pick[b-6oqebdl2md]{flex:none;width:30px;height:26px;padding:0;border:1px solid var(--border-2);border-radius:var(--radius-sm);
  background:transparent;cursor:pointer}
.vx-thed__swatch[b-6oqebdl2md]{flex:none;width:22px;height:22px;border-radius:var(--radius-sm);border:1px solid var(--border-2)}
.vx-thed__name[b-6oqebdl2md]{flex:1;min-width:0;font:var(--type-small);color:var(--text-2)}
.vx-thed__text[b-6oqebdl2md]{flex:none;width:96px;height:28px;padding:0 8px;border-radius:var(--radius-sm);border:1px solid var(--border-2);
  background:var(--surface-sunken);color:var(--text-1);font:var(--type-mono-s)}
.vx-thed__text--bad[b-6oqebdl2md]{border-color:var(--status-failed)}
/* В «Всех цветах» бывают rgba(…) — полю нужно место. */
.vx-thed__all .vx-thed__text[b-6oqebdl2md]{width:190px}
.vx-thed__all[b-6oqebdl2md]{display:flex;flex-direction:column;gap:6px;font:var(--type-small);color:var(--text-2)}
.vx-thed__all summary[b-6oqebdl2md]{cursor:pointer;color:var(--text-accent);margin-bottom:6px}
.vx-thed__group[b-6oqebdl2md]{margin-top:8px;font:var(--type-caption);color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.vx-thed__error[b-6oqebdl2md]{font:var(--type-small);color:var(--text-danger)}

/* Превью — кусочек профиля в цветах темы: переменные заданы на этом блоке
   в style, поэтому все var() внутри берут цвета темы, а не сайта. */
.vx-thed__live[b-6oqebdl2md]{display:flex;flex-direction:column;gap:12px;align-self:start;padding-bottom:14px;border-radius:var(--radius-md);
  overflow:hidden;border:1px solid var(--border-2);background:var(--bg-app-glow),var(--bg-app);color:var(--text-1)}
.vx-thed__banner[b-6oqebdl2md]{height:80px;background:var(--profile-banner)}
.vx-thed__who[b-6oqebdl2md]{display:flex;align-items:flex-end;gap:10px;margin-top:-30px;padding:0 14px}
.vx-thed__avatar[b-6oqebdl2md]{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  background:var(--surface-3);color:var(--text-1);font:var(--type-title);box-shadow:0 0 0 4px var(--bg-app)}
.vx-thed__title[b-6oqebdl2md]{display:block;font:var(--type-title);color:var(--text-1)}
.vx-thed__sub[b-6oqebdl2md]{display:block;font:var(--type-caption);color:var(--text-3)}
.vx-thed__stats[b-6oqebdl2md]{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px}
.vx-thed__stat[b-6oqebdl2md]{display:flex;flex-direction:column-reverse;padding:8px 10px;border-radius:var(--radius-sm);background:var(--surface-1);
  border:1px solid var(--border-1);font:var(--type-caption);color:var(--text-3)}
.vx-thed__stat b[b-6oqebdl2md]{font:var(--type-title);color:var(--accent)}
.vx-thed__acts[b-6oqebdl2md]{display:flex;align-items:center;gap:8px;padding:0 14px}
.vx-thed__btn[b-6oqebdl2md]{padding:6px 12px;border-radius:var(--radius-sm);background:var(--accent);color:var(--accent-ink);font:var(--type-small-strong)}
.vx-thed__btn--soft[b-6oqebdl2md]{background:var(--surface-3);color:var(--text-1);border:1px solid var(--border-2)}
.vx-thed__link[b-6oqebdl2md]{font:var(--type-small);color:var(--text-accent)}

@media (max-width:640px){
  .vx-thed[b-6oqebdl2md]{grid-template-columns:minmax(0,1fr)}
  .vx-thed__base[b-6oqebdl2md]{grid-template-columns:minmax(0,1fr)}
}
/* /Pages/Admin/Videos.razor.rz.scp.css */
/* Модерация роликов: карточка — видео слева, решение справа. Оболочка vx-adm
   повторена, как в css каждой админ-страницы: изоляция стилей Blazor не
   даёт разделить её между страницами. */

.vx-adm[b-urw12uzbhy] {
    min-height: 100vh;
}

.vx-adm__wrap[b-urw12uzbhy] {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 28px 24px 48px;
}

.vx-adm__hero[b-urw12uzbhy] {
    margin-bottom: 20px;
}

.vx-adm__title[b-urw12uzbhy] {
    font: var(--type-display-l);
    color: var(--text-1);
    margin: 4px 0 0;
}

.vx-adm__sub[b-urw12uzbhy] {
    font: var(--type-body);
    color: var(--text-2);
    max-width: 560px;
    margin: 6px 0 0;
}

.vx-adm__loading[b-urw12uzbhy] {
    padding: 40px 24px;
    font: var(--type-body);
    color: var(--text-3);
}

.vx-admv__filter[b-urw12uzbhy] {
    margin-bottom: 16px;
}

.vx-admv__list[b-urw12uzbhy] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vx-admv__item[b-urw12uzbhy] {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 18px;
    padding: 16px;
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-lg);
    box-shadow: var(--inset-top);
}

.vx-admv__video[b-urw12uzbhy] {
    display: block;
    overflow: hidden;
    width: 100%;
    border-radius: var(--radius-md);
    background: var(--warm-950);
    aspect-ratio: 16 / 9;
}

.vx-admv__info[b-urw12uzbhy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.vx-admv__name[b-urw12uzbhy] {
    font: var(--type-title);
    color: var(--text-1);
    margin: 0;
    overflow-wrap: anywhere;
}

.vx-admv__desc[b-urw12uzbhy] {
    font: var(--type-small);
    color: var(--text-2);
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.vx-admv__meta[b-urw12uzbhy] {
    font: var(--type-small);
    color: var(--text-3);
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.vx-admv__tags[b-urw12uzbhy] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* «Было / стало» рядом: правку читают сравнением, а не по памяти. */
.vx-admv__diff[b-urw12uzbhy] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.vx-admv__diff > div[b-urw12uzbhy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vx-admv__decision[b-urw12uzbhy] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
}

.vx-admv__buttons[b-urw12uzbhy] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 720px) {
    .vx-admv__item[b-urw12uzbhy],
    .vx-admv__diff[b-urw12uzbhy] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .vx-adm__wrap[b-urw12uzbhy] {
        padding-left: 0;
        padding-right: 0;
    }
}
/* /Pages/Catalog/Catalog.razor.rz.scp.css */
/* Витрина по киту design-system/ui_kits/catalog: сетка карточек в пределах
   1240px, фильтры слева. Разделов по правообладателям здесь нет и не должно
   появиться — только механика. */

.vx-cat[b-0ledd4klsl] {
    min-height: 100vh;
}

.vx-cat__wrap[b-0ledd4klsl] {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 28px 24px 48px;
}

.vx-cat__loading[b-0ledd4klsl] {
    padding: 40px 24px;
    font: var(--type-body);
    color: var(--text-3);
}

.vx-cat__error[b-0ledd4klsl] {
    padding: 0 0 12px;
    font: var(--type-body);
    color: var(--text-danger);
    margin: 0;
}

/* Шапка: заголовок слева задаёт место, сортировка справа — его настройка. */
.vx-cat__hero[b-0ledd4klsl] {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 22px;
}

.vx-cat__title[b-0ledd4klsl] {
    font: var(--type-display-l);
    color: var(--text-1);
    margin: 4px 0 0;
}

.vx-cat__sub[b-0ledd4klsl] {
    font: var(--type-body);
    color: var(--text-2);
    max-width: 520px;
    margin: 6px 0 0;
}

.vx-cat__sort[b-0ledd4klsl] {
    margin-left: auto;
    flex: 0 0 auto;
}

.vx-cat__cols[b-0ledd4klsl] {
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.vx-cat__side[b-0ledd4klsl] {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 16px;
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-lg);
    box-shadow: var(--inset-top);
}

.vx-cat__group[b-0ledd4klsl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vx-cat__group--report[b-0ledd4klsl] {
    padding-top: 12px;
    border-top: 1px solid var(--border-1);
}

.vx-cat__chips[b-0ledd4klsl] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Чип-переключатель по стилю числа из кита: включённый залит акцентом. */
.vx-cat__chip[b-0ledd4klsl] {
    min-width: 28px;
    height: 26px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-1);
    background: var(--surface-3);
    box-shadow: var(--inset-top);
    font: var(--type-small-strong);
    color: var(--text-2);
    cursor: pointer;
    transition: var(--transition-control);
}

.vx-cat__chip:hover[b-0ledd4klsl] {
    border-color: var(--border-2);
    color: var(--text-1);
}

.vx-cat__chip--on[b-0ledd4klsl] {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
    box-shadow: var(--inset-top-strong);
}

.vx-cat__found[b-0ledd4klsl] {
    display: flex;
    align-items: center;
    gap: 10px;
    font: var(--type-small);
    color: var(--text-2);
    margin-bottom: 14px;
}

.vx-cat__grid[b-0ledd4klsl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.vx-cat__note[b-0ledd4klsl] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font: var(--type-small);
    color: var(--text-2);
}

@media (max-width: 860px) {
    .vx-cat__hero[b-0ledd4klsl] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .vx-cat__cols[b-0ledd4klsl] {
        grid-template-columns: minmax(0, 1fr);
    }

    .vx-cat__side[b-0ledd4klsl] {
        position: static;
    }
}

/* Телефон: отступы уже даёт раскладка, свои их удваивали.
   Сортировка — во всю ширину под заголовком, иначе последний пункт уходил
   за край. */
@media (max-width: 640px) {
    .vx-cat__wrap[b-0ledd4klsl] {
        padding: 0 0 48px;
    }

    .vx-cat__sort[b-0ledd4klsl] {
        margin-left: 0;
        max-width: 100%;
    }
}

/* Свёрнутые фильтры (см. разметку): на широком экране кнопки нет, обёртка
   не рисуется, и фильтры стоят в колонке как раньше. */
.vx-cat__more-toggle[b-0ledd4klsl] {
    display: none;
}

.vx-cat__more[b-0ledd4klsl] {
    display: contents;
}

@media (max-width: 640px) {
    .vx-cat__more-toggle[b-0ledd4klsl] {
        display: inline-flex;
        justify-content: space-between;
    }

    .vx-cat__more-toggle[b-0ledd4klsl]  svg {
        transition: transform var(--dur-fast) var(--ease-out);
    }

    .vx-cat__more-toggle[aria-expanded="true"][b-0ledd4klsl]  svg {
        transform: rotate(180deg);
    }

    .vx-cat__more[b-0ledd4klsl] {
        display: none;
    }

    .vx-cat__more--open[b-0ledd4klsl] {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
}
/* /Pages/Catalog/ComplaintForm.razor.rz.scp.css */
/* Поля формы — общие компоненты (Select, Input); здесь только раскладка стека
   и сообщения формы. */

.vx-complaint__stack[b-12d8p66k7e] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Пак, на который жалуются, открыт из карточки: выбирать нечего, но назвать
   его надо — иначе обращение уходит «в никуда» на взгляд жалобщика. */
.vx-complaint__target[b-12d8p66k7e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vx-complaint__pack[b-12d8p66k7e] {
    font: var(--type-body-strong);
    color: var(--text-1);
}

.vx-complaint__done[b-12d8p66k7e] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.vx-complaint__done p[b-12d8p66k7e] {
    font: var(--type-body);
    color: var(--text-1);
    margin: 0;
}

.vx-complaint__error[b-12d8p66k7e] {
    font: var(--type-small);
    color: var(--text-danger);
    margin: 0;
}

.vx-complaint__empty[b-12d8p66k7e] {
    font: var(--type-body);
    color: var(--text-3);
    margin: 0;
}
/* /Pages/Catalog/PackPage.razor.rz.scp.css */
/* Страница пака. Раскладка та же, что у главной и витрины: содержимое слева,
   узкая колонка действий справа — продукт не должен на каждой странице
   перекладываться заново. */
.vx-pack-page[b-ofiki0ixc9]{max-width:var(--content-max);margin:0 auto;padding:var(--space-8) 0 var(--space-16)}

/* Путь обратно в каталог. Приглушён: пришедший из поиска сначала смотрит на
   название и кадр, а крошки нужны ему через минуту — но нужны обязательно,
   витрину он ещё не видел. */
.vx-pack-page__crumbs[b-ofiki0ixc9]{display:flex;align-items:center;gap:var(--space-2);
  font:var(--type-small);color:var(--text-3);margin-bottom:var(--space-3)}
.vx-pack-page__crumbs a[b-ofiki0ixc9]{color:var(--text-3);border-bottom:0}
.vx-pack-page__crumbs a:hover[b-ofiki0ixc9]{color:var(--text-accent)}
.vx-pack-page__crumb-here[b-ofiki0ixc9]{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.vx-pack-page__title[b-ofiki0ixc9]{font:var(--type-display-m);letter-spacing:var(--tracking-tight);
  color:var(--text-1);margin:0 0 var(--space-3)}

.vx-pack-page__badges[b-ofiki0ixc9]{display:flex;flex-wrap:wrap;gap:var(--gap-inline);margin-bottom:var(--space-6)}

.vx-pack-page__cols[b-ofiki0ixc9]{display:grid;grid-template-columns:1fr 320px;gap:var(--space-8);align-items:start}
.vx-pack-page__main[b-ofiki0ixc9]{display:flex;flex-direction:column;gap:var(--space-5);min-width:0}

/* Кадр — первое, ради чего страницу открыли: по нему решают, знакома ли сцена.
   Тёмная подложка держит место, пока грузится постер, чтобы раскладка не
   прыгала. */
.vx-pack-page__video[b-ofiki0ixc9]{width:100%;aspect-ratio:16/9;border-radius:var(--radius-lg);
  background:var(--surface-sunken);border:1px solid var(--border-1);display:block;overflow:hidden}
.vx-pack-page__video--empty[b-ofiki0ixc9]{display:flex;align-items:center;justify-content:center}

/* Строка описания ограничена по ширине, а не тянется на всю колонку: длинная
   строка теряется при переносе взгляда на следующую. */
.vx-pack-page__desc[b-ofiki0ixc9]{font:var(--type-body);color:var(--text-2);max-width:68ch;margin:0;
  white-space:pre-line}
/* Описание слева, автор справа — одной строкой под кадром. Автор прижат к
   верху: у длинного описания он стоит рядом с его началом, а не посередине. */
.vx-pack-page__about[b-ofiki0ixc9]{display:flex;align-items:flex-start;gap:var(--space-5)}
.vx-pack-page__about .vx-pack-page__desc[b-ofiki0ixc9]{flex:1;min-width:0}

/* Плашка автора — карточка игрока с его фоном и рамкой, вся ссылкой на
   профиль; ссылка — только обёртка, вид — у карточки. Не уже 260 px: иначе фон
   карточки уходит под подпись, а картинка справа не видна. */
.vx-pack-page__author[b-ofiki0ixc9]{display:block;flex:none;margin-left:auto;border-bottom:0;min-width:260px;max-width:360px;text-decoration:none;color:inherit;
  transition:filter .15s}
.vx-pack-page__author:hover[b-ofiki0ixc9]{filter:brightness(1.08)}

/* Сценарий — реплики по порядку, тем, кто их будет говорить. Нумерация
   нативная: по ней сверяются с оригиналом («давай с двенадцатой»), и вводить
   ради неё свой счётчик значило бы пересчитывать то, что браузер считает сам. */
.vx-pack-page__script[b-ofiki0ixc9]{display:flex;flex-direction:column;gap:var(--space-4)}
.vx-pack-page__script-title[b-ofiki0ixc9]{font:var(--type-title);color:var(--text-1);margin:0}
.vx-pack-page__videos[b-ofiki0ixc9]{display:flex;flex-direction:column;gap:12px}
.vx-pack-page__all[b-ofiki0ixc9]{align-self:flex-start;font:var(--type-body-strong)}
.vx-pack-page__script-lines[b-ofiki0ixc9]{margin:0;padding-left:var(--space-8);display:flex;flex-direction:column}

/* Реплика висит на полосе цвета своей роли. У подряд идущих реплик одной роли
   полосы смыкаются в одну — блок персонажа виден целиком, а смена говорящего
   отбивается воздухом. Имя стоит над текстом, но вынесено из потока: номер
   (::marker) выравнивается по первой строке, и это должна быть строка текста,
   а не имени — иначе у первой реплики блока номер стоял бы не там, где у
   остальных. */
.vx-pack-page__script-line[b-ofiki0ixc9]{position:relative;margin-top:var(--space-5);
  padding:calc(var(--space-5) + var(--space-1)) 0 var(--space-1) var(--space-4);
  border-left:2px solid var(--role, var(--border-2))}
.vx-pack-page__script-line:first-child[b-ofiki0ixc9]{margin-top:0}
.vx-pack-page__script-line--cont[b-ofiki0ixc9]{margin-top:0;padding-top:var(--space-2)}
.vx-pack-page__script-line[b-ofiki0ixc9]::marker{font:var(--type-mono-s);font-variant-numeric:tabular-nums;color:var(--text-3)}

/* Имя — цветом роли, как в списке ролей и потом в комнате: цвет узнаётся
   раньше имени. Подмешан текстовый цвет: чистые цвета ролей на тёмном фоне
   мелким кеглем читаются хуже. */
.vx-pack-page__script-role[b-ofiki0ixc9]{position:absolute;top:0;left:var(--space-4);right:0;
  font:var(--type-small-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:color-mix(in srgb, var(--role, var(--text-3)) 70%, var(--text-1))}

/* Текст реплики — то, ради чего блок существует, поэтому он ярче имени.
   Ширина ограничена по той же причине, что и описание: длинная строка
   теряется при переносе взгляда. */
.vx-pack-page__script-text[b-ofiki0ixc9]{display:block;font:var(--type-body);color:var(--text-1);max-width:68ch}

.vx-pack-page__side[b-ofiki0ixc9]{display:flex;flex-direction:column;gap:var(--space-5);position:sticky;
  top:calc(var(--topbar-h) + var(--space-4))}

.vx-pack-page__panel[b-ofiki0ixc9]{display:flex;flex-direction:column;gap:var(--gap-stack);
  padding:var(--pad-card);background:var(--surface-1);border:1px solid var(--border-1);
  border-radius:var(--radius-lg);box-shadow:var(--inset-top),var(--shadow-3)}

.vx-pack-page__stats[b-ofiki0ixc9]{display:flex;flex-direction:column;gap:var(--space-1);
  padding-bottom:var(--space-2)}
.vx-pack-page__games[b-ofiki0ixc9]{font:var(--type-small);color:var(--text-3)}
.vx-pack-page__guest[b-ofiki0ixc9]{font:var(--type-caption);color:var(--text-3);margin:0;text-align:center}
.vx-pack-page__error[b-ofiki0ixc9]{font:var(--type-small);color:var(--text-danger);margin:0}

/* Роли — то, ради чего пак и берут: видно, на скольких он и кем предстоит быть.
   Цвет роли здесь тот же, что потом в комнате и на таймлайне, — узнавание
   начинается с этого списка. */
.vx-pack-page__cast[b-ofiki0ixc9]{display:flex;flex-direction:column;gap:var(--space-3)}
.vx-pack-page__roles[b-ofiki0ixc9]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}
.vx-pack-page__role[b-ofiki0ixc9]{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0}
.vx-pack-page__role-bar[b-ofiki0ixc9]{flex:0 0 auto;width:3px;height:18px;border-radius:2px}
.vx-pack-page__role-name[b-ofiki0ixc9]{font:var(--type-body);color:var(--text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.vx-pack-page__loading[b-ofiki0ixc9]{font:var(--type-body);color:var(--text-3);padding:var(--space-16) 0;text-align:center}

/* Узкий экран: колонка действий уезжает под кадр и перестаёт липнуть — на
   телефоне прилипшая панель съедала бы четверть экрана. */
@media (max-width:900px){
  .vx-pack-page__cols[b-ofiki0ixc9]{grid-template-columns:1fr;gap:var(--space-6)}
  .vx-pack-page__side[b-ofiki0ixc9]{position:static}
}

/* Телефон: «Создать комнату» — сразу под кадром. В одну колонку панель
   действий оказывалась под всем текстом фрагмента, в пяти тысячах пикселей от
   верха, — до неё просто не долистывали. Основная колонка перестаёт быть
   коробкой (display:contents), и панель встаёт между кадром и описанием без
   второй копии разметки. */
@media (max-width:640px){
  .vx-pack-page[b-ofiki0ixc9]{padding-top:0}
  .vx-pack-page__cols[b-ofiki0ixc9]{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-5)}
  .vx-pack-page__main[b-ofiki0ixc9]{display:contents}
  .vx-pack-page__video[b-ofiki0ixc9]{order:-2}
  .vx-pack-page__side[b-ofiki0ixc9]{order:-1}
  .vx-pack-page__script-lines[b-ofiki0ixc9]{padding-left:var(--space-6)}
}

/* Жалоба стоит отдельно от действий и приглушена: она не про то, зачем сюда
   пришли, но и прятать её нельзя. */
.vx-pack-page__report[b-ofiki0ixc9]{display:flex;justify-content:center;opacity:.6;
  transition:opacity var(--dur-fast) var(--ease-out)}
.vx-pack-page__report:hover[b-ofiki0ixc9]{opacity:1}

/* Число реплик у правого края строки роли: по нему роли и делят между собой,
   и в столбик оно сравнивается взглядом, а не чтением. */
.vx-pack-page__role-lines[b-ofiki0ixc9]{flex:0 0 auto;margin-left:auto;
  font:var(--type-small);color:var(--text-3);white-space:nowrap}

/* Телефон: рядом с описанием плашке тесно — она уходит под него, на всю ширину. */
@media (max-width:640px){
  .vx-pack-page__about[b-ofiki0ixc9]{flex-direction:column;gap:var(--space-3)}
  .vx-pack-page__author[b-ofiki0ixc9]{margin-left:0;align-self:stretch}
}
/* /Pages/Dashboard.razor.rz.scp.css */
.vx-dash[b-kufdxodaah] {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 24px 48px;
}

.vx-dash__head[b-kufdxodaah] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
}

.vx-dash__title[b-kufdxodaah] {
    font: var(--type-display-l);
    color: var(--text-1);
    margin: 0;
}

/* Фильтр и кнопка загрузки прижаты вправо, как в ките: заголовок слева задаёт
   место, действия справа — то, что с этим местом можно сделать. */
.vx-dash__tools[b-kufdxodaah] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vx-dash__filters[b-kufdxodaah] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 18px;
}

.vx-dash__body[b-kufdxodaah] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}

.vx-dash__grid[b-kufdxodaah] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.vx-dash__item[b-kufdxodaah] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vx-dash__side[b-kufdxodaah] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vx-dash__hint[b-kufdxodaah] {
    font: var(--type-body);
    color: var(--text-3);
}

/* Ход подготовки в правой колонке: чей пак, какой этап по счёту, как он
   называется. Три строки — весь блок. */
.vx-dash__prep[b-kufdxodaah] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Название пака задаётся владельцем и бывает длиной в две сотни знаков.
   В колонке 320px оно обрезается на второй строке: блок под лимитом не
   должен вырастать выше самого лимита. */
.vx-dash__prep-pack[b-kufdxodaah] {
    font: var(--type-body-strong);
    color: var(--text-1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Счётчик относится к названию этапа под ним, а не к названию пака над ним:
   отступ ставится сверху, чтобы эти две строки читались одной группой. */
.vx-dash__prep-stage[b-kufdxodaah] {
    font: var(--type-caption);
    color: var(--text-3);
    margin-top: 10px;
}

/* Номер этапа — моно с табличными цифрами, как все числа в системе: при
   опросе раз в три секунды он меняется на месте, а не дёргает строку. */
.vx-dash__prep-num[b-kufdxodaah] {
    font: var(--type-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
}

.vx-dash__prep-step[b-kufdxodaah] {
    font: var(--type-body);
    color: var(--text-2);
}

.vx-dash__prep .vx-dash__error[b-kufdxodaah] {
    margin-top: 10px;
}

.vx-dash__error[b-kufdxodaah] {
    font: var(--type-caption);
    color: var(--text-danger);
    margin: 0;
}

/* Узкий экран: правая колонка уезжает под список, а не сжимается до нечитаемой. */
@media (max-width: 900px) {
    .vx-dash__body[b-kufdxodaah] {
        grid-template-columns: minmax(0, 1fr);
    }

    .vx-dash__head[b-kufdxodaah] {
        flex-wrap: wrap;
    }

    .vx-dash__tools[b-kufdxodaah] {
        margin-left: 0;
        width: 100%;
    }
}

.vx-dash__acts[b-kufdxodaah] {
    display: flex;
    gap: 8px;
}

/* Телефон: отступы уже даёт раскладка, свои их удваивали. Переключатели и кнопка загрузки — каждый своей строкой во всю
   ширину. В ряд они были шире экрана втрое, и «Загрузить фрагмент» — главное
   действие кабинета — оказывалось за правым краем. */
@media (max-width: 640px) {
    .vx-dash[b-kufdxodaah] {
        padding: 0 0 48px;
    }

    .vx-dash__tools[b-kufdxodaah] {
        flex-direction: column;
        align-items: stretch;
    }

    .vx-dash__tools[b-kufdxodaah]  .vx-seg__item {
        flex: 1 0 auto;
        justify-content: center;
        padding: 0 8px;
    }

    /* Фильтры — сеткой два на два, поиск над ними во всю ширину. Сеткой, а не
       переносом флекса: у полей в разметке свои flex и min-width, и перенос
       оставлял поиску полстроки — подсказка в нём обрезалась на середине. */
    .vx-dash__filters[b-kufdxodaah] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .vx-dash__filters[b-kufdxodaah]  > :first-child {
        grid-column: 1 / -1;
    }

    /* min-width у полей задан прямо в разметке: для широкого экрана он держит
       поле от сжатия, а в сетке два поля по 200px шире телефона. Перебить
       встроенный стиль можно только так. */
    .vx-dash__filters[b-kufdxodaah]  > * {
        min-width: 0 !important;
    }
}
/* /Pages/Editor/EditorInspector.razor.rz.scp.css */
/* Правая панель — свойства реплики. Та же пластика, что у левой: ровная
   поверхность с рамкой, заголовок капслоком, вдавленных полей внутри панель
   не плодит — поле ввода и так вдавленное по правилу системы. */

.vx-insp[b-02g6vlddz1]{width:var(--panel-w-right);flex:0 0 auto;display:flex;flex-direction:column;min-height:0;
  background:var(--surface-1);border-left:1px solid var(--border-1)}

.vx-insp__head[b-02g6vlddz1]{display:flex;align-items:center;gap:8px;padding:12px 14px;
  border-bottom:1px solid var(--border-1)}

.vx-insp__title[b-02g6vlddz1]{flex:1;font:var(--type-label);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-3)}

.vx-insp__empty[b-02g6vlddz1]{padding:16px;font:var(--type-small);color:var(--text-3)}

.vx-insp__body[b-02g6vlddz1]{padding:14px;display:flex;flex-direction:column;gap:14px;
  overflow-y:auto;overflow-x:hidden;min-height:0}

.vx-insp__row[b-02g6vlddz1]{display:flex;gap:10px;min-width:0}

.vx-insp__conf[b-02g6vlddz1]{display:flex;flex-direction:column;gap:8px}

.vx-insp__hint[b-02g6vlddz1]{font:var(--type-caption);color:var(--text-3)}

.vx-insp__meta[b-02g6vlddz1]{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;
  font:var(--type-small);color:var(--text-2);font-variant-numeric:tabular-nums}

.vx-insp__key[b-02g6vlddz1]{font:var(--type-mono-s);color:var(--text-3)}

/* Кнопки операций — прижаты к низу панели, как в ките: свойства читают
   сверху вниз, а действия остаются на месте при любой длине содержимого. */
.vx-insp__acts[b-02g6vlddz1]{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:14px}
/* /Pages/Editor/EditorPackProps.razor.rz.scp.css */
/* Flex-колонка и min-height:0 — не декорация, а то, что вообще даёт секции
   сжиматься как элементу .vx-editor__left. Без явного min-height flex-элемент
   отказывается уменьшаться меньше содержимого, и на невысоком окне развёрнутое
   тело выталкивало список ролей и кнопку сохранения за нижний край колонки.
   Сжимается именно тело (ниже) — заголовок с шевроном остаётся на месте. */
.vx-props[b-xb7841ky0r] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-bottom: 1px solid var(--border-1);
}

.vx-props__head[b-xb7841ky0r] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--text-1);
    font: var(--type-body);
    text-align: left;
    /* Заголовок не сжимается: сворачивающая кнопка обязана оставаться видимой
       и кликабельной, даже когда тело под ней ужато до прокрутки. */
    flex: 0 0 auto;
}

.vx-props__head:hover[b-xb7841ky0r] {
    background: var(--ghost-hover);
}

.vx-props__title[b-xb7841ky0r] {
    flex: 1;
}

.vx-props__hint[b-xb7841ky0r] {
    font: var(--type-small);
    color: var(--text-3);
}

/* min-height:0 отдаёт этому телу (а не колонке .vx-editor__left и не .vx-rolesp)
   всю уступку по высоте: когда окну не хватает места на полный список полей,
   тело сжимается первым и прокручивается внутри себя — со своей кнопкой
   сохранения в конце, — а не выталкивает список ролей вниз. В обычном окне
   тело умещается целиком и никакой второй полосы прокрутки не появляется:
   ограничения по max-height здесь нет, есть только право ужаться при нехватке
   места. */
.vx-props__body[b-xb7841ky0r] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 14px 14px;
    min-height: 0;
    overflow-y: auto;
}

.vx-props__note[b-xb7841ky0r] {
    margin: -6px 0 0;
    font: var(--type-small);
    color: var(--text-3);
}

.vx-props__foot[b-xb7841ky0r] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Тот же токен, что у сообщений об ошибке в редакторе (PackEditor.razor.css:25):
   свой цвет рядом с чужим читается как недоделка. Токена --danger в наборе нет. */
.vx-props__error[b-xb7841ky0r] {
    font: var(--type-small);
    color: var(--text-danger);
}

.vx-props__ok[b-xb7841ky0r] {
    font: var(--type-small);
    color: var(--text-3);
}

/* В попапе кабинета блок не колонка редактора: без черты снизу и без своих
   отступов — их даёт диалог, а своя прокрутка ему не нужна. */
.vx-props--flat[b-xb7841ky0r] {
    border-bottom: 0;
}

.vx-props--flat .vx-props__body[b-xb7841ky0r] {
    padding: 0;
    overflow: visible;
}
/* /Pages/Editor/EditorRoles.razor.rz.scp.css */
/* flex-grow:0 — панель больше не растягивается на весь остаток колонки:
   раньше это делалось ради того, чтобы margin-top:auto на подвале дотягивал
   кнопку «Объединить» до самого низа, а на невысоком экране низ уезжал за
   край. Кнопка теперь идёт сразу за списком, тянуть панель незачем.

   min-height не 0: это пол, ниже которого внешний flex (.vx-editor__left) не
   имеет права ужать панель, отжимая место блоку свойств. Значение — примерная
   высота шапки статистики, строки «Роли» и подвала без единой строки списка:
   список внутри и так прокручивается сам (.vx-rolesp__list), а вот шапку,
   счётчик ролей и кнопку «Объединить» терять нельзя ни при каком ужатии. */
.vx-rolesp[b-y8tc2xt9pb]{width:100%;flex:0 1 auto;display:flex;flex-direction:column;min-height:220px;
  background:var(--surface-1)}

.vx-rolesp__stats[b-y8tc2xt9pb]{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;padding:14px 14px 16px;
  border-bottom:1px solid var(--border-1)}

.vx-rolesp__stat[b-y8tc2xt9pb]{display:flex;flex-direction:column;gap:2px;min-width:0}

.vx-rolesp__key[b-y8tc2xt9pb]{font:var(--type-mono-s);color:var(--text-3)}

.vx-rolesp__val[b-y8tc2xt9pb]{font:var(--type-body-strong);color:var(--text-1);font-variant-numeric:tabular-nums}

.vx-rolesp__head[b-y8tc2xt9pb]{display:flex;align-items:center;gap:8px;padding:12px 14px;
  border-bottom:1px solid var(--border-1)}

.vx-rolesp__title[b-y8tc2xt9pb]{flex:1;font:var(--type-label);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-3)}

.vx-rolesp__list[b-y8tc2xt9pb]{padding:8px;display:flex;flex-direction:column;gap:2px;overflow:auto;min-height:0}

.vx-rolesp__row[b-y8tc2xt9pb]{display:flex;align-items:center;gap:2px;min-width:0}

/* Кнопки правки появляются на наведении: в покое строка — это цвет, имя и
   число реплик, и ничто не спорит с ними за внимание. */
.vx-rolesp__acts[b-y8tc2xt9pb]{display:flex;gap:2px;opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}

.vx-rolesp__row:hover .vx-rolesp__acts[b-y8tc2xt9pb],
.vx-rolesp__row:focus-within .vx-rolesp__acts[b-y8tc2xt9pb]{opacity:1}

.vx-rolesp__edit[b-y8tc2xt9pb]{display:flex;flex-direction:column;gap:8px;padding:8px;
  background:var(--surface-2);border:1px solid var(--border-1);border-radius:var(--radius-md)}

.vx-rolesp__palette[b-y8tc2xt9pb]{display:flex;flex-wrap:wrap;gap:6px}

.vx-rolesp__swatch[b-y8tc2xt9pb]{width:22px;height:22px;flex:0 0 auto;border-radius:var(--radius-sm);cursor:pointer;
  border:1px solid rgba(0,0,0,.35);box-shadow:var(--inset-top-strong);padding:0}

.vx-rolesp__swatch:hover[b-y8tc2xt9pb]{filter:brightness(1.15)}

.vx-rolesp__swatch--sel[b-y8tc2xt9pb]{box-shadow:var(--inset-top-strong),0 0 0 2px var(--playhead)}

.vx-rolesp__swatch:focus-visible[b-y8tc2xt9pb]{outline:none;box-shadow:var(--ring)}

.vx-rolesp__editacts[b-y8tc2xt9pb]{display:flex;justify-content:flex-end;gap:6px}

.vx-rolesp__foot[b-y8tc2xt9pb]{padding:12px;border-top:1px solid var(--border-1);
  display:flex;flex-direction:column;gap:8px}

.vx-rolesp__hint[b-y8tc2xt9pb]{font:var(--type-caption);color:var(--text-3)}

.vx-rolesp__dlg[b-y8tc2xt9pb]{display:flex;flex-direction:column;gap:12px}
/* /Pages/Editor/EditorStage.razor.rz.scp.css */
/* Плеер собран столбиком и стоит по центру над таймлайном: экран, под ним
   пульт той же ширины. Раньше рядом с экраном лежала волна, и строкой это
   держалось; без неё та же раскладка оставляла справа половину экрана пустоты,
   а пустота такого размера читается как незаконченная вёрстка. */

/* Ширина экрана и пульта — одно число на двоих, и потому оно переменная.
   Экран держит 16:9, поэтому потолок по высоте превращается в потолок по
   ширине: 480px — как было; 32vh — то, что вступает в дело только на невысоком
   окне (на 1080 это 345px, то есть больше 270px кадра, и ничего не меняется), и
   не даёт сцене съесть таймлайн со списком реплик, когда экран больше не
   прокручивается. Пульт ведём тем же числом: разъехавшись, он оказался бы шире
   кадра, к которому относится. */
.vx-stage[b-nev8iv7z68]{--stage-w:min(480px, 100%, calc(32vh * 16 / 9));
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;
  flex:0 0 auto;border-bottom:1px solid var(--border-1)}

.vx-stage__screen[b-nev8iv7z68]{position:relative;width:var(--stage-w);aspect-ratio:16 / 9;flex:0 0 auto;
  border-radius:var(--radius-xl);background:var(--surface-sunken);border:1px solid var(--border-1);
  box-shadow:var(--inset-sunken);overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:var(--warm-600)}

.vx-stage__video[b-nev8iv7z68]{width:100%;height:100%;object-fit:contain;background:#000;display:block}

.vx-stage__scrim[b-nev8iv7z68]{position:absolute;inset:0;background:var(--scrim-bottom);pointer-events:none}

.vx-stage__time[b-nev8iv7z68]{position:absolute;left:12px;bottom:10px;font:var(--type-mono-s);color:var(--warm-100)}

/* Субтитры сидят над таймкодом и не перехватывают указатель: под ними экран,
   и клик по кадру должен доходить до него. */
.vx-stage__subs[b-nev8iv7z68]{position:absolute;left:10px;right:10px;bottom:32px;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:4px}

.vx-stage__sub[b-nev8iv7z68]{max-width:100%;display:flex;align-items:baseline;gap:8px;padding:5px 10px;
  border:1px solid transparent;border-radius:var(--radius-sm);
  background:rgba(15,13,12,.72);backdrop-filter:var(--blur-overlay);opacity:.7}

/* Выделенная — та, чьи свойства открыты справа. При двух репликах разом без
   этого непонятно, к какой из них относится панель. */
.vx-stage__sub--sel[b-nev8iv7z68]{opacity:1;border-color:var(--border-2)}

.vx-stage__sub-role[b-nev8iv7z68]{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase}

.vx-stage__sub-dot[b-nev8iv7z68]{width:7px;height:7px;border-radius:var(--radius-pill)}

/* Длинная реплика обрезается двумя строками: субтитр не должен закрывать кадр,
   ради которого он и показан. Полный текст — в свойствах справа. */
.vx-stage__sub-text[b-nev8iv7z68]{min-width:0;font:var(--type-small-strong);color:var(--warm-100);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* Пульт ровно по ширине экрана: он к нему и относится. */
.vx-stage__bar[b-nev8iv7z68]{width:var(--stage-w);display:flex;align-items:center;gap:8px}

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

   Полоса заодно короче: в пульте с ней соседствуют плеер, таймкод и
   переключатель неуверенных слов, и на узком окне ряд обязан уместиться в
   ширину экрана, а не выехать за неё. */
.vx-stage__bar[b-nev8iv7z68]  .vx-vol{padding:0}

.vx-stage__bar[b-nev8iv7z68]  .vx-vol .vx-icon{display:none}

.vx-stage__bar[b-nev8iv7z68]  .vx-vol__range{width:72px}

.vx-stage__pos[b-nev8iv7z68]{color:var(--text-2);margin-left:4px}

.vx-stage__spacer[b-nev8iv7z68]{flex:1}
/* /Pages/Editor/EditorTimeline.razor.rz.scp.css */
/* Значения взяты из timeline-track.css кита: полосы должны выглядеть одной
   вещью. Классы кита при этом не переиспользуются — там дорожка растягивается
   в строке (flex:1), здесь она стоит столбиком, и переопределять половину
   правил чужого файла хуже, чем держать свои. Общее — переменные оформления. */

/* flex:0 0 auto — полоса не ужимается. Экран редактора больше не прокручивается,
   и место под всех сразу отдаёт окно; уступать его должен список реплик, у
   которого своя прокрутка, а не дорожки: у них высота задана до пикселя
   (--track-h), и ужатая полоса просто обрезала бы нижнюю дорожку. */
.vx-etl[b-yikqe5u4ql]{display:flex;flex-direction:column;gap:8px;padding:12px 16px;min-width:0;
  flex:0 0 auto;border-bottom:1px solid var(--border-1)}

.vx-etl__toolbar[b-yikqe5u4ql]{display:flex;align-items:center;gap:8px}

.vx-etl__sep[b-yikqe5u4ql]{width:1px;height:22px;background:var(--border-1);margin:0 4px}

.vx-etl__span[b-yikqe5u4ql]{margin-left:auto;font:var(--type-mono-s);color:var(--text-3)}

.vx-etl__row[b-yikqe5u4ql]{display:flex;gap:8px;min-width:0}

/* Отступ шириной подписей: волна обязана стоять над дорожками ровно, иначе
   пауза на волне указывает не на то место, куда ставят границу. */
.vx-etl__gutter[b-yikqe5u4ql]{width:92px;flex:0 0 auto}

.vx-etl__labels[b-yikqe5u4ql]{width:92px;flex:0 0 auto;display:flex;flex-direction:column;gap:4px}

.vx-etl__rulerpad[b-yikqe5u4ql]{height:23px;flex:0 0 auto}

.vx-etl__label[b-yikqe5u4ql]{height:var(--track-h);flex:0 0 auto;display:flex;align-items:center;
  font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-3)}

/* Прокрутка одна на линейку и дорожки: разъехавшись хоть на пиксель, они
   показывали бы разное время в одном столбце. */
.vx-etl__scroll[b-yikqe5u4ql]{flex:1;min-width:0;overflow-x:auto;overflow-y:hidden}

/* touch-action:none — чтобы браузер не забирал перетаскивание себе под
   прокрутку: жест начат на границе реплики, и он про границу, а не про экран. */
.vx-etl__content[b-yikqe5u4ql]{position:relative;display:flex;flex-direction:column;gap:4px;
  touch-action:none;user-select:none}

.vx-etl__ruler[b-yikqe5u4ql]{position:relative;height:22px;flex:0 0 auto;cursor:pointer;
  border-bottom:1px solid var(--border-1)}

.vx-etl__tick[b-yikqe5u4ql]{position:absolute;top:0;bottom:0;padding-left:5px;white-space:nowrap;
  border-left:1px solid var(--track-line);font:var(--type-mono-s);color:var(--text-3);
  display:flex;align-items:flex-start;pointer-events:none}

.vx-etl__lanes[b-yikqe5u4ql]{display:flex;flex-direction:column;gap:4px}

.vx-etl__lane[b-yikqe5u4ql]{position:relative;height:var(--track-h);flex:0 0 auto;overflow:hidden;
  background:var(--track-bg);border:1px solid var(--border-1);border-radius:var(--radius-sm);
  box-shadow:var(--inset-sunken);cursor:pointer}

.vx-etl__clip[b-yikqe5u4ql]{position:absolute;top:4px;bottom:4px;padding:4px 7px;overflow:hidden;
  border-radius:var(--radius-clip);border:1px solid rgba(0,0,0,.35);cursor:grab;
  box-shadow:var(--inset-top-strong),var(--shadow-1);
  transition:filter var(--dur-fast) var(--ease-out)}

.vx-etl__clip:hover[b-yikqe5u4ql]{filter:brightness(1.12)}

.vx-etl__clip--sel[b-yikqe5u4ql]{box-shadow:var(--inset-top-strong),0 0 0 2px var(--playhead)}

/* Перетаскиваемый блок поднимается над соседями: иначе, наезжая на чужой,
   он уезжает под него, и не видно, куда именно его ведут. */
.vx-etl__clip--drag[b-yikqe5u4ql]{cursor:grabbing;filter:brightness(1.18);z-index:4;transition:none}

.vx-etl__clip-txt[b-yikqe5u4ql]{font:600 11px/1.25 var(--font-text);color:rgba(20,14,4,.86);overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;pointer-events:none}

/* Зона захвата 6px по краям выделенного блока: попасть мышью в саму границу
   нельзя, и без неё точная правка превращается в лотерею. */
.vx-etl__grip[b-yikqe5u4ql]{position:absolute;top:0;bottom:0;width:6px;cursor:ew-resize;
  background:rgba(20,14,4,.3)}

.vx-etl__grip:hover[b-yikqe5u4ql]{background:rgba(20,14,4,.55)}

.vx-etl__grip--l[b-yikqe5u4ql]{left:0;border-radius:var(--radius-clip) 0 0 var(--radius-clip)}

.vx-etl__grip--r[b-yikqe5u4ql]{right:0;border-radius:0 var(--radius-clip) var(--radius-clip) 0}

.vx-etl__playhead[b-yikqe5u4ql]{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;z-index:5;
  background:var(--playhead);box-shadow:0 0 8px rgba(255,243,224,.5);pointer-events:none}

/* ——— подсказка по управлению ——— */

.vx-etl__help[b-yikqe5u4ql] {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
}

/* Панель висит под кнопкой и не толкает тулбар: появляясь в потоке, она
   сдвигала бы полосу вниз, и таймлайн прыгал бы на каждое открытие. */
.vx-etl__helpbox[b-yikqe5u4ql] {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px 12px;
    padding: 10px 12px;
    white-space: nowrap;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-md);
    box-shadow: var(--inset-top), var(--shadow-3);
}

.vx-etl__helpkeys[b-yikqe5u4ql] {
    font: var(--type-mono-s);
    color: var(--text-1);
}

.vx-etl__helpwhat[b-yikqe5u4ql] {
    font: var(--type-caption);
    color: var(--text-3);
}

/* ——— контекстное меню ——— */

/* Подложка ловит щелчок мимо меню. Прозрачная и на весь экран: закрывать меню
   должен любой щелчок, а не только попадание в саму полосу. */
.vx-etl__menu-scrim[b-yikqe5u4ql] {
    position: fixed;
    inset: 0;
    z-index: 90;
}

/* fixed, а не absolute: координаты приходят из события мыши, а они и есть
   координаты окна. Внутри прокручиваемой полосы absolute поехал бы вместе с ней. */
.vx-etl__menu[b-yikqe5u4ql] {
    position: fixed;
    z-index: 91;
    min-width: 190px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-md);
    box-shadow: var(--inset-top), var(--shadow-4);
}

.vx-etl__menu-item[b-yikqe5u4ql] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-1);
    font: var(--type-small-strong);
    text-align: left;
    cursor: pointer;
}

.vx-etl__menu-item:hover:not(:disabled)[b-yikqe5u4ql] {
    background: var(--surface-3);
}

/* Недоступный пункт остаётся на месте и виден: пропав, он менял бы состав меню
   от реплики к реплике, и попасть в нужный пункт вслепую стало бы нельзя. */
.vx-etl__menu-item:disabled[b-yikqe5u4ql] {
    opacity: .4;
    cursor: default;
}

.vx-etl__menu-item--danger[b-yikqe5u4ql] {
    color: var(--text-danger);
}
/* /Pages/Editor/PackEditor.razor.rz.scp.css */
/* Рабочий экран редактора ровно в окно и ни пикселем больше. min-height:100vh
   здесь как раз и давал глобальную прокрутку: над этим блоком стоит шапка
   высотой --topbar-h, и страница выходила выше окна ровно на неё — на всех
   экранах и всегда. Прокрутки внутри есть у каждой панели своя (список ролей,
   тело свойств, свойства реплики, список реплик), и общая поверх них увозила бы
   вместе с содержимым их же заголовки. */
.vx-editor[b-rnyj50pior]{height:100vh;overflow:hidden;display:flex;flex-direction:column;background:var(--bg-app)}

/* Правка названия в шапке: поле и две кнопки рядом с заголовком. */
.vx-editor__rename[b-rnyj50pior]{display:inline-flex;align-items:center;gap:6px}

.vx-editor__body[b-rnyj50pior]{flex:1;display:grid;
  grid-template-columns:var(--panel-w-left) 1fr var(--panel-w-right);min-height:0}

/* Левая колонка целиком: свойства пака сверху, роли под ними. Ширину задаёт
   сетка (--panel-w-left в grid-template-columns), поэтому здесь её нет.
   Прокрутки у колонки тоже нет намеренно: список ролей и тело блока свойств
   прокручиваются каждый внутри себя (см. .vx-rolesp__list и .vx-props__body),
   а вторая прокрутка снаружи увозила бы вместе с ними заголовок свойств. */
.vx-editor__left[b-rnyj50pior] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface-1);
    border-right: 1px solid var(--border-1);
}

/* min-height:0 — то, чем колонка вообще получает право быть ниже своего
   содержимого. Без него элемент сетки упирается в min-height:auto, центр
   вырастает под сцену с таймлайном и списком целиком, и прокрутка возвращается
   на страницу, откуда её только что убрали. */
.vx-editor__center[b-rnyj50pior]{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg-app)}

/* Загрузка и ошибка — без панелей: показывать пустые боковые колонки рядом
   с единственной строкой текста значило бы, что экран уже собран. */
.vx-editor__solo[b-rnyj50pior]{flex:1;display:flex;align-items:center;justify-content:center;padding:16px}

/* Список реплик забирает весь остаток колонки и прокручивается внутри себя.
   Потолка числом больше нет: он был нужен, пока высоту раздавала страница, а
   теперь её раздаёт окно, и жёсткие 420px на высоком экране оставляли бы под
   списком полосу пустоты, на низком — спорили бы с таймлайном. */
.vx-editor__list[b-rnyj50pior]{flex:1;min-height:0;overflow-y:auto;
  padding:10px 12px;display:flex;flex-direction:column;gap:6px}

/* Строки здесь плотнее, чем в комнате, и это не прихоть: там строка — цель
   («записать эту реплику»), между целями нужен воздух. Здесь список — сводка
   под таймлайном, по ней ведут глазами вдоль всего пака, и каждый лишний
   пиксель отступа — это минус одна видимая реплика.

   Через ::deep, а не правкой line-row.css: кит рисует те же строки в комнате и
   на записи, и уплотнять их там не за что. */
.vx-editor__list[b-rnyj50pior]  .vx-line{padding:6px 10px;gap:9px}

.vx-editor__list[b-rnyj50pior]  .vx-line__main{gap:1px}

/* Полоска роли тянется по высоте строки (align-self:stretch), и собственный
   пол в 34px у неё был ровно тем, что не давало короткой строке стать короткой. */
.vx-editor__list[b-rnyj50pior]  .vx-line__stripe{min-height:0}

.vx-editor__hint[b-rnyj50pior]{padding:16px;font:var(--type-small);color:var(--text-3)}

.vx-editor__error[b-rnyj50pior]{padding:16px;font:var(--type-small);color:var(--text-danger)}

/* Заглушка для телефона (см. разметку). На широком экране её нет, на узком —
   нет самого редактора, и окно перестаёт быть жёстко в высоту экрана: иначе
   длинный текст заглушки обрезался бы без прокрутки. */
.vx-editor__phone[b-rnyj50pior]{display:none}

@media (max-width:640px){
  .vx-editor[b-rnyj50pior]{height:auto;min-height:100vh;overflow:visible}
  .vx-editor__body[b-rnyj50pior]{display:none}
  .vx-editor__phone[b-rnyj50pior]{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);
    padding:var(--space-10) var(--space-4)}
  .vx-editor__phone-acts[b-rnyj50pior]{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2);
    width:100%;max-width:320px}
}
/* /Pages/Editor/PackReview.razor.rz.scp.css */
/* Быстрая проверка ролей. Две колонки: видео слева прилипает, роли справа
   прокручиваются — так любая реплика в списке и кадр, где она звучит, видны
   одновременно. На узком экране видео прилипает сверху, роли идут под ним. */

.vx-review[b-7gbibd5xs8]{min-height:100dvh;display:flex;flex-direction:column;background:var(--bg-app)}

.vx-review__solo[b-7gbibd5xs8]{flex:1;display:grid;place-items:center;padding:var(--space-8) var(--space-4)}
.vx-review__hint[b-7gbibd5xs8]{font:var(--type-body);color:var(--text-3);margin:0}

.vx-review__body[b-7gbibd5xs8]{flex:1;display:grid;grid-template-columns:minmax(360px,44%) minmax(0,1fr);
  gap:var(--space-8);align-items:start;width:100%;max-width:1440px;margin:0 auto;
  padding:var(--space-6) var(--space-6) var(--space-16)}

.vx-review__stage[b-7gbibd5xs8]{position:sticky;top:var(--space-6)}

/* ——— роли ——— */

.vx-review__cast[b-7gbibd5xs8]{display:flex;flex-direction:column;gap:var(--space-5);min-width:0}

.vx-review__lead[b-7gbibd5xs8]{font:var(--type-body);color:var(--text-2);margin:0;max-width:68ch}
.vx-review__note[b-7gbibd5xs8]{font:var(--type-small);color:var(--text-3);margin:calc(var(--space-2) * -1) 0 0;max-width:68ch}
.vx-review__error[b-7gbibd5xs8]{font:var(--type-small);color:var(--text-danger);margin:0}

/* Роль — колонка со своим цветом слева: тем же, что у точки в субтитре и в
   списке выбора. Цвет узнаётся раньше имени, и глаз связывает субтитр с
   ролью без чтения. */
.vx-review__role[b-7gbibd5xs8]{position:relative;background:var(--surface-1);border:1px solid var(--border-1);
  border-radius:var(--radius-lg);padding:var(--space-4) var(--space-4) var(--space-3) var(--space-6);
  box-shadow:var(--inset-top)}
.vx-review__role[b-7gbibd5xs8]::before{content:"";position:absolute;left:var(--space-2);top:var(--space-3);bottom:var(--space-3);
  width:4px;border-radius:var(--radius-pill);background:var(--role)}

.vx-review__role-head[b-7gbibd5xs8]{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
  padding-bottom:var(--space-3);border-bottom:1px solid var(--border-1)}
.vx-review__role-name[b-7gbibd5xs8]{font:var(--type-title);color:var(--text-1);margin:0;overflow-wrap:anywhere}
.vx-review__role-count[b-7gbibd5xs8]{font:var(--type-small);color:var(--text-3);margin-right:auto;white-space:nowrap}
.vx-review__rename[b-7gbibd5xs8]{display:flex;align-items:center;gap:var(--space-1);margin-right:auto}

.vx-review__lines[b-7gbibd5xs8]{list-style:none;margin:0;padding:var(--space-2) 0 0;display:flex;flex-direction:column}

.vx-review__line[b-7gbibd5xs8]{display:flex;align-items:center;gap:var(--space-2);border-radius:var(--radius-md);
  transition:background var(--dur-fast) var(--ease-out)}
.vx-review__line:hover[b-7gbibd5xs8]{background:var(--ghost-hover)}

/* Звучащая сейчас реплика — подкладка цветом её роли. Прослушивая роль,
   человек видит, на какой именно реплике голос стал чужим. */
.vx-review__line--now[b-7gbibd5xs8],
.vx-review__line--now:hover[b-7gbibd5xs8]{background:color-mix(in srgb, var(--role) 16%, transparent)}

.vx-review__line-play[b-7gbibd5xs8]{flex:1;min-width:0;display:flex;align-items:baseline;gap:var(--space-3);
  padding:var(--space-2) var(--space-2);background:none;border:0;border-radius:var(--radius-md);
  color:inherit;text-align:left;cursor:pointer}
.vx-review__line-play:focus-visible[b-7gbibd5xs8]{outline:none;box-shadow:var(--ring)}

.vx-review__line-time[b-7gbibd5xs8]{font:var(--type-mono-s);color:var(--text-3);min-width:4ch;flex-shrink:0}
.vx-review__line-text[b-7gbibd5xs8]{font:var(--type-body);color:var(--text-2);overflow-wrap:anywhere}
.vx-review__line--now .vx-review__line-text[b-7gbibd5xs8]{color:var(--text-1)}

.vx-review__role-foot[b-7gbibd5xs8]{display:flex;justify-content:flex-end;padding-top:var(--space-3);
  margin-top:var(--space-2);border-top:1px solid var(--border-1)}

/* ——— узкий экран ——— */

@media (max-width:900px){
  .vx-review__body[b-7gbibd5xs8]{grid-template-columns:minmax(0,1fr);gap:var(--space-5);
    padding:0 var(--space-4) var(--space-12)}

  .vx-review__role[b-7gbibd5xs8]{padding-left:var(--space-5)}
  .vx-review__line[b-7gbibd5xs8]{flex-wrap:wrap;padding-bottom:var(--space-2)}
  .vx-review__line-play[b-7gbibd5xs8]{flex-basis:100%}
  .vx-review__line[b-7gbibd5xs8]  .vx-select{margin-left:calc(4ch + var(--space-5))}
}

@media (prefers-reduced-motion:reduce){
  .vx-review__line[b-7gbibd5xs8]{transition:none}
}

/* ——— выбранная реплика под видео ——— */

/* Выбранная строка в списке — обводка цветом роли: так видно, что именно
   правится в поле под видео, даже когда реплика уже не звучит. */
.vx-review__line--sel[b-7gbibd5xs8]{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--role) 55%, transparent)}

.vx-review__editor[b-7gbibd5xs8]{margin-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-4);background:var(--surface-1);border:1px solid var(--border-1);
  border-left:4px solid var(--role);border-radius:var(--radius-lg);box-shadow:var(--inset-top)}

.vx-review__editor-head[b-7gbibd5xs8]{display:flex;align-items:baseline;gap:var(--space-3)}
.vx-review__editor-role[b-7gbibd5xs8]{font:var(--type-body-strong);color:var(--role)}
.vx-review__editor-state[b-7gbibd5xs8]{margin-left:auto;font:var(--type-small);color:var(--text-3)}
.vx-review__editor-hint[b-7gbibd5xs8]{font:var(--type-small);color:var(--text-3);margin:0}

/* Удаление — справа внизу, отдельно от поля: палец, тянущийся к тексту, до
   него не достаёт. Подтверждение — на том же месте, без всплывающих окон. */
.vx-review__editor-foot[b-7gbibd5xs8]{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2)}
.vx-review__editor-ask[b-7gbibd5xs8]{font:var(--type-small);color:var(--text-danger);margin-right:auto}

@media (max-width:900px){
  /* На телефоне прилипает только видео: панель правки вместе с ним заняла
     бы полэкрана. Обёртка перестаёт быть коробкой (display:contents), и видео
     прилипает относительно всей страницы, а не своей обёртки — иначе оно
     уезжало бы вместе с ней, едва список ролей начнёт прокручиваться.
     Подложка — цвет страницы, иначе реплики проезжали бы под видео. */
  .vx-review__stage[b-7gbibd5xs8]{display:contents}
  .vx-review__stage[b-7gbibd5xs8]  .vx-stage{position:sticky;top:0;z-index:2;
    padding:var(--space-3) 0;background:var(--bg-app)}
  .vx-review__editor[b-7gbibd5xs8]{margin-top:0}
}

/* ——— пустая роль и добавление ——— */

.vx-review__empty[b-7gbibd5xs8]{font:var(--type-small);color:var(--text-3);margin:var(--space-3) 0 0}

.vx-review__add[b-7gbibd5xs8]{display:flex}
/* /Pages/Editor/PeakWaveform.razor.rz.scp.css */
.vx-wf[b-biz8uh4qet]{position:relative;width:100%;border-radius:var(--radius-md);background:var(--surface-sunken);
  border:1px solid var(--border-1);box-shadow:var(--inset-sunken);overflow:hidden;cursor:pointer}

.vx-wf__canvas[b-biz8uh4qet]{display:block;width:100%;height:100%}

/* Накладки указатель не принимают: цель клика должна быть всегда холстом,
   иначе смещение события считалось бы от каретки, а не от полосы. */
.vx-wf__played[b-biz8uh4qet]{position:absolute;left:0;top:0;bottom:0;pointer-events:none;
  background:var(--accent-soft)}

.vx-wf__head[b-biz8uh4qet]{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;
  background:var(--accent);box-shadow:0 0 6px rgba(245,173,69,.6);pointer-events:none}

.vx-wf__hint[b-biz8uh4qet]{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:var(--type-caption);color:var(--text-3);pointer-events:none}
/* /Pages/Editor/PublishRequestDialog.razor.rz.scp.css */
/* Диалог публикации: свои тут только стек полей и сообщения. Чекбокс, селект
   и поле описания — общие компоненты дизайн-системы. */

.vx-pubreq__stack[b-w40g5mrn6c] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vx-pubreq__note[b-w40g5mrn6c] {
    font: var(--type-body);
    color: var(--text-danger);
    margin: 0;
}

.vx-pubreq__done[b-w40g5mrn6c] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.vx-pubreq__done p[b-w40g5mrn6c] {
    font: var(--type-body);
    color: var(--text-1);
    margin: 0;
}

.vx-pubreq__error[b-w40g5mrn6c] {
    font: var(--type-small);
    color: var(--text-danger);
    margin: 0;
}
/* /Pages/Game/Casting.razor.rz.scp.css */
/* Распределение — сцена (макет распределение.html): заголовок, плашка, карты
   ролей, лента реплик, «Начать игру». Экран заперт по высоте окна: высоту
   раздают сверху вниз, остаток — ленте. min-height:0 на каждом звене — без
   него flex-элемент не сжимается меньше содержимого и выдавливает страницу. */
.vx-cast[b-z260q2pa8c]{flex:1;min-height:0;width:min(860px,100%);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px}

.vx-cast__head[b-z260q2pa8c]{text-align:center;animation:vx-cast-drop-b-z260q2pa8c .55s cubic-bezier(.3,1.4,.5,1) .05s backwards}
@keyframes vx-cast-drop-b-z260q2pa8c{from{transform:translateY(-24px);opacity:0}}
.vx-cast__title[b-z260q2pa8c]{margin:0;font:900 34px/1.1 var(--font-display);color:var(--text-1)}
.vx-cast__sub[b-z260q2pa8c]{margin:6px 0 0;font:var(--type-small);color:var(--text-2)}

/* Нераспределённые — мягко пульсирующая плашка. */
.vx-cast__warn[b-z260q2pa8c]{display:flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;flex:none;
  background:rgba(242,193,78,.12);border:1px solid rgba(242,193,78,.35);color:#F7D58A;font:700 13px var(--font-display);
  animation:vx-cast-rise-b-z260q2pa8c .45s cubic-bezier(.3,1.4,.5,1) .25s backwards,vx-cast-warn-b-z260q2pa8c 2.4s ease-in-out infinite}
.vx-cast__warn b[b-z260q2pa8c]{font:900 14px var(--font-display);color:var(--gold-500)}
@keyframes vx-cast-warn-b-z260q2pa8c{50%{box-shadow:0 0 0 6px rgba(242,193,78,.08)}}
@keyframes vx-cast-rise-b-z260q2pa8c{from{transform:translateY(20px);opacity:0}}

/* Роли — карты в ряд. Ролей бывает за двадцать: область ограничена по высоте
   и прокручивается сама, иначе от ленты реплик оставалась бы полоса. */
.vx-cast__roles[b-z260q2pa8c]{flex:0 1 auto;max-height:38%;min-height:0;overflow-y:auto;width:100%;
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;padding:14px 8px 10px;
  scrollbar-width:thin;scrollbar-color:var(--warm-700) transparent}
.vx-cast__role[b-z260q2pa8c]{position:relative;width:172px;height:118px;flex:none;border-radius:18px;padding:16px 14px 12px;text-align:left;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--border-1);color:var(--text-1);box-shadow:0 14px 30px rgba(0,0,0,.45);
  display:flex;flex-direction:column;font:inherit;
  transition:transform .3s cubic-bezier(.3,1.4,.5,1),box-shadow .3s,opacity .3s,background .3s;
  animation:vx-cast-deal-b-z260q2pa8c .6s cubic-bezier(.2,.9,.3,1.1) backwards;animation-delay:calc(.15s + var(--i) * 70ms)}
@keyframes vx-cast-deal-b-z260q2pa8c{from{transform:translateY(60px) rotate(8deg);opacity:0}}
/* Полоса цвета роли — поверх рамки, вплотную к обводке и у выбранной карты. */
.vx-cast__role[b-z260q2pa8c]::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:8px;border-radius:18px 18px 0 0;background:var(--c)}
.vx-cast__role:hover:not(:disabled)[b-z260q2pa8c]{transform:translateY(-8px) rotate(-1.5deg)}
.vx-cast__role:focus-visible[b-z260q2pa8c]{outline:none;box-shadow:var(--ring),0 14px 30px rgba(0,0,0,.45)}
.vx-cast__role--mine[b-z260q2pa8c]{background:linear-gradient(160deg,#FFF6EA,#F3DEC2);border-color:transparent;color:var(--text-inverse);transform:translateY(-10px);
  box-shadow:0 0 0 3px var(--amber-400),0 0 30px rgba(245,173,69,.35),0 18px 34px rgba(0,0,0,.5)}
.vx-cast__role--mine:hover[b-z260q2pa8c]{transform:translateY(-14px) rotate(-1.5deg)}
.vx-cast__role--busy[b-z260q2pa8c]{opacity:.55;cursor:default}
.vx-cast__roletop[b-z260q2pa8c]{display:flex;flex-direction:column;gap:4px;min-width:0}
.vx-cast__rolename[b-z260q2pa8c]{font:900 18px/1.15 var(--font-display);color:var(--c);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.vx-cast__rolemeta[b-z260q2pa8c]{font:700 12px var(--font-display);color:var(--text-3)}
.vx-cast__role--mine .vx-cast__rolemeta[b-z260q2pa8c]{color:#8a6a44}
.vx-cast__take[b-z260q2pa8c]{position:absolute;left:14px;bottom:12px;font:800 11px var(--font-display);background:var(--warm-700);color:var(--text-2);
  padding:4px 9px;border-radius:999px;transition:background .2s,color .2s}
.vx-cast__role:hover .vx-cast__take[b-z260q2pa8c]{background:var(--amber-400);color:var(--text-inverse)}
.vx-cast__take--mine[b-z260q2pa8c],.vx-cast__role:hover .vx-cast__take--mine[b-z260q2pa8c]{background:rgba(36,23,3,.08);color:#8a6a44}
.vx-cast__jets[b-z260q2pa8c]{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:row-reverse}
.vx-cast__jets[b-z260q2pa8c]  .vx-jet{margin-left:-8px;box-shadow:0 0 0 2px var(--surface-2),0 4px 8px rgba(0,0,0,.4)}
.vx-cast__role--mine .vx-cast__jets[b-z260q2pa8c]  .vx-jet{box-shadow:0 0 0 2px #F3DEC2,0 4px 8px rgba(0,0,0,.3)}

/* Много ролей — карты мельче, чтобы ряд держал больше. */
.vx-cast__roles--many .vx-cast__role[b-z260q2pa8c]{width:148px;height:96px;padding:13px 12px 10px}
.vx-cast__roles--many .vx-cast__rolename[b-z260q2pa8c]{font-size:16px}
.vx-cast__roles--many .vx-cast__take[b-z260q2pa8c]{display:none}

/* Лента реплик. */
.vx-cast__bar[b-z260q2pa8c]{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
.vx-cast__h[b-z260q2pa8c]{font:900 18px var(--font-display);color:var(--text-1)}
.vx-cast__h small[b-z260q2pa8c]{font:600 12px var(--font-text);color:var(--text-3);margin-left:8px}
.vx-cast__chip[b-z260q2pa8c]{font:800 12px var(--font-display);padding:8px 13px;border-radius:12px;border:none;cursor:pointer;
  background:var(--warm-800);color:var(--text-2);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.3,1.5,.5,1),background .2s,color .2s}
.vx-cast__chip:hover[b-z260q2pa8c]{transform:translateY(-2px)}
.vx-cast__chip:focus-visible[b-z260q2pa8c]{outline:none;box-shadow:var(--ring)}
.vx-cast__chip--on[b-z260q2pa8c]{background:var(--amber-400);color:var(--text-inverse)}

.vx-cast__lines[b-z260q2pa8c]{width:100%;flex:1;min-height:120px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px 8px 12px 4px;
  scrollbar-width:thin;scrollbar-color:var(--warm-700) transparent}
.vx-cast__line[b-z260q2pa8c]{position:relative;flex:none;display:flex;align-items:center;gap:14px;padding:11px 14px 11px 18px;border-radius:14px;width:100%;
  text-align:left;font:inherit;color:var(--text-1);cursor:pointer;background:rgba(34,29,26,.92);border:1px solid rgba(255,255,255,.06);
  transition:transform .25s cubic-bezier(.3,1.4,.5,1),background .25s,box-shadow .25s,opacity .3s;
  animation:vx-cast-line-b-z260q2pa8c .45s cubic-bezier(.3,1.3,.5,1) backwards;animation-delay:calc(.35s + var(--i) * 35ms)}
@keyframes vx-cast-line-b-z260q2pa8c{from{transform:translateX(30px);opacity:0}}
.vx-cast__line[b-z260q2pa8c]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:5px;border-radius:0 4px 4px 0;background:var(--c)}
.vx-cast__line:hover:not(:disabled)[b-z260q2pa8c]{transform:translateX(6px);background:rgba(42,36,33,.96)}
.vx-cast__line:focus-visible[b-z260q2pa8c]{outline:none;box-shadow:var(--ring)}
.vx-cast__line--mine[b-z260q2pa8c]{background:rgba(245,173,69,.13);box-shadow:inset 0 0 0 2px rgba(245,173,69,.7)}
.vx-cast__line--mine:hover:not(:disabled)[b-z260q2pa8c]{background:rgba(245,173,69,.18)}
.vx-cast__line--busy[b-z260q2pa8c]{opacity:.6;cursor:default}
.vx-cast__who[b-z260q2pa8c]{font:800 11px var(--font-display);text-transform:uppercase;letter-spacing:.6px;color:var(--c);width:96px;flex:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-cast__text[b-z260q2pa8c]{flex:1;min-width:0;font:600 15px/1.35 var(--font-text)}
.vx-cast__time[b-z260q2pa8c]{flex:none;font:700 11px var(--font-mono);color:var(--text-3);white-space:nowrap}
.vx-cast__slot[b-z260q2pa8c]{width:64px;flex:none;display:flex;justify-content:flex-end}
.vx-cast__grab[b-z260q2pa8c]{font:800 11px var(--font-display);background:var(--warm-700);color:var(--text-2);padding:5px 10px;border-radius:999px;transition:background .2s,color .2s}
.vx-cast__line:hover .vx-cast__grab[b-z260q2pa8c]{background:var(--amber-400);color:var(--text-inverse)}
.vx-cast__none[b-z260q2pa8c]{width:100%;padding:16px 4px;text-align:center;font:var(--type-small);color:var(--text-3)}

/* «Начать игру» — главная кнопка шага, как «Начать» в лобби. */
.vx-cast__go[b-z260q2pa8c]{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;animation:vx-cast-rise-b-z260q2pa8c .5s cubic-bezier(.3,1.4,.5,1) .6s backwards}
.vx-cast__go[b-z260q2pa8c]  .vx-consent{margin:0;text-align:center;font:var(--type-caption);color:var(--text-3);max-width:440px}
.vx-cast__goline[b-z260q2pa8c]{display:flex;align-items:center;gap:10px}
.vx-cast__start[b-z260q2pa8c]{font:900 22px/1.1 var(--font-display);padding:14px 50px;border-radius:999px;border:none;cursor:pointer;
  background:var(--amber-400);color:var(--text-inverse);display:flex;flex-direction:column;align-items:center;gap:2px;
  box-shadow:0 12px 30px rgba(245,173,69,.3),inset 0 -4px 0 rgba(0,0,0,.15);
  transition:transform .25s cubic-bezier(.3,1.4,.5,1),background .2s;animation:vx-cast-glow-b-z260q2pa8c 2.8s ease-in-out 1.4s infinite}
@keyframes vx-cast-glow-b-z260q2pa8c{50%{box-shadow:0 12px 44px rgba(245,173,69,.55),inset 0 -4px 0 rgba(0,0,0,.15)}}
.vx-cast__start small[b-z260q2pa8c]{font:700 12px var(--font-display);opacity:.7}
.vx-cast__start:hover:not(:disabled)[b-z260q2pa8c]{transform:translateY(-3px) scale(1.04);background:var(--amber-300)}
.vx-cast__start:active:not(:disabled)[b-z260q2pa8c]{transform:translateY(1px) scale(.98)}
.vx-cast__start:focus-visible[b-z260q2pa8c]{outline:none;box-shadow:var(--ring),0 12px 30px rgba(245,173,69,.3)}
.vx-cast__start:disabled[b-z260q2pa8c]{background:var(--warm-700);color:var(--text-2);box-shadow:none;cursor:default;animation:none}

.vx-cast__morew[b-z260q2pa8c]{position:relative}
.vx-cast__more[b-z260q2pa8c]{width:50px;height:50px;border-radius:50%;border:none;cursor:pointer;background:var(--warm-800);color:var(--text-2);display:grid;place-items:center;
  transition:background .2s}
.vx-cast__more:hover[b-z260q2pa8c]{background:var(--warm-750);color:var(--text-1)}
.vx-cast__more:focus-visible[b-z260q2pa8c]{outline:none;box-shadow:var(--ring)}
.vx-cast__menu[b-z260q2pa8c]{position:absolute;right:0;bottom:60px;width:220px;padding:8px;border-radius:18px;z-index:5;
  background:rgba(34,29,26,.98);border:1px solid var(--border-1);box-shadow:0 20px 50px rgba(0,0,0,.55);
  transform-origin:90% 100%;transform:scale(.7);opacity:0;visibility:hidden;transition:transform .25s cubic-bezier(.3,1.4,.5,1),opacity .2s,visibility 0s .25s}
.vx-cast__menu--on[b-z260q2pa8c]{transform:none;opacity:1;visibility:visible;transition:transform .25s cubic-bezier(.3,1.4,.5,1),opacity .2s}
.vx-cast__menuitem[b-z260q2pa8c]{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font:700 14px var(--font-display);padding:10px 12px;border-radius:12px;
  border:none;background:none;color:var(--text-1);cursor:pointer}
.vx-cast__menuitem:hover[b-z260q2pa8c]{background:var(--warm-750)}
.vx-cast__menuitem--danger[b-z260q2pa8c]{color:var(--coral-500)}

@media (prefers-reduced-motion:reduce){
  .vx-cast__head[b-z260q2pa8c],.vx-cast__warn[b-z260q2pa8c],.vx-cast__role[b-z260q2pa8c],.vx-cast__line[b-z260q2pa8c],.vx-cast__go[b-z260q2pa8c],.vx-cast__start[b-z260q2pa8c]{animation:none}
}

/* Телефон: замок по высоте окна снят (Room.razor.css), списки идут в поток
   без своих прокруток — прокрутка в прокрутке под пальцем — ловушка. */
@media (max-width:640px){
  .vx-cast__title[b-z260q2pa8c]{font-size:26px}
  .vx-cast__roles[b-z260q2pa8c]{max-height:none;overflow:visible}
  .vx-cast__role[b-z260q2pa8c]{width:calc(50% - 7px)}
  .vx-cast__lines[b-z260q2pa8c]{flex:none;min-height:0;overflow:visible}
  /* Роль — строкой над текстом: в ряд с ним на телефоне не помещается. */
  .vx-cast__line[b-z260q2pa8c]{flex-wrap:wrap;gap:2px 10px}
  .vx-cast__who[b-z260q2pa8c]{width:auto;flex-basis:calc(100% - 74px)}
  .vx-cast__slot[b-z260q2pa8c]{order:-1;margin-left:auto}
  .vx-cast__text[b-z260q2pa8c]{flex-basis:100%}
  .vx-cast__time[b-z260q2pa8c]{display:none}
}
.vx-cast__menuveil[b-z260q2pa8c]{position:fixed;inset:0;z-index:4}
/* /Pages/Game/EffectPicker.razor.rz.scp.css */
.vx-fxp[b-oqqu0ulvbu]{display:flex;flex-direction:column;gap:var(--space-3)}
/* Список прокручивается внутри окна: звуков десятки, а кнопки окна должны оставаться на виду. */
.vx-fxp__list[b-oqqu0ulvbu]{display:flex;flex-direction:column;gap:2px;max-height:min(52vh,460px);overflow-y:auto;padding-right:4px}
.vx-fxp__h[b-oqqu0ulvbu]{margin:var(--space-3) 0 4px;font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3)}
.vx-fxp__h:first-child[b-oqqu0ulvbu]{margin-top:0}
.vx-fxp__row[b-oqqu0ulvbu]{display:flex;align-items:center;gap:6px;border-radius:var(--radius-md)}
.vx-fxp__row.is-on[b-oqqu0ulvbu]{background:var(--accent-soft)}
.vx-fxp__pick[b-oqqu0ulvbu]{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-2);padding:6px 8px;border:0;border-radius:var(--radius-md);
  background:transparent;color:var(--text-1);font:var(--type-body);text-align:left;cursor:pointer}
.vx-fxp__pick:hover[b-oqqu0ulvbu]{background:var(--ghost-hover)}
.vx-fxp__name[b-oqqu0ulvbu]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-fxp__row.is-on .vx-fxp__name[b-oqqu0ulvbu]{color:var(--text-accent)}
.vx-fxp__len[b-oqqu0ulvbu]{font:var(--type-small);color:var(--text-3)}
.vx-fxp__empty[b-oqqu0ulvbu],.vx-fxp__hint[b-oqqu0ulvbu]{margin:0;font:var(--type-small);color:var(--text-3)}
/* /Pages/Game/Lobby.razor.rz.scp.css */
/* Лобби — сцена: слева знак и колонка карточек игроков, справа пак и код,
   в центре режимы и правила, внизу «Начать». Каждая часть въезжает на место
   своим ходом — как декорации перед началом шоу. */
.vx-lob[b-1m837uovee]{display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-rows:auto 1fr;gap:0 var(--gap-section);
  min-height:100dvh;padding:24px 3vw 24px 24px;box-sizing:border-box;
  /* Въезд кода справа не должен на миг давать странице горизонтальную прокрутку.
     clip, а не hidden: не делает лобби прокручиваемым и не ломает sticky колонки. */
  overflow-x:clip}

/* Колонка игроков. Низ держит место под кружком громкости (левый нижний угол). */
.vx-lob__aside[b-1m837uovee]{grid-row:1 / 3;display:flex;flex-direction:column;gap:12px;min-height:0;max-height:calc(100dvh - 120px);
  position:sticky;top:24px}
.vx-lob__brand[b-1m837uovee]{display:inline-flex;align-self:flex-start;text-decoration:none;border:0;margin-bottom:6px;border-radius:8px;
  animation:vx-lob-left-b-1m837uovee .6s cubic-bezier(.2,.9,.3,1.1) backwards}
.vx-lob__brand:focus-visible[b-1m837uovee]{outline:none;box-shadow:var(--ring)}
.vx-lob__count[b-1m837uovee]{margin-left:4px}
.vx-lob__roster[b-1m837uovee]{display:flex;flex-direction:column;gap:12px;overflow-y:auto;overflow-x:hidden;padding:4px 6px 14px 2px;min-height:0;
  scrollbar-width:thin;scrollbar-color:var(--warm-700) transparent}
.vx-lob__slot[b-1m837uovee]{flex:none;min-height:76px;border:2px dashed var(--warm-600);border-radius:18px;display:grid;place-items:center;
  padding:0 16px;text-align:center;font:var(--type-small);color:var(--text-3);animation:vx-lob-wait-b-1m837uovee 2.6s ease-in-out infinite}
/* Пустой слот «дышит»: компания ещё собирается. */
@keyframes vx-lob-wait-b-1m837uovee{50%{border-color:var(--warm-500);color:var(--text-2)}}
.vx-lob__rename[b-1m837uovee]{flex:none;min-height:92px;padding:0 10px;border-radius:18px;background:var(--surface-2);box-shadow:0 0 0 2px var(--amber-400)}
.vx-lob__consent[b-1m837uovee]{font:var(--type-caption);color:var(--text-3)}

/* Пак слева сверху, код справа сверху. */
.vx-lob__top[b-1m837uovee]{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.vx-lob__pack[b-1m837uovee]{display:flex;gap:14px;align-items:center;min-width:0;animation:vx-lob-left-b-1m837uovee .6s cubic-bezier(.2,.9,.3,1.1) .05s backwards}
.vx-lob__top[b-1m837uovee]  .vx-code--tiles{animation:vx-lob-right-b-1m837uovee .6s cubic-bezier(.2,.9,.3,1.1) .1s backwards}
@keyframes vx-lob-left-b-1m837uovee{from{transform:translateX(-40px);opacity:0}}
@keyframes vx-lob-right-b-1m837uovee{from{transform:translateX(40px);opacity:0}}
.vx-lob__thumb[b-1m837uovee]{position:relative;width:132px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--warm-750),var(--warm-850));color:var(--warm-600);box-shadow:0 10px 24px rgba(0,0,0,.5);
  transform:rotate(-2deg)}
/* Кадр — поверх значка: не загрузился — остаётся плёнка, а не битая картинка. */
.vx-lob__thumb img[b-1m837uovee]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vx-lob__packtext[b-1m837uovee]{min-width:0}
.vx-lob__title[b-1m837uovee]{margin:0;font:900 24px/1.15 var(--font-display);color:var(--text-1)}
.vx-lob__meta[b-1m837uovee]{font:var(--type-small);color:var(--text-2)}
.vx-lob__packacts[b-1m837uovee]{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}

/* Центр: режимы и правила. */
.vx-lob__center[b-1m837uovee]{display:flex;flex-direction:column;align-items:center;gap:22px;padding:3vh 0 0;min-width:0}
.vx-lob__heading[b-1m837uovee]{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  animation:vx-lob-drop-b-1m837uovee .55s cubic-bezier(.3,1.4,.5,1) .1s backwards}
@keyframes vx-lob-drop-b-1m837uovee{from{transform:translateY(-24px) scale(.96);opacity:0}}
.vx-lob__h2[b-1m837uovee]{margin:0;font:900 32px/1.1 var(--font-display);color:var(--text-1)}
.vx-lob__sub[b-1m837uovee]{font:var(--type-small);color:var(--text-2)}
.vx-lob__rules[b-1m837uovee]{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:stretch}
.vx-lob__grp[b-1m837uovee]{width:300px;display:flex;flex-direction:column;gap:9px;padding:14px 16px;border-radius:20px;
  background:rgba(34,29,26,.9);border:1px solid var(--border-1);box-shadow:0 14px 30px rgba(0,0,0,.35);
  animation:vx-lob-rise-b-1m837uovee .45s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(.6s + var(--i) * 90ms)}
@keyframes vx-lob-rise-b-1m837uovee{from{transform:translateY(24px);opacity:0}}
.vx-lob__grph[b-1m837uovee]{margin:0;font:800 11px var(--font-display);text-transform:uppercase;letter-spacing:1px;color:var(--text-3)}
.vx-lob__grp[b-1m837uovee]  .vx-seg__item{flex:1;justify-content:center}

/* «Начать» — главная кнопка сцены: крупная, тёплая, дышит светом. */
.vx-lob__go[b-1m837uovee]{display:flex;flex-direction:column;align-items:center;gap:12px;padding-bottom:8px;
  animation:vx-lob-rise-b-1m837uovee .5s cubic-bezier(.3,1.4,.5,1) .8s backwards}
.vx-lob__start[b-1m837uovee]{font:900 22px/1.1 var(--font-display);padding:14px 52px;border-radius:999px;border:none;cursor:pointer;
  background:var(--amber-400);color:var(--text-inverse);box-shadow:0 12px 30px rgba(245,173,69,.3),inset 0 -4px 0 rgba(0,0,0,.15);
  transition:transform .25s cubic-bezier(.3,1.4,.5,1),background .2s;display:flex;flex-direction:column;align-items:center;gap:2px;
  animation:vx-lob-glow-b-1m837uovee 2.8s ease-in-out 1.4s infinite}
@keyframes vx-lob-glow-b-1m837uovee{50%{box-shadow:0 12px 44px rgba(245,173,69,.55),inset 0 -4px 0 rgba(0,0,0,.15)}}
.vx-lob__start small[b-1m837uovee]{font:700 12px var(--font-display);opacity:.7}
.vx-lob__start:hover:not(:disabled)[b-1m837uovee]{transform:translateY(-3px) scale(1.04);background:var(--amber-300)}
.vx-lob__start:active:not(:disabled)[b-1m837uovee]{transform:translateY(1px) scale(.98)}
.vx-lob__start:focus-visible[b-1m837uovee]{outline:none;box-shadow:var(--ring),0 12px 30px rgba(245,173,69,.3)}
.vx-lob__start:disabled[b-1m837uovee]{background:var(--warm-700);color:var(--text-2);box-shadow:none;cursor:default;animation:none}
.vx-lob__phones[b-1m837uovee]{display:flex;align-items:center;gap:8px;font:var(--type-caption);color:var(--text-3);text-align:center}

/* Правила партии — тексты для гостя и ссылка на пропуск. */
.vx-lobby__voicelevel[b-1m837uovee]{font:var(--type-body-strong);color:var(--text-1)}

/* «Пропуск» — ссылка по виду, кнопка по сути: открывает попап, а не страницу. */
.vx-lobby__passlink[b-1m837uovee]{padding:0;border:0;background:none;font:inherit;color:var(--text-accent);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.vx-lobby__passlink:focus-visible[b-1m837uovee]{outline:none;box-shadow:var(--ring);border-radius:2px}
.vx-lobby__open[b-1m837uovee]{display:flex;align-items:center;gap:6px;font:var(--type-small-strong);color:var(--text-accent)}

@media (prefers-reduced-motion:reduce){
  .vx-lob__brand[b-1m837uovee],.vx-lob__pack[b-1m837uovee],.vx-lob__top[b-1m837uovee]  .vx-code--tiles,.vx-lob__heading[b-1m837uovee],.vx-lob__grp[b-1m837uovee],.vx-lob__go[b-1m837uovee],.vx-lob__start[b-1m837uovee],.vx-lob__slot[b-1m837uovee]{animation:none}
}

/* Узкий экран: одна колонка — игроки, пак и код, режимы, правила. */
@media (max-width:900px){
  .vx-lob[b-1m837uovee]{grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding:16px 16px 96px;gap:20px}
  .vx-lob__aside[b-1m837uovee]{grid-row:auto;position:static;max-height:none}
  /* Колонка — около трёх карточек с прокруткой внутри: при большой компании
     режимы и «Начать» не уезжают на несколько экранов вниз. */
  .vx-lob__roster[b-1m837uovee]{max-height:min(320px,45dvh)}
  .vx-lob__top[b-1m837uovee]{flex-direction:column}
  .vx-lob__top[b-1m837uovee]  .vx-code--tiles{align-items:flex-start}
  .vx-lob__top[b-1m837uovee]  .vx-code--tiles .vx-code__cap{text-align:left}
  .vx-lob__grp[b-1m837uovee]{width:100%}
  .vx-lob__h2[b-1m837uovee]{font-size:26px}
}

/* Совсем узкий телефон: превью пака над текстом — кнопкам пака нужна ширина. */
@media (max-width:360px){
  .vx-lob__pack[b-1m837uovee]{flex-direction:column;align-items:flex-start}
}
/* /Pages/Game/ModePicker.razor.rz.scp.css */
.vx-modes[b-ahdvu3eto2]{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;padding-top:22px}
/* Карточки раздаются одна за другой — как колода на стол. */
.vx-mode[b-ahdvu3eto2]{position:relative;width:176px;min-height:236px;border-radius:20px;padding:18px 16px;display:flex;flex-direction:column;gap:8px;
  background:var(--surface-2);border:1px solid var(--border-1);box-shadow:0 14px 30px rgba(0,0,0,.45);
  transition:transform .3s cubic-bezier(.3,1.4,.5,1),box-shadow .3s,opacity .3s;
  animation:vx-mode-deal-b-ahdvu3eto2 .6s cubic-bezier(.2,.9,.3,1.1) backwards;animation-delay:calc(.15s + var(--i) * 80ms)}
@keyframes vx-mode-deal-b-ahdvu3eto2{from{transform:translateY(60px) rotate(8deg);opacity:0}}
.vx-mode--sel[b-ahdvu3eto2]{background:linear-gradient(160deg,#FFF6EA,#F3DEC2);color:var(--text-inverse);transform:translateY(-16px) scale(1.04);
  box-shadow:0 0 0 4px var(--amber-400),0 0 40px rgba(245,173,69,.45),0 20px 40px rgba(0,0,0,.5)}
/* Выбранная живёт: еле заметно покачивается, пока ждут старта. */
.vx-mode--sel:not(.vx-mode--soon)[b-ahdvu3eto2]{animation:vx-mode-deal-b-ahdvu3eto2 .6s cubic-bezier(.2,.9,.3,1.1) backwards,vx-mode-idle-b-ahdvu3eto2 4s ease-in-out 1.2s infinite;
  animation-delay:calc(.15s + var(--i) * 80ms),1.2s}
@keyframes vx-mode-idle-b-ahdvu3eto2{50%{rotate:-1deg}}
.vx-mode--soon[b-ahdvu3eto2]{opacity:.42;filter:saturate(.6)}
.vx-mode__ic[b-ahdvu3eto2]{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--surface-3);color:var(--amber-300)}
.vx-mode--sel .vx-mode__ic[b-ahdvu3eto2]{background:rgba(36,23,3,.08);color:var(--amber-600)}
.vx-mode__name[b-ahdvu3eto2]{font:900 20px var(--font-display)}
.vx-mode__pitch[b-ahdvu3eto2]{margin:0;font:var(--type-small);color:var(--text-2);flex:1}
.vx-mode--sel .vx-mode__pitch[b-ahdvu3eto2]{color:#6b5236}
.vx-mode__meta[b-ahdvu3eto2]{display:flex;justify-content:space-between;gap:8px;font:700 11px var(--font-display);color:var(--text-3)}
.vx-mode--sel .vx-mode__meta[b-ahdvu3eto2]{color:#8a6a44}
.vx-mode__soon[b-ahdvu3eto2]{position:absolute;top:12px;right:12px;font:800 10px var(--font-display);background:var(--warm-700);color:var(--text-2);padding:4px 8px;border-radius:999px}
.vx-mode__host[b-ahdvu3eto2]{position:absolute;top:-26px;left:50%;transform:translateX(-50%);font:800 11px var(--font-display);color:var(--amber-300);white-space:nowrap;
  text-transform:uppercase;letter-spacing:.8px}
@media (prefers-reduced-motion:reduce){.vx-mode[b-ahdvu3eto2],.vx-mode--sel:not(.vx-mode--soon)[b-ahdvu3eto2]{animation:none}}
@media (max-width:900px){
  .vx-modes[b-ahdvu3eto2]{gap:12px}
  .vx-mode[b-ahdvu3eto2]{width:calc(50% - 6px);min-height:0}
  .vx-mode--sel[b-ahdvu3eto2]{transform:none}
}
/* /Pages/Game/PublishConsentNote.razor.rz.scp.css */
.vx-consent[b-6jepyiga90]{font:var(--type-caption);color:var(--text-3);margin:0}
/* /Pages/Game/PublishDialog.razor.rz.scp.css */
.vx-pubd[b-s8exa8svdh]{display:flex;flex-direction:column;gap:var(--space-3)}
/* Ссылка — по ширине текста: в колонке она растягивалась, и нижняя черта
   ссылки шла через весь диалог. */
.vx-pubd__rules[b-s8exa8svdh]{font:var(--type-caption);color:var(--text-3);margin-top:calc(-1 * var(--space-2));align-self:flex-start}
.vx-pubd__hint[b-s8exa8svdh]{font:var(--type-caption);color:var(--text-3);margin:0}
.vx-pubd__error[b-s8exa8svdh]{font:var(--type-small);color:var(--text-danger);margin:0}
/* /Pages/Game/Recording.razor.rz.scp.css */
/* Экран записи — сцена (макет запись.html): сверху «Реплика N из M» и полоска,
   в центре кадр с субтитром, под ним волна и большая кнопка записи, справа
   колода своих реплик и «Я закончил». Фон спокойный — внимание на тайминг. */
/* Экран заперт по высоте окна, как распределение: страница не прокручивается,
   кадр подстраивается под высоту, колода прокручивается сама. */
.vx-dub[b-gxx2aaxfel]{flex:1;min-height:0;display:flex;flex-direction:column}

/* ——— верх ——— */
.vx-dub__head[b-gxx2aaxfel]{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:-58px;animation:vx-dub-drop-b-gxx2aaxfel .5s cubic-bezier(.3,1.4,.5,1) backwards}
@keyframes vx-dub-drop-b-gxx2aaxfel{from{transform:translateY(-20px);opacity:0}}
.vx-dub__title[b-gxx2aaxfel]{font:900 26px/1 var(--font-display);color:var(--text-1)}
.vx-dub__prog[b-gxx2aaxfel]{position:relative;width:240px;height:8px;border-radius:999px;background:var(--warm-700)}
.vx-dub__fill[b-gxx2aaxfel]{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--status-ready);transition:width .6s cubic-bezier(.3,1.2,.5,1)}
.vx-dub__at[b-gxx2aaxfel]{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--amber-400);box-shadow:0 0 0 3px rgba(20,17,16,.9);
  translate:-50% -50%;transition:left .45s cubic-bezier(.3,1.4,.5,1)}
.vx-dub__count[b-gxx2aaxfel]{font:700 12px var(--font-display);color:var(--text-3)}

/* ——— сцена: колонка с кадром и боковая колода ——— */
.vx-dub__main[b-gxx2aaxfel]{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr);gap:28px}
/* Ширина колонки — от высоты окна: кадр 16:9 плюс заголовок, волна и пульт
   должны поместиться без прокрутки. */
.vx-dub__col[b-gxx2aaxfel]{width:min(100%,calc((100dvh - 430px) * 16 / 9));min-height:0;margin:0 auto;display:flex;flex-direction:column;gap:12px}

/* Кадр: во время записи — красная обводка и метка «● Запись»; по краям экрана
   дышит красная кромка (.vx-dub--rec). */
.vx-dub__frame[b-gxx2aaxfel]{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#0d0b0a;
  box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);transition:box-shadow .3s;
  animation:vx-dub-rise-b-gxx2aaxfel .5s cubic-bezier(.3,1.3,.5,1) .05s backwards}
@keyframes vx-dub-rise-b-gxx2aaxfel{from{transform:translateY(24px);opacity:0}}
.vx-dub--rec .vx-dub__frame[b-gxx2aaxfel]{box-shadow:0 0 0 3px rgba(255,92,72,.85),0 0 40px rgba(255,92,72,.3),0 30px 60px rgba(0,0,0,.6)}
.vx-dub--rec[b-gxx2aaxfel]::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:30;animation:vx-dub-edge-b-gxx2aaxfel 1.6s ease-in-out infinite}
@keyframes vx-dub-edge-b-gxx2aaxfel{50%{box-shadow:inset 0 0 140px rgba(255,92,72,.22)}}
.vx-dub__video[b-gxx2aaxfel]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vx-dub__tc[b-gxx2aaxfel]{position:absolute;right:14px;top:12px;font:700 11px var(--font-mono);color:rgba(255,255,255,.75);background:rgba(0,0,0,.4);padding:3px 8px;border-radius:8px}
.vx-dub__drawn[b-gxx2aaxfel]{position:absolute;left:14px;top:12px;display:flex;align-items:center;gap:6px;font:800 12px var(--font-display);
  background:var(--amber-400);color:var(--text-inverse);padding:5px 10px;border-radius:999px;animation:vx-dub-pop-b-gxx2aaxfel .6s cubic-bezier(.3,1.6,.5,1) .3s backwards}
@keyframes vx-dub-pop-b-gxx2aaxfel{from{transform:scale(0) rotate(-12deg)}}
.vx-dub__live[b-gxx2aaxfel]{position:absolute;left:50%;top:12px;translate:-50% 0;font:900 12px var(--font-display);letter-spacing:1.5px;text-transform:uppercase;
  background:var(--coral-500);color:#fff;padding:5px 12px;border-radius:999px;transform:scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.vx-dub--rec .vx-dub__live[b-gxx2aaxfel]{transform:none}
/* Субтитр: реплики бывают длинными — до трёх строк, мельче заголовка. */
.vx-dub__sub[b-gxx2aaxfel]{position:absolute;left:16px;right:16px;bottom:16px;padding:10px 16px 12px;border-radius:16px;
  background:rgba(20,17,16,.84);backdrop-filter:blur(6px);border-left:6px solid var(--c);
  animation:vx-dub-sub-b-gxx2aaxfel .5s cubic-bezier(.3,1.4,.5,1) backwards}
@keyframes vx-dub-sub-b-gxx2aaxfel{from{transform:translateY(30px);opacity:0}}
.vx-dub__who[b-gxx2aaxfel]{display:block;font:900 12px var(--font-display);letter-spacing:1px;text-transform:uppercase;color:var(--c)}
.vx-dub__text[b-gxx2aaxfel]{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px;
  font:800 19px/1.3 var(--font-display);color:var(--warm-050);text-wrap:pretty}

/* ——— волна (классы прежние: fx-marks.js ищет значки по .vx-rec__fxmark) ——— */
.vx-rec__wave[b-gxx2aaxfel]{display:flex;flex-direction:column;gap:6px}
.vx-rec__wave-wrap[b-gxx2aaxfel]{position:relative;overflow:hidden;border-radius:16px;background:rgba(27,23,21,.9);border:1px solid rgba(255,255,255,.07)}
.vx-rec__linemark[b-gxx2aaxfel]{position:absolute;top:20%;bottom:20%;pointer-events:none;background:rgba(245,173,69,.5);border-radius:2px;z-index:2}
.vx-rec__take[b-gxx2aaxfel]{position:absolute;top:0;bottom:0;pointer-events:none;overflow:hidden;border-radius:var(--radius-sm);z-index:2}
.vx-rec__take[b-gxx2aaxfel]  .vx-wf{background:transparent;border-radius:0}
.vx-rec__wave-wrap[b-gxx2aaxfel]  .vx-wf{background:transparent}
.vx-rec__wave-wrap[b-gxx2aaxfel]  .vx-wf__played{z-index:3}
.vx-rec__wave-wrap[b-gxx2aaxfel]  .vx-wf__head{z-index:4}
.vx-rec__wave-caps[b-gxx2aaxfel]{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:32px;font:var(--type-caption);color:var(--text-3)}
.vx-rec__nudge[b-gxx2aaxfel]{display:flex;align-items:center;gap:2px;flex:0 0 auto;animation:vx-dub-rise-b-gxx2aaxfel .3s cubic-bezier(.3,1.4,.5,1)}
.vx-rec__nudgeval[b-gxx2aaxfel]{min-width:7ch;text-align:center;font:var(--type-mono-s);color:var(--text-2)}
.vx-rec__fxmark[b-gxx2aaxfel]{position:absolute;top:0;bottom:0;width:12px;margin-left:-6px;padding:0;border:0;background:transparent;cursor:pointer;z-index:2}
.vx-rec__fxmark[b-gxx2aaxfel]::before{content:"";position:absolute;left:5px;top:10px;bottom:0;width:2px;background:var(--accent)}
.vx-rec__fxmark[b-gxx2aaxfel]::after{content:"";position:absolute;left:1px;top:0;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg-app)}
.vx-rec__fxmark:disabled[b-gxx2aaxfel]{cursor:default}
.vx-rec__fxmark:not(:disabled):hover[b-gxx2aaxfel]::after,.vx-rec__fxmark:not(:disabled):hover[b-gxx2aaxfel]::before{background:var(--text-danger)}
.vx-rec__fxmark:not(:disabled)[b-gxx2aaxfel]{cursor:grab;touch-action:none}
.vx-rec__fxmark.is-dragging[b-gxx2aaxfel]{cursor:grabbing;z-index:3}
.vx-rec__fxmark.is-dragging[b-gxx2aaxfel]::after{transform:scale(1.25)}

/* ——— управление: «Оригинал» — запись — «Дальше» ——— */
.vx-dub__ctl[b-gxx2aaxfel]{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:2px}
.vx-dub__pill[b-gxx2aaxfel]{display:inline-flex;align-items:center;gap:8px;font:800 14px var(--font-display);padding:12px 20px;border-radius:999px;border:none;cursor:pointer;
  background:var(--warm-800);color:var(--warm-050);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.3,1.5,.5,1),background .2s}
.vx-dub__pill:hover:not(:disabled)[b-gxx2aaxfel]{transform:translateY(-2px);background:var(--warm-750)}
.vx-dub__pill:focus-visible[b-gxx2aaxfel]{outline:none;box-shadow:var(--ring)}
.vx-dub__pill:disabled[b-gxx2aaxfel]{opacity:.4;cursor:default}
.vx-dub__pill--next[b-gxx2aaxfel]{background:var(--amber-400);color:var(--text-inverse)}
.vx-dub__pill--next:hover:not(:disabled)[b-gxx2aaxfel]{background:var(--amber-300)}
/* Записали — «Дальше» подталкивает. */
.vx-dub__pill--nudge[b-gxx2aaxfel]{animation:vx-dub-nudge-b-gxx2aaxfel 1.2s ease-in-out infinite}
@keyframes vx-dub-nudge-b-gxx2aaxfel{50%{translate:6px 0}}
.vx-dub__rec[b-gxx2aaxfel]{position:relative;display:flex;justify-content:center}
.vx-dub__rec[b-gxx2aaxfel]  .vx-rec__btn{width:92px;height:92px;box-shadow:0 0 0 10px rgba(255,92,72,.16),0 14px 30px rgba(255,92,72,.35)}
.vx-dub__rec[b-gxx2aaxfel]  .vx-rec__btn:hover:not(:disabled){transform:scale(1.06);filter:none}
.vx-dub__rec[b-gxx2aaxfel]  .vx-rec__btn--rec{animation:vx-dub-beat-b-gxx2aaxfel 1s ease-in-out infinite}
@keyframes vx-dub-beat-b-gxx2aaxfel{50%{box-shadow:0 0 0 18px rgba(255,92,72,.12),0 14px 30px rgba(255,92,72,.35)}}
.vx-dub__rec[b-gxx2aaxfel]  .vx-rec__btn--idlelisten,.vx-dub__rec[b-gxx2aaxfel]  .vx-rec__btn--listenstop{box-shadow:0 10px 24px rgba(0,0,0,.45)}
.vx-dub__rec[b-gxx2aaxfel]  .vx-rec__cap,.vx-dub__rec[b-gxx2aaxfel]  .vx-rec__time{font:700 12px var(--font-display)}
.vx-dub__done[b-gxx2aaxfel]{position:absolute;left:50%;top:-30px;translate:-50% 0;font:900 16px var(--font-display);color:var(--status-ready);white-space:nowrap;pointer-events:none;
  animation:vx-dub-done-b-gxx2aaxfel 1.8s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes vx-dub-done-b-gxx2aaxfel{0%{transform:scale(0)}20%{transform:scale(1.15)}30%,80%{transform:scale(1);opacity:1}100%{transform:translateY(-14px);opacity:0}}

/* Свойства дубля — чипами. */
.vx-dub__extras[b-gxx2aaxfel]{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.vx-dub__extras:empty[b-gxx2aaxfel]{display:none}
.vx-dub__chip[b-gxx2aaxfel]{display:inline-flex;align-items:center;gap:7px;font:800 13px var(--font-display);padding:8px 14px;border-radius:12px;cursor:pointer;
  background:rgba(42,36,33,.95);color:var(--text-2);border:1px solid rgba(255,255,255,.07);transition:background .2s,color .2s}
.vx-dub__chip:hover:not(:disabled)[b-gxx2aaxfel]{background:var(--warm-750);color:var(--text-1)}
.vx-dub__chip:focus-visible[b-gxx2aaxfel]{outline:none;box-shadow:var(--ring)}
.vx-dub__chip:disabled[b-gxx2aaxfel]{opacity:.45;cursor:default}
.vx-rec__fx[b-gxx2aaxfel]{display:flex;align-items:center;gap:8px}
.vx-rec__fxpick[b-gxx2aaxfel]{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;max-width:300px;border:1px solid rgba(255,255,255,.07);border-radius:12px;
  background:rgba(42,36,33,.95);color:var(--text-2);font:800 13px var(--font-display);cursor:pointer;transition:background .2s,color .2s}
.vx-rec__fxpick:hover:not(:disabled)[b-gxx2aaxfel]{background:var(--warm-750);color:var(--text-1)}
.vx-rec__fxpick:disabled[b-gxx2aaxfel]{opacity:.6;cursor:default}
.vx-rec__fxpick:focus-visible[b-gxx2aaxfel]{outline:none;box-shadow:var(--ring)}
.vx-rec__fxlabel[b-gxx2aaxfel]{white-space:nowrap}
.vx-rec__fxvalue[b-gxx2aaxfel]{color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-rec__kbd[b-gxx2aaxfel]{display:inline-block;margin-left:2px;padding:1px 6px;border-radius:6px;background:var(--warm-700);color:var(--amber-300);font:700 11px var(--font-mono)}
.vx-rec__info[b-gxx2aaxfel]{position:relative;display:inline-flex;color:var(--text-3);cursor:help;border-radius:50%}
.vx-rec__info:hover[b-gxx2aaxfel],.vx-rec__info:focus-visible[b-gxx2aaxfel]{color:var(--text-1);outline:none}
.vx-rec__tip[b-gxx2aaxfel]{position:absolute;right:-8px;bottom:calc(100% + 10px);width:300px;padding:10px 12px;z-index:20;
  border:1px solid var(--border-2);border-radius:var(--radius-md);background:var(--surface-3);box-shadow:var(--shadow-3);
  font:var(--type-small);color:var(--text-1);opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity 120ms ease,transform 120ms ease,visibility 120ms}
.vx-rec__info:hover .vx-rec__tip[b-gxx2aaxfel],.vx-rec__info:focus-visible .vx-rec__tip[b-gxx2aaxfel]{opacity:1;visibility:visible;transform:none}

/* ——— колода «Мои реплики» и готовность ——— */
.vx-dub__side[b-gxx2aaxfel]{min-height:0;display:flex;flex-direction:column;gap:12px}
.vx-dub__deckh[b-gxx2aaxfel]{margin:0 0 0 4px;font:800 11px var(--font-display);letter-spacing:1px;text-transform:uppercase;color:var(--text-3)}
.vx-dub__deck[b-gxx2aaxfel]{flex:1;min-height:120px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px 4px 10px 22px;
  scrollbar-width:thin;scrollbar-color:var(--warm-700) transparent}
.vx-dub__card[b-gxx2aaxfel]{position:relative;flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;text-align:left;font:inherit;
  padding:12px 14px 12px 18px;border-radius:16px;background:rgba(34,29,26,.94);border:1px solid rgba(255,255,255,.06);color:var(--text-1);cursor:pointer;
  transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .3s,background .3s;
  animation:vx-dub-card-b-gxx2aaxfel .5s cubic-bezier(.3,1.3,.5,1) backwards;animation-delay:calc(.1s + var(--i) * 60ms)}
@keyframes vx-dub-card-b-gxx2aaxfel{from{transform:translateX(40px);opacity:0}}
.vx-dub__card[b-gxx2aaxfel]::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:5px;border-radius:0 4px 4px 0;background:var(--c)}
.vx-dub__card:hover:not(:disabled)[b-gxx2aaxfel]{transform:translateX(-6px)}
.vx-dub__card:focus-visible[b-gxx2aaxfel]{outline:none;box-shadow:var(--ring)}
.vx-dub__card:disabled[b-gxx2aaxfel]{cursor:default;opacity:.6}
.vx-dub__card--cur[b-gxx2aaxfel]{background:linear-gradient(160deg,#FFF6EA,#F3DEC2);color:var(--text-inverse);transform:translateX(-18px) rotate(-1deg);
  box-shadow:0 0 0 3px var(--amber-400),0 16px 34px rgba(0,0,0,.5)}
.vx-dub__card--cur:hover:not(:disabled)[b-gxx2aaxfel]{transform:translateX(-18px) rotate(-1deg)}
.vx-dub__cardwho[b-gxx2aaxfel]{font:800 10px var(--font-display);letter-spacing:.8px;text-transform:uppercase;color:var(--c)}
.vx-dub__cardtext[b-gxx2aaxfel]{font:700 14px/1.3 var(--font-display);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vx-dub__card--rec .vx-dub__cardtext[b-gxx2aaxfel]{padding-right:62px}
.vx-dub__carddur[b-gxx2aaxfel]{font:700 10px var(--font-mono);color:var(--text-3)}
.vx-dub__card--cur .vx-dub__carddur[b-gxx2aaxfel]{color:#8a6a44}
/* Штамп «Записано» шлёпается на карточку. */
.vx-dub__stamp[b-gxx2aaxfel]{position:absolute;right:10px;top:10px;font:900 10px var(--font-display);letter-spacing:1px;text-transform:uppercase;
  color:var(--status-ready);border:2px solid var(--status-ready);border-radius:6px;padding:2px 6px;rotate:8deg;
  animation:vx-dub-stamp-b-gxx2aaxfel .45s cubic-bezier(.3,1.8,.5,1) backwards}
@keyframes vx-dub-stamp-b-gxx2aaxfel{from{transform:scale(2.2);opacity:0}}
.vx-dub__card--cur .vx-dub__stamp[b-gxx2aaxfel]{color:#2f9e65;border-color:#2f9e65}

.vx-dub__fin[b-gxx2aaxfel]{flex:none;display:flex;flex-direction:column;gap:8px}
.vx-dub__finrow[b-gxx2aaxfel]{display:flex;gap:8px}
.vx-dub__ready[b-gxx2aaxfel]{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:900 16px var(--font-display);padding:14px 16px;border-radius:999px;border:none;cursor:pointer;
  background:var(--status-ready);color:var(--text-inverse);box-shadow:0 12px 26px rgba(79,201,138,.25),inset 0 -4px 0 rgba(0,0,0,.15);
  transition:transform .25s cubic-bezier(.3,1.4,.5,1),background .2s}
.vx-dub__ready:hover:not(:disabled)[b-gxx2aaxfel]{transform:translateY(-3px)}
.vx-dub__ready:focus-visible[b-gxx2aaxfel]{outline:none;box-shadow:var(--ring)}
.vx-dub__ready:disabled[b-gxx2aaxfel]{opacity:.5;cursor:default}
.vx-dub__ready--glow[b-gxx2aaxfel]{animation:vx-dub-glow-b-gxx2aaxfel 2s ease-in-out infinite}
@keyframes vx-dub-glow-b-gxx2aaxfel{50%{box-shadow:0 12px 40px rgba(79,201,138,.55),inset 0 -4px 0 rgba(0,0,0,.15)}}
.vx-dub__ready--on[b-gxx2aaxfel]{background:var(--warm-700);color:var(--text-2);box-shadow:none}
.vx-dub__morew[b-gxx2aaxfel]{position:relative;display:flex}
.vx-dub__more[b-gxx2aaxfel]{width:50px;border-radius:999px;border:none;cursor:pointer;background:var(--warm-800);color:var(--text-2);display:grid;place-items:center;transition:background .2s}
.vx-dub__more:hover[b-gxx2aaxfel]{background:var(--warm-750);color:var(--text-1)}
.vx-dub__more:focus-visible[b-gxx2aaxfel]{outline:none;box-shadow:var(--ring)}
.vx-dub__menu[b-gxx2aaxfel]{position:absolute;right:0;bottom:60px;width:240px;padding:8px;border-radius:18px;z-index:5;
  background:rgba(34,29,26,.98);border:1px solid var(--border-1);box-shadow:0 20px 50px rgba(0,0,0,.55);
  transform-origin:90% 100%;transform:scale(.7);opacity:0;visibility:hidden;transition:transform .25s cubic-bezier(.3,1.4,.5,1),opacity .2s,visibility 0s .25s}
.vx-dub__menu--on[b-gxx2aaxfel]{transform:none;opacity:1;visibility:visible;transition:transform .25s cubic-bezier(.3,1.4,.5,1),opacity .2s}
.vx-dub__menuitem[b-gxx2aaxfel]{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font:700 14px var(--font-display);padding:10px 12px;border-radius:12px;
  border:none;background:none;color:var(--text-1);cursor:pointer}
.vx-dub__menuitem:hover[b-gxx2aaxfel]{background:var(--warm-750)}
.vx-dub__menuitem--danger[b-gxx2aaxfel]{color:var(--coral-500)}
.vx-dub__finnote[b-gxx2aaxfel]{font:600 12px/1.4 var(--font-text);color:var(--text-3);text-align:center}

@media (prefers-reduced-motion:reduce){
  .vx-dub__head[b-gxx2aaxfel],.vx-dub__frame[b-gxx2aaxfel],.vx-dub__drawn[b-gxx2aaxfel],.vx-dub__sub[b-gxx2aaxfel],.vx-dub__card[b-gxx2aaxfel],.vx-dub__stamp[b-gxx2aaxfel],.vx-dub__done[b-gxx2aaxfel],.vx-rec__nudge[b-gxx2aaxfel],
  .vx-dub__pill--nudge[b-gxx2aaxfel],.vx-dub__ready--glow[b-gxx2aaxfel],.vx-dub--rec[b-gxx2aaxfel]::after,.vx-dub__rec[b-gxx2aaxfel]  .vx-rec__btn--rec{animation:none}
  .vx-dub__done[b-gxx2aaxfel]{opacity:1}
}

@media (max-width:900px){
  .vx-dub__head[b-gxx2aaxfel]{margin-top:0}
  .vx-dub__main[b-gxx2aaxfel]{grid-template-columns:minmax(0,1fr)}
  .vx-dub__col[b-gxx2aaxfel]{width:100%}
  .vx-dub__main[b-gxx2aaxfel]{grid-template-rows:none}
  .vx-dub__side[b-gxx2aaxfel]{min-height:auto}
  .vx-dub__deck[b-gxx2aaxfel]{max-height:320px;padding-left:4px}
  .vx-dub__card--cur[b-gxx2aaxfel],.vx-dub__card--cur:hover:not(:disabled)[b-gxx2aaxfel]{transform:none}
}
@media (max-width:640px){
  .vx-dub__ctl[b-gxx2aaxfel]{gap:12px}
  .vx-dub__pill[b-gxx2aaxfel]{padding:10px 14px}
  .vx-dub__text[b-gxx2aaxfel]{font-size:16px}
  .vx-rec__tip[b-gxx2aaxfel]{right:auto;left:-140px;width:260px}
}
.vx-dub__menuveil[b-gxx2aaxfel]{position:fixed;inset:0;z-index:4}
/* /Pages/Game/RenderOwnership.razor.rz.scp.css */
/* Блок под ссылкой на ролик: кнопки в ряд, срок и ошибка — строками под ними.
   Кнопки маленькие: главное действие экрана — поделиться ссылкой, а это
   дополнение к нему. */
.vx-own[b-u8g73vjpge]{display:flex;flex-direction:column;gap:var(--space-2)}
.vx-own__acts[b-u8g73vjpge]{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.vx-own__err[b-u8g73vjpge]{font:var(--type-small);color:var(--text-danger)}
/* /Pages/Game/Room.razor.rz.scp.css */
/* Комната, запертая по высоте окна. Класс вешается на одном этапе —
   распределении ролей: там экран целиком помещается в окно, и прокрутка
   страницы только уводила бы список реплик из виду. Высоту внутри разбирает
   сам Casting: шапка экрана берёт своё, список реплик — весь остаток.

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

   Полоса «связь пропала» и счётчик отправляемых дублей сюда не считаются —
   они position:fixed и высоты не занимают. */
.vx-room__fill[b-ueguxz0wsg] {
    display: flex;
    flex-direction: column;
    height: 100dvh;
}

/* На телефоне распределение прокручивается как обычная страница (см.
   Casting.razor.css), и замок по высоте окна ему не нужен. */
@media (max-width: 640px) {
    .vx-room__fill[b-ueguxz0wsg] {
        height: auto;
        min-height: 100dvh;
    }
}

/* Полоса питомцев у нижней кромки окна — fixed, высоты не занимает. Отступ
   снизу держит под ней пустое место: зверьки не ложатся на кнопки записи и
   на нижние строки распределения. У запертого по высоте экрана отступ
   съедается внутри той же высоты окна (box-sizing: border-box). */
.vx-room--pets[b-ueguxz0wsg] {
    padding-bottom: 40px;
}

/* На сборке и результате питомцы крупные — 64 px, и места под ними больше. */
.vx-room--pets-lg[b-ueguxz0wsg] {
    padding-bottom: 72px;
}


/* Телефон, оболочка игровых шагов: отступ снизу под кружок громкости важнее
   отступа под питомцев — правило питомцев выше по специфичности, перебиваем. */
@media (max-width: 640px) {
    .vx-room--shell.vx-room--pets[b-ueguxz0wsg] {
        padding-bottom: 96px;
    }
}

/* Запись в одну колонку (≤900 px) по высоте окна не помещается — там она
   прокручивается как обычная страница. */
@media (max-width: 900px) {
    .vx-room__fill.vx-room--rec[b-ueguxz0wsg] {
        height: auto;
        min-height: 100dvh;
    }
}
/* /Pages/Game/ScriptPanel.razor.rz.scp.css */
.vx-script__veil[b-izrglaqnr3]{position:fixed;inset:0;z-index:44;background:rgba(10,8,7,.45);opacity:0;pointer-events:none;transition:opacity .35s}
.vx-script__veil--on[b-izrglaqnr3]{opacity:1;pointer-events:auto}
.vx-script[b-izrglaqnr3]{position:fixed;top:0;bottom:0;right:0;z-index:45;width:min(440px,100vw);display:flex;flex-direction:column;
  background:rgba(27,23,21,.97);border-left:1px solid var(--border-1);box-shadow:-30px 0 60px rgba(0,0,0,.5);
  transform:translateX(105%);visibility:hidden;transition:transform .45s cubic-bezier(.3,1.1,.5,1),visibility 0s .45s}
.vx-script--open[b-izrglaqnr3]{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.3,1.1,.5,1)}
.vx-script__head[b-izrglaqnr3]{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 12px}
.vx-script__head b[b-izrglaqnr3]{font:900 22px var(--font-display);color:var(--text-1)}
.vx-script__roles[b-izrglaqnr3]{display:flex;gap:6px;flex-wrap:wrap;padding:0 22px 12px}
.vx-script__role[b-izrglaqnr3]{font:800 11px var(--font-display);padding:4px 10px;border-radius:999px;color:var(--text-inverse)}
.vx-script__list[b-izrglaqnr3]{flex:1;overflow-y:auto;padding:4px 22px 22px;display:flex;flex-direction:column;gap:8px}
.vx-script__line[b-izrglaqnr3]{display:flex;gap:10px;padding:9px 12px;border-radius:12px;background:var(--surface-2)}
/* Строки въезжают следом за панелью, лесенкой. */
.vx-script--open .vx-script__line[b-izrglaqnr3]{animation:vx-script-line-b-izrglaqnr3 .4s cubic-bezier(.3,1.2,.5,1) backwards;animation-delay:calc(.15s + var(--i) * 30ms)}
@keyframes vx-script-line-b-izrglaqnr3{from{opacity:0;transform:translateX(24px)}}
.vx-script__line i[b-izrglaqnr3]{font-style:normal;font:800 11px var(--font-display);width:78px;flex:none;padding-top:2px;
  text-transform:uppercase;letter-spacing:.5px;overflow:hidden;text-overflow:ellipsis}
.vx-script__line span[b-izrglaqnr3]{font:var(--type-small);color:var(--text-2)}
.vx-script__line em[b-izrglaqnr3]{font-style:normal;font:var(--type-caption);color:var(--text-3);margin-left:auto;padding-left:8px;flex:none}
@media (prefers-reduced-motion:reduce){.vx-script[b-izrglaqnr3],.vx-script__veil[b-izrglaqnr3]{transition:none}.vx-script--open .vx-script__line[b-izrglaqnr3]{animation:none}}
/* Фокус панель получает программно — рамка вокруг всей панели не нужна. */
.vx-script:focus[b-izrglaqnr3]{outline:none}
/* /Pages/Game/VoicePicker.razor.rz.scp.css */
/* Строка «Голос: Обычный ▾» — тихая, как подпись: голос дополняет запись,
   а не соперничает с кнопкой записи. */
.vx-voice__row[b-fuuk7qruiz]{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;
  border:1px solid var(--border-1);border-radius:var(--radius-pill);background:var(--surface-2);
  color:var(--text-2);font:var(--type-small);cursor:pointer;transition:var(--transition-control)}
.vx-voice__row:hover:not(:disabled)[b-fuuk7qruiz]{background:var(--surface-3);color:var(--text-1)}
.vx-voice__row:disabled[b-fuuk7qruiz]{opacity:.6;cursor:default}
.vx-voice__row:focus-visible[b-fuuk7qruiz]{outline:none;box-shadow:var(--ring)}
.vx-voice__value[b-fuuk7qruiz]{font:var(--type-small-strong);color:var(--text-1)}

.vx-voice__panel[b-fuuk7qruiz]{display:flex;flex-direction:column;gap:var(--space-3)}
.vx-voice__group[b-fuuk7qruiz]{display:flex;flex-direction:column;gap:6px}
.vx-voice__chips[b-fuuk7qruiz]{display:flex;flex-wrap:wrap;gap:6px}

.vx-voice__chip[b-fuuk7qruiz]{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;
  border:1px solid var(--border-1);border-radius:var(--radius-pill);background:var(--surface-2);
  color:var(--text-1);font:var(--type-small);cursor:pointer;transition:var(--transition-control)}
.vx-voice__chip:hover[b-fuuk7qruiz]{background:var(--surface-3)}
.vx-voice__chip:focus-visible[b-fuuk7qruiz]{outline:none;box-shadow:var(--ring)}
.vx-voice__chip--sel[b-fuuk7qruiz]{background:var(--accent-soft);border-color:var(--border-accent);color:var(--text-accent)}
/* Закрытый голос виден целиком — это витрина пропуска, — но тише открытых. */
.vx-voice__chip--locked[b-fuuk7qruiz]{color:var(--text-3)}
/* /Pages/Game/Watch.razor.rz.scp.css */
/* Просмотр результата: узкая колонка по центру, видео — главный герой экрана. */

.vx-game--watch[b-blf399lnf7]{max-width:880px}

.vx-watch__head[b-blf399lnf7]{text-align:center}

.vx-watch__sub[b-blf399lnf7]{margin:0 auto}

.vx-watch__progress[b-blf399lnf7]{width:280px;display:flex;flex-direction:column;gap:10px;align-items:center}

/* Название пака под кадром. Единственная подпись у кадра, поэтому набрана
   в полную силу — 18px белым: приглушённой она читалась как служебная
   пометка, а это ответ на первый вопрос к экрану «что мы смотрим». */
.vx-watch__title[b-blf399lnf7]{display:flex;align-items:center;justify-content:start;gap:7px;
  font:var(--type-title);color:var(--text-1);text-align:center;text-wrap:balance}

.vx-watch__share[b-blf399lnf7]{display:flex;gap:10px;align-items:center}
.vx-watch__share[b-blf399lnf7]  > :first-child{flex:1;min-width:0}

/* Телефон: поле ссылки и две кнопки в одну строку не помещаются — поле
   сжималось в ноль, кнопки вылезали за край экрана. Поле — отдельной строкой,
   кнопки под ним делят строку, а не влезают — переносятся. ::deep — поле и
   кнопки рисуют свои компоненты. */
@media (max-width:640px){
  .vx-watch__share[b-blf399lnf7]{flex-wrap:wrap}
  .vx-watch__share[b-blf399lnf7]  > *{flex:1 1 auto}
  .vx-watch__share[b-blf399lnf7]  > :first-child{flex:1 1 100%}
}

.vx-watch__roles[b-blf399lnf7]{display:flex;flex-direction:column;gap:8px}

.vx-watch__role[b-blf399lnf7]{display:flex;align-items:baseline;gap:10px}

.vx-watch__dot[b-blf399lnf7]{width:10px;height:10px;border-radius:3px;flex:0 0 auto;align-self:center}

.vx-watch__rolename[b-blf399lnf7]{font:var(--type-body-strong);color:var(--text-1);flex:0 0 auto}

.vx-watch__players[b-blf399lnf7]{font:var(--type-small);color:var(--text-2)}

/* Оценка стоит над кнопками «домой» и «ещё круг»: спросить надо до того, как
   человек ушёл, а не после. Одной строкой — вопрос, звёзды и отказ сервера. */
.vx-watch__rate[b-blf399lnf7]{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vx-watch__rateerr[b-blf399lnf7]{font:var(--type-small);color:var(--text-danger)}
.vx-watch__acts[b-blf399lnf7]{display:flex;gap:10px;flex-wrap:wrap}

/* Постер истёкшего ролика: кадр пака, если он есть, иначе знак плёнки по
   центру — рамка та же, что у видео, чтобы экран узнавался. */
.vx-watch__poster[b-blf399lnf7]{display:flex;align-items:center;justify-content:center}

/* Запрет публикации гостем — кнопка и предупреждение одной строкой. */
.vx-watch__consent[b-blf399lnf7]{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* Монеты за партию — плашкой янтарём, как счётчик в шапке. */
.vx-watch__coins[b-blf399lnf7]{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:4px 12px;border-radius:999px;border-bottom:0;
  background:var(--accent-soft);color:var(--text-accent);font:var(--type-small-strong)}
.vx-watch__coins--guest[b-blf399lnf7]{background:var(--surface-2);color:var(--text-2)}
/* /Pages/Home.razor.rz.scp.css */
/* Высота первого экрана считается от окна, а не берётся круглым числом: вход по
   коду комнаты должен помещаться целиком, без прокрутки. Вычитаются шапка и
   отступы оболочки; max() страхует низкие окна — там раскладка просто растёт по
   содержимому. Строка правовых ссылок из расчёта ушла вместе с самими ссылками:
   они переехали в общий подвал, под содержимое страницы. */
.vx-auth[b-i98dqq8w18]{display:grid;grid-template-columns:1fr 420px;gap:var(--space-16);align-items:center;
  min-height:max(70vh, calc(100vh - var(--topbar-h) - var(--space-8) * 2))}
.vx-auth__promo[b-i98dqq8w18]{display:flex;flex-direction:column;gap:var(--space-5)}
.vx-auth__title[b-i98dqq8w18]{font:var(--type-display-l);color:var(--text-1);max-width:12ch}
.vx-auth__lead[b-i98dqq8w18]{font:var(--type-body);color:var(--text-2);max-width:46ch}
.vx-auth__panel[b-i98dqq8w18]{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--pad-card);
  background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--radius-lg);
  box-shadow:var(--inset-top),var(--shadow-3)}
.vx-auth__form[b-i98dqq8w18]{display:flex;flex-direction:column;gap:var(--gap-stack)}
.vx-auth__note[b-i98dqq8w18]{font:var(--type-caption);color:var(--text-3)}

/* Возврат в живые партии: строки-кнопки поверх панели. Поверхность та же
   карточная (--surface-1) — панель разграничивают рамка и блик. */
.vx-auth__rooms[b-i98dqq8w18]{display:flex;flex-direction:column;gap:8px;max-height:264px;overflow-y:auto}
.vx-auth__room[b-i98dqq8w18]{display:flex;flex-direction:column;gap:3px;width:100%;padding:10px 14px;text-align:left;
  background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--radius-md);
  box-shadow:var(--inset-top);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.vx-auth__room:hover[b-i98dqq8w18]{border-color:var(--border-2);background:var(--surface-2)}
.vx-auth__room-title[b-i98dqq8w18]{font:var(--type-body-strong);color:var(--text-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-auth__room-meta[b-i98dqq8w18]{font:var(--type-mono-s);color:var(--text-3)}

/* Выбор пака при создании комнаты: карточки-кнопки как роли на распределении,
   выбранная подсвечена акцентом. */
.vx-auth__picks[b-i98dqq8w18]{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;
  max-height:320px;overflow-y:auto;padding:2px}
.vx-auth__pick[b-i98dqq8w18]{display:flex;flex-direction:column;gap:3px;padding:12px 14px;text-align:left;
  background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--radius-lg);
  box-shadow:var(--inset-top),var(--shadow-1);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.vx-auth__pick:hover[b-i98dqq8w18]{border-color:var(--border-2);background:var(--surface-2)}
.vx-auth__pick--on[b-i98dqq8w18]{border-color:var(--accent);background:var(--accent-soft);
  box-shadow:var(--inset-top),0 0 0 1px var(--accent)}
.vx-auth__pick--on:focus-visible[b-i98dqq8w18]{box-shadow:var(--ring),var(--inset-top),0 0 0 1px var(--accent)}
.vx-auth__pick-name[b-i98dqq8w18]{font:var(--type-body-strong);color:var(--text-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-auth__pick-meta[b-i98dqq8w18]{font:var(--type-mono-s);color:var(--text-3)}

@media (max-width:900px){
  .vx-auth[b-i98dqq8w18]{grid-template-columns:1fr;gap:var(--space-8)}
}

/* Возврат из исчезнувшей комнаты: короткое объяснение, не паника. */
.vx-auth__gone[b-i98dqq8w18]{font:var(--type-small);color:var(--warm-300);
  padding:10px 14px;border:1px solid var(--border-1);border-radius:var(--radius-md);
  background:var(--surface-sunken)}


/* ─── Содержимое ниже первого экрана ───

   Секции идут одной колонкой в общую ширину и разделены только воздухом: рамок
   и подложек вокруг них нет намеренно. Карточка вокруг каждого блока превратила
   бы рассказ о продукте в панель управления, а разделять текст умеет заголовок. */
.vx-home[b-i98dqq8w18]{display:flex;flex-direction:column;gap:var(--space-20);
  padding:var(--space-20) 0 var(--space-12)}
.vx-home__block[b-i98dqq8w18]{display:flex;flex-direction:column;gap:var(--space-5)}
.vx-home__h[b-i98dqq8w18]{font:var(--type-display-s);color:var(--text-1);margin:0}
.vx-home__head[b-i98dqq8w18]{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.vx-home__more[b-i98dqq8w18]{font:var(--type-body-strong)}
.vx-home__lead[b-i98dqq8w18]{font:var(--type-body);color:var(--text-2);max-width:64ch;margin:0}

/* Полоса реплик — единственное место на странице, которому позволено быть
   заметным: это и есть продукт. Строка читается слева направо как «кто, что
   было, что стало, когда». */
.vx-home__strip[b-i98dqq8w18]{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--space-2);
  /* Ширина по мере текста, а не по всей колонке: реплики короткие, и на полной
     ширине таймкод у правого края оказывается в полуметре от того, к чему он
     относится, — строка перестаёт читаться как одно целое. */
  max-width:720px}
.vx-home__line[b-i98dqq8w18]{display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);background:var(--surface-1);
  border:1px solid var(--border-1);border-radius:var(--radius-lg);
  box-shadow:var(--inset-top)}
.vx-home__line-bar[b-i98dqq8w18]{flex:0 0 auto;width:3px;height:34px;border-radius:2px}
.vx-home__line-who[b-i98dqq8w18]{flex:0 0 auto;width:84px;font:var(--type-body-strong);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-home__line-text[b-i98dqq8w18]{flex:1;min-width:0;font:var(--type-body-strong);color:var(--text-1)}
.vx-home__line-time[b-i98dqq8w18]{flex:0 0 auto;font:var(--type-mono-s);color:var(--text-3)}

/* Шаги подготовки. Номер рисует счётчик списка: цифры здесь несут смысл, потому
   что порядок настоящий — каждый шаг возможен только после предыдущего. */
.vx-home__steps[b-i98dqq8w18]{list-style:none;counter-reset:step;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--space-4);max-width:64ch}
.vx-home__steps li[b-i98dqq8w18]{counter-increment:step;position:relative;padding-left:var(--space-8);
  font:var(--type-body);color:var(--text-2)}
.vx-home__steps li[b-i98dqq8w18]::before{content:counter(step);position:absolute;left:0;top:1px;
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--text-accent);font:var(--type-small-strong)}

.vx-home__faq[b-i98dqq8w18]{display:flex;flex-direction:column;gap:var(--space-6);max-width:68ch}
.vx-home__qa[b-i98dqq8w18]{display:flex;flex-direction:column;gap:var(--space-2)}
.vx-home__q[b-i98dqq8w18]{font:var(--type-title);color:var(--text-1);margin:0}
.vx-home__a[b-i98dqq8w18]{font:var(--type-body);color:var(--text-2);margin:0}

@media (max-width:640px){
  .vx-home[b-i98dqq8w18]{gap:var(--space-16);padding:var(--space-16) 0 var(--space-8)}
  /* На узком экране реплика перестаёт быть строкой: имя роли и время остаются
     сверху, текст занимает всю ширину — иначе рядом с именем на 84 пикселя
     остаётся полстроки реплики. */
  .vx-home__line[b-i98dqq8w18]{flex-wrap:wrap;gap:var(--space-2) var(--space-3)}
  .vx-home__line-bar[b-i98dqq8w18]{height:20px}
  .vx-home__line-who[b-i98dqq8w18]{width:auto}
  .vx-home__line-text[b-i98dqq8w18]{flex:1 0 100%}
}
/* /Pages/HomeAnnouncementCard.razor.rz.scp.css */
/* Карточка новости в левой колонке первого экрана. Тише панели входа справа:
   без тени и блика, акцент — только полоса слева и подпись. Это повод
   заглянуть, а не второй призыв, спорящий с «Создать комнату». */
.vx-ann[b-fbc1395yta]{display:flex;flex-direction:column;gap:var(--space-3);max-width:46ch;
  padding:14px 18px;border:1px solid var(--border-1);border-left:3px solid var(--accent);
  border-radius:var(--radius-md);background:var(--surface-1)}
.vx-ann__label[b-fbc1395yta]{display:inline-flex;align-items:center;gap:6px;
  font:var(--type-label);color:var(--accent);text-transform:uppercase;letter-spacing:.06em}

/* Разметка из Markdown приходит готовой строкой — изолированные стили до неё
   дотягиваются только через ::deep. Заголовки сжаты до размера карточки:
   «# Новинка» не должен спорить с заголовком страницы. */
.vx-ann__body[b-fbc1395yta]{font:var(--type-body);color:var(--text-2);overflow-wrap:anywhere}
.vx-ann__body[b-fbc1395yta]  > :first-child{margin-top:0}
.vx-ann__body[b-fbc1395yta]  > :last-child{margin-bottom:0}
.vx-ann__body[b-fbc1395yta]  p,
.vx-ann__body[b-fbc1395yta]  ul,
.vx-ann__body[b-fbc1395yta]  ol{margin:0 0 var(--space-2)}
.vx-ann__body[b-fbc1395yta]  ul,
.vx-ann__body[b-fbc1395yta]  ol{padding-left:1.25em}
.vx-ann__body[b-fbc1395yta]  li + li{margin-top:2px}
.vx-ann__body[b-fbc1395yta]  h1,
.vx-ann__body[b-fbc1395yta]  h2,
.vx-ann__body[b-fbc1395yta]  h3,
.vx-ann__body[b-fbc1395yta]  h4{font:var(--type-title);color:var(--text-1);margin:0 0 var(--space-2)}
.vx-ann__body[b-fbc1395yta]  strong{color:var(--text-1)}
.vx-ann__body[b-fbc1395yta]  img{max-width:100%;height:auto;border-radius:var(--radius-sm)}
.vx-ann__body[b-fbc1395yta]  code{font:var(--type-mono-s);padding:1px 4px;border-radius:4px;background:var(--surface-sunken)}
.vx-ann__body[b-fbc1395yta]  hr{border:0;border-top:1px solid var(--border-1);margin:var(--space-3) 0}

.vx-ann__action[b-fbc1395yta]{display:flex}
/* /Pages/NotFound.razor.rz.scp.css */
/* Приглашение сообщить об ошибке под пустым состоянием: приглушено и по
   центру — оно продолжение объяснения, а не второе действие страницы. */
.vx-nf__report[b-601s3t93mt] {
    margin: 14px 0 0;
    font: var(--type-small);
    color: var(--text-3);
    text-align: center;
}
/* /Pages/Packs/PackDialog.razor.rz.scp.css */
/* Карточка пака поверх общих компонентов: свои тут только превью и раскладка
   списков — цвета, типографика и скругления берутся токенами. */

.vx-packdlg__stack[b-1rishmx73e] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vx-packdlg__video[b-1rishmx73e] {
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    display: block;
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
    border: 1px solid var(--border-1);
    box-shadow: var(--inset-sunken);
}

.vx-packdlg__video--empty[b-1rishmx73e] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vx-packdlg__badges[b-1rishmx73e] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.vx-packdlg__desc[b-1rishmx73e] {
    font: var(--type-body);
    color: var(--text-2);
    margin: 0;
    white-space: pre-line;
}

/* Оценка и число партий одной строкой: оба числа отвечают на один вопрос —
   стоит ли брать этот пак, — и разносить их по разным местам значило бы
   заставлять читателя собирать ответ самому. */
.vx-packdlg__stats[b-1rishmx73e] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.vx-packdlg__games[b-1rishmx73e] {
    font: var(--type-caption);
    color: var(--text-3);
}

.vx-packdlg__error[b-1rishmx73e] {
    font: var(--type-small);
    color: var(--text-danger);
    margin: 0;
}

.vx-packdlg__roles[b-1rishmx73e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vx-packdlg__chips[b-1rishmx73e] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
/* /Pages/Packs/PackLinkField.razor.rz.scp.css */
.vx-packlink[b-hb4o2ju6xr]{display:flex;flex-direction:column;gap:6px}

/* Адрес в утопленном поле, как значение, которое можно выделить руками, —
   моноширинным: в нём сверяют опознаватель, а не читают слова. */
.vx-packlink__row[b-hb4o2ju6xr]{display:flex;align-items:center;gap:8px;min-width:0}
.vx-packlink__url[b-hb4o2ju6xr]{flex:1;min-width:0;padding:6px 10px;border-radius:var(--radius-sm);
  background:var(--surface-sunken);border:1px solid var(--border-1);box-shadow:var(--inset-sunken);
  font:var(--type-mono-s);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  user-select:all}
.vx-packlink__row .vx-btn[b-hb4o2ju6xr]{flex:0 0 auto}

.vx-packlink__note[b-hb4o2ju6xr]{margin:0;font:var(--type-small);color:var(--text-3)}
/* /Pages/Packs/PackPickerDialog.razor.rz.scp.css */
/* Выбор фрагмента: фильтры строкой сверху, паки сеткой под ними. Сетка, а не
   список: обложка отличает паки друг от друга быстрее названия — их называют
   именем мультфильма, и десяток названий подряд сливается. */

.vx-picker[b-5fzs313lnj] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vx-picker__filters[b-5fzs313lnj] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
}

/* Высота ограничена, а прокрутка своя: диалог не должен вырастать за экран,
   иначе кнопка закрытия уезжает под низ окна. */
.vx-picker__grid[b-5fzs313lnj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    max-height: 52vh;
    overflow-y: auto;
    padding: 2px;
}
/* /Pages/Payment/PaymentFail.razor.rz.scp.css */
.vx-pay[b-s7khyl39ux]{max-width:520px;margin:0 auto;padding:var(--space-12) 0}
/* /Pages/Payment/PaymentStart.razor.rz.scp.css */
.vx-pay[b-s8ylc9ickh]{max-width:520px;margin:0 auto;padding:var(--space-12) 0}
/* /Pages/Payment/PaymentSuccess.razor.rz.scp.css */
.vx-pay[b-gmrjwvfw8a]{max-width:520px;margin:0 auto;padding:var(--space-12) 0}
.vx-pay__acts[b-gmrjwvfw8a]{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2)}
/* /Pages/Premium/BuyMinutesDialog.razor.rz.scp.css */
.vx-buymin[b-a2obxuyq6y]{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center}
.vx-buymin__now[b-a2obxuyq6y]{margin:0;font:var(--type-small);color:var(--text-2)}

.vx-buymin__stepper[b-a2obxuyq6y]{display:flex;align-items:center;gap:var(--space-4)}
/* Число комплектов — крупно и моноширинно: при переборе цифры не прыгают. */
.vx-buymin__count[b-a2obxuyq6y]{min-width:2ch;font:var(--type-display-m);font-variant-numeric:tabular-nums;color:var(--text-1)}

.vx-buymin__total[b-a2obxuyq6y]{margin:0;font:var(--type-title);color:var(--text-1)}
.vx-buymin__price[b-a2obxuyq6y]{color:var(--text-accent)}
.vx-buymin__note[b-a2obxuyq6y]{margin:0;font:var(--type-small);color:var(--text-3)}
.vx-buymin__gives[b-a2obxuyq6y]{margin:0;padding-left:1.2em;align-self:stretch;text-align:left;display:flex;flex-direction:column;gap:var(--space-1);font:var(--type-small);color:var(--text-2)}
/* /Pages/Premium/PassOfferDialog.razor.rz.scp.css */
/* Пропуск на вечер — игровая карточка (макет лобби.html, .pass): затемнение,
   светлая карта влетает с поворотом и пружиной; закрытая — уходит обратно. */
.vx-passx[b-ytxhp0ia3y]{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(10,8,7,.7);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.vx-passx--on[b-ytxhp0ia3y]{opacity:1;visibility:visible;transition:opacity .3s}
.vx-passx__card[b-ytxhp0ia3y]{position:relative;width:min(420px,100%);border-radius:24px;padding:26px 28px 20px;text-align:center;outline:none;
  background:linear-gradient(160deg,#FFF6EA,#F3DEC2);color:var(--text-inverse);box-shadow:0 30px 70px rgba(0,0,0,.6);
  transform:scale(.8) rotate(-3deg) translateY(30px);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.vx-passx--on .vx-passx__card[b-ytxhp0ia3y]{transform:none}
/* Билет — покачивается, пока карточка открыта. */
.vx-passx__ticket[b-ytxhp0ia3y]{display:inline-grid;place-items:center;width:72px;height:72px;border-radius:22px;background:var(--text-inverse);color:var(--amber-300);
  box-shadow:0 10px 24px rgba(36,23,3,.25)}
.vx-passx--on .vx-passx__ticket[b-ytxhp0ia3y]{animation:vx-passx-sway-b-ytxhp0ia3y 3s ease-in-out .5s infinite}
@keyframes vx-passx-sway-b-ytxhp0ia3y{50%{transform:rotate(-8deg) translateY(-3px)}}
.vx-passx__title[b-ytxhp0ia3y]{display:block;margin:12px 0 6px;font:900 26px/1.1 var(--font-display)}
.vx-passx__price[b-ytxhp0ia3y]{margin:0 0 12px;font:600 15px var(--font-text);color:#6b5236}
.vx-passx__price strong[b-ytxhp0ia3y]{font:900 30px var(--font-display);color:var(--text-inverse)}
.vx-passx__lead[b-ytxhp0ia3y]{margin:0 0 16px;font:500 15px/1.5 var(--font-text);color:#6b5236}
.vx-passx__gives[b-ytxhp0ia3y]{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px;text-align:left}
.vx-passx__gives li[b-ytxhp0ia3y]{display:flex;gap:8px;align-items:flex-start;font:600 14px/1.4 var(--font-text);color:#4a3622}
.vx-passx__gives li[b-ytxhp0ia3y]  svg{flex:none;margin-top:2px;color:#2f9e65}
.vx-passx__note[b-ytxhp0ia3y]{margin:0 0 14px;font:500 12px/1.4 var(--font-text);color:#8a6a44}
.vx-passx__acts[b-ytxhp0ia3y]{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.vx-passx__yes[b-ytxhp0ia3y]{display:inline-flex;align-items:center;gap:8px;font:900 16px var(--font-display);padding:12px 26px;border-radius:999px;border:none;cursor:pointer;
  background:var(--text-inverse);color:var(--amber-300);text-decoration:none;box-shadow:0 10px 22px rgba(36,23,3,.25);transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.vx-passx__yes:hover[b-ytxhp0ia3y]{transform:translateY(-2px) scale(1.03)}
.vx-passx__yes:focus-visible[b-ytxhp0ia3y],.vx-passx__no:focus-visible[b-ytxhp0ia3y],.vx-passx__more:focus-visible[b-ytxhp0ia3y]{outline:none;box-shadow:var(--ring)}
.vx-passx__yes--off[b-ytxhp0ia3y]{opacity:.55;cursor:default}
.vx-passx__yes--off:hover[b-ytxhp0ia3y]{transform:none}
.vx-passx__no[b-ytxhp0ia3y]{font:900 16px var(--font-display);padding:12px 22px;border-radius:999px;border:none;cursor:pointer;background:transparent;color:#8a6a44}
.vx-passx__no:hover[b-ytxhp0ia3y]{background:rgba(36,23,3,.06)}
.vx-passx__more[b-ytxhp0ia3y]{display:inline-block;margin-top:12px;font:600 12px var(--font-text);color:#8a6a44;text-decoration:underline;text-underline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  .vx-passx[b-ytxhp0ia3y],.vx-passx__card[b-ytxhp0ia3y]{transition:none}
  .vx-passx--on .vx-passx__ticket[b-ytxhp0ia3y]{animation:none}
}
/* /Pages/Premium/PayButton.razor.rz.scp.css */
.vx-paybtn[b-mtmiv8j3mi]{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.vx-paybtn--block[b-mtmiv8j3mi]{align-items:stretch}
.vx-paybtn__error[b-mtmiv8j3mi]{margin:0;font:var(--type-small);color:var(--text-danger)}
/* /Pages/Premium/PremiumPage.razor.rz.scp.css */
/* Страница премиума. Узкая колонка, как у юридических страниц: здесь читают
   и сравнивают, а не листают витрину. */
.vx-prem[b-xkqd8j6k1r]{max-width:960px;margin:0 auto;padding:var(--space-8) 0 var(--space-16);
  display:flex;flex-direction:column;gap:var(--space-8)}

.vx-prem__head[b-xkqd8j6k1r]{display:flex;flex-direction:column;gap:var(--space-2)}
.vx-prem__title[b-xkqd8j6k1r]{font:var(--type-display-l);letter-spacing:var(--tracking-tight);color:var(--text-1);margin:0}
.vx-prem__lead[b-xkqd8j6k1r]{font:var(--type-body);color:var(--text-2);margin:0;max-width:60ch}

.vx-prem__have[b-xkqd8j6k1r]{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4) var(--space-5);
  background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--radius-lg)}
.vx-prem__have p[b-xkqd8j6k1r]{margin:0;font:var(--type-body);color:var(--text-2)}
.vx-prem__have strong[b-xkqd8j6k1r]{color:var(--text-1)}

/* Три продукта в ряд. Пропуск — первый и единственный с акцентной рамкой и
   главной кнопкой: это первая покупка, остальные рядом для сравнения. */
.vx-prem__offers[b-xkqd8j6k1r]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);align-items:stretch}

.vx-offer[b-xkqd8j6k1r]{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--pad-card);
  background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--radius-lg);
  box-shadow:var(--inset-top)}
.vx-offer--hero[b-xkqd8j6k1r]{border-color:color-mix(in srgb, var(--text-accent) 55%, var(--border-1));
  box-shadow:var(--inset-top),var(--shadow-3)}

.vx-offer__name[b-xkqd8j6k1r]{font:var(--type-title);color:var(--text-1);margin:0}
/* Цена — крупно, но не во всю ширину: рядом с ней стоит её приземление, и
   спорить с ним размером она не должна. */
.vx-offer__price[b-xkqd8j6k1r]{font:var(--type-display-m);font-variant-numeric:tabular-nums;color:var(--text-1);margin:0}
.vx-offer--hero .vx-offer__price[b-xkqd8j6k1r]{color:var(--text-accent)}
.vx-offer__anchor[b-xkqd8j6k1r]{font:var(--type-small);color:var(--text-2);margin:0}

.vx-offer__gives[b-xkqd8j6k1r]{list-style:none;margin:var(--space-2) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.vx-offer__gives li[b-xkqd8j6k1r]{font:var(--type-small);color:var(--text-2);padding-left:var(--space-4);position:relative}
.vx-offer__gives li[b-xkqd8j6k1r]::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:2px;
  background:var(--border-2)}
.vx-offer--hero .vx-offer__gives li[b-xkqd8j6k1r]::before{background:var(--text-accent)}

.vx-prem__compare[b-xkqd8j6k1r]{display:flex;flex-direction:column;gap:var(--space-4)}
.vx-prem__h2[b-xkqd8j6k1r]{font:var(--type-title);color:var(--text-1);margin:0}

.vx-cmp[b-xkqd8j6k1r]{width:100%;border-collapse:collapse;font:var(--type-small)}
.vx-cmp th[b-xkqd8j6k1r],.vx-cmp td[b-xkqd8j6k1r]{text-align:left;padding:var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom:1px solid var(--border-1);vertical-align:top}
.vx-cmp thead th[b-xkqd8j6k1r]{color:var(--text-3);font-weight:500}
.vx-cmp tbody th[b-xkqd8j6k1r]{color:var(--text-1);font-weight:600;width:32%}
.vx-cmp td[b-xkqd8j6k1r]{color:var(--text-2)}
.vx-cmp td:last-child[b-xkqd8j6k1r]{color:var(--text-1)}

.vx-prem__why[b-xkqd8j6k1r]{font:var(--type-body);color:var(--text-2);margin:0;max-width:60ch}
.vx-prem__legal[b-xkqd8j6k1r]{display:flex;gap:var(--space-5);margin:0;font:var(--type-small)}
.vx-prem__legal a[b-xkqd8j6k1r]{color:var(--text-3)}

@media (max-width:900px){
  .vx-prem__offers[b-xkqd8j6k1r]{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .vx-prem[b-xkqd8j6k1r]{padding-top:0;gap:var(--space-6)}
  .vx-cmp tbody th[b-xkqd8j6k1r]{width:auto}
}
/* /Pages/Premium/PurchaseDialog.razor.rz.scp.css */
.vx-buy[b-528blf2art]{display:flex;flex-direction:column;gap:var(--space-3)}
.vx-buy__what[b-528blf2art]{margin:0;font:var(--type-body);color:var(--text-1)}
.vx-buy__price[b-528blf2art]{color:var(--text-accent);white-space:nowrap}
.vx-buy__h[b-528blf2art]{margin:var(--space-2) 0 0;font:var(--type-small);font-weight:600;color:var(--text-2)}
.vx-buy__gives[b-528blf2art]{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:var(--space-1);font:var(--type-body);color:var(--text-1)}
/* Условия оплаты — справка, а не довод: тише списка. */
.vx-buy__note[b-528blf2art]{margin:var(--space-2) 0 0;font:var(--type-small);color:var(--text-3)}
/* /Pages/Premium/RemoveWatermarkDialog.razor.rz.scp.css */
.vx-unwm[b-rojllsq0qk]{display:flex;flex-direction:column;gap:var(--space-3)}
.vx-unwm__lead[b-rojllsq0qk]{margin:0;font:var(--type-body);color:var(--text-1)}
.vx-unwm__lead strong[b-rojllsq0qk]{color:var(--text-accent)}
/* Цена на человека — приземление, а не главный довод: тише основной строки. */
.vx-unwm__note[b-rojllsq0qk]{margin:0;font:var(--type-small);color:var(--text-3)}
.vx-unwm__more[b-rojllsq0qk]{margin-right:auto;font:var(--type-small);color:var(--text-2);align-self:center}
/* /Pages/Profile/ProfilePage.razor.rz.scp.css */
.vx-profile[b-pwd7klttk1]{max-width:var(--content-max);margin:0 auto;padding:var(--space-8) 0 var(--space-16);
  display:flex;flex-direction:column;gap:var(--space-6)}

/* Тема профиля — класс vx-page-theme--{ключ} на корне: общий файл стилей
   магазина перекрашивает по нему всю страницу через :root:has(…), включая
   шапку сайта и подвал. Здесь — только то, что тема добавляет своего: фон
   шапки профиля без картинки (--profile-banner). */
/* Шапка профиля 1240×260 (исходник 2400×500): на компьютере видна почти вся
   ширина, на телефоне — центр; главное в картинке владелец держит в середине. */
.vx-profile__banner[b-pwd7klttk1]{height:260px;border-radius:var(--radius-lg);overflow:hidden;background:var(--profile-banner,linear-gradient(120deg,rgba(245,173,69,.26),rgba(245,173,69,.04) 60%),var(--surface-1));
  border:1px solid var(--border-1)}
.vx-profile__banner img[b-pwd7klttk1]{width:100%;height:100%;object-fit:cover;display:block}

/* Питомец — по нижнему краю шапки (минус 4 px: нижние пиксели листа пустые),
   правее аватарки: её угол наезжает на шапку слева, и зверёк уходил бы под неё. */
.vx-profile__banner[b-pwd7klttk1]{position:relative}
/* Шапка стала позиционированной (под питомца), а такие браузер рисует поверх
   обычных блоков: аватарка без рамки — буква на круге — уходила под шапку.
   Блок с аватаркой тоже позиционирован и идёт позже — он снова сверху. */
.vx-profile__head[b-pwd7klttk1]{position:relative}
/* Блок с аватаркой наезжает на низ шапки и рисуется поверх — без z-index он
   перехватывал нажатия на нижнюю часть зверька, и хватать приходилось выше.
   Сама сцена нажатия пропускает: ловит только зверёк. */
.vx-profile__banner[b-pwd7klttk1]  .vx-profile__pets{position:absolute;left:calc(96px + var(--space-6) + var(--space-6));right:var(--space-4);bottom:-4px;z-index:1;pointer-events:none}

/* Аватарка наезжает на левый нижний угол шапки — рамка фоном страницы отделяет
   её от картинки под ней. Наезжает меньше половины: имя стоит по низу
   аватарки и не должно залезать на картинку. */
.vx-profile__head[b-pwd7klttk1]{display:flex;align-items:flex-end;gap:var(--space-5);margin-top:-44px;padding:0 var(--space-6)}
.vx-profile__avatar[b-pwd7klttk1]{display:inline-flex;flex:none;border-radius:50%;box-shadow:0 0 0 5px var(--bg-app);background:var(--bg-app)}
.vx-profile__who[b-pwd7klttk1]{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;flex:1}
.vx-profile__name[b-pwd7klttk1]{font:var(--type-display-l);color:var(--text-1);margin:0;overflow-wrap:anywhere}
.vx-profile__since[b-pwd7klttk1]{font:var(--type-small);color:var(--text-3)}
.vx-profile__actions[b-pwd7klttk1]{display:flex;gap:var(--space-2);flex:none}

/* Числа — строкой плашек: их пять, и в столбик они заняли бы экран на телефоне. */
.vx-profile__stats[b-pwd7klttk1]{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-3);margin:0}
.vx-profile__stat[b-pwd7klttk1]{background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--radius-lg);
  padding:var(--space-3) var(--space-4);display:flex;flex-direction:column-reverse;gap:var(--space-1)}
.vx-profile__stat dt[b-pwd7klttk1]{font:var(--type-small);color:var(--text-3)}
.vx-profile__stat dd[b-pwd7klttk1]{margin:0;font:var(--type-title);color:var(--accent)}

.vx-profile__packs[b-pwd7klttk1]{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.vx-profile__loading[b-pwd7klttk1]{font:var(--type-body);color:var(--text-3)}

@media (max-width:640px){
  .vx-profile[b-pwd7klttk1]{padding-top:0}
  .vx-profile__banner[b-pwd7klttk1]{height:140px}
  .vx-profile__banner[b-pwd7klttk1]  .vx-profile__pets{left:calc(96px + var(--space-3) + var(--space-4))}
  .vx-profile__head[b-pwd7klttk1]{flex-wrap:wrap;margin-top:-48px;padding:0 var(--space-3)}
  .vx-profile__actions[b-pwd7klttk1]{width:100%}
}
.vx-profile__tabs[b-pwd7klttk1]{align-self:flex-start;max-width:100%}
.vx-profile__tabs[b-pwd7klttk1]  .vx-seg__item--on{box-shadow:inset 0 -2px 0 var(--accent)}
/* /Pages/Profile/ProfileSettings.razor.rz.scp.css */
.vx-psettings[b-agd9undila]{max-width:720px;margin:0 auto;padding:var(--space-8) 0 var(--space-16);
  display:flex;flex-direction:column;gap:var(--space-6)}
.vx-psettings__head[b-agd9undila]{display:flex;flex-direction:column;gap:var(--space-1)}
.vx-psettings__title[b-agd9undila]{font:var(--type-display-l);color:var(--text-1);margin:0}
.vx-psettings__back[b-agd9undila]{font:var(--type-small);align-self:flex-start}
.vx-psettings__loading[b-agd9undila]{font:var(--type-body);color:var(--text-3)}

.vx-psettings__block[b-agd9undila]{background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--radius-lg);
  padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.vx-psettings__h[b-agd9undila]{font:var(--type-title);color:var(--text-1);margin:0}
.vx-psettings__row[b-agd9undila]{display:flex;align-items:center;gap:var(--space-3)}
.vx-psettings__hint[b-agd9undila]{font:var(--type-small);color:var(--text-3);margin:0}
.vx-psettings__ok[b-agd9undila]{font:var(--type-small);color:var(--status-ready)}
.vx-psettings__error[b-agd9undila]{font:var(--type-small);color:var(--status-failed);margin:0}

.vx-psettings__slug[b-agd9undila]{display:flex;align-items:flex-start;gap:var(--space-2)}
.vx-psettings__prefix[b-agd9undila]{font:var(--type-mono);color:var(--text-3);padding-top:10px;white-space:nowrap}
.vx-psettings__slug[b-agd9undila]  .vx-field{flex:1;min-width:0}

.vx-psettings__links[b-agd9undila]{display:flex;flex-direction:column;gap:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--border-1)}
.vx-psettings__link[b-agd9undila]{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;font:var(--type-small);color:var(--text-2)}
.vx-psettings__link code[b-agd9undila]{font:var(--type-mono-s);color:var(--text-1);overflow-wrap:anywhere}

.vx-psettings__avatar[b-agd9undila]{display:flex;align-items:flex-start;gap:var(--space-5)}
.vx-psettings__avatar-actions[b-agd9undila]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}

/* Кнопка выбора файла — метка поверх скрытого InputFile. ::deep обязателен:
   на <input> компонента InputFile Blazor не ставит атрибут области этого файла. */
.vx-psettings__pick[b-agd9undila]{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);
  padding:6px 12px;border:1px solid var(--border-2);border-radius:var(--radius-md);
  font:var(--type-small-strong);color:var(--text-1);cursor:pointer}
.vx-psettings__pick:hover[b-agd9undila]{border-color:var(--text-3)}
.vx-psettings__pick[b-agd9undila]  .vx-psettings__file{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}

@media (max-width:640px){
  .vx-psettings[b-agd9undila]{padding-top:0}
  .vx-psettings__avatar[b-agd9undila]{flex-direction:column}
  .vx-psettings__slug[b-agd9undila]{flex-direction:column;gap:0}
  .vx-psettings__prefix[b-agd9undila]{padding-top:0}
}
/* /Pages/Renders/MyRenders.razor.rz.scp.css */
.vx-renders[b-7lqifwazxb]{max-width:var(--content-max);margin:0 auto;padding:var(--space-8) 0 var(--space-16)}
.vx-renders__head[b-7lqifwazxb]{display:flex;flex-direction:column;margin-bottom:var(--space-6)}
.vx-renders__title[b-7lqifwazxb]{font:var(--type-display-l);color:var(--text-1);margin:0}
.vx-renders__loading[b-7lqifwazxb]{font:var(--type-body);color:var(--text-3)}

@media (max-width:640px){
  .vx-renders[b-7lqifwazxb]{padding-top:0}
}
/* /Pages/Renders/SavedRenderGrid.razor.rz.scp.css */
.vx-renders__grid[b-a3g0ssjot3]{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

.vx-rcard__link[b-a3g0ssjot3]{display:flex;flex-direction:column;height:100%;border-bottom:0;
  background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--radius-lg);
  overflow:hidden;color:inherit;transition:border-color var(--dur-fast) var(--ease-out)}
.vx-rcard__link:hover[b-a3g0ssjot3]{border-color:var(--border-2)}

.vx-rcard__frame[b-a3g0ssjot3]{aspect-ratio:16/9;background:var(--surface-sunken);
  display:flex;align-items:center;justify-content:center}
.vx-rcard__frame img[b-a3g0ssjot3]{width:100%;height:100%;object-fit:cover;display:block}

.vx-rcard__body[b-a3g0ssjot3]{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3) var(--space-4) var(--space-4)}
.vx-rcard__title[b-a3g0ssjot3]{font:var(--type-body-strong);color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-rcard__date[b-a3g0ssjot3]{font:var(--type-small);color:var(--text-3)}

/* Срок — главная строка карточки после названия: ради него сюда и заходят. */
.vx-rcard__term[b-a3g0ssjot3]{font:var(--type-small);color:var(--text-2)}
.vx-rcard__term--soon[b-a3g0ssjot3]{color:var(--text-accent)}
.vx-rcard__clean[b-a3g0ssjot3]{font:var(--type-caption);color:var(--text-3)}

/* Удалённый ролик остаётся в списке ещё неделю — приглушённым, чтобы
   пропажа читалась как истёкший срок, а не как сбой. */
.vx-rcard--gone .vx-rcard__link[b-a3g0ssjot3]{opacity:.55}

@media (max-width:640px){
  .vx-renders__grid[b-a3g0ssjot3]{grid-template-columns:minmax(0,1fr)}
}

/* Отметка публикации — по размеру текста: в колонке карточки плашка иначе
   растягивается на всю ширину. */
.vx-rcard__pub[b-a3g0ssjot3]{align-self:flex-start}
/* /Pages/Shop/Coins.razor.rz.scp.css */
.vx-coins[b-0iahgl8cyh]{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-5)}
.vx-coins__head[b-0iahgl8cyh]{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.vx-coins__title[b-0iahgl8cyh]{font:var(--type-display-l);color:var(--text-1);margin:0}
.vx-coins__summary[b-0iahgl8cyh]{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);padding:var(--space-4);
  background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--radius-lg)}
.vx-coins__balance[b-0iahgl8cyh]{display:inline-flex;align-items:center;gap:8px;font:var(--type-display-l);color:var(--text-accent)}
.vx-coins__streak[b-0iahgl8cyh]{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font:var(--type-small);color:var(--text-2)}
.vx-coins__list[b-0iahgl8cyh]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;background:var(--surface-1);
  border:1px solid var(--border-1);border-radius:var(--radius-lg)}
.vx-coins__row[b-0iahgl8cyh]{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-3);align-items:baseline;
  padding:var(--space-3) var(--space-4);border-top:1px solid var(--border-1)}
.vx-coins__row:first-child[b-0iahgl8cyh]{border-top:0}
.vx-coins__when[b-0iahgl8cyh]{font:var(--type-mono-s);color:var(--text-3)}
.vx-coins__note[b-0iahgl8cyh]{font:var(--type-body);color:var(--text-1);overflow-wrap:anywhere}
.vx-coins__plus[b-0iahgl8cyh]{font:var(--type-body-strong);color:var(--status-ready)}
.vx-coins__minus[b-0iahgl8cyh]{font:var(--type-body-strong);color:var(--text-2)}
.vx-coins__loading[b-0iahgl8cyh]{font:var(--type-body);color:var(--text-3)}
/* /Pages/Shop/ItemActions.razor.rz.scp.css */
/* «Надето» — пометка рядом с кнопкой «Снять», цветом готовности. */
.vx-shop__on[b-m42u5ksc4h]{display:inline-flex;align-items:center;gap:4px;font:var(--type-caption);color:var(--status-ready);margin-right:auto}
/* /Pages/Shop/ItemPreview.razor.rz.scp.css */
/* Превью вещи — одно на витрину, «Мои вещи» и примерку. Карточка игрока —
   дочерний компонент, поэтому её правило через ::deep. */
.vx-prev[b-nhaxxdzodt]{display:flex;align-items:center;justify-content:center;height:112px;padding:var(--space-3)}
.vx-prev--card[b-nhaxxdzodt]{padding:var(--space-3) var(--space-4)}
.vx-prev--card[b-nhaxxdzodt]  .vx-player{width:100%}
.vx-prev--banner[b-nhaxxdzodt]{padding:0}
.vx-prev--banner img[b-nhaxxdzodt]{width:100%;height:100%;object-fit:cover;display:block}
.vx-prev--theme[b-nhaxxdzodt]{position:relative;flex-direction:column;align-items:stretch;gap:6px;padding:0;
  background:var(--bg-app)}
.vx-prev__banner[b-nhaxxdzodt]{flex:1;background:var(--profile-banner)}
.vx-prev__stat[b-nhaxxdzodt]{padding:0 var(--space-3) var(--space-2);font:var(--type-title);color:var(--accent)}
.vx-prev__stat small[b-nhaxxdzodt]{font:var(--type-caption);color:var(--text-3);margin-left:6px}
/* /Pages/Shop/Items.razor.rz.scp.css */
.vx-items[b-f09y2e1v8v]{max-width:var(--content-max);margin:0 auto;display:flex;flex-direction:column;gap:var(--space-6)}
.vx-items__head[b-f09y2e1v8v]{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.vx-items__title[b-f09y2e1v8v]{font:var(--type-display-l);color:var(--text-1);margin:0}
.vx-items__group[b-f09y2e1v8v]{display:flex;flex-direction:column;gap:var(--space-3)}
.vx-items__h[b-f09y2e1v8v]{margin:0;font:var(--type-title);color:var(--text-1)}
.vx-items__grid[b-f09y2e1v8v]{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.vx-items__error[b-f09y2e1v8v]{margin:0;font:var(--type-small);color:var(--text-danger)}
.vx-items__loading[b-f09y2e1v8v]{font:var(--type-body);color:var(--text-3)}
.vx-items__pet[b-f09y2e1v8v]{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
/* /Pages/Shop/PetNameField.razor.rz.scp.css */
.vx-petname[b-tgxgpr339f]{display:flex;align-items:flex-start;gap:var(--space-2)}
.vx-petname[b-tgxgpr339f]  .vx-field{flex:1}
/* Кнопка — вровень с полем, а не с подписью над ним. */
.vx-petname[b-tgxgpr339f]  .vx-btn{margin-top:22px}
/* /Pages/Shop/Shop.razor.rz.scp.css */
.vx-shop[b-dxiznclaof]{max-width:var(--content-max);margin:0 auto;display:flex;flex-direction:column;gap:var(--space-5)}
.vx-shop__head[b-dxiznclaof]{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.vx-shop__title[b-dxiznclaof]{font:var(--type-display-l);color:var(--text-1);margin:0}
.vx-shop__sub[b-dxiznclaof]{font:var(--type-small);color:var(--text-3);margin:var(--space-1) 0 0}
.vx-shop__mine[b-dxiznclaof]{display:inline-block;margin-top:var(--space-2);font:var(--type-small-strong);color:var(--text-accent);border-bottom:0}
.vx-shop__mine:hover[b-dxiznclaof]{color:var(--accent-hover)}
.vx-shop__balance[b-dxiznclaof]{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;border-bottom:0;
  background:var(--accent-soft);color:var(--text-accent);font:var(--type-title)}
.vx-shop__earn[b-dxiznclaof]{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-3);
  padding:var(--space-4);background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--radius-lg);
  font:var(--type-small);color:var(--text-2)}
.vx-shop__earn strong[b-dxiznclaof]{color:var(--text-accent)}
/* Две витрины рядом: основная тянется, премиум — колонкой справа. Разделы
   (вкладки) — только у основной: в премиум-колонке четыре вещи всех видов. */
.vx-shop__cols[b-dxiznclaof]{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:var(--space-5);align-items:start}
.vx-shop__cols--single[b-dxiznclaof]{grid-template-columns:minmax(0,1fr)}
.vx-shop__main[b-dxiznclaof]{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.vx-shop__pgrid[b-dxiznclaof]{display:grid;gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){
  .vx-shop__cols[b-dxiznclaof]{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .vx-shop__pgrid[b-dxiznclaof]{grid-template-columns:minmax(0,1fr)}
}

/* Премиум-блок — золотой рамкой и тёплым свечением: он отдельный и должен быть заметен. */
.vx-shop__premium[b-dxiznclaof]{padding:var(--space-5);border-radius:var(--radius-lg);border:1px solid rgba(242,193,78,.55);
  background:radial-gradient(900px 200px at 50% 0,rgba(242,193,78,.12),transparent 70%),var(--surface-1);
  box-shadow:0 0 0 1px rgba(242,193,78,.12),0 10px 40px rgba(242,193,78,.08)}
.vx-shop__h[b-dxiznclaof]{display:flex;align-items:center;gap:8px;margin:0;font:var(--type-title);color:var(--gold-500)}
.vx-shop__note[b-dxiznclaof]{margin:var(--space-1) 0 var(--space-4);font:var(--type-small);color:var(--text-3)}
.vx-shop__grid[b-dxiznclaof]{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.vx-shop__error[b-dxiznclaof]{margin:0;font:var(--type-small);color:var(--text-danger)}
.vx-shop__loading[b-dxiznclaof]{font:var(--type-body);color:var(--text-3)}
/* /Pages/Shop/ShopItemCard.razor.rz.scp.css */
/* Карточка вещи. Цвет редкости — полоской сверху: видно издалека, не спорит с превью. */
.vx-sitem[b-nrfec3uz5l]{display:flex;flex-direction:column;background:var(--surface-1);border:1px solid var(--border-1);
  border-radius:var(--radius-lg);overflow:hidden;border-top:3px solid var(--rarity-common)}
.vx-sitem--rare[b-nrfec3uz5l]{border-top-color:var(--rarity-rare)}
.vx-sitem--epic[b-nrfec3uz5l]{border-top-color:var(--rarity-epic)}
.vx-sitem--legendary[b-nrfec3uz5l]{border-top-color:var(--rarity-legendary)}
.vx-sitem__look[b-nrfec3uz5l]{display:block;padding:0;border:0;background:var(--surface-sunken);cursor:zoom-in;width:100%}
.vx-sitem__look:focus-visible[b-nrfec3uz5l]{box-shadow:var(--ring);outline:none}
.vx-sitem__body[b-nrfec3uz5l]{display:flex;flex-direction:column;gap:2px;padding:var(--space-3) var(--space-4) 0}
.vx-sitem__name[b-nrfec3uz5l]{font:var(--type-body-strong);color:var(--text-1)}
.vx-sitem__meta[b-nrfec3uz5l]{display:flex;flex-wrap:wrap;gap:6px;font:var(--type-caption);color:var(--text-3)}
.vx-sitem__prem[b-nrfec3uz5l]{display:inline-flex;align-items:center;gap:3px;color:var(--gold-500)}
.vx-sitem__acts[b-nrfec3uz5l]{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4) var(--space-4);margin-top:auto}
.vx-sitem__price[b-nrfec3uz5l]{display:inline-flex;align-items:center;gap:4px;font:var(--type-body-strong);color:var(--text-accent);margin-right:auto}
/* /Pages/Shop/TryOnDialog.razor.rz.scp.css */
.vx-tryon[b-d6wnn4h7sk]{display:flex;flex-direction:column;gap:0;margin:0 0 var(--space-4);padding:0;
  border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-1);background:var(--bg-app);color:var(--text-1)}
.vx-tryon__banner[b-d6wnn4h7sk]{height:110px;position:relative;background:var(--profile-banner,linear-gradient(120deg,rgba(245,173,69,.26),rgba(245,173,69,.04) 60%),var(--surface-1));background-size:cover;background-position:center}
.vx-tryon__who[b-d6wnn4h7sk]{display:flex;align-items:flex-end;gap:var(--space-3);margin-top:-36px;padding:0 var(--space-4) var(--space-3)}
.vx-tryon__avatar[b-d6wnn4h7sk]{display:inline-flex;border-radius:50%;box-shadow:0 0 0 4px var(--surface-1);background:var(--surface-1)}
.vx-tryon__name[b-d6wnn4h7sk]{font:var(--type-title);color:var(--accent)}
.vx-tryon__meta[b-d6wnn4h7sk]{margin:var(--space-3) 0 0;font:var(--type-small);color:var(--text-3)}
.vx-tryon__desc[b-d6wnn4h7sk]{margin:var(--space-2) 0 0;font:var(--type-body);color:var(--text-2)}
/* Шапка позиционирована под питомца и рисуется поверх обычных блоков — строка
   с аватаркой тоже позиционирована, иначе буква на круге уходила под шапку. */
.vx-tryon__who[b-d6wnn4h7sk]{position:relative}
/* Правее аватарки: её угол наезжает на шапку слева. Пол — сам низ шапки:
   нижние два пикселя листа пустые, минус 4 px ставит лапы ровно на край. */
/* Строка с аватаркой наезжает на низ шапки и рисуется поверх — без z-index она
   перехватывала нажатия на нижнюю часть зверька. Сама сцена нажатия пропускает. */
.vx-tryon__banner[b-d6wnn4h7sk]  .vx-tryon__pets{position:absolute;left:112px;right:var(--space-3);bottom:-4px;z-index:1;pointer-events:none}
/* /Pages/Support/BugReportForm.razor.rz.scp.css */
/* Поля формы — общие компоненты (Select, Input); здесь раскладка стека, зона
   скриншотов и сообщения формы. Устройство зоны файлов повторяет диалог
   загрузки: одна и та же задача должна выглядеть одинаково. */

.vx-bug__stack[b-c2d7mbqlke] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vx-bug__files[b-c2d7mbqlke] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vx-bug__drop[b-c2d7mbqlke] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    color: var(--text-2);
    background: var(--surface-sunken);
    border: 1px dashed var(--border-2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-control);
}

.vx-bug__drop:hover[b-c2d7mbqlke] {
    border-color: var(--accent);
    color: var(--text-1);
}

.vx-bug__drop--over[b-c2d7mbqlke] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--text-1);
}

/* Поле файла растянуто на всю зону и прозрачно: браузер принимает файл,
   брошенный на input type=file, без нашего участия.

   ::deep здесь обязателен. InputFile — компонент, и Blazor не ставит на его
   <input> атрибут области видимости этого файла: правило без ::deep не
   совпадало вообще ни с чем, и поле оставалось системным контролом
   «Выбрать файлы» поверх зоны сброса. Та же грабля, что в диалоге загрузки. */
.vx-bug__drop[b-c2d7mbqlke]  .vx-bug__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.vx-bug__drop-text[b-c2d7mbqlke] {
    font: var(--type-small);
}

.vx-bug__shots[b-c2d7mbqlke] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Миниатюра с кнопкой снятия в углу: приложенное надо видеть, иначе человек
   не заметит, что приложил не тот снимок. */
.vx-bug__shot[b-c2d7mbqlke] {
    position: relative;
    width: 96px;
    height: 72px;
    margin: 0;
    overflow: hidden;
    background: var(--surface-sunken);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
}

.vx-bug__shot img[b-c2d7mbqlke] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vx-bug__shot[b-c2d7mbqlke]  .vx-iconbtn {
    position: absolute;
    top: 3px;
    right: 3px;
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
}

.vx-bug__hint[b-c2d7mbqlke] {
    font: var(--type-caption);
    color: var(--text-3);
    margin: 0;
}

.vx-bug__done[b-c2d7mbqlke] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.vx-bug__done p[b-c2d7mbqlke] {
    font: var(--type-body);
    color: var(--text-1);
    margin: 0;
}

.vx-bug__error[b-c2d7mbqlke] {
    font: var(--type-small);
    color: var(--text-danger);
    margin: 0;
}
/* /Pages/UploadDialog.razor.rz.scp.css */
.vx-up[b-z0vuaur43p] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Область выбора файла — сама по себе кнопка: щелчок по всей площади, а не
   только по системному «Обзор». */
.vx-up__drop[b-z0vuaur43p] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    border: 1px dashed var(--border-2);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
    position: relative;
}

.vx-up__drop:hover[b-z0vuaur43p] {
    border-color: var(--accent);
}

/* Файл над областью: подсветка обязана быть заметнее наведения, иначе по ней
   не понять, отпустят файл здесь или мимо. */
.vx-up__drop--over[b-z0vuaur43p] {
    border-color: var(--accent);
    border-style: solid;
    background: var(--accent-soft);
    color: var(--text-1);
}

/* Системное поле не скрыто display:none — так оно осталось бы недостижимым
   с клавиатуры. Оно растянуто на всю область и прозрачно.

   ::deep здесь обязателен. InputFile — компонент, и Blazor не ставит на его
   <input> атрибут области видимости этого файла: правило без ::deep не
   совпадало вообще ни с чем. Поле оставалось обычным системным контролом
   внутри рамки, поэтому перетаскивание срабатывало только точно на него,
   а файл, бро́шенный рядом, браузер просто открывал в соседней вкладке. */
.vx-up__drop[b-z0vuaur43p]  .vx-up__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.vx-up__drop-text[b-z0vuaur43p] {
    font: var(--type-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-up__row[b-z0vuaur43p] {
    display: flex;
    gap: 10px;
}

.vx-up__note[b-z0vuaur43p] {
    font: var(--type-caption);
    color: var(--text-3);
    margin: 0;
}

/* Предупреждение янтарём, а не красным: длинный фрагмент — это не ошибка,
   а следствие, о котором стоит знать. --warn токена в системе нет, проверено
   сверкой всех использованных переменных с файлами tokens/. */
.vx-up__warn[b-z0vuaur43p] {
    font: var(--type-caption);
    color: var(--amber-300);
    margin: 0;
}

.vx-up__err[b-z0vuaur43p] {
    font: var(--type-caption);
    color: var(--text-danger);
    margin: 0;
}
/* /Pages/Videos/Gallery.razor.rz.scp.css */
/* Галерея — раскладкой каталога: шапка с сортировкой, слева поиск и теги,
   справа сетка. Классы свои: стили каталога изолированы его страницей. */
.vx-gal[b-9ct3wea202]{min-height:100vh}
.vx-gal__wrap[b-9ct3wea202]{max-width:var(--content-max);margin:0 auto;padding:28px 24px 48px}
.vx-gal__loading[b-9ct3wea202]{padding:40px 24px;font:var(--type-body);color:var(--text-3)}
.vx-gal__error[b-9ct3wea202]{margin:0 0 12px;font:var(--type-body);color:var(--text-danger)}
.vx-gal__hero[b-9ct3wea202]{display:flex;align-items:flex-end;gap:20px;margin-bottom:22px}
.vx-gal__title[b-9ct3wea202]{font:var(--type-display-l);color:var(--text-1);margin:4px 0 0}
.vx-gal__sub[b-9ct3wea202]{font:var(--type-body);color:var(--text-2);max-width:520px;margin:6px 0 0}
.vx-gal__sort[b-9ct3wea202]{margin-left:auto;flex:0 0 auto}
.vx-gal__cols[b-9ct3wea202]{display:grid;grid-template-columns:224px minmax(0,1fr);gap:24px;align-items:start}
.vx-gal__side[b-9ct3wea202]{position:sticky;top:20px;display:flex;flex-direction:column;gap:18px;padding:16px;
  background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--radius-lg)}
/* Отбор по паку — плашкой над сеткой: в адрес он приходит ссылкой со страницы
   пака, а не из поля слева, и снять его нужно там, где видно, что он стоит. */
.vx-gal__chip[b-9ct3wea202]{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;padding:4px 10px;
  border:1px solid var(--border-2);border-radius:var(--radius-pill);background:var(--surface-2);
  color:var(--text-1);font:var(--type-small);cursor:pointer}
.vx-gal__chip:hover[b-9ct3wea202]{background:var(--ghost-hover)}

@media (max-width:860px){
  .vx-gal__hero[b-9ct3wea202]{flex-direction:column;align-items:flex-start;gap:12px}
  .vx-gal__cols[b-9ct3wea202]{grid-template-columns:minmax(0,1fr)}
  .vx-gal__side[b-9ct3wea202]{position:static}
}

@media (max-width:640px){
  .vx-gal__wrap[b-9ct3wea202]{padding:0 0 48px}
  .vx-gal__sort[b-9ct3wea202]{margin-left:0;max-width:100%}
}
/* /Pages/Videos/VideoGrid.razor.rz.scp.css */
.vx-vgrid[b-3lxz7hkz6z]{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.vx-vgrid--shelf[b-3lxz7hkz6z]{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:860px){.vx-vgrid--shelf[b-3lxz7hkz6z]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.vx-vgrid--shelf[b-3lxz7hkz6z]{grid-template-columns:minmax(0,1fr)}}
/* /Pages/Videos/VideoPage.razor.rz.scp.css */
.vx-video[b-holz5xbdty]{max-width:880px;margin:0 auto;padding:var(--space-8) 0 var(--space-16);
  display:flex;flex-direction:column;gap:var(--space-4)}

.vx-video__player[b-holz5xbdty]{display:block;width:100%;aspect-ratio:16/9;background:var(--warm-950);
  border-radius:var(--radius-lg);box-shadow:var(--inset-top);overflow:hidden}

.vx-video__head[b-holz5xbdty]{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
.vx-video__title[b-holz5xbdty]{font:var(--type-display-l);color:var(--text-1);margin:0;overflow-wrap:anywhere;flex:1;min-width:0}
.vx-video__date[b-holz5xbdty]{font:var(--type-small);color:var(--text-3)}
.vx-video__stats[b-holz5xbdty]{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.vx-video__views[b-holz5xbdty]{display:inline-flex;align-items:center;gap:6px;font:var(--type-small);color:var(--text-3);font-variant-numeric:tabular-nums}
.vx-video__desc[b-holz5xbdty]{font:var(--type-body);color:var(--text-2);margin:0;white-space:pre-line;overflow-wrap:anywhere}
.vx-video__tags[b-holz5xbdty]{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* Плашка статуса — над видео: человек, пришедший по ссылке, сначала должен
   узнать, почему ролика нет, а не искать это под пустым местом. */
.vx-video__notice[b-holz5xbdty]{display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-start;margin:0;
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--surface-2);
  border:1px solid var(--border-1);font:var(--type-body);color:var(--text-2)}
.vx-video__notice p[b-holz5xbdty]{margin:0;display:flex;align-items:center;gap:var(--space-2)}
.vx-video__note[b-holz5xbdty]{color:var(--text-1)}

.vx-video__mine[b-holz5xbdty]{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.vx-video__hint[b-holz5xbdty]{font:var(--type-caption);color:var(--text-3);margin:0}
.vx-video__error[b-holz5xbdty]{font:var(--type-small);color:var(--text-danger);margin:0}

.vx-video__block[b-holz5xbdty]{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-4)}
.vx-video__h[b-holz5xbdty]{font:var(--type-title);color:var(--text-1);margin:0}
.vx-video__players[b-holz5xbdty]{display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
/* Карточка участника — ссылкой на профиль, но без подчёркивания ссылок текста. */
.vx-video__player-link[b-holz5xbdty]{text-decoration:none;color:inherit;display:block;border:0;box-shadow:none}
.vx-video__pack[b-holz5xbdty]{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.vx-video__pack-title[b-holz5xbdty]{font:var(--type-body-strong);color:var(--text-1)}
.vx-video__more-head[b-holz5xbdty]{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}

@media (max-width:640px){
  .vx-video[b-holz5xbdty]{padding-top:0}
}