@font-face {
  font-family: Montserrat;
  src: url("/static/fonts/montserrat-cyrlat-2c633046.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Montserrat;
  src: url("/static/fonts/montserrat-cyrlat-italic-09f1cf42.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --card: #ffffff;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --accent: #0071e3;
  --accent-2: #0066cc;
  --blue-grad: linear-gradient(160deg, #2b95ff, #0071e3 48%, #0058b8);
  --line: #d2d2d7;
  --warn: #ff0000;
  --btn-ink: #ffffff;
  --radius: 22px;
  --shadow: 0 18px 44px rgb(0 0 0 / 8%);
  --dialog-shadow: 0 4px 12px rgb(0 0 0 / 18%), 0 24px 64px rgb(0 0 0 / 35%);
  --btn-hover-shadow: 0 8px 20px rgb(29 29 31 / 16%);
  --btn-hover-shadow-on-blue: 0 8px 22px rgb(0 0 0 / 28%);
  --font: Montserrat, Arial, sans-serif;
  --display: Montserrat, Arial, sans-serif;
  --float-chip-height: 4.15rem;
  /* Статусы /staff (заготовка под тёмную тему: меняются только эти значения). */
  --st-ok: #008a00;
  --st-ok-ink: #008a00;
  --st-ok-bg: #e6f8e6;
  --st-ok-solid: #00ba00;
  --st-warn: #a05a00;
  --st-warn-bg: #fff1da;
  --st-warn-soft: #fff7e6;
  --st-warn-softer: #fffaf0;
  --st-warn-line: #f2dcae;
  --st-warn-solid: #ff9500;
  --st-err: #c41e3a;
  --st-err-bg: #fde7ea;
  --st-err-solid: var(--warn);
  --st-info: var(--accent-2);
  --st-info-bg: #e4efff;
  --st-info-bg-soft: #eaf3ff;
  --st-info-tint: #f5f9ff;
  --st-extra: #7b2db8;
  --st-extra-bg: #f3e8ff;
  --st-neutral-solid: #8e8e93;
  --st-on-solid: #fff;
  /* Тёмная шапка /staff на компьютере. */
  --staff-bar-bg: #1d1d1f;
  --staff-bar-fg: #f5f5f7;
  --staff-bar-muted: #a1a1a6;
  --staff-bar-active: #3a3a3c;
  --staff-bar-field: #2c2c2e;
  --staff-bar-field-focus: #333336;
  --staff-bar-kbd-fg: #d1d1d6;
  --staff-bar-item-fg: #e5e5ea;
  --staff-env-bg-dark: #5a3b00;
  --staff-env-fg-dark: #ffcf73;
  /* Пол размера мелких подписей /staff: 12px на компьютере, 13px на телефоне. */
  --staff-fs-min: 0.75rem;
  --staff-fs-sm: 0.8rem;
  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
  font-synthesis: none;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(900px 420px at 8% -10%, rgb(0 113 227 / 10%), transparent 55%),
    var(--bg);
}

a { color: var(--accent-2); }

/* Касание: без серого прямоугольника и задержки нажатия у всего кликабельного
   (ссылки в тексте не теряют выделение: user-select трогаем только у кнопок и карточек). */
:where(a, button, summary, label, select, [role="button"], [role="tab"], [onclick]) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Кнопки и элементы управления: не выделяются и не вызывают меню долгого нажатия */
:where(
    button,
    summary,
    [role="button"],
    [role="tab"],
    .btn,
    .nav-link,
    .brand,
    .skin-tab,
    .side-tab,
    .chip,
    .chat-launcher,
    .dialog-close,
    .req-dialog-close,
    .examples-dot,
    .passport-check-bar,
    .promo-toggle > summary,
    .faq summary,
    .drop,
    .drop-stage,
    .drop-idle,
    .drop-title,
    .drop-hint
  ) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Ссылки-карточки: без меню ссылки и перетаскивания картинки при долгом нажатии */
:where(.blog-card, .req-card, .review-card, .hero-demo-card, .how-card) {
  -webkit-touch-callout: none;
}

:where(
    .blog-card,
    .req-card,
    .review-card,
    .hero-demo-card,
    .drop,
    .drop-preview,
    .skin-switch,
    .examples-carousel,
    .btn
  ) img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* <picture> только выбирает WebP: раскладку задаёт вложенный <img>. */
picture { display: contents; }

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 64px;
  padding: 0 1.5rem;
  background: var(--accent);
  color: #fff;
  border-bottom: 0;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-size: 1.55rem;
  line-height: 1;
  text-decoration: none;
  color: #fff;
  letter-spacing: -0.04em;
  cursor: pointer;
}

.brand-photo {
  font-weight: 300;
}

.brand-easy {
  font-weight: 700;
}

.brand-tld {
  font-weight: 300;
}

.top-end {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-link {
  color: #fff;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
}

.nav-link:hover { color: rgb(255 255 255 / 82%); }

.top .btn {
  background: #fff;
  color: var(--accent);
  box-shadow: none;
}

.top .btn:hover:not(:disabled) {
  background: #fff;
  color: var(--accent-2);
  box-shadow: var(--btn-hover-shadow-on-blue);
}

.top .nav-go-icon,
.top .nav-menu {
  display: none;
}

.nav-go-icon {
  width: 1.2rem;
  height: 1.2rem;
  object-fit: contain;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 0;
  border-radius: 999px;
  padding: 0.85rem 1.35rem;
  background: var(--accent);
  color: var(--btn-ink);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease;
}

.btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 84%, #000);
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

.btn-buy {
  background: #00ba00;
}

.btn-buy:hover:not(:disabled) {
  background: color-mix(in srgb, #00ba00 84%, #000);
}

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

.btn.ghost:hover:not(:disabled) {
  background: transparent;
  color: color-mix(in srgb, var(--ink) 72%, #000);
  border-color: color-mix(in srgb, var(--line) 50%, #000);
  box-shadow: var(--btn-hover-shadow);
}

.btn.ghost.btn-retry {
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: calc(0.85rem - 2px) calc(1.35rem - 2px);
}

.btn.ghost.btn-retry:hover:not(:disabled) {
  color: #000;
  border-color: #000;
  background: transparent;
  box-shadow: var(--btn-hover-shadow);
}

.btn.wide { width: 100%; }

.form-actions {
  display: grid;
  gap: 0.55rem;
}

.captcha-src {
  display: none;
}

.btn-sm { padding: 0.55rem 1rem; font-size: 0.9rem; }

.btn:disabled { opacity: 0.55; cursor: wait; }

.section-title {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 0 0 20px;
}

.section-title.is-center {
  text-align: center;
}

.hero h1,
#benefits .section-title,
#upload .section-title,
#examples .section-title,
#guides .section-title {
  font-weight: 900;
}

#benefits .section-title,
#upload .section-title,
#examples .section-title,
#guides .section-title {
  font-size: clamp(1.889rem, 4.392vw, 3.25rem);
}

#how { scroll-margin-top: 4.75rem; }
#passport-card { scroll-margin-top: 4.75rem; }

.lead, .muted { color: var(--muted); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 40rem) minmax(0, 370px);
  justify-content: center;
  gap: 2.5rem;
  align-items: center;
  max-width: 1232px;
  margin: 0 auto;
  padding: 3.2rem 1.5rem 2.4rem;
  min-height: min(72vh, 680px);
}

.hero h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.9rem, 4.6vw, 4.15rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  margin: 0 0 1rem;
}

.hero .lead { max-width: 36rem; font-size: 1.08rem; }

.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  max-width: 100%;
  margin-top: 1.4rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  max-width: 100%;
}

.hero-follow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 0;
  min-width: 100%;
}

/* Колонка с текстом — контейнер: плашки не шире неё и на узком окне
   переносятся на новую строку, а не заезжают под блок с анимацией. */
.hero-copy {
  min-width: 0;
  container-type: inline-size;
}

.hero-follow .chips {
  align-self: flex-start;
  width: max-content;
  max-width: min(100cqw, calc(100vw - 3rem));
  margin-top: 1.1rem;
}

.hero-actions .btn.ghost {
  border: 2px solid var(--ink);
  color: var(--ink);
  padding: calc(0.85rem - 2px) calc(1.35rem - 2px);
}

.hero-actions .btn.ghost:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent-2);
  box-shadow: var(--btn-hover-shadow);
}

/* Телефон: две кнопки героя на одной линии, пока помещаются целиком
   (от 360px: iPhone 375–430, типичный Android); уже — друг под другом
   на всю ширину. Текст кнопки никогда не обрезается и не переносится. */
@media (max-width: 480px) {
  .hero-actions {
    gap: 0.5rem;
    width: 100%;
  }
  .hero-actions .btn {
    flex: 1 1 auto;
    min-width: max-content;
    padding: 0.8rem 0.6rem;
    font-size: 0.9rem;
    white-space: nowrap;
  }
  .hero-actions .btn.ghost {
    padding: calc(0.8rem - 2px) calc(0.6rem - 2px);
  }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.chips li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.hero-follow .chips li {
  border-color: transparent;
  background: #eaf3ff;
  color: var(--accent-2);
  font-weight: 600;
}

.hero-collage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
  padding-bottom: 1.5rem;
}

/* Демо обработки: селфи → лицо → фон → кадр 35×45 → свет → готово.
   Шаг ставит app.js в data-step, переходы между шагами описаны здесь.
   Переходы в «source» — это сброс цикла: слои гаснут, потом тихо встают на место. */
.hero-demo {
  --p: 0;
  position: relative;
  width: min(370px, 100%);
  transform-origin: center 80%;
  animation: hero-deal 1.9s ease-out backwards;
}

.hero-demo-card {
  position: relative;
  aspect-ratio: 827 / 1063;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 60px -24px rgb(0 40 90 / 35%), var(--shadow);
  isolation: isolate;
}

.hero-demo-card img,
.hero-demo-card svg {
  position: absolute;
  display: block;
}

/* Исходник и его вырезка стоят «cover» по высоте; числа — из точек лица,
   чтобы после кадрирования глаза и подбородок легли на готовый кадр. */
.hero-demo-src,
.hero-demo-subject {
  top: 0;
  left: -14.27%;
  width: 128.54%;
  height: 100%;
}

.hero-demo-subject {
  position: absolute;
  transform-origin: 0 0;
  transition: transform 0s 0.9s;
}

.hero-demo-cut,
.hero-demo-mesh,
.hero-demo-final,
.hero-demo-guides {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Во втором кадре над головой дорисован запас: 160 из 1414 px высоты,
   рамка исходного фото — нижние 1254 px.
   Проявление — шторка: окно едет вправо, картинка внутри едет обратно и стоит
   на месте. Только transform, браузер не перерисовывает кадр. */
.hero-demo-reveal {
  position: absolute;
  top: -12.76%;
  left: 0;
  width: 100%;
  height: 112.76%;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.9s ease, transform 0s 0.9s;
  will-change: transform, opacity;
}

.hero-demo-cut {
  transform: translateX(100%);
  transition: transform 0s 0.9s;
  will-change: transform;
}

.hero-demo-beam {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(-100%);
  will-change: transform, opacity;
  background: linear-gradient(
    90deg,
    transparent 62%,
    rgb(245 245 247 / 8%) 88%,
    rgb(245 245 247 / 26%)
  );
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0s 0.9s;
}

.hero-demo-beam::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgb(255 255 255 / 75%) 0 1px, transparent 1.6px);
  background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent 72%, #000);
  mask-image: linear-gradient(90deg, transparent 72%, #000);
}

.hero-demo-beam::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 2px;
  background: #fff;
  box-shadow:
    0 0 6px 1px rgb(255 255 255 / 90%),
    0 0 18px 4px rgb(245 245 247 / 60%),
    0 0 42px 10px rgb(245 245 247 / 30%);
}

.hero-demo-mesh {
  overflow: visible;
  opacity: 0;
  filter: drop-shadow(0 0 1px rgb(0 0 0 / 30%));
  transition: opacity 0.5s ease;
}

/* Сетка лица вырастает от носа наружу. */
.hero-demo-mesh-lines {
  transform: scale(0.55);
  transform-origin: 50.5% 42%;
  transition: opacity 0.5s ease, transform 0s 0.9s;
}

.hero-demo-lines {
  fill: none;
  stroke: rgb(245 245 247 / 50%);
  stroke-width: 1.1;
}

.hero-demo-hud {
  fill: none;
  stroke: rgb(255 255 255 / 85%);
  stroke-width: 2;
  stroke-linecap: round;
}

.hero-demo-dots circle {
  fill: rgb(245 245 247 / 70%);
  stroke: rgb(0 0 0 / 14%);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 0s 0.9s;
}

.hero-demo-final {
  opacity: 0;
  transition: opacity 0.9s ease;
  will-change: opacity;
}

/* Световая волна идёт по краю проявления готового кадра. */
.hero-demo-ring {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 200%;
  aspect-ratio: 1;
  border: 2px solid rgb(255 255 255 / 90%);
  border-radius: 50%;
  box-shadow:
    0 0 24px 4px rgb(245 245 247 / 45%),
    inset 0 0 24px 4px rgb(245 245 247 / 30%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  will-change: transform, opacity;
}

.hero-demo-guides {
  fill: none;
  stroke: rgb(245 245 247 / 70%);
  stroke-width: 2.2;
  stroke-dasharray: 10 9;
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 0.4s ease, transform 0s 0.4s;
}

.hero-demo-size {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.hero-demo-status {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 15.5rem;
  padding: 0.6rem 1rem 0.72rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 30px -10px rgb(0 40 90 / 30%);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  transform: translate(-50%, 50%);
}

.hero-demo-mark {
  position: relative;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: rgb(0 113 227 / 14%);
  transition: background-color 0.3s ease;
}

.hero-demo-mark::before {
  content: "";
  position: absolute;
  inset: 0.3rem;
  border-radius: 50%;
  background: var(--accent);
  animation: hero-demo-pulse 1.2s ease-in-out infinite;
  transition: opacity 0.2s ease;
}

.hero-demo-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  width: 0.3rem;
  height: 0.56rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  /* После поворота «уголок» галочки уходит вниз: -63% ставит её центр масс
     в центр кружка. */
  transform: translate(-50%, -63%) rotate(45deg) scale(0);
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}

/* Точка и текущая подпись — одна группа по центру плашки: в потоке только
   активная подпись, остальные лежат поверх неё и гаснут. Ширина плашки
   постоянная, поэтому она не прыгает при смене шага. */
.hero-demo-labels {
  position: relative;
}

.hero-demo-labels > span {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(0.45rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.hero-demo-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgb(0 113 227 / 12%);
}

.hero-demo-progress i {
  display: block;
  height: 100%;
  background: var(--accent);
  /* Во время цикла полоску ведёт app.js одной ровной анимацией до «Готово». */
  transform: scaleX(var(--p));
  transform-origin: left;
}

/* Очередь появления точек сетки (инлайн-стили запрещены CSP). */
.hero-demo-dots circle:nth-child(2) { --i: 1; }
.hero-demo-dots circle:nth-child(3) { --i: 2; }
.hero-demo-dots circle:nth-child(4) { --i: 3; }
.hero-demo-dots circle:nth-child(5) { --i: 4; }
.hero-demo-dots circle:nth-child(6) { --i: 5; }
.hero-demo-dots circle:nth-child(7) { --i: 6; }
.hero-demo-dots circle:nth-child(8) { --i: 7; }
.hero-demo-dots circle:nth-child(9) { --i: 8; }
.hero-demo-dots circle:nth-child(10) { --i: 9; }
.hero-demo-dots circle:nth-child(11) { --i: 10; }
.hero-demo-dots circle:nth-child(12) { --i: 11; }
.hero-demo-dots circle:nth-child(13) { --i: 12; }
.hero-demo-dots circle:nth-child(14) { --i: 13; }
.hero-demo-dots circle:nth-child(15) { --i: 14; }
.hero-demo-dots circle:nth-child(16) { --i: 15; }
.hero-demo-dots circle:nth-child(17) { --i: 16; }
.hero-demo-dots circle:nth-child(18) { --i: 17; }
.hero-demo-dots circle:nth-child(19) { --i: 18; }
.hero-demo-dots circle:nth-child(20) { --i: 19; }
.hero-demo-dots circle:nth-child(21) { --i: 20; }
.hero-demo-dots circle:nth-child(22) { --i: 21; }
.hero-demo-dots circle:nth-child(23) { --i: 22; }
.hero-demo-dots circle:nth-child(24) { --i: 23; }
.hero-demo-dots circle:nth-child(25) { --i: 24; }
.hero-demo-dots circle:nth-child(26) { --i: 25; }
.hero-demo-dots circle:nth-child(27) { --i: 26; }
.hero-demo-dots circle:nth-child(28) { --i: 27; }
.hero-demo-dots circle:nth-child(29) { --i: 28; }
.hero-demo-dots circle:nth-child(30) { --i: 29; }
.hero-demo-dots circle:nth-child(31) { --i: 30; }
.hero-demo-dots circle:nth-child(32) { --i: 31; }
.hero-demo-dots circle:nth-child(33) { --i: 32; }
.hero-demo-dots circle:nth-child(34) { --i: 33; }
.hero-demo-dots circle:nth-child(35) { --i: 34; }
.hero-demo-dots circle:nth-child(36) { --i: 35; }
.hero-demo-dots circle:nth-child(37) { --i: 36; }
.hero-demo-dots circle:nth-child(38) { --i: 37; }
.hero-demo-dots circle:nth-child(39) { --i: 38; }
.hero-demo-dots circle:nth-child(40) { --i: 39; }
.hero-demo-dots circle:nth-child(41) { --i: 0; }
.hero-demo-dots circle:nth-child(42) { --i: 1; }
.hero-demo-dots circle:nth-child(43) { --i: 2; }
.hero-demo-dots circle:nth-child(44) { --i: 3; }
.hero-demo-dots circle:nth-child(45) { --i: 4; }
.hero-demo-dots circle:nth-child(46) { --i: 5; }
.hero-demo-dots circle:nth-child(47) { --i: 6; }
.hero-demo-dots circle:nth-child(48) { --i: 7; }
.hero-demo-dots circle:nth-child(49) { --i: 8; }
.hero-demo-dots circle:nth-child(50) { --i: 9; }
.hero-demo-dots circle:nth-child(51) { --i: 10; }
.hero-demo-dots circle:nth-child(52) { --i: 11; }
.hero-demo-dots circle:nth-child(53) { --i: 12; }
.hero-demo-dots circle:nth-child(54) { --i: 13; }
.hero-demo-dots circle:nth-child(55) { --i: 14; }
.hero-demo-dots circle:nth-child(56) { --i: 15; }

/* --- Шаги --- */
.hero-demo[data-step="done"] { --p: 1; }

.hero-demo[data-step="source"] [data-label="source"],
.hero-demo[data-step="detect"] [data-label="detect"],
.hero-demo[data-step="background"] [data-label="background"],
.hero-demo[data-step="guides"] [data-label="guides"],
.hero-demo[data-step="frame"] [data-label="frame"],
.hero-demo[data-step="retouch"] [data-label="retouch"],
.hero-demo[data-step="magic"] [data-label="magic"],
.hero-demo[data-step="done"] [data-label="done"] {
  position: static;
  display: block;
  opacity: 1;
  transform: none;
}

.hero-demo:is([data-step="detect"], [data-step="background"]) .hero-demo-mesh {
  opacity: 1;
}

.hero-demo:is([data-step="detect"], [data-step="background"], [data-step="guides"])
  .hero-demo-mesh-lines {
  transform: none;
  transition: opacity 0.5s ease, transform 1.1s cubic-bezier(0.3, 0.7, 0.3, 1) 0.15s;
}

.hero-demo:is([data-step="detect"], [data-step="background"], [data-step="guides"])
  .hero-demo-dots circle {
  transform: scale(1);
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) calc(0.25s + var(--i, 0) * 28ms);
}

.hero-demo:is(
    [data-step="background"],
    [data-step="guides"],
    [data-step="frame"],
    [data-step="retouch"], [data-step="magic"],
    [data-step="done"]
  )
  :is(.hero-demo-reveal, .hero-demo-cut) {
  opacity: 1;
  transform: none;
  transition: opacity 0s, transform 1.5s cubic-bezier(0.55, 0, 0.35, 1);
}

/* Второй кадр уже закрыл исходник целиком: убираем его, чтобы при кадрировании
   над головой был белый фон карточки, а не кухня. */
.hero-demo:is([data-step="guides"], [data-step="frame"], [data-step="retouch"], [data-step="magic"], [data-step="done"])
  .hero-demo-src {
  opacity: 0;
}

.hero-demo[data-step="background"] .hero-demo-beam {
  opacity: 1;
  transform: none;
  transition: opacity 0.2s ease, transform 1.5s cubic-bezier(0.55, 0, 0.35, 1);
}

.hero-demo:is([data-step="guides"], [data-step="frame"], [data-step="retouch"], [data-step="magic"], [data-step="done"])
  .hero-demo-beam {
  transform: none;
  transition: opacity 0.3s ease;
}

.hero-demo:is([data-step="frame"], [data-step="retouch"], [data-step="magic"], [data-step="done"])
  .hero-demo-subject {
  transform: translate(-5.04%, 11.22%) scale(1.0971);
  transition: transform 1.3s cubic-bezier(0.65, 0, 0.25, 1);
}

.hero-demo:is([data-step="guides"], [data-step="frame"], [data-step="retouch"], [data-step="magic"])
  .hero-demo-guides {
  opacity: 1;
  transform: none;
  transition: opacity 0.3s ease, transform 0.9s cubic-bezier(0.3, 0.7, 0.3, 1);
}

.hero-demo:is([data-step="guides"], [data-step="frame"], [data-step="retouch"], [data-step="magic"], [data-step="done"])
  .hero-demo-size {
  opacity: 1;
  transform: none;
}

.hero-demo:is([data-step="retouch"], [data-step="magic"], [data-step="done"]) .hero-demo-final {
  opacity: 1;
  transition: opacity 1.5s cubic-bezier(0.45, 0, 0.25, 1);
}

.hero-demo:is([data-step="retouch"], [data-step="magic"]) .hero-demo-ring {
  animation: hero-demo-ring 1.7s cubic-bezier(0.45, 0, 0.25, 1) forwards;
}

.hero-demo[data-step="done"] .hero-demo-mark {
  background: #00ba00;
}

.hero-demo[data-step="done"] .hero-demo-mark::before {
  opacity: 0;
  animation: none;
}

.hero-demo[data-step="done"] .hero-demo-mark::after {
  transform: translate(-50%, -63%) rotate(45deg) scale(1);
}

.band {
  max-width: 1120px;
  margin: 0 auto;
  padding: 2.35rem 1.5rem;
  scroll-margin-top: 4.75rem;
}

.band-alt {
  max-width: none;
  padding-left: max(1.5rem, calc((100% - 1120px) / 2 + 1.5rem));
  padding-right: max(1.5rem, calc((100% - 1120px) / 2 + 1.5rem));
  background: #fff;
  border-block: 0;
}

#benefits.band-alt,
#upload.band-alt {
  padding-left: max(1.5rem, calc((100% - 1232px) / 2 + 1.5rem));
  padding-right: max(1.5rem, calc((100% - 1232px) / 2 + 1.5rem));
}

#examples.band {
  max-width: 1360px;
}

#guides.band {
  padding-bottom: 4.75rem;
}

#benefits .section-title,
#upload .section-title,
#examples .section-title,
#guides .section-title {
  margin-bottom: 4.75rem;
}

#upload .section-title {
  margin-bottom: 0.75rem;
}

.upload-lead {
  max-width: 36rem;
  margin: 0 auto 2.5rem;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.3rem 1.25rem;
}

.card h3, .card h2 {
  margin: 0 0 0.45rem;
  font-size: 1.15rem;
}

.card p { margin: 0; }

.how-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.1rem;
  row-gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  scroll-margin-top: 5.5rem;
}

.how-step {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 10px 28px rgb(0 0 0 / 4%);
  overflow: hidden;
}

.how-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 6.38rem 1fr;
  gap: 0.94rem;
  align-items: start;
  background: var(--card);
  border: 0;
  border-radius: 0;
  padding: 1.27rem 1.27rem 1.15rem;
  box-shadow: none;
}

.how-more {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 0.9rem 1rem;
  text-align: center;
  background: var(--accent);
  color: #fff;
}

.how-more p {
  margin: 0;
  color: #fff;
}

.how-more p:first-child {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.how-more p + p {
  margin-top: 0.22rem;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.how-art {
  position: relative;
  width: 6.38rem;
  height: 8.14rem;
  overflow: hidden;
  border-radius: 13px;
  background: #fff;
}

.how-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: inherit;
}

.how-art-scan::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 113 227 / 14%);
  pointer-events: none;
}

.how-scan {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgb(90 190 255 / 28%) 42%,
    rgb(255 255 255 / 88%) 50%,
    rgb(0 113 227 / 40%) 58%,
    transparent
  );
  animation: how-scan 2.8s linear infinite;
  pointer-events: none;
}

.how-n {
  display: block;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.how-copy {
  min-width: 0;
  container-type: inline-size;
}

.how-card h3 {
  margin: 0.12rem 0 0.35rem;
  font-size: clamp(0.84rem, 8.2cqi, 1.05rem);
  line-height: 1.25;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
}

.how-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.examples-carousel {
  --examples-gap: 1.25rem;
  --examples-view: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1.15rem;
  row-gap: 1.35rem;
}

.examples-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
}

.examples-arrow:hover {
  opacity: 0.72;
}

.examples-arrow-prev {
  grid-column: 1;
  grid-row: 1;
}

.examples-arrow-next {
  grid-column: 3;
  grid-row: 1;
}

.examples-viewport {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  padding: 0.45rem 0.35rem 0.95rem;
  overflow-x: clip;
  overflow-y: visible;
}

.examples-dots {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(0.4rem + 2px);
}

