/* ============================================================================
   style.css — тёмная мобильная тема по макетам
============================================================================ */

:root {
  /* Единая земля всего приложения. Раньше чёрных было три: --bg #0a0a0b под
     редактором, #000 у наложенных экранов и #030304 с виньеткой на старте —
     переходы между экранами читались как переходы между приложениями. */
  --bg:          #030304;
  --panel:       #111112;
  --panel-2:     #232326;
  --panel-3:     #2c2c30;
  --line:        #35353a;
  --text:        #f2f2f4;
  --text-dim:    #98989f;
  --text-faint:  #6a6a72;
  --accent:      #e5b45c;
  --accent-dim:  rgba(229, 180, 92, 0.14);
  /* Золото текста теплее золота поверхностей: --accent живёт на заливках и
     иконках, --accent-text — на надписях и кромках. Значения взяты со
     стартового экрана, он задаёт эталон. */
  --accent-text: #e8b75f;
  --accent-text-hot: #f5c66c;
  --radius:      16px;
  --radius-lg:   22px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
               "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  overscroll-behavior: none;

  /* Оставляем обычное движение одним пальцем, но не отдаём Safari системный
     pinch страницы. Масштаб фотографии обрабатывает сама сцена. */
  touch-action: pan-x pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

button { font: inherit; color: inherit; background: none; border: none; }
button:focus:not(:focus-visible) { outline: none; }

/* Поля ввода — единственное место, где выделение и правка нужны. */
input, textarea {
  font: inherit;
  -webkit-user-select: text;
  user-select: text;
}

/* ------------------------------------------------------------------ каркас */

.app {
  --panel-motion: .22s cubic-bezier(.2, .65, .3, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 460px;
  margin: 0 auto;
  overflow: hidden;
}

/* Земля приложения. Виньетка — градиентом, а не картинкой: текстура шла через
   `cover` и на другом соотношении сторон обрезалась, уводя центр засветки вбок.
   Зерно поверх — тайл 128px, амплитуда зашита в альфу (sigma ≈ 1.6 уровня, как
   в исходной текстуре); оно здесь не для фактуры, а чтобы градиент не полосил
   на 8-битных экранах.
   Один и тот же набор лежит и под редактором, и под каждым наложенным экраном:
   они непрозрачны и должны прятать редактор, поэтому красят фон сами, а не
   просвечивают каркас. */
.app,
.account-screen,
.results-screen,
.result-viewer,
.support-screen,
.legal-screen {
  background-color: var(--bg);
  background-image:
    url("../assets/noise.png"),
    radial-gradient(78% 46% at 50% 30%,
      rgba(255, 255, 255, .049) 0%,
      rgba(255, 255, 255, .020) 55%,
      rgba(255, 255, 255, 0) 100%);
  background-repeat: repeat, no-repeat;
  background-size: 128px 128px, 100% 100%;
}
/* Reshoot — приложение для телефона, и только для него. На большом экране
   вёрстка не «раскладывается» шире: показываем тот же кадр телефона по центру,
   чтобы правки было видно на компьютере при разработке. */
@media (min-width: 480px) {
  .app { height: min(920px, 100dvh); margin-top: max(0px, calc((100dvh - 920px) / 2)); border-radius: 28px; }
}

/* --------------------------------------------------------------- шапка */

/* Вырез и «чёлка»: в режиме «На экран Домой» строка состояния прозрачная,
   поэтому шапку нужно опустить под неё вручную. */
.topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: calc(14px + env(safe-area-inset-top, 0px))
           calc(8px + env(safe-area-inset-right, 0px))
           26px
           calc(8px + env(safe-area-inset-left, 0px));
  background: linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,0));
  pointer-events: none;
  transition: opacity .18s ease, transform .24s cubic-bezier(.32, .72, 0, 1);
}
.topbar > * { pointer-events: auto; }

/* До выбора снимка редактор ещё не начался: оставляем только постоянную
   точку входа в аккаунт, а действия с фотографией не показываем. */
.app.empty .topbar {
  background: none;
}
.app.empty .topbar > * { display: none; pointer-events: none; }
.app.empty .topbar .topbar-tools-group {
  display: flex;
  width: 40px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  pointer-events: auto;
}
.app.empty .topbar .topbar-source-group {
  display: flex;
  width: 40px;
  pointer-events: auto;
}
.app.empty .topbar-tools-group > :not(.topbar-source-group) {
  display: none;
  pointer-events: none;
}
.app.empty .topbar .topbar-source-group > * { display: none; pointer-events: none; }
.app.empty .topbar #btnAccount { display: grid; pointer-events: auto; }

/* Второстепенные действия выровнены одним левым контейнером, но сохраняют
   собственные поверхности. Общая капсула остаётся только у Undo/Redo. */
