/*
 * Компоненты дизайн-системы «Видоискатель». Только роли и ступени из
 * app/vf-tokens.css — литералов здесь нет (кроме хайрлайна 1px). Исключение —
 * рисунки-иллюстрации в разделах «Качества»: их краски берут примитивы прямо,
 * меры записаны числом (решение владельца 22.10.2026: иллюстрация не токенизируется).
 * Все правила — под `.vf`: за пределами корня экрана система не действует.
 */

/* ── Основа области ── */
.vf {
  position: relative;
  min-height: 100vh;
  background: var(--vf-bg);
  color: var(--vf-fg);
  font: 400 var(--vf-fs-body) / var(--vf-lh-body) var(--vf-font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* Сбросы — с нулевым весом (:where): любой класс компонента их перебивает. */
:where(.vf) :where(h1, h2, h3, h4, p, figure) { margin: 0; }
:where(.vf) :where(button, input) { font: inherit; color: inherit; }
:where(.vf) :where(button) { cursor: pointer; background: none; border: 0; padding: 0; }
:where(.vf) :where(a) { color: inherit; }
.vf :focus-visible { outline: var(--vf-focus-w) solid var(--vf-focus); outline-offset: var(--vf-focus-offset); }
.vf ::selection { background: var(--vf-accent-fill); color: var(--vf-on-accent); }

.vf-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.vf-skip {
  position: fixed; left: var(--vf-sp-3xl); top: var(--vf-skip-off); z-index: var(--vf-z-skip);
  padding: var(--vf-sp-md) var(--vf-sp-xl); border-radius: var(--vf-r-ctl);
  background: var(--vf-accent-fill); color: var(--vf-on-accent); font-weight: 600; text-decoration: none;
}
.vf-skip:focus { top: var(--vf-sp-3xl); }

/* ── Иконка ── */
.vf-i {
  width: var(--vf-i-md); height: var(--vf-i-md); flex: none; fill: none; stroke: currentColor;
  stroke-width: var(--vf-i-stroke); stroke-linecap: round; stroke-linejoin: round;
}
.vf-i[data-size="sm"] { width: var(--vf-i-sm); height: var(--vf-i-sm); }
.vf-i[data-size="lg"] { width: var(--vf-i-lg); height: var(--vf-i-lg); }
.vf-i[data-fill] { fill: currentColor; stroke: none; }

/* ── Кнопка ── */
.vf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--vf-btn-gap);
  height: var(--vf-ctl-md); padding: 0 var(--vf-btn-pad-x); border-radius: var(--vf-r-ctl);
  border: 1px solid transparent; font: 600 var(--vf-fs-md) / var(--vf-lh-md) var(--vf-font-body);
  text-decoration: none; white-space: nowrap;
  transition: background var(--vf-dur-fast), color var(--vf-dur-fast), border-color var(--vf-dur-fast),
    box-shadow var(--vf-dur-mid), transform var(--vf-dur-press) var(--vf-ease-out);
}
.vf-btn:active { transform: scale(.97); }
.vf-btn[aria-disabled="true"], .vf-btn:disabled { opacity: var(--vf-opacity-disabled); pointer-events: none; }
/* Идёт действие: кнопка не нажимается, но и не гаснет — это не «недоступно» */
.vf-btn[data-loading] { opacity: 1; cursor: progress; }
.vf-btn-p { background: var(--vf-accent-fill); color: var(--vf-on-accent); padding-left: var(--vf-btn-pad-pip); }
.vf-btn-pip {
  display: grid; place-items: center; width: var(--vf-btn-pip); height: var(--vf-btn-pip); border-radius: var(--vf-r-mark);
  background: var(--vf-btn-pip-bg); color: var(--vf-btn-pip-fg);
}
.vf-btn-pip .vf-i { transition: transform var(--vf-dur-slow) var(--vf-ease-spring); }
.vf-btn-p:hover { box-shadow: var(--vf-glow-cta); }
.vf-btn-p:hover .vf-btn-pip .vf-i { transform: translateX(var(--vf-btn-pip-nudge)); }
.vf-btn-g { background: var(--vf-scrim); border-color: var(--vf-line-2); color: var(--vf-fg); }
.vf-btn-g:hover { border-color: var(--vf-line-3); background: var(--vf-hover-tint); }
.vf-btn[data-size="sm"] { height: var(--vf-ctl-sm); padding: 0 var(--vf-btn-pad-x-sm); font-size: var(--vf-fs-md); }
.vf-btn-p[data-size="sm"] { padding-left: var(--vf-btn-pad-pip-sm); }
.vf-btn-p[data-size="sm"] .vf-btn-pip { width: var(--vf-btn-pip-sm); height: var(--vf-btn-pip-sm); }

/* ── Икон-кнопка: квадрат с одной иконкой, без подписи на экране ── */
.vf-ib {
  display: inline-grid; place-items: center; flex: none; width: var(--vf-ib-size); height: var(--vf-ib-size);
  border: 1px solid var(--vf-line-2); border-radius: var(--vf-r-ctl); background: var(--vf-scrim); color: var(--vf-fg-2);
  transition: color var(--vf-dur-fast), border-color var(--vf-dur-fast), transform var(--vf-dur-press) var(--vf-ease-out);
}
.vf-ib:hover { color: var(--vf-fg); border-color: var(--vf-line-3); }
.vf-ib:active { transform: scale(.97); }
.vf-ib:disabled, .vf-ib[aria-disabled="true"] { opacity: var(--vf-opacity-disabled); pointer-events: none; }
.vf-ib[data-size="sm"] { width: var(--vf-ib-size-sm); height: var(--vf-ib-size-sm); }
/* Открыла меню или включена — горит, как при наведении: видно, чьё меню открыто */
.vf-ib[aria-expanded="true"], .vf-ib[aria-pressed="true"] { color: var(--vf-fg); border-color: var(--vf-line-3); background: var(--vf-hover-tint); }

/* ── Чип: моно-метка ── */
.vf-chip {
  display: inline-flex; align-items: center; gap: var(--vf-chip-gap); height: var(--vf-ctl-chip);
  padding: 0 var(--vf-chip-pad-x); border: 1px solid var(--vf-line-2); border-radius: var(--vf-r-mark);
  font: 500 var(--vf-fs-xs) / var(--vf-lh-xs) var(--vf-font-mono); letter-spacing: var(--vf-track-mono);
  color: var(--vf-fg-2); white-space: nowrap; background: var(--vf-scrim);
}
.vf-chip[data-tone="accent"] { border-color: var(--vf-accent-line); color: var(--vf-accent); }
.vf-chip[data-size="sm"] { height: var(--vf-ctl-chip-sm); }
.vf-chip-dot { width: var(--vf-dot-xs); height: var(--vf-dot-xs); border-radius: var(--vf-r-round); background: var(--c, var(--vf-fg-3)); }

/* ── Метка-плашка поверх кадра: номер, размер, OSD ── */
.vf-badge {
  display: inline-flex; align-items: center; padding: var(--vf-badge-pad-y) var(--vf-badge-pad-x); border-radius: var(--vf-r-mark);
  font: 600 var(--vf-fs-xs) / var(--vf-lh-xs) var(--vf-font-mono); letter-spacing: var(--vf-track-md);
  white-space: nowrap; background: var(--vf-scrim-badge); color: var(--vf-fg);
}
.vf-badge[data-variant="outline"] { border: 1px solid var(--vf-osd-line); letter-spacing: var(--vf-track-label); }
.vf-badge[data-tone="accent"] { background: var(--vf-accent-fill); color: var(--vf-on-accent); font-weight: 700; letter-spacing: var(--vf-track-mono); }
.vf-badge[data-at] { position: absolute; top: var(--vf-badge-inset); z-index: var(--vf-z-mark); }
.vf-badge[data-at="tl"] { left: var(--vf-badge-inset); }
.vf-badge[data-at="tr"] { right: var(--vf-badge-inset); }

/* ── Кадр: рамка с рисунком (canvas) и метками поверх ── */
.vf-shot {
  position: relative; overflow: hidden; aspect-ratio: var(--vf-ar-scope);
  border: 1px solid var(--vf-line); border-radius: var(--vf-r-mark); background: var(--vf-well);
}
.vf-shot[data-aspect="wide"] { aspect-ratio: var(--vf-ar-wide); }
.vf-shot[data-aspect="still"] { aspect-ratio: var(--vf-ar-still); }
.vf-shot[data-aspect="fill"] { aspect-ratio: auto; }
.vf-shot[data-selected] { border-color: var(--vf-accent); }
.vf-shot > canvas, .vf-shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── Фильм внутри кадра: заставка, видео поверх неё, тонировка и виньетка ── */
.vf-film { position: absolute; inset: 0; overflow: hidden; background: var(--vf-void); }
.vf-film-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--vf-film-filter); }
video.vf-film-media { opacity: 0; transition: opacity var(--vf-dur-film) var(--vf-ease-out); }
video.vf-film-media[data-playing] { opacity: 1; }
.vf-film-tint { position: absolute; inset: 0; background: var(--vf-film-tint); mix-blend-mode: multiply; pointer-events: none; }
.vf-film::after { content: ""; position: absolute; inset: 0; background: var(--vf-vignette-screen); pointer-events: none; }

/* ── Клавиши пульта со светодиодом ── */
.vf-keys {
  display: inline-flex; flex-wrap: wrap; gap: var(--vf-keys-gap); padding: var(--vf-keys-pad);
  border-radius: var(--vf-r-ctl); background: var(--vf-well); box-shadow: var(--vf-shadow-well);
}
.vf-key {
  display: inline-flex; align-items: center; gap: var(--vf-key-gap); height: var(--vf-ctl-key);
  padding: 0 var(--vf-key-pad-r) 0 var(--vf-key-pad-l); border-radius: var(--vf-r-ctl);
  background: var(--vf-key-face);
  color: var(--vf-fg-2); font: 500 var(--vf-fs-sm) / var(--vf-lh-sm) var(--vf-font-body); white-space: nowrap;
  box-shadow: var(--vf-shadow-key); transition: color var(--vf-dur-fast), background var(--vf-dur-fast);
}
.vf-key:hover:not(:disabled) { color: var(--vf-fg); }
.vf-key:disabled { opacity: var(--vf-opacity-disabled); cursor: not-allowed; }
.vf-key[aria-pressed="true"], .vf-key[data-selected] { color: var(--vf-fg); background: var(--vf-key-face-on); }
.vf-key[data-size="sm"] { height: var(--vf-ctl-key-sm); }
.vf-led {
  width: var(--vf-dot-xs); height: var(--vf-dot-xs); border-radius: var(--vf-r-round); background: var(--vf-led-off);
  box-shadow: var(--vf-shadow-led); transition: background var(--vf-dur-fast), box-shadow var(--vf-dur-fast);
}
.vf-key[aria-pressed="true"] .vf-led, .vf-key[data-selected] .vf-led { background: var(--vf-led-on); box-shadow: var(--vf-glow-accent); }

/* ── Панель ── */
.vf-pn {
  position: relative; border: 1px solid var(--vf-line); border-radius: var(--vf-r-panel);
  background: var(--vf-panel); box-shadow: var(--vf-shadow-panel);
}
/* Межстрочный — snug: в узком окне (телефон, окна блока «Почему») название переносится, капс в две строки не слипается */
.vf-pn-top {
  display: flex; align-items: center; gap: var(--vf-pn-top-gap); min-height: var(--vf-pn-top-h); padding: 0 var(--vf-pn-top-pad-x);
  border-bottom: 1px solid var(--vf-line); font: 500 var(--vf-fs-xs) / var(--vf-lh-xs-snug) var(--vf-font-mono);
  letter-spacing: var(--vf-track-label); color: var(--vf-fg-3); text-transform: uppercase;
}
.vf-pn-top[data-size="sm"] { min-height: var(--vf-pn-top-h-sm); }
.vf-pn-top b { color: var(--vf-fg); font-weight: 500; }
.vf-pn-dot {
  width: var(--vf-dot-sm); height: var(--vf-dot-sm); border-radius: var(--vf-r-round);
  background: var(--c, var(--vf-accent)); box-shadow: 0 0 var(--vf-glow-r-sm) var(--c, var(--vf-accent));
}
.vf-pn-aside { margin-left: auto; display: flex; gap: var(--vf-sp-xs); align-items: center; }
/* Клавиши в шапке панели — текстом интерфейса, не капсом подписи */
.vf-pn-top .vf-key { height: var(--vf-ctl-key-sm); font: 500 var(--vf-fs-sm) / var(--vf-lh-sm) var(--vf-font-body); letter-spacing: 0; text-transform: none; }
.vf-pn-body { padding: var(--vf-pn-body-pad); }
.vf-pn-body[data-size="lg"] { padding: var(--vf-pn-body-pad-lg); }