.examples-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(0.48rem + 2px);
  height: calc(0.48rem + 2px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.examples-dot::after {
  content: "";
  position: absolute;
  inset: -0.38rem;
}

.examples-dot::before {
  content: "";
  width: calc(0.48rem + 2px);
  height: calc(0.48rem + 2px);
  border-radius: 50%;
  background: #c8cdd4;
  transition:
    background-color 160ms ease,
    transform 160ms ease;
}

.examples-dot.is-on::before {
  background: var(--accent);
  transform: scale(1.28);
}

.examples-arrow:focus-visible,
.examples-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.review-grid {
  display: flex;
  gap: var(--examples-gap, 1.25rem);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.examples-carousel .review-card {
  flex: 0 0 calc(
    (100% - var(--examples-gap) * (var(--examples-view) - 1)) /
      var(--examples-view)
  );
  min-width: 0;
}

.review-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid rgb(29 29 31 / 8%);
  border-radius: 22px;
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: 0 14px 34px rgb(15 23 42 / 7%);
}

.review-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 0 0.85rem;
}

.review-doc,
.review-before figcaption,
.review-after figcaption {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 1.65rem;
  /* 1px снизу: Montserrat сидит чуть ниже геометрического центра */
  padding: 0 0.7rem 1px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.review-before figcaption,
.review-after figcaption {
  min-height: 1.35rem;
}

.review-doc {
  background: rgb(0 113 227 / 9%);
  color: var(--accent);
}

.review-pair {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
}

.review-before,
.review-after {
  position: relative;
  min-width: 0;
  margin: 0;
}

.review-before img,
.review-after img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 9;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 14px;
}

.review-before img {
  filter: saturate(0.86);
}

.review-before figcaption,
.review-after figcaption {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  background: rgb(255 255 255 / 88%);
  color: var(--ink);
  backdrop-filter: blur(6px);
}

.review-after figcaption {
  background: var(--accent);
  color: #fff;
}

.review-after img {
  box-shadow:
    0 0 0 2px rgb(0 113 227 / 38%),
    0 12px 24px rgb(0 113 227 / 14%);
}

.examples-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.6rem;
  text-align: center;
}

.studio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  max-width: 1232px;
  margin-inline: auto;
  align-items: stretch;
}

.studio .card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Левая карточка — та же рамка, что у карточки загрузки. */
.card.studio-reqs {
  padding: calc(1.4rem - 1px) calc(1.3rem - 1px) 0;
  border: 2px solid var(--accent);
  box-shadow:
    0 0 0 4px rgb(0 113 227 / 12%),
    0 14px 36px rgb(0 113 227 / 14%);
}

/* Карточка загрузки — точка входа: акцентная обводка и ярлык «Начните здесь».
   Обводка 2px, поэтому поля на 1px меньше: текст стоит на одной линии с левой. */
#passport-card {
  position: relative;
  padding: calc(1.4rem - 1px) calc(1.3rem - 1px) calc(1.25rem - 1px);
  border: 2px solid var(--accent);
  box-shadow:
    0 0 0 4px rgb(0 113 227 / 12%),
    0 14px 36px rgb(0 113 227 / 14%);
}

.studio-flag {
  position: absolute;
  top: 0;
  left: 1.1rem;
  transform: translateY(-50%);
  padding: 0.25rem 0.7rem;
  border: 3px solid var(--card);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.studio.is-busy .studio-flag,
.studio.is-done .studio-flag {
  display: none;
}

.card .studio-reqs-note {
  margin: 0 0 1.55rem;
  font-size: 0.8rem;
  line-height: 1.4;
}

.studio-points {
  margin: 1.45rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.62rem;
}

.studio-points li {
  display: grid;
  grid-template-columns: 6px 1fr;
  gap: 0.7rem;
  align-items: start;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.4;
  text-wrap: pretty;
}

/* Целые px: при дробных rem браузер округляет ширину и высоту по-разному,
   и на части ширин экрана кружок сплющивается в овал. */
.studio-points li::before {
  content: "";
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
}

.studio-icons {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: start;
  gap: 0.85rem 0.4rem;
  margin-top: auto;
  margin-bottom: auto;
  padding: 1.15rem 0;
  list-style: none;
}

.studio-icons li {
  display: grid;
  justify-items: center;
  flex: 1 1 0;
  min-width: 0;
  gap: 0.4rem;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 520px) {
  .studio-icons {
    flex-wrap: wrap;
    gap: 0.75rem 0.7rem;
  }

  .studio-icons li {
    flex: 1 1 5.6rem;
    min-width: 5.6rem;
  }
}

/* Плитка: фон и прозрачная обводка в цвете сайта, как у рамки карточки.
   Красная только у непройденного пункта; «пройдено» показывает галочка. */
.studio-icon {
  display: grid;
  place-items: center;
  position: relative;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 12px;
  background: rgb(0 113 227 / 8%);
  box-shadow: 0 0 0 3px rgb(0 113 227 / 10%);
  color: var(--ink);
  transition: background-color 0.28s ease, box-shadow 0.28s ease;
}

.studio-icons li.is-fail .studio-icon {
  background: rgb(217 48 37 / 10%);
  box-shadow: 0 0 0 3px rgb(217 48 37 / 12%);
}

.studio-icons li.is-fail {
  color: #b3261e;
}

.studio-icon svg,
.studio-icon img {
  width: 2.35rem;
  height: 2.35rem;
  object-fit: contain;
}

.studio-check {
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  transform: scale(0.45);
  pointer-events: none;
}

.studio-check img {
  display: none;
  width: 100%;
  height: 100%;
}

.studio-icons li.is-ok .studio-check,
.studio-icons li.is-fail .studio-check {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.studio.is-checks-now .studio-icons li.is-ok .studio-check,
.studio.is-checks-now .studio-icons li.is-fail .studio-check {
  transition: none;
}

.studio-icons li.is-ok .studio-check-ok,
.studio-icons li.is-fail .studio-check-fail {
  display: block;
}

.studio.is-busy,
.studio.is-done {
  align-items: stretch;
}

.studio.is-busy .upload-confirm,
.studio.is-done .upload-confirm {
  display: none;
}

.studio-result {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  max-width: 1232px;
  margin: 0 auto;
  opacity: 0;
  scroll-margin-top: 4.75rem;
  transition:
    grid-template-rows 0.45s ease,
    opacity 0.35s ease,
    margin-top 0.45s ease;
}

.studio-result-body {
  min-height: 0;
  overflow: hidden;
}

#upload.has-result .studio-result {
  grid-template-rows: 1fr;
  margin-top: 1.5rem;
  opacity: 1;
}

#upload.has-result .studio-result .result {
  margin: 0;
  padding: 0;
  max-width: none;
}

.panel[hidden] { display: none !important; }

.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 12rem;
  margin: 1rem 0;
  border: 1px dashed var(--line);
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.drop input { display: none; }

.drop.is-over { border-color: var(--accent); background: rgb(0 113 227 / 8%); }

.drop-main {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
}

.drop-icon {
  display: grid;
  place-items: center;
  color: var(--accent);
}

.drop-icon svg {
  width: 2.5rem;
  height: 2.5rem;
}

.drop-title { font-weight: 700; }

.drop-hint {
  max-width: 100%;
  margin-top: 0.85rem;
  padding-inline: 1.25rem;
  text-wrap: balance;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Фото целиком (contain), а пустые поля рамки заполняет его же размытая копия:
   рамка не растёт, кадр не обрезается. */
.drop-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.drop.has-file::before {
  content: "";
  position: absolute;
  inset: -1.5rem;
  background: var(--drop-photo) center / cover no-repeat;
  filter: blur(22px) saturate(1.15);
  opacity: 0.85;
}

.drop.is-busy::before,
.drop.is-done::before {
  content: none;
}

.drop.has-file .drop-main,
.drop.has-file .drop-icon,
.drop.has-file .drop-title,
.drop.has-file .drop-hint { display: none; }

.drop-process {
  display: none;
  justify-items: center;
  gap: 0.7rem;
  padding: 0.35rem 1rem;
  pointer-events: none;
}

.drop-timer-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 8.2rem;
  height: 8.2rem;
}

.drop-timer-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(-1) rotate(-90deg);
}

.drop-timer-track,
.drop-timer-progress {
  fill: none;
  stroke-width: 5.5;
}

.drop-timer-track {
  stroke: rgb(0 113 227 / 16%);
}

.drop-timer-progress {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.25s linear, stroke 0.3s ease;
}

.drop-timer {
  position: relative;
  color: var(--accent);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.drop-timer-colon {
  display: inline-block;
  margin-inline: 0.06em;
}

.drop-check,
.drop-wait {
  display: none;
  position: relative;
  z-index: 1;
  max-width: 16rem;
  color: var(--muted);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}

.drop.is-checking .drop-timer,
.drop.is-checking .drop-timer-ring,
.drop.is-checking .drop-stage,
.drop.is-checking .drop-wait,
.drop.is-checking .drop-done {
  display: none;
}

.drop.is-checking .drop-process,
.drop.is-holding .drop-process {
  width: 100%;
  min-height: 12rem;
  align-content: center;
}

.drop.is-checking .drop-timer-wrap {
  width: 100%;
  height: auto;
}

.drop.is-checking .drop-check,
.drop.is-checking .drop-check[hidden] {
  display: block;
}

.drop.is-holding .drop-timer,
.drop.is-holding .drop-timer-ring,
.drop.is-holding .drop-check,
.drop.is-holding .drop-done,
.drop.is-holding .drop-stage {
  display: none;
}

.drop.is-holding .drop-timer-wrap {
  width: 100%;
  height: auto;
}

.drop.is-holding .drop-wait,
.drop.is-holding .drop-wait[hidden] {
  display: block;
}

.drop-done {
  display: none;
  position: relative;
  justify-items: center;
  align-items: center;
  align-content: center;
  gap: 0.28rem;
  margin: 0;
  color: #00ba00;
  z-index: 1;
}

.drop-done-label {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.drop-stage {
  position: relative;
  width: min(100%, 18rem);
  min-height: 1.45em;
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  text-align: center;
  text-wrap: balance;
}

.drop-stage-line {
  display: block;
}

.drop-stage-line.is-out {
  animation: stage-fade-out 0.4s ease forwards;
}

.drop-stage-line.is-in {
  animation: stage-fade-in 0.45s ease;
}

@keyframes stage-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes stage-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.drop.is-busy,
.drop.is-done {
  cursor: default;
  pointer-events: none;
  border-style: solid;
  min-height: 14.5rem;
  overflow: visible;
}

.drop.is-busy .drop-main,
.drop.is-busy .drop-hint,
.drop.is-busy .drop-preview,
.drop.is-done .drop-main,
.drop.is-done .drop-hint,
.drop.is-done .drop-preview {
  display: none !important;
}

.drop.is-busy .drop-process,
.drop.is-done .drop-process,
.drop.is-busy .drop-process[hidden],
.drop.is-done .drop-process[hidden] {
  display: grid;
}

.drop.is-done .drop-timer,
.drop.is-done .drop-check,
.drop.is-done .drop-wait,
.drop.is-done .drop-stage {
  display: none;
}

.drop.is-done .drop-timer-track,
.drop.is-done .drop-timer-progress {
  stroke: #00ba00;
}

.drop.is-done .drop-timer-progress {
  stroke-dashoffset: 0;
  transition: none;
}

.drop.is-done .drop-done {
  display: grid;
}

form.upload .drop {
  margin-bottom: 0;
}

form.upload .upload-confirm {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.75rem;
}

form.upload .upload-consent {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  line-height: 1.4;
}

form.upload .form-actions {
  margin-top: 0;
}

form.upload > .form-error,
form.upload > .trials-limit {
  margin-top: 0.85rem;
}

form.upload > .form-error {
  margin: 1rem 0 0.35rem;
  text-align: center;
  font-weight: 400;
}

form.upload.is-trials-exhausted .upload-confirm {
  display: none;
}

/* Лимит — не ошибка: текст ответа 402 дублирует плашка .trials-limit. */
form.upload.is-trials-exhausted > .form-error.action-note {
  display: none;
}

form.upload.is-trials-exhausted > .trials-limit {
  margin-top: 1.1rem;
}

form.upload > [data-trials-ok] {
  margin: 1.25rem 0 0;
  color: #00ba00;
  font-weight: 600;
  text-align: center;
}

.studio:has([data-trials-ok]:not([hidden])) > .card {
  padding-bottom: 1.85rem;
}

.field {
  display: grid;
  gap: 0.4rem;
  margin: 0.8rem 0;
  font-weight: 600;
}

.field input {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  background: var(--bg-2);
  color: var(--ink);
  font: inherit;
}

.form-error,
.field .form-error,
.card .form-error,
.pay-dialog-card .form-error {
  color: var(--warn);
  margin: 0.9rem 0 1.15rem;
  font-weight: 400;
  line-height: 1.45;
}

.field:has(> .form-error:not([hidden])) {
  gap: 0.75rem;
  margin-bottom: 1.2rem;
}

.field .form-error {
  text-align: left;
}

.action-note {
  text-align: center;
}

.form-ok { color: var(--accent-2); margin: 0.6rem 0 0; font-weight: 600; }

/* Лимит попыток: серая плашка с ожиданием, ниже пакет в рамке карточки загрузки. */
.trials-limit {
  display: grid;
  gap: 0.9rem;
  margin: 0.8rem 0 0;
}

.trials-limit[hidden] {
  display: none;
}

.trials-limit-wait {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.95rem;
  border-radius: 14px;
  background: var(--bg-2);
}

.trials-limit-wait-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
}

.trials-limit-wait-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.trials-limit .trials-limit-wait p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.trials-limit-wait strong {
  display: block;
  color: var(--ink);
  font-size: 0.95rem;
}

.trials-limit .trials-limit-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.trials-limit-or::before,
.trials-limit-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.trials-limit-pack {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 2px solid var(--accent);
  border-radius: 16px;
  background: rgb(0 113 227 / 5%);
  box-shadow: 0 0 0 4px rgb(0 113 227 / 10%);
}

.trials-limit-pack-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.trials-limit-pack-price {
  flex: none;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.trials-limit > .btn {
  padding-block: 0.95rem;
}

.promo-toggle > summary {
  display: inline-block;
  margin: 0.8rem 0;
  color: var(--accent-2);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.promo-toggle > summary::-webkit-details-marker {
  display: none;
}

.promo-toggle > summary::marker {
  content: "";
}

.promo-toggle > summary:hover {
  text-decoration: underline;
}

.promo-toggle > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.promo-toggle[open] > summary {
  display: none;
}

.promo-row {
  display: flex;
  gap: 0.5rem;
  font-weight: 400;
}

.promo-row input {
  flex: 1;
  min-width: 0;
}

.promo-row .btn {
  flex: none;
  padding-block: 0.75rem;
}

.pay-dialog-card .promo-row .btn.ghost {
  margin-top: 0;
}

.field .promo-ok {
  margin: 0;
}

.pay-dialog {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 1rem;
  border: 0;
  background: transparent;
  color: inherit;
}

.pay-dialog[open] {
  display: grid;
  place-items: center;
}

.pay-dialog::backdrop {
  background: rgb(28 25 22 / 40%);
}

.pay-dialog-card {
  position: relative;
  width: min(28rem, 100%);
  padding: 1.4rem 1.5rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--dialog-shadow);
}

.pay-dialog-card h2 {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-size: 1.45rem;
}

.pay-dialog-card .muted { margin: 0 0 0.4rem; }

.confirm-card {
  width: min(28rem, 100%);
  padding: 2.2rem 2rem 2rem;
  text-align: center;
}

.status-icon.confirm-icon {
  width: 3.2rem;
  height: 3.2rem;
  margin: 0 auto 0.9rem;
}

.status-icon.confirm-icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.confirm-card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.pay-dialog-card.confirm-card p {
  margin: 0 0 1.8rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}

.pay-dialog-card .confirm-actions .btn,
.pay-dialog-card .confirm-actions .btn.ghost {
  box-sizing: border-box;
  margin: 0;
  min-width: 8rem;
  height: 2.75rem;
  padding: 0 1.4rem;
}

.confirm-card .btn.ghost,
.confirm-card .btn.ghost:hover:not(:disabled) {
  border-color: var(--ink);
}

.dialog-close {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.dialog-close svg {
  width: 1.5rem;
  height: 1.5rem;
}

.dialog-close:hover {
  color: var(--ink);
  background: transparent;
}

.pay-dialog-close,
.staff-photo-dialog-close {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
}

.pay-dialog-card .btn.ghost { margin-top: 0.45rem; }

.faq-band {
  --faq-ink: #141414;
  --faq-line: var(--line);
  background: #fff;
  scroll-margin-top: 4.75rem;
}

.faq-layout {
  max-width: 1120px;
  margin: 0 auto;
  padding: 5.4rem 1.5rem 4.8rem;
  display: grid;
  grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  font-family: var(--font);
  color: var(--faq-ink);
}

.faq-kicker {
  margin: 0 0 0.85rem;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 1px var(--accent);
  paint-order: stroke fill;
}

.faq-title {
  margin: 0;
  font-family: inherit;
  font-weight: 900;
  font-size: clamp(2.18rem, 5.068vw, 3.75rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--faq-ink);
}

.faq details {
  border-top: 1px solid var(--faq-line);
  padding: 1.15rem 0 1.2rem;
}

.faq details:last-child { border-bottom: 1px solid var(--faq-line); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  cursor: pointer;
  list-style: none;
  font-weight: 400;
  font-size: 1.08rem;
  line-height: 1.25;
  color: var(--faq-ink);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::marker { content: ""; }

.faq-q {
  min-width: 0;
}

.faq-icons {
  flex: 0 0 0.9rem;
  width: 0.9rem;
  height: 0.9rem;
  display: grid;
  place-items: center;
}

.faq-icon {
  grid-area: 1 / 1;
  display: block;
  width: 0.9rem;
  height: auto;
}

.faq-icon-minus { display: none; }

.faq details[open]:not(.is-closing) > summary .faq-icon-plus { display: none; }

.faq details[open]:not(.is-closing) > summary .faq-icon-minus { display: block; }

.faq-panel {
  overflow: hidden;
  transition: height 0.4s ease;
}

.faq details:not([open]) > .faq-panel { height: 0; }

@media (prefers-reduced-motion: reduce) {
  .faq-panel { transition: none; }
}

.faq summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.faq p {
  margin: 0.55rem 1.8rem 0.1rem 0;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--muted);
}

.page-narrow {
  max-width: 560px;
  margin: 3rem auto;
  padding: 1.4rem 1.5rem 1.5rem;
}

.page-narrow.pay {
  max-width: 42rem;
}

.page-narrow > h1,
.card > h1,
.pay-dialog-card > h2 {
  margin-top: 0;
}

.page-narrow > h1 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 0 0 20px;
}

.page-narrow > h1 + .muted {
  margin-top: 0;
}

/* Вход сотрудника, шаг кода: «Отправить ещё раз» и «Назад» под формой. */
.staff-login-more {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.staff-login-more form {
  margin: 0;
}

main:has(> .photos-page) {
  padding-bottom: 0.5rem;
}

.photos-page {
  max-width: 1120px;
  margin: 3rem auto 1.5rem;
  padding: 1.4rem 1.5rem 1rem;
}

.photos-page > h1,
.photos-login > h1 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 0 0 20px;
}

.photos-login {
  max-width: 560px;
  margin: 0 auto 1.5rem;
}

.photos-login > h1 + .muted {
  margin-top: 0;
}

.not-found-body {
  min-height: 100vh;
}

.not-found {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 2rem 1.25rem;
  text-align: center;
}

.not-found-code {
  margin: 0;
  color: var(--accent);
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(6rem, 18vw, 10.5rem);
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.not-found-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.04em;
}

.not-found-text {
  margin: 0;
  max-width: 26rem;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.45;
}

.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 0.75rem;
}

.contact-home {
  margin-top: 1rem;
}

/* Пробные кадры с водяным знаком: картинка не ловит клик, её не выделить и не перетащить. */
[data-protect],
[data-protect] img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

[data-protect] img {
  pointer-events: none;
}

@media print {
  [data-protect] {
    visibility: hidden;
  }

  .rating-card {
    display: none !important;
  }
}

/* «Как вам обработка?»: полупрозрачная панель на весь макет, кнопки по центру. */
.rating-card {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: 1rem;
  background: rgb(255 255 255 / 90%);
  border-radius: inherit;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.25;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.rating-card[hidden] {
  display: none;
}

.rating-card.is-visible {
  opacity: 1;
  transform: none;
}

.rating-card-title {
  font-size: 2.1rem;
  font-weight: 800;
}

.rating-card-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  justify-content: center;
  gap: 0.5rem;
}

.rating-btn {
  min-width: 9rem;
  min-height: 3.75rem;
  padding: 0.6rem 1.9rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
}

.rating-btn--like {
  border-color: #00ba00;
  color: #008a00;
}

.rating-btn--dislike {
  border-color: #1d1d1f;
}

.rating-btn:hover {
  box-shadow: var(--btn-hover-shadow);
}

.rating-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (max-width: 560px) {
  .rating-card-actions {
    justify-content: center;
  }

  .rating-btn {
    min-width: 6.5rem;
    min-height: 3rem;
  }
}

.result {
  --result-h2: 2.1rem;
  display: grid;
  gap: 1rem;
  max-width: 1440px;
  margin: 2.6rem auto 3rem;
  padding: 0 1.5rem;
}

.result-stage {
  container-type: inline-size;
  min-width: 0;
}

.result-gallery {
  --gap: 1.25rem;
  --pair: calc(35 / 45 + 1250 / 880);
  display: grid;
  grid-template-columns:
    calc((100% - var(--gap)) * (35 / 45) / var(--pair))
    minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
  margin: 1rem 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.result-gallery.is-print {
  /* Кадр 35:45 и два вертикальных листа 10:15 одной высоты: 7:9 + 6:9 + 6:9 */
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr) minmax(0, 6fr);
}

.preview {
  margin: 1rem 0;
  background: #f5f5f7;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}

.result-gallery .preview {
  margin: 0;
  max-width: none;
  width: 100%;
}

.preview img { display: block; width: 100%; }

.preview-doc { max-width: 420px; }

.result-gallery .preview-doc {
  position: relative;
  max-width: none;
  width: 100%;
  height: auto;
}

.result-gallery .preview-doc img {
  width: 100%;
  height: auto;
  aspect-ratio: 35 / 45;
  object-fit: cover;
  object-position: center 18%;
}

.passport-mockup {
  position: relative;
  margin: 0;
  width: 100%;
  height: auto;
  max-width: none;
  background: #f5f5f7;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}

.passport-mockup-page {
  --slot-left: 4%;
  --slot-top: 14.773%;
  --slot-width: 28%;
  --slot-height: 51.136%;
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1250 / 880;
}

.passport-mockup-blank {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1250 / 880;
}

.passport-mockup-face {
  position: absolute;
  z-index: 3;
  left: var(--slot-left);
  top: var(--slot-top);
  width: var(--slot-width);
  height: var(--slot-height);
  object-fit: cover;
  object-position: center 18%;
  border-radius: 0;
  filter: saturate(0.9) contrast(1.06);
}

.passport-mockup figcaption {
  margin: 0;
  padding: 0.45rem 0.2rem 0;
  color: var(--muted);
  font-size: 0.88rem;
  text-align: center;
  background: none;
  border: 0;
}

.print-sheet {
  position: relative;
  margin: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 15;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  container-type: size;
}

.print-sheet-page {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.print-sheet-grid {
  position: absolute;
  left: 11%;
  width: 78%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10.256%;
}

.print-sheet--4 .print-sheet-grid {
  top: 35%;
  height: 62.667%;
  grid-template-rows: repeat(2, 1fr);
  row-gap: 4.255%;
}

.print-sheet--6 .print-sheet-grid {
  top: 2.333%;
  height: 95.333%;
  grid-template-rows: repeat(3, 1fr);
  row-gap: 2.797%;
}

.print-sheet-logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 35%;
  pointer-events: none;
}

.print-sheet-logo-word {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: baseline;
  color: var(--accent);
  font-family: var(--display);
  font-size: 10.09cqw;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.print-sheet-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.print-sheet-tile {
  position: absolute;
  inset: 0;
}

.print-sheet-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  background: #fff;
}

.print-sheet-marks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.preview figcaption {
  margin: 0;
  padding: 0.7rem 1rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.passport-check {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem 1.25rem;
  min-width: 0;
  width: 100%;
  max-width: none;
  margin-top: 1.25rem;
}

.passport-check-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
  margin: 0;
}

summary.passport-check-bar {
  list-style: none;
  cursor: pointer;
}

summary.passport-check-bar::-webkit-details-marker {
  display: none;
}

.passport-check-lead {
  display: grid;
  align-content: center;
  gap: 0.38rem;
  min-width: 0;
}

.passport-check h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 1.05rem;
  line-height: 1;
}

.passport-check-beta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem 0.4rem;
  border-radius: 999px;
  background: rgb(0 113 227 / 12%);
  color: var(--accent-2);
  font-family: var(--display);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-indent: 0.03em;
  line-height: 1;
  text-align: center;
  transform: translateY(-0.06em);
}

.passport-check .muted {
  margin: 0 0 0.7rem;
  font-size: 0.86rem;
}

.passport-check .muted a {
  text-decoration: none;
}

.passport-check-lead .muted {
  margin: 0;
}

.passport-check-order {
  min-width: 0;
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
}

.passport-check-details {
  margin: 0;
}

.passport-check-toggle {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  margin: 0;
  color: var(--accent);
  font-size: inherit;
  font-weight: 700;
}

.passport-check-toggle::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.14em) rotate(45deg);
}

.passport-check-details[open] > .passport-check-bar {
  margin-bottom: 0.75rem;
}

.passport-check-details[open] .passport-check-toggle::after {
  transform: translateY(0.1em) rotate(225deg);
}