.topbar-tools-group {
  flex: 0 0 auto;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: visible;
}
.topbar-tools-group .topbar-source-group {
  gap: 6px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.topbar-tools-group .topbar-source-group .icon-btn {
  width: 40px;
  height: 40px;
  aspect-ratio: 1;
}

/* Парные действия собраны тем же способом, что и нижняя навигация: одна
   спокойная дорожка и отдельные полноразмерные зоны касания внутри неё. */
.topbar-control-group {
  flex: 0 0 auto;
  height: 40px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 999px;
  background: rgba(30,30,33,.86);
  -webkit-backdrop-filter: blur(18px) saturate(1.04);
  backdrop-filter: blur(18px) saturate(1.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

/* Верхняя панель визуально компактнее нижней шторки: это вспомогательная
   строка над кадром, а не второй крупный навигационный уровень. */
.icon-btn {
  flex: 0 0 auto;
  width: 38px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 999px;
  background: rgba(30,30,33,.86);
  -webkit-backdrop-filter: blur(18px) saturate(1.04);
  backdrop-filter: blur(18px) saturate(1.04);
  color: #a8a8af;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: background .15s, color .15s, opacity .15s;
}
.topbar-history-group .icon-btn {
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.icon-btn:active { background: rgba(255,255,255,.075); color: #e7e7ea; }
.icon-btn[disabled] { color: #505057; opacity: 1; }
.icon-btn:focus-visible {
  outline: 2px solid rgba(215,173,85,.58);
  outline-offset: -3px;
}
.icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#btnAccount {
  position: relative;
  overflow: hidden;
  padding: 0;
  aspect-ratio: 1;
}
#btnAccount.has-profile {
  background: rgba(229,180,92,.07);
  box-shadow: inset 0 0 0 1px rgba(229,180,92,.7);
}
.account-button-avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: inherit;
  filter: brightness(1.13) contrast(.97);
}
.account-button-initials {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #f5d89c;
  background: #29231a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.account-button-avatar[hidden],
.account-button-initials[hidden],
#btnAccount.has-profile .account-button-default { display: none; }
/* Главное действие в каждом инструменте оформлено одним компонентом:
   надпись меняется по контексту, а вес, контраст и поведение остаются теми же. */
.topbar-action {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  width: 98px;
  min-width: 98px;
  max-width: 98px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.055));
  color: #e8b75f;
  font-size: 13px;
  font-weight: 660;
  letter-spacing: -.01em;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.085),
    0 5px 16px rgba(0,0,0,.22);
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.topbar-action:active {
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(229,180,92,.09));
  border-color: rgba(229,180,92,.24);
  color: #f5c66c;
  transform: translateY(1px);
}
.topbar-action:focus-visible {
  outline: 2px solid rgba(229,180,92,.52);
  outline-offset: 2px;
}
.topbar-action:disabled {
  color: #665f52;
  border-color: rgba(255,255,255,.035);
  background: rgba(255,255,255,.025);
  opacity: 1;
  box-shadow: none;
}

/* Постоянный тёплый акцент делает главное действие заметным без пульсации. */
.topbar-action.reshoot-apply-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* «Пересъёмка» длиннее «Переснять»: оставляем место надписи внутри
     фиксированной капсулы, включая компактный вариант шириной 86px. */
  padding-inline: 4px;
}
.reshoot-apply-top {
  color: #241707;
  border-color: rgba(255, 221, 150, .65);
  background: linear-gradient(180deg, #f2c05f, #dfa83f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 14px rgba(0,0,0,.2);
}
.reshoot-apply-top:not(:disabled):active {
  color: #241707;
  border-color: #efbc59;
  background: #d69e36;
  transform: none;
}
.reshoot-apply-top:disabled {
  color: #75674f;
  border-color: rgba(229,180,92,.1);
  background: rgba(229,180,92,.12);
  box-shadow: none;
}

/* После успешной пересъёмки главным действием становится сохранение. Оно
   занимает место неактивных Undo/Redo, но сохраняет общий язык действий. */
.topbar.reshoot-result-mode .topbar-history-group,
.topbar.reshoot-result-mode #btnUndo,
.topbar.reshoot-result-mode #btnRedo { display: none; }
.topbar.reshoot-result-mode #btnExport {
  animation: reshoot-save-ready-in .36s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes reshoot-save-ready-in {
  from { opacity: 0; transform: scale(.86); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .topbar.reshoot-result-mode #btnExport { animation: none; }
}

.compare {
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  width: 40px;
  max-width: 40px;
  min-width: 40px;
  height: 40px;
  margin: 0;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 999px;
  background: rgba(30,30,33,.86);
  color: #a8a8af;
  -webkit-backdrop-filter: blur(18px) saturate(1.04);
  backdrop-filter: blur(18px) saturate(1.04);
  padding: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: background .16s, color .16s, border-color .16s, transform .12s;
}
.compare[aria-pressed="false"] {
  background: rgba(30,30,33,.86);
  color: #a8a8af;
  border-color: rgba(255,255,255,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.compare:active { transform: scale(.94); }
.compare:focus-visible {
  outline: 2px solid rgba(215,173,85,.55);
  outline-offset: -2px;
}
.compare-icon {
  grid-area: 1 / 1;
  width: 19px;
  height: 19px;
  background: currentColor;
  transition: opacity .16s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}
.compare-icon-after {
  -webkit-mask: url("../assets/icons/iconoir-eye.svg") center / contain no-repeat;
  mask: url("../assets/icons/iconoir-eye.svg") center / contain no-repeat;
}
.compare-icon-before {
  -webkit-mask: url("../assets/icons/iconoir-eye-closed.svg") center / contain no-repeat;
  mask: url("../assets/icons/iconoir-eye-closed.svg") center / contain no-repeat;
}
.compare[aria-pressed="true"] .compare-icon-after,
.compare[aria-pressed="false"] .compare-icon-before {
  opacity: 1;
  transform: scale(1);
}
.compare[aria-pressed="true"] .compare-icon-before,
.compare[aria-pressed="false"] .compare-icon-after {
  opacity: 0;
  transform: scale(.72);
}
.compare.off { opacity: .42; }      /* фотографии ещё нет — сравнивать нечего */

/* На компактных iPhone все контекстные действия синхронно переходят на
   меньшую фиксированную ширину. Это сохраняет одинаковую геометрию и
   оставляет место двум действиям в режиме готового Reshoot. */
@media (max-width: 399px) {
  .topbar-action {
    width: 86px;
    min-width: 86px;
    max-width: 86px;
    padding-inline: 8px;
    font-size: 11.75px;
  }
}

/* На узких корпусах сохраняем высоту строки, но чуть поджимаем ширину парных
   иконок. Так между группами остаётся воздух даже на 360 pt. */
@media (max-width: 374px) {
  .topbar {
    gap: 5px;
    padding-left: calc(7px + env(safe-area-inset-left, 0px));
    padding-right: calc(7px + env(safe-area-inset-right, 0px));
  }
  .topbar-control-group .icon-btn { width: 36px; }
}

/* На самом узком поддерживаемом экране сохраняем важные для редактирования
   действия и полноразмерную высоту целей. Аккаунт по-прежнему доступен на
   стартовом экране, а в редакторе его место отдаём управлению снимком. */
@media (max-width: 340px) {
  .topbar-source-group #btnAccount { display: none; }
}

/* --------------------------------------------------------------- сцена */

.stage {
  --preview-safe-top: 60px;
  --preview-safe-bottom: 8px;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  /* Строка задана явно, а не auto. С auto высота строки зависит от снимка,
     а процентная max-height снимка — от строки; круг не разрывается, и браузер
     считает процент как none. Тогда высокий кадр перерастает сцену и уходит
     под шторку: на портрете 9:16 срезалась треть. */
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  overflow: hidden;
  background: var(--bg);
  /* Жесты внутри сцены принадлежат фотографии. Браузер не должен
     масштабировать вместе с ней меню и панели приложения. */
  touch-action: none;
}
.stage > canvas {
  /* Layout size is independent of the adaptive bitmap resolution. The box
     remains tightly fitted to the photo for crop handles and pinch gestures. */
  width: var(--preview-display-width, auto);
  height: var(--preview-display-height, auto);
  max-width: 100%;
  max-height: calc(100% - var(--preview-safe-top) - var(--preview-safe-bottom));
  display: block;
  object-fit: contain;
  transform:
    translate3d(
      var(--preview-pan-x, 0px),
      calc(
        (var(--preview-safe-top) - var(--preview-safe-bottom)) / 2
        + var(--preview-pan-y, 0px)
        + var(--preview-fit-y, 0px)
      ),
      0
    )
    scale(var(--preview-fit-scale, 1))
    scale(var(--preview-zoom, 1))
    scale(var(--frame-live-scale, 1));
  transform-origin: center;
  will-change: contents, transform;
  /* иначе долгое нажатие на кадр вызывает системное «Сохранить изображение» */
  -webkit-touch-callout: none;
  pointer-events: none;
}
/* Базовый размер фотографии одинаков во всех обычных разделах, включая AI.
   Плавающие инструменты не меняют масштаб при переходе между вкладками. */
.app:not(.empty) .stage:not(.cropping) {
  grid-template-rows: var(--photo-area-height, minmax(0, 1fr));
}
.frame-live-layer {
  position: absolute;
  pointer-events: none;
  background: #f1eee7;
  transform:
    scaleX(var(--frame-live-layer-x, 1))
    scaleY(var(--frame-live-layer-y, 1));
  transform-origin: center;
  will-change: transform;
}
/* В режиме кадрирования весь активный кадр живёт в безопасной области:
   ниже кнопок шапки и выше открытой панели. 29px — это 21px внешней
   половины touch-зоны ручки плюс 8px воздуха.

   Важно: padding здесь не подходит — Safari считает процентную высоту
   canvas вместе с ним и в итоге оставляет пустоту сверху, но прижимает
   нижнюю ручку к панели. Поэтому ограничиваем высоту явно и смещаем центр
   canvas в центр асимметричной безопасной области. */
.stage.cropping {
  --preview-safe-top: 81px; /* JS заменяет на фактический низ кнопок + 29px */
  --preview-safe-bottom: 29px;
}
.stage.cropping > canvas {
  max-width: calc(100% - 58px);
}
.stage.cropping { cursor: grab; }
.stage.crop-gesturing { cursor: grabbing; }
.stage.preview-gesturing { cursor: grabbing; }

/* Свет и рассеянные области живут поверх фотографии только во время ожидания.
   Уменьшенные копии готовятся один раз: общий расфокус и две широкие волны.
   В анимации меняются только прозрачность и положение масок, не радиус blur.
   Встречное смещение копии оставляет детали снимка на исходных местах. */
.reshoot-light {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
}
.reshoot-light::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(245, 198, 108, .78),
    inset 0 0 48px rgba(229, 180, 92, .48),
    inset 0 0 110px rgba(229, 180, 92, .2),
    0 0 16px rgba(229, 180, 92, .4),
    0 0 38px rgba(229, 180, 92, .25);
}
.reshoot-depth {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 2px;
  opacity: 0;
  transition: opacity .45s ease;
}
.stage.busy .reshoot-light.has-depth .reshoot-depth { opacity: 1; }
.reshoot-depth-zone {
  position: absolute;
  /* Запас за краями кадра не даёт движущейся маске обрезаться прямой линией.
     Область в 1.5 раза больше фото; смещения ниже учитывают этот масштаб. */
  inset: -25%;
  -webkit-mask-image: var(--depth-mask);
  mask-image: var(--depth-mask);
  opacity: .9;
}
.reshoot-depth-zone::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(244, 191, 100, .16);
}
.reshoot-depth-zone-near {
  --depth-mask: radial-gradient(ellipse 36% 34.667% at 42% 56.667%, #000 24%, rgba(0,0,0,.9) 48%, transparent 100%);
  --depth-duration: 7.2s;
  --depth-delay: -2.1s;
  --depth-blur: 18px;
}
.reshoot-depth-zone-far {
  --depth-mask: radial-gradient(ellipse 33.333% 37.333% at 62% 40%, #000 22%, rgba(0,0,0,.86) 48%, transparent 100%);
  --depth-duration: 9.6s;
  --depth-delay: -5.8s;
  --depth-blur: 28px;
}
.stage .reshoot-depth-snapshot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: fill;
  filter: blur(var(--depth-blur));
  transform: none;
  will-change: auto;
}
.stage .reshoot-depth-zone .reshoot-depth-snapshot {
  inset: 16.666667%;
  width: 66.666667%;
  height: 66.666667%;
}
.stage.busy .reshoot-depth-zone {
  animation: reshoot-depth-drift var(--depth-duration) var(--depth-delay) ease-in-out infinite;
  will-change: transform, opacity;
}
.stage .reshoot-depth-base {
  --depth-blur: 5px;
  opacity: .52;
}
.stage.busy .reshoot-depth-base {
  animation: reshoot-depth-breathe 5.6s ease-in-out infinite;
  will-change: opacity;
}
.stage.busy .reshoot-depth-zone .reshoot-depth-snapshot {
  animation: reshoot-depth-anchor var(--depth-duration) var(--depth-delay) ease-in-out infinite;
  will-change: transform;
}
@keyframes reshoot-depth-drift {
  0%, 100% { transform: translate(-8%, 5.333333%); opacity: .7; }
  35% { transform: translate(9.333333%, -6.666667%); opacity: .96; }
  68% { transform: translate(-2.666667%, -10.666667%); opacity: .82; }
}
@keyframes reshoot-depth-anchor {
  0%, 100% { transform: translate(12%, -8%); }
  35% { transform: translate(-14%, 10%); }
  68% { transform: translate(4%, 16%); }
}
@keyframes reshoot-depth-breathe {
  0%, 100% { opacity: .44; }
  50% { opacity: .64; }
}
.stage.busy .reshoot-light {
  opacity: 1;
  visibility: visible;
}
.stage.busy .reshoot-light::before {
  animation: reshoot-light-breathe 3.6s ease-in-out infinite;
  will-change: opacity;
}
.stage.reshoot-success .reshoot-light {
  visibility: visible;
  animation: reshoot-light-release .8s ease-out both;
}
.reshoot-status {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  pointer-events: none;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(14,14,16,.86);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 5px 20px rgba(0,0,0,.2);
}
.reshoot-status[hidden] { display: none; }
.reshoot-status-light {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(229, 180, 92, .5);
}
.app.reshoot-busy .reshoot-status-light {
  animation: reshoot-light-breathe 3.6s ease-in-out infinite;
}
.reshoot-status-copy { min-width: 0; }
.reshoot-status-title {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -.2px;
}
.reshoot-status-selection {
  margin: 4px 0 0;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 17px;
  max-height: 34px;
  overflow: hidden;
  text-wrap: balance;
}
.app.reshoot-busy .topbar-tools-group,
.app.reshoot-busy .tool-card,
.app.reshoot-busy .panel-body,
.app.reshoot-busy .panel-handle,
.app.reshoot-busy .tabbar { opacity: .6; }
.app.reshoot-busy .stage { pointer-events: none; }
@keyframes reshoot-light-breathe {
  0%, 100% { opacity: .58; }
  50% { opacity: 1; }
}
@keyframes reshoot-light-release {
  from { opacity: .65; }
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reshoot-light, .reshoot-depth { transition: none; }
  .stage.busy .reshoot-depth-zone { animation: none; opacity: .9; }
  .stage.busy .reshoot-depth-base,
  .stage.busy .reshoot-depth-zone .reshoot-depth-snapshot { animation: none; will-change: auto; }
  .stage.busy .reshoot-light::before,
  .app.reshoot-busy .reshoot-status-light { animation: none; opacity: .65; }
  .stage.reshoot-success .reshoot-light { animation: none; opacity: 0; }
}
@media (max-height: 650px) {
  .reshoot-status-selection { white-space: nowrap; text-overflow: ellipsis; }
}

/* Рамка кадрирования и сетка третей. DOM постоянный: во время жеста меняются
   только размеры рамки, поэтому сетка не вызывает лишних перерасчётов. */
.guides { position: absolute; inset: 0; pointer-events: none; display: none; }
.guides.on { display: block; }
.crop-frame {
  position: absolute;
  border: 1px solid rgba(255,255,255,.68);
  box-shadow: 0 0 0 9999px rgba(0,0,0,.28);
  pointer-events: auto;
  touch-action: none;
  cursor: move;
}
.guides .g-line {
  position: absolute;
  display: block;
  background: rgba(255,255,255,.38);
  transition: background .14s;
  pointer-events: none;
}
.guides .g-v { top: 0; bottom: 0; width: 1px; }
.guides .g-h { left: 0; right: 0; height: 1px; }
.guides .g-v1 { left: 33.333%; }
.guides .g-v2 { left: 66.666%; }
.guides .g-h1 { top: 33.333%; }
.guides .g-h2 { top: 66.666%; }
.stage.crop-gesturing .g-line,
.stage.crop-resizing .g-line { background: rgba(255,255,255,.62); }

.crop-corner {
  position: absolute;
  display: block;
  width: 42px;
  height: 42px;
  pointer-events: auto;
  touch-action: none;
}
.crop-corner::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: #fff;
  border-style: solid;
}
.crop-corner-tl { left: -21px; top: -21px; }
.crop-corner-tr { right: -21px; top: -21px; }
.crop-corner-bl { left: -21px; bottom: -21px; }
.crop-corner-br { right: -21px; bottom: -21px; }
.crop-corner-tl::after { right: 1px; bottom: 1px; border-width: 3px 0 0 3px; }
.crop-corner-tr::after { left: 1px; bottom: 1px; border-width: 3px 3px 0 0; }
.crop-corner-bl::after { right: 1px; top: 1px; border-width: 0 0 3px 3px; }
.crop-corner-br::after { left: 1px; top: 1px; border-width: 0 3px 3px 0; }

.crop-edge {
  position: absolute;
  display: block;
  pointer-events: auto;
  touch-action: none;
}
.crop-edge::after {
  content: '';
  position: absolute;
  border-radius: 2px;
  background: #fff;
}
.crop-edge-n, .crop-edge-s {
  left: 50%;
  width: 54px;
  height: 32px;
  transform: translateX(-50%);
}
.crop-edge-n { top: -16px; }
.crop-edge-s { bottom: -16px; }
.crop-edge-n::after, .crop-edge-s::after {
  left: 16px;
  width: 22px;
  height: 3px;
}
.crop-edge-n::after { bottom: 14px; }
.crop-edge-s::after { top: 14px; }
.crop-edge-e, .crop-edge-w {
  top: 50%;
  width: 32px;
  height: 54px;
  transform: translateY(-50%);
}
.crop-edge-e { right: -16px; }
.crop-edge-w { left: -16px; }
.crop-edge-e::after, .crop-edge-w::after {
  top: 16px;
  width: 3px;
  height: 22px;
}
.crop-edge-e::after { left: 14px; }
.crop-edge-w::after { right: 14px; }

.crop-zoom {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(18,18,20,.78);
  color: #fff;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity .14s, transform .14s;
  backdrop-filter: blur(10px);
}
.stage.crop-gesturing .crop-zoom {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Пустой экран: самостоятельное приглашение выбрать исходный снимок. */
.dropzone {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Блок центрируется, а не липнет к верху: свободная высота уходит поровну
     вверх и вниз. `safe center` не даёт обрезать верх, если контент не влез. */
  justify-content: center;
  justify-content: safe center;
  overflow: hidden auto;
  padding:
    calc(48px + env(safe-area-inset-top, 0px))
    max(24px, env(safe-area-inset-right, 0px))
    calc(20px + env(safe-area-inset-bottom, 0px))
    max(24px, env(safe-area-inset-left, 0px));
  /* Фон не свой: стартовый экран лежит на общей земле приложения (.app). */
  color: var(--text);
  text-align: center;
  overscroll-behavior: contain;
}
.dropzone.hidden { display: none; }

/* Вектор: обводки держат 1px на любом экране, поля вокруг рисунка обрезаны,
   поэтому ширина меньше прежней, а сама иллюстрация — крупнее.
   Третье ограничение в min() — по высоте экрана: на низких экранах
   иллюстрация ужимается плавно, а не ступенькой. */
.dropzone-hero {
  flex: 0 0 auto;
  width: min(84vw, 348px, 40dvh);
  height: auto;
  margin: 0 0 clamp(10px, 2.6dvh, 30px);
  display: block;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

.dropzone-copy {
  position: relative;
  z-index: 1;
  width: min(100%, 360px);
}
.dropzone-copy h1 {
  margin: 0;
  color: #f1f1f2;
  font-size: clamp(28px, min(8.4vw, 5dvh), 39px);
  /* 450 без вариативного шрифта округляется до 400 и теряет контраст
     с подписью — в референсе заголовок читается как жирный */
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.dropzone-copy p {
  max-width: 340px;
  margin: clamp(10px, 1.7dvh, 18px) auto 0;
  color: #8f8f94;
  font-size: clamp(14px, min(4vw, 2.4dvh), 17px);
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: -.012em;
  text-wrap: balance;
}

.dropzone-actions {
  position: relative;
  z-index: 1;
  width: min(100%, 252px);
  margin-top: clamp(20px, 4.4dvh, 44px);
  display: grid;
  /* Строка съёмки жмётся ближе к кнопке, чем две пилюли друг к другу:
     так она читается как продолжение того же выбора, а не как отдельный блок. */
  gap: clamp(4px, 1.1dvh, 10px);
}
/* Единственное действие экрана. Оформление то же, что у «Переснять» в шапке:
   нейтральная светлая кромка и стеклянная заливка, золото — только в тексте.
   Золотая обводка читалась как украшение и спорила со второй кнопкой.
   Размер крупнее шапочного чипа: там это элемент плотной панели, здесь —
   единственная цель на пустом экране. */
.start-action {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(54px, 8.3dvh, 68px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .055));
  color: #e8b75f;
  font-size: clamp(17px, min(4.8vw, 2.6dvh), 20px);
  font-weight: 620;
  line-height: 1;
  letter-spacing: -.015em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .085),
    0 8px 22px rgba(0, 0, 0, .26);
  cursor: pointer;
  transition:
    color .15s ease,
    border-color .15s ease,
    background .15s ease,
    transform .15s ease;
}
.start-action > span {
  position: relative;
  z-index: 1;
}
.start-action:active {
  background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(229, 180, 92, .09));
  border-color: rgba(229, 180, 92, .24);
  color: #f5c66c;
  transform: translateY(1px);
}

/* Блик тот же, что у «Переснять», но в один проход. В шапке проходов два:
   кнопка появляется посреди работы, взгляд в этот момент на снимке, и второй
   проход ловит человека, когда он посмотрел обратно. Здесь кнопка единственная
   и на неё смотрят с первой секунды — повтор пришёлся бы на момент, когда
   человек уже читает или нажимает, и читался бы как дёрганье.
   Сама вспышка по скорости и форме идентична шапочной: те же 0.88с разгона
   на той же кривой, просто без пятисекундного хвоста ожидания второго прохода. */
.start-action::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -20px;
  bottom: -20px;
  left: -46px;
  width: 26px;
  border-radius: 999px;
  background: rgba(255, 232, 178, .3);
  box-shadow:
    0 0 8px 4px rgba(255, 220, 143, .1),
    0 0 18px 8px rgba(229, 180, 92, .05);
  filter: blur(1.8px);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0) rotate(12deg);
  will-change: transform, opacity;
  animation: start-cta-sheen .88s .9s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes start-cta-sheen {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(12deg);
  }
  20% { opacity: .8; }
  100% {
    opacity: 0;
    transform: translate3d(340px, 0, 0) rotate(12deg);
  }
}