/* ── Подпись: моно-капс служебной строки ── */
.vf-cap {
  font: 500 var(--vf-fs-xs) / var(--vf-lh-xs-snug) var(--vf-font-mono);
  letter-spacing: var(--vf-track-label); color: var(--vf-fg-3); text-transform: uppercase;
}
.vf-cap[data-tone="accent"] { color: var(--vf-accent); }
/* Строка-подпись: слева название, справа значение (оно горит акцентом, если это <b>) */
.vf-cap[data-row] { display: flex; justify-content: space-between; align-items: baseline; gap: var(--vf-cap-gap); }
.vf-cap-aside { margin-left: auto; text-align: right; }
.vf-cap-aside b { color: var(--vf-accent); font-weight: 600; }

/* ── Раскрывающаяся строка ── */
.vf-disc-btn { display: block; width: 100%; text-align: left; color: inherit; }
.vf-disc-panel { overflow: hidden; }
.vf-disc-panel[data-closed] { height: 0; }
/* Знак «плюс-минус»: вертикальная черта убирается, когда строка раскрыта */
.vf-pm { position: relative; flex: none; width: var(--vf-pm); height: var(--vf-pm); }
.vf-pm::before, .vf-pm::after {
  content: ""; position: absolute; left: 0; top: calc((var(--vf-pm) - var(--vf-pm-bar)) / 2);
  width: var(--vf-pm); height: var(--vf-pm-bar); background: var(--vf-fg-2);
  transition: transform var(--vf-dur-base) var(--vf-ease-out);
}
.vf-pm::after { transform: rotate(90deg); }
[aria-expanded="true"] .vf-pm::after, .vf-pm[data-open]::after { transform: rotate(0); }

/* ── Поле ввода: подпись, колодец, подсказка, ошибка ── */
.vf-field { display: flex; flex-direction: column; min-width: 0; }
.vf-field-label {
  margin-bottom: var(--vf-field-gap); font: 500 var(--vf-fs-sm) / var(--vf-lh-sm-snug) var(--vf-font-mono);
  letter-spacing: var(--vf-track-lg); text-transform: uppercase; color: var(--vf-fg-2);
}
/* Подпись и метка шага в одну строку (форма в раскладке страниц доступа) */
.vf-field-head { display: flex; align-items: center; justify-content: space-between; gap: var(--vf-sp-sm); margin-bottom: var(--vf-field-gap); }
.vf-field-head > .vf-field-label { margin-bottom: 0; }
.vf-field-control { position: relative; display: flex; min-width: 0; }
.vf-field-control[data-reveal] > .vf-field-input { padding-right: calc(var(--vf-field-pad-x) + var(--vf-ib-size-sm) + var(--vf-sp-sm)); }
.vf-field-reveal { position: absolute; right: var(--vf-sp-sm); top: calc((var(--vf-field-h) - var(--vf-ib-size-sm)) / 2); }
.vf-field-input[data-vf-password]::-ms-reveal { display: none; }
.vf-field-input {
  width: 100%; height: var(--vf-field-h); padding: 0 var(--vf-field-pad-x); margin: 0;
  border: 1px solid var(--vf-line-ctl); border-radius: var(--vf-r-ctl); background: var(--vf-well);
  box-shadow: var(--vf-shadow-well); color: var(--vf-fg); caret-color: var(--vf-accent);
  font: 400 var(--vf-fs-body) / var(--vf-lh-body) var(--vf-font-body);
  transition: border-color var(--vf-dur-fast), box-shadow var(--vf-dur-fast);
}
.vf-field-input::placeholder { color: var(--vf-fg-3); opacity: 1; }
.vf-field-input:hover { border-color: var(--vf-fg-3); }
/* Фокус поля — рамкой-кольцом вплотную, а не общим контуром с отступом: так поле не «двоится» */
.vf-field-input:focus-visible { outline: none; border-color: var(--vf-focus); box-shadow: var(--vf-shadow-well), var(--vf-ring-focus); }
.vf-field-input[aria-invalid="true"] { border-color: var(--vf-danger); }
.vf-field-input[aria-invalid="true"]:focus-visible { box-shadow: var(--vf-shadow-well), var(--vf-ring-danger); }
.vf-field-input:read-only:not(:disabled) { border-style: dashed; box-shadow: none; }
.vf-field-input:-webkit-autofill { -webkit-text-fill-color: var(--vf-fg); box-shadow: var(--vf-fill-autofill); }
.vf-field-input:-webkit-autofill:focus-visible { box-shadow: var(--vf-fill-autofill), var(--vf-ring-focus); }
.vf-field[data-disabled] { opacity: var(--vf-opacity-disabled); }
.vf-field[data-disabled] .vf-field-input { cursor: not-allowed; }
.vf-field-hint, .vf-field-err { margin-top: var(--vf-field-gap); font: 400 var(--vf-fs-sm) / var(--vf-lh-sm-snug) var(--vf-font-body); color: var(--vf-fg-3); }
.vf-field-err { color: var(--vf-danger); }
.vf-field-err:empty { margin: 0; }

/* ── Код подтверждения: клетки по одной цифре, одежда поля ── */
.vf-code { display: flex; gap: var(--vf-code-gap); }
.vf-code-cell {
  flex: 0 1 var(--vf-code-cell-w); min-width: 0; height: var(--vf-code-cell-h); padding: 0; margin: 0; /* на узком клетки сужаются, а не вылезают из колонки */
  border: 1px solid var(--vf-line-ctl); border-radius: var(--vf-r-ctl); background: var(--vf-well);
  box-shadow: var(--vf-shadow-well); color: var(--vf-fg); caret-color: var(--vf-accent); text-align: center;
  font: 600 var(--vf-code-fs) / var(--vf-code-lh) var(--vf-font-mono); font-variant-numeric: tabular-nums;
  transition: border-color var(--vf-dur-fast), box-shadow var(--vf-dur-fast);
}
.vf-code-cell:hover { border-color: var(--vf-fg-3); }
.vf-code-cell:focus-visible { outline: none; border-color: var(--vf-focus); box-shadow: var(--vf-shadow-well), var(--vf-ring-focus); }
.vf-code-cell[aria-invalid="true"] { border-color: var(--vf-danger); }
.vf-code-cell[aria-invalid="true"]:focus-visible { box-shadow: var(--vf-shadow-well), var(--vf-ring-danger); }
.vf-code[data-disabled] { opacity: var(--vf-opacity-disabled); }
.vf-code[data-disabled] .vf-code-cell { cursor: not-allowed; }

/* ── Чекбокс: квадрат-колодец и подпись ── */
.vf-check { display: flex; align-items: flex-start; gap: var(--vf-check-gap); }
.vf-check-ctl { position: relative; flex: none; width: var(--vf-check-box); height: var(--vf-check-box); }
.vf-check-input {
  appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
  border: 1px solid var(--vf-line-ctl); border-radius: var(--vf-r-mark); background: var(--vf-well);
  transition: background var(--vf-dur-fast), border-color var(--vf-dur-fast), transform var(--vf-dur-press) var(--vf-ease-out);
}
.vf-check-input:hover { border-color: var(--vf-fg-3); }
.vf-check-input:active { transform: scale(.94); }
.vf-check-input:checked { background: var(--vf-accent-fill); border-color: var(--vf-accent-fill); }
.vf-check-mark {
  position: absolute; left: var(--vf-check-mark-in); top: var(--vf-check-mark-in); pointer-events: none;
  color: var(--vf-on-accent); opacity: 0; transform: scale(.8);
  transition: opacity var(--vf-dur-fast), transform var(--vf-dur-fast) var(--vf-ease-out);
}
.vf-check-input:checked + .vf-check-mark { opacity: 1; transform: none; }
.vf-check-step { margin: var(--vf-sp-3xs) 0 0 auto; }
.vf-check-label { min-width: 0; font: 400 var(--vf-fs-md) / var(--vf-lh-md-text) var(--vf-font-body); color: var(--vf-fg-2); cursor: pointer; }
.vf-check[data-disabled] { opacity: var(--vf-opacity-disabled); }
.vf-check[data-disabled] .vf-check-input, .vf-check[data-disabled] .vf-check-label { cursor: not-allowed; }

/* ── Сообщение: ошибка, успех или сведения ── */
.vf-alert {
  display: flex; align-items: flex-start; gap: var(--vf-alert-gap); padding: var(--vf-alert-pad-y) var(--vf-alert-pad-x);
  border: 1px solid var(--vf-line); border-left: var(--vf-alert-edge) solid var(--vf-fg-3); border-radius: var(--vf-r-ctl);
  background: var(--vf-scrim-badge); color: var(--vf-fg);
  font: 400 var(--vf-fs-md) / var(--vf-lh-md-text) var(--vf-font-body);
}
.vf-alert-i { margin-top: var(--vf-sp-3xs); color: var(--vf-fg-3); }
.vf-alert-t { min-width: 0; }
.vf-alert[data-tone="danger"] { border-color: var(--vf-danger-line); border-left-color: var(--vf-danger); background: var(--vf-danger-soft); }
.vf-alert[data-tone="danger"] .vf-alert-i { color: var(--vf-danger); }
.vf-alert[data-tone="ok"] { border-color: var(--vf-ok-line); border-left-color: var(--vf-ok); background: var(--vf-ok-soft); }
.vf-alert[data-tone="ok"] .vf-alert-i { color: var(--vf-ok); }
.vf-alert-h { display: block; font-weight: 600; }
/* Действия и «Скрыть» — справа; текст забирает остаток строки */
.vf-alert:has(> .vf-alert-act, > .vf-alert-x) > .vf-alert-t { flex: 1; }
.vf-alert-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vf-alert-act-gap); flex: none; }
.vf-alert-x { margin: calc(var(--vf-sp-2xs) * -1) calc(var(--vf-sp-sm) * -1) calc(var(--vf-sp-2xs) * -1) 0; }
/* Полоса на всю ширину под шапкой: без рамки и кромки, черта снизу, содержимое — по полю каркаса страницы */
.vf-alert[data-variant="strip"] {
  align-items: center; border-width: 0 0 1px; border-radius: 0;
  padding: var(--vf-alert-strip-pad-y) max(var(--vf-pad), calc((100% - var(--vf-max)) / 2 + var(--vf-pad)));
}
.vf-alert[data-variant="strip"] .vf-alert-i { margin-top: 0; }
@media (max-width: 760px) { /* bp-phone */
  /* Действия — строкой ниже, под текстом; крестик остаётся справа в первой строке */
  .vf-alert[data-variant="strip"] { flex-wrap: wrap; row-gap: var(--vf-sp-sm); }
  .vf-alert[data-variant="strip"] > .vf-alert-act { order: 1; flex: 1 0 100%; box-sizing: border-box; padding-left: calc(var(--vf-i-md) + var(--vf-alert-gap)); }
}

/* ── Текстовая ссылка ── */
.vf-link {
  color: var(--vf-accent); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: var(--vf-link-offset); text-decoration-color: var(--vf-link-line);
  transition: color var(--vf-dur-fast), text-decoration-color var(--vf-dur-fast);
}
/* Контраст 500-го на панели — 5:1, при наведении светлее (400-й) */
.vf-link:hover { color: var(--vf-accent-hi); text-decoration-color: currentColor; }