.passport-check-details[open] .passport-check-toggle-open,
.passport-check-details:not([open]) .passport-check-toggle-close {
  display: none;
}

.passport-check-toggle:hover,
summary.passport-check-bar:hover .passport-check-toggle {
  color: var(--accent-2);
}

.result-mail-note {
  display: grid;
  gap: 0.2rem;
  margin: 1.25rem 0 0;
  padding: 0.85rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 0.95rem;
  line-height: 1.45;
}

/* Письмо под правой колонкой на вкладке причёсок: отступ как у кнопок скачивания. */
.result-side .result-mail-note {
  margin-top: 0.75rem;
}

.result-mail-resend {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.result-mail-resend:hover {
  color: var(--accent-2);
}

.result-mail-addr {
  font-weight: 800;
}

.result-mail-note[hidden] {
  display: none !important;
}

.result-mail-notes + .passport-check,
.result-mail-note + .passport-check,
[data-mail-home] + .passport-check {
  margin-top: 0.85rem;
}

/* Без блока «Автопроверка» кнопки идут сразу под уведомлением о почте — не вплотную. */
.result-mail-notes + .actions,
.result-mail-note + .actions,
[data-mail-home] + .actions {
  margin-top: 1rem;
}

/* Якорь «Доступно после оплаты» из панели причёсок: кнопка оплаты — не под шапкой. */
#result-pay {
  scroll-margin-top: 40vh;
}

.passport-check ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  columns: 2;
  column-gap: 5rem;
}

/* Линия между колонками короче их высоты: column-rule всегда во всю высоту. */
.passport-check ul::before {
  content: "";
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: 50%;
  width: 1px;
  background: var(--line);
}

.passport-check li {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  break-inside: avoid;
  font-size: 0.92rem;
  /* Высота строки и иконки — целые px: при долях пикселя одинаковые значки
     рисуются с разным сглаживанием и выглядят разными по размеру. */
  line-height: 1.25rem;
  margin: 0;
  padding: 0.25rem 0;
}

.passport-check li strong {
  font-weight: 600;
}

.passport-check .check-code {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Справа в шапке: «18 из 18 — Соответствует», по центру высоты шапки. */
.passport-check-score {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  justify-self: end;
  white-space: nowrap;
}

.passport-check-score-text {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* Сегментная полоса слева от счёта: один отрезок на пункт, незачтённые — серые. */
/* Отрезки целой ширины в px: при долях пикселя соседние выходили разной толщины. */
.passport-check-meter {
  --seg: 8px;
  display: grid;
  /* Без --n: инлайн-style режет CSP (style-src 'self'), колонки добавляются сами. */
  grid-auto-flow: column;
  grid-auto-columns: var(--seg);
  gap: 2px;
}

@media (max-width: 1280px) {
  .passport-check-meter {
    --seg: 6px;
  }
}

.passport-check-meter i {
  height: 5px;
  border-radius: 2px;
  background: #00ba00;
}

.passport-check-meter i.fail {
  background: #bcbec0;
}

/* Средняя ширина: полоса не помещается рядом с «Свернуть» — остаётся только счёт. */
@media (min-width: 821px) and (max-width: 1100px) {
  .passport-check-meter {
    display: none;
  }
  /* «Свернуть» не по центру, а рядом со счётом: так подпись про приказ не наезжает на него. */
  .passport-check-bar {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .passport-check-order {
    white-space: normal;
  }
  /* На такой ширине — только «16 из 18», без пояснения. */
  .passport-check-score-label {
    display: none;
  }
}

.passport-check .mark {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0;
}

.passport-check .mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.passport-check-tips {
  margin: 0.9rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.passport-check-tips h3 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.passport-check-tips p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.7rem;
  row-gap: 1rem;
  align-items: center;
}
.actions form { margin: 0; }

.actions > .muted {
  flex: 1 1 100%;
  margin: 0;
}

.passport-check .actions {
  justify-content: center;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.passport-check .actions .muted {
  flex: 1 1 100%;
  margin: 0;
  text-align: center;
}

.actions .muted a {
  text-decoration: none;
}

.mail-again {
  display: grid;
  gap: 0.9rem;
}

.pay-dialog-card.mail-again h2 {
  margin: 0;
  font-size: 1.15rem;
}

.pay-dialog-card.mail-again .btn.ghost {
  margin-top: 0;
}

.mail-again .btn.wide {
  white-space: normal;
  line-height: 1.35;
  text-align: center;
}

@keyframes mail-again-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.985); }
}

@keyframes mail-again-sheen {
  0% { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}

.mail-again.is-sending .btn {
  position: relative;
  overflow: hidden;
  animation: mail-again-pulse 0.7s ease-in-out infinite;
  cursor: wait;
}

.mail-again.is-sending .btn:disabled {
  opacity: 1;
}

.mail-again.is-sending .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgb(255 255 255 / 48%) 50%,
    transparent 70%
  );
  background-size: 220% 100%;
  animation: mail-again-sheen 0.85s linear infinite;
  pointer-events: none;
}

.mail-again [data-mail-saved-btn] {
  position: relative;
}

.mail-again [data-mail-saved-btn] .mail-saved-done {
  display: none;
}

.pay-dialog-card.mail-again .btn.is-done,
.pay-dialog-card.mail-again .btn.ghost.is-done,
.pay-dialog-card.mail-again .btn.is-done:disabled {
  animation: none;
  opacity: 1;
  cursor: default;
  background: #00ba00;
  color: #fff;
  border-color: #00ba00;
  box-shadow: none;
}

.pay-dialog-card.mail-again .btn.is-done .mail-saved-label {
  visibility: hidden;
}

.pay-dialog-card.mail-again .btn.is-done .mail-saved-done {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
}

.mail-again .mail-again-note {
  margin: 1rem 0 0;
  text-align: center;
  font-weight: 600;
}

.pay-dialog-card.mail-again .btn.is-done::after {
  content: none;
}

.form-ok {
  margin: 0;
  color: var(--accent-2);
}

/* Карточка появляется: поднимается из размытия, один раз качается −7° → +3,4° и встаёт ровно. */
@keyframes hero-deal {
  0% {
    opacity: 0;
    translate: 0 40px;
    scale: 0.92;
    rotate: -7deg;
    filter: blur(6px);
  }
  45% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    rotate: 3.4deg;
    filter: blur(0);
  }
  100% { rotate: 0deg; }
}

@keyframes hero-demo-pulse {
  0%, 100% { transform: scale(0.75); opacity: 0.7; }
  50% { transform: scale(1); opacity: 1; }
}

@keyframes hero-demo-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@keyframes how-scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(360%); }
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1rem 0;
  font-size: 0.95rem;
}

.pay-methods {
  border: 0;
  margin: 0;
  padding: 0;
}

.pay-methods legend {
  font-size: 0.95rem;
  margin: 1rem 0 0.15rem;
}

.pay-methods .check {
  margin: 0.45rem 0;
}

.check.is-missing,
.check.is-missing a {
  color: var(--warn);
  font-weight: 400;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
}

.photos-page .photo-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.photo-grid li {
  display: grid;
  align-content: start;
  gap: 0.4rem;
}

.photo-grid li > form {
  justify-self: center;
}

.photos-purge-all {
  margin: 0;
}

.photos-purge-all .photos-link-btn {
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  background: var(--bg-2);
  font-size: 0.85rem;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.photo-code-step {
  display: block;
}

.photo-code-step[hidden] { display: none; }

.photo-code-field {
  margin-top: 0.15rem;
  margin-bottom: 0.45rem;
}

.photo-code-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.photo-code-field input {
  width: 11rem;
  max-width: 48%;
  min-width: 0;
  flex: 0 1 11rem;
}

.photo-code-step .btn {
  flex: 0 0 auto;
  line-height: 1.2;
}

.photo-code-step .btn[hidden] { display: none; }

.photo-code > .muted.action-note {
  margin-top: 1rem;
  line-height: 1.45;
}

.photo-code > .btn[hidden] { display: none; }

.photo-grid a {
  display: grid;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
}

.reveal-more {
  display: flex;
  justify-content: center;
  margin: 1.25rem 0 0;
}

.photos-page .reveal-more {
  margin-top: 2rem;
}

.photo-grid li[hidden],
.staff-photo-card[hidden] { display: none; }

.photo-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 827 / 1063;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
}

/* Кадры проявляются, когда скачаны и декодированы (app.js ставит .is-ready
   картинкам с .img-reveal), а не рисуются кусками; до этого — серая заглушка.
   Без JS страховка-анимация через 4 с всё равно показывает кадр. */
img.img-reveal {
  opacity: 0;
  animation: img-reveal-fallback 0s 4s forwards;
}

img.img-reveal.is-ready {
  opacity: 1;
  animation: none;
  transition: opacity 0.25s ease;
}

:has(> img.img-reveal:not(.is-ready)):not(.photo-shot) {
  background: var(--bg-2);
}

.photo-shot {
  position: relative;
}

.photo-shot:has(> img.img-reveal:not(.is-ready))::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 827 / 1063;
  border-radius: 12px;
  background: var(--bg-2);
}

.photo-shot > img.img-reveal {
  position: relative;
}

@keyframes img-reveal-fallback {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  img.img-reveal.is-ready { transition: none; }
}

.photo-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.3;
  white-space: nowrap;
}

.photo-pay.is-paid { color: #00ba00; }

.photo-pay.is-trial { color: var(--muted); }

textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--ink);
  padding: 0.7rem 0.85rem;
  font: inherit;
}

.pay .back { color: var(--muted); }

.pay > p:has(> .back) {
  margin-top: 1rem;
}

.foot {
  margin-top: auto;
  padding: 1.8rem 0 2.2rem;
  border-top: 0;
  background: var(--accent);
  color: rgb(255 255 255 / 82%);
  font-size: 0.88rem;
}

.foot a {
  color: #fff;
}

.foot a:hover { color: #fff; }

.foot-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1.5rem 2rem;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: left;
}

.foot-lead {
  margin: 0 0 1em;
  line-height: 1.45;
  max-width: min(33.7em, 100%);
}

.foot .brand {
  display: inline-flex;
  margin: 0.15rem 0 0;
  color: #fff;
  font-size: 1.45rem;
}

.foot .brand:hover { text-decoration: none; }

.foot-copy {
  margin: 0.95rem 0 0;
}

.foot-heading {
  margin: 0 0 0.6rem;
  color: #fff;
  font-weight: 700;
}

.foot-legal {
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot-legal li { margin: 0.35rem 0; }

.foot-legal a { color: rgb(255 255 255 / 82%); text-decoration: none; }

.foot-legal a:hover { color: #fff; }

.doc {
  max-width: 720px;
  margin: 2.5rem auto 3rem;
  padding: 0 1.5rem;
}

.doc h1 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.04em;
  margin: 0 0 1rem;
}

.doc h2 { font-size: 1.15rem; margin: 1.4rem 0 0.5rem; }

.doc p { color: var(--muted); line-height: 1.55; }

.blog-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.blog-card {
  display: block;
  height: 100%;
  padding: 1.15rem 1.2rem;
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}

#guides .blog-card {
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

#guides .blog-card::before {
  content: "";
  width: 2.6rem;
  height: 3px;
  margin-bottom: 0.9rem;
  border-radius: 999px;
  background: var(--accent);
}

#guides .blog-card::after {
  content: "Читать →";
  margin-top: auto;
  padding-top: 0.9rem;
  color: var(--accent);
  font-size: 0.86rem;
  font-weight: 700;
}

#guides .blog-card h3 {
  margin-top: 0;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
}

#guides .blog-card:hover {
  box-shadow: 0 10px 28px rgb(0 113 227 / 12%);
  transform: translateY(-2px);
}

.blog-card h2, .blog-card h3 {
  margin: 0.35rem 0 0.5rem;
  color: #141414;
  font-family: var(--font);
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.25;
}

.blog-card h2 + p,
.blog-card h3 + p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.45;
}

.blog-card:hover { border-color: var(--accent); }

body:has(#cookie-consent:not([hidden])) main {
  padding-bottom: 5.5rem;
}

.cookie-consent {
  position: fixed;
  z-index: 40;
  left: 1.45rem;
  bottom: 1.55rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  width: min(24rem, calc(100vw - 2rem));
}

.cookie-consent[hidden] { display: none; }

.cookie-bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  max-width: 100%;
  min-height: var(--float-chip-height);
  padding: 0.38rem 1.28rem;
  background: #fff;
  color: #111;
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgb(0 0 0 / 22%);
}

.cookie-bar-text {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
}

.cookie-help {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: #333;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.cookie-help[aria-expanded="true"] { border-color: var(--line); }

.cookie-dialog {
  width: 100%;
  padding: 1.1rem 1.15rem 1.15rem;
  background: #fff;
  color: #1a1a1a;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--dialog-shadow);
}

.cookie-title-wrap { margin: 0; }

.cookie-title {
  display: inline;
  padding: 0.08em 0.22em;
  font-weight: 700;
  background: #d7eaff;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.cookie-text {
  margin: 0.75rem 0 1rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.cookie-text p {
  margin: 0 0 0.7em;
}

.cookie-text p:last-child { margin-bottom: 0; }

.cookie-text a { color: #1a1a1a; text-decoration: underline; }

.cookie-accept {
  border: 0;
  border-radius: 999px;
  padding: 0.65rem 1.15rem;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.chat-launcher {
  position: fixed;
  z-index: 45;
  right: 1.45rem;
  bottom: 1.55rem;
  width: var(--float-chip-height);
  height: var(--float-chip-height);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  box-shadow: var(--btn-hover-shadow-on-blue);
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.chat-launcher:hover {
  background: #f3f8ff;
}

.chat-launcher-icon {
  display: block;
  width: calc(var(--float-chip-height) * 0.7);
  height: calc(var(--float-chip-height) * 0.7);
}

.chat-launcher {
  --chat-alert: #00ba00;
}

.chat-launcher-bubble {
  fill: var(--accent);
  transition: fill 160ms ease;
}

.chat-launcher:has(.chat-launcher-waves:not([hidden])) .chat-launcher-bubble {
  fill: var(--chat-alert);
}

.chat-launcher-waves {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.chat-launcher-waves[hidden] { display: none; }

.chat-launcher-waves svg {
  position: absolute;
  top: 50%;
  height: 62%;
  width: auto;
  overflow: visible;
  fill: none;
  stroke: var(--chat-alert);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: chat-wave 1.2s ease-out infinite;
}

.chat-launcher-waves svg:first-child {
  right: 100%;
  margin-right: 0.15rem;
  transform: translateY(-50%) scaleX(-1);
}

.chat-launcher-waves svg:last-child {
  left: 100%;
  margin-left: 0.15rem;
  transform: translateY(-50%);
}

.chat-launcher:has(.chat-launcher-waves:not([hidden])) {
  animation: chat-vibrate 1.2s ease-in-out infinite;
}

@keyframes chat-vibrate {
  0%, 40%, 100% { transform: translateX(0) rotate(0); }
  5% { transform: translateX(-3px) rotate(-6deg); }
  10% { transform: translateX(3px) rotate(6deg); }
  15% { transform: translateX(-3px) rotate(-5deg); }
  20% { transform: translateX(3px) rotate(5deg); }
  25% { transform: translateX(-2px) rotate(-3deg); }
  30% { transform: translateX(2px) rotate(3deg); }
  35% { transform: translateX(-1px) rotate(-1deg); }
}

@keyframes chat-wave {
  0%, 45%, 100% { opacity: 0; }
  10% { opacity: 1; }
  40% { opacity: 0.35; }
}

.pay-dialog.chat-dialog {
  position: fixed;
  top: auto;
  right: 1.45rem;
  bottom: 1.55rem;
  left: auto;
  width: min(22.5rem, calc(100vw - 2.9rem));
  height: fit-content;
  max-width: min(22.5rem, calc(100vw - 2.9rem));
  max-height: calc(100vh - 3.1rem);
  max-height: calc(100dvh - 3.1rem);
  margin: 0;
  padding: 0;
  transform: none;
}

.pay-dialog.chat-dialog[open] {
  display: block;
}

.pay-dialog.chat-dialog::backdrop {
  background: rgb(28 25 22 / 28%);
}

body:has(.chat-dialog[open]) .chat-launcher {
  visibility: hidden;
  pointer-events: none;
}

.chat-dialog-card {
  width: 100%;
  max-height: calc(100vh - 3.1rem);
  max-height: calc(100dvh - 3.1rem);
  display: flex;
  flex-direction: column;
}

/* Поле вопроса не тянется мышью: размер фиксирован, длинный текст
   прокручивается внутри. */
.chat-dialog textarea {
  display: block;
  height: 6.25rem;
  resize: none;
  overflow-y: auto;
}

.chat-log[hidden] { display: none; }

.chat-log {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-height: 8rem;
  margin: 0.85rem 0 0.6rem;
  padding: 0.2rem 0.1rem;
  max-height: min(18rem, calc(100vh - 22rem));
  max-height: min(18rem, calc(100dvh - 22rem));
  overflow-y: auto;
  /* Конец ленты не передаёт прокрутку странице под окном чата. */
  overscroll-behavior: contain;
  overflow-anchor: none;
}

.chat-status {
  margin: 0 0 0.85rem;
  font-size: 0.85rem;
}

.chat-status[hidden] { display: none; }

.chat-msg {
  max-width: 90%;
  padding: 0.65rem 0.8rem;
  border-radius: 14px;
}

.chat-msg-visitor {
  align-self: flex-end;
  background: var(--accent);
  color: var(--btn-ink);
}

.chat-msg-staff {
  align-self: flex-start;
  background: var(--bg-2);
  color: var(--ink);
}

/* Ещё не подтверждено сервером. */
.chat-msg-pending {
  opacity: 0.6;
}

.chat-msg-who {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.8;
}

.chat-msg-who span {
  margin-left: 0.4rem;
  font-weight: 500;
  opacity: 0.8;
}

.chat-msg-body {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.staff-page {
  max-width: 720px;
  margin: 2.4rem auto 3rem;
  padding: 0 1.5rem;
  /* Одинаковые поля ввода раздела: почта, поиск, фильтры статистики. Поле
     ответа в чате — единственное, что не подчиняется (оно растёт по тексту). */
  --staff-input-h: 2.75rem;
  --staff-input-pad: 0 0.9rem;
  --staff-input-font: 0.95rem;
  /* Отступы раздела — три правила, а не россыпь значений:
     title — от заголовка («Фото по почте», «Обращения», «Фото посетителя»,
     подписи фильтров) до того, к чему он относится;
     block — между рамками и блоками (поле → список, список → новый раздел);
     pad-y — вертикальный внутренний отступ колонок и блоков карточки.
     Между строками списка — свой, плотный (gap у .staff-threads). */
  --staff-title-gap: 0.6rem;
  --staff-block-gap: 1rem;
  --staff-pad-y: 1.1rem;
}

.staff-desk {
  max-width: 1180px;
  /* Высота списка, переписки и фото: общая, чтобы колонки были вровень. */
  --staff-desk-h: min(36rem, calc(100vh - 10rem));
}

@supports (height: 100dvh) {
  .staff-desk {
    --staff-desk-h: min(36rem, calc(100dvh - 10rem));
  }
}

.staff-prices {
  max-width: 1180px;
}

body:has(.staff-page) .chat-launcher,
body:has(.staff-page) .chat-dialog {
  display: none;
}

.staff-desk-card {
  padding: 0;
  overflow: hidden;
}

.staff-desk-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
  min-height: var(--staff-desk-h);
}

.staff-desk-grid.has-photos {
  grid-template-columns: minmax(16rem, 18rem) minmax(0, 1fr) minmax(16rem, 20rem);
}

.staff-desk-list {
  border-right: 1px solid var(--line);
  max-height: var(--staff-desk-h);
  overflow-y: auto;
  padding: var(--staff-pad-y) 0.7rem;
  scrollbar-width: thin;
}

/* С родителем .staff-desk-card: иначе .card p { margin: 0 } сбрасывает отступы. */
.staff-desk-card .staff-desk-heading {
  margin: 0 0 var(--staff-title-gap) 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
}

.staff-desk-card .staff-desk-heading-closed {
  color: var(--muted);
  margin-top: var(--staff-block-gap);
  padding-top: var(--staff-block-gap);
  border-top: 1px solid var(--line);
}

.staff-desk-card .staff-desk-empty {
  margin: 0 0.4rem;
  font-size: 0.88rem;
}

.staff-desk-thread {
  display: flex;
  flex-direction: column;
  min-height: var(--staff-desk-h);
  max-height: var(--staff-desk-h);
  padding: var(--staff-pad-y) 1.15rem;
  /* Низкий экран: колонка прокручивается, а не обрезает кнопки. */
  overflow-y: auto;
  scrollbar-width: thin;
}

.staff-desk-thread h1 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.staff-desk-thread-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
}

.staff-desk-placeholder {
  margin: auto;
  max-width: 22rem;
  text-align: center;
}

.staff-desk-placeholder .muted {
  margin-top: 0.35rem;
}

/* Плашка «Обращение закрыто»: своя рамка и фон, чтобы были видны границы.
   С родителем: .card p { margin: 0 } сильнее одиночного класса. */
.staff-desk-thread .staff-desk-closed {
  margin: 0;
  padding: 0.85rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  line-height: 1.45;
}

.staff-desk-reply { margin-top: 0.4rem; }

.staff-desk-reply .field {
  gap: var(--staff-title-gap);
}

/* Размер поля ответа фиксирован: ни ручного resize, ни роста по тексту,
   длинный ответ прокручивается внутри. */
.staff-desk-reply textarea {
  display: block;
  height: 6.25rem;
  resize: none;
  overflow-y: auto;
}

.staff-desk-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

/* Планшет и телефон: колонка узкая — кнопки пониже, в один ряд, поровну. */
@media (max-width: 860px) {
  .staff-desk-actions {
    flex-wrap: nowrap;
    gap: 0.5rem;
  }
  .staff-desk-actions .btn {
    min-height: 2.6rem;
    padding: 0 1rem;
    font-size: 0.92rem;
    white-space: nowrap;
  }
  .staff-desk-actions > .btn,
  .staff-desk-actions > .staff-close {
    /* 50%, а не 0: у кнопки есть padding, с базой 0 ширины выходят разными. */
    flex: 1 1 50%;
    min-width: 0;
  }
  .staff-desk-actions .staff-close .btn {
    width: 100%;
  }
}

/* «Закрыть»: одна кнопка, по нажатию — выбор «Закрыть как решённое» или
   «Отправить и закрыть». Меню открывается вверх, в тон меню быстрых ответов. */
.staff-close {
  position: relative;
}

.staff-close-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.4rem);
  z-index: 7;
  display: grid;
  gap: 0.15rem;
  width: min(17rem, calc(100vw - 2rem));
  padding: 0.35rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.staff-close-menu button {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.staff-close-menu button:hover:not(:disabled),
.staff-close-menu button:focus-visible {
  background: var(--bg-2);
}

.staff-close-menu button:disabled {
  opacity: 0.55;
  cursor: default;
}

.staff-close-menu strong {
  font-weight: 700;
}

.staff-close-menu span {
  color: var(--muted);
  font-size: var(--staff-fs-sm);
}

/* Быстрые ответы: меню по «/» над полем ответа (кнопок нет на любой ширине). */
.staff-quick-wrap {
  position: relative;
}

.staff-quick-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.4rem);
  left: 0;
  z-index: 7;
  max-height: 14rem;
  margin: 0;
  padding: 0.35rem;
  overflow-y: auto;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  scrollbar-width: thin;
}

.staff-quick-menu button {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.staff-quick-menu button:hover,
.staff-quick-menu button.is-active {
  background: var(--bg-2);
}

.staff-quick-menu strong {
  font-weight: 700;
}

.staff-quick-menu span {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--staff-fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Поиск по списку обращений: поле как у «Фото по почте». */
.staff-desk-card .staff-search {
  margin: 0 0 var(--staff-block-gap);
}

.staff-search input {
  width: 100%;
  height: var(--staff-input-h);
  padding: var(--staff-input-pad);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  color: var(--ink);
  font: inherit;
  font-size: var(--staff-input-font);
  font-weight: 500;
  appearance: none;
}

.staff-search input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Строка под заголовком: номер, сообщения, кадры, когда открыто. Переносится
   только между частями: дата и время всегда вместе. Разделитель «·» стоит
   перед частью и уходит за левый край, если часть попала в начало строки, так
   что в конце строки точки не остаётся. */
.staff-desk-thread .staff-desk-thread-sub {
  /* Не сжимается в колонке: с overflow: hidden у flex-элемента min-height 0. */
  flex: none;
  margin: 0.35rem 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.staff-sub-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.9em;
}

.staff-sub-row > span {
  position: relative;
  padding-left: 0.9em;
  white-space: nowrap;
}

.staff-sub-row > span::before {
  content: "·";
  position: absolute;
  left: 0.3em;
}

/* Почты посетителя: поддержка сразу видит, кто обратился. Клик открывает
   вкладку «Почта» с этим адресом. */
.staff-desk-thread .staff-desk-emails {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
}

.staff-desk-thread .staff-desk-emails[hidden] {
  display: none;
}

.staff-desk-emails-label {
  color: var(--muted);
  font-weight: 600;
}

.staff-desk-emails-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Почта — карточка с ровной рамкой (не «таблетка»): адрес сверху, откуда
   он известен — под ним. */
.staff-email-chip {
  display: grid;
  gap: 0.2rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.staff-email-chip:hover,
.staff-email-chip:focus-visible {
  border-color: var(--accent);
  color: var(--accent-2);
}

.staff-email-chip-src {
  color: var(--muted);
  font-size: var(--staff-fs-min);
  font-weight: 500;
}

/* Только получатель для «Закрыть как решённое» из меню: видимого в ней нет. */
.staff-desk-resolve {
  display: none;
}

.staff-mobile-nav {
  display: none;
}

.staff-page [hidden] {
  display: none !important;
}

.staff-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin: 0 0 1.1rem;
}

.staff-bar-who {
  margin: 0;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.staff-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 1;
}

.staff-tab {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.staff-tab:hover {
  color: var(--ink);
  background: var(--bg-2);
}

.staff-tab.is-current {
  color: var(--accent-2);
  background: var(--st-info-bg-soft);
}

.staff-stats {
  max-width: 1180px;
  --c1: #0071e3;
  --c2: var(--st-ok-solid);
  --c3: var(--st-warn-solid);
  --c4: #af52de;
  --c5: var(--st-err);
  --c6: var(--st-neutral-solid);
}

.staff-stats .s1 { --c: var(--c1); }
.staff-stats .s2 { --c: var(--c2); }
.staff-stats .s3 { --c: var(--c3); }
.staff-stats .s4 { --c: var(--c4); }
.staff-stats .s5 { --c: var(--c5); }
.staff-stats .s6 { --c: var(--c6); }

.staff-stats-tz {
  margin: 0 0 1rem;
}

.staff-stats.is-loading .staff-kpis,
.staff-stats.is-loading .staff-chart-stage {
  opacity: 0.55;
  transition: opacity 0.15s;
}

/* Фильтры */
.staff-filters {
  display: grid;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 1.1rem 1.2rem 1rem;
}

.staff-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.staff-chip-btn {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.42rem 0.9rem;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.staff-chip-btn:hover {
  border-color: var(--accent);
  color: var(--accent-2);
}

.staff-chip-btn.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--btn-ink);
}

.staff-filter-fields {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.staff-select {
  display: grid;
  align-content: start;
  gap: var(--staff-title-gap);
  min-width: 0;
  color: var(--muted);
  font-size: var(--staff-fs-min);
  font-weight: 600;
}

.staff-select input,
.staff-select select {
  width: 100%;
  min-width: 0;
  height: var(--staff-input-h);
  margin: 0;
  padding: var(--staff-input-pad);
  border: 1px solid var(--line);
  border-radius: 12px;
  background-color: var(--bg-2);
  color: var(--ink);
  font: inherit;
  font-size: var(--staff-input-font);
  font-weight: 500;
  text-overflow: ellipsis;
}

.staff-select select {
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236e6e73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  cursor: pointer;
}

.staff-select input:hover,
.staff-select select:hover {
  border-color: color-mix(in srgb, var(--line) 50%, #000);
}

.staff-select input:focus-visible,
.staff-select select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Дата: iOS рисует родной контрол шире колонки, игнорирует width и
   центрирует значение — два поля слипаются и вылезают за карточку. */
.staff-select input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
  max-width: 100%;
  line-height: 1.2;
  text-align: left;
}

.staff-select input[type="date"]::-webkit-date-and-time-value {
  min-height: 1.2em;
  margin: 0;
  text-align: left;
}

.staff-filters-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
}

.staff-filter-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.staff-stats-status {
  margin: 0;
  font-size: 0.84rem;
}

.staff-stats-note {
  margin: 0 0 1rem;
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  background: var(--bg-2);
  font-size: 0.84rem;
}

/* Плитки */
.staff-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.staff-kpi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* Строки закреплены: заголовок, значение, чип сравнения, подпись.
     Так чип и подпись стоят на одном уровне во всех плитках ряда,
     даже если у соседней нет чипа или подписи. */
  grid-template-rows: auto auto 1.4rem auto;
  align-content: start;
  column-gap: 0.6rem;
  row-gap: 0.3rem;
  padding: 1rem 1.1rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  min-height: 7.4rem;
}

.staff-kpi > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.kpi-label {
  grid-row: 1;
  font-size: var(--staff-fs-sm);
  font-weight: 600;
  line-height: 1.25;
  color: var(--muted);
}

.kpi-value {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.kpi-delta {
  grid-row: 3;
  align-self: center;
  justify-self: start;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: var(--staff-fs-min);
  font-weight: 700;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--muted);
}

.kpi-delta.good {
  background: color-mix(in srgb, var(--st-ok-solid) 18%, transparent);
  color: var(--st-ok-ink);
}

.kpi-delta.bad {
  background: color-mix(in srgb, var(--c5) 14%, transparent);
  color: var(--c5);
}

.kpi-sub {
  grid-row: 4;
  font-size: var(--staff-fs-min);
  line-height: 1.3;
  color: var(--muted);
}

.kpi-spark {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  width: 5.2rem;
  height: auto;
  opacity: 0.9;
}

.kpi-spark path {
  fill: none;
  stroke: var(--c1);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Графики */
.staff-chart-card {
  margin: 0 0 1rem;
  min-width: 0;
}

.staff-chart-card h2 {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* .card p { margin: 0 } сильнее одиночного класса, поэтому с родителем. */
.staff-chart-card .staff-chart-hint {
  margin: 0 0 1.4rem;
  font-size: 0.82rem;
  line-height: 1.4;
}

/* Карточка без описания: тот же воздух между заголовком и графиком. */
.staff-chart-card h2 + .staff-chart {
  margin-top: 1.1rem;
}

.staff-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}

.staff-chart-wide {
  grid-column: 1 / -1;
}

.staff-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}

.staff-chart-stage {
  outline: none;
  min-width: 0;
}

.staff-chart-stage:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

.staff-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--muted);
  user-select: none;
}

.staff-chart-svg .grid {
  stroke: currentColor;
  opacity: 0.14;
}

.staff-chart-svg .axis {
  font-size: 11px;
  fill: var(--muted);
}

.staff-chart-svg .empty {
  font-size: 13px;
  fill: var(--muted);
}

.staff-chart-svg .bar {
  fill: var(--c);
}

.staff-chart-svg .line {
  fill: none;
  stroke: var(--c);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.staff-chart-svg .line.dashed {
  stroke-dasharray: 5 4;
}

.staff-chart-svg .area {
  fill: var(--c);
  opacity: 0.12;
}

.staff-chart-svg .pt {
  fill: var(--card);
  stroke: var(--c);
  stroke-width: 1.5;
}

.staff-chart-svg .pt-hover {
  fill: var(--c);
  stroke: var(--card);
  stroke-width: 2;
}

.staff-chart-svg .hover-band {
  fill: currentColor;
  opacity: 0.08;
  pointer-events: none;
}

.staff-chart-svg .hover-dots {
  pointer-events: none;
}

.staff-chart-svg .overlay {
  fill: transparent;
  cursor: crosshair;
  touch-action: pan-y;
}

.staff-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0.55rem 0 0;
}

.staff-chart-key {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: var(--staff-fs-sm);
  cursor: pointer;
}

.staff-chart-key[aria-pressed="false"] {
  color: var(--muted);
  text-decoration: line-through;
  opacity: 0.65;
}

.staff-key-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: var(--c);
}

/* Подсказка */
.staff-tip {
  position: fixed;
  z-index: 60;
  min-width: 11rem;
  max-width: 19rem;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.35;
  box-shadow: var(--shadow);
  pointer-events: none;
}

.staff-tip[hidden] {
  display: none;
}

.tip-title {
  display: block;
  margin-bottom: 0.35rem;
}

.tip-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.08rem 0;
}