/* Съёмка — вторичный путь, поэтому строкой, а не второй пилюлей. Светлее
   подписи над ней, чтобы читалась как управление, а не как текст. */
.start-camera {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  color: #a9a9af;
  font-size: clamp(15px, min(4.1vw, 2.2dvh), 17px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: color .15s ease;
}
.start-camera:active { color: #e8b75f; }
.start-camera:focus-visible {
  outline: 2px solid rgba(229, 180, 92, .52);
  outline-offset: 3px;
  border-radius: 999px;
}
.start-action:focus-visible {
  outline: 2px solid rgba(229, 180, 92, .72);
  outline-offset: 3px;
}

/* Ступенчатых брейкпоинтов по высоте здесь больше нет: размеры и отступы
   заданы через min()/clamp() с dvh и сжимаются плавно. Осталось одно
   исключение — совсем низкие экраны, где выгоднее растянуть кнопки вширь. */
@media (max-height: 560px) {
  .dropzone-actions { width: min(100%, 320px); }
}

@media (prefers-reduced-motion: reduce) {
  .start-action,
  .start-camera { transition: none; }
  .start-action::before { animation: none; }
}

/* --------------------------------------------------------------- панель */

.panel {
  flex: 0 0 auto;
  height: 46dvh;                    /* стартовое значение, дальше управляет JS */
  min-height: 0;
  overflow: hidden;
  background: var(--panel);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 0 0 4px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 30px rgba(0,0,0,.5);
  transition:
    height var(--panel-motion),
    opacity .18s ease;
}
.panel.dragging { transition: none; }

.app.empty .panel {
  height: 0 !important;
  min-height: 0;
  padding-bottom: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: none;
}

/* ------------------------------------------- плавающая карточка со шкалой */

/* Шкалу крутят, глядя на снимок, поэтому она лежит у самого кадра, а не
   отнимает у него высоту. Выбор параметра при этом остаётся внизу: его
   трогают изредка, и ему нужно постоянное место под большим пальцем. */
.tool-card {
  position: absolute;
  z-index: 4;
  left: 50%;
  width: min(74%, 340px);
  max-width: calc(100% - 48px);
  bottom: calc(var(--tools-bottom, 300px) + 12px);
  padding: 10px 14px 7px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 22px;
  background: rgba(14, 14, 16, .52);
  backdrop-filter: blur(26px) saturate(1.06);
  -webkit-backdrop-filter: blur(26px) saturate(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 14px 36px rgba(0, 0, 0, .28);
  opacity: 1;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: none;
  /* Положение следует за фактической высотой панели через ResizeObserver.
     Второй переход bottom создал бы задержку относительно самой панели. */
  transition: opacity .17s ease;
}
/* Пока шторку тянут пальцем, карточка должна идти за ней без запаздывания */
.app:has(.panel.dragging) .tool-card { transition: none; }
.tool-card[hidden] { display: none; }
.tool-card:not(.reshoot-tool-card).photo-preview-hidden {
  opacity: 0;
  pointer-events: none;
}
.tool-card.reshoot-tool-card {
  width: calc(100% - 46px);
  max-width: 430px;
  bottom: calc(var(--tools-bottom, 220px) + 9px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  animation: none;
  transition: none;
}
.tool-card.reshoot-tool-card.photo-preview-hidden {
  pointer-events: none;
}
.reshoot-tool-card .reshoot-carousel-shell,
.reshoot-tool-card .reshoot-selection-summary {
  opacity: var(--reshoot-menu-opacity, 1);
  transition: opacity var(--panel-motion);
}
.app:has(.panel.dragging) .reshoot-tool-card .reshoot-carousel-shell,
.app:has(.panel.dragging) .reshoot-tool-card .reshoot-selection-summary { transition: none; }
/*
 * Проявляем сами backdrop-слои, а не их прозрачного родителя: так WebKit
 * композитит матовое стекло и содержимое одним кадром без запаздывания blur.
 */
.tool-card.reshoot-tool-card.photo-preview-hidden .reshoot-carousel-shell,
.tool-card.reshoot-tool-card.photo-preview-hidden .reshoot-selection-summary {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .panel,
  .panel-body,
  .tool-card,
  .reshoot-tool-card .reshoot-carousel-shell,
  .reshoot-tool-card .reshoot-selection-summary,
  .tool-card.reshoot-tool-card { transition: none; }
}

.tool-scale {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}
.tool-scale-labels {
  position: relative;
  height: 14px;
  margin-inline: 10px;
  font-size: 10px;
}
.tool-scale-labels span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.tool-scale-track {
  position: relative;
  height: 31px;
  margin-inline: 10px;
  touch-action: none;
}
.tool-scale-rail {
  display: none;
  position: absolute;
  inset: 12px 0 auto;
  height: 5px;
  border-radius: 999px;
  pointer-events: none;
}
.tool-scale-progress {
  display: none;
  position: absolute;
  pointer-events: none;
}
.tool-scale-ticks { position: absolute; inset: 0; }
.tool-scale-ticks i {
  position: absolute;
  top: 10px;
  width: 1px;
  height: 9px;
  background: rgba(224, 224, 228, .42);
  transform: translateX(-.5px);
}
.tool-scale-ticks i.major {
  top: 8px;
  height: 13px;
  background: rgba(235, 235, 238, .62);
}
.tool-scale-ticks i.five {
  top: 5px;
  height: 19px;
  background: rgba(245, 245, 247, .78);
}
.tool-scale-cursor {
  position: absolute;
  z-index: 2;
  top: 2px;
  width: 2px;
  height: 25px;
  border-radius: 2px;
  background: var(--accent);
  transform: translateX(-1px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
  transition: left .08s linear;
  pointer-events: none;
}
.tool-scale.dragging .tool-scale-cursor { transition: none; }
.tool-scale.zero-snapped .tool-scale-cursor {
  top: 0;
  height: 29px;
  box-shadow: 0 0 7px rgba(229, 180, 92, .5);
}
.tool-scale-value {
  display: block;
  width: 100%;
  padding-top: 1px;
  color: #f3bf54;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.tool-scale.zero-snapped .tool-scale-value {
  text-shadow: 0 0 9px rgba(229, 180, 92, .55);
}
.tool-scale-value:focus-visible {
  outline: 1px solid rgba(229, 180, 92, .75);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Цвет — не измерительный прибор. Та же точная механика drag остаётся,
   но диапазон объясняется собственным цветом и тремя смысловыми опорами. */
.tool-scale.chromatic-scale .tool-scale-labels {
  height: 18px;
  margin-inline: 10px;
  font-size: 10.5px;
  color: rgba(211, 211, 216, .68);
  letter-spacing: -.01em;
}
.tool-scale.chromatic-scale .tool-scale-labels span:first-child {
  transform: none;
}
.tool-scale.chromatic-scale .tool-scale-labels span:last-child {
  transform: translateX(-100%);
}
.tool-scale.chromatic-scale .tool-scale-track {
  height: 32px;
}
.tool-scale.chromatic-scale .tool-scale-rail {
  display: block;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 2px 12px rgba(0, 0, 0, .34);
}
.tool-scale.chromatic-scale[data-chromatic="temperature"] .tool-scale-rail {
  background: linear-gradient(
    90deg,
    #357fd2 0%,
    #6fa5d8 24%,
    #c7c5bd 50%,
    #e7bd6e 76%,
    #f1a928 100%
  );
}
.tool-scale.chromatic-scale[data-chromatic="saturation"] .tool-scale-rail {
  background: linear-gradient(
    90deg,
    #66686e 0%,
    #8d8b86 45%,
    #bd9f64 68%,
    #efb536 100%
  );
}
.tool-scale.chromatic-scale .tool-scale-ticks {
  display: none;
}
.tool-scale.chromatic-scale .tool-scale-cursor {
  top: 4px;
  width: 21px;
  height: 21px;
  border: 2px solid rgba(20, 20, 22, .88);
  border-radius: 50%;
  background: #f7f7f8;
  transform: translateX(-50%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .72),
    0 3px 9px rgba(0, 0, 0, .48);
}
.tool-scale.chromatic-scale.dragging .tool-scale-cursor {
  transform: translateX(-50%) scale(1.08);
}
.tool-scale.chromatic-scale.zero-snapped .tool-scale-cursor {
  top: 3px;
  height: 23px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .86),
    0 0 12px rgba(255, 255, 255, .28),
    0 3px 10px rgba(0, 0, 0, .5);
}
.tool-scale.chromatic-scale .tool-scale-value {
  padding-top: 0;
}
.tool-scale.chromatic-scale.zero-snapped .tool-scale-value {
  text-shadow: 0 0 10px rgba(229, 180, 92, .42);
}

/* В эффектах важнее характер правки, чем ощущение измерительного прибора.
   Оставляем ту же точную механику drag, но показываем только диапазон,
   заполнение и текущее значение — без частой разметки. */
.tool-card:has(.fx-tool-scale) {
  width: min(74%, 340px);
  padding: 10px 14px 7px;
}
.fx-tool-scale .tool-scale-labels {
  height: 18px;
  margin-inline: 10px;
  color: rgba(211, 211, 216, .68);
  font-size: 10.5px;
  letter-spacing: -.01em;
}
.fx-tool-scale .tool-scale-labels span {
  display: none;
}
.fx-tool-scale .tool-scale-labels span:first-child,
.fx-tool-scale .tool-scale-labels span:last-child {
  display: block;
}
.fx-tool-scale .tool-scale-labels span:first-child {
  transform: none;
}
.fx-tool-scale .tool-scale-labels span:last-child {
  transform: translateX(-100%);
}
.fx-tool-scale .tool-scale-track {
  height: 32px;
  margin-inline: 10px;
}
.fx-tool-scale .tool-scale-rail,
.fx-tool-scale .tool-scale-progress {
  display: block;
  top: 12px;
  left: 0;
  height: 5px;
  border-radius: 999px;
}
.fx-tool-scale .tool-scale-rail {
  right: 0;
  background: rgba(211, 211, 216, .25);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 2px 12px rgba(0, 0, 0, .34);
}
.fx-tool-scale .tool-scale-progress {
  background: var(--accent);
  box-shadow: none;
}
.fx-tool-scale .tool-scale-ticks {
  display: none;
}
.fx-tool-scale .tool-scale-cursor {
  top: 4px;
  width: 21px;
  height: 21px;
  border: 2px solid rgba(20, 20, 22, .88);
  border-radius: 50%;
  background: #f7f7f8;
  transform: translateX(-50%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .72),
    0 3px 9px rgba(0, 0, 0, .48);
}
.fx-tool-scale.dragging .tool-scale-cursor {
  transform: translateX(-50%) scale(1.08);
}
.fx-tool-scale.zero-snapped .tool-scale-cursor {
  top: 3px;
  height: 23px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .86),
    0 0 12px rgba(255, 255, 255, .28),
    0 3px 10px rgba(0, 0, 0, .5);
}
.fx-tool-scale .tool-scale-value {
  padding-top: 0;
}
/* Дорожка целиком — зона захвата: у нативного range она узкая до бесполезного */
input.tool-scale-input[type=range] {
  position: absolute;
  z-index: 3;
  inset: -10px;
  width: auto;
  margin: 0;
  opacity: .001;
  pointer-events: none;
  touch-action: none;
}
/* Пока крутят — подложка расступается: именно в этот момент нужен снимок,
   а не карточка. Содержимое остаётся непрозрачным. */
.tool-card:has(.dragging) {
  background: rgba(14, 14, 16, .36);
}


/* Ручка: широкая зона захвата, тянется и сворачивается по нажатию */
.panel-handle {
  flex: 0 0 auto;
  height: 32px;
  display: grid;
  place-items: center;
  touch-action: none;
}
.panel-handle .grabber {
  width: 30px; height: 4px;
  border-radius: 999px;
  background: #4a4a50;
  transition: background .16s, width .16s;
}
.panel-handle:active .grabber,
.panel.dragging .grabber { background: var(--text-faint); width: 48px; }
.panel.collapsed .grabber { background: var(--accent); }

.panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 14px 10px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transition: opacity .18s;
}
.panel-body::-webkit-scrollbar { width: 0; }
.panel-body.crop-no-scroll {
  overflow: hidden;
  overscroll-behavior: none;
}
.panel-body.focus-no-scroll {
  overflow: hidden;
  overscroll-behavior: none;
  padding-bottom: 8px;
}
.panel.steady-panel .panel-handle {
  height: 24px;
}
.panel-body.steady-no-scroll {
  padding-top: 8px;
  padding-bottom: 8px;
}
.panel.collapsed .panel-body { opacity: 0; pointer-events: none; }

.pane { display: none; }
.pane.on { display: block; }

/* ------------------------------- цвет, свет и эффекты: точный параметр */

.color-pane,
.light-pane,
.fx-pane {
  padding: 0 1px 1px;
}
input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px;
  background: transparent;
  margin: 0;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px;
  background: var(--track, #4a4a50);
}
input[type=range]::-moz-range-track {
  height: 3px; border-radius: 2px;
  background: var(--track, #4a4a50);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; margin-top: -7.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border: none;
  border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* --------------------------------------------------------------- чипы */

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1.5px solid transparent;
  color: var(--text-dim);
  font-size: 13.5px;
  white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
  transition: all .15s;
}
.chip.on { border-color: var(--accent); color: var(--accent); background: rgba(229,180,92,.07); }
.chip.wide { width: 100%; justify-content: center; }   /* отдельная кнопка, не в ряду */
.chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* --------------------------------------------------------- кадрирование */

.crop-pane {
  padding: 6px 1px 0;
}

.aspect-chips,
.param-chips {
  display: flex;
  gap: 6px;
  overflow: visible;
  margin: 0;
  padding: 3px 0 6px;
}

.aspect-chips .chip,
.param-chips .chip {
  flex: 1 1 0;
  min-width: 0;
  height: 42px;
  justify-content: center;
  padding: 0 6px;
  border-radius: 12px;
  font-size: 13px;
}
.param-chips .chip {
  height: 46px;
}
.aspect-chips .chip:focus-visible,
.param-chips .chip:focus-visible {
  outline: 2px solid rgba(229,180,92,.65);
  outline-offset: 2px;
}
/* Все нижние переключатели используют один сегментированный модуль.
   Иконок здесь нет: подписи короткие и знакомые, иконка повторяла их смысл
   и забирала ширину, которая на мобильном нужна самому слову. Иконки
   остаются только в нижней навигации, где они работают как инструменты. */
.color-param-chips,
.light-param-chips,
.aspect-chips,
.fx-param-chips,
.reshoot-categories {
  box-sizing: border-box;
  display: flex;
  width: calc(100% - 20px);
  height: 56px;
  gap: 0;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .05);
  /* Дорожка скруглена так же, как капсула внутри неё: одна форма, вложенная
     в себя же. Прямоугольник с меньшим радиусом читался отдельной деталью. */
  border-radius: 999px;
  background: #1e1e21;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
/* У форматов пять плотных сегментов. Небольшой внутренний inset дорожки
   отводит крайние выбранные плашки от контура, не сжимая длинное «Свободно»:
   ширина распределяется между всеми сегментами, а не вычитается из одного. */
.aspect-chips { padding-inline: 3px; }
.color-param-chips .chip,
.light-param-chips .chip,
.aspect-chips .chip,
.fx-param-chips .chip,
.reshoot-categories button {
  position: relative;
  display: flex;
  flex: 1 1 0;
  height: 54px;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #9d9da3;
  font-size: 10.5px;
  font-weight: 560;
  line-height: 1;
  letter-spacing: -.01em;
  text-align: center;
  transition: color .18s ease;
}
/* Капсула — отдельный слой под подписью. Кнопка остаётся во всю высоту и
   ширину своей доли, поэтому зона нажатия шире видимой капсулы. */
.color-param-chips .chip::before,
.light-param-chips .chip::before,
.fx-param-chips .chip::before,
.aspect-chips .chip::before,
.reshoot-categories button::before {
  content: '';
  position: absolute;
  inset: 10px 3px;
  border-radius: 999px;
  background: transparent;
  transition: background .18s ease, box-shadow .18s ease;
  pointer-events: none;
}
.color-param-chips .chip > span,
.light-param-chips .chip > span,
.aspect-chips .chip > span,
.fx-param-chips .chip > span,
.reshoot-categories button > span {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Кегль подписи задаёт плотность ряда. Ряды из двух и трёх сегментов берут
   более крупное слово: там оно свободно лежит в капсуле. В рядах из четырёх
   и пяти самое длинное русское слово («Свободно», «Экспозиция») при 12px
   упирается в края капсулы, поэтому подпись там остаётся мельче. */
.color-param-chips .chip,
.reshoot-categories button {
  padding: 0 6px;
  font-size: 12px;
  letter-spacing: -.005em;
}
/* Капсула одна на все ряды и на нижнюю навигацию. Раньше в плотных рядах она
   выглядела лозенгом, но виновата была обводка: контур обводил форму и делал
   заметным, что прямой участок короче скруглений. Без обводки остаётся мягкое
   пятно света, и та же капсула читается ровно при любой ширине сегмента. */
.color-param-chips .chip::before,
.reshoot-categories button::before {
  inset: 10px 6px;
}
.color-param-chips .chip.on,
.light-param-chips .chip.on,
.aspect-chips .chip.on,
.fx-param-chips .chip.on,
.reshoot-categories button.on {
  color: #f2efe9;
  font-weight: 640;
}
/* Капсула — нейтральный материал, а не цветная заливка. Золотая плашка
   выдавала себя за поверхность, оставаясь пятном краски; светлое стекло
   с кромкой по верхнему краю ведёт себя как приподнятый объект и не тратит
   акцент. Золото остаётся там, где отмечает выбор: иконка активного пункта
   навигации и рамка выбранной камеры. */
.color-param-chips .chip.on::before,
.light-param-chips .chip.on::before,
.aspect-chips .chip.on::before,
.fx-param-chips .chip.on::before,
.reshoot-categories button.on::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .055));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}
.color-param-chips .chip:active::before,
.light-param-chips .chip:active::before,
.aspect-chips .chip:active::before,
.fx-param-chips .chip:active::before,
.reshoot-categories button:active::before {
  background: rgba(255, 255, 255, .05);
}
.color-param-chips .chip.on:active::before,
.light-param-chips .chip.on:active::before,
.aspect-chips .chip.on:active::before,
.fx-param-chips .chip.on:active::before,
.reshoot-categories button.on:active::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .08));
}
.color-param-chips .chip:focus-visible,
.light-param-chips .chip:focus-visible,
.aspect-chips .chip:focus-visible,
.fx-param-chips .chip:focus-visible,
.reshoot-categories button:focus-visible {
  outline: none;
}
.color-param-chips .chip:focus-visible::before,
.light-param-chips .chip:focus-visible::before,
.aspect-chips .chip:focus-visible::before,
.fx-param-chips .chip:focus-visible::before,
.reshoot-categories button:focus-visible::before {
  box-shadow: 0 0 0 2px rgba(215, 173, 85, .5);
}

