/* ============================================================
   ЭКРАН «ОПРЕДЕЛЕНИЕ» — камера, распознавание, голосовой ввод
   (js/page-scan.js). Всё оформление берётся из css/tokens.css:
   литеральных цветов, произвольных кеглей и отступов вне сетки
   здесь быть не должно.

   Правило поверхностей: фон экрана --bg, карточка = --surface +
   1px --border БЕЗ тени, вложенный блок внутри карточки =
   --surface-2 без границы и тени. Тень (--shadow-2) — только у
   по-настоящему приподнятого: здесь это единственная кнопка
   спуска затвора, которая физически лежит «над» видоискателем.

   Многие правила ниже ПЕРЕКРЫВАЮТ старые из style.css: селекторы
   намеренно уточнены до .page-scan, чтобы не трогать другие
   экраны, использующие те же классы (.field__input, .meal-chip).
   ============================================================ */

/* ============================================================
   0. ШАПКА С КНОПКОЙ «ЗАКРЫТЬ»
   ------------------------------------------------------------
   Камера — экран-задача без таббара, и крестик в шапке — единственный
   выход с неё. Он стоит в каждом состоянии экрана (камера, результат,
   голос, ошибки, пейволлы), слева, в одной строке с заголовком.
   ============================================================ */

.page-scan .scan-head {
  margin-bottom: var(--s4);
}

.page-scan .scan-head__row {
  display: flex;
  align-items: center;
  gap: var(--s1);
}

/* Крестик: зона нажатия 44px без подложки. Отрицательный левый отступ
   выравнивает сам значок по краю контента, а не по краю невидимой зоны
   нажатия — иначе заголовок казался бы сдвинутым вправо без причины. */
.page-scan .scan-head__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--tap-min);
  height: var(--tap-min);
  margin-left: calc(var(--s3) * -1);
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.page-scan .scan-head__close:active {
  background: var(--surface-2);
}

/* Заголовок переносится, а не обрезается: длинное слово («Распознанные»)
   рядом с крестиком на 360px занимает почти всю строку, а при запасном
   шрифте без сжатого начертания может и не влезть — тогда рвём слово. */
.page-scan .scan-head__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}

.page-scan .scan-head .page-subtitle {
  margin-top: var(--s2);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--muted);
}

/* ============================================================
   1. КАМЕРА: рамка видоискателя и ряд управления
   ============================================================ */

/* Карточка камеры — обычная карточка приложения. Прежняя версия выносила
   её за края экрана отрицательными полями; теперь ширина общая со всеми
   экранами, а место под рамку освобождается компактными отступами. */
.page-scan .scan-cam-card {
  padding: var(--s3);
  text-align: center;
}

/* Видоискатель — плотный тёмный блок в обеих темах (как .hero): камера по
   природе тёмная, и пока поток не пришёл, серая рамка выглядела как
   незагрузившаяся картинка. Без собственной границы и тени. */
.page-scan .scan-cam-window {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  /* Ограничиваем высоту, чтобы затвор и счётчик влезали без прокрутки. */
  max-height: 46vh;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--hero);
  color: var(--hero-text);
  box-shadow: none;
  overflow: hidden;
}

/* Запасная пропорция для вебвью без aspect-ratio: 3/4 = 133.33%. */
@supports not (aspect-ratio: 3 / 4) {
  .page-scan .scan-cam-window {
    height: 0;
    padding-bottom: 133.33%;
  }
}

.page-scan .scan-cam-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--hero);
}

/* Подпись «Включаем камеру…» поверх пустой рамки, пока ждём getUserMedia. */
.scan-cam-boot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-btn);
  color: var(--hero-muted);
}

/* --- Объяснение доступа ВНУТРИ рамки (не отдельным экраном) --- */
.scan-cam-ask {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s4);
  text-align: center;
}

.scan-cam-ask__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--hero-2);
  color: var(--accent);
}

.scan-cam-ask__text {
  max-width: 280px;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--hero-muted);
}

/* Кнопка выдачи доступа: обычная CTA, но по ширине содержимого. */
.scan-cam-ask__btn {
  width: auto;
  min-height: var(--tap-min);
  padding: 0 var(--s5);
}

/* --- Ряд управления: галерея | затвор | голос --- */
.scan-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s4);
}