.tip-label {
  flex: 1;
  opacity: 0.85;
}

.tip-value {
  font-variant-numeric: tabular-nums;
}

.tip-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--c);
  flex: none;
}

.tip-total {
  margin-top: 0.25rem;
  padding-top: 0.3rem;
  border-top: 1px solid rgb(255 255 255 / 25%);
}

.tip-note {
  margin-top: 0.35rem;
  font-size: var(--staff-fs-min);
  opacity: 0.75;
}

/* Воронка */
.staff-funnel {
  display: grid;
  gap: 1.05rem;
}

.funnel-row {
  display: grid;
  gap: 0.35rem;
  cursor: default;
}

.funnel-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
}

.funnel-track {
  height: 0.9rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  overflow: hidden;
}

.funnel-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--c1);
}

.funnel-row:last-child .funnel-bar {
  background: var(--c2);
}

.funnel-note {
  font-size: var(--staff-fs-min);
}

/* Таблицы */
.staff-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.8rem;
}

.staff-table-head h2 {
  margin: 0;
}

.staff-table-wrap {
  overflow-x: auto;
}

.staff-chart-card h2 + .staff-table-wrap {
  margin-top: 0.7rem;
}

.staff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.staff-table th,
.staff-table td {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  text-align: left;
  white-space: nowrap;
}

.staff-table th {
  border-bottom-color: var(--line);
  font-weight: 700;
  color: var(--muted);
  font-size: var(--staff-fs-min);
  letter-spacing: 0.02em;
}

.staff-table tbody tr:last-child td {
  border-bottom: 0;
}

.staff-table tr.is-mail-failed td,
.mail-failed-note {
  color: var(--warn);
}

.staff-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Длинная почта обрезается многоточием; полный адрес — во всплывающей подсказке. */
.staff-table .cell-email {
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.staff-pager[hidden] {
  display: none;
}

.staff-pager .btn:disabled {
  cursor: not-allowed;
}

.staff-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.75rem;
}

@media (max-width: 1100px) {
  .staff-filter-fields {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Узкая плитка: длинный заголовок переносится — держим место на две строки. */
  .kpi-label {
    min-height: 2.5em;
  }

  .staff-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .staff-chart-grid,
  .staff-two {
    grid-template-columns: 1fr;
  }

  .staff-filter-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .staff-filters {
    padding: 0.95rem 0.9rem 0.9rem;
  }

  .staff-filter-row {
    flex-wrap: nowrap;
    margin: 0 -0.9rem;
    padding: 0 0.9rem 0.15rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .staff-filter-row::-webkit-scrollbar {
    display: none;
  }

  .staff-chip-btn {
    flex: none;
  }

  .staff-filter-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Подпись следующей строки не липнет к полям над ней. */
    gap: 1.1rem 0.75rem;
  }

  .staff-select input[type="date"] {
    padding-right: 0.6rem;
    padding-left: 0.7rem;
  }

  /* Строка «поиск + Найти/Сбросить» не прокручивается вбок, как ряд чипов:
     поиск на всю ширину, кнопки под ним поровну. */
  .staff-search-row {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .staff-search-row .staff-search {
    flex: 1 1 100%;
  }

  .staff-search-row .staff-filter-actions {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .staff-filters-foot {
    align-items: stretch;
  }

  .staff-stats-status {
    flex: 1 0 100%;
  }

  .staff-filter-actions {
    flex: 1 0 100%;
    margin-left: 0;
  }

  .staff-filter-actions .btn {
    flex: 1 1 0;
  }
}

@media (max-width: 520px) {
  .staff-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .staff-kpi {
    min-height: 6.6rem;
    padding: 0.85rem 0.85rem 0.8rem;
  }

  .kpi-value {
    font-size: 1.4rem;
  }

  .kpi-spark {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .staff-stats.is-loading .staff-kpis,
  .staff-stats.is-loading .staff-chart-stage {
    transition: none;
  }
}

.staff-threads {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.staff-thread {
  display: grid;
  gap: 0.35rem;
  padding: 0.65rem 0.75rem;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  /* Фон есть всегда: видны границы строки и у отвеченных, и у закрытых. */
  background: var(--bg-2);
  transition: background-color 160ms ease;
}

/* Наведение и выбранное — на тон темнее обычного фона. */
.staff-thread:hover {
  background: color-mix(in srgb, var(--bg-2) 55%, var(--line));
}

.staff-thread.is-waiting {
  background: rgb(0 113 227 / 8%);
  box-shadow: inset 3px 0 0 var(--accent);
}

.staff-thread.is-waiting .staff-thread-preview { font-weight: 700; }

.staff-thread.is-current {
  background: color-mix(in srgb, var(--bg-2) 55%, var(--line));
}

.staff-thread.is-waiting.is-current {
  background: rgb(0 113 227 / 14%);
}

/* Закрытые приглушены текстом, а не фоном: иначе границы пропадают. */
.staff-thread.is-resolved > * {
  opacity: 0.72;
}

.staff-thread-preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
  font-size: 0.92rem;
  line-height: 1.35;
}

.staff-thread-meta time {
  white-space: nowrap;
}

.staff-thread-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  color: var(--muted);
  font-size: var(--staff-fs-min);
}

.staff-pill {
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--btn-ink);
  font-size: var(--staff-fs-min);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.staff-pill-done {
  background: var(--bg-2);
  color: var(--muted);
}

/* Переписка в рамке: видно, где она начинается и кончается. */
.staff-chat-log {
  flex: 1 1 auto;
  gap: 1rem;
  min-height: 12rem;
  max-height: none;
  margin: 1rem 0 0.75rem;
  padding: 0.9rem 0.9rem 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.staff-chat-log .chat-msg {
  padding: 0.75rem 0.95rem;
}

/* С родителем: .card p { margin: 0 } иначе сжимает «автор · время» к тексту. */
.staff-chat-log .chat-msg-who {
  margin: 0 0 0.4rem;
}

/* Разделитель дня: «Сегодня», «Вчера» или дата. */
.staff-chat-log .chat-day {
  align-self: center;
  margin: -0.15rem 0;
  color: var(--muted);
  font-size: var(--staff-fs-min);
  font-weight: 700;
}

.staff-desk-photos {
  border-left: 1px solid var(--line);
  max-height: var(--staff-desk-h);
  overflow-y: auto;
  padding: var(--staff-pad-y) 0.85rem;
  scrollbar-width: thin;
}

.staff-desk-card .staff-desk-photos .staff-desk-heading {
  margin-left: 0;
}

.staff-photos-empty { margin: 0; }

/* С родителем: .card p { margin: 0 } сильнее одиночного класса. */
.staff-desk-photos .staff-photos-count {
  margin: 0.9rem 0 0.7rem;
  font-size: 0.85rem;
}

.staff-photos-more {
  width: 100%;
}

.staff-photos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.staff-photo-card {
  padding: 0.15rem 0 0.35rem;
  border-bottom: 1px solid var(--line);
}

.staff-photo-card:last-child { border-bottom: 0; }

.staff-photo-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
  gap: 0.4rem;
}

.staff-photo-thumb {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--staff-fs-min);
  text-align: left;
  cursor: pointer;
}

.staff-photo-thumb img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-2);
}

.staff-photo-thumb:hover img,
.staff-photo-thumb:focus-visible img {
  border-color: var(--accent);
}

.staff-photo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: var(--staff-fs-sm);
}

.staff-photo-meta .chip {
  padding: 0.12rem 0.6rem;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--muted);
  font-size: var(--staff-fs-min);
  font-weight: 600;
  line-height: 1.35;
}

/* Карточка кадра: подписи под миниатюрами ровно, дата отдельной строкой,
   затем метки. С родителем .staff-photo-card: .card p { margin: 0 } сильнее. */
.staff-photo-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.staff-photo-card .staff-photo-meta,
.staff-photo-card .staff-photo-purge {
  margin: 0;
}

/* Кнопка «Удалить» отделена и от меток, и от линии под карточкой. */
.staff-desk-photos .staff-photo-card {
  padding-bottom: 1rem;
}

.staff-photo-card .staff-photo-purge {
  margin-top: 0.55rem;
}

.staff-photo-card .staff-photo-meta {
  gap: 0.3rem 0.4rem;
  line-height: 1.3;
}

.staff-photo-card .staff-photo-meta time {
  flex: 1 0 100%;
}

/* Почта, введённая при обработке кадра: своя строка под датой, длинную
   обрезает многоточие (полный адрес — в title). */
.staff-photo-meta .staff-photo-email {
  flex: 1 0 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--staff-fs-min);
}

/* В боковой колонке кадры по два в ряд: подписи читаются, место есть. */
.staff-desk-photos .staff-photo-thumbs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  /* Подпись последнего кадра ближе к дате: у текста есть свой межстрочный зазор. */
  margin-bottom: -0.3rem;
}

.staff-desk-photos .staff-photo-thumb {
  gap: 0.3rem;
  font-size: var(--staff-fs-sm);
  line-height: 1.3;
}

.staff-photo-purge {
  margin: 0.45rem 0 0;
}

.staff-photo-dialog {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 1rem;
  border: 0;
  background: transparent;
  color: inherit;
}

.staff-photo-dialog:not([open]) {
  display: none;
}

.staff-photo-dialog[open] {
  display: grid;
  place-items: center;
}

.staff-photo-dialog::backdrop {
  background: rgb(28 25 22 / 45%);
}

.staff-photo-dialog-card {
  position: relative;
  width: min(36rem, 100%);
  padding: 2.4rem 1.1rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--dialog-shadow);
}

.staff-photo-dialog-card img {
  display: block;
  width: 100%;
  max-height: min(78vh, 42rem);
  object-fit: contain;
  border-radius: 12px;
  background: var(--bg-2);
}

.staff-photo-dialog-card p {
  margin: 0.65rem 0 0;
}

.inline { display: inline; }

@media (max-width: 1100px) {
  .staff-desk-grid.has-photos {
    grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
  }
  .staff-desk-photos {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--line);
    max-height: none;
  }
}

@media (max-width: 1100px) {
  .photos-page .photo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .photos-page .photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .photos-page .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .top {
    padding-right: 0.85rem;
    padding-left: 0.85rem;
  }

  .top-end { gap: 0.45rem; }

  .nav {
    display: flex;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: max-content;
    margin: 0;
    padding: 0.2rem 0.9rem 1.25rem;
    background: var(--accent);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 14px 28px rgb(0 0 0 / 16%);
    clip-path: inset(0 0 100% 0 round 0 0 12px 12px);
    visibility: hidden;
    pointer-events: none;
    transition:
      clip-path 320ms ease,
      visibility 0s linear 320ms;
  }

  .nav.is-open {
    clip-path: inset(0 0 0 0 round 0 0 12px 12px);
    visibility: visible;
    pointer-events: auto;
    transition:
      clip-path 320ms ease,
      visibility 0s;
  }

  .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.3rem 0.4rem;
    font-size: 1rem;
    line-height: 1.1875rem;
    text-align: center;
  }

  .nav-link[href="/photos"] {
    width: auto;
    min-height: 0;
    margin-top: 0.1rem;
    padding: 0.42rem 0.72rem;
    border: 2px solid #fff;
    border-radius: 999px;
  }

  .nav-go-label { display: none; }

  .top .nav-go,
  .top .nav-menu {
    flex: 0 0 auto;
    height: 2.05rem;
    border-radius: 999px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .top .nav-go {
    width: 2.95rem;
    padding-right: 0.35rem;
    padding-left: 0.35rem;
    line-height: 0;
  }

  .top .nav-go-icon { display: block; }

  .top .nav-menu {
    display: inline-flex;
    padding-right: 0.78rem;
    padding-left: 0.78rem;
    letter-spacing: -0.035em;
  }
  .hero, .result, .how-cards, .blog-list, .foot-grid, .studio, .faq-layout {
    grid-template-columns: 1fr;
  }
  .examples-carousel {
    column-gap: 0.9rem;
  }
  .examples-arrow {
    width: 2rem;
    height: 2rem;
  }
  .faq-layout {
    row-gap: 1.7rem;
    padding: 3.2rem 1.5rem 2.8rem;
  }
  .hero h1 {
    font-size: clamp(2.45rem, 11vw, 3.2rem);
  }
  #benefits .section-title,
  #upload .section-title,
  #examples .section-title,
  #guides .section-title {
    line-height: 0.86;
  }
  .how-cards {
    row-gap: 1.1rem;
  }
  .how-step {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }
  .result-gallery {
    grid-template-columns: 1fr;
  }
  .result-gallery.is-print {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .result-gallery.is-print .preview-doc {
    grid-column: 1 / -1;
  }
  .passport-check ul {
    columns: 1;
  }
  .passport-check ul::before {
    display: none;
  }
  .passport-check-bar {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    row-gap: 0.55rem;
  }
  .passport-check-order {
    white-space: normal;
  }
  .passport-check-toggle {
    justify-self: start;
  }
  .passport-check-bar-end {
    display: none;
  }
  .passport-check-score {
    justify-self: stretch;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .passport-check-score-text {
    white-space: normal;
  }
  /* Узкий экран: отрезки сжимаются поровну, но не шире 12px — полоса не выходит из карточки. */
  .passport-check-meter {
    grid-auto-columns: minmax(0, 12px);
    max-width: 100%;
    order: 2;
  }
  .hero { min-height: 0; padding-top: 2.4rem; }

  .hero-follow {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: max-content;
    max-width: calc(100vw - 3rem);
    min-width: 0;
    margin-top: 1.1rem;
  }

  .hero-follow .chips {
    display: contents;
    width: auto;
    max-width: none;
    margin-top: 0;
  }

  .hero-collage { place-items: center; min-height: 0; padding: 0.5rem 0 2.6rem; }
  .hero-demo { width: min(340px, 86%); margin-left: 0; }
  /* Куки и кнопка чата всегда в одной строке: плашка занимает всё место
     слева от чата, текст при нехватке ширины переносится. */
  .cookie-consent {
    width: min(24rem, calc(100vw - 2.9rem - var(--float-chip-height) - 0.6rem));
  }
  .cookie-bar {
    gap: 0.5rem;
    padding: 0.38rem 0.8rem;
  }
  .cookie-bar-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8rem;
    line-height: 1.2;
    white-space: normal;
  }
  .cookie-bar .cookie-help {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.9rem;
  }
  .cookie-accept {
    flex: 0 0 auto;
    padding: 0.5rem 0.7rem;
    font-size: 0.84rem;
  }
  .cookie-dialog {
    width: min(24rem, calc(100vw - 2.9rem));
  }
  body:has(#cookie-consent:not([hidden])) main {
    padding-bottom: 6rem;
  }
}

/* Совсем узкий экран: плашка не помещается рядом с чатом и встаёт над ним
   в одну строку, прижатая вправо, чтобы не расти в высоту. */
@media (max-width: 440px) {
  .cookie-consent {
    bottom: calc(1.55rem + var(--float-chip-height) + 0.55rem);
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    align-items: flex-end;
  }
  .chat-launcher {
    right: 0.75rem;
  }
  .cookie-bar {
    min-height: 0;
    padding: 0.5rem 0.7rem;
    gap: 0.4rem;
  }
  .cookie-bar-text {
    flex: 1 1 0;
    min-width: min-content;
    font-size: 0.78rem;
  }
  .cookie-dialog {
    width: 100%;
  }
  .cookie-bar .cookie-help {
    width: 1.75rem;
    height: 1.75rem;
  }
  body:has(#cookie-consent:not([hidden])) main {
    padding-bottom: 8.5rem;
  }
}

/* Узкий экран: логотип и шапка чуть меньше, чтобы «Меню» не уходило за край. */
@media (max-width: 400px) {
  .top {
    gap: 0.5rem;
    padding: 0 1rem;
  }
  .brand {
    font-size: 1.3rem;
  }
  .top-end {
    gap: 0.5rem;
  }
}

/* Узкий экран: фото в карточке шага над текстом, чтобы тексту хватало ширины. */
@media (max-width: 380px) {
  .how-card {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.9rem;
    text-align: center;
  }
  .how-copy {
    width: 100%;
  }
}

@media (max-width: 330px) {
  .top {
    padding: 0 0.75rem;
  }
  .brand {
    font-size: 1.1rem;
  }
  .top .nav-menu {
    padding-right: 0.6rem;
    padding-left: 0.6rem;
  }
}