@media (max-width: 359px) {
  .color-param-chips,
  .light-param-chips,
  .aspect-chips,
  .fx-param-chips,
  .reshoot-categories { width: 100%; }
  .color-param-chips .chip,
  .light-param-chips .chip,
  .aspect-chips .chip,
  .fx-param-chips .chip,
  .reshoot-categories button {
    padding-inline: 2px;
    font-size: 10px;
    letter-spacing: -.02em;
  }
  .color-param-chips .chip,
  .reshoot-categories button {
    padding-inline: 4px;
    font-size: 11.5px;
  }
  .aspect-chips { padding-inline: 2px; }
  .color-param-chips .chip::before,
  .light-param-chips .chip::before,
  .aspect-chips .chip::before,
  .fx-param-chips .chip::before,
  .reshoot-categories button::before {
    inset: 8px 2px;
  }
  .color-param-chips .chip::before,
  .reshoot-categories button::before {
    inset: 8px 4px;
  }
}
.color-gold-scale .tool-scale-value { color: #f4c45e; }
.color-gold-scale.zero-snapped .tool-scale-value {
  text-shadow: 0 0 10px rgba(255, 190, 64, .3);
}

@media (prefers-reduced-motion: reduce) {
  .color-param-chips .chip,
  .light-param-chips .chip,
  .aspect-chips .chip,
  .fx-param-chips .chip,
  .reshoot-categories button,
  .color-param-chips .chip::before,
  .light-param-chips .chip::before,
  .aspect-chips .chip::before,
  .fx-param-chips .chip::before,
  .reshoot-categories button::before { transition: none; }
}

/* ----------------------------------------- эффекты: компактный точный док */

/* Признак «эффект уже включён» раньше держала золотая иконка. Иконок нет,
   поэтому его несёт сама подпись: приглушённое золото на неактивном
   сегменте отличимо от серого, но не спорит с активной капсулой. */
.fx-param-chips .chip.enabled:not(.on) {
  color: rgba(215, 173, 85, .78);
}

.horizon-ruler {
  margin: -2px 0 0;
  padding-bottom: 3px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.crop-pane .horizon-ruler {
  margin-top: 8px;
}
.horizon-ruler-head {
  position: relative;
  height: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 1px;
  font-size: 11px;
}
.horizon-ruler-head output {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--accent);
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
}
.horizon-ruler-track {
  position: relative;
  height: 38px;
  overflow: hidden;
  outline: none;
  cursor: grab;
  touch-action: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 11%, #000 89%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 11%, #000 89%, transparent);
}
.horizon-ruler-track.dragging { cursor: grabbing; }
.horizon-ruler-ticks {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.horizon-ruler-ticks i {
  position: absolute;
  top: 15px;
  width: 1px;
  height: 10px;
  background: rgba(224,224,228,.42);
}
.horizon-ruler-ticks i.major {
  top: 12px;
  height: 14px;
  background: rgba(235,235,238,.62);
}
.horizon-ruler-ticks i.five {
  top: 9px;
  height: 18px;
  background: rgba(245,245,247,.78);
}
.horizon-ruler-cursor {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 3px;
  width: 2px;
  height: 29px;
  border-radius: 2px;
  background: var(--accent);
  transform: translateX(-1px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
  pointer-events: none;
}
.horizon-ruler.zero-snapped .horizon-ruler-head output {
  text-shadow: 0 0 9px rgba(229,180,92,.55);
}
.horizon-ruler.zero-snapped .horizon-ruler-cursor {
  top: 1px;
  height: 33px;
  box-shadow: 0 0 7px rgba(229,180,92,.5);
}
.horizon-ruler-track:focus-visible::after {
  content: '';
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(229,180,92,.65);
  border-radius: 8px;
  pointer-events: none;
}

.chips-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.chips-grid .chip { justify-content: center; padding: 12px 4px; flex-direction: column; gap: 5px; font-size: 12px; }

/* --------------------------------------------------------------- Reshoot */

.reshoot-pane { padding: 0 1px 1px; }
.reshoot-categories button:disabled {
  color: #55555b;
  cursor: default;
}
.reshoot-categories button:disabled::before {
  background: transparent;
  box-shadow: none;
}

/* Нижний выбор категории использует тот же модуль, а визуальная карусель
   остаётся отдельным крупным уровнем с фотографиями техники. */

.reshoot-tool { min-width: 0; }
.reshoot-carousel-shell {
  position: relative;
  contain: paint;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  background: rgba(17,17,19,.62);
  -webkit-backdrop-filter: blur(24px) saturate(1.06);
  backdrop-filter: blur(24px) saturate(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 14px 34px rgba(0,0,0,.28);
  opacity: 1;
  transition: opacity .17s ease;
}
.reshoot-options {
  --reshoot-option-width: 140px;
  --reshoot-edge-space: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px var(--reshoot-edge-space) 9px;
  scrollbar-width: none;
  scroll-padding-inline: var(--reshoot-edge-space);
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 18px,
    #000 calc(100% - 18px),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 18px,
    #000 calc(100% - 18px),
    transparent 100%
  );
}
.reshoot-options.single-option {
  justify-content: center;
  overflow-x: hidden;
}
.reshoot-options::-webkit-scrollbar { display: none; }
.reshoot-options button {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--reshoot-option-width);
  width: var(--reshoot-option-width);
  height: 48px;
  max-width: none;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: rgba(255,255,255,.035);
  color: var(--text-dim);
  font-size: 12.75px;
  /* Выбор меняет только оформление: геометрия карточки и текст стабильны. */
  transition:
    color .14s ease-out,
    background-color .14s ease-out,
    border-color .14s ease-out,
    box-shadow .14s ease-out;
}
.reshoot-options button span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reshoot-options button.on {
  z-index: 2;
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(229,180,92,.07);
  box-shadow: inset 0 0 0 1px rgba(229,180,92,.1);
}
.reshoot-options button.locked {
  border-color: rgba(229,180,92,.28);
}
.reshoot-options.visual-options {
  --reshoot-option-width: 104px;
}
.reshoot-options.visual-options:not(.lens-options) {
  --reshoot-edge-space: 16px;
  --reshoot-option-width: clamp(104px, calc((100% - 16px) / 2.5), 132px);
}
.reshoot-options.visual-options button {
  height: 86px;
  padding: 6px 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  overflow: hidden;
  background: rgba(255,255,255,.025);
}
.reshoot-options.visual-options button.on {
  background: rgba(229,180,92,.045);
}
@media (max-height: 650px) {
  .reshoot-options.visual-options button { height: 60px; padding-block: 4px; gap: 2px; }
  .reshoot-options.visual-options.lens-options button { height: 72px; }
  .reshoot-options.visual-options button .reshoot-option-art { height: 30px; }
}
.reshoot-options.camera-options button { gap: 6px; }
.reshoot-options.camera-options .reshoot-option-art { height: 50px; }
/* Компенсируем разный силуэт предметов и прозрачные поля исходников. */
.reshoot-options button[data-option-id="hasselblad-x2d-100c"] { --reshoot-art-scale: .95; }
.reshoot-options button[data-option-id="polaroid-sx70"] { --reshoot-art-scale: .96; }
.reshoot-options button[data-option-id="contax-t2"] { --reshoot-art-scale: .95; }
.reshoot-options button[data-option-id="delta-100"] { --reshoot-art-scale: .85; }
.reshoot-option-art {
  width: 88px;
  height: 54px;
  object-fit: contain;
  pointer-events: none;
  opacity: .82;
  /* Движется только предмет. Постоянный слой сохраняет его растеризацию
     при быстрых переключениях; подпись и рамка остаются вне анимации. */
  will-change: transform;
  transition:
    transform .18s cubic-bezier(.2, .65, .3, 1),
    opacity .14s ease-out;
  /*
   * «Студийный контур»: предмет остаётся частью исходного PNG, а короткие
   * тени повторяют его альфа-силуэт. Так камера, объектив и плёнка получают
   * вес без отдельной подложки и без тяжёлого размытого ореола.
   */
  filter:
    brightness(var(--reshoot-art-brightness, 1))
    contrast(1.1)
    saturate(1.04)
    drop-shadow(0 1px 0 rgba(255,255,255,.07))
    drop-shadow(0 3px 2px rgba(0,0,0,.68))
    drop-shadow(0 8px 8px rgba(0,0,0,.34));
  transform: translateY(-1px) scale(.99) scale(var(--reshoot-art-scale, 1));
  transform-origin: 50% 50%;
}
.reshoot-options.visual-options button.on .reshoot-option-art {
  opacity: 1;
  transform: translateY(-1px) scale(1.025) scale(var(--reshoot-art-scale, 1));
}
.reshoot-options.visual-options button span {
  width: 100%;
  color: inherit;
  font-size: 10.75px;
  line-height: 1.2;
  text-align: center;
}
.reshoot-options.visual-options.lens-options {
  --reshoot-option-width: 112px;
  --reshoot-art-brightness: 1.22;
  justify-content: safe center;
}
.reshoot-options.lens-options button { gap: 2px; }
.reshoot-options.lens-options .reshoot-option-art {
  height: 42px;
  flex-shrink: 0;
}
.reshoot-lens-focal {
  color: rgba(224,224,229,.7);
  font-size: 10px;
  line-height: 1.1;
}
.reshoot-options button.on .reshoot-lens-focal { color: rgba(245,222,178,.86); }
/* Типографика и статичный свет: текст и геометрия не двигаются при выборе. */
.reshoot-options.visual-options.time-options { --reshoot-option-width: 140px; }
.reshoot-options.time-options button {
  isolation: isolate;
  justify-content: center;
  gap: 5px;
  padding: 16px 8px 22px;
  border-color: rgba(255,255,255,.13);
  background: #141416;
  color: #efedf0;
}
.reshoot-options.time-options button[data-option-id="blue-hour"] { color: #dcedf5; }
.reshoot-options.time-options button[data-option-id="night-flash"] {
  background: #10131a;
  border-color: #303b4d;
}
.reshoot-options.time-options button.on {
  color: var(--accent-text);
  border-color: var(--accent);
  background: #1b1813;
}
.reshoot-options.time-options button span {
  position: relative;
  font-size: 15px;
  font-weight: 550;
  line-height: 20px;
  letter-spacing: -.025em;
}
.reshoot-time-subtitle {
  position: relative;
  color: #bcbcc5;
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
  white-space: nowrap;
}
.reshoot-options.time-options button[data-option-id="blue-hour"] .reshoot-time-subtitle { color: #b5cbd9; }
.reshoot-options.time-options button.on .reshoot-time-subtitle { color: #e8cea3; }
.reshoot-time-art {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* У заката и сумерек — рассеянный свет, без плотного яркого ядра вспышки. */
.reshoot-options.time-options button[data-option-id="golden-hour"] .reshoot-time-art,
.reshoot-options.time-options button[data-option-id="blue-hour"] .reshoot-time-art {
  top: auto;
  bottom: 0;
  height: 75%;
  filter: blur(1.5px) saturate(.8);
}
.reshoot-options.time-options button[data-option-id="golden-hour"] .reshoot-time-art {
  opacity: .68;
}
.reshoot-options.time-options button[data-option-id="blue-hour"] .reshoot-time-art {
  opacity: .5;
}
.reshoot-options.time-options button[data-option-id="night-flash"] .reshoot-time-art {
  top: 4px;
}
.reshoot-bw-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 2px 4px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 5px;
  background: rgba(12,12,14,.86);
  color: rgba(245,245,247,.92);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.15;
}
.reshoot-selection-summary {
  width: fit-content;
  max-width: calc(100% - 16px);
  min-width: 0;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 4px auto 0;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 999px;
  background: rgba(7,7,9,.43);
  -webkit-backdrop-filter: blur(11px) saturate(.88);
  backdrop-filter: blur(11px) saturate(.88);
  box-shadow:
    0 5px 18px rgba(0,0,0,.34),
    0 0 24px rgba(0,0,0,.18);
  color: rgba(232,232,235,.82);
  font-size: 12px;
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0,0,0,.82);
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  transition: opacity .17s ease;
  cursor: pointer;
}
.reshoot-selection-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reshoot-selection-summary:active { background: rgba(36,30,21,.9); }
.reshoot-info-icon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url('../assets/account/icons/info.svg') center / contain no-repeat;
  mask: url('../assets/account/icons/info.svg') center / contain no-repeat;
  color: #b8b6b0;
}
.reshoot-details {
  color-scheme: dark;
  scrollbar-width: thin;
  width: min(360px, calc(100% - 32px));
  max-height: calc(100dvh - 48px);
  padding: 28px 24px 24px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: #171719;
  color: var(--text);
  box-shadow: 0 20px 70px rgba(0,0,0,.5);
}
.reshoot-details::backdrop { background: rgba(0,0,0,.66); }
.reshoot-details-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #c7c7ce;
}
.reshoot-details-close span {
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url('../assets/account/icons/x.svg') center / contain no-repeat;
  mask: url('../assets/account/icons/x.svg') center / contain no-repeat;
}
.reshoot-details-art { display: block; width: 128px; height: 84px; object-fit: contain; margin: 0 auto 18px; }
.reshoot-details h2 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 650; }
.reshoot-details-tag { margin: 6px 0 16px; color: var(--accent); font-size: 13px; }
.reshoot-details-description { margin: 0; color: #c6c6cd; font-size: 15px; line-height: 1.55; }
.reshoot-details.time-details { padding-top: 44px; }
.reshoot-details.time-details .reshoot-details-art { display: none; }
.reshoot-details-note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.5;
}
@media (max-height: 700px), (max-width: 359px) {
  .reshoot-details.time-details { padding: 44px 24px 22px; }
  .reshoot-details.time-details .reshoot-details-tag { margin-bottom: 12px; }
  .reshoot-details.time-details .reshoot-details-description { font-size: 14px; line-height: 1.45; }
  .reshoot-details.time-details .reshoot-details-note { margin-top: 12px; padding-top: 10px; }
  .reshoot-details.time-details .reshoot-details-done { margin-top: 18px; }
}
.reshoot-details-done {
  width: 100%;
  min-height: 44px;
  margin-top: 24px;
  padding: 12px 22px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.055));
  color: var(--accent-text);
  font-weight: 620;
  line-height: 1.2;
  letter-spacing: -.015em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.085), 0 5px 16px rgba(0,0,0,.22);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.reshoot-details-done:active {
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(229,180,92,.09));
  border-color: rgba(229,180,92,.24);
  color: var(--accent-text-hot);
}
.reshoot-details button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reshoot-selection-summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reshoot-selection-summary span.on { color: var(--accent); }
.reshoot-selection-summary.lens-summary {
  white-space: normal;
  text-align: center;
}
.reshoot-selection-summary.lens-summary span { overflow: visible; }
.reshoot-selection-summary i {
  flex: 0 0 auto;
  color: rgba(198,198,203,.55);
  font-style: normal;
}
.reshoot-options button:focus-visible {
  outline: 2px solid rgba(229,180,92,.68);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .panel-body,
  .reshoot-carousel-shell,
  .reshoot-selection-summary,
  .reshoot-options button,
  .reshoot-option-art { transition: none; }
  .reshoot-option-art { will-change: auto; }
  .reshoot-options.visual-options button.on .reshoot-option-art {
    transform: translateY(-1px) scale(.99) scale(var(--reshoot-art-scale, 1));
  }
}