/* Боковое действие: иконка и подпись столбиком, зона нажатия 44px. */
.scan-control {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: var(--s2);
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.scan-control:active {
  background: var(--surface-2);
  color: var(--text);
}

.scan-control__icon {
  display: inline-flex;
}

/* Кнопка «Голос» в ряду управления несёт класс .scan-voice-btn, а старое
   правило из style.css даёт ему отступ сверху 10px (оно писалось для
   кнопки-строки под фото). В ряду этот отступ опускал «Голос» ниже
   «Галереи» — выравниваем. */
.scan-controls .scan-voice-btn {
  margin-top: 0;
}

/* Подписи боковых действий — сжатым капсом, как подписи вкладок. */
.scan-control__label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-btn);
}

/* СПУСК ЗАТВОРА — главная кнопка экрана. Единственный по-настоящему
   приподнятый элемент страницы, поэтому только у него есть свечение
   (заливка + тень, без границы: три слоя сразу — визуальный шум). */
.scan-shutter {
  position: relative;
  width: 80px;
  height: 80px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: var(--shadow-accent);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
    opacity var(--dur-fast) var(--ease);
}

/* Белое кольцо внутри — узнаваемая метафора кнопки спуска. */
.scan-shutter__ring {
  position: absolute;
  inset: 6px;
  border: 3px solid var(--on-accent);
  border-radius: var(--radius-pill);
}

.scan-shutter:not(:disabled):active {
  background: var(--accent-press);
  transform: scale(.94);
}

/* Пока поток не подключён, снимать нечего — кнопка явно недоступна. */
.scan-shutter:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* Подсказка под рядом управления. */
.page-scan .scan-cam-hint {
  margin: var(--s3) 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--muted);
}

/* Строка целевой даты («Добавится в день: …») над карточкой камеры. */
.page-scan .scan-cam-date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin: 0 0 var(--s3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--muted);
}

.page-scan .scan-cam-date .icon {
  color: var(--accent);
  flex-shrink: 0;
}

/* ============================================================
   2. СЧЁТЧИК БЕСПЛАТНЫХ СКАНИРОВАНИЙ
   ============================================================ */

.page-scan .scan-counter {
  margin: var(--s3) 0 0;
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.page-scan .scan-counter--premium {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: var(--fw-semibold);
}

.page-scan .scan-counter--free {
  background: var(--surface-2);
  color: var(--muted);
}

.page-scan .scan-counter--empty {
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: var(--fw-semibold);
}

/* ============================================================
   3. ФОЛБЭК-ДРОПЗОНА (камера не поддерживается окружением)
   ============================================================ */

.page-scan .scan-dropzone__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--s3);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
}

.page-scan .scan-dropzone__hint {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--muted);
  margin-bottom: var(--s4);
}

/* ============================================================
   4. ПРЕВЬЮ И РЕЗУЛЬТАТ
   ============================================================ */

.page-scan .scan-preview {
  padding: 0;
  overflow: hidden;
}

.page-scan .scan-preview__img,
.page-scan .result-card__img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}