@media (max-width: 640px) {
  .examples-carousel {
    --examples-view: 1;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .examples-arrow {
    display: none;
  }

  .examples-viewport {
    grid-column: 1;
    padding-left: 0;
    padding-right: 0;
    touch-action: pan-y;
  }

  .examples-dots {
    grid-column: 1;
  }

  /* Телефон: «список» и «диалог» — два отдельных экрана, как в мессенджере.
     В диалоге сверху «← К списку» и переключатель «Переписка / Фото»,
     поле ответа прижато к низу. */
  .staff-page {
    margin: 1rem auto 2rem;
    padding: 0 0.6rem;
    /* 16px в полях: иначе iOS увеличивает страницу при фокусе. */
    --staff-input-font: 1rem;
    --staff-pad-y: 0.9rem;
  }
  .staff-bar {
    gap: 0.5rem;
    margin-bottom: 0.7rem;
  }
  .staff-bar-who {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .staff-bar form {
    order: 2;
  }
  /* Разделитель между «anna / Выйти» и вкладками. */
  .staff-tabs {
    order: 3;
    flex: 1 0 100%;
    gap: 0.3rem;
    margin-top: 0.2rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--line);
  }
  /* Три вкладки (Чат, Статистика, Платежи) в один ряд: уже отступы и шрифт. */
  .staff-tabs {
    flex-wrap: nowrap;
  }
  .staff-tab {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    min-height: 2.6rem;
    padding-right: 0.45rem;
    padding-left: 0.45rem;
    background: var(--bg-2);
    font-size: 0.88rem;
  }
  .staff-tab.is-current {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
  }
  body:has(.staff-desk-card.is-thread) .staff-tabs {
    display: none;
  }

  .staff-desk-card {
    overflow: visible;
  }
  .staff-desk-grid,
  .staff-desk-grid.has-photos {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .staff-desk-card.is-thread .staff-desk-list {
    display: none;
  }
  .staff-desk-list {
    border-right: 0;
    max-height: none;
    overflow: visible;
    padding: var(--staff-pad-y) 0.6rem;
  }
  /* Заголовок вровень с подписью «Фото по почте» (0.6 + 0.15 = 0.75rem). */
  .staff-desk-card .staff-desk-heading {
    margin-left: 0.15rem;
  }
  .staff-desk-placeholder {
    display: none;
  }
  .staff-thread {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.3rem;
    padding: 0.8rem 0.7rem;
  }
  .staff-thread-preview {
    flex: 0 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }
  .staff-thread-meta {
    gap: 0.6rem;
  }

  .staff-mobile-nav {
    position: sticky;
    top: 64px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .staff-back {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0 0.3rem;
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }
  .staff-pane-tabs {
    display: flex;
    flex: 1 1 auto;
    gap: 0.25rem;
    padding: 0.2rem;
    border-radius: 999px;
    background: var(--bg-2);
  }
  .staff-pane-tab {
    flex: 1 1 0;
    min-height: 2.2rem;
    padding: 0 0.6rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
  }
  .staff-pane-tab.is-current {
    background: var(--card);
    color: var(--ink);
    box-shadow: 0 1px 3px rgb(0 0 0 / 14%);
  }

  .staff-desk-grid[data-pane="chat"] .staff-desk-photos,
  .staff-desk-grid[data-pane="photos"] .staff-desk-thread {
    display: none;
  }

  .staff-desk-thread {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 0 0.6rem;
    min-height: 0;
    max-height: none;
    padding: var(--staff-pad-y) 0.75rem 0;
    overflow: visible;
  }
  .staff-desk-thread > * {
    grid-column: 1 / -1;
  }
  .staff-desk-thread h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .staff-chat-log {
    height: calc(100dvh - 25.5rem);
    min-height: 12rem;
    max-height: none;
    margin: 0.6rem 0 0.6rem;
    padding: 0.7rem 0.6rem 0.7rem 0.7rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .staff-chat-log .chat-msg {
    max-width: 92%;
    padding: 0.55rem 0.7rem;
    font-size: 0.95rem;
  }
  .staff-desk-thread .staff-desk-closed {
    margin: 0 0 var(--staff-pad-y);
    padding: 0.75rem 0.85rem;
  }

  .staff-desk-reply {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    margin: 0 -0.75rem;
    padding: 0.6rem 0.75rem calc(0.7rem + env(safe-area-inset-bottom));
    background: var(--card);
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
  }
  .staff-desk-reply[hidden] {
    display: none;
  }
  .staff-desk-reply .field {
    margin: 0;
  }
  .staff-desk-reply .field > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .staff-desk-reply textarea {
    height: 4.75rem;
    font-size: 1rem;
  }
  /* Поле на всю ширину, под ним в ряд «Отправить» и «Закрыть» (стили кнопок
     общие с планшетом — блок max-width: 860px выше). */
  .staff-desk-reply .form-error {
    grid-column: 1 / -1;
    margin: 0;
  }

  /* Меню быстрых ответов: обёртка «растворена», чтобы оно легло над липким
     композером на всю его ширину. */
  .staff-quick-wrap {
    display: contents;
  }
  .staff-quick-menu {
    right: 0.75rem;
    left: 0.75rem;
    max-height: min(14rem, 40dvh);
  }
  .staff-desk-thread .staff-desk-thread-sub {
    grid-column: 1 / -1;
    margin: 0.4rem 0 0;
    font-size: var(--staff-fs-min);
  }
  .staff-desk-thread .staff-desk-emails {
    grid-column: 1 / -1;
    margin: 0.4rem 0 0;
    font-size: var(--staff-fs-min);
  }

  .staff-desk-photos {
    grid-column: auto;
    border-top: 0;
    max-height: none;
    overflow: visible;
    padding: var(--staff-pad-y) 0.75rem;
  }
  .staff-photo-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .staff-photo-purge .btn,
  .staff-photos-more {
    min-height: 2.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn,
  .chat-launcher,
  .nav { transition: none; }
  .chat-launcher:has(.chat-launcher-waves:not([hidden])),
  .chat-launcher-waves svg { animation: none; opacity: 0.6; }
  .hero-demo,
  .hero-demo-mark::before,
  .hero-demo-ring,
  .how-scan { animation: none; }
  .how-art-scan::before { background: transparent; }
  .studio-icons li.is-ok .studio-check,
  .studio-icons li.is-fail .studio-check,
  .studio-icon {
    transition: none;
  }
  .drop-stage-line.is-out,
  .drop-stage-line.is-in {
    animation: none;
  }
  .studio-result {
    transition: none;
  }
  .drop-timer-progress {
    transition: none;
  }
  .mail-again.is-sending .btn,
  .mail-again.is-sending .btn::after {
    animation: none;
  }
  .examples-dot::before,
  .review-grid {
    transition: none;
  }
}

/* ===== Оплата, статусы, «Мои фото» ===== */
.status-icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  background: #eaf3ff;
  color: var(--accent);
}

.status-icon svg {
  width: 1.9rem;
  height: 1.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.status-icon.is-ok {
  background: rgb(0 186 0 / 12%);
  color: #00ba00;
}

.status-icon.is-fail {
  background: #fff0f0;
  color: var(--warn);
}

.status-spin {
  animation: status-spin 1s linear infinite;
  transform-origin: center;
}

@keyframes status-spin {
  to { transform: rotate(360deg); }
}

.page-narrow.status-page {
  display: grid;
  justify-items: center;
  max-width: 34rem;
  padding: 2.6rem 1.6rem 2.2rem;
  text-align: center;
}

.page-narrow.status-page > h1 {
  margin: 0.9rem 0 0.5rem;
  font-weight: 900;
  font-size: clamp(1.5rem, 4vw, 1.9rem);
}

.status-page > p {
  max-width: 24rem;
  color: var(--muted);
  line-height: 1.5;
}

.status-chip {
  margin: 1rem 0 0 !important;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: rgb(0 186 0 / 12%);
  color: #008a00 !important;
  font-weight: 700;
}

.status-page .status-actions {
  margin: 1.5rem 0 0;
}

.status-page .status-actions.is-stack {
  display: grid;
  gap: 0.7rem;
  width: max-content;
  min-width: 11rem;
  max-width: 100%;
}

.status-actions.is-stack form {
  margin: 0;
}

.status-actions.is-stack .btn {
  width: 100%;
}

.page-narrow.pay-page {
  max-width: 36rem;
  padding: 1.8rem 1.7rem 1.6rem;
}

.pay-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.pay-head h1 {
  margin: 0 0 0.25rem;
  font-family: var(--display);
  font-size: clamp(1.3rem, 3.4vw, 1.65rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.pay-head .muted {
  margin: 0;
}

.pay-head-icon {
  display: grid;
  flex: 0 0 3.2rem;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 14px;
  background: #eaf3ff;
  color: var(--accent);
}

.pay-head-icon svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pay-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 0.95rem 1.2rem;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
}

.pay-price-label {
  font-weight: 600;
}

.pay-price-sum {
  font-family: var(--display);
  font-size: 1.65rem;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.pay-includes {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
}

.pay-includes li {
  position: relative;
  padding-left: 1.75rem;
  line-height: 1.45;
}

.pay-includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 8.4l2.4 2.4 4.6-5'/></svg>") center / 0.8rem no-repeat, #1f9d55;
}

.pay-note {
  margin: 0.3rem 0 0 !important;
  font-size: 0.85rem;
}

.pay-page form {
  margin-top: 0.6rem;
}

.pay-page .field input:focus,
.pay-dialog-card .field input:focus,
.photo-code .field input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 4px rgb(0 113 227 / 14%);
}

.pay-methods legend {
  font-weight: 600;
}

.pay-methods .check {
  align-items: center;
  margin: 0.45rem 0;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.pay-methods .check:hover {
  border-color: var(--accent);
}

.pay-methods .check:has(input:checked) {
  border-color: var(--accent);
  background: #eaf3ff;
}

.pay-methods input,
.pay-page .check input,
.pay-dialog-card .check input {
  accent-color: var(--accent);
}

.pay-back {
  margin: 1.1rem 0 0;
  text-align: center;
}

.pay-back .back {
  color: var(--accent-2);
  font-weight: 600;
  text-decoration: none;
}

.pay-back .back:hover {
  text-decoration: underline;
}

.pay-dialog-card {
  border-radius: 22px;
}

.pay-dialog-card h2 {
  font-weight: 900;
  letter-spacing: -0.04em;
}

.pay-dialog-sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.2rem 0 0.8rem;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background: #eaf3ff;
  color: var(--accent-2);
  font-weight: 600;
}

.pay-dialog-sum strong {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -0.03em;
}

/* Плашка «Оплачено» — справа в шапке результата: в тоне «Почти готово», зелёная,
   со значком check-ok-circle как у автопроверки. */
.result-paid {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--st-ok-bg);
  color: var(--st-ok-ink);
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* Значок check-ok-circle маской: цвет берёт у текста, а не зашитый #00ba00 из файла. */
.result-paid-ic {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  background: currentColor;
  -webkit-mask: url("/static/icons/check-ok-circle.svg") center / contain no-repeat;
  mask: url("/static/icons/check-ok-circle.svg") center / contain no-repeat;
}

.result-stage > .result-title {
  margin: 0.67em 0;
  font-size: 2em;
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.04em;
}

/* С плашкой-заголовком отступ сверху меньше обычных 2.6rem. */
.result:has(> .result-stage > .result-bar) {
  margin-top: 30px;
}

/* Под галереей до оплаты — блоки с главной (примеры, вопросы, требования):
   на ширину страницы результата, заголовки слева и одного размера с
   «Дополнительные улучшения». */
.result-more {
  --result-h2: 2.1rem;
}

.result-more {
  --more-gap: 100px;
  /* Под гифками уже есть нижнее поле .result (3rem) и зазор сетки: добираем до общих 100px (отступы схлопываются: берётся большее). */
  margin-top: 84px;
}

.result-more .band,
.result-more .band-alt {
  max-width: 1440px;
  padding: 0 1.5rem;
  background: none;
}

/* Одинаковый зазор между блоками: гифки, примеры, вопросы, требования. */
.result-more > section + section {
  margin-top: var(--more-gap);
}

.result-more #guides.band {
  padding-bottom: 4.75rem;
}

.result-more #examples.band {
  max-width: 1440px;
}

.result-more .faq-band {
  background: none;
}

.result-more .faq-layout {
  max-width: 1440px;
  padding: 0 1.5rem;
}

.result-more .section-title,
.result-more .section-title.is-center,
.result-more #examples .section-title,
.result-more #guides .section-title {
  margin: 0 0 3rem;
  font-family: var(--display);
  font-size: var(--result-h2);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-align: left;
}

/* «Частые вопросы»: размер как у остальных заголовков, три строки — FAQ и два слова. */
.result-more .faq-title {
  font-size: var(--result-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Список вопросов короче: не тянется до правого края страницы. */
.result-more .faq {
  width: min(100%, 30rem);
}

.result-more .faq-kicker {
  margin-bottom: 0.6rem;
}

/* Плашка-заголовок результата: как шапка «Правка кадрирования». */
.result-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 1rem;
  padding: 12px 18px 12px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
}

.result-bar-chip {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 12px;
  background: rgb(0 113 227 / 12%);
  color: var(--accent-2);
}

.result-bar-chip svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.result-bar-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.result-bar .result-title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.result-bar p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.2;
}

.result-mail-note {
  position: relative;
  padding: 0.95rem 1.2rem 0.95rem 3.7rem;
  border-color: rgb(0 186 0 / 35%);
  border-radius: 14px;
  background: rgb(0 186 0 / 7%);
}

.result-mail-note::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 50%;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5.5' width='18' height='13' rx='3'/><path d='M4 8l8 5.5L20 8'/></svg>") center / 1rem no-repeat, #00ba00;
  transform: translateY(-50%);
}

/* «Ещё не отправляли»: нейтральная плашка, кнопка в обводке справа от текста. */
.result-mail-note[data-mail-note="unsent"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  border-color: var(--line);
  background: var(--card);
}

.result-mail-note[data-mail-note="unsent"][hidden] {
  display: none !important;
}

.result-mail-note[data-mail-note="unsent"] {
  padding-left: 1.1rem;
}

.result-mail-note[data-mail-note="unsent"]::before {
  content: none;
}

/* Иконка центруется только по тексту: кнопка при переносе остаётся под ним. */
.result-mail-lead {
  display: flex;
  flex: 1 1 16rem;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}

.result-mail-lead::before {
  content: "";
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5.5' width='18' height='13' rx='3'/><path d='M4 8l8 5.5L20 8'/></svg>") center / 1rem no-repeat, #9aa1ab;
}

.result-mail-note[data-mail-note="unsent"] .result-mail-resend {
  flex: none;
  margin-left: 2.6rem;
  padding: 0.45rem 1rem;
  border: 1.5px solid #00ba00;
  border-radius: 999px;
  background: transparent;
  color: #00ba00;
}

.result-mail-note[data-mail-note="unsent"] .result-mail-resend:hover {
  border-color: #00ba00;
  color: #008a00;
}

.photos-page > h1,
.photos-login > h1 {
  font-weight: 900;
}

.photos-login-icon {
  width: 3.2rem;
  height: 3.2rem;
  margin-bottom: 0.7rem;
}

.photos-login-icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.photos-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 2rem;
  margin: 0 0 2.2rem;
  padding: 1.5rem 1.6rem;
  border-radius: 22px;
  background: #eaf3ff;
}

