.vx-seg{display:inline-flex;padding:3px;gap:2px;background:var(--surface-sunken);border:1px solid var(--border-1);
  border-radius:var(--radius-md);box-shadow:var(--inset-sunken)}
.vx-seg__item{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border:0;background:transparent;
  color:var(--text-3);font:var(--type-small-strong);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-control)}
.vx-seg__item:hover{color:var(--text-1)}
.vx-seg__item--on{background:var(--surface-3);color:var(--text-1);box-shadow:var(--inset-top),var(--shadow-1)}
/* Кольцо фокуса поверх собственной тени: без этих двух строк выбранная вкладка
   при обходе с клавиатуры ничем не отличается от невыбранной. */
.vx-seg__item:focus-visible{box-shadow:var(--ring)}
.vx-seg__item--on:focus-visible{box-shadow:var(--ring),var(--inset-top),var(--shadow-1)}

/* Телефон: подписи не переносятся на две строки («Созданные / мной»), а если
   сегмент всё же шире экрана, он прокручивается сам, а не тянет вбок страницу. */
@media (max-width:640px){
  .vx-seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .vx-seg__item{flex:0 0 auto;white-space:nowrap}
}