/* ── Индикатор ожидания ── */
@keyframes vf-spin { to { transform: rotate(360deg) } }
@keyframes vf-flicker { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
.vf-spin-wrap { display: inline-flex; align-items: center; gap: var(--vf-sp-md); }
.vf-spin {
  display: block; flex: none; width: var(--vf-spin); height: var(--vf-spin); box-sizing: border-box;
  border: var(--vf-spin-w) solid var(--vf-spin-track); border-top-color: currentColor; border-radius: var(--vf-r-round);
  animation: vf-spin var(--vf-loop-spin) linear infinite;
}
.vf-spin[data-size="sm"] { width: var(--vf-spin-sm); height: var(--vf-spin-sm); }

/* ── Заготовка загрузки: силуэт содержимого, дышит прозрачностью ── */
.vf-skel { display: block; animation: vf-flicker var(--vf-loop-skel) ease-in-out infinite; }
.vf-skel[data-variant="text"], .vf-skel-bar {
  display: block; height: var(--vf-skel-text-h); border-radius: var(--vf-r-mark); background: var(--vf-skel-fill);
}
.vf-skel[data-width="half"] { width: 50%; }
.vf-skel[data-width="third"], .vf-skel-bar[data-width="third"] { width: 33%; }
.vf-skel[data-variant="field"] { display: flex; flex-direction: column; gap: var(--vf-field-gap); }
/* Брусок подписи стоит в строке подписи поля (16): силуэт той же высоты, что VfField, — подмена не сдвигает страницу */
.vf-skel[data-variant="field"] .vf-skel-bar { margin-block: calc((var(--vf-lh-sm-snug) - var(--vf-skel-text-h)) / 2); }
.vf-skel-well, .vf-skel[data-variant="button"] { display: block; height: var(--vf-ctl-md); border-radius: var(--vf-r-ctl); background: var(--vf-skel-fill); }
.vf-skel[data-variant="button"] { width: var(--vf-skel-btn-w); }

/* ── Шапка гостевой страницы (VfTopBar) ── */
.vf-top { position: absolute; left: 0; right: 0; top: var(--vf-hud-top); z-index: var(--vf-z-header); }
.vf-top-in {
  position: relative; display: flex; align-items: center; gap: var(--vf-top-gap); height: var(--vf-top-h);
  max-width: var(--vf-max); margin: 0 auto; padding: 0 var(--vf-pad);
}
.vf-top-r { margin-left: auto; display: flex; align-items: center; gap: var(--vf-sp-md); }
.vf-top .vf-logo { font-size: var(--vf-top-logo-fs); line-height: var(--vf-top-logo-lh); }

/* ── Каркас блока ── */
.vf-wrap { position: relative; max-width: var(--vf-max); margin: 0 auto; padding: 0 var(--vf-pad); }
.vf-sec { position: relative; padding: var(--vf-sec-top) 0 var(--vf-sec-bottom); }
.vf-sec-head {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--vf-sec-head-gap); align-items: end; margin-bottom: var(--vf-sec-head-mb);
}
.vf-sec-head > .vf-lead { margin-top: 0; justify-self: end; }
.vf-h2 {
  font: 900 var(--vf-fs-h2) / var(--vf-lh-h2) var(--vf-font-display); letter-spacing: var(--vf-track-display);
  word-spacing: var(--vf-word-h2); text-transform: uppercase; color: var(--vf-fg); max-width: 16ch;
}
/* Узкая колонка: кегль — ступень по ширине колонки, у всех заголовков один; длинный переносится по словам */
.vf-h2[data-size="md"] { font-size: var(--vf-fs-h2-col); line-height: var(--vf-lh-h2-col); }
.vf-h2 em { font-style: normal; color: var(--vf-accent); }
.vf-h2-in { position: relative; display: inline-block; }
.vf-lead { margin-top: var(--vf-sp-3xl); max-width: 54ch; font-size: var(--vf-fs-lead); line-height: var(--vf-lh-lead); color: var(--vf-fg-2); }
.vf-lead strong { color: var(--vf-fg); font-weight: 500; }
@media (max-width: 1100px) { /* bp-laptop */
  .vf-sec-head { grid-template-columns: 1fr; }
  .vf-sec-head > .vf-lead { justify-self: start; }
}

/* Скобки AF: рамка из восьми штрихов вокруг цели */
.vf-afl {
  --l: var(--vf-accent);
  position: absolute; inset: var(--vf-afl-out-y) var(--vf-afl-out-x); pointer-events: none; opacity: 0;
  background:
    linear-gradient(var(--l), var(--l)) 0 0 / var(--vf-afl-arm) var(--vf-bw-strong), linear-gradient(var(--l), var(--l)) 0 0 / var(--vf-bw-strong) var(--vf-afl-arm),
    linear-gradient(var(--l), var(--l)) 100% 0 / var(--vf-afl-arm) var(--vf-bw-strong), linear-gradient(var(--l), var(--l)) 100% 0 / var(--vf-bw-strong) var(--vf-afl-arm),
    linear-gradient(var(--l), var(--l)) 0 100% / var(--vf-afl-arm) var(--vf-bw-strong), linear-gradient(var(--l), var(--l)) 0 100% / var(--vf-bw-strong) var(--vf-afl-arm),
    linear-gradient(var(--l), var(--l)) 100% 100% / var(--vf-afl-arm) var(--vf-bw-strong), linear-gradient(var(--l), var(--l)) 100% 100% / var(--vf-bw-strong) var(--vf-afl-arm);
  background-repeat: no-repeat;
}
/* Скобки, стоящие постоянно: цель в кадре уже поймана */
.vf-afl[data-on] { opacity: 1; }
/* Строки развёртки поверх экрана */
.vf-scan { position: absolute; inset: 0; pointer-events: none; background: var(--vf-scanlines); }

/* ── Логотип ── */
.vf-logo {
  display: flex; align-items: center; gap: var(--vf-logo-gap); text-decoration: none;
  font: 800 var(--vf-fs-xl) / var(--vf-lh-xl) var(--vf-font-display); letter-spacing: var(--vf-track-wide); color: var(--vf-fg); position: relative;
}
.vf-logo-mk {
  position: relative; width: var(--vf-logo-mk-w); height: var(--vf-logo-mk-h); flex: none;
  border: var(--vf-bw-strong) solid var(--vf-accent); border-radius: 1px;
}
.vf-logo-mk::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: var(--vf-logo-dot); height: var(--vf-logo-dot);
  margin: calc(var(--vf-logo-dot) / -2); border-radius: var(--vf-r-round); background: var(--vf-accent);
}
.vf-logo[data-size="lg"] { font-size: var(--vf-fs-logo-lg); line-height: var(--vf-lh-logo-lg); gap: var(--vf-logo-gap-lg); }
.vf-logo[data-size="lg"] .vf-logo-mk { width: var(--vf-logo-mk-w-lg); height: var(--vf-logo-mk-h-lg); }
@media (max-width: 760px) { /* bp-phone */
  /* Только знак: цель касания не меньше --vf-logo-hit, знак у левого края, как с надписью */
  .vf-logo[data-compact] { min-width: var(--vf-logo-hit); min-height: var(--vf-logo-hit); }
  .vf-logo[data-compact] .vf-logo-word { display: none; }
}

/* ── Метка шага (VfStepMark): номер поля на кольце фокуса ── */
.vf-step-mark {
  display: inline-grid; place-items: center; flex: none; width: var(--vf-lens-mark); height: var(--vf-lens-mark);
  border: 1px solid var(--vf-line-2); border-radius: var(--vf-r-mark);
  font: 600 var(--vf-fs-2xs) / var(--vf-lh-2xs) var(--vf-font-mono); color: var(--vf-fg-3);
  transition: background var(--vf-dur-fast), border-color var(--vf-dur-fast), color var(--vf-dur-fast);
}
.vf-step-mark[data-armed] { border-color: var(--vf-accent); color: var(--vf-accent); }
.vf-step-mark[data-done] { background: var(--vf-accent-fill); border-color: var(--vf-accent-fill); color: var(--vf-on-accent); }
/* Знак ∞ — из текстового шрифта: в моноширинном он мелкий */
.vf-inf { font: 600 var(--vf-fs-md) / 0 var(--vf-font-body); }

/* ── Фильм с управляемой резкостью (VfFocusFilm): малый холст — пятно, видео поверх — резкая цель ── */
.vf-ffilm { position: fixed; inset: 0; z-index: var(--vf-z-scene); overflow: hidden; background: var(--vf-void); }
.vf-ffilm-defs { position: absolute; width: 0; height: 0; }
.vf-ffilm-push { position: absolute; inset: 0; will-change: transform; }
.vf-ffilm-plate { position: absolute; left: 0; top: 0; }
.vf-ffilm-breathe { position: absolute; inset: 0; will-change: transform; }
.vf-ffilm-soft { position: absolute; display: block; }
.vf-ffilm-sharp { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--vf-film-filter); opacity: 0; will-change: opacity; }
.vf-ffilm-peak { position: absolute; display: block; opacity: 0; will-change: opacity; -webkit-mask-image: var(--vf-peak-mask); mask-image: var(--vf-peak-mask); }
.vf-ffilm-bokeh {
  position: absolute; width: calc(var(--vf-bokeh-d) * var(--vf-film-k, 1) * 1px); height: calc(var(--vf-bokeh-d) * var(--vf-film-k, 1) * 1px);
  translate: -50% -50%; border-radius: var(--vf-r-round); background: var(--vf-bokeh-fill); mix-blend-mode: screen; opacity: 0; will-change: transform, opacity;
}
.vf-ffilm-vig { position: absolute; inset: 0; background: var(--vf-vignette-screen); pointer-events: none; }
.vf-ffilm-veil { position: absolute; inset: 0; background: var(--vf-defocus-veil); pointer-events: none; }

/* ── Зона AF на цели (VfAfZone): уголки, метка и строка оптики; до первой расстановки скрыта ── */
.vf-afz { --l: var(--vf-afz-idle); position: fixed; inset: 0; z-index: var(--vf-z-scene); pointer-events: none; opacity: 0; }
.vf-afz[data-ready] { opacity: 1; }
.vf-afz[data-tone="focus"] { --l: var(--vf-fg); }
.vf-afz[data-tone="lock"] { --l: var(--vf-accent); }
.vf-afz[data-tone="fail"] { --l: var(--vf-danger); }
.vf-afz-c { position: absolute; left: 0; top: 0; width: var(--vf-afz-corner); height: var(--vf-afz-corner); will-change: transform; filter: drop-shadow(var(--vf-shadow-text)); }
.vf-afz-c b { position: absolute; inset: 0; border: 0 solid var(--l); transition: border-color var(--vf-dur-fast); }
.vf-afz-c[data-c="1"] b { border-top-width: var(--vf-bw-strong); border-left-width: var(--vf-bw-strong); transform-origin: 0 0; }
.vf-afz-c[data-c="2"] b { border-top-width: var(--vf-bw-strong); border-right-width: var(--vf-bw-strong); transform-origin: 100% 0; }
.vf-afz-c[data-c="3"] b { border-bottom-width: var(--vf-bw-strong); border-left-width: var(--vf-bw-strong); transform-origin: 0 100%; }
.vf-afz-c[data-c="4"] b { border-bottom-width: var(--vf-bw-strong); border-right-width: var(--vf-bw-strong); transform-origin: 100% 100%; }
.vf-afz-tag, .vf-afz-note {
  position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; text-shadow: var(--vf-shadow-text);
  font: 600 var(--vf-fs-xs) / var(--vf-lh-xs) var(--vf-font-mono); letter-spacing: var(--vf-track-wide); color: var(--l); transition: color var(--vf-dur-fast);
}
.vf-afz[data-tone="idle"] .vf-afz-tag { color: var(--vf-fg-2); }
.vf-afz-note { color: var(--vf-fg-3); font-weight: 500; }