.photos-hero-text {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.photos-hero h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.photos-hero p {
  max-width: 46rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.photos-hero strong {
  color: var(--ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.photos-hero-side {
  display: grid;
  justify-items: end;
  gap: 1rem;
}

.photos-hero-side form {
  margin: 0;
}

.photos-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  margin: 0;
}

.photos-stats div {
  display: flex;
  padding: 0 1.1rem;
  flex-direction: column-reverse;
  align-items: center;
  text-align: center;
}

.photos-stats div + div {
  border-left: 1px solid var(--ink);
}

.photos-stats dt {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
}

.photos-stats dd {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.photos-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.2rem;
  margin: 0 0 1.1rem;
}

.photos-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.photos-tab {
  padding: 0.5rem 1.05rem;
  border: 0;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.photos-tab:hover {
  color: var(--ink);
}

.photos-tab[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}

.photos-tab:focus-visible,
.photos-link-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.photos-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.2rem;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.photos-link-icon {
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
}

.photos-link-btn:hover {
  color: var(--ink);
}

.photos-page .photo-grid li {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.7rem;
  padding: 0.6rem 0.6rem 0.9rem;
  border-radius: 22px;
  background: var(--bg-2);
  transition:
    background-color 160ms ease,
    transform 160ms ease;
}

.photos-page .photo-grid li:hover {
  background: #eaf3ff;
  transform: translateY(-2px);
}

.photo-shot {
  position: relative;
}

.photo-pay {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
}

.photo-pay.is-paid {
  color: #008a00;
}

.photo-pay.is-trial {
  color: var(--muted);
}

.photo-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  padding: 0 0.15rem;
}

.photos-page .btn.ghost,
.photos-page .btn.ghost:hover:not(:disabled) {
  border-color: var(--ink);
}

.photos-page .btn.ghost.photo-open.is-paid,
.photos-page .btn.ghost.photo-open.is-paid:hover:not(:disabled) {
  border-color: #00ba00;
  color: #008a00;
}

.photo-open {
  padding: 0.45rem 0.95rem;
  font-size: 0.8rem;
}

.photos-page .photo-grid li > form {
  justify-self: center;
  margin: -0.3rem 0 -0.2rem;
}

.reveal-more[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .photos-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .photos-hero-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
  }
}

/* Телефон: фото по два в ряд, подпись и «Открыть» друг под другом на всю ширину карточки. */
@media (max-width: 640px) {
  .photos-hero {
    gap: 1rem;
    padding: 1.2rem 1.1rem;
  }

  .photos-hero-side {
    align-items: flex-start;
    flex-direction: column;
  }

  .photos-stats {
    margin-left: -1.1rem;
  }

  .photos-tools {
    gap: 0.4rem 1rem;
  }

  .photos-tab,
  .photos-link-btn {
    min-height: 2.75rem;
  }

  .photos-page {
    margin-bottom: 0;
    padding-bottom: 0.75rem;
  }

  .photos-page .reveal-more {
    margin-top: 1.25rem;
  }

  /* Футер выше плашки cookie, запас под неё внизу страницы не нужен. */
  body:has(#cookie-consent:not([hidden])) main:has(> .photos-page) {
    padding-bottom: 0.5rem;
  }

  .photos-page .photo-grid {
    gap: 0.6rem;
  }

  .photos-page .photo-grid li {
    gap: 0.5rem;
    padding: 0.4rem 0.4rem 0.6rem;
    border-radius: 14px;
  }

  .photo-pay {
    top: 0.4rem;
    left: 50%;
    width: max-content;
    max-width: calc(100% - 0.8rem);
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    transform: translateX(-50%);
  }

  .photo-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    padding: 0 0.15rem;
  }

  .photo-open {
    min-height: 2.75rem;
    margin-left: 0;
  }

  .photos-page .photo-grid li > form {
    justify-self: center;
    padding: 0;
  }
}

/* Узкий телефон: цифры делят ширину карточки, вкладки и «Удалить все» тянутся
   на всю строку, при переносе текст и иконка стоят по центру. */
@media (max-width: 440px) {
  .photos-hero-side {
    align-items: stretch;
  }

  .photos-stats {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-left: 0;
  }

  .photos-stats div {
    padding: 0 0.3rem;
  }

  .photos-stats dt {
    font-size: 0.7rem;
  }

  .photos-stats dd {
    font-size: 1.5rem;
  }

  .photos-hero-side form {
    align-self: flex-start;
  }

  .photos-tabs,
  .photos-purge-all {
    flex: 1 1 100%;
  }

  .photos-tab {
    flex: 1 1 auto;
  }

  .photos-purge-all .photos-link-btn {
    display: block;
    width: 100%;
    padding: 0.8rem 0.6rem;
    line-height: 1.35;
    text-align: center;
  }

  .photos-purge-all .photos-link-icon {
    display: inline-block;
    margin-right: 0.4rem;
    vertical-align: -0.1em;
  }
}

/* Совсем узкий телефон: цифры и подписи мельче, чтобы «Оплачено» не липло
   к разделителям; «Открыть» уже, чтобы карточка не распирала колонку. */
@media (max-width: 360px) {
  .photos-stats {
    display: flex;
  }

  .photos-stats div {
    flex: 1 1 auto;
    padding: 0 0.4rem;
  }

  .photos-stats dt {
    font-size: 0.64rem;
  }

  .photos-stats dd {
    font-size: 1.3rem;
  }

  .photo-open {
    padding-inline: 0.5rem;
  }
}

@media (pointer: coarse) {
  .photos-tab,
  .photos-link-btn {
    min-height: 2.75rem;
  }

  .photo-open {
    min-height: 2.75rem;
  }
}

.photos-empty {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: 2.4rem 1.5rem;
  border-radius: 22px;
  text-align: center;
}

.photos-empty p {
  font-size: 1.05rem;
  font-weight: 600;
}

.photos-empty.is-compact {
  max-width: 560px;
  margin: 0 auto;
  padding: 1rem 1.2rem;
  grid-auto-flow: column;
  justify-content: space-between;
  justify-items: stretch;
  align-items: center;
  text-align: left;
}

.photos-empty.is-compact .status-icon {
  display: none;
}

.photos-empty.is-compact p {
  font-size: 0.95rem;
}

.result-downloads {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 1rem 0 0;
}

.result-downloads[hidden] {
  display: none;
}

/* Кнопки скачивания: «шёлк». Два слоя градиента медленно текут навстречу друг
   другу: один справа налево, другой слева направо, получается перелив ткани. */
.result-download,
.btn.btn-silk {
  position: relative;
  background-size: 300% 100%, 300% 100%;
  animation: silk-flow 10s ease-in-out infinite;
}

.result-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border: 1.5px solid #d4d8df;
  border-radius: 999px;
  background-image:
    linear-gradient(
      100deg,
      rgb(255 255 255 / 0%) 0%,
      rgb(255 255 255 / 75%) 20%,
      rgb(255 255 255 / 0%) 40%,
      rgb(255 255 255 / 70%) 60%,
      rgb(255 255 255 / 0%) 80%,
      rgb(255 255 255 / 75%) 100%
    ),
    linear-gradient(
      100deg,
      #f3f4f6 0%,
      #dfe3e8 25%,
      #f6f7f9 50%,
      #dadee4 75%,
      #f3f4f6 100%
    );
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.btn.btn-silk {
  border-color: transparent;
  background-image:
    linear-gradient(
      100deg,
      rgb(255 255 255 / 0%) 0%,
      rgb(255 255 255 / 30%) 20%,
      rgb(255 255 255 / 0%) 40%,
      rgb(255 255 255 / 28%) 60%,
      rgb(255 255 255 / 0%) 80%,
      rgb(255 255 255 / 30%) 100%
    ),
    linear-gradient(
      100deg,
      #1f86f5 0%,
      #005fc9 25%,
      #3b9bff 50%,
      #0a62c6 75%,
      #1f86f5 100%
    );
  color: #fff;
}

.btn.btn-silk {
  box-shadow: 0 6px 18px -8px rgb(0 113 227 / 60%);
}

.result-download-icon {
  flex: 0 0 auto;
  width: 0.9em;
  height: 0.9em;
  fill: currentColor;
}

.result-download:hover {
  border-color: #b9c0cb;
  color: var(--ink);
  box-shadow: 0 4px 14px -6px rgb(30 40 60 / 30%);
}

.btn.btn-silk:hover:not(:disabled) {
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px -6px rgb(0 113 227 / 65%);
}

/* Верхний слой идёт вправо, нижний — влево. */
@keyframes silk-flow {
  0%, 100% { background-position: 0% 50%, 100% 50%; }
  50% { background-position: 100% 50%, 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .result-download,
  .btn.btn-silk {
    animation: none;
  }
}

/* «Улучшить кожу»: вкладки вариантов над кадром. */
.skin-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin: 0.75rem 0 0;
}

.skin-switch .form-error {
  flex: 1 1 100%;
  margin: 0;
}

.skin-tabs {
  /* Ширина — как у кадра слева в .result-gallery (те же доли, что в сетке). */
  --gap: 1.25rem;
  --pair: calc(35 / 45 + 1250 / 880);
  display: flex;
  box-sizing: border-box;
  width: calc((100% - var(--gap)) * (35 / 45) / var(--pair));
  max-width: 100%;
  padding: 0.25rem;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}

.result-stage:has(.result-gallery.is-print:not(.has-side)) .skin-tabs {
  width: calc((100% - 2 * var(--gap)) * 7 / 19);
}

@media (max-width: 820px) {
  .skin-tabs,
  .result-stage:has(.result-gallery.is-print:not(.has-side)) .skin-tabs {
    width: 100%;
  }
}

.skin-tabs[hidden] {
  display: none;
}

.skin-tab,
.side-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.45rem 0.5rem;
  text-align: center;
  white-space: nowrap;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  /* Подпись не переносится: на узкой колонке кегль сжимается вместе с кадром. */
  font-size: clamp(0.78rem, 1.4cqw, 0.98rem);
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.skin-tab:hover,
.side-tab:hover {
  color: var(--ink);
}

.skin-tab.is-active,
.side-tab.is-active {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgb(109 40 217 / 55%);
}

/* «Фото на листах / Примерить причёску»: активная вкладка — синяя, как основные кнопки. */
.side-tab.is-active {
  background: var(--accent);
  box-shadow: 0 4px 12px -4px rgb(0 113 227 / 55%);
}

.skin-tab:focus-visible,
.side-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* «Макет паспорта / Смена причёски»: переключатель над правой колонкой, в одной
   строке с переключателем кожи; витрина причёсок — в колонке, по высоте макета. */
.side-tabs {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 0.25rem;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}

/* Высота переключателей и кнопок под макетом — как у кнопки «Убрать акне»
   (.btn: 2 × 0.85rem + строка). */
.skin-tabs,
.side-tabs,
.actions .btn {
  box-sizing: border-box;
  min-height: 2.89rem;
}

.result-gallery.has-side {
  row-gap: 0.75rem;
}

.result-gallery.has-side > .skin-switch {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.result-gallery.has-side .skin-tabs {
  width: 100%;
}

.result-gallery.has-side > .side-tabs {
  grid-column: 2 / -1;
  grid-row: 1;
}

.result-gallery.has-side > .preview-doc {
  grid-column: 1;
  grid-row: 2;
}

.result-gallery.has-side > .result-side {
  /* Сеточный контейнер: панель причёсок получает min-height: auto и растёт по
     содержимому, а не вылезает за рамку. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-column: 2 / -1;
  grid-row: 2;
  min-width: 0;
}

/* После оплаты справа два листа 10×15 рядом; панель причёсок — по их высоте. */
.result-side-sheets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

/* После оплаты — высота фото слева: его колонка 7 долей из 19, кадр 35:45. */
.result-gallery.is-print .result-side-hair {
  height: calc((100cqw - 2 * var(--gap)) * 7 / 19 * 45 / 35);
}

/* Когда причёски выбраны и идёт обработка или готов результат, рамка по высоте
   содержимого: внутри только ряд карточек (выбор из 8 — на полную высоту). */
.result-gallery.is-print .result-side-hair:has(.hair:not([data-state="choose"])) {
  height: auto;
}

/* Кнопки скачивания под панелью справа: в ширину колонки. */
.result-side .result-downloads {
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
}

.result-side .result-download {
  flex: 1 1 auto;
  padding: 0.5rem 0.6rem;
  font-size: 0.85rem;
  text-align: center;
  white-space: nowrap;
}

.result-side [data-side-panel][hidden] {
  display: none;
}

/* Высота панели — как у макета паспорта; если содержимого больше, панель растёт
   сама: без внутренней прокрутки и без обрезки. */
.result-side-hair {
  display: flex;
  /* Высота макета паспорта (= высота фото слева): (100cqw − gap) / (35/45 +
     1250/880); cqw — ширина .result-stage. Содержимое прокручивается внутри. */
  height: calc((100cqw - var(--gap)) / (35 / 45 + 1250 / 880));
}

.result-side-hair .hair {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  margin: 0;
}

.hair-showcase.is-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* Прокручивается не рамка, а содержимое внутри неё: полоса и её стрелки стоят
   внутри отступов рамки и не вылезают за скруглённые углы. */
.hair-showcase.is-panel > .hair-body,
.hair-showcase.is-panel > .hair-showcase-body {
  flex: 1 1 auto;
  min-height: 0;
  /* Полоса прокрутки ближе к правому краю рамки (отрицательный margin-right —
     у .hair-body и .hair-showcase-body ниже); содержимое остаётся на месте.
     Слева и снизу запас под внешнюю обводку выбранной карточки: иначе её срезает
     граница прокручиваемой области. */
  padding: 0.3rem 0.75rem 0.3rem 0.3rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* В панели справа вкладки «Женские / Мужские» стоят на месте заголовка, текст — правее. */
.hair-showcase.is-panel .hair-head {
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.75rem;
}

.hair-showcase.is-panel .hair-tabs {
  flex: 0 0 auto;
  margin: 0;
}

.hair-showcase.is-panel {
  padding-block: 0.55rem;
}

.hair-showcase.is-panel .hair-showcase-body {
  margin: 0.75rem -0.75rem 0 -0.3rem;
}

.hair-showcase.is-panel .hair-title {
  font-size: 1rem;
}

/* Кнопка оплаты «Доступно после оплаты» с замочком: той же высоты, что вкладки
   «Женские / Мужские», и растянута на всё оставшееся место справа от них. */
.hair-showcase.is-panel .hair-head-pay {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0 1rem;
  font-size: 0.92rem;
  white-space: nowrap;
}

.hair-lock {
  flex: 0 0 auto;
}

@media (max-width: 820px) {
  .result-gallery.has-side > .skin-switch {
    grid-row: 1;
  }

  .result-gallery.has-side > .preview-doc {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .result-gallery.has-side > .side-tabs {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .result-gallery.has-side > .result-side {
    grid-column: 1 / -1;
    grid-row: 4;
  }


  .result-side-hair,
  .result-gallery.is-print .result-side-hair {
    height: min(34rem, 80vh);
  }
}

/* До оплаты: сетка 3×3. Ячейка 1 — кадр, ячейка 4 — макет паспорта, остальные —
   пустые рамки (.board-slot). Колонки строк 2–3 равные (W), в первой строке кадр
   уже на 25 %, ячейка 2 уже на 20 %, ячейка 3 забирает остаток; для этого
   колонок девять: промежутки (--gap) — отдельные дорожки, column-gap равен нулю. */
@media (min-width: 821px) {
  .result-gallery[data-board] {
    --w: calc((100% - 2 * var(--gap)) / 3);
    grid-template-columns:
      calc(var(--w) * 0.9) var(--gap)
      calc(var(--w) * 0.1 - var(--gap)) var(--gap)
      calc(var(--w) * 0.7) var(--gap)
      calc(var(--w) * 0.3 - var(--gap)) var(--gap)
      var(--w);
    column-gap: 0;
  }

  .result-gallery[data-board] > .preview-doc {
    grid-column: 1 / 2;
  }

  .result-gallery[data-board].has-side > .skin-switch {
    grid-column: 1 / 4;
  }

  .result-gallery[data-board].has-side > .side-tabs {
    grid-column: 5 / -1;
  }

  .result-gallery[data-board] .passport-mockup,
  .board-slot--col1 {
    grid-column: 1 / 4;
  }

  .board-slot--col2 {
    grid-column: 5 / 8;
  }

  .board-slot--col3 {
    grid-column: 9 / 10;
  }

  /* Нижний ряд: «Кожа без акне» — первой, «Макияж» — третьей. */
  .board-slot--skin {
    grid-column: 1 / 4;
  }

  .board-slot--makeup {
    grid-column: 9 / 10;
  }

  .board-slot--top2 {
    grid-column: 3 / 6;
  }

  .board-slot--top3 {
    grid-column: 7 / 10;
  }
}

.result-stage:has(.result-gallery[data-board]:not(.has-side)) .skin-tabs {
  width: calc((100% - 2 * var(--gap)) / 3);
}

/* Правая колонка с вкладками больше не контейнер: макет и панель причёсок —
   ячейки сетки. */
.result-gallery[data-board].has-side > .result-side {
  display: contents;
}

.board-slot {
  align-self: stretch;
  min-width: 0;
  box-sizing: border-box;
  border: 2px dashed #c3c8d0;
  border-radius: var(--radius);
}

/* Заголовок над нижним рядом: слева, с запасом сверху — ряд ниже верхних блоков. */
.board-extras-title {
  grid-column: 1 / -1;
  margin: 0 0 -0.85rem;
  font-family: var(--display);
  font-size: var(--result-h2);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Подзаголовок под «Дополнительными улучшениями»: серый, с общим отступом до карточек. */
.board-extras-sub {
  grid-column: 1 / -1;
  margin: 0 0 1.75rem;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.3;
}

/* Синий фон «Дополнительных улучшений» (до оплаты): подложка — ::before галереи,
   верх берётся у заголовка (--extras-top ставит app.js, пока его нет — примерно
   по месту заголовка). Вылезает за галерею на 96px, дальше края экрана режет
   html { overflow-x: clip }. Заголовок, подзаголовок и карточки стоят на местах. */
.result-gallery[data-board] {
  position: relative;
  isolation: isolate;
}

/* Низ фона — край галереи: под ним 48px до «Примеров работ» (поэтому поле -0.7rem). */
.result-gallery[data-extras-bg] {
  margin-bottom: -0.7rem;
  padding-bottom: 48px;
}

.result-gallery[data-extras-bg]::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--extras-top, 62%) - 40px);
  bottom: 0;
  left: -96px;
  right: -96px;
  border-radius: 22px;
  background:
    radial-gradient(90% 130% at 100% 0%, rgb(120 190 255 / 45%), transparent 60%),
    linear-gradient(180deg, #0a74ea 0%, #0058b8 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 22%),
    0 32px 64px -36px rgb(0 70 150 / 65%);
  pointer-events: none;
}

.result-gallery[data-extras-bg] .board-scroll-hint {
  margin-bottom: 1.75rem;
}

.result-gallery[data-extras-bg] .board-extras-title {
  margin-top: 56px;
  color: #fff;
}

.result-gallery[data-extras-bg] .board-extras-sub {
  color: #fff;
  font-weight: 500;
}

.result-gallery[data-extras-bg] .board-slot--tail.board-slot--filled {
  border-color: rgb(255 255 255 / 28%);
  background-clip: padding-box;
  box-shadow: 0 18px 36px -14px rgb(0 28 80 / 60%);
}

@media (max-width: 820px) {
  .result-gallery[data-extras-bg] {
    padding-bottom: 24px;
  }

  .result-gallery[data-extras-bg]::before {
    top: calc(var(--extras-top, 62%) - 16px);
    left: -12px;
    right: -12px;
  }

  .result-gallery[data-extras-bg] .board-extras-title {
    margin-top: 28px;
  }
}

/* Подсказка «ниже есть ещё»: мышка с бегущим колёсиком по центру, в запасе над заголовком. */
.board-scroll-hint {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 1.6rem;
  margin-bottom: 2.6rem;
}

/* Мышка нужна только на десктопной ширине: на телефоне её нет. */
@media (max-width: 820px) {
  .board-scroll-hint {
    display: none;
  }
}

.board-scroll-mouse {
  position: relative;
  display: block;
  width: 2rem;
  height: 3.1rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
}

.board-scroll-mouse i {
  position: absolute;
  top: 0.45rem;
  left: 50%;
  width: 0.18rem;
  height: 0.6rem;
  margin-left: -0.09rem;
  border-radius: 999px;
  background: var(--accent);
  animation: board-scroll-wheel 1.7s ease-in-out infinite;
}

@keyframes board-scroll-wheel {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  25% {
    opacity: 1;
  }

  75% {
    opacity: 1;
    transform: translateY(0.7rem);
  }

  100% {
    opacity: 0;
    transform: translateY(0.9rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .board-scroll-mouse i {
    animation: none;
    opacity: 1;
  }
}

/* Порядок нижнего ряда: кожа, причёски, макияж (на телефоне — так же). */
.board-slot--skin {
  order: 1;
}

.board-slot--hair,
.board-slot--col2:not(.board-slot--hair) {
  order: 2;
}

.board-slot--makeup {
  order: 3;
}

/* Строки 2–3 — той же высоты, что макет паспорта. */
.board-slot--tail {
  aspect-ratio: 1250 / 880;
}

/* Ячейки блока оплаты (_board_offer.html) и автопроверки (_board_check.html).
   Ячейка — контейнер: кегль .bo берётся от её размера (опорные рамки: узкая
   314×378 и широкая 530×378 дают 16px; ячейка 7 — 392×277), поэтому вёрстка в em
   масштабируется целиком, а высота ряда остаётся высотой кадра. */
.board-slot--filled {
  container-type: size;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}

.board-slot--filled:has(> .bo--dark) {
  border-color: transparent;
}

.bo {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.8em;
  height: 100%;
  padding: 1.3em;
  color: var(--ink);
  line-height: 1.25;
}

.board-slot--top2 > .bo {
  font-size: max(10px, min(5.1cqw, 4.23cqh));
}

.board-slot--top3 > .bo {
  font-size: max(10px, min(3.02cqw, 4.23cqh));
}

/* Ячейка 2 с автопроверкой: два отдельных синих блока — карточка оплаты
   (занимает остаток высоты) над ней низкий блок автопроверки. */
.board-slot--top2:has(> .bo--check-mini) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 0;
  background: none;
}

.board-slot--top2:has(> .bo--check-mini) > .bo {
  border-radius: var(--radius);
}

.board-slot--top2:has(> .bo--check-mini) > .bo--main {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
}

/* Градиент один на оба блока: автопроверка — светлая верхняя часть, карточка
   оплаты — продолжение вниз; размер градиента равен высоте ячейки. */
.board-slot--top2:has(> .bo--check-mini) > .bo--dark {
  background-size: 100% 100cqh;
  background-repeat: no-repeat;
}

.board-slot--top2:has(> .bo--check-mini) > .bo--check-mini {
  background-position: top;
}

.board-slot--top2:has(> .bo--check-mini) > .bo--main {
  background-position: bottom;
}

.bo--check-mini {
  flex: none;
  height: auto;
  justify-content: center;
  padding: 0.75em 1.3em;
}

.bo--check-mini .photo-check {
  margin: 0;
}

/* Кружок прижат к правому краю содержимого, как правый край текста карточки ниже. */
.bo--check-mini .photo-check-text {
  flex: 1 1 auto;
}

/* Текст — размера подзаголовка «Остался последний шаг» (0.85em), заголовок и кольцо в той же пропорции. */
.bo--check-mini .photo-check-state {
  font-size: 0.85em;
}

.bo--check-mini .photo-check-title {
  font-size: calc(0.85em * 0.88 / 0.76);
}

.bo--check-mini .photo-check-ring {
  width: 2.83rem;
  height: 2.83rem;
}

.bo--dark.bo--check-mini .photo-check-ring {
  /* Видимый круг на 3px короче рамки svg: сдвигаем, чтобы он касался края содержимого. */
  margin-right: -0.2em;
}

/* Наведение: темнеет только фон (слой-подложка), текст и кольцо остаются белыми;
   кольцо и текст не увеличиваются. */
.bo--check-mini {
  position: relative;
  isolation: isolate;
}

.bo--check-mini::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgb(0 20 60 / 18%);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.bo--check-mini:has(button.photo-check-card:hover)::before,
.bo--check-mini:has(button.photo-check-card:focus-visible)::before {
  opacity: 1;
}

.bo--check-mini:active:has(button.photo-check-card:hover)::before {
  background: rgb(0 20 60 / 28%);
}

.bo--dark.bo--check-mini button.photo-check-card:hover .photo-check-ring,
.bo--dark.bo--check-mini button.photo-check-card:hover .photo-check-text {
  transform: none;
}

.board-slot--check > .bo {
  font-size: max(10px, min(4.08cqw, 5.78cqh));
}

.bo--dark {
  background: var(--blue-grad);
  color: #f5f5f7;
}

/* Карточка оплаты: кнопка белая на синем. */
.bo--main .bo-cta {
  background: #fff;
  color: var(--accent-2);
}

.bo--main .bo-cta:hover:not(:disabled) {
  background: #fff;
  box-shadow: var(--btn-hover-shadow-on-blue);
}

.bo-head,
.bo-foot {
  display: grid;
  gap: 0.6em;
  justify-items: stretch;
}

.bo-head {
  justify-items: start;
}

/* Иконки UIcons Regular Rounded (web/static/icons/ui, Flaticon, бесплатно с
   подписью «Uicons by Flaticon» в /legal/contacts): маска по цвету текста. В плашке
   «чип» с подложкой, в кнопке и строке доверия — просто значок. */
.ic {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.45em;
  background: rgb(0 113 227 / 12%);
  color: var(--accent-2);
}

.ic::before {
  content: "";
  position: absolute;
  inset: 0.26em;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}

.bo-pill .ic,
.bo-trust .ic,
.bo-cta .ic {
  width: 1.2em;
  height: 1.2em;
  background: none;
  color: inherit;
}

.bo-pill .ic::before,
.bo-trust .ic::before,
.bo-cta .ic::before {
  inset: 0;
}

.ic--image { --m: url('/static/icons/ui/picture.svg'); }
.ic--printer { --m: url('/static/icons/ui/print.svg'); }
.ic--envelope-simple { --m: url('/static/icons/ui/envelope.svg'); }
.ic--sparkle { --m: url('/static/icons/ui/sparkles.svg'); }
.ic--lock-simple { --m: url('/static/icons/ui/lock.svg'); }
.ic--arrow-right { --m: url('/static/icons/ui/arrow-small-right.svg'); }
.ic--crop { --m: url('/static/icons/ui/tool-crop.svg'); }
.ic--gift { --m: url('/static/icons/ui/gift.svg'); }
.ic--magic-wand { --m: url('/static/icons/ui/magic-wand.svg'); }
.ic--shield-check { --m: url('/static/icons/ui/shield-check.svg'); }
.ic--scissors { --m: url('/static/icons/ui/scissors.svg'); }

.bo-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.85em 0.35em 0.55em;
  border-radius: 999px;
  background: var(--st-info-bg);
  color: var(--accent-2);
  font-size: 0.8em;
  font-weight: 700;
}

.bo--dark .bo-pill {
  background: rgb(255 255 255 / 12%);
  color: #fff;
}

.bo-title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.6em;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.bo-sub {
  margin: 0;
  font-size: 0.85em;
  color: var(--muted);
}

.bo--dark .bo-sub {
  color: #d6e8ff;
}

.bo-cta {
  box-sizing: border-box;
  width: 100%;
  min-height: 3.1em;
  padding: 0 1.1em;
  gap: 0.6em;
  font-size: 1.05em;
}

.bo-cta .ic {
  transition: transform 160ms ease;
}

.bo-cta:hover .ic {
  transform: translateX(0.2em);
}

.bo-trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
}

.bo-trust {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 0;
  font-size: 0.78em;
  color: var(--muted);
}

.bo--dark .bo-trust {
  color: #d6e8ff;
}

.bo-methods {
  display: inline-flex;
  gap: 0.4em;
}

.bo-pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.7em;
  padding: 0 0.45em;
  border-radius: 0.4em;
  background: #fff;
}

.bo-pay img {
  display: block;
  width: auto;
  height: 0.95em;
}

.bo-promo {
  margin: 0;
  padding: 0.6em 0.8em;
  border-radius: 0.9em;
  background: var(--bg-2);
  color: var(--muted);
  font-size: 0.78em;
}

.bo--dark .bo-promo {
  background: rgb(255 255 255 / 12%);
  color: #fff;
}

.bo--dark .bo-promo s {
  color: rgb(255 255 255 / 70%);
}

.bo-promo .promo-badge,
.bo-promo .promo-timer {
  margin: 0 0.6em 0 0;
  font-size: inherit;
}

/* Одна рамка с преимуществами после оплаты: слева готовые файлы, справа
   инструменты улучшения, подарок полосой внизу. Значки без чипов, один акцент. */
.bo-perks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  gap: 1.1em 1.6em;
}

.bo-perks-title {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 1.3em;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.bo-perks-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.95em;
  min-width: 0;
}

/* Вертикальная черта между группами. */
.bo-perks-group + .bo-perks-group::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.8em;
  border-left: 1px solid #e8e8ed;
}

.bo .bo-perks-label {
  margin: 0 0 0.05em;
  color: var(--muted);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.bo-perks-list {
  display: grid;
  gap: 0.95em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bo-perks-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  min-width: 0;
}

.bo-perks .ic {
  width: 1.35em;
  height: 1.35em;
  margin-top: 0.05em;
  border-radius: 0;
  background: none;
}

.bo-perks .ic::before {
  inset: 0;
}

.bo-perks-list span {
  display: grid;
  gap: 0.12em;
  min-width: 0;
  color: var(--muted);
  font-size: 0.76em;
  line-height: 1.3;
}

.bo-perks-list b {
  color: var(--ink);
  font-size: 1.12em;
  font-weight: 700;
  line-height: 1.2;
}

/* Подарок: одна строка на светло-голубом, как акцентный итог. */
.bo .bo-perks-gift {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0;
  padding: 0.75em 0.9em;
  border-radius: 0.8em;
  background: var(--st-info-bg-soft);
  color: var(--accent-2);
  font-size: 0.82em;
  line-height: 1.25;
}

.bo-perks-gift .ic {
  width: 1.45em;
  height: 1.45em;
  margin-top: 0;
}

.bo-perks-gift b {
  font-weight: 700;
}

/* Автопроверка в ячейке 7. */
.bo--check {
  gap: 0.7em;
}

.bo-check-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: 0;
  font-family: var(--display);
  font-size: 1.15em;
  font-weight: 800;
  line-height: 1.1;
}

.bo-check-order {
  margin: 0.45em 0 0;
  font-size: 0.72em;
  line-height: 1.3;
}

.bo-check-order a {
  color: var(--accent-2);
  text-decoration: none;
}

.bo--dark .bo-check-order a {
  color: #fff;
}

.bo-check-score {
  display: grid;
  gap: 0.35em;
}

.bo-check-num {
  margin: 0;
  font-size: 2.2em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.bo-check-label {
  margin: 0;
  color: var(--st-ok-ink);
  font-size: 0.8em;
  font-weight: 600;
}

.bo-check-score.has-fail .bo-check-label {
  color: var(--st-warn);
}

.bo--dark .bo-check-label {
  color: #fff;
}

.bo--dark .bo-check-score.has-fail .bo-check-label {
  color: #ffd98a;
}

.bo--dark .passport-check-meter i {
  background: #fff;
}

.bo--dark .passport-check-meter i.fail {
  background: rgb(255 255 255 / 35%);
}

.bo--dark .passport-check-beta {
  background: rgb(255 255 255 / 14%);
  color: #fff;
}

.bo-check-score .passport-check-meter {
  margin-top: 0.3em;
}

.bo-check-open {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.6em;
  margin: 0;
  padding: 0 1em;
  font-size: 0.9em;
}

.bo--dark .bo-check-open {
  border-color: rgb(255 255 255 / 35%);
  color: #fff;
}

.bo--dark .bo-check-open:hover:not(:disabled) {
  border-color: #fff;
  background: rgb(255 255 255 / 10%);
  color: #fff;
}

/* Окно с полным списком автопроверки. */
.check-dialog-card {
  width: min(50rem, 100%);
  padding-block: 1.6rem 1.8rem;
  max-height: calc(100dvh - 2rem);
  margin: 0;
  overflow: auto;
}

.check-dialog-card h2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 1.35rem;
  line-height: 1.1;
}

.check-dialog-card .passport-check-order {
  margin: 0 0 0.9rem;
}

.check-dialog-card ul {
  column-gap: 3rem;
}

/* Содержимое окна чуть мельче, сама рамка прежнего размера. */
.check-dialog-card > :not(.dialog-close) {
  zoom: 0.92;
}

/* Окно автопроверки до оплаты: галочки, коды пунктов и разделитель — синие. */
.check-dialog-card ul::before {
  background: var(--ink);
}

.check-dialog-card .check-code {
  color: var(--accent);
}

.passport-check .check-code a {
  color: inherit;
  text-decoration: none;
}

.check-dialog-card li.ok .mark,
.check-dialog-card li.fail .mark {
  position: relative;
}

.check-dialog-card li.ok .mark img,
.check-dialog-card li.fail .mark img {
  opacity: 0;
}

/* Крестики: у критичных пунктов красные (цвет ошибки сайта), у остальных серые. */
.check-dialog-card li.fail .mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--muted);
  -webkit-mask: url("/static/icons/cross-no-circle.svg") center / contain no-repeat;
  mask: url("/static/icons/cross-no-circle.svg") center / contain no-repeat;
}

.check-dialog-card li.fail.crit .mark::before {
  background: var(--warn);
}

.check-dialog-card li.ok .mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  -webkit-mask: url("/static/icons/check-ok-circle.svg") center / contain no-repeat;
  mask: url("/static/icons/check-ok-circle.svg") center / contain no-repeat;
}

.check-dialog-score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.7rem;
  margin: 0 0 0.9rem;
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.check-dialog-score span {
  color: var(--st-ok-ink);
  font-size: 0.9rem;
  font-weight: 900;
}

.check-dialog-score.has-fail span {
  color: var(--st-warn);
}

.check-dialog-score.lvl-warn span {
  color: #b8860b;
}

.check-dialog-score.lvl-bad span {
  color: var(--warn);
}

/* Итог «17 из 17 Соответствует» — справа в шапке окна, в чёрной рамке, по центру высоты заголовка и строки про приказ. */
@media (min-width: 640px) {
  .check-dialog-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
  }

  .check-dialog-card h2 {
    grid-column: 1;
    grid-row: 1;
  }

  .check-dialog-card .passport-check-order {
    grid-column: 1;
    grid-row: 2;
  }

  .check-dialog-card .check-dialog-score {
    grid-column: 1 / -1;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: start;
    /* Центр плашки — над центром правой колонки списка (три четверти ширины плюс четверть промежутка). */
    margin: 0 0 0.9rem calc(75% + 0.7rem);
    /* Высота плашки с обводкой по видимой высоте «Автопроверка» + строки про приказ; масштаб сохраняет пропорции. */
    transform: translateX(-50%) scale(0.9);
    padding: 0.75rem 1.3rem;
    border: 3px solid currentcolor;
    font-weight: 900;
    color: var(--st-ok-ink);
    border-radius: 30px;
    flex-wrap: nowrap;
    width: max-content;
    white-space: nowrap;
    zoom: 1;
    font-size: 1.06rem;
  }

  .check-dialog-card .check-dialog-score span {
    font-size: inherit;
  }

  .check-dialog-card a.check-dialog-score.check-dialog-retry {
    color: var(--accent);
    text-decoration: none;
  }

  .check-dialog-card .check-dialog-score.lvl-warn {
    color: #b8860b;
  }

  .check-dialog-card .check-dialog-score.lvl-bad {
    color: var(--warn);
  }

  .check-dialog-card ul {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bo-cta .ic {
    transition: none;
  }
}

/* Плашка оценки до оплаты — стеклянная капсула внизу кадра по центру, под
   подбородком: вопрос и два круглых значка в одну строку, лицо остаётся видно. */
.result-gallery[data-board] .rating-card {
  inset: auto 0 1rem;
  flex-direction: row;
  width: max-content;
  max-width: calc(100% - 1rem);
  margin-inline: auto;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 999px;
  background: rgb(255 255 255 / 82%);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 10px 28px rgb(15 23 42 / 16%);
  color: var(--ink);
}

.result-gallery[data-board] .rating-card-title {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.result-gallery[data-board] .rating-card-actions {
  grid-auto-columns: auto;
  gap: 0.3rem;
}

/* Обе кнопки одинаковые: круг на фоне плашки, рамка и значок цвета вопроса. */
.result-gallery[data-board] .rating-btn {
  display: grid;
  place-items: center;
  width: 2rem;
  min-width: 0;
  height: 2rem;
  min-height: 0;
  padding: 0;
  border: 1.5px solid var(--muted);
  background: transparent;
  color: var(--muted);
  transition:
    box-shadow 160ms ease,
    transform 160ms ease;
}

.result-gallery[data-board] .rating-btn svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Наведение: цвета те же, кнопка чуть приподнимается и отбрасывает тень. */
.result-gallery[data-board] .rating-btn:hover:not(:disabled) {
  box-shadow: 0 6px 16px rgb(15 23 42 / 14%);
  transform: translateY(-1px);
}

.result-gallery[data-board] .rating-btn:active:not(:disabled) {
  box-shadow: 0 2px 6px rgb(15 23 42 / 12%);
  transform: translateY(0) scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .result-gallery[data-board] .rating-btn:hover:not(:disabled),
  .result-gallery[data-board] .rating-btn:active:not(:disabled) {
    transform: none;
  }
}

/* Без переключателей справа сетка не должна оставлять пустую первую строку. */
.result-gallery[data-board].has-side {
  row-gap: var(--gap);
}

.result-gallery[data-board].has-side > .preview-doc {
  grid-row: auto;
}

/* Ячейка 5: «Смена причёски». Витрина (_hairstyles.html, panel) без своей рамки:
   рамка у ячейки; заголовок и вкладки сверху, примеры прокручиваются, внизу
   подпись про оплату. */
.result-gallery[data-board] .board-slot--hair {
  display: block;
  height: auto;
}

/* Секция .hair (_hairstyles.html) — прослойка: растягиваем её на всю ячейку. */
.board-slot--hair > .hair {
  display: block;
  height: 100%;
  max-width: none;
  margin: 0;
}

.board-slot--hair .hair-showcase.is-panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  height: 100%;
  padding: 1.1em;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: hidden;
  font-size: max(10px, min(4.08cqw, 5.78cqh));
}

.board-slot--hair .hair-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
}

.hair-board-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  font-family: var(--display);
  font-size: 1.05em;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.board-slot--hair .hair-tabs {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.18em;
  font-size: 0.78em;
}

