.vx-select{position:relative;display:flex;flex-direction:column;gap:6px}
.vx-select__label{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3)}
.vx-select__control{display:flex;align-items:center;gap:8px;height:var(--control-h);padding:0 10px 0 12px;
  background:var(--surface-3);border:1px solid var(--border-2);border-radius:var(--radius-md);
  box-shadow:var(--inset-top);cursor:pointer;transition:var(--transition-control);color:var(--text-1);font:var(--type-body)}
.vx-select__control:hover{background:var(--warm-750);border-color:var(--border-strong)}
.vx-select__control:focus-visible{outline:none;box-shadow:var(--ring)}
.vx-select__value{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Меню шире поля, если пункты длиннее его: в узкой колонке фильтров «Язык»
   мерился 130 пикселями, и названия языков уезжали в горизонтальную прокрутку.
   Прокручивать список вбок, чтобы прочитать вариант, — не выбор, а работа.
   Поэтому по ширине пунктов, но не шире разумного, и вбок не прокручивается
   вовсе. */
.vx-select__menu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;padding:6px;
  min-width:100%;width:max-content;max-width:min(320px, 80vw);
  background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-4);max-height:260px;overflow-y:auto;overflow-x:hidden;
  animation:vx-rise var(--dur-fast) var(--ease-out)}
.vx-select__opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-sm);
  cursor:pointer;color:var(--text-2);font:var(--type-body)}
.vx-select__opt:hover{background:var(--ghost-hover);color:var(--text-1)}
.vx-select__opt--sel{color:var(--amber-300);background:var(--accent-soft)}