.vx-top{display:flex;align-items:center;gap:20px;height:var(--topbar-h);padding:0 20px;
  background:var(--surface-1);border-bottom:1px solid var(--border-1);box-shadow:var(--inset-top)}
/* Ряд разделов на узком окне прокручивается вбок, а не выталкивает монеты и
   меню за край: пунктов теперь 3–5 (личное ушло в меню под аватаркой), и
   прокрутка — запас на узкие окна до телефонной раскладки с 640. Отступ
   сверху и снизу — место для кольца фокуса, которое прокрутка иначе срезала бы. */
.vx-top__nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:4px 0}
.vx-top__link{height:30px;padding:0 12px;display:inline-flex;align-items:center;white-space:nowrap;flex:0 0 auto;border-radius:var(--radius-sm);
  font:var(--type-small-strong);color:var(--text-3);cursor:pointer;transition:var(--transition-control);border:0;background:transparent}
.vx-top__link:hover{color:var(--text-1);background:var(--ghost-hover)}
.vx-top__link--on{color:var(--text-1);background:var(--surface-3);box-shadow:var(--inset-top)}
/* Пункт только для широкого окна — ниже порога он ушёл бы в прокрутку ряда
   и вытеснил основные разделы; путь к нему остаётся в меню аватарки. Замер:
   шесть пунктов админа занимают ~495 px, а ряду при окне 900 px достаётся
   ~610 px — с запасом на значок премиума справа. */
@media (max-width:899px){
  .vx-top__link--wide{display:none}
}
/* Отступление от исходного кита, как в Ruling 57: кольцо фокуса восстановлено.
   Общее правило :focus-visible из base.css задаёт box-shadow, но у активного
   пункта своя тень, объявленная позже и с той же силой селектора, — она
   перекрывала кольцо, и клавиатурный фокус на шапке становился невидимым.
   Отсюда и жалоба «по Tab не добраться до навигации»: фокус доходил, но не
   был виден. Тень сохраняем и кольцо добавляем к ней. */
.vx-top__link:focus-visible{box-shadow:var(--ring)}
.vx-top__link--on:focus-visible{box-shadow:var(--ring),var(--inset-top)}

.vx-top__right{display:flex;align-items:center;gap:10px}
.vx-top__mark{display:flex;align-items:center;gap:10px;padding-right:6px;
  height:28px;text-decoration:none;border-radius:var(--radius-sm);
  /* без рамок вовсе: глобальный стиль ссылок даёт подчёркивание, а прежняя
     вертикальная черта спорила с тенью шапки — знак читается и без огранки */
  border-bottom:0}
/* Знак — ссылка, и это должно быть видно до нажатия, иначе к нему не потянутся. */
.vx-top__mark:hover{opacity:.82}
.vx-top__mark:focus-visible{box-shadow:var(--ring);outline:none}

/* Телефон. В одну строку шапка не помещается: знак, два-три раздела, имя и
   «Выйти» вместе шире экрана, и вся страница начинала прокручиваться вбок.
   Разделы уходят второй строкой, а не в меню-гамбургер: их всего два-три, и
   прятать «Каталог» за иконку — терять переходы в него. У экранов с названием
   (проверка ролей, комната) второй строкой идут действия: название длинное,
   и делить с ним строку кнопкам нельзя — обрезалось бы то или другое. */
@media (max-width:640px){
  .vx-top{flex-wrap:wrap;height:auto;min-height:var(--topbar-h);padding:var(--space-2) var(--space-4);
    gap:var(--space-2) var(--space-3)}
  .vx-top__mark{height:40px}
  .vx-top__title{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Пункты не переносятся внутри себя: «Мои паки» в две строки читается
     как два пункта. Не хватило ширины — ряд прокручивается вбок. */
  .vx-top__nav{order:3;flex:1 0 100%;overflow-x:auto;scrollbar-width:none}
  .vx-top__link{white-space:nowrap;flex:0 0 auto;padding:0 10px}
  .vx-top__nav:not(:has(a)){display:none}
  .vx-top__right{margin-left:auto;min-width:0}
  .vx-top:has(.vx-top__title) .vx-top__right{flex:1 0 100%;justify-content:flex-end;flex-wrap:wrap}
  .vx-top__right:empty{display:none}
}