.board-slot--hair .hair-tab {
  padding: 0.35em 0.8em;
  font-size: 1em;
}

.board-slot--hair .hair-showcase.is-panel > .hair-showcase-body {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 0.2em 0 0;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
}

.board-slot--hair .hair-panel {
  display: grid;
  gap: 0.6em;
}

.board-slot--hair .hair-strip {
  gap: 0.5em;
}

.board-slot--hair .hair-fig img {
  border-radius: 0.5em;
}

.board-slot--hair .hair-head-pay {
  flex: 0 0 auto;
  gap: 0.5em;
  width: 100%;
  min-height: 2.7em;
  margin: 0;
  padding: 0 1em;
  font-size: 0.85em;
}

.hair-head-pay .ic {
  width: 1.2em;
  height: 1.2em;
  background: none;
  color: inherit;
}

.hair-head-pay .ic::before {
  inset: 0;
}

/* Ячейка 6: «Убрать акне» (skin_switch из _result.html, логика в app.js). */
.board-slot--skin > .bo {
  justify-content: flex-start;
  gap: 0.8em;
  font-size: max(10px, min(4.08cqw, 5.78cqh));
}

.bo-skin-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  font-family: var(--display);
  font-size: 1.05em;
  font-weight: 800;
  line-height: 1.1;
}

.bo-skin-title .ic {
  background: rgb(139 92 246 / 14%);
  color: #6d28d9;
}

.bo--skin .skin-switch {
  flex: 1 1 auto;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.6em;
  min-height: 0;
  margin: 0;
}

.bo--skin .skin-offer {
  flex: 1 1 auto;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.8em;
}

.bo--skin .skin-offer-note {
  flex: 0 0 auto;
  order: -1;
  font-size: 0.85em;
  line-height: 1.35;
}

.bo--skin .skin-enhance {
  box-sizing: border-box;
  width: 100%;
  min-height: 3.1em;
  margin-top: auto;
  padding: 0 1em;
  font-size: 1.05em;
}

.bo--skin .skin-tabs {
  width: 100%;
  min-height: 3em;
  margin-top: auto;
}

.bo--skin .skin-tab {
  font-size: 0.85em;
}

.bo--skin .form-error {
  margin: 0;
  font-size: 0.78em;
}

@media (max-width: 820px) {
  .result-gallery[data-board] {
    grid-template-columns: minmax(0, 1fr);
  }

  .result-stage:has(.result-gallery[data-board]:not(.has-side)) .skin-tabs {
    width: 100%;
  }

  .result-gallery[data-board].has-side > .result-side {
    display: grid;
  }

  .result-gallery[data-board] .board-slot:not(.board-slot--filled) {
    display: none;
  }

  /* Блок оплаты на узком экране: обычная карточка по высоте содержимого. */
  .board-slot--filled {
    container-type: normal;
  }

  .board-slot--top2 > .bo,
  .board-slot--top3 > .bo,
  .board-slot--check > .bo {
    height: auto;
    font-size: 1rem;
  }

  .board-slot--check {
    aspect-ratio: auto;
  }

  /* Без контейнера по высоте общий градиент не нужен: у каждого блока свой. */
  .board-slot--top2:has(> .bo--check-mini) > .bo--dark {
    background-size: auto;
  }

  .bo-perks {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2em;
  }

  .bo-perks-group + .bo-perks-group {
    padding-top: 1.2em;
    border-top: 1px solid #e8e8ed;
  }

  .bo-perks-group + .bo-perks-group::before {
    content: none;
  }

  .bo-perks-list span {
    font-size: 0.82em;
  }

  .result-gallery[data-board].has-side > .preview-doc,
  .result-gallery[data-board].has-side > .result-side {
    grid-row: auto;
  }

  .board-slot--hair,
  .board-slot--skin {
    aspect-ratio: auto;
  }

  .board-slot--hair > .hair,
  .board-slot--hair .hair-showcase.is-panel {
    height: auto;
    max-height: 30rem;
    font-size: 1rem;
  }

  .board-slot--skin > .bo {
    height: auto;
    font-size: 1rem;
  }

  /* С GIF рамки держат пропорцию кадра, как на десктопе. */
  .board-slot--hair:has(> .board-gif),
  .board-slot--skin:not(:has(.skin-offer[hidden])):not(:has(.skin-enhance.is-busy)):not(
      :has([data-skin-error]:not([hidden]))
    ) {
    aspect-ratio: 1250 / 880;
  }
}

/* Видео-демо в рамках «Макияж», «Смена причёски» и «Кожа без акне» до оплаты (1250×880,
   как рамка). Живая вёрстка лежит под ним: её читает app.js и экранные дикторы;
   у «Макияжа» вёрстки нет — только GIF. */
.board-slot--makeup,
.board-slot--hair,
.board-slot--skin {
  position: relative;
}

.board-gif {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  background: #f5f5f7;
}

.board-gif img,
.board-gif video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* «Макияж» — видео; неподвижный кадр только при reduced-motion. */
.board-gif .board-gif-still {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .board-gif video {
    display: none;
  }

  .board-gif .board-gif-still {
    display: block;
  }
}

.board-gif:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

/* «Кожа»: GIF не ловит клики, а настоящая кнопка встаёт под нарисованную. */
.board-gif--skin {
  pointer-events: none;
}

.board-slot--skin:has(.skin-offer:not([hidden])) .skin-enhance:not(.is-busy) {
  position: absolute;
  z-index: 1;
  top: 82.83%;
  left: 50%;
  width: 46.31%;
  height: 9.72%;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.board-slot--skin:has(.skin-offer[hidden]) .board-gif,
.board-slot--skin:has(.skin-enhance.is-busy) .board-gif,
.board-slot--skin:has([data-skin-error]:not([hidden])) .board-gif {
  display: none;
}

.skin-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
}

.skin-offer[hidden] {
  display: none;
}

.skin-offer .skin-enhance {
  flex: 0 0 auto;
}

/* Кнопка «магии»: фиолетовый градиент и блеск грани бриллианта. */
.skin-enhance {
  --magic-a: #8b5cf6;
  --magic-b: #6d28d9;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, var(--magic-a), var(--magic-b));
  color: #fff;
  box-shadow: 0 6px 18px -6px rgb(109 40 217 / 55%);
}

.skin-enhance:hover:not(:disabled) {
  background: linear-gradient(135deg, #9b72f8, #7632e6);
  color: #fff;
  box-shadow: 0 8px 22px -6px rgb(109 40 217 / 65%);
}

/* Та же «магия», но в синем цвете основной кнопки сайта. */
.btn-magic {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #3d9bff, var(--accent) 55%, #0058b8);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgb(0 113 227 / 55%);
  transition:
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease;
  animation: magic-glow 2.8s ease-in-out infinite;
}

.btn-magic:hover:not(:disabled) {
  background: linear-gradient(135deg, #5badff, #1a82f0 55%, #0062cc);
  color: #fff;
  box-shadow: 0 8px 22px -6px rgb(0 113 227 / 65%);
  animation: none;
}

.btn-magic:active:not(:disabled) {
  box-shadow: 0 3px 10px -4px rgb(0 113 227 / 55%);
}

/* Синее свечение под кнопкой медленно «дышит». */
@keyframes magic-glow {
  0%, 100% { box-shadow: 0 6px 18px -6px rgb(0 113 227 / 45%); }
  50% { box-shadow: 0 8px 26px -4px rgb(0 113 227 / 80%); }
}

/* Кнопка оплаты под макетом: те же искры, что у «Убрать акне», но в зелёном. */
.btn-buy.btn-buy-magic {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #2fd62f, #00ba00 55%, #008f00);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgb(0 186 0 / 55%);
}

.btn-buy.btn-buy-magic:hover:not(:disabled) {
  background: linear-gradient(135deg, #4de44d, #14c814 55%, #009a00);
  box-shadow: 0 8px 22px -6px rgb(0 186 0 / 65%);
}

.btn-buy-magic .skin-spark:nth-of-type(1) { top: 8%; right: 7%; width: 1.25rem; height: 1.25rem; }
.btn-buy-magic .skin-spark:nth-of-type(2) { top: 48%; left: 6%; width: 1rem; height: 1rem; }
.btn-buy-magic .skin-spark:nth-of-type(3) { top: 4%; left: 40%; width: 0.95rem; height: 0.95rem; }
.btn-buy-magic .skin-spark:nth-of-type(4) { bottom: 6%; right: 28%; width: 1.1rem; height: 1.1rem; }

/* Только пульсация свечения, без градиента и искр. */
.btn-glow {
  animation: magic-glow 2.8s ease-in-out infinite;
}

.btn-glow:hover:not(:disabled),
.btn-glow:disabled {
  animation: none;
}

.btn-glow:hover:not(:disabled) {
  box-shadow: 0 8px 22px -6px rgb(0 113 227 / 65%);
}

.btn-glow:active:not(:disabled) {
  box-shadow: 0 3px 10px -4px rgb(0 113 227 / 55%);
}

@media (prefers-reduced-motion: reduce) {
  .btn-magic,
  .btn-glow {
    animation: none;
  }
}

/* На главной кнопка крупнее, поэтому и вспышки заметнее. */
.btn-magic .skin-spark:nth-of-type(1) { top: 8%; right: 7%; width: 1.25rem; height: 1.25rem; }
.btn-magic .skin-spark:nth-of-type(2) { top: 48%; left: 6%; width: 1rem; height: 1rem; }
.btn-magic .skin-spark:nth-of-type(3) { top: 4%; left: 40%; width: 0.95rem; height: 0.95rem; }
.btn-magic .skin-spark:nth-of-type(4) { bottom: 6%; right: 28%; width: 1.1rem; height: 1.1rem; }

/* Четырёхлучевые искры вспыхивают по очереди в разных местах кнопки. */
.skin-spark {
  position: absolute;
  z-index: -1;
  width: 0.7rem;
  height: 0.7rem;
  background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
  transform: scale(0) rotate(0deg);
  animation: skin-sparkle 3s ease-in-out infinite;
  pointer-events: none;
}

.skin-spark:nth-of-type(1) { top: 14%; right: 10%; animation-delay: 0s; }
.skin-spark:nth-of-type(2) { top: 56%; left: 8%; width: 0.55rem; height: 0.55rem; animation-delay: 0.9s; }
.skin-spark:nth-of-type(3) { top: 10%; left: 42%; width: 0.5rem; height: 0.5rem; animation-delay: 1.7s; }
.skin-spark:nth-of-type(4) { bottom: 10%; right: 30%; width: 0.6rem; height: 0.6rem; animation-delay: 2.3s; }

@keyframes skin-sparkle {
  0%, 8% { opacity: 0; transform: scale(0) rotate(0deg); }
  22% { opacity: 1; transform: scale(1) rotate(45deg); }
  38%, 100% { opacity: 0; transform: scale(0) rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .skin-spark {
    animation: none;
  }
}

.skin-offer-note {
  flex: 1 1 16rem;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.skin-enhance-label,
.skin-enhance-busy {
  position: relative;
  top: -1px;
}

.skin-enhance-busy,
.skin-enhance.is-busy .skin-enhance-label {
  display: none;
}

.skin-enhance.is-busy .skin-enhance-busy {
  display: inline;
}

.skin-enhance.is-busy {
  cursor: progress;
}

.field-required {
  color: var(--accent);
  font-weight: 700;
}

.field-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
}

.photo-code-row {
  flex-wrap: wrap;
}

.photo-code-row .photo-code-error {
  margin: 0;
  color: var(--warn);
  font-size: 0.95rem;
  font-weight: 500;
  text-align: left;
}

.photo-code .result-mail-note {
  margin-top: 1rem;
}

.pay-page textarea {
  border-radius: 12px;
  background: var(--bg-2);
  font: inherit;
  padding: 0.75rem 0.9rem;
  resize: vertical;
}

.pay-page textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 4px rgb(0 113 227 / 14%);
}

@media (prefers-reduced-motion: reduce) {
  .status-spin { animation: none; }
  .photos-page .photo-grid li { transition: none; }
  .photos-page .photo-grid li:hover { transform: none; }
}

/* Платежи и возвраты /staff/payments */
.staff-payments,
.staff-ratings,
.staff-certs {
  max-width: 1180px;
}

/* Даты и селекты — та же сетка, что в статистике, но полей пять, не семь. */
.staff-pay-fields {
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

/* Телефон: две колонки всегда, а не «две или одна» от случайной ширины
   (на 360 px auto-fit давал одну колонку, на 375 — две). */
@media (max-width: 640px) {
  .staff-pay-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Пятое поле одно в строке: на всю ширину, без пустой половины. */
  .staff-pay-fields > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Совсем узкий экран: дата не влезает в полколонки. */
@media (max-width: 340px) {
  .staff-filter-fields,
  .staff-pay-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.staff-search {
  display: flex;
  flex-direction: column;
  gap: var(--staff-title-gap);
  flex: 1 1 18rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.staff-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.staff-pay-table td {
  vertical-align: middle;
}

.pay-email {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pay-find {
  font-size: var(--staff-fs-min);
  color: var(--muted);
}

/* Адрес при обработке кадра, если плательщик ввёл другой. */
.pay-declared {
  margin-top: 0.15rem;
  font-size: var(--staff-fs-min);
  overflow-wrap: anywhere;
}

.pay-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.pay-empty {
  margin: 0.6rem 0;
}

/* «Ничего не найдено» лежит внутри карточки: с родителем, иначе
   .card p { margin: 0 } прижимает текст к шапке таблицы. */
.staff-chart-card .pay-empty {
  margin: 1rem 0 0.25rem;
}

.pay-status {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: var(--staff-fs-min);
  font-weight: 600;
  background: var(--card);
}

.pay-status-paid,
.pay-status-r-done {
  color: var(--st-ok);
  border-color: var(--st-ok);
}

.pay-status-pending,
.pay-status-refund_pending,
.pay-status-r-awaiting_code,
.pay-status-r-processing {
  color: var(--st-warn);
  border-color: var(--st-warn);
}

.pay-status-refunded,
.pay-status-refunded_partial {
  color: var(--accent);
  border-color: var(--accent);
}

.pay-status-canceled,
.pay-status-r-canceled,
.pay-status-r-expired {
  color: var(--muted);
}

.pay-status-r-failed,
.pay-status-r-unknown {
  color: var(--warn);
  border-color: var(--warn);
}

.staff-pay-detail td {
  white-space: normal;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.pay-refund-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.pay-refund-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

/* Строки в раскрытой карточке платежа (внутри .card): с родителем. */
.staff-pay-detail .pay-refund-meta {
  margin: 0.35rem 0 0;
  font-size: 0.86rem;
}

.pay-refund-error {
  font-size: 0.86rem;
}

.refund-card {
  display: grid;
  gap: 0.75rem;
}

.refund-card h2,
.refund-card p {
  margin: 0;
}

.refund-step {
  display: grid;
  gap: 0.75rem;
}

.refund-step[hidden] {
  display: none;
}

.refund-card .field {
  display: grid;
  gap: 0.25rem;
}

.refund-card .field select,
.refund-card .field input[type="number"],
.refund-card .field input[type="text"] {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
}

.refund-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.88rem;
}

.refund-check[hidden] {
  display: none;
}

.refund-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.3rem;
}

/* Вкладка «Почта» в /staff: перенос фото на другой адрес. */
.staff-email {
  max-width: 1180px;
}

.staff-email .staff-email-card {
  margin: 0 0 var(--staff-block-gap, 1rem);
}

.staff-email .staff-email-card h2 {
  margin: 0 0 var(--staff-title-gap, 0.75rem);
  overflow-wrap: anywhere;
}

.staff-email .staff-email-card .staff-filter-row {
  margin: 0 0 0.75rem;
}

.staff-email .staff-email-note {
  margin: 0 0 var(--staff-block-gap, 1rem);
  padding: 0.7rem 0.9rem;
}

.staff-email .staff-email-empty,
.staff-email .staff-email-hint {
  margin: 0.5rem 0 0.75rem;
}

.staff-email .staff-email-form {
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

.staff-email .staff-email-form h3 {
  margin: 0.5rem 0 0.75rem;
}

.staff-email .staff-email-requests td {
  white-space: normal;
}

.staff-email .staff-email-inline {
  display: inline-block;
  margin: 0 0.3rem 0.3rem 0;
}

.staff-email .staff-chip-btn {
  text-decoration: none;
  cursor: default;
}

.staff-email a.staff-chip-btn {
  cursor: pointer;
}

/* Телефон: поиск и счётчики переносятся, а не уезжают в горизонтальную
   прокрутку, как строки фильтров статистики. */
@media (max-width: 640px) {
  .staff-email .staff-filter-row {
    flex-wrap: wrap;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
    overflow: visible;
  }

  .staff-email .staff-filter-row .staff-search {
    flex: 1 1 100%;
  }

  .staff-email .staff-filter-actions {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .staff-email .staff-filter-actions .btn {
    width: 100%;
  }
}

/* Счётчики-кнопки: раскрывают панели под собой. */
.staff-email button.staff-chip-btn {
  cursor: pointer;
}

.staff-email button.staff-chip-btn[aria-expanded="true"] {
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  border-color: var(--accent);
  color: var(--accent-2);
}

.staff-email .staff-email-panel {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
}

.staff-email .staff-email-panel[hidden] {
  display: none;
}

.staff-email .staff-email-panel h3 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.staff-email .staff-email-panel h3:not(:first-child) {
  margin-top: 1rem;
}

.staff-email .staff-email-panel .staff-email-empty {
  margin: 0.25rem 0 0.5rem;
}

/* Список кадров сворачивается: компактное окно, когда кадров много. */
.staff-email .staff-email-frames-box {
  margin: 0 0 0.75rem;
}

.staff-email .staff-email-frames-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.5rem;
  cursor: pointer;
  list-style: none;
}

.staff-email .staff-email-frames-head::-webkit-details-marker {
  display: none;
}

.staff-email .staff-email-frames-title {
  font-weight: 700;
  white-space: nowrap;
}

.staff-email .staff-email-toggle {
  white-space: nowrap;
}

.staff-email .staff-email-frames-box:not([open]) .staff-email-frames-head {
  margin-bottom: 0;
}

.staff-email .staff-email-frames-box[open] .when-closed,
.staff-email .staff-email-frames-box:not([open]) .when-open {
  display: none;
}

/* Кадры: список в той же рамке, что и карточка. Слева превью (клик открывает
   файл), в середине статус и оплата, справа две понятные кнопки. */
.staff-email .staff-email-filter-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: 0 0 0.6rem;
  padding: 0.45rem 0.75rem;
  border-radius: 10px;
  background: color-mix(in srgb, #00ba00 12%, var(--card));
  color: #008a00;
  font-size: 0.85rem;
  font-weight: 600;
}

.staff-email .staff-email-filter-note[hidden],
.staff-email [data-email-frames-empty][hidden],
.staff-email .staff-email-frame-list[hidden],
.staff-email .reveal-more[hidden] {
  display: none;
}

.staff-email .staff-email-filter-clear {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-2);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.staff-email .staff-email-frame-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

/* «Показать ещё»: с родителем, иначе .card p { margin: 0 } прижимает кнопку
   к линии списка. */
.staff-email .reveal-more {
  margin: 1.1rem 0 0.25rem;
}

.staff-email .staff-email-frame {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.6rem 1rem;
  align-items: start;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

.staff-email .staff-email-frame:last-child {
  border-bottom: 0;
}

.staff-email .staff-email-frame[hidden] {
  display: none;
}

.staff-email .staff-email-tiles {
  display: flex;
  gap: 0.4rem;
}

.staff-email .staff-email-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 4.1rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--staff-fs-min);
  line-height: 1.2;
  cursor: zoom-in;
}

.staff-email .staff-email-tile img {
  display: block;
  width: 44px;
  height: 58px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-2);
}

.staff-email .staff-email-tile:hover img,
.staff-email .staff-email-tile:focus-visible img {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.staff-email .staff-email-frame-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  margin: 0;
}

.staff-email .staff-email-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.3rem 0 0;
}

.staff-email .staff-badge {
  padding: 0.12rem 0.6rem;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--muted);
  font-size: var(--staff-fs-min);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.staff-email .staff-badge.is-paid {
  background: color-mix(in srgb, #00ba00 14%, var(--card));
  color: #008a00;
}

.staff-email .staff-badge.is-promo {
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  color: var(--accent-2);
}

.staff-email .staff-badge.is-warn {
  background: color-mix(in srgb, var(--warn) 10%, var(--card));
  color: var(--warn);
}

.staff-certs .chip.is-warn {
  background: color-mix(in srgb, var(--warn) 10%, var(--card));
  color: var(--warn);
}

.staff-email .staff-email-frame-meta {
  margin: 0.25rem 0 0;
  font-size: var(--staff-fs-min);
}

.staff-email .staff-email-more {
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: var(--staff-fs-min);
}

.staff-email .staff-email-more summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}

.staff-email .staff-email-more summary::-webkit-details-marker {
  display: none;
}

.staff-email .staff-email-more summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.3rem;
  transition: transform 120ms ease;
}

.staff-email .staff-email-more[open] summary::before {
  transform: rotate(90deg);
}

.staff-email .staff-email-more ul {
  margin: 0.3rem 0 0;
  padding-left: 1.2rem;
}

.staff-email .staff-email-frame-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.staff-email .staff-email-frame-actions .btn {
  justify-content: flex-start;
  gap: 0.45rem;
  min-width: 9.5rem;
  white-space: nowrap;
}

.staff-email .staff-email-frame-actions .btn svg {
  flex: none;
  width: 16px;
  height: 16px;
}

@media (max-width: 760px) {
  .staff-email .staff-email-frame {
    grid-template-columns: minmax(0, 1fr);
  }

  .staff-email .staff-email-frame-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .staff-email .staff-email-frame-actions .btn {
    flex: 1 1 9rem;
    justify-content: center;
  }
}

/* Окно «Все фото»: листание файлов кадра, скачивание файла и ZIP. */
.staff-email-viewer {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 1rem;
  border: 0;
  background: transparent;
  color: inherit;
}

.staff-email-viewer:not([open]) {
  display: none;
}

.staff-email-viewer[open] {
  display: grid;
  place-items: center;
}

.staff-email-viewer::backdrop {
  background: rgb(28 25 22 / 55%);
}

.staff-email-viewer-card {
  position: relative;
  width: min(46rem, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 2.4rem 1.1rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--dialog-shadow);
}

.staff-email-viewer-title {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.staff-email-viewer-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}

.staff-email-viewer-stage img {
  display: block;
  width: 100%;
  min-height: 8rem;
  max-height: min(60vh, 38rem);
  object-fit: contain;
  border-radius: 12px;
  background: var(--bg-2);
}

.staff-email-viewer-nav {
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.staff-email-viewer-nav:hover,
.staff-email-viewer-nav:focus-visible {
  border-color: var(--accent);
  color: var(--accent-2);
}

.staff-email-viewer-nav[hidden],
.staff-email-viewer-status[hidden],
.staff-email-viewer-tabs[hidden],
.staff-email-viewer-actions .btn[hidden] {
  display: none;
}

.staff-email-viewer-status {
  margin: 0.5rem 0 0;
}

.staff-email-viewer-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.75rem 0 0;
}

.staff-email-viewer-tab {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: var(--staff-fs-min);
  font-weight: 600;
  cursor: pointer;
}

.staff-email-viewer-tab.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--btn-ink);
}

.staff-email-viewer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

@media (max-width: 640px) {
  .staff-email .staff-table td,
  .staff-email .staff-table th {
    white-space: normal;
  }
}

/* Главная: второй шаг формы — почта для ссылки на кадр. Рамка с фото
   уступает место рамке почты: в ней же и кнопка «Начать обработку». Рамкой
   становится .upload-confirm, а .upload-email растворяется в ней
   (display: contents), чтобы «Назад к фото» встало под кнопку. */
form.upload .upload-email {
  display: none;
  margin: 0 0 0.75rem;
}

form.upload.is-email-step .upload-confirm {
  align-items: center;
  gap: 0.15rem;
  margin-top: 1rem;
  padding: 1rem 1.1rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: center;
  animation: upload-email-in 0.28s ease both;
}

form.upload.is-email-step .upload-email {
  display: contents;
}

form.upload.is-email-step .upload-confirm > .form-actions {
  align-self: stretch;
  margin-top: 0.35rem;
}

form.upload.is-email-step .drop:not(.is-busy):not(.is-done) {
  display: none;
}

form.upload.is-email-step .upload-consent {
  display: none;
}

form.upload .upload-email-icon {
  display: grid;
  place-items: center;
  color: var(--accent);
}

form.upload .upload-email-icon svg {
  width: 2.1rem;
  height: 2.1rem;
}

form.upload .upload-email .field {
  justify-items: center;
  gap: 0.6rem;
  width: 100%;
  margin: 0.2rem 0 0.5rem;
}

form.upload .upload-email .field input {
  width: 100%;
  text-align: center;
}

form.upload .upload-email .field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(0 113 227 / 16%);
}

form.upload .upload-email .upload-email-hint {
  margin: 0 0 0.5rem;
  max-width: 28rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted);
}

@keyframes upload-email-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  form.upload.is-email-step .upload-confirm { animation: none; }
}

form.upload .upload-email .upload-email-suggest {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  line-height: 1.4;
}