.page-scan .scan-preview__status {
  padding: var(--s3) var(--s4);
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* Бейдж уверенности ИИ — вложенная плашка, без границы и тени. */
.page-scan .scan-edit-confidence {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  margin-bottom: var(--s4);
  padding: var(--s1) var(--s3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  background: var(--surface-2);
  color: var(--muted);
}

.page-scan .scan-edit-confidence--low {
  background: var(--danger-soft);
  color: var(--danger);
}

.page-scan .scan-edit-confidence--medium {
  background: var(--warning-soft);
  color: var(--warning);
}

.page-scan .scan-edit-confidence--high {
  background: var(--success-soft);
  color: var(--success);
}

/* --- Табло результата: название и четыре числа КБЖУ ---
   Числа — в цветах нутриентов (те же, что у полос на «Сегодня»), калории —
   цветом текста: они главное. */
.page-scan .scan-sum {
  margin-bottom: var(--s4);
}

.page-scan .scan-sum__name {
  margin: 0 0 var(--s3);
  font-size: var(--fs-h2);
  overflow-wrap: anywhere;
}

.page-scan .scan-sum__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: var(--s2);
  padding: var(--s3);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.page-scan .scan-sum__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.page-scan .scan-sum__value {
  font-size: var(--fs-h2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-scan .scan-sum__stat--kcal .scan-sum__value { font-size: var(--fs-h1); }
.page-scan .scan-sum__stat--p .scan-sum__label { color: var(--data-protein); }
.page-scan .scan-sum__stat--f .scan-sum__label { color: var(--data-fat); }
.page-scan .scan-sum__stat--c .scan-sum__label { color: var(--data-carb); }

/* Надзаголовок над формой правки. */
.page-scan .scan-edit-eyebrow {
  margin-bottom: var(--s3);
}

/* --- Редактируемые поля результата ---
   Результат распознавания ВСЕГДА правится руками: ИИ ошибается в весе
   и названии чаще, чем кажется. Поля крупные (зона нажатия 44+),
   контур — --border-strong (3:1 к белому), фокус подсвечивается акцентом. */
.page-scan .field__input {
  min-height: var(--tap-min);
  padding: 0 var(--s3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-body);
}

.page-scan .field__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.page-scan .field__label {
  margin-bottom: var(--s1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--muted);
}

.page-scan .scan-edit-field {
  margin-bottom: var(--s3);
}

.page-scan .scan-edit-field--macro {
  margin-bottom: 0;
}

.page-scan .scan-edit-macros {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.page-scan .scan-edit-hint {
  margin: 0 0 var(--s3);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--muted);
}

/* Подпись «Добавить как» — надзаголовок сжатым шрифтом. */
.page-scan .meal-picker__label {
  margin-bottom: var(--s2);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--muted);
}

/* Чипы приёма пищи — мини-кнопки: тот же сжатый капс, что у .btn, поэтому
   белая подпись на оранжевом выбранном чипе проходит по контрасту. */
.page-scan .meal-chip {
  min-height: var(--tap-min);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--font-display);
  font-size: var(--fs-btn);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-btn);
}

.page-scan .meal-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* ============================================================
   5. ЭКРАН ЛИМИТА: пейволл ПОВЕРХ сохранённого кадра
   ============================================================ */

/* Снятый кадр не выбрасывается при 402 — он лежит под пейволлом и ждёт
   подписки. Приглушаем его яркостью (а не цветной плёнкой поверх),
   чтобы текст читался, а кадр оставался узнаваемым. */
.scan-hold {
  position: relative;
  margin-bottom: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.scan-hold__img {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  filter: brightness(.45) saturate(.85);
}

/* Текст поверх приглушённого кадра — цвета геройского блока: кадр под ним
   всегда тёмный, независимо от темы. */
.scan-hold__veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s4);
  text-align: center;
  color: var(--hero-text);
}

.scan-hold__icon {
  display: inline-flex;
  color: var(--accent);
}

.scan-hold__text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}

/* ============================================================
   6. ПЕЙВОЛЛ (собственный рендер страницы, классы .paywall*)
   ============================================================ */

.page-scan .paywall-card {
  padding: var(--s5) var(--s4);
  text-align: center;
}

.page-scan .paywall-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--s3);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: none;
}

.page-scan .paywall-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  margin-bottom: var(--s2);
}

.page-scan .paywall-desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--muted);
  margin-bottom: var(--s4);
}

.page-scan .paywall-bullet-mark {
  width: 24px;
  height: 24px;
  background: var(--accent-soft);
  color: var(--accent);
}

.page-scan .paywall-bullet-text {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* Плашка «нужна подписка»: заливка без границы (фон + граница + тень
   одновременно — запрещённое сочетание). */
.page-scan .paywall-lock {
  margin-bottom: var(--s3);
  padding: var(--s3);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
}

.page-scan .paywall-lock-icon {
  display: inline-flex;
  color: var(--danger);
}

/* Статус несёт иконка и подложка; мелкий текст — цветом текста: красный
   на красной подложке даёт 4.2:1, для 13px этого мало. */
.page-scan .paywall-lock-text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

/* ============================================================
   7. ОШИБКИ И ЗАГЛУШКИ
   ============================================================ */

.page-scan .error-card__icon,
.page-scan .scan-voice-unavailable__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--s3);
  border-radius: var(--radius-pill);
}

/* Ошибка — красный статус: что-то не получилось, нужно действие. */
.page-scan .error-card__icon {
  background: var(--danger-soft);
  color: var(--danger);
}

.page-scan .scan-voice-unavailable__icon {
  background: var(--accent-soft);
  color: var(--accent);
}

.page-scan .error-card__msg {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  margin-bottom: var(--s4);
}

/* Раскрывающийся отладочный блок (виден только при DEBUG_AI). Его заголовок —
   тоже кнопка, поэтому доводим зону нажатия до общего минимума; display не
   меняем, чтобы у <summary> остался системный треугольник раскрытия. */
.page-scan .ai-debug__sum {
  box-sizing: border-box;
  min-height: var(--tap-min);
  padding: var(--s3) var(--s4);
  font-size: var(--fs-sm);
}

/* ============================================================
   8. ГОЛОСОВОЙ ВВОД
   ============================================================ */

/* Индикатор записи — оранжевый круг с белым микрофоном; пульсирующее кольцо
   вокруг него — оранжевый контур, а не персиковая заливка из style.css. */