@media (max-width: 350px) {
  .tool-card.reshoot-tool-card { width: calc(100% - 20px); }
  .reshoot-options.visual-options { --reshoot-option-width: 96px; }
  .reshoot-selection-summary { gap: 5px; padding-inline: 9px; font-size: 11px; }
}

/* --------------------------------------------------------------- вкладки */

.tabbar {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  max-height: 112px;
  overflow: hidden;
  background: var(--panel);
  border-top: 1px solid rgba(255,255,255,.04);
  /* Внешние поля срезаны, чтобы дорожка стала выше в тех же габаритах полосы:
     воздух нужен внутри неё, а не между ней и краем экрана. */
  /* Дорожка остаётся на 8px от края, а пункты начинаются на 12px: эти 4px
     добавляются к inset активной плашки и дают ровный воздух у обоих торцов,
     почти не уменьшая её ширину. */
  padding: 5px 12px max(6px, env(safe-area-inset-bottom, 0px));
  transition: opacity .18s ease;
}
.app.empty .tabbar {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* Нижняя навигация лежит на том же материале, что и сегментированные ряды
   над ней: общий контейнер и золотая подложка под активным пунктом.
   Контейнер рисуется псевдоэлементом ровно по внутреннему боксу, поэтому
   safe-area снизу остаётся пустой и не растягивает плашку. */
.tabbar::before {
  content: '';
  position: absolute;
  top: 5px;
  right: 8px;
  bottom: max(6px, env(safe-area-inset-bottom, 0px));
  left: 8px;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 999px;
  background: #1e1e21;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  pointer-events: none;
}
.tabbar button {
  flex: 1;
  position: relative;
  min-width: 44px;
  /* Высота пункта задаёт высоту дорожки. 58 — минимум, при котором капсула
     занимает две трети дорожки (как в референсе) и при этом вокруг иконки
     остаётся по шесть пикселей. На 44 одно исключало другое. */
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  padding: 4px 0;
  transition: color .15s;
}
/* Подложка активного пункта — широкая капсула без обводки. Обводка делала из
   неё нарисованную кнопку: два контура подряд, у ряда и у пункта. Здесь форму
   держит одна заливка, и подложка читается пятном света, а не коробкой. */
.tabbar button::before {
  content: '';
  position: absolute;
  inset: 10px 5px;
  border-radius: 999px;
  background: transparent;
  transition: background .18s ease, box-shadow .18s ease;
  pointer-events: none;
}
.tabbar button:focus { outline: none; }
.tabbar button:focus-visible { color: var(--accent); }
.tabbar button:focus-visible::before {
  box-shadow: 0 0 0 2px rgba(215, 173, 85, .5);
}
.tabbar button:active::before {
  background: rgba(255, 255, 255, .05);
}
.tabbar button svg {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .15s ease, filter .15s ease;
}
.tabbar button span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Подложка нейтральная, золото — только в самой иконке: цвет отмечает
   выбранный пункт, материал держит его форму. */
.tabbar button.on { color: var(--accent); }
.tabbar button.on::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .055));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}
.tabbar button.on:active::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .08));
}
/* Свечение настраивалось под искры: у них нет мелких деталей, и ореол
   работал как часть рисунка. Буквенный знак от сильного ореола замыливается
   по краям и начинает читаться вывеской, поэтому ослаблено. Совсем убирать
   не стал — оно единственное, чем этот пункт выделен среди прочих. */