form.upload .upload-email-fix,
form.upload .upload-email-back {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

form.upload .upload-email-back {
  display: block;
  order: 1;
  margin: 0.6rem auto 0;
  font-size: 0.88rem;
  text-decoration: none;
}

/* Пять вкладок staff (Чат … Модели) на телефоне: ряд прокручивается вбок,
   а не сжимает «Статистику» до обрезанного слова. */
@media (max-width: 640px) {
  .staff-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .staff-tabs::-webkit-scrollbar {
    display: none;
  }
  .staff-tab {
    flex: 1 0 auto;
  }
}

/* «Смена причёски»: витрина неоплаченного кадра и выбор у оплаченного.
   Разметка — web/templates/_hairstyles.html, поведение — [data-hair-*] в app.js. */
.hair {
  max-width: 52rem;
  margin: 1.5rem 0 0;
  min-width: 0;
}

.hair-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hair-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.hair-head-text {
  display: block;
  min-width: 0;
}

.hair-title {
  display: block;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.hair-sub {
  display: block;
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
}

.hair-showcase {
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.hair-showcase > summary {
  list-style: none;
  cursor: pointer;
}

.hair-showcase > summary::-webkit-details-marker {
  display: none;
}

.hair-showcase > summary::marker {
  content: "";
}

.hair-showcase > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 8px;
}

.hair-head-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
}

.hair-head-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translate(-50%, -70%) rotate(45deg);
  transition: transform 160ms ease;
}

.hair-showcase[open] .hair-head-toggle::after {
  transform: translate(-50%, -30%) rotate(-135deg);
}

.hair-showcase-body {
  display: grid;
  gap: 1.25rem;
  margin-top: 1rem;
}

.hair-row {
  min-width: 0;
}

.hair-row-name {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
}

.hair-strip,
.hair-grid,
.hair-gallery {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hair-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.hair-strip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 8px;
}

.hair-card {
  min-width: 0;
}

.hair-fig {
  margin: 0;
}

.hair-fig img,
.hair-pick-img img,
.hair-option-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 35 / 45;
  object-fit: cover;
  background: var(--bg-2);
}

.hair-fig img {
  border-radius: 12px;
}

.hair-card.is-before img {
  outline: 2px solid var(--line);
  outline-offset: -2px;
}

.hair-fig figcaption {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
}

.hair-card.is-before figcaption {
  color: var(--muted);
  text-align: center;
}

.hair-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.hair-cta {
  margin: 0;
}

.hair-body {
  margin-top: 0.9rem;
}

.hair-lead {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* Ожидание обработки: заметный чёрный текст и запас до карточек. */
.hair-lead.hair-lead-wait {
  margin-bottom: 1.6rem;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
}

.hair-tabs {
  display: inline-flex;
  justify-self: start;
  margin: 0 0 0.9rem;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
}

.hair-tab {
  padding: 0.45rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.hair-tab:hover {
  color: var(--ink);
}

.hair-tab.is-active {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 4px rgb(0 0 0 / 12%);
}

.hair-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hair-grid,
.hair-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.hair-gallery {
  margin-bottom: 0.75rem;
}

/* Запас под примерами причёсок: до поля подтверждения и до края рамки. */
.hair-panel .hair-grid {
  margin-bottom: 1.25rem;
}

.hair-option,
.hair-pick {
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease;
}

.hair-option:hover,
.hair-pick:hover {
  border-color: var(--accent);
}

.hair-option[aria-pressed="true"],
.hair-pick[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.hair-option[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.hair-option:focus-visible,
.hair-pick:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.hair-option-img,
.hair-pick-img {
  position: relative;
  display: block;
}

.hair-option-label,
.hair-pick-label {
  display: block;
  padding: 0.5rem 0.6rem 0.55rem;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.hair-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.hair-count {
  margin: 0;
  font-weight: 700;
}

.hair-confirm {
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 1.5rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 6%, #fff);
}

.hair-confirm[hidden] {
  display: none;
}

.hair-confirm p {
  margin: 0 0 0.65rem;
  font-weight: 600;
  line-height: 1.4;
}

.hair-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hair-wait,
.hair-fail {
  display: flex;
  flex-direction: column;
  /* Сверху вниз без центрирования: при смене подписи круг и название не
     сдвигаются, меняется только текст под ними. */
  justify-content: flex-start;
  gap: 0.4rem;
  min-height: 9rem;
  padding: 0.8rem;
  border: 1px dashed var(--line);
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.35;
}

.hair-wait-label,
.hair-fail-label {
  font-weight: 700;
}

.hair-wait-text,
.hair-fail-text {
  color: var(--muted);
}

/* Круг-прогресс: от верхней точки по часовой за 30 секунд; прошедшее время
   приходит из JS через --hair-elapsed, чтобы перерисовка его не сбрасывала. */
.hair-spinner {
  width: 1.6rem;
  height: 1.6rem;
  transform: rotate(-90deg);
}

.hair-spinner circle {
  fill: none;
  stroke-width: 3;
}

.hair-spinner-track {
  stroke: var(--line);
}

.hair-spinner-fill {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: hair-progress 30s linear var(--hair-elapsed, 0ms) forwards;
}

@keyframes hair-progress {
  to { stroke-dashoffset: 0; }
}

.hair-wait-long,
.hair-wait.is-long .hair-wait-first {
  display: none;
}

.hair-wait.is-long .hair-wait-long {
  display: block;
}

.hair-fail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.hair-small {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

/* Остаток изменений кадра и покупка пакетов (docs/cosmetics.md). */
.hair-balance-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 0 0 0.9rem;
}

.hair-balance {
  margin: 0;
  font-size: 0.95rem;
}

.hair-buy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hair-buy-offer s,
.credits-offers s {
  opacity: 0.7;
}

.credits-offers {
  display: grid;
  gap: 0.4rem;
  margin: 0 0 0.8rem;
  padding: 0;
  border: 0;
}

.credits-offers legend {
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.promo-badge,
.promo-timer {
  display: inline-block;
  margin: 0.3rem 0.6rem 0 0;
  font-size: 0.9rem;
}

/* Окно акции ещё не открыто: таймер покажет app.js (offerShown). */
.promo-timer[hidden] {
  display: none;
}

.promo-badge s {
  color: var(--muted);
}

.promo-timer b {
  font-variant-numeric: tabular-nums;
}

.hair-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
}

.makeup-slider {
  display: block;
  margin: 0.6rem 0 0.2rem;
}

.makeup-slider input[type="range"] {
  width: 100%;
  accent-color: #00ba00;
}

.makeup-ticks {
  display: flex;
  justify-content: space-between;
  margin: 0 0 0.6rem;
}

.makeup-tick {
  padding: 0.2rem 0.3rem;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.makeup-tick.is-active {
  color: var(--ink);
  font-weight: 700;
}

.makeup-hint {
  margin: 0 0 0.6rem;
}

.makeup-example {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0 0 0.8rem;
}

.makeup-example-side {
  display: grid;
  gap: 0.2rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.makeup-example img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.hair-target {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.hair-target-note {
  margin: 0 0 0.9rem;
  color: var(--muted, #6e6e73);
  font-size: 0.9rem;
}

.hair-fail.is-blocked .hair-fail-text a {
  color: inherit;
  text-decoration: underline;
}

.hair-replace summary {
  list-style: none;
  cursor: pointer;
}

.hair-replace summary::-webkit-details-marker {
  display: none;
}

.hair-replace-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.hair-replace-item {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.hair-replace-item:hover {
  border-color: var(--accent);
}

.hair-replace-item:focus-visible,
.hair-replace summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hair.is-busy {
  cursor: progress;
}

.hair .form-error {
  margin: 0.75rem 0 0;
}

/* Чип выбранной причёски рядом с вкладками кожи. */
.hair-current {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.25rem 0.3rem 0.25rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
  font-size: 0.88rem;
  font-weight: 600;
}

.hair-current[hidden] {
  display: none;
}

.hair-current-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.hair-current-clear:hover {
  background: var(--line);
  color: var(--ink);
}

.hair-current-clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .hair-spinner-fill {
    animation: none;
    stroke-dashoffset: 25;
  }

  .hair-head-toggle::after,
  .hair-option,
  .hair-pick,
  .hair-tab {
    transition: none;
  }
}

@media (max-width: 640px) {
  .hair-showcase {
    padding: 0.9rem;
  }

  /* Лента причёсок — свой горизонтальный скролл, страница не уезжает вбок. */
  .hair-strip {
    display: flex;
    gap: 0.6rem;
    max-width: 100%;
    padding-bottom: 0.4rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .hair-card {
    flex: 0 0 min(40vw, 9.5rem);
    scroll-snap-align: start;
  }
}

@media (max-width: 480px) {
  .hair-grid,
  .hair-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Кнопка «Сгенерировать» всегда под большим пальцем, пока идёт выбор.
     Справа остаётся место под плавающую кнопку чата. */
  .hair-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.6rem 5rem 0.7rem 0.1rem;
    background: rgb(255 255 255 / 94%);
    border-top: 1px solid var(--line);
  }

  .hair-count {
    font-size: 0.9rem;
  }
}

/* Выбор причёсок после оплаты: вкладки «Женские / Мужские» и кнопка «Поменять
   причёску» в одной строке; кнопка той же высоты и на всё оставшееся место. */
.hair-choose-head {
  /* Вкладки и кнопка остаются на виду, пока прокручиваются карточки. */
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  margin: 0 0 0.25rem;
  padding: 0.1rem 0 0.5rem;
  background: var(--card);
}

/* Первая строка карточек: запас сверху под внешнюю рамку выбранной карточки. */
.hair-showcase.is-panel .hair-panel .hair-grid {
  padding-top: 0.3rem;
}

.hair-choose-head .hair-tabs {
  flex: 0 0 auto;
  margin: 0;
}

.hair-submit {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0 1rem;
  font-size: 0.92rem;
  white-space: nowrap;
}

.hair-showcase.is-panel .hair-body {
  margin: 0 -0.75rem 0 -0.3rem;
}

.hair-showcase.is-panel .hair-lead {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

/* «Дождитесь…», «Готово!»: крупный чёрный текст с запасом сверху и снизу. */
.hair-showcase.is-panel .hair-lead.hair-lead-wait {
  margin: 0 0 1.2rem;
  padding-top: 0.7rem;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
}

/* «Выбрано N из 3» на экране не показываем; для скринридеров живая область остаётся. */
.hair-showcase.is-panel .hair-count {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Карточки выбора без подписей (для скринридеров остаются); выбранная — широкая
   зелёная рамка вместо кружка с галочкой. */
.hair-showcase.is-panel .hair-option-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hair-option:hover:not([aria-disabled="true"]),
.hair-option[aria-pressed="true"] {
  border-color: #00ba00;
}

.hair-option[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #00ba00;
}

@media (max-width: 480px) {
  /* Кнопка «Поменять причёску» — отдельной строкой под вкладками. */
  .hair-choose-head {
    flex-wrap: wrap;
  }

  .hair-submit {
    flex: 1 1 100%;
    min-height: 2.75rem;
  }
}

/* Карточки выбора в панели: четыре в ряд, 8 причёсок — две ровные строки на всю рамку. */
.hair-showcase.is-panel .hair-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 480px) {
  .hair-showcase.is-panel .hair-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Телефон: панель причёсок не прокручивается внутри себя. Вложенный скролл на 80vh
   перехватывал жест, и страница не опускалась дальше; теперь панель растёт по
   содержимому, а страницу двигает сам браузер. Шапка с вкладками и «Применить»
   прилипает под шапкой сайта (.top, 64px). overflow не hidden/auto: иначе sticky
   привяжется к панели, а не к странице. */
@media (max-width: 820px) {
  .result-side-hair,
  .result-gallery.is-print .result-side-hair,
  .result-gallery.is-print .result-side-hair:has(.hair:not([data-state="choose"])) {
    height: auto;
  }

  .hair-showcase.is-panel {
    overflow: visible;
  }

  .hair-showcase.is-panel > .hair-body,
  .hair-showcase.is-panel > .hair-showcase-body {
    overflow: visible;
  }

  .hair-choose-head {
    top: 64px;
  }
}

.staff-ratings .staff-ratings-card {
  margin: 0 0 var(--staff-block-gap, 1rem);
}

.staff-ratings .staff-ratings-card h2 {
  margin: 0 0 var(--staff-title-gap, 0.75rem);
}

.staff-ratings .staff-ratings-card .muted {
  margin: 0 0 0.75rem;
}

.staff-ratings .staff-filters {
  margin: 0 0 var(--staff-block-gap, 1rem);
}

.staff-ratings-thumb {
  display: block;
  width: 64px;
  height: auto;
  border-radius: 6px;
}

/* Касание: зоны нажатия не меньше 44px, сам вид элементов не меняется */
@media (pointer: coarse), (max-width: 640px) {
  input[type="checkbox"] {
    width: 1.4rem;
    height: 1.4rem;
    flex: 0 0 auto;
    margin: 0;
  }

  .nav-go,
  .nav-menu,
  .nav-link { min-height: 44px; }

  .cookie-help,
  .examples-dot { position: relative; }

  .cookie-help::after {
    content: "";
    position: absolute;
    inset: -0.55rem;
  }

  .examples-dot::after { inset: -0.75rem; }

  .faq summary { min-height: 2.75rem; }

  .foot-legal a,
  .foot a { display: inline-block; padding-block: 0.4rem; }

  .foot-legal li { margin: 0; }
}

/* «Мои фото», пустой список: на телефоне кнопка короче — «Обработать» */
@media (max-width: 640px) {
  .photos-empty-more { display: none; }
}

/* До оплаты кадр лежит в белой рамке без обводки, под ним — компактная автопроверка в синем градиенте, как карточка «Остался последний шаг» (_board_check.html). */
.result-gallery .preview-doc--framed {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.preview-doc--framed .preview-photo {
  flex: 1;
  min-height: 0;
}

.preview-doc--framed .preview-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Карточка «Остался последний шаг»: отступ над заголовком, автопроверка под подзаголовком, оплата прижата вниз. */
.bo--main {
  justify-content: flex-start;
}

.bo--main .bo-title {
  margin-top: 0.3em;
}

.bo--main .photo-check {
  margin-top: 0.6em;
}

.bo--main .bo-foot {
  margin-top: auto;
}

/* Автопроверка в тёмной карточке «Остался последний шаг»: всё белое, без плашки; текст слева, кольцо справа. */
.bo--dark .photo-check-card {
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
}

.bo--dark .photo-check-text {
  order: 1;
}

.bo--dark .photo-check-ring {
  order: 2;
}

.bo--dark .photo-check-more {
  display: none;
}

.bo--dark .photo-check-ring circle {
  stroke-width: 1.6;
}

.bo--dark .photo-check-ring .ring-retry {
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Наведение без тени: кольцо и текст чуть увеличиваются. */
.bo--dark button.photo-check-card:hover {
  box-shadow: none;
}

.bo--dark .photo-check-ring,
.bo--dark .photo-check-text {
  transition: transform 450ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.bo--dark .photo-check-text {
  transform-origin: left center;
}

.bo--dark .photo-check-ring {
  margin-right: 1.1rem;
  transform-origin: left center;
}

.bo--dark button.photo-check-card:hover .photo-check-ring {
  transform: scale(1.2);
}

.bo--dark button.photo-check-card:hover .photo-check-text {
  transform: scale(1.05);
}

.bo--dark .photo-check-ring circle {
  stroke-width: 2.5;
}

.bo--dark .photo-check-ring .ring-bg {
  stroke: rgb(255 255 255 / 30%);
}

.bo--dark .photo-check-ring .ring-fg {
  stroke: #fff;
}

.bo--dark .photo-check-ring .ring-num,
.bo--dark .photo-check-title,
.bo--dark .photo-check-state {
  fill: #fff;
  color: #fff;
}


.bo--dark .photo-check-more {
  color: #fff;
}

.preview-doc--framed .preview-photo {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0;
}

.photo-check {
  display: block;
  padding: 0;
}

.photo-check-card {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: calc(var(--radius) - 8px);
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: left;
}

button.photo-check-card {
  cursor: pointer;
  transition: box-shadow 160ms ease;
}

button.photo-check-card:hover {
  box-shadow: var(--btn-hover-shadow);
}

button.photo-check-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.photo-check-ring {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
}

.photo-check-ring circle {
  fill: none;
  stroke-width: 4;
}

.photo-check-ring .ring-bg {
  stroke: #d6e8fb;
}

.photo-check-ring .ring-fg {
  stroke: var(--accent);
  stroke-linecap: round;
}

.photo-check-ring.has-fail .ring-fg {
  stroke: var(--st-warn-solid);
}

.photo-check-ring .ring-num {
  fill: var(--accent);
  font-family: var(--display);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.photo-check-text {
  display: grid;
  flex: 1;
  gap: 0.15rem;
  min-width: 0;
}

.photo-check-title {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--display);
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.15;
}

.photo-check-state {
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
}

.photo-check-state.has-fail {
  color: var(--st-warn);
}

.photo-check-more {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--accent);
  transition: transform 160ms ease;
}

button.photo-check-card:hover .photo-check-more {
  transform: translateX(0.15rem);
}

/* ===== После оплаты: строка рамок под кадром и листами (_result.html) =====
   Три рамки с теми же долями, что кадр и два листа: 7 / 6 / 6. «Кожа без акне»,
   «Смена причёски», «Макияж»; лента вариантов и баланс — под ними на всю ширину.
   Блок [data-hair] и его обёртки без собственной вёрстки: его целиком заменяет
   app.js, а рамки должны стать ячейками сетки .tools-row. */
.tools-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--gap);
  align-items: stretch;
  min-width: 0;
}

.tools-row > .hair,
.tools-row .hair-showcase.is-panel,
.tools-row .hair-body {
  display: contents;
}

.tool-frame {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  box-sizing: border-box;
  min-width: 0;
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--bg-2);
}

.tool-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.tool-head b {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.tool-head small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.tool-frame .btn {
  width: 100%;
  margin-top: auto;
}

/* Кожа: свой кадр и переключатель «Обычная обработка / Улучшенная кожа». */
.tool-skin-photo {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
}

.tool-skin-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
}

.tool-frame--skin .skin-switch {
  display: grid;
  gap: 0.6rem;
}

.tool-frame--skin .skin-tabs {
  width: 100%;
}

.tool-frame--skin .skin-offer {
  display: grid;
  gap: 0.5rem;
}

/* Макияж: «Было» и три уровня плитками 2×2. */
.tool-makeup {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  align-content: start;
}

.tool-tile {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  font: inherit;
  cursor: pointer;
  aspect-ratio: 35 / 45;
  transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

figure.tool-tile {
  cursor: default;
}

button.tool-tile:hover {
  transform: scale(1.02);
}

button.tool-tile:active {
  transform: scale(0.98);
}

.tool-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
}

.tool-tile > span,
.tool-tile > figcaption {
  position: absolute;
  left: 0.4rem;
  bottom: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 94%);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
}

button.tool-tile[aria-pressed="true"] {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

button.tool-tile:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Причёска: выбор из набора внутри рамки, прокручивается сетка. Строка высотой
   с соседние рамки; сетка не растягивает её (flex-basis 0). */
.tool-frame--hair .hair-choose {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 22rem;
}

.tool-frame--hair .hair-choose-head {
  display: contents;
}

.tool-frame--hair .hair-tabs {
  order: 1;
  margin: 0;
  width: 100%;
}

.tool-frame--hair .hair-tab {
  flex: 1 1 0;
  padding: 0.45rem 0.5rem;
  font-size: 0.82rem;
}

.tool-frame--hair .hair-lead {
  order: 2;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.tool-frame--hair .hair-panel {
  order: 3;
  flex: 1 1 0;
  min-height: 0;
  padding: 0.2rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

.tool-frame--hair .hair-panel[hidden] {
  display: none;
}

.tool-frame--hair .hair-submit {
  order: 4;
  flex: 0 0 auto;
  width: 100%;
  min-height: 2.89rem;
  margin-top: 0;
  padding: 0.95rem 1.2rem;
  font-size: 0.95rem;
}

.tool-frame--hair .hair-grid,
.tool-frame--hair .hair-panel .hair-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}

.tool-frame--hair .hair-option {
  border-width: 2px;
  border-radius: 12px;
}

.tool-frame--hair .hair-option-label {
  padding: 0.3rem 0.4rem 0.4rem;
  font-size: 0.78rem;
}

/* Баланс, лента вариантов и подсказки: под рамками на всю ширину строки. */
.tool-strip {
  grid-column: 1 / -1;
  min-width: 0;
}

.tool-strip:empty {
  display: none;
}

@media (max-width: 820px) {
  .tools-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .tool-frame--hair .hair-choose {
    min-height: 0;
  }

  .tool-frame--hair .hair-panel {
    overflow: visible;
  }

  .tool-skin-photo {
    aspect-ratio: 35 / 45;
    max-width: 22rem;
  }
}

.tool-frame--hair .hair-submit,
.tool-frame--hair .hair-submit:hover {
  background: var(--accent);
  color: #fff;
}

.tool-frame--hair .hair-submit:disabled {
  opacity: 0.5;
  cursor: default;
}

/* «Повторить» до оплаты: значок в правом верхнем углу кадра на белом фоне
   (низ кадра занимает оценка). */
.preview-photo .retry-icon {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.preview-photo .retry-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.preview-photo .retry-icon:hover {
  border-color: var(--muted);
  box-shadow: var(--btn-hover-shadow);
}

.preview-photo .retry-icon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Подтверждение «Повторить»: значок возврата вместо корзины. */
.confirm-icon .ic-retry {
  display: none;
}

.confirm-dialog.is-retry .confirm-icon .ic-trash {
  display: none;
}

.status-icon.confirm-icon .ic-retry,
.confirm-dialog.is-retry .confirm-icon .ic-retry {
  width: 1.6rem;
  height: 1.6rem;
}

.confirm-dialog.is-retry .confirm-icon .ic-retry {
  display: block;
}



/* ===== После оплаты: кадр, «Готовые файлы», справа кадрирование и «Нужно другое фото?» =====
   Кадр держит пропорцию 35:45 и задаёт высоту строки, синий блок и правая колонка
   подгоняются под неё (height: 0 + min-height: 100%). */
.done-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.05fr;
  gap: var(--gap, 16px);
  align-items: start;
}

.done-shot {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 35 / 45;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #eaf3ff;
}

.done-shot img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.done-files,
.done-side {
  height: 0;
  min-height: 100%;
  min-width: 0;
}

.done-files {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 22px 22px 10px;
  border-radius: var(--radius);
  background: var(--blue-grad);
  color: #fff;
}

.done-h {
  margin: 0;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.done-sub {
  margin: 4px 0 0;
  color: #d6e8ff;
  font-size: 0.875rem;
}

.done-zip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  margin: 1rem 0 0.5rem;
  border-radius: 999px;
  background: #fff;
  color: var(--accent-2);
  font-size: 0.97rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms, box-shadow 160ms;
}

.done-zip:hover {
  box-shadow: var(--btn-hover-shadow-on-blue);
}

.done-zip:active {
  transform: scale(0.98);
}

.done-zip svg {
  width: 1.25rem;
  height: 1.25rem;
}

.done-file {
  display: grid;
  flex: 1;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  width: 100%;
  padding: 0 4px 0 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.done-file + .done-file {
  border-top: 1px solid rgb(255 255 255 / 22%);
}

.done-file-ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgb(255 255 255 / 18%);
  color: #d6e8ff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.done-file-ic svg {
  width: 26px;
  height: 26px;
}

.done-file-text b {
  display: block;
  font-size: 0.97rem;
  font-weight: 700;
}

.done-file-text span {
  color: #d6e8ff;
  font-size: 0.8rem;
}

.done-file > svg {
  width: 1.4rem;
  height: 1.4rem;
  color: #fff;
  transition: transform 160ms;
}

.done-file:hover > svg {
  transform: translateY(2px);
}

/* Стрелка подсказывает действие при наведении и фокусе с клавиатуры. */
.done-arrow {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  background: #fff;
  -webkit-mask: url("/static/icons/arrow-sharp.svg") center / contain no-repeat;
  mask: url("/static/icons/arrow-sharp.svg") center / contain no-repeat;
  transition: transform 160ms ease;
}

.done-mail:hover .done-arrow,
.done-mail:focus-visible .done-arrow {
  transform: translateY(2px);
}

.done-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--gap, 16px);
}

.done-grid.no-crop .done-side {
  grid-template-rows: 1fr;
}

.done-card {
  display: grid;
  align-content: center;
  gap: 0.35rem;
  box-sizing: border-box;
  min-height: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.done-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.done-card-h {
  margin: 0;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.done-crop {
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: 16px;
}

.done-crop-frame {
  position: relative;
  width: 76px;
  height: 96px;
  overflow: hidden;
  border-radius: 12px;
  background: #cfe3fb;
  box-shadow: 0 4px 12px rgb(29 29 31 / 25%);
}

.done-crop-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 14%;
}

.done-crop-frame::after {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 86' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%230071e3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 15V4Q2 2 4 2H15M51 2h11q2 0 2 2v11M2 71v11q0 2 2 2h11M51 84h11q2 0 2-2V71'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.done-crop > div {
  display: grid;
  gap: 0.35rem;
}

.done-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: fit-content;
  min-height: 2.25rem;
  padding: 0 0.9rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms, box-shadow 160ms;
}

.done-btn:hover {
  box-shadow: var(--btn-hover-shadow);
}

.done-btn:active {
  transform: scale(0.98);
}

.done-btn svg {
  width: 1.1rem;
  height: 1.1rem;
}

.done-btn.is-outline {
  margin-top: 0.4rem;
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent-2);
}

.done-btn.is-soft {
  background: var(--st-info-bg);
  color: var(--accent-2);
}

.done-more-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.4rem 0 0.1rem;
}

.done-card p.done-keep {
  font-size: 0.78rem;
}

@media (max-width: 900px) {
  .done-grid {
    grid-template-columns: 1fr;
  }

  .done-files,
  .done-side {
    height: auto;
    min-height: 0;
  }

  .done-file {
    min-height: 4rem;
  }

  .done-side,
  .done-grid.no-crop .done-side {
    grid-template-rows: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .done-zip,
  .done-btn,
  .done-file > svg,
  .done-arrow {
    transition: none;
  }

  .done-mail:hover .done-arrow,
  .done-mail:focus-visible .done-arrow {
    transform: none;
  }
}