/* ── Фокусное кольцо (VfLensRing): деления по 1/дистанции, барабан — проекция цилиндра ── */
.vf-lens {
  position: relative; display: flex; flex-direction: column; flex: none; width: var(--vf-lens-w); overflow: hidden;
  border: 1px solid var(--vf-line); border-radius: var(--vf-r-panel); background: var(--vf-lens-body); box-shadow: var(--vf-shadow-panel);
}
.vf-lens-top {
  display: flex; align-items: center; justify-content: space-between; height: var(--vf-pn-top-h); padding: 0 var(--vf-sp-lg) 0 var(--vf-sp-xl);
  border-bottom: 1px solid var(--vf-line); background: var(--vf-ink-8);
  font: 500 var(--vf-fs-xs) / var(--vf-lh-xs) var(--vf-font-mono); letter-spacing: var(--vf-track-label); color: var(--vf-fg-3);
}
.vf-lens-drum { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.vf-lens-drum::after { content: ""; position: absolute; inset: 0; background: var(--vf-lens-shade); pointer-events: none; }
.vf-lens-teeth {
  position: absolute; right: 0; top: calc(var(--vf-lens-pitch) * -2); bottom: calc(var(--vf-lens-pitch) * -2); width: var(--vf-lens-teeth-w);
  background: var(--vf-lens-teeth); border-left: 1px solid var(--vf-line); will-change: transform;
}
.vf-lens-dr {
  position: absolute; top: 50%; height: var(--vf-lh-sm); margin-top: calc(var(--vf-lh-sm) / -2); white-space: nowrap; will-change: transform, opacity;
  font: 500 var(--vf-fs-sm) / var(--vf-lh-sm) var(--vf-font-mono); font-variant-numeric: tabular-nums;
}
.vf-lens-dr-m {
  left: var(--vf-sp-xl); width: calc(var(--vf-lens-num-w) + var(--vf-lens-tick) + var(--vf-sp-2xs));
  padding-right: calc(var(--vf-lens-tick) + var(--vf-sp-2xs)); text-align: right; color: var(--vf-fg);
}
.vf-lens-dr-m[data-minor] { color: var(--vf-fg-2); font-size: var(--vf-fs-xs); }
.vf-lens-dr-m::after { content: ""; position: absolute; right: 0; top: 50%; width: var(--vf-lens-tick); height: 1px; background: var(--vf-fg-2); }
.vf-lens-dr-m[data-minor]::after { width: var(--vf-lens-tick-sm); }
.vf-lens-dr-m[data-inf] { font: 600 var(--vf-fs-lg) / var(--vf-lh-sm) var(--vf-font-body); }
.vf-lens-dr-f { left: var(--vf-lens-ft-x); color: var(--vf-fg-3); font-size: var(--vf-fs-2xs); font-weight: 400; }
.vf-lens-dr-f[data-inf] { font: 600 var(--vf-fs-sm) / var(--vf-lh-sm) var(--vf-font-body); }
.vf-lens-dr-t {
  left: calc(var(--vf-sp-xl) + var(--vf-lens-num-w) + var(--vf-sp-2xs) + var(--vf-lens-tick) - var(--vf-lens-tick-sm));
  width: var(--vf-lens-tick-sm); height: 1px; margin-top: 0; background: var(--vf-line-3);
}
/* Метка фокус-пуллера: шаг формы на гравировке */
.vf-lens-dr-k {
  left: var(--vf-sp-2xs); display: grid; place-items: center; width: var(--vf-lens-key-w); height: var(--vf-lens-mark); margin-top: calc(var(--vf-lens-mark) / -2);
  border-radius: var(--vf-r-mark); background: var(--vf-ink-11); color: var(--vf-fg-2);
  font: 700 var(--vf-fs-2xs) / var(--vf-lh-2xs) var(--vf-font-mono); transition: background var(--vf-dur-fast), color var(--vf-dur-fast), box-shadow var(--vf-dur-fast);
}
.vf-lens-dr-k[data-armed] { box-shadow: var(--vf-ring-focus); color: var(--vf-accent); }
.vf-lens-dr-k[data-done] { background: var(--vf-accent-fill); color: var(--vf-on-accent); }
/* Индекс: неподвижная риска на корпусе объектива; место по оси ставит LensRing.tsx */
.vf-lens-index { position: absolute; z-index: var(--vf-z-content); left: 0; right: var(--vf-lens-teeth-w); height: 1px; background: var(--vf-accent); box-shadow: var(--vf-lens-index-glow); }
.vf-lens-index::before {
  content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%;
  border-style: solid; border-width: var(--vf-lens-index-arrow) 0 var(--vf-lens-index-arrow) calc(var(--vf-lens-index-arrow) + var(--vf-sp-3xs));
  border-color: transparent transparent transparent var(--vf-accent);
}
/* Барабан лёжа — над формой на телефоне */
.vf-lens[data-axis="x"] { width: 100%; height: var(--vf-lens-h); flex-direction: row; background: var(--vf-lens-body-x); }
.vf-lens[data-axis="x"] .vf-lens-top { display: none; }
.vf-lens[data-axis="x"] .vf-lens-drum::after { background: var(--vf-lens-shade-x); }
.vf-lens[data-axis="x"] .vf-lens-teeth {
  top: auto; bottom: 0; left: calc(var(--vf-lens-pitch) * -2); right: calc(var(--vf-lens-pitch) * -2); width: auto; height: var(--vf-lens-teeth-w);
  background: var(--vf-lens-teeth-x); border-left: 0; border-top: 1px solid var(--vf-line);
}
.vf-lens[data-axis="x"] .vf-lens-dr { top: auto; left: 50%; margin-top: 0; text-align: center; translate: -50% 0; }
.vf-lens[data-axis="x"] .vf-lens-dr-m { top: var(--vf-lens-num-y); width: calc(var(--vf-lens-num-w) + var(--vf-sp-md)); padding: 0; }
.vf-lens[data-axis="x"] .vf-lens-dr-m::after { right: auto; left: 50%; top: calc(var(--vf-lens-tick) * -1); width: 1px; height: var(--vf-lens-tick); }
.vf-lens[data-axis="x"] .vf-lens-dr-m[data-minor]::after { top: calc(var(--vf-lens-tick-sm) * -1); height: var(--vf-lens-tick-sm); }
.vf-lens[data-axis="x"] .vf-lens-dr-f { top: var(--vf-lens-ft-y); width: var(--vf-lens-num-w); }
.vf-lens[data-axis="x"] .vf-lens-dr-t { top: var(--vf-lens-tick-y); width: 1px; height: var(--vf-lens-tick-sm); }
.vf-lens[data-axis="x"] .vf-lens-dr-k { top: var(--vf-sp-3xs); width: var(--vf-lens-mark); height: var(--vf-sp-sm); margin-top: 0; font-size: 0; }
.vf-lens[data-axis="x"] .vf-lens-index { top: 0; bottom: var(--vf-lens-teeth-w); right: auto; width: 1px; height: auto; }
.vf-lens[data-axis="x"] .vf-lens-index::before {
  left: 50%; top: 0; translate: -50% 0;
  border-width: calc(var(--vf-lens-index-arrow) + var(--vf-sp-3xs)) var(--vf-lens-index-arrow) 0 var(--vf-lens-index-arrow);
  border-color: var(--vf-accent) transparent transparent transparent;
}

/* ── Раскладка страниц доступа «Фокус» (VfAuthLayout): фильм на весь экран, слева панель с формой и кольцо ── */
@keyframes vf-auth-rise { from { opacity: 0; transform: translateY(var(--vf-auth-in-y)); } }
@keyframes vf-auth-slide { from { opacity: 0; transform: translateX(var(--vf-auth-in-x)); } }
@keyframes vf-auth-focus { from { filter: blur(var(--vf-auth-in-blur)); } }
.vf-auth-main {
  position: relative; z-index: var(--vf-z-content); display: flex; align-items: flex-start; min-height: 100svh;
  max-width: var(--vf-max); margin: 0 auto; padding: var(--vf-auth-pad-t) var(--vf-pad) var(--vf-auth-pad-b);
}
.vf-auth-rig { display: flex; align-items: stretch; gap: var(--vf-auth-rig-gap); }
/* Появление — на CSS: идёт с первой отрисовки, до загрузки скриптов, и не мигает */
.vf-auth-panel { width: var(--vf-auth-panel-w); background: var(--vf-auth-panel-bg); animation: vf-auth-rise var(--vf-dur-slow) var(--vf-ease-out) var(--vf-auth-in-delay) backwards; }
.vf-auth-panel .vf-h2 { animation: vf-auth-focus var(--vf-dur-film) var(--vf-ease-lens) var(--vf-auth-in-delay) backwards; }
.vf-auth-rig > .vf-lens { animation: vf-auth-slide var(--vf-dur-slow) var(--vf-ease-out) calc(var(--vf-auth-in-delay) * 2) backwards; }
.vf-auth-read { min-width: 6ch; text-align: right; font-variant-numeric: tabular-nums; }
.vf-auth-lead { margin-top: var(--vf-sp-lg); font-size: var(--vf-fs-md); line-height: var(--vf-lh-md-text); }
.vf-auth-body { margin-top: var(--vf-sp-3xl); }
.vf-auth-body:empty { display: none; }
.vf-auth-foot {
  display: flex; flex-direction: column; gap: var(--vf-sp-sm);
  margin-top: var(--vf-auth-foot-gap); padding-top: var(--vf-auth-foot-pad); border-top: 1px solid var(--vf-line);
  font: 400 var(--vf-fs-md) / var(--vf-lh-md-text) var(--vf-font-body); color: var(--vf-fg-2);
}
/* После входа: тёмный экран под рамкой видоискателя */
.vf-auth-exit { position: fixed; inset: 0; z-index: calc(var(--vf-z-frame) - 1); display: grid; place-items: center; background: var(--vf-void); opacity: 0; visibility: hidden; }
.vf-auth-exit-in { display: flex; flex-direction: column; align-items: center; gap: var(--vf-sp-lg); color: var(--vf-fg-2); }
.vf-auth-exit-t { font: 500 var(--vf-fs-md) / var(--vf-lh-md-text) var(--vf-font-body); color: var(--vf-fg); }
/* В переходе курсор и перекрестье не нужны: кнопок уже нет, по центру — текст */
.vf-auth[data-exit] .vf-af, .vf-auth[data-exit] .vf-frame-cross { visibility: hidden; }
@media (max-width: 760px) { /* bp-phone */
  .vf-auth-rig { flex-direction: column-reverse; width: 100%; gap: var(--vf-sp-xs); }
  .vf-auth-panel { width: 100%; }
  .vf-auth-content.vf-pn-body { padding: var(--vf-sp-xl); }
  .vf-ffilm-veil { background: var(--vf-defocus-veil-compact); }
}
@media (prefers-reduced-motion: reduce) {
  .vf-auth-panel, .vf-auth-panel .vf-h2, .vf-auth-rig > .vf-lens { animation: none; }
}

/* ── Ссылка раздела в шапке (VfNavLink) ── */
.vf-nav {
  position: relative; display: inline-flex; align-items: center; height: var(--vf-nav-h); padding: 0 var(--vf-nav-pad-x);
  border-radius: var(--vf-r-ctl); font: 500 var(--vf-fs-sm) / var(--vf-lh-sm) var(--vf-font-mono); letter-spacing: var(--vf-track-lg);
  text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--vf-fg-2); transition: color var(--vf-dur-fast);
}
.vf-nav::after {
  content: ""; position: absolute; left: var(--vf-nav-pad-x); right: var(--vf-nav-pad-x); bottom: 0; height: var(--vf-nav-rail);
  background: var(--vf-line-3); opacity: 0; transition: opacity var(--vf-dur-fast), background var(--vf-dur-fast);
}
.vf-nav:hover { color: var(--vf-fg); }
.vf-nav:hover::after { opacity: 1; }
.vf-nav[aria-current="page"] { color: var(--vf-fg); }
.vf-nav[aria-current="page"]::after { opacity: 1; background: var(--vf-accent); }

/* ── Аватар (VfAvatar): буквы на тоне от почты или фото ── */
.vf-avatar {
  display: inline-grid; place-items: center; flex: none; overflow: hidden; width: var(--vf-avatar-md); height: var(--vf-avatar-md);
  border-radius: var(--vf-r-round); background: var(--vf-tone-muted); color: var(--vf-avatar-fg);
  font: 700 var(--vf-fs-sm) / var(--vf-lh-sm) var(--vf-font-body); user-select: none;
}
.vf-avatar[data-size="sm"] { width: var(--vf-avatar-sm); height: var(--vf-avatar-sm); font-size: var(--vf-fs-xs); line-height: var(--vf-lh-xs); }
.vf-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.vf-avatar[data-tone="cyan"] { background: var(--vf-tone-cyan); }
.vf-avatar[data-tone="amber"] { background: var(--vf-tone-amber); }
.vf-avatar[data-tone="violet"] { background: var(--vf-tone-violet); }
.vf-avatar[data-tone="green"] { background: var(--vf-tone-green); }
.vf-avatar[data-tone="pink"] { background: var(--vf-tone-pink); }

/* ── Счётчик и кольцо хода на кнопке-значке (VfCounterAnchor, VfCounter, VfProgressRing) ── */
.vf-counter-anchor { position: relative; display: inline-flex; flex: none; }
.vf-counter {
  position: absolute; top: var(--vf-counter-inset); right: var(--vf-counter-inset); z-index: var(--vf-z-content);
  display: inline-grid; place-items: center; box-sizing: border-box; min-width: var(--vf-counter-h); height: var(--vf-counter-h);
  padding: 0 var(--vf-counter-pad-x); border-radius: var(--vf-counter-h); background: var(--vf-accent-fill); color: var(--vf-on-accent);
  box-shadow: var(--vf-counter-cut); font: 700 var(--vf-fs-xs) / var(--vf-lh-xs) var(--vf-font-mono); font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.vf-counter[data-dot] {
  top: var(--vf-counter-dot-inset); right: var(--vf-counter-dot-inset); min-width: 0;
  width: var(--vf-counter-dot); height: var(--vf-counter-dot); padding: 0; border-radius: var(--vf-r-round);
}
/* В строке после подписи (пункт меню), а не на углу кнопки: без смещения и без выреза. */
.vf-counter[data-inline] { position: static; box-shadow: none; }
/* Доля хода — зарегистрированное число: переход между долями плавный, а не скачком */
@property --vf-ring-p { syntax: "<number>"; inherits: false; initial-value: 0; }
.vf-ring {
  --c: var(--vf-accent);
  position: absolute; left: 50%; top: 50%; width: var(--vf-ring); height: var(--vf-ring); translate: -50% -50%;
  border-radius: var(--vf-r-round); pointer-events: none;
  background: conic-gradient(var(--c) calc(var(--vf-ring-p) * 1turn), var(--vf-ring-track) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--vf-ring-w) - 1px), var(--vf-mask-on) calc(100% - var(--vf-ring-w)));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--vf-ring-w) - 1px), var(--vf-mask-on) calc(100% - var(--vf-ring-w)));
  transition: --vf-ring-p var(--vf-dur-base) var(--vf-ease-out);
}
.vf-ring[data-tone="ok"] { --c: var(--vf-ok); }
.vf-ring[data-indeterminate] { --vf-ring-p: var(--vf-ring-arc); animation: vf-spin var(--vf-loop-ring) linear infinite; }