.tabbar button.ai.on svg {
  filter: drop-shadow(0 0 4px rgba(229,180,92,.3));
}

@media (max-width: 359px) {
  .tabbar { padding-inline: 10px; }
  .tabbar button::before { inset: 5px 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .tabbar,
  .tabbar button,
  .tabbar button::before { transition: none; }
}

/* --------------------------------------------------------------- прочее */

/* ------------------------------------------------------ личный кабинет */

.account-screen {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  color: #f3f3f4;
  overflow: hidden;
}
.account-screen[hidden] { display: none; }

.account-header {
  position: relative;
  flex: 0 0 calc(48px + env(safe-area-inset-top, 0px));
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  column-gap: 8px;
  padding: env(safe-area-inset-top, 0px) 12px 0;
}
/* В кабинете сюда попадает имя человека, а оно бывает любой длины: держим
   одну строку и обрезаем многоточием, чтобы заголовок не наезжал на кружок. */
.account-header h1 {
  grid-column: 2;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.015em;
}
.account-back {
  grid-column: 1;
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #171719;
  color: #d5d5d8;
}
.account-back:active { background: #27272a; }
/* Правый слот шапки — сам человек. Золотая кромка та же, что у аватара в
   профиле, только тоньше: в шапке кружок мелкий и полная толщина съедала бы
   лицо. Инициалы лежат под фотографией и остаются видны, если она не пришла. */
.account-avatar-chip {
  grid-column: 3;
  justify-self: end;
  position: relative;
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(229, 180, 92, .07);
  box-shadow: inset 0 0 0 1px rgba(232, 183, 95, .62);
}
.account-chip-avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  filter: brightness(1.13) contrast(.97);
}
.account-chip-avatar[hidden] { display: none; }
.account-chip-initials {
  color: var(--accent-text);
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .01em;
}
.account-chip-initials[hidden] { display: none; }

.account-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 2px 16px max(12px, env(safe-area-inset-bottom, 0px));
}
.account-content::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------- баланс и покупка */