.page-scan .scan-voice-rec__indicator {
  width: 96px;
  height: 96px;
  background: var(--accent);
  box-shadow: var(--shadow-accent);
}

.page-scan .scan-voice-rec__pulse {
  border: 3px solid var(--accent);
  background: transparent;
}

.page-scan .scan-voice-rec__mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-accent);
}

.page-scan .scan-voice-rec__status {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-btn);
  color: var(--accent-text);
}

/* Таймер — главное число экрана записи (.num), самым крупным кеглем. */
.page-scan .scan-voice-rec__timer {
  font-size: var(--fs-display);
  color: var(--text);
}

.page-scan .scan-voice-transcript {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--muted);
  background: var(--surface-2);
}

/* Строка распознанного блюда — вложенный блок карточки. */
.page-scan .scan-voice-item {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: var(--s3);
}

/* Удаление строки: зона нажатия 44px (была 36px — мимо пальца). */
.page-scan .scan-voice-item__remove {
  width: var(--tap-min);
  height: var(--tap-min);
  min-height: var(--tap-min);
  border-radius: var(--radius);
  color: var(--danger);
}

.page-scan .scan-voice-item__remove:active {
  background: var(--danger-soft);
}

/* Компактные числовые поля Ккал/Б/Ж/У: ниже обычного поля, но не ниже
   минимальной зоны нажатия. */
.page-scan .scan-voice-input--num {
  min-height: var(--tap-min);
  padding: 0 var(--s2);
}

.page-scan .scan-voice-num__label {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--muted);
}

.page-scan .scan-voice-item__qty {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--muted);
}

/* ============================================================
   9. УЗКИЕ ЭКРАНЫ
   ============================================================ */
@media (max-width: 360px) {
  .page-scan .scan-cam-window {
    max-height: 40vh;
  }

  .scan-shutter {
    width: 68px;
    height: 68px;
  }

  .page-scan .scan-sum__grid {
    gap: var(--s1);
  }

  .scan-controls {
    gap: var(--s2);
  }

  .page-scan .scan-edit-macros {
    gap: var(--s1);
  }
}

/* ---------- Штрихкод прочитан, товара нет в базе ---------- */
.scan-barcode-miss {
  padding: var(--s5) var(--s4);
  margin-bottom: var(--s4);
}

.scan-barcode-miss .eyebrow {
  margin: 0 0 var(--s2);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.scan-barcode-miss h2 {
  margin: 0 0 var(--s3);
  font: var(--fw-bold) var(--fs-h2) / var(--lh-heading) var(--font-display);
  text-transform: uppercase;
}

.scan-barcode-miss p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

/* ---------- Режимы съёмки: Еда · Штрихкод · КБЖУ ----------
   Полупрозрачная «пилюля» у нижнего края видоискателя: видно, что выбрано,
   и не закрывает то, что снимают. Видоискатель тёмный в обеих темах, поэтому
   подложка — затемнение поверх видео, а активный режим — фирменный оранжевый. */
.scan-modes {
  position: absolute;
  left: 50%;
  bottom: var(--s3);
  z-index: 2;
  display: flex;
  gap: 2px;
  max-width: calc(100% - 2 * var(--s3));
  padding: 3px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: translateX(-50%);
}

.scan-mode {
  flex: 0 1 auto;
  min-height: 34px;
  padding: 0 var(--s3);
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--hero-text);
  font: var(--fw-semibold) var(--fs-sm) / 1 var(--font-body);
  white-space: nowrap;
  opacity: 0.85;
  cursor: pointer;
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.scan-mode.is-active {
  background: var(--accent);
  color: var(--on-accent);
  opacity: 1;
}

/* Рамка-прицел: где держать штрихкод или таблицу КБЖУ. Для еды не нужна. */
.scan-aim {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 1;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.18);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: width var(--dur) var(--ease), height var(--dur) var(--ease);
}

.scan-aim--food {
  display: none;
}

.scan-aim--barcode {
  width: 78%;
  height: 26%;
}

.scan-aim--label {
  width: 78%;
  height: 58%;
}

/* ---------- Карточка «на 100 г» (этикетка, штрихкод) ----------
   Под названием — на сколько граммов цифры; поле «Сколько съели» стоит
   первым и подсвечено, чтобы сразу было видно, что вписать. */
.scan-sum__per {
  margin: calc(-1 * var(--s2)) 0 var(--s3);
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.scan-edit-field--accent .field__input {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.scan-edit-field--accent .field__input::placeholder {
  color: var(--muted);
  opacity: 0.6;
}