/* ── Одометр (VfOdometer): образец строки держит ширину, поверх — барабаны разрядов ── */
@keyframes vf-odo-in { from { opacity: 0; transform: translateY(var(--vf-odo-rise)); } }
@keyframes vf-odo-out { to { opacity: 0; transform: translateY(calc(var(--vf-odo-rise) * -1)); } }
.vf-odo { position: relative; display: inline-block; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vf-odo-sizer { opacity: 0; }
.vf-odo-reels { position: absolute; inset: 0; display: flex; justify-content: flex-end; pointer-events: none; }
.vf-odo-win { display: block; height: 1lh; overflow: hidden; }
.vf-odo-reel { display: flex; flex-direction: column; transition: transform var(--vf-odo-roll) var(--vf-ease-out); }
.vf-odo[data-still] .vf-odo-reel { transition: none; }
.vf-odo-reel > span { height: 1lh; }
.vf-odo-reel > span::before { content: attr(data-digit); }
.vf-odo-glyph { white-space: pre; }
.vf-odo-glyph::before { content: attr(data-char); }
.vf-odo-delta {
  position: absolute; right: 0; bottom: calc(100% + var(--vf-odo-gap)); white-space: nowrap; pointer-events: none;
  font: 600 var(--vf-fs-xs) / var(--vf-lh-xs) var(--vf-font-mono); letter-spacing: var(--vf-track-xs); color: var(--vf-fg-2);
  animation: vf-odo-in var(--vf-dur-fast) var(--vf-ease-out) both;
}
.vf-odo-delta[data-tone="credit"] { color: var(--vf-ok); }
.vf-odo-delta[data-leaving] { animation: vf-odo-out var(--vf-dur-base) var(--vf-ease-out) both; }
.vf-odo-delta::before { content: attr(data-text); }

/* ── Всплывающий слой (VfMenu, VfTooltip) ── */
/* Плита в портале вне корня экрана — сама область .vf; раскладку корня с неё снимаем.
   react-aria пишет в style z-index 100000 — место плиты задаёт лестница слоёв: курсор AF над ней. */
.vf.vf-layer { min-height: 0; overflow: visible; z-index: var(--vf-z-pop) !important; }
@keyframes vf-pop-in { from { opacity: 0; scale: var(--vf-pop-scale); } }
@keyframes vf-pop-out { to { opacity: 0; scale: var(--vf-pop-scale); } }
.vf-layer[data-entering] { animation: vf-pop-in var(--vf-pop-in) var(--vf-ease-out); }
.vf-layer[data-exiting] { animation: vf-pop-out var(--vf-pop-out) var(--vf-ease-out); }

/* Меню: растёт из точки якоря (react-aria пишет её в --trigger-anchor-point) */
.vf-menu {
  display: flex; flex-direction: column; width: var(--vf-menu-w); max-width: calc(100vw - var(--vf-pad) * 2);
  border: 1px solid var(--vf-line-2); border-radius: var(--vf-r-panel); background: var(--vf-popover); box-shadow: var(--vf-shadow-pop);
  transform-origin: var(--trigger-anchor-point); outline: none;
}
.vf-menu-head { padding: var(--vf-menu-head-pad); border-bottom: 1px solid var(--vf-line); }
.vf-menu-head[data-alone] { border-bottom: 0; }
.vf-menu-list { min-height: 0; overflow-y: auto; padding: var(--vf-menu-pad); outline: none; }
.vf-menu-item {
  display: flex; align-items: center; gap: var(--vf-menu-row-gap); min-height: var(--vf-menu-row-h); padding: 0 var(--vf-menu-row-pad-x);
  border-radius: var(--vf-r-ctl); color: var(--vf-fg-2); font: 400 var(--vf-fs-md) / var(--vf-lh-md-snug) var(--vf-font-body);
  cursor: pointer; outline: none; transition: background var(--vf-dur-fast), color var(--vf-dur-fast);
}
.vf-menu-item:has(.vf-menu-desc) { align-items: flex-start; padding-block: var(--vf-menu-row-pad-y); }
.vf-menu-item[data-focused], .vf-menu-item[data-selected] { color: var(--vf-fg); }
.vf-menu-item[data-focused] { background: var(--vf-menu-hover); }
/* Кольцо фокуса — внутрь строки: снаружи его срезал бы край плиты */
.vf-menu-item[data-focus-visible], .vf .vf-menu-item:focus-visible { outline: var(--vf-focus-w) solid var(--vf-focus); outline-offset: calc(var(--vf-focus-w) * -1); }
.vf-menu-item[data-disabled] { opacity: var(--vf-opacity-disabled); cursor: not-allowed; }
.vf-menu-ic { display: inline-flex; flex: none; color: var(--vf-fg-3); transition: color var(--vf-dur-fast); }
.vf-menu-item[data-focused] .vf-menu-ic, .vf-menu-item[data-selected] .vf-menu-ic { color: var(--vf-fg-2); }
.vf-menu-item:has(.vf-menu-desc) .vf-menu-ic { margin-top: calc((var(--vf-lh-md-snug) - var(--vf-i-md)) / 2); }
.vf-menu-txt { display: flex; flex-direction: column; gap: var(--vf-sp-3xs); flex: 1; min-width: 0; }
.vf-menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-menu-desc { font-size: var(--vf-fs-sm); line-height: var(--vf-lh-sm-snug); color: var(--vf-fg-3); }
.vf-menu-badge, .vf-menu-tick { display: inline-flex; flex: none; align-self: center; }
.vf-menu-tick { width: var(--vf-i-md); color: var(--vf-accent); }
.vf-menu-rule { display: block; height: 1px; margin: var(--vf-menu-pad) calc(var(--vf-menu-pad) * -1); border: 0; background: var(--vf-line); }
.vf-menu-sec-h {
  display: block; padding: var(--vf-menu-sec-pad-t) var(--vf-menu-row-pad-x) var(--vf-sp-2xs);
  font: 500 var(--vf-fs-xs) / var(--vf-lh-xs) var(--vf-font-mono); letter-spacing: var(--vf-track-label); text-transform: uppercase; color: var(--vf-fg-3);
}

/* Подсказка: растёт от триггера */
.vf-tip {
  max-width: var(--vf-tip-max-w); padding: var(--vf-tip-pad-y) var(--vf-tip-pad-x); pointer-events: none;
  border: 1px solid var(--vf-line-2); border-radius: var(--vf-r-ctl); background: var(--vf-popover); box-shadow: var(--vf-shadow-pop);
  font: 500 var(--vf-fs-sm) / var(--vf-lh-sm-snug) var(--vf-font-body); color: var(--vf-fg);
}
.vf-tip[data-placement="bottom"] { transform-origin: 50% 0; }
.vf-tip[data-placement="top"] { transform-origin: 50% 100%; }
.vf-tip[data-placement="left"] { transform-origin: 100% 50%; }
.vf-tip[data-placement="right"] { transform-origin: 0 50%; }

@media (prefers-reduced-motion: reduce) {
  .vf-layer[data-entering], .vf-layer[data-exiting], .vf-odo-delta, .vf-odo-delta[data-leaving] { animation: none; }
  .vf-odo-reel, .vf-ring { transition: none; }
  .vf-ring[data-indeterminate] { animation: vf-flicker var(--vf-loop-rec) ease-in-out infinite; }
}

/* ── Качество · общее (effort-core.tsx): корень-ползунок, цена ступени, показания барабаном ──
   Корень варианта несёт `.vf-tokens .vf-ef` и сам задаёт шрифт, цвет и кольцо фокуса:
   контрол стоит и в экранах старой ДС, где предка `.vf` нет. Своих токенов у ядра нет — только общие. */
.vf-ef {
  position: relative; color: var(--vf-fg); font-family: var(--vf-font-body); -webkit-font-smoothing: antialiased;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.vf-ef:focus { outline: none; }
.vf-ef:focus-visible { outline: var(--vf-focus-w) solid var(--vf-focus); outline-offset: var(--vf-focus-offset); }
.vf-ef[data-disabled] { opacity: var(--vf-opacity-disabled); cursor: not-allowed; }
/* Поле барабана — сверху и снизу --vf-sp-md, по бокам --vf-sp-xl, съедено отрицательным отступом: края растворяются маской,
   въезд и размытие показания гаснут мягко, без обреза (хореографию ведёт effort-core.tsx) */
.vf-ef-roll-box {
  position: relative; display: flex; align-items: center; box-sizing: content-box;
  margin: calc(var(--vf-sp-md) * -1) calc(var(--vf-sp-xl) * -1); padding: var(--vf-sp-md) var(--vf-sp-xl);
  -webkit-mask-image: linear-gradient(transparent, var(--vf-mask-on) var(--vf-sp-md), var(--vf-mask-on) calc(100% - var(--vf-sp-md)), transparent);
  mask-image: linear-gradient(transparent, var(--vf-mask-on) var(--vf-sp-md), var(--vf-mask-on) calc(100% - var(--vf-sp-md)), transparent);
}
.vf-ef-roll { position: relative; display: inline-block; white-space: nowrap; }
.vf-ef-roll[data-out] { position: absolute; top: var(--vf-sp-md); }
.vf-ef-roll[data-out="left"] { left: var(--vf-sp-xl); }
.vf-ef-roll[data-out="right"] { right: var(--vf-sp-xl); }
.vf-ef-price { display: inline-flex; align-items: center; gap: var(--vf-sp-xs); flex: none; }
.vf-ef-num { font-family: var(--vf-font-mono); font-variant-numeric: tabular-nums; text-align: right; }
/* Без типа цена — словами («5 токенов»): текст, а не цифра, — шрифтом строки */
.vf-ef-price:not([data-kind]) .vf-ef-num { font-family: inherit; }
/* Цифра — в цвете иконки своего типа. Роли старой ДС `--token-*`, а не vf: тип токенов
   один на весь продукт, золото здесь не должно расходиться с золотом Писателя (как шапка главной). */
.vf-ef-price[data-kind="creative"] .vf-ef-num { color: var(--token-creative); }
.vf-ef-price[data-kind="production"] .vf-ef-num { color: var(--token-production); }
.vf-ef-price[data-kind="team"] .vf-ef-num { color: var(--token-team); }
/* Иконка типа — по кеглю цифры */
.vf-ef-tk { width: var(--vf-i-md); height: var(--vf-i-md); }
/* Недоступно — как у цены продукта: цифра без цвета типа, иконка без краски */
.vf-ef[data-disabled] .vf-ef-num { color: var(--vf-fg-2); }
.vf-ef[data-disabled] .vf-ef-tk { filter: grayscale(1); }

/* ── Качество · диафрагма (VfEffortIris): линза на холстах, имя и цена, шкала f/ ──
   Рамка обрезает всё, что рисует вспышка «Максимума»: лучи не ложатся на текст вокруг. Интерфейс — на общих
   токенах; линза, скобки AF и свет «Максимума» (свечение колодца, имени, цены, подписи f/) — иллюстрация:
   краски прямо из примитивов, меры числом. Размеры этого контрола записаны на месте намеренно (решение владельца 22.10.2026: своих токенов у «Качества» нет). */
.vf-iris {
  display: flex; align-items: center; gap: var(--vf-sp-lg); width: 100%; padding: var(--vf-sp-md);
  overflow: hidden; isolation: isolate;
  border: 1px solid var(--vf-line); border-radius: var(--vf-r-panel); background: var(--vf-embed-bg); box-shadow: var(--vf-shadow-well);
  transition: border-color var(--vf-dur-mid), box-shadow var(--vf-dur-film) var(--vf-ease-out);
}
/* «Максимум»: колодец светится кармином — свет рисунка */
.vf-iris[data-ceiling] {
  border-color: var(--vf-accent-line);
  box-shadow: var(--vf-shadow-well), 0 0 0 1px color-mix(in srgb, var(--vf-crimson-500) 20%, transparent),
    0 0 32px -6px color-mix(in srgb, var(--vf-crimson-500) 45%, transparent);
}
.vf-iris-back { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
/* Оправа линзы — рисунок: хайрлайн и тень на колодец */
.vf-iris-lens {
  position: relative; z-index: 1; flex: none; width: 64px; height: 64px;
  border-radius: var(--vf-r-round); box-shadow: 0 0 0 1px var(--vf-line), 0 4px 12px var(--vf-black-a75); cursor: grab;
}
.vf-iris-lens-cv { position: absolute; left: 0; top: 0; border-radius: var(--vf-r-round); }
.vf-iris-flare { position: absolute; left: 50%; top: 50%; z-index: 2; pointer-events: none; translate: -50% -50%; }
/* Скобки AF у линзы — рисунок: выступают за линзу, в покое тише рамки, на «Максимуме» кармином */
.vf-iris-af {
  position: absolute; z-index: 3; width: var(--vf-sp-sm); height: var(--vf-sp-sm); border: 0 solid var(--vf-fog-a25);
  pointer-events: none; transition: border-color var(--vf-dur-mid), filter var(--vf-dur-mid);
}
.vf-iris-af[data-c="tl"] { left: calc(var(--vf-sp-xs) * -1); top: calc(var(--vf-sp-xs) * -1); border-left-width: var(--vf-bw-strong); border-top-width: var(--vf-bw-strong); }
.vf-iris-af[data-c="tr"] { right: calc(var(--vf-sp-xs) * -1); top: calc(var(--vf-sp-xs) * -1); border-right-width: var(--vf-bw-strong); border-top-width: var(--vf-bw-strong); }
.vf-iris-af[data-c="bl"] { left: calc(var(--vf-sp-xs) * -1); bottom: calc(var(--vf-sp-xs) * -1); border-left-width: var(--vf-bw-strong); border-bottom-width: var(--vf-bw-strong); }
.vf-iris-af[data-c="br"] { right: calc(var(--vf-sp-xs) * -1); bottom: calc(var(--vf-sp-xs) * -1); border-right-width: var(--vf-bw-strong); border-bottom-width: var(--vf-bw-strong); }
.vf-iris[data-ceiling] .vf-iris-af { border-color: var(--vf-crimson-500); filter: drop-shadow(0 0 4px var(--vf-crimson-500)); }
.vf-iris[data-drag], .vf-iris[data-drag] .vf-iris-lens, .vf-iris[data-drag] .vf-iris-track { cursor: grabbing; }
.vf-iris[data-static] .vf-iris-lens, .vf-iris[data-static] .vf-iris-track { cursor: default; }
.vf-iris[data-disabled] .vf-iris-lens, .vf-iris[data-disabled] .vf-iris-track { cursor: not-allowed; }
.vf-iris-col { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
/* Строка имени и цены: межстрочный кегля lg — она же высота строки (линза 64 = строка 24 + зазор 4 + шкала 36) */
.vf-iris-row { display: flex; align-items: center; justify-content: space-between; gap: var(--vf-sp-sm); height: var(--vf-lh-lg-body); }
.vf-iris .vf-ef-roll-box { height: var(--vf-lh-lg-body); font-size: var(--vf-fs-lg); font-weight: 600; line-height: var(--vf-lh-lg-body); }
.vf-iris-name { flex: 1; min-width: 0; color: var(--vf-fg); }
.vf-iris-name .vf-ef-roll:not([data-out]) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.vf-iris-name .vf-ef-roll { transition: color var(--vf-dur-mid), text-shadow var(--vf-dur-mid); }
.vf-iris[data-top] .vf-iris-name .vf-ef-roll { color: var(--vf-accent-hi); text-shadow: 0 0 14px color-mix(in srgb, var(--vf-crimson-500) 55%, transparent); }
.vf-iris .vf-ef-num .vf-ef-roll { transition: text-shadow var(--vf-dur-mid); }
/* Цифра цены «Максимума» светится своим цветом — цветом типа токенов */
.vf-iris[data-top] .vf-ef-num .vf-ef-roll { text-shadow: 0 0 12px color-mix(in srgb, currentColor 55%, transparent); }
/* Шкала: холст рисок (запас под свечение указателя ставит effort-iris.ts), подписи f/ по низу; крайние ступени — на --vf-sp-xl от края */
.vf-iris-track { position: relative; height: 36px; margin-top: var(--vf-sp-2xs); cursor: pointer; }
.vf-iris-track-cv { position: absolute; pointer-events: none; }
/* Подпись f/ — текст 11px, ей нужно 4.5:1: --vf-fg-3 на колодце поверх тёмной плоскости сервиса давал 4.35 */
.vf-iris-lbl {
  position: absolute; bottom: 0; translate: -50% 0; white-space: nowrap;
  font: 500 var(--vf-fs-xs) / var(--vf-lh-xs) var(--vf-font-mono); letter-spacing: var(--vf-track-xs); color: var(--vf-fg-2);
  transition: color var(--vf-dur-fast), text-shadow var(--vf-dur-fast);
}
.vf-iris-track:hover .vf-iris-lbl { color: var(--vf-fg-soft); }
.vf-iris .vf-iris-lbl[data-on] { color: var(--vf-fg); }
.vf-iris[data-top] .vf-iris-lbl[data-on] { color: var(--vf-accent-hi); text-shadow: 0 0 8px color-mix(in srgb, var(--vf-crimson-500) 60%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .vf-iris, .vf-iris-af, .vf-iris-lbl, .vf-iris-name .vf-ef-roll, .vf-iris .vf-ef-num .vf-ef-roll { transition: none; }
}

/* ── Качество · кольцо фокуса (VfEffortFocus): строка «КАЧЕСТВО ●●○», барабан под риской, имя и цена ──
   Ползунок — барабан, а не корень. Интерфейс — на общих токенах; рисунок барабана (риски, риска-индекс,
   зубья, штриховка, жар, вспышка, светодиоды, гравировка) — иллюстрация: краски прямо из примитивов,
   геометрия и хореография — константы effort-focus.ts. Вспышка «Максимума» — холст во всю плоскость
   контрола: за его рамку она не выходит и на текст вокруг не ложится. Размеры этого контрола записаны на месте намеренно (решение владельца 22.10.2026: своих токенов у «Качества» нет). */
.vf-fx { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vf-sp-sm); width: 100%; }
.vf-fx-head { display: flex; align-items: center; justify-content: space-between; gap: var(--vf-sp-md); height: 24px; }
.vf-fx-cap { font: 500 var(--vf-fs-xs) / var(--vf-lh-xs) var(--vf-font-mono); letter-spacing: var(--vf-track-label); text-transform: uppercase; color: var(--vf-fg-3); }
.vf-fx-leds { display: flex; gap: var(--vf-sp-2xs); }
.vf-fx-led {
  width: var(--vf-dot-xs); height: var(--vf-dot-xs); border-radius: var(--vf-r-round); background: var(--vf-led-off); box-shadow: var(--vf-shadow-led);
  transition: background var(--vf-dur-fast), box-shadow var(--vf-dur-mid);
}
.vf-fx-led[data-on] { background: var(--vf-led-on); box-shadow: var(--vf-glow-accent); }
.vf-fx[data-top] .vf-fx-led[data-top][data-on] {
  background: var(--vf-crimson-300); box-shadow: 0 0 var(--vf-glow-r-sm) var(--vf-crimson-400), 0 0 var(--vf-glow-r-lg) var(--vf-crimson-600);
}

.vf-fx-barrel {
  position: relative; height: var(--vf-ctl-md); overflow: hidden; cursor: grab;
  border: 1px solid var(--vf-line); border-radius: var(--vf-r-ctl); background: var(--vf-embed-bg); box-shadow: var(--vf-shadow-well), inset 0 0 0 1px var(--vf-black-a60);
  transition: border-color var(--vf-dur-fast);
}
.vf-fx-barrel:hover { border-color: var(--vf-line-2); }
.vf-fx-barrel:focus { outline: none; }
.vf-fx-barrel:focus-visible { outline: var(--vf-focus-w) solid var(--vf-focus); outline-offset: var(--vf-focus-offset); }
.vf-fx[data-drag] .vf-fx-barrel { cursor: grabbing; border-color: var(--vf-line-3); }
.vf-fx[data-static] .vf-fx-barrel { cursor: default; border-color: var(--vf-line); }
.vf-fx[data-disabled] .vf-fx-barrel { cursor: not-allowed; }
/* Холст барабана: риски, упоры, зубья и риска-индекс */
.vf-fx-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Жар у риски: растёт к упору «Максимума» и под пальцем; прозрачность ведёт effort-focus.ts */
.vf-fx-bloom {
  position: absolute; left: 50%; top: 0; width: 70%; height: 140%; translate: -50% -14%; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--vf-crimson-500) 55%, transparent), color-mix(in srgb, var(--vf-crimson-700) 18%, transparent) 55%, transparent);
}
.vf-fx-labels { position: absolute; inset: 0; pointer-events: none; }
/* Гравировка: место по дуге, высоту строки и сжатие к краям цилиндра ставит effort-focus.ts (transform, opacity) */
.vf-fx-lb {
  position: absolute; left: 50%; top: 0; translate: -50% 0; white-space: nowrap;
  font: 500 var(--vf-fs-xs) / var(--vf-lh-xs) var(--vf-font-mono); letter-spacing: var(--vf-track-md); text-transform: uppercase;
  color: var(--vf-fg-2); will-change: transform, opacity; transition: color var(--vf-dur-fast);
}
.vf-fx-lb[data-on] { color: var(--vf-fg); font-weight: 600; }
.vf-fx-lb[data-top] { color: color-mix(in srgb, var(--vf-crimson-400) 70%, var(--vf-fg-2)); }
.vf-fx-lb[data-top][data-on] { color: var(--vf-crimson-200); text-shadow: 0 0 var(--vf-glow-r-sm) var(--vf-accent); }
/* Стекло цилиндра: неподвижный блик (свет стоит, кольцо крутится) и тень к краям */
.vf-fx-glass {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 22%, var(--vf-white-a04) 38%, var(--vf-white-a07) 44%, transparent 60%), var(--vf-lens-shade-x);
}
/* Щелчок ступени: вспышка у риски */
.vf-fx-flash {
  position: absolute; left: 50%; top: 0; bottom: 0; width: var(--vf-sp-4xl); translate: -50% 0; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--vf-crimson-400) 35%, transparent), transparent);
}

.vf-fx-read {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--vf-sp-lg);
  height: 24px; padding: 0 var(--vf-sp-2xs);
}
/* Имя: резкое только на ступени — размытие и прозрачность на ходу ставит effort-focus.ts. Длинное — многоточием;
   поле вокруг (съеденное отрицательным отступом) оставляет место свечению «Максимума», обрез его не режет */
.vf-fx-name {
  display: inline-block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: var(--vf-sp-xl); margin: calc(var(--vf-sp-xl) * -1);
  font: 600 var(--vf-fs-lg) / 24px var(--vf-font-display); letter-spacing: var(--vf-track-title); color: var(--vf-fg);
  will-change: filter, opacity; transition: color var(--vf-dur-mid), text-shadow var(--vf-dur-mid);
}
/* свечение имени «Максимума» — иллюстрация, как у диафрагмы */
.vf-fx[data-top] .vf-fx-name { color: var(--vf-accent-hi); text-shadow: 0 0 18px color-mix(in srgb, var(--vf-crimson-500) 70%, transparent); }
.vf-fx .vf-ef-roll-box { height: 24px; font-size: var(--vf-fs-lg); font-weight: 600; line-height: 24px; }
.vf-fx .vf-ef-num .vf-ef-roll { transition: text-shadow var(--vf-dur-mid); }
.vf-fx[data-top] .vf-ef-num .vf-ef-roll { text-shadow: var(--vf-glow-figure); }
/* Уголки автофокуса: защёлкиваются вокруг показаний, когда барабан встал (прозрачность и масштаб ведёт effort-focus.ts).
   По бокам — вровень с рамкой контрола, сжимаются к нижнему краю: за низ контрола не вылетают */
.vf-fx-af { position: absolute; inset: calc(var(--vf-sp-3xs) * -1) 0; opacity: 0; pointer-events: none; transform-origin: 50% 100%; }
.vf-fx-af i { position: absolute; width: var(--vf-sp-sm); height: var(--vf-sp-sm); border: 0 solid var(--vf-fg-3); }
.vf-fx-af i:nth-child(1) { left: 0; top: 0; border-width: 1px 0 0 1px; }
.vf-fx-af i:nth-child(2) { right: 0; top: 0; border-width: 1px 1px 0 0; }
.vf-fx-af i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1px 1px; }
.vf-fx-af i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.vf-fx[data-top] .vf-fx-af i { border-color: var(--vf-accent); }
.vf-fx-burst {
  position: absolute; left: 0; top: 0; z-index: var(--vf-z-content); pointer-events: none; mix-blend-mode: screen;
  /* гаснет к краям контрола, а не режется рамкой */
  mask-image:
    linear-gradient(90deg, transparent, var(--vf-mask-on) var(--vf-sp-3xl), var(--vf-mask-on) calc(100% - var(--vf-sp-3xl)), transparent),
    linear-gradient(transparent, var(--vf-mask-on) var(--vf-sp-xl), var(--vf-mask-on) calc(100% - var(--vf-sp-xl)), transparent);
  mask-composite: intersect;
}
@media (prefers-reduced-motion: reduce) {
  .vf-fx-led, .vf-fx-lb, .vf-fx-name, .vf-fx .vf-ef-num .vf-ef-roll { transition: none; }
  .vf-fx-lb, .vf-fx-name { will-change: auto; }
}

/* ── Качество · экспонометр (VfEffortMeter): строка подписи с сегментами, окно прибора, показания ──
   Окно обрезает всё, что рисует «Максимум»: пересвет и зебра не ложатся на текст вокруг.
   Ползунок — окно с показаниями. Интерфейс — на общих токенах; прибор (циферблат, дуга, деления, стрелка, пятна света,
   пересвет, зебра, уголки, EV и «ПИК», сегменты полосы) и свет «Максимума» на показаниях — иллюстрация: краски прямо
   из примитивов, меры числом; геометрия дуги и хореография — константы effort-meter.ts. Размеры этого контрола записаны на месте намеренно (решение владельца 22.10.2026: своих токенов у «Качества» нет). */
.vf-meter { display: block; width: 100%; }
.vf-meter-top { display: flex; align-items: center; gap: var(--vf-sp-md); height: 16px; margin-bottom: var(--vf-sp-sm); }
.vf-meter-cap {
  flex: none; font: 500 var(--vf-fs-xs) / var(--vf-lh-xs) var(--vf-font-mono); letter-spacing: var(--vf-track-label);
  text-transform: uppercase; color: var(--vf-fg-3);
}
/* Сегменты полосы — рисунок: не уже 4, тянутся по строке, скругление — хайрлайн, не пилюля */
.vf-meter-leds { flex: 1; display: flex; align-items: center; gap: var(--vf-sp-3xs); height: var(--vf-sp-sm); }
.vf-meter-led {
  position: relative; flex: 1; min-width: var(--vf-sp-2xs); height: 100%; border-radius: 1px;
  background: var(--vf-led-off); box-shadow: var(--vf-shadow-led); transition: background var(--vf-dur-fast), box-shadow var(--vf-dur-fast);
}
.vf-meter-led[data-on] { background: var(--vf-fog-300); box-shadow: 0 0 6px var(--vf-fog-a32); }
.vf-meter-led[data-c][data-on] { background: var(--vf-led-on); box-shadow: var(--vf-glow-accent); }
/* Вспышка сегмента волной при ударе */
.vf-meter-led-fl {
  position: absolute; inset: -1px; border-radius: inherit; background: var(--vf-white); box-shadow: 0 0 10px var(--vf-crimson-200);
  opacity: 0; pointer-events: none;
}
.vf-meter-slider { display: block; border-radius: var(--vf-r-ctl); outline: none; }
.vf-meter-slider:focus-visible { outline: var(--vf-focus-w) solid var(--vf-focus); outline-offset: var(--vf-focus-offset); }

.vf-meter-dial {
  position: relative; box-sizing: border-box; height: 68px; overflow: hidden; isolation: isolate;
  border: 1px solid var(--vf-line-2); border-radius: var(--vf-r-ctl); background: var(--vf-embed-bg); box-shadow: var(--vf-shadow-well);
  cursor: grab; transition: border-color var(--vf-dur-mid), box-shadow var(--vf-dur-mid);
}
.vf-meter-dial > * { position: absolute; pointer-events: none; }
.vf-meter-dial:hover { border-color: var(--vf-line-3); }
.vf-meter[data-drag] .vf-meter-dial { cursor: grabbing; }
.vf-meter[data-static] .vf-meter-dial { cursor: default; border-color: var(--vf-line-2); }
.vf-meter[data-disabled] .vf-meter-dial { cursor: not-allowed; }
/* «Максимум»: окно светится кармином — свет рисунка */
.vf-meter[data-peak] .vf-meter-dial { border-color: var(--vf-accent-line); box-shadow: var(--vf-shadow-well), 0 0 18px -6px var(--vf-crimson-500); }
/* Циферблат светлее у оси стрелки */
.vf-meter-face { inset: 0; background: radial-gradient(120% 140% at 50% 120%, var(--vf-white-a04), transparent 70%); }
/* Окно «экспонируется»: пятно за кончиком стрелки, поднято над окном — светится верх шкалы; у «Максимума» теплеет */
.vf-meter-expo, .vf-meter-hot {
  left: calc(50% - 110px); top: -40px; width: 220px; height: 150px;
  opacity: 0; will-change: transform, opacity;
}
.vf-meter-expo { background: radial-gradient(closest-side, var(--vf-fog-a18), transparent); }
.vf-meter-hot { background: radial-gradient(closest-side, color-mix(in srgb, var(--vf-crimson-500) 34%, transparent), transparent); }
.vf-meter-svg { left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
/* Зебра пересвета, как на камере: поле 280 над зоной «Максимума», маска растворяет его к краям; шаг полос 8 */
.vf-meter-zebra {
  --meter-zebra-c: color-mix(in srgb, var(--vf-fog-100) 70%, transparent);
  width: 280px; height: 280px; margin: -140px 0 0 -140px;
  background-image: linear-gradient(45deg, var(--meter-zebra-c) 25%, transparent 25%, transparent 50%, var(--meter-zebra-c) 50%, var(--meter-zebra-c) 75%, transparent 75%);
  background-size: 8px 8px; mix-blend-mode: overlay;
  -webkit-mask-image: radial-gradient(closest-side, var(--vf-mask-on) 44%, transparent); mask-image: radial-gradient(closest-side, var(--vf-mask-on) 44%, transparent);
  opacity: 0; transition: opacity var(--vf-dur-base);
}
/* Пока стрелку подводят к «Максимуму» — бледнее, на нём — ярче; ползёт на шаг полос за 600 */
.vf-meter[data-hot] .vf-meter-zebra { opacity: .22; animation: vf-meter-zebra 600ms linear infinite; }
.vf-meter[data-peak] .vf-meter-zebra { opacity: .5; animation: vf-meter-zebra 600ms linear infinite; }
.vf-meter[data-off] .vf-meter-zebra { animation-play-state: paused; }
@keyframes vf-meter-zebra { to { background-position: 8px 0; } }
/* Пересвет над зоной «Максимума»: белое ядро, кармин по краю */
.vf-meter-bloom {
  width: 168px; height: 168px; margin: -84px 0 0 -84px;
  background: radial-gradient(closest-side, var(--vf-white) 0%, var(--vf-crimson-100) 22%, var(--vf-crimson-400) 48%,
    color-mix(in srgb, var(--vf-crimson-600) 40%, transparent) 70%, transparent 100%);
  mix-blend-mode: screen; opacity: 0; will-change: transform, opacity;
}
/* Тень по нижнему краю окна — ось стрелки уходит под неё; блик стекла */
.vf-meter-lip { left: 0; right: 0; bottom: 0; height: 18px; background: linear-gradient(180deg, transparent, var(--vf-black-a60) 86%); }
.vf-meter-glass { inset: 0; background: linear-gradient(168deg, var(--vf-white-a07), transparent 42%); }
/* Уголки окна — рисунок */
.vf-meter-br { width: var(--vf-sp-sm); height: var(--vf-sp-sm); border: 0 solid var(--vf-line-3); transition: border-color var(--vf-dur-mid); }
.vf-meter-br[data-c="tl"] { left: var(--vf-sp-2xs); top: var(--vf-sp-2xs); border-left-width: 1px; border-top-width: 1px; }
.vf-meter-br[data-c="tr"] { right: var(--vf-sp-2xs); top: var(--vf-sp-2xs); border-right-width: 1px; border-top-width: 1px; }
.vf-meter-br[data-c="bl"] { left: var(--vf-sp-2xs); bottom: var(--vf-sp-2xs); border-left-width: 1px; border-bottom-width: 1px; }
.vf-meter-br[data-c="br"] { right: var(--vf-sp-2xs); bottom: var(--vf-sp-2xs); border-right-width: 1px; border-bottom-width: 1px; }
.vf-meter[data-peak] .vf-meter-br { border-color: var(--vf-accent); }
/* Надписи прибора EV и «ПИК» — в окне, 14 от края, за уголками */
.vf-meter-hud {
  top: var(--vf-sp-xs); font: 500 var(--vf-fs-xs) / var(--vf-lh-xs) var(--vf-font-mono); letter-spacing: var(--vf-track-xs);
  color: var(--vf-fg-3); white-space: nowrap;
}
.vf-meter-ev { left: 14px; font-variant-numeric: tabular-nums; }
.vf-meter-peak { right: 14px; display: flex; align-items: center; gap: var(--vf-sp-2xs); transition: color var(--vf-dur-mid); }
.vf-meter-peak-led {
  width: var(--vf-dot-xs); height: var(--vf-dot-xs); border-radius: var(--vf-r-round); background: var(--vf-led-off); box-shadow: var(--vf-shadow-led);
  transition: background var(--vf-dur-fast), box-shadow var(--vf-dur-fast);
}
.vf-meter[data-peak] .vf-meter-peak { color: var(--vf-accent); }
.vf-meter[data-peak] .vf-meter-peak-led { background: var(--vf-led-on); box-shadow: var(--vf-glow-accent); }

/* Шкала (SVG, рисует effort-meter.ts): дуга зон, деления, подписи, штифты, стрелка. Пройденное стрелкой — светлее, «Максимум» — кармином */
.vf-meter-band { fill: none; stroke: var(--vf-meter-arc); stroke-width: var(--vf-bw-strong); }
.vf-meter-band[data-c] { stroke: var(--vf-crimson-800); }
.vf-meter-tick { stroke: var(--vf-fog-a32); stroke-width: 1px; }
.vf-meter-tick[data-k="m"] { stroke: var(--vf-fog-500); }
.vf-meter-tick[data-k="s"] { stroke: var(--vf-fog-400); stroke-width: var(--vf-bw-strong); }
.vf-meter-lit .vf-meter-band { stroke: var(--vf-fog-200); filter: drop-shadow(0 0 4px var(--vf-fog-a32)); }
.vf-meter-lit .vf-meter-band[data-c] { stroke: var(--vf-crimson-400); filter: drop-shadow(0 0 4px var(--vf-crimson-500)); }
.vf-meter-lit .vf-meter-tick { stroke: var(--vf-fog-300); }
.vf-meter-lit .vf-meter-tick[data-k="s"] { stroke: var(--vf-fog-100); }
.vf-meter-lit .vf-meter-tick[data-c] { stroke: var(--vf-crimson-300); }
/* Подписи зон — текст интерфейса: SVG в px окна 1:1, на экране ровно пол 11 */
.vf-meter-lbl {
  font: 500 var(--vf-fs-xs) var(--vf-font-mono); letter-spacing: var(--vf-track-xs); fill: var(--vf-fg-3);
  text-anchor: middle; dominant-baseline: central; transition: fill var(--vf-dur-fast);
}
.vf-meter-lbl[data-hov] { fill: var(--vf-fg-2); }
.vf-meter-lbl[data-on] { fill: var(--vf-fg); }
.vf-meter-lbl[data-on][data-c] { fill: var(--vf-accent-hi); }
.vf-meter-peg { fill: var(--vf-ink-13); stroke: var(--vf-ink-0); stroke-width: 1px; }
/* Стрелка-призрак пунктиром: куда встанет по клику */
.vf-meter-ghost { stroke: var(--vf-fog-a25); stroke-width: 1px; stroke-dasharray: 2px 4px; opacity: 0; transition: opacity var(--vf-dur-fast); }
.vf-meter-dial[data-hover] .vf-meter-ghost { opacity: 1; }
.vf-meter[data-drag] .vf-meter-ghost { opacity: 0; }
.vf-meter-fade stop { stop-color: var(--vf-white); }
/* Стрелка: тень на шкале, тело, кончик со свечением; на «Максимуме» тело теплеет */
.vf-meter-nsh { stroke: var(--vf-black-a75); stroke-width: 4px; stroke-linecap: round; }
.vf-meter-nb { stroke: var(--vf-fog-100); stroke-width: var(--vf-bw-strong); stroke-linecap: round; transition: stroke var(--vf-dur-mid); }
.vf-meter-nt { stroke: var(--vf-crimson-500); stroke-width: var(--vf-bw-strong); stroke-linecap: round; filter: drop-shadow(0 0 4px var(--vf-crimson-500)); }
.vf-meter[data-peak] .vf-meter-nb { stroke: var(--vf-crimson-200); }

/* Показания: имя ступени, разница цены, пока тянут, цена */
.vf-meter-read { display: flex; align-items: center; gap: var(--vf-sp-sm); height: var(--vf-lh-md-text); margin-top: var(--vf-sp-md); }
.vf-meter .vf-ef-roll-box { height: var(--vf-lh-md-text); line-height: var(--vf-lh-md-text); }
.vf-meter-name { flex: 0 1 auto; min-width: 0; font-size: var(--vf-fs-md); font-weight: 600; color: var(--vf-fg); }
.vf-meter-name .vf-ef-roll:not([data-out]) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.vf-meter-name .vf-ef-roll, .vf-meter .vf-ef-num .vf-ef-roll { transition: color var(--vf-dur-mid), filter var(--vf-dur-film); }
/* Свет «Максимума» на показаниях: имя кармином, цифра — свечением своего цвета */
.vf-meter[data-top] .vf-meter-name .vf-ef-roll { color: var(--vf-accent-hi); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--vf-crimson-500) 60%, transparent)); }
.vf-meter .vf-ef-num { font-size: var(--vf-fs-lg); font-weight: 600; }
.vf-meter[data-top] .vf-ef-num .vf-ef-roll { filter: drop-shadow(0 0 10px color-mix(in srgb, currentColor 55%, transparent)); }
.vf-meter-delta {
  flex: none; margin-left: auto; font: 500 var(--vf-fs-xs) / var(--vf-lh-xs) var(--vf-font-mono); letter-spacing: var(--vf-track-xs);
  font-variant-numeric: tabular-nums; color: var(--vf-fg-3);
  opacity: 0; transform: translateX(var(--vf-sp-xs)); transition: opacity var(--vf-dur-fast), transform var(--vf-dur-mid) var(--vf-ease-out);
}
.vf-meter-delta[data-show] { opacity: 1; transform: none; }
.vf-meter-delta[data-up] { color: var(--vf-accent-hi); }
/* Удар в упор: на миг имя, цена и рамка белые, затем остывают переходами выше */
.vf-meter[data-flash] .vf-meter-name .vf-ef-roll, .vf-meter[data-flash] .vf-ef-num .vf-ef-roll {
  color: var(--vf-white); filter: drop-shadow(0 0 10px var(--vf-crimson-200)) drop-shadow(0 0 2px var(--vf-white)); transition: none;
}
.vf-meter[data-flash] .vf-meter-dial { border-color: var(--vf-crimson-200); transition: none; }

@media (prefers-reduced-motion: reduce) {
  .vf-meter[data-hot] .vf-meter-zebra, .vf-meter[data-peak] .vf-meter-zebra { animation: none; }
  .vf-meter-delta { transform: none; }
  .vf-meter-name .vf-ef-roll, .vf-meter .vf-ef-num .vf-ef-roll, .vf-meter-dial, .vf-meter-nb { transition: none; }
}

/* ════════════ Обвязка экрана ════════════ */

/* Фон: мягкие пятна света, неподвижные */
.vf-backdrop { position: fixed; inset: 0; pointer-events: none; z-index: var(--vf-z-scene); background: var(--vf-backdrop-light); }
/* Подсветка за курсором: отдельный слой, движется только transform */
.vf-glow {
  position: fixed; left: 0; top: 0; z-index: var(--vf-z-scene); width: var(--vf-glow-size); height: var(--vf-glow-size);
  margin: calc(var(--vf-glow-size) / -2) 0 0 calc(var(--vf-glow-size) / -2);
  border-radius: var(--vf-r-round); pointer-events: none; will-change: transform;
  background: var(--vf-glow-fill);
  transform: translate3d(72vw, 22vh, 0);
}
/* Зерно плёнки */
@keyframes vf-jitter { 0% { transform: translate(0, 0) } 17% { transform: translate(-9%, 6%) } 33% { transform: translate(7%, -11%) } 50% { transform: translate(-13%, -4%) } 67% { transform: translate(11%, 9%) } 83% { transform: translate(-3%, 12%) } 100% { transform: translate(0, 0) } }
.vf-grain { position: fixed; inset: -20%; z-index: var(--vf-z-grain); pointer-events: none; background-image: var(--vf-grain-tile); opacity: .5; animation: vf-jitter var(--vf-loop-grain) steps(1, end) infinite; }

/* Рамка видоискателя и HUD */
.vf-frame { position: fixed; inset: 0; z-index: var(--vf-z-frame); pointer-events: none; }
/* Подложки — под уголками и HUD: ::after идёт последним и без слоя накрывал нижние. */
.vf-frame::before, .vf-frame::after { content: ""; position: absolute; z-index: var(--vf-z-scene); left: 0; right: 0; height: var(--vf-veil-h); }
/* Подложки держат HUD читаемым: контент уходит под них. */
.vf-frame::before { top: 0; background: var(--vf-veil-top); }
.vf-frame::after { bottom: 0; background: var(--vf-veil-bottom); }
.vf-frame-c { position: absolute; z-index: var(--vf-z-content); width: var(--vf-frame-corner); height: var(--vf-frame-corner); border: 0 solid var(--vf-fg); opacity: .9; }
.vf-frame-c[data-c="tl"] { left: var(--vf-inset); top: var(--vf-inset); border-top-width: var(--vf-bw-strong); border-left-width: var(--vf-bw-strong); }
.vf-frame-c[data-c="tr"] { right: var(--vf-inset); top: var(--vf-inset); border-top-width: var(--vf-bw-strong); border-right-width: var(--vf-bw-strong); }
.vf-frame-c[data-c="bl"] { left: var(--vf-inset); bottom: var(--vf-inset); border-bottom-width: var(--vf-bw-strong); border-left-width: var(--vf-bw-strong); }
.vf-frame-c[data-c="br"] { right: var(--vf-inset); bottom: var(--vf-inset); border-bottom-width: var(--vf-bw-strong); border-right-width: var(--vf-bw-strong); }
.vf-frame-safe { position: absolute; inset: calc(var(--vf-inset) + var(--vf-sp-sm)); border: 1px dashed var(--vf-line-faint); }
.vf-frame-cross {
  position: absolute; left: 50%; top: 50%; width: var(--vf-frame-cross); height: var(--vf-frame-cross);
  margin: calc(var(--vf-frame-cross) / -2) 0 0 calc(var(--vf-frame-cross) / -2); opacity: .16;
}
.vf-frame-cross::before, .vf-frame-cross::after { content: ""; position: absolute; background: var(--vf-fg); }
.vf-frame-cross::before { left: calc(var(--vf-frame-cross) / 2); top: 0; width: 1px; height: 100%; }
.vf-frame-cross::after { top: calc(var(--vf-frame-cross) / 2); left: 0; height: 1px; width: 100%; }

.vf-hud {
  position: absolute; z-index: var(--vf-z-content); display: flex; align-items: center; gap: var(--vf-hud-gap);
  font: 500 var(--vf-fs-xs) / var(--vf-lh-xs) var(--vf-font-mono); letter-spacing: var(--vf-track-label);
  color: var(--vf-fg-3); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.vf-hud[data-at="tl"] { left: calc(var(--vf-inset) + var(--vf-hud-x)); top: calc(var(--vf-inset) + var(--vf-hud-y)); }
.vf-hud[data-at="tr"] { right: calc(var(--vf-inset) + var(--vf-hud-x)); top: calc(var(--vf-inset) + var(--vf-hud-y)); }
.vf-hud[data-at="bl"] { left: calc(var(--vf-inset) + var(--vf-hud-x)); bottom: calc(var(--vf-inset) + var(--vf-hud-y)); }
.vf-hud[data-at="br"] { right: calc(var(--vf-inset) + var(--vf-hud-x)); bottom: calc(var(--vf-inset) + var(--vf-hud-y)); }
@keyframes vf-blink { 0%, 60% { opacity: 1 } 61%, 100% { opacity: .15 } }
.vf-rec { display: inline-flex; align-items: center; gap: var(--vf-sp-sm); color: var(--vf-fg); }
.vf-rec i {
  width: var(--vf-dot-sm); height: var(--vf-dot-sm); border-radius: var(--vf-r-round); background: var(--vf-rec);
  box-shadow: var(--vf-glow-rec-dot); animation: vf-blink var(--vf-loop-rec) steps(1, end) infinite;
}
.vf-hud-tc { color: var(--vf-fg); min-width: 11ch; }
.vf-hud-scn { color: var(--vf-accent); }
.vf-batt { display: inline-flex; gap: var(--vf-sp-3xs); padding: var(--vf-sp-3xs); border: 1px solid var(--vf-fg-3); border-radius: 1px; position: relative; }
.vf-batt::after {
  content: ""; position: absolute; left: 100%; top: 50%; width: var(--vf-batt-tip-w); height: var(--vf-batt-tip-h);
  margin-left: var(--vf-sp-3xs); transform: translateY(-50%); background: var(--vf-fg-3);
}
.vf-batt b { width: var(--vf-batt-cell-w); height: var(--vf-batt-cell-h); background: var(--vf-fg-2); }
.vf-batt b:last-child { background: transparent; }
.vf-vu { display: grid; gap: var(--vf-sp-2xs); }
.vf-vu > span { display: flex; align-items: center; gap: var(--vf-sp-xs); }
.vf-vu-t { position: relative; width: var(--vf-vu-w); height: var(--vf-vu-h); overflow: hidden; background: var(--vf-vu-segments); }
.vf-vu-t::before { content: ""; position: absolute; inset: 0; background: var(--vf-vu-peaks); }
.vf-vu-t i { position: absolute; inset: 0; background: var(--vf-bg); transform: translateX(50%); will-change: transform; box-shadow: -1px 0 0 var(--vf-bg); }

/* Курсор AF: системный курсор виден всегда, рамка обводит цель поверх */
.vf-af { position: fixed; left: 0; top: 0; z-index: var(--vf-z-cursor); pointer-events: none; opacity: 0; transition: opacity var(--vf-dur-fast); }
.vf-af.on { opacity: 1; }
.vf-af-c { position: absolute; left: 0; top: 0; width: var(--vf-af-corner); height: var(--vf-af-corner); will-change: transform; }
.vf-af-c b { position: absolute; inset: 0; border: 0 solid var(--vf-fg); transition: border-color var(--vf-dur-fast); }
.vf-af-c[data-c="1"] b { border-top-width: var(--vf-bw-strong); border-left-width: var(--vf-bw-strong); transform-origin: 0 0; }
.vf-af-c[data-c="2"] b { border-top-width: var(--vf-bw-strong); border-right-width: var(--vf-bw-strong); transform-origin: 100% 0; }
.vf-af-c[data-c="3"] b { border-bottom-width: var(--vf-bw-strong); border-left-width: var(--vf-bw-strong); transform-origin: 0 100%; }
.vf-af-c[data-c="4"] b { border-bottom-width: var(--vf-bw-strong); border-right-width: var(--vf-bw-strong); transform-origin: 100% 100%; }
.vf-af.lock .vf-af-c b { border-color: var(--vf-accent); }
.vf-af-tag {
  position: absolute; left: 0; top: var(--vf-af-tag-off); font: 600 var(--vf-fs-2xs) / var(--vf-lh-2xs) var(--vf-font-mono);
  letter-spacing: var(--vf-track-wide); color: var(--vf-accent); white-space: nowrap; opacity: 0; transition: opacity var(--vf-dur-fast);
}
.vf-af-tag[data-at="b"] { top: auto; bottom: var(--vf-af-tag-off); }
.vf-af.card .vf-af-tag { opacity: 1; }
.vf-af .vf-af-tag[data-at="b"], .vf-af.card.below .vf-af-tag:not([data-at="b"]) { opacity: 0; }
.vf-af.card.below .vf-af-tag[data-at="b"] { opacity: 1; }

/* Узкий экран */
@media (max-width: 1100px) { /* bp-laptop */
  .vf-hud[data-at="br"] { display: none; }
}
@media (max-width: 760px) { /* bp-phone */
  /* Шапка панели на телефоне переносится, второстепенное прячется */
  .vf-pn-top { flex-wrap: wrap; row-gap: var(--vf-sp-xs); padding: var(--vf-sp-sm) var(--vf-sp-lg); }
  .vf-pn-top .vf-keys, .vf-pn-aside .vf-chip:not([data-tone="accent"]) { display: none; }
  /* HUD на телефоне не мельчит (пол 11), а короче: нижние строки и [data-wide] уходят —
     сцена, баланс белого, ISO и выдержка; вверху остаются REC, таймкод, «24 FPS» и батарея (≈ 227 из 300 px на 360) */
  .vf-hud[data-at="bl"], .vf-hud[data-at="br"], .vf-hud [data-wide], .vf-frame-cross, .vf-frame-safe { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vf-grain, .vf-rec i { animation: none; }
  .vf-spin { animation: vf-flicker var(--vf-loop-rec) ease-in-out infinite; }
  .vf-skel { animation: none; }
  .vf-check-input:active { transform: none; }
}