.account-balance {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(3px, 1dvh, 10px) 0 clamp(8px, 1.4dvh, 16px);
}
.account-eyebrow {
  display: block;
  color: #8f8f94;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.account-ring {
  position: relative;
  width: min(48vw, 220px, 22dvh);
  aspect-ratio: 1;
  margin-top: clamp(6px, 1dvh, 12px);
  display: grid;
  place-items: center;
}
.account-ring-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.account-ring-art circle {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.account-ring-base { stroke: rgba(250, 190, 100, .19); stroke-width: 1.1px; }
/* Подсветка идёт двумя копиями одного градиента: нижняя размыта и даёт
   свечение вокруг кромки, верхняя рисует саму линию. */
.account-ring-glow {
  stroke: url(#accountRingSheen);
  stroke-width: 3px;
  filter: blur(5px);
  opacity: .5;
}
.account-ring-sheen { stroke: url(#accountRingSheen); stroke-width: 1.5px; }
.account-ring-value {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, .6dvh, 8px);
  text-align: center;
}
.account-ring-value strong {
  display: block;
  color: var(--accent-text);
  font-size: clamp(58px, 20vw, 88px);
  line-height: .95;
  font-weight: 420;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.account-ring-value span {
  color: #8f8f94;
  font-size: clamp(12px, 3.4vw, 14px);
  line-height: 1.2;
  letter-spacing: -.005em;
}

.account-block {
  padding: clamp(11px, 1.7dvh, 17px) 3px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.account-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.account-section-title {
  margin: 0;
  color: #f1f1f2;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.02em;
}
.account-section-link {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0 6px 10px;
  color: #8f8f94;
  font-size: 13px;
  letter-spacing: -.01em;
}
.account-section-link:active { color: #d5d5d8; }

.account-packs {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
/* Цена стоит на самом чипе: выбор между пакетами — это выбор по цене, и
   скидка за объём работает, только когда все три суммы видны рядом. */
.account-pack {
  min-height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 6px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 24px;
  background: rgba(255, 255, 255, .028);
  color: #f1f1f2;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.account-pack strong {
  font-size: clamp(19px, 5.4vw, 23px);
  line-height: 1;
  font-weight: 560;
  letter-spacing: -.03em;
}
.account-pack small {
  color: #8f8f94;
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: -.005em;
  transition: color .15s ease;
}
.account-pack[aria-checked="true"] {
  border-color: rgba(232, 183, 95, .78);
  background: rgba(229, 180, 92, .05);
  color: var(--accent-text);
}
.account-pack[aria-checked="true"] small { color: rgba(232, 183, 95, .72); }
.account-pack:active { transform: translateY(1px); }

/* Тот же приём, что у «Выбрать фото» на старте: стеклянная заливка и золото
   в тексте. Единственное платное действие экрана должно выглядеть как главная
   кнопка приложения, а не как ещё одна золотая плашка. */
.account-continue {
  width: 100%;
  min-height: 54px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .055));
  color: var(--accent-text);
  font-size: 17px;
  font-weight: 620;
  line-height: 1;
  letter-spacing: -.015em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .085),
    0 8px 22px rgba(0, 0, 0, .26);
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
.account-continue:active {
  background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(229, 180, 92, .09));
  border-color: rgba(229, 180, 92, .24);
  color: var(--accent-text-hot);
  transform: translateY(1px);
}

/* ------------------------------------------------------------------ кадры */

.account-frame-strip {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  /* Ряд намеренно шире контейнера: четвёртая карточка выглядывает за правый
     край и показывает, что лента листается. Поля отрицательные, чтобы полоса
     уходила под самый край экрана, как в макете. */
  margin-right: -9px;
  padding-right: 9px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.account-frame-strip::-webkit-scrollbar { display: none; }
.account-frame {
  flex: 0 0 calc((100% - 47px) / 3);
  aspect-ratio: 5 / 6;
  display: block;
  padding: 0;
  border-radius: 18px;
  background: #111112;
  scroll-snap-align: start;
  overflow: hidden;
}
.account-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.account-frame:active { opacity: .82; }
.account-frame-empty {
  flex: 1 1 auto;
  padding: 22px 4px;
  color: #75757b;
  font-size: 13px;
  line-height: 1.4;
}
.account-frame-skeleton {
  flex: 0 0 calc((100% - 47px) / 3);
  aspect-ratio: 5 / 6;
  border-radius: 18px;
  background: #101011;
}

.account-support-row {
  width: 100%;
  min-height: 60px;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto 15px;
  align-items: center;
  column-gap: 12px;
  margin-top: clamp(8px, 1.4dvh, 14px);
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 22px;
  background: rgba(255, 255, 255, .028);
  color: #f1f1f2;
  text-align: left;
}
.account-support-row .account-icon-message { color: var(--accent-text); }
.account-support-label {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.015em;
}
.account-support-row:active { background: rgba(255, 255, 255, .05); }

.account-unread-badge {
  grid-column: 3;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #171105;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
}
.account-unread-badge[hidden] { display: none; }
.account-icon-chevron { grid-column: 4; }

/* Подвал кабинета. Документы обязательны, выход нужен раз в жизни — оба
   держатся тихой строкой, чтобы не спорить с балансом и покупкой. */
.account-footer {
  margin-top: clamp(8px, 1.4dvh, 14px);
  padding-top: clamp(8px, 1.4dvh, 14px);
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.account-legal-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  color: #48484e;
  font-size: 11px;
}
.account-legal-links button {
  padding: 5px 1px;
  color: #6d6d73;
  font-size: inherit;
}
.account-legal-links button:active { color: var(--accent); }
.account-logout {
  display: block;
  margin: 0 auto;
  padding: 7px 12px;
  color: #77777d;
  font-size: 11.5px;
}
.account-logout:not(:disabled):active { color: #c9c9cd; }
.account-logout:disabled { opacity: .45; }

/* ------------------------------------------------------- legal center */

.legal-screen {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #d4d4d7;
  font-family: Arial, Helvetica, sans-serif;
}
.legal-screen[hidden] { display: none; }
.legal-screen:focus { outline: none; }
.legal-screen-header {
  color: #f1f1f3;
  background: var(--bg);
  border-bottom: 1px solid #29292c;
}
.legal-screen-header .account-back {
  color: #d5d5d8;
  background: transparent;
}
.legal-external {
  grid-column: 3;
  justify-self: center;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  color: #aaaab0;
  background: transparent;
  font-size: 16px;
  text-decoration: none;
}
.legal-app-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 18px max(36px, env(safe-area-inset-bottom, 0px));
  scrollbar-width: none;
}
.legal-app-content::-webkit-scrollbar { display: none; }
.legal-app-menu {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #29292c;
}
.legal-app-menu button {
  min-height: 54px;
  display: block;
  padding: 9px 0;
  color: #e6e6e8;
  text-align: left;
  border-bottom: 1px solid #29292c;
}
.legal-app-menu strong { display: block; font-size: 14px; font-weight: 700; }
.legal-app-intro { margin: 0 0 18px; }
.legal-app-intro h2 { margin: 0; color: #f1f1f3; font-size: 20px; }
.legal-app-article { color: #d4d4d7; font-size: 14px; line-height: 1.5; }
.legal-app-article > header { margin-bottom: 22px; }
.legal-app-article h2 { margin: 25px 0 8px; color: #f1f1f3; font-size: 16px; line-height: 1.35; }
.legal-app-article p { margin: 0 0 12px; }
.legal-app-article li { margin: 4px 0; }
.legal-app-article a { color: var(--accent); text-decoration: underline; }
.legal-app-article h1 { margin: 5px 0 0; color: #f5f5f6; font-size: 22px; line-height: 1.25; }
.legal-details { margin: 0 0 22px; }
.legal-details p { margin: 0 0 5px; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ auth gate */

/* Окно входа на языке стартового экрана: та же земля, те же волосяные кромки,
   золото — только в свечении под знаком и в отклике на нажатие. */

.auth-gate {
  position: absolute;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top, 0px)) 18px
           max(20px, env(safe-area-inset-bottom, 0px));
  background: rgba(3, 3, 4, .74);
  -webkit-backdrop-filter: blur(18px) saturate(1.03);
  backdrop-filter: blur(18px) saturate(1.03);
}
.auth-gate[hidden] { display: none; }

.auth-card {
  position: relative;
  width: 100%;
  max-width: 352px;
  padding: 32px 22px 20px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 28px;
  color: #f1f1f2;
  /* Тёплая засветка сверху повторяет виньетку земли, только тише и с золотом:
     карточка выглядит поднятой над фоном, а не вырезанной из него. */
  background-color: #0b0b0c;
  background-image:
    url("../assets/noise.png"),
    radial-gradient(116% 64% at 50% 0%,
      rgba(232, 183, 95, .06) 0%, rgba(232, 183, 95, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .042), rgba(255, 255, 255, .012));
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 128px 128px, 100% 100%, 100% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 28px 80px rgba(0, 0, 0, .62);
  text-align: center;
}
.auth-card:focus { outline: none; }

.auth-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #d5d5d8;
  background: #171719;
  transition: color .15s ease, background .15s ease;
}
.auth-close:hover,
.auth-close:focus-visible { background: #212124; }
.auth-close:active { background: #27272a; }
.auth-close-icon {
  width: 16px;
  height: 16px;
  display: block;
  background: currentColor;
  -webkit-mask: url('../assets/account/icons/x.svg') center / contain no-repeat;
  mask: url('../assets/account/icons/x.svg') center / contain no-repeat;
}

.auth-logo-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
}
.auth-logo-wrap::before {
  content: '';
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(232, 183, 95, .17) 0%, rgba(232, 183, 95, 0) 70%);
  pointer-events: none;
}
.auth-logo {
  position: relative;
  width: 72px;
  height: 72px;
  display: block;
  /* Ровно та доля, по которой нарисован кант в logo-mark.svg, и та же, что
     у squircle иконок iOS. Радиус задан в процентах, а не в пикселях,
     намеренно: 22px на 72px — это 30.6%, маска выходила круглее артворка
     и срезала канту угловые дуги, оставляя рамку из четырёх обрубков. */
  border-radius: 22.37%;
  /* Золотого кольца здесь больше нет: фаску несёт сам знак (logo-mark.svg).
     Кольцо в паре с ней давало два канта в полутора пикселях друг от друга. */
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}

.auth-card h2 {
  margin: 0;
  color: #f1f1f2;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.auth-card > .auth-subtitle {
  max-width: 250px;
  margin: 9px auto 24px;
  color: #8f8f94;
  font-size: 14.5px;
  line-height: 1.42;
  letter-spacing: -.012em;
  text-wrap: balance;
}

.auth-providers { display: flex; flex-direction: column; gap: 10px; }
/* Кнопка провайдера повторяет главное действие старта: стеклянная заливка и
   волосяная кромка. Текст остаётся нейтральным — золото здесь спорило бы с
   фирменными знаками VK и Яндекса. */
.auth-provider {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 26px;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 999px;
  color: #f1f1f2;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .045));
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.015em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.auth-provider[hidden] { display: none; }
.auth-provider > span:last-child { grid-column: 2; }
.auth-provider:not(:disabled):hover,
.auth-provider:not(:disabled):focus-visible {
  border-color: rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .06));
}
.auth-provider:not(:disabled):active {
  border-color: rgba(229, 180, 92, .24);
  background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(229, 180, 92, .09));
  transform: translateY(1px);
}
.auth-provider:disabled { color: #6d6d72; border-color: rgba(255, 255, 255, .04); opacity: .5; }
.auth-provider-mark {
  grid-column: 1;
  justify-self: start;
  width: 24px;
  height: 24px;
}
.auth-provider-dev-mark {
  grid-column: 1;
  justify-self: start;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  color: #a9a9af;
  font-size: 11px;
  font-weight: 700;
}

.auth-card > .auth-privacy-note {
  margin: 20px 6px 2px;
  color: #6d6d73;
  font-size: 11.5px;
  line-height: 1.45;
}
.auth-privacy-note a { color: #8f8f94; text-underline-offset: 2px; }
.auth-privacy-note a:hover,
.auth-privacy-note a:focus-visible { color: #d6d6d9; }
.auth-privacy-note a:active { color: var(--accent-text); }
.auth-card > .auth-unavailable {
  margin: 14px 0 0;
  color: #8f8f94;
  font-size: 12.5px;
  line-height: 1.4;
  text-align: center;
}

.auth-card button:focus-visible,
.auth-privacy-note a:focus-visible {
  outline: 2px solid rgba(232, 183, 95, .72);
  outline-offset: 2px;
}

/* -------------------------------------------------------- consent gate */

.consent-gate {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top, 0px)) 18px
           max(20px, env(safe-area-inset-bottom, 0px));
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(16px);
}
.consent-gate[hidden] { display: none; }
.consent-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: 26px 24px 20px;
  border: 1px solid #303035;
  border-radius: 24px;
  color: #e9e9eb;
  background: #151517;
  box-shadow: 0 24px 72px rgba(0,0,0,.58);
}
.consent-card h2 {
  margin: 0;
  color: #f3f3f5;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -.035em;
}
.consent-card > p { margin: 8px 0 19px; color: #8f8f96; font-size: 13px; line-height: 1.45; }
.consent-options { display: flex; flex-direction: column; }
.consent-option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-height: 52px;
  padding: 9px 0;
  border-bottom: 1px solid #29292e;
}
.consent-option:first-child { padding-top: 0; }
.consent-option input { width: 20px; height: 20px; margin: 0; accent-color: #d8a64c; }
.consent-copy { color: #dedee1; font-size: 13px; line-height: 1.4; }
.consent-copy a { color: #d8ad5c; text-underline-offset: 2px; }
.consent-continue {
  width: 100%;
  height: 48px;
  margin-top: 18px;
  border-radius: 14px;
  color: #171105;
  background: var(--accent);
  font-size: 14px;
  font-weight: 650;
}
.consent-continue:disabled { color: #77777d; background: #2d2d31; }
.consent-cancel { width: 100%; height: 42px; margin-top: 3px; color: #93939a; font-size: 13px; }
.consent-cancel:hover,
.consent-cancel:focus-visible { color: #d6d6d9; }

.account-icon {
  display: block;
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  color: inherit;
  background-color: currentColor;
  -webkit-mask-image: var(--account-icon);
  mask-image: var(--account-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.account-icon-back { --account-icon: url('../assets/account/icons/arrow-left.svg'); width: 19px; height: 19px; }
.account-icon-message { --account-icon: url('../assets/account/icons/message-circle.svg'); width: 27px; height: 27px; }
.account-icon-send { --account-icon: url('../assets/account/icons/send.svg'); width: 28px; height: 28px; color: var(--accent); }
.account-icon-chevron { --account-icon: url('../assets/account/icons/chevron-right.svg'); width: 15px; height: 15px; color: #a1a1a6; }
.account-icon-sparkles { --account-icon: url('../assets/account/icons/star-four-fill.svg'); width: 20px; height: 20px; color: var(--accent); }
.account-mini-star { width: 10px; height: 10px; }

.account-screen button:focus-visible {
  outline: 2px solid rgba(229,180,92,.8);
  outline-offset: 2px;
}

/* ------------------------------------------------------ последние результаты */

.results-screen,
.result-viewer {
  position: absolute;
  inset: 0;
  z-index: 64;
  display: flex;
  flex-direction: column;
  min-height: 0;
  color: #f3f3f4;
}
.result-viewer { z-index: 68; }
.results-screen[hidden],
.result-viewer[hidden] { display: none; }
.results-header,
.result-viewer-header {
  flex-basis: calc(50px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.results-heading {
  grid-column: 2;
  min-width: 0;
  text-align: center;
}
.results-heading h1 {
  margin: 0;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 600;
}
.results-heading span {
  display: block;
  margin-top: 3px;
  color: #77777d;
  font-size: 10.5px;
  line-height: 1;
}
.results-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 9px max(22px, env(safe-area-inset-bottom, 0px));
  scrollbar-width: none;
}
.results-content::-webkit-scrollbar { display: none; }
.results-status {
  min-height: 170px;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #7f7f85;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
}
.results-status[hidden] { display: none; }
.results-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.result-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #252528;
  border-radius: 14px;
  background: #121214;
}
.result-card-preview {
  width: 100%;
  display: block;
  padding: 0;
  text-align: left;
}
.result-card-preview img {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: block;
  object-fit: cover;
  background: #18181b;
}
.result-card-copy {
  display: block;
  min-width: 0;
  padding: 8px 40px 9px 9px;
}
.result-card-copy strong,
.result-card-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result-card-copy strong {
  color: #e4e4e6;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 550;
}
.result-card-copy small {
  margin-top: 3px;
  color: #74747a;
  font-size: 9.5px;
  line-height: 1.2;
}
.result-card-download {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #242427;
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
}
.result-card-download:active { background: #343438; }
.results-more {
  width: 100%;
  height: 43px;
  margin-top: 12px;
  border: 1px solid #303034;
  border-radius: 13px;
  background: #171719;
  color: #d5d5d8;
  font-size: 12.5px;
  font-weight: 550;
}
.results-more:disabled { color: #66666c; }
.result-viewer-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 8px;
  background: #050506;
}
.result-viewer-stage img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.result-viewer-details {
  flex: 0 0 auto;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 7px 13px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.result-viewer-details strong {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 550;
}
.result-viewer-details span {
  overflow: hidden;
  color: #77777d;
  font-size: 10.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result-viewer-actions {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  gap: 8px;
  padding: 8px 9px max(9px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255,255,255,.08);
  background: #0b0b0c;
}
.result-viewer-actions button {
  height: 44px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 650;
}
.result-open-editor { background: var(--accent); color: #171105; }
.result-download { border: 1px solid #353539; background: #1b1b1e; color: #e1e1e3; }
.result-viewer-actions button:disabled { background: #29292d; color: #77777d; }

/* ---------------------------------------------------------- чат поддержки */

.support-screen {
  position: absolute;
  inset: 0;
  z-index: 64;
  display: flex;
  flex-direction: column;
  min-height: 0;
  color: #f3f3f4;
}
.support-screen[hidden] { display: none; }
.support-header {
  flex-basis: calc(50px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.support-heading {
  grid-column: 2;
  min-width: 0;
  text-align: center;
}
.support-heading h1 {
  margin: 0;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 600;
}
.support-heading span {
  display: block;
  margin-top: 3px;
  color: #77777d;
  font-size: 10.5px;
  line-height: 1;
}
.support-messages {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 10px 14px;
  scrollbar-width: none;
}
.support-messages::-webkit-scrollbar { display: none; }
.support-loading,
.support-empty {
  margin: auto;
  max-width: 260px;
  color: #7f7f85;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
}
.support-empty strong {
  display: block;
  margin-bottom: 7px;
  color: #dedee1;
  font-size: 16px;
  font-weight: 600;
}
.support-message {
  align-self: flex-start;
  max-width: min(82%, 410px);
  padding: 9px 11px 7px;
  border-radius: 15px 15px 15px 5px;
  background: #1b1b1e;
  color: #ededee;
}
.support-message.is-user {
  align-self: flex-end;
  border-radius: 15px 15px 5px 15px;
  background: #a87d32;
  color: #fff;
}
.support-message-sender {
  display: block;
  margin-bottom: 3px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
}
.support-message-body {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13.5px;
  line-height: 1.35;
}
.support-message-meta {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 4px;
  color: rgba(255,255,255,.58);
  font-size: 9.5px;
  line-height: 1;
}
.support-composer {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 9px max(8px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255,255,255,.08);
  background: #0b0b0c;
}
.support-composer textarea {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  max-height: 112px;
  resize: none;
  padding: 11px 13px;
  border: 1px solid #303034;
  border-radius: 16px;
  outline: 0;
  background: #171719;
  color: #efeff1;
  font: inherit;
  font-size: 13px;
  line-height: 18px;
}
.support-composer textarea:focus { border-color: rgba(229,180,92,.7); }
.support-composer textarea::placeholder { color: #707076; }
.support-composer button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  color: #171105;
}
.support-composer button .account-icon { color: currentColor; width: 21px; height: 21px; }
.support-composer button:disabled { background: #27272a; color: #66666c; }

/* Узкие экраны: три пакета в ряд — самое тесное место кабинета. */
@media (max-width: 340px) {
  .account-pack { min-height: 68px; border-radius: 20px; }
  .account-pack small { font-size: 11.5px; }
  .account-legal-links { gap: 5px; font-size: 10.5px; }
}

.toast {
  position: absolute;
  left: 50%; bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(12px);
  background: rgba(38,38,42,.96);
  backdrop-filter: blur(12px);
  color: var(--text);
  padding: 11px 18px;
  border-radius: 12px;
  font-size: 13.5px;
  max-width: 88%;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
  z-index: 80;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

.hidden { display: none !important; }
.generation-recovery {
  position: fixed;
  z-index: 1200;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(390px, calc(100vw - 28px));
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: #242521;
  color: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, sans-serif;
}
.generation-recovery[hidden], .generation-recovery [hidden] { display: none; }
.generation-recovery p { margin: 0 0 10px; }
.generation-recovery > div { display: flex; gap: 8px; flex-wrap: wrap; }
.generation-recovery button {
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 9px;
  padding: 8px 12px;
  min-height: 40px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.generation-recovery button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }