/* Страницы сайта на «Проявке» (ТЗ этапы 2–6). Подключать после tokens.css и
   components.css: значения берутся только из переменных tokens.css, базовые
   детали (кнопки, поля, чипы, карточка сюжета, меню, статусы, плитки) — из
   components.css. Здесь — раскладка страниц и то, чего в компонентах нет.
   Перенесено из прототипов заказчика 16–17.10; классы — без префиксов. */

/* ================================================================ основа */

body { padding-bottom: 0; }
[hidden] { display: none !important; }
a { color: var(--accent-link); }
button { font: inherit; }
.wrap { inline-size: 100%; max-inline-size: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--app { max-inline-size: calc(var(--col-app) + 2 * var(--gutter)); }
.sr-only { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.muted { color: var(--text-muted); font-size: var(--fs-sm); }
.small { font-size: var(--fs-xs); }
.stack { display: grid; gap: var(--sp-3); }
.control:not(:disabled):active { transform: scale(.98); }
.control { transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.control--sm { min-block-size: 40px; padding: 0 var(--sp-4); inline-size: auto; font-size: 15px; }
.control.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.control.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 20px; block-size: 20px; border-radius: 50%; border: 2px solid currentColor; border-color: var(--control-text, var(--text)); border-inline-end-color: transparent; animation: spin .7s linear infinite; }
.icon-btn { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 16px; cursor: pointer; text-decoration: none; }
.spinner { display: inline-block; inline-size: 20px; block-size: 20px; border-radius: 50%; border: 2px solid var(--line-strong); border-inline-end-color: transparent; animation: spin .7s linear infinite; }
.spinner--sm { inline-size: 18px; block-size: 18px; }
.spinner--xs { inline-size: 14px; block-size: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
.notice { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: color-mix(in srgb, var(--peach) 22%, var(--surface)); font-size: var(--fs-sm); }
.notice--err { background: color-mix(in srgb, var(--err-mark) 18%, var(--surface)); }
.notice--ok { background: color-mix(in srgb, var(--ok-mark) 22%, var(--surface)); }

/* ================================================================ шапка */

.site-header { display: block; min-block-size: 0; padding: 0; border: 0; background: var(--bg); }
.site-header--sticky { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); border-block-end: 1px solid var(--line); }
.site-header--stage { background: transparent; }
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-block-size: 64px; }
.site-header .wordmark { font-size: 17px; white-space: nowrap; }
.site-header .wordmark svg { inline-size: 28px; block-size: 28px; }
.site-nav { display: none; gap: var(--sp-6); font-size: 15px; }
.site-nav__link { color: var(--text-muted); text-decoration: none; }
.site-nav__link:hover, .site-nav__link.is-active { color: var(--text); }
.site-header__auth { display: flex; gap: var(--sp-2); }
@media (max-width: 430px) {
  .site-header .control--sm { padding: 0 10px; font-size: 14px; }
  .site-header__auth { gap: 6px; }
  .site-header .wordmark { font-size: 15px; }
  .site-header .wordmark svg { inline-size: 24px; block-size: 24px; }
}
@media (max-width: 370px) { .site-header .wordmark { font-size: 13px; gap: 6px; } .site-header .control--sm { padding: 0 8px; font-size: 13px; } }
@media (min-width: 1024px) { .site-nav { display: flex; } }

/* ================================================================ подвал */

.site-footer { background: var(--surface); border-block-start: 1px solid var(--line); padding-block: var(--sp-10) var(--sp-8); font-size: var(--fs-sm); color: var(--text-muted); }
body.has-sticky-cta .site-footer { padding-block-end: calc(var(--sp-16) + 40px); }
.site-footer__grid { display: grid; gap: var(--sp-6); }
.site-footer__brand { display: grid; gap: var(--sp-2); align-content: start; }
.site-footer__brand .wordmark { font-size: 17px; }
.site-footer__brand .wordmark svg { inline-size: 26px; block-size: 26px; }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.site-footer__contacts { display: grid; gap: 10px; align-content: start; }
.pay-marks { display: flex; gap: 6px; flex-wrap: wrap; }
.pay-marks span { padding: 3px 8px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.site-footer__copy { margin-block-start: var(--sp-8); font-size: var(--fs-xs); }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }

/* ================================================================ cookie и тост */

.cookie { position: fixed; inset-inline: var(--gutter); inset-block-end: calc(var(--sp-4) + var(--safe-b)); z-index: var(--z-toast); display: flex; align-items: center; gap: var(--sp-3); justify-content: space-between; max-inline-size: 480px; margin-inline: auto; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--stage-1); color: var(--stage-text); font-size: 13px; box-shadow: var(--shadow-sheet-stage); }
body.has-sticky-cta .cookie, body[data-area="cabinet"] .cookie { inset-block-end: calc(80px + var(--safe-b)); }
.cookie.is-hidden { display: none; }
/* Открытое окно важнее: строка cookie иначе ляжет поверх кнопки шторки. */
body.modal-open .cookie { display: none; }
.cookie a { color: var(--peach); }
.cookie button { flex: none; min-block-size: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--peach); color: var(--on-peach); font: 600 14px var(--font-text); cursor: pointer; }
.toast { position: fixed; inset-inline: 0; inset-block-end: calc(var(--tabbar-h) + 24px + var(--safe-b)); margin-inline: auto; inline-size: max-content; max-inline-size: calc(100% - 32px); padding: 10px 16px; border-radius: 12px; background: var(--stage-1); color: var(--stage-text); font-size: 14px; z-index: var(--z-toast); opacity: 0; transform: translateY(8px); transition: opacity var(--dur-base), transform var(--dur-base); pointer-events: none; }
.toast.is-open { opacity: 1; transform: none; }

/* ================================================================ главная */

.first { background: var(--stage-0); color: var(--stage-text); padding-block-end: var(--sp-6); }
.first-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
.first-text { display: none; }
.hero { position: relative; aspect-ratio: 4 / 5; max-block-size: calc(100svh - 150px); min-block-size: 440px; inline-size: 100%; margin-inline: auto; border-radius: var(--r-xl); overflow: hidden; background: var(--stage-1); isolation: isolate; }
.hero-slides img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-develop) var(--ease-out); }
.hero-slides img.on { opacity: 1; z-index: 1; }
.hero::after { content: ""; position: absolute; inset: 0; background: var(--vignette); z-index: 2; pointer-events: none; }
.bars { position: absolute; inset-block-start: var(--sp-3); inset-inline: var(--sp-3); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; z-index: 3; }
.bar { block-size: 3px; border-radius: 2px; background: rgba(251,244,239,.35); overflow: hidden; }
.bar i { display: block; block-size: 100%; inline-size: 0; background: var(--stage-text); }
.bar.done i { inline-size: 100%; }
.bar.run i { animation: fill var(--dur-story) linear forwards; }
@keyframes fill { to { inline-size: 100%; } }
.tap { position: absolute; inset-block: 0; inline-size: 30%; z-index: 3; background: transparent; border: 0; cursor: pointer; }
.tap--prev { inset-inline-start: 0; } .tap--next { inset-inline-end: 0; }
.hero-caption { position: absolute; inset-inline: var(--sp-5); inset-block-end: var(--sp-5); z-index: 3; display: grid; gap: var(--sp-2); }
.hero-caption .caps { color: rgba(251,244,239,.8); }
.hero-title { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-display); font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.25rem); color: var(--stage-text); max-inline-size: 13ch; text-wrap: balance; }
.facts { font-size: var(--fs-sm); color: rgba(251,244,239,.85); }
.first-cta { margin-block-start: var(--sp-4); }

section.block { padding-block: var(--sp-12); }
section.block + section.block { border-block-start: 1px solid var(--line); }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-block-end: var(--sp-6); }
.block-head h2 { font-size: var(--fs-h2); margin: 0; }
.block-head a { color: var(--accent-link); font-weight: 500; text-decoration: none; white-space: nowrap; }
.block-cta { display: flex; justify-content: center; margin-block-start: var(--sp-8); }
.grid-stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }

/* карточка сюжета-кнопка (сетка, похожие) */
.shoot-card { display: grid; gap: 6px; align-content: start; text-align: start; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font: inherit; min-inline-size: 0; }
.shoot-card .story-frame { display: block; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.shoot-card:hover .story-frame { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.shoot-card .story-title { font-size: var(--fs-body); }
.shoot-card .story-meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shoot-card--mini .story-title { font-size: 13px; }

/* как это работает */
.steps { display: grid; gap: var(--sp-4); }
.step { display: grid; grid-template-columns: 128px 1fr; gap: var(--sp-4); align-items: center; }
.step h3 { font-size: var(--fs-lead); font-weight: 600; margin: 0; }
.step p { font-size: var(--fs-sm); color: var(--text-muted); margin-block-start: var(--sp-1); }
.mini { aspect-ratio: 4 / 5; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); overflow: hidden; display: grid; padding: 10px; gap: 6px; align-content: start; }
.mini--upload { place-items: center; align-content: center; text-align: center; font-size: 11px; color: var(--text-muted); gap: 8px; }
.mini--upload img { inline-size: 72%; aspect-ratio: 1; block-size: auto; border-radius: 14px; object-fit: cover; outline: 2px solid var(--ok-mark); outline-offset: 3px; }
.mini--grid { grid-template-columns: 1fr 1fr; }
.mini--grid img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
.mini--grid img.sel { outline: 2px solid var(--peach); }
.mini--film { background: var(--stage-0); border-color: var(--stage-0); grid-template-columns: repeat(5, 1fr); align-content: end; }
.mini--film .big { grid-column: 1 / -1; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; }
.mini--film img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.cell { aspect-ratio: 4 / 5; border-radius: 3px; overflow: hidden; background: var(--stage-2); }
.develop { animation: develop 6s var(--ease-in-out) infinite; }
.cell:nth-child(3) img { animation-delay: .6s; } .cell:nth-child(4) img { animation-delay: 1.2s; } .cell:nth-child(5) img { animation-delay: 1.8s; } .cell:nth-child(6) img { animation-delay: 2.4s; }
@keyframes develop { 0% { filter: blur(6px) brightness(.6); opacity: .3; } 30%, 85% { filter: none; opacity: 1; } 100% { filter: blur(6px) brightness(.6); opacity: .3; } }

/* цены */
.prices { display: grid; gap: var(--sp-4); }
.price-card { display: grid; gap: var(--sp-3); padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.price-card h3 { font-size: var(--fs-lead); font-weight: 600; margin: 0; }
.price-big { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; line-height: 1.1; font-feature-settings: var(--num); }
.price-card ul { margin: 0; padding-inline-start: 1.1em; display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--text-muted); }
.price-table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.price-table td { padding: 8px 0; border-block-end: 1px solid var(--line); }
.price-table td:last-child { text-align: end; color: var(--text-muted); white-space: nowrap; }
.price-table b { font-weight: 600; color: var(--text); }

/* фото и вопросы */
.promises { display: grid; gap: var(--sp-3); }
.promise { padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.promise h3 { font-size: var(--fs-body); font-weight: 600; margin: 0; }
.promise p { font-size: var(--fs-sm); color: var(--text-muted); margin-block-start: var(--sp-1); }
details.qa { border-block-end: 1px solid var(--line); }
details.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); min-block-size: 56px; cursor: pointer; font-weight: 600; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after { content: "+"; flex: none; font-size: 22px; color: var(--text-muted); transition: transform var(--dur-base) var(--ease-out); }
details.qa[open] summary::after { transform: rotate(45deg); }
details.qa p { padding-block-end: var(--sp-4); color: var(--text-muted); font-size: var(--fs-sm); max-inline-size: 60ch; }

/* липкая кнопка */
.sticky-cta { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky); padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + var(--safe-b)); background: color-mix(in srgb, var(--paper-0) 92%, transparent); backdrop-filter: blur(8px); border-block-start: 1px solid var(--line); transform: translateY(110%); transition: transform var(--dur-sheet) var(--ease-out); }
.sticky-cta.show { transform: none; }
.sticky-cta .control { max-inline-size: 480px; margin-inline: auto; display: flex; }

/* появление при прокрутке */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

@media (min-width: 1024px) {
  .first { padding-block-end: var(--sp-12); }
  .first-grid { grid-template-columns: 6fr 5fr; align-items: center; gap: var(--sp-12); padding-block-start: var(--sp-6); }
  .first-text { display: grid; gap: var(--sp-5); justify-items: start; }
  .first-text h1 { font-size: 3rem; color: var(--stage-text); margin: 0; }
  .first-text .lead { font-size: 1.25rem; color: var(--stage-muted); max-inline-size: 30ch; }
  .first-text .control { inline-size: auto; padding-inline: var(--sp-8); }
  .hero { max-block-size: 760px; }
  .hero-caption .hero-title, .hero-caption .facts, .first-cta { display: none; }
  .grid-stories { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
  .step { grid-template-columns: 1fr; }
  .mini { max-inline-size: 260px; }
  .prices { grid-template-columns: 1fr 1fr; }
  .promises { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================================ окно-шторка */

.modal { position: fixed; inset: 0; z-index: var(--z-sheet); display: none; }
.modal.is-open { display: block; }
body.modal-open { overflow: hidden; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(51,42,37,.45); animation: fade var(--dur-sheet) var(--ease-out); }
.modal__dialog { position: absolute; inset-inline: 0; inset-block-end: 0; max-block-size: 92svh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--shadow-sheet); animation: sheet-up var(--dur-sheet) var(--ease-out); }
.modal__head { position: relative; display: flex; justify-content: center; padding-block: var(--sp-2); min-block-size: 44px; flex: none; }
.modal__head .handle { margin-block: 4px 0; }
.modal__close { position: absolute; inset-inline-end: var(--gutter); inset-block-start: 6px; }
.modal__scroll { overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-2) var(--gutter) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1 1 auto; min-block-size: 0; }
/* Колонка, а не сетка: сетка ужимала ряд карусели, и пример терял пропорцию 4:5. */
.modal__scroll > * { flex: none; }
.modal__foot { flex: none; padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + var(--safe-b)); border-block-start: 1px solid var(--line); background: var(--bg); display: grid; gap: 6px; }
.modal__foot small { text-align: center; font-size: 12px; color: var(--text-muted); }
.modal__foot form { display: grid; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* шаги окна сюжета */
#shoot-modal [data-ns-shoot-step="2"] { display: none; }
#shoot-modal.is-step-2 [data-ns-shoot-step="1"] { display: none; }
#shoot-modal.is-step-2 .modal__scroll[data-ns-shoot-step="2"] { display: flex; }
#shoot-modal.is-step-2 .modal__foot[data-ns-shoot-step="2"] { display: grid; }

/* Шаг 2 — экран «Фото» из макета «Путь клиента»: на телефоне во весь экран,
   сверху «←» и плашка сюжета вместо ручки и крестика. */
#shoot-modal .modal__back, #shoot-modal .modal__plaque { display: none; }
#shoot-modal.is-step-2 .modal__head { justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--gutter); }
#shoot-modal.is-step-2 .modal__head .handle, #shoot-modal.is-step-2 .modal__close { display: none; }
#shoot-modal.is-step-2 .modal__back { display: grid; }
#shoot-modal.is-step-2 .modal__plaque { display: inline-flex; min-inline-size: 0; }
.modal__plaque img { inline-size: 28px; block-size: 34px; border-radius: 6px; object-fit: cover; flex: none; }
.modal__plaque > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) { #shoot-modal.is-step-2 .modal__dialog { inset-block-start: 0; max-block-size: none; border-radius: 0; box-shadow: none; } }
#shoot-modal.is-step-2 .modal__foot { border-block-start: 0; }
#shoot-modal [data-ns-shoot-step="2"] .shoot-title { font-family: var(--font-display); font-size: 28px; }

.carousel { display: flex; gap: var(--sp-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r-lg); }
.carousel::-webkit-scrollbar { display: none; }
.carousel .story-frame { flex: 0 0 100%; align-self: flex-start; scroll-snap-align: start; margin: 0; }
.dots-row { display: flex; justify-content: center; gap: 6px; min-block-size: 6px; }
.dots-row i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--line-strong); }
.dots-row i.on { background: var(--text); }
.shoot-title { font-family: var(--font-text); font-size: 22px; font-weight: 600; letter-spacing: normal; line-height: var(--lh-snug); margin: 0; }
.desc { color: var(--text-muted); font-size: var(--fs-sm); }
.modal .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); color: var(--text); }
.fact { padding: var(--sp-3) var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: 13px; text-align: center; color: var(--text-muted); }
.fact b { display: block; font-size: 15px; color: var(--text); }
.price-line { font-size: var(--fs-sm); color: var(--text-muted); }
.similar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }

/* фото: зона загрузки, превью, подсказки */
.drop { display: grid; gap: var(--sp-3); justify-items: center; padding: var(--sp-6) var(--sp-4); border: 2px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); text-align: center; cursor: pointer; }
.drop.is-over, .slot.is-over { border-color: var(--ring); background: color-mix(in srgb, var(--peach) 12%, var(--surface)); }
.drop .control { inline-size: 100%; pointer-events: none; }
.drop label.control { pointer-events: auto; cursor: pointer; }
.drop__title { font-size: var(--fs-sm); font-weight: 500; }
.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.thumbs__cell--extra { display: none; }
.thumb { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.thumb--empty { border-style: dashed; background: transparent; }
/* Пустые ячейки не показываем — как в макете, видны только загруженные фото. */
.thumbs__cell:has(.thumb--empty) { display: none; }
.thumb--uploading img, .thumb--removing img { opacity: .45; }
.thumb__loader { position: absolute; inset: 0; display: grid; place-items: center; }
.thumb__remove { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; display: grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%; border: 0; background: rgba(51,42,37,.7); color: #fff; font-size: 11px; cursor: pointer; }
.thumb--slot { aspect-ratio: 4 / 5; }
.upload-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.upload-status__file { color: var(--text-muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.slot-box { display: grid; gap: var(--sp-2); align-content: start; }
.slot { display: grid; place-items: center; aspect-ratio: 4 / 5; padding: var(--sp-3); border: 2px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); font-size: 13px; color: var(--text-muted); text-align: center; cursor: pointer; }
.tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.tip { display: grid; gap: 4px; font-size: 12px; text-align: center; }
.tip__pic { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--paper-line); }
.tip__pic img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.tip__pic--dark img { filter: brightness(.3); }
.tip__pic--blur img { filter: blur(3px); }
.tip__mark { position: absolute; inset-block-end: 4px; inset-inline-end: 4px; display: grid; place-items: center; inline-size: 20px; block-size: 20px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff; }
.tip__mark--ok { background: var(--ok-mark); }
.tip__mark--no { background: var(--err-mark); }

@media (min-width: 768px) {
  .thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .thumbs__cell--extra { display: block; }
}
@media (min-width: 1024px) {
  .modal--sheet .modal__dialog { inset-inline-start: auto; inset-block: 0; inline-size: 480px; max-block-size: none; border-radius: var(--r-sheet) 0 0 var(--r-sheet); animation: sheet-side var(--dur-sheet) var(--ease-out); }
  .modal--sheet .modal__head .handle { visibility: hidden; }
  @keyframes sheet-side { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .develop { animation: none; }
  .modal__dialog, .modal__backdrop { animation: none; }
}

/* ================================================================ каталог */

.first--full { min-block-size: 100svh; }
.page-h1 { font-size: var(--fs-h2); margin-block: var(--sp-6) var(--sp-2); }
.page-lead { margin-block-end: var(--sp-4); }
.catalog { padding-block-end: var(--sp-12); }
.filters { display: grid; gap: var(--sp-3); padding-block-end: var(--sp-3); }
.seg { display: inline-flex; justify-self: start; max-inline-size: 100%; padding: 4px; gap: 2px; border-radius: 12px; background: var(--paper-line); overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg__btn { flex: none; min-block-size: 40px; padding-inline: 14px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: 500 15px var(--font-text); cursor: pointer; }
.seg__btn.is-active { background: var(--surface); box-shadow: 0 1px 3px rgba(51,42,37,.12); }
.chip.is-active { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-text); }
.grid-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); padding-block: var(--sp-4) var(--sp-6); }
.grid-catalog.is-loading { opacity: .5; transition: opacity var(--dur-base); }
.empty { padding: var(--sp-10) var(--sp-4); text-align: center; color: var(--text-muted); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.skeleton-card { aspect-ratio: 4 / 5; border-radius: var(--r-lg); background: linear-gradient(90deg, var(--paper-line) 25%, var(--surface) 50%, var(--paper-line) 75%); background-size: 200% 100%; animation: skeleton 1.4s linear infinite; }
@keyframes skeleton { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.load-more__note { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding-block: var(--sp-6); font-size: var(--fs-sm); color: var(--text-muted); }
.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding-block: var(--sp-4); }
.pager__btn { min-inline-size: 40px; min-block-size: 40px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); font: 500 15px var(--font-text); cursor: pointer; }
.pager__btn.is-active { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-text); }
.pager__btn--gap { border: 0; background: none; cursor: default; }
@media (min-width: 1024px) {
  .grid-catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
  .chips { flex-wrap: wrap; overflow: visible; }
}

/* ================================================================ вход */

.auth-scene { position: relative; min-block-size: 100svh; display: flex; flex-direction: column; justify-content: flex-end; background: var(--stage-0); overflow: hidden; }
.auth-scene__bg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; filter: brightness(.55); }
.auth-scene__logo { position: absolute; inset-block-start: var(--sp-4); inset-inline-start: var(--gutter); z-index: 1; color: var(--stage-text); font-size: 17px; }
.auth-scene__logo svg { inline-size: 28px; block-size: 28px; }
.auth-sheet { position: relative; z-index: 1; display: grid; gap: var(--sp-3); margin-block-start: 96px; padding: var(--sp-3) var(--gutter) calc(var(--sp-5) + var(--safe-b)); background: var(--paper-0); color: var(--ink); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--shadow-sheet); }
.auth-sheet .handle { margin-block-end: 0; }
.auth-title { font-family: var(--font-text); font-size: 20px; font-weight: 600; letter-spacing: normal; line-height: var(--lh-snug); margin: 0; }
.seg--full { display: grid; grid-template-columns: 1fr 1fr; justify-self: stretch; }
.seg--full .seg__btn { display: grid; place-items: center; text-decoration: none; color: var(--ink-muted); font-weight: 600; font-size: 14px; }
.seg--full .seg__btn.is-active { color: var(--ink); }
.or { display: flex; align-items: center; gap: var(--sp-3); font-size: 13px; color: var(--text-muted); }
.or::before, .or::after { content: ""; flex: 1; block-size: 1px; background: var(--line); }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.45; cursor: pointer; }
.check input { inline-size: 22px; block-size: 22px; margin: 1px 0 0; accent-color: var(--cocoa-btn); }
.check.is-invalid { color: var(--err); }
.check.is-invalid input { outline: 2px solid var(--err-mark); outline-offset: 2px; }
.consent-note { font-size: 12px; color: var(--text-muted); }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); font-size: 13px; }
.tg-widget { display: flex; justify-content: center; }
@media (min-width: 1024px) {
  .auth-scene { justify-content: center; align-items: center; padding: var(--sp-16) var(--gutter); }
  .auth-sheet { inline-size: 100%; max-inline-size: 440px; margin: 0; border-radius: var(--r-xl); padding: var(--sp-6); }
  .auth-sheet .handle { display: none; }
}
/* Шторка входа прижата к низу экрана — строку cookie поднимаем наверх, иначе
   она перекрыла бы кнопки шторки. */
body.page-auth .cookie { inset-block-end: auto; inset-block-start: calc(var(--sp-3) + env(safe-area-inset-top, 0px)); }

/* ================================================================ проявка */

.screen-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-block-size: 56px; }
.screen-bar__title { font-weight: 600; }
.screen-bar__logo { flex: none; font-size: 15px; color: var(--text); white-space: nowrap; }
.screen-bar__logo svg { inline-size: 24px; block-size: 24px; }
.develop-screen { min-block-size: 100svh; display: flex; flex-direction: column; gap: var(--sp-4); padding-block-end: calc(var(--sp-6) + var(--safe-b)); }
.dev-frame { position: relative; aspect-ratio: 4 / 5; max-block-size: 52svh; border-radius: var(--r-lg); overflow: hidden; background: var(--stage-1); }
.dev-frame .lqip { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; filter: blur(22px) saturate(.9); transform: scale(1.15); opacity: .7; animation: breathe 2.4s var(--ease-in-out) infinite alternate; }
@keyframes breathe { from { opacity: .45; } to { opacity: .8; } }
.dev-pct { font-family: var(--font-display); font-size: 2rem; font-weight: 600; font-feature-settings: var(--num); }
.progress { block-size: 6px; border-radius: 3px; background: var(--stage-1); overflow: hidden; }
.progress__bar { block-size: 100%; inline-size: 0; background: var(--peach); transition: inline-size .18s linear; }
.film { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.film__cell { position: relative; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--stage-1); display: grid; place-items: center; color: var(--stage-muted); font-size: 18px; letter-spacing: 2px; }
.film__cell img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; filter: blur(5px); transform: scale(1.15); opacity: 0; transition: opacity var(--dur-develop); }
.film__cell.is-done img { opacity: 1; }
.film__cell.is-done span { visibility: hidden; }
.film__cell.is-done::after { content: "✓"; position: absolute; inset-block-end: 3px; inset-inline-end: 3px; display: grid; place-items: center; inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--ok-mark); color: #0c2a1d; font-size: 11px; font-weight: 700; letter-spacing: 0; }
.note-stage { font-size: 13px; color: var(--stage-muted); }

/* ================================================================ готово и оплата */

/* Экраны пути клиента (макет «Путь клиента»): полоса сверху, содержимое,
   кнопки внизу экрана. Колонка как у телефона и на компьютере. */
.screen { min-block-size: 100svh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); }
.screen > * { inline-size: 100%; max-inline-size: 480px; margin-inline: auto; }
.screen__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--gutter); }
.screen__title { font-weight: 600; }
.screen__spacer { inline-size: 40px; }
.screen__body { flex: 1; display: grid; align-content: start; gap: var(--sp-4); padding: var(--sp-2) var(--gutter) var(--sp-6); }
.screen__body--grow { display: flex; flex-direction: column; padding-block-end: 0; }
.screen__foot { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--gutter) calc(var(--sp-4) + var(--safe-b)); }
.screen__foot small { text-align: center; font-size: 12px; color: var(--text-muted); }
/* У экранов пути кнопка («Открыть 5 кадров», «Оплатить», «Продолжить») стоит у
   нижнего края окна — ровно там, где прибита строка cookie, и та её закрывала.
   Наверх строку не унести, как на шторке входа: там «✕». Поэтому здесь строка не
   прибита к окну, а стоит обычным блоком в конце страницы, под кнопкой. */
body:has(.screen__foot) .cookie { position: static; margin-block: 0 calc(var(--sp-4) + var(--safe-b)); }
/* …а под тёмным «Готово» без этого была бы светлая полоса фона страницы. */
html:has(.ready):not(:has(.pay-screen:target, .pay-screen.is-open)),
html:has(.ready):not(:has(.pay-screen:target, .pay-screen.is-open)) body { background: var(--stage-0); }
[data-surface="stage"] .icon-btn { background: transparent; border-color: var(--stage-line); color: var(--stage-text); }
.ready { background: var(--stage-0); color: var(--stage-text); }
.ready__rubric { color: var(--stage-muted); }
.ready__title { font-size: 28px; margin: 0; }
.ready__note { text-align: center; font-size: 12px; color: var(--stage-muted); }
.hero-blur { position: relative; aspect-ratio: 4 / 5; max-block-size: 60svh; border-radius: var(--r-lg); overflow: hidden; background: var(--stage-1); }
.hero-blur > img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: blur(16px); transform: scale(1.12); }
.lock { position: absolute; inset: 0; display: grid; place-items: center; }
.lock span { padding: 10px 14px; border-radius: 12px; background: rgba(59,48,43,.62); color: var(--stage-text); font-size: 14px; font-weight: 500; }
.hero-blur .before { z-index: 1; }
.blur-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.blur-thumbs__item { aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--stage-1); }
.blur-thumbs__item img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: blur(9px); transform: scale(1.15); }
/* Экран «Оплата» открывается кнопкой «Открыть 5 кадров» (#pay) на месте «Готово». */
.pay-screen { display: none; }
.pay-screen:target, .pay-screen.is-open { display: flex; }
.result:has(.pay-screen:target) .ready, .result:has(.pay-screen.is-open) .ready { display: none; }
.pay__title { font-size: 28px; margin: 0; }
.sum { display: grid; gap: 6px; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.sum__row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.sum__row b { font-family: var(--font-display); font-weight: 600; white-space: nowrap; font-feature-settings: var(--num); }
.sum__row s { margin-inline-end: 6px; font-family: var(--font-text); font-weight: 400; color: var(--text-muted); }
.pay-form { display: grid; gap: var(--sp-3); }
.pay-form__title { font-family: var(--font-text); font-size: 18px; font-weight: 600; letter-spacing: normal; margin: 0; }
.pay-form__safe { text-align: center; font-size: 12px; color: var(--text-muted); }
.pay-form__foot { display: grid; gap: var(--sp-2); }
.pay-form--screen { flex: 1; display: flex; flex-direction: column; gap: var(--sp-4); }
.pay-form--screen .pay-form__foot { margin-block-start: auto; padding-block: var(--sp-3) calc(var(--sp-4) + var(--safe-b)); }
.consents { display: grid; gap: var(--sp-3); }
.consent__p { display: block; }
.consent__p + .consent__p { margin-block-start: 4px; }

/* ================================================================ кабинет: каркас */

body[data-area="cabinet"] { padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); }
.cab-header .cab-nav { margin-inline-start: auto; }
.cab-header__right { display: flex; align-items: center; gap: var(--sp-2); }
.balance-chip { display: inline-flex; align-items: center; min-block-size: 36px; padding: 0 12px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--peach) 30%, var(--surface)); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; font-feature-settings: var(--num); }
.cab-new { display: none; }
.cab-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding-block: var(--sp-5) var(--sp-10); }
.cab-page--wide { max-inline-size: var(--container); }
.cab-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.cab-head h1 { font-size: 28px; margin: 0; }
.cab-section-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.cab-section-title h2 { font-family: var(--font-text); font-size: 18px; font-weight: 600; letter-spacing: normal; margin: 0; }
.empty-card { display: grid; gap: var(--sp-3); justify-items: center; padding: var(--sp-10) var(--sp-4); text-align: center; border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--text-muted); }
.empty-card b { color: var(--text); font-size: 18px; }
/* На телефоне шапки и подвала нет, как в макете: навигация — нижнее меню. */
@media (max-width: 1023px) { .cab-header, .cab-footer { display: none; } }
@media (min-width: 1024px) {
  body[data-area="cabinet"] { padding-bottom: 0; }
  /* подвал прижат к низу и на короткой странице */
  body[data-area="cabinet"] { display: flex; flex-direction: column; }
  body[data-area="cabinet"] > main { flex: 1 0 auto; align-content: start; }
  .cab-tabbar { display: none; }
  .cab-new { display: inline-flex; }
  .cab-header .site-header__row { gap: var(--sp-6); }
}

/* выпадающее меню (переключатель двойника) */
.dropdown { position: relative; }
.dropdown__menu { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px); z-index: 20; display: none; min-inline-size: 240px; max-inline-size: min(340px, calc(100vw - 32px)); padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); }
.dropdown.is-open .dropdown__menu { display: grid; gap: 2px; }
.dropdown__menu--stretch { inset-inline: 0; min-inline-size: 0; max-inline-size: none; }
.dropdown__item { display: flex; align-items: center; gap: var(--sp-2); min-block-size: 44px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: 500 15px var(--font-text); text-align: start; text-decoration: none; cursor: pointer; }
.dropdown__item:hover, .dropdown__item.is-active { background: color-mix(in srgb, var(--peach) 18%, var(--surface)); }
.dropdown__item--accent { justify-content: space-between; background: var(--btn-primary-bg); color: var(--btn-primary-text); font-weight: 600; }
.dropdown__item--accent:hover { background: var(--btn-primary-bg); }
.pp-select { display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: 44px; padding: 4px 10px 4px 4px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--text); font: 500 15px var(--font-text); cursor: pointer; }
.pp-select.is-loading { opacity: .6; }
.pp-select__thumb { inline-size: 32px; block-size: 36px; border-radius: 8px; overflow: hidden; flex: none; background: var(--paper-line); }
.pp-select__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 8px; background: var(--paper-line); color: var(--text-muted); font-size: 12px; font-weight: 600; }

/* ================================================================ лукбук */

.lookbook { display: grid; gap: var(--sp-4); }
.shoot-group { display: grid; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.shoot-group__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.shoot-group__head b { font-size: 16px; }
.shoot-group__head small { color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.shoot-group__more { justify-self: stretch; }
/* Мозаика как в макете: первый кадр крупно на две строки, остальные — справа. */
.shoot-group .photo-grid { grid-template-columns: 2fr 1fr 1fr; }
.shoot-group .photo-grid > :first-child { grid-row: span 2; display: grid; }
.shoot-group .photo-grid > :first-child .photo { aspect-ratio: auto; block-size: 100%; }
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.photo { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--paper-line); }
.photo__img { inline-size: 100%; block-size: 100%; object-fit: cover; cursor: zoom-in; }
.photo__state { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 8px; text-align: center; font-size: 12px; color: var(--text-muted); }
.photo__state .status { font-size: 12px; }
.photo__bar { position: absolute; inset-inline: 0; inset-block-end: 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 6px; background: linear-gradient(to top, rgba(51,42,37,.55), transparent); color: #fff; font-size: 11px; }
.photo__bar span { display: none; }
.photo--state .photo__bar { display: none; }
.icon-btn--onmedia { inline-size: 32px; block-size: 32px; border: 0; border-radius: 50%; background: rgba(59,48,43,.6); color: #fff; font-size: 15px; }
@media (min-width: 768px) { .photo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .shoot-group .photo-grid { grid-template-columns: 2fr 1fr 1fr; } }

/* просмотр кадров — экран «Кадры» макета: сторис на тёмной сцене */
.modal--viewer { color: var(--stage-text); }
.modal--viewer .modal__backdrop { background: var(--stage-0); animation: none; }
.viewer__frame { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; }
.viewer__frame::after { content: ""; position: absolute; inset: 0; background: var(--vignette); pointer-events: none; }
.viewer__img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.viewer__spin { position: absolute; display: none; border-color: rgba(255,255,255,.5); border-inline-end-color: transparent; }
.modal--viewer.is-loading .viewer__spin { display: block; }
.viewer__bars { position: absolute; inset-block-start: 12px; inset-inline: 12px; z-index: 3; display: grid; gap: 5px; }
.viewer__bars i { block-size: 3px; border-radius: 2px; background: rgba(251,244,239,.35); }
.viewer__bars i.on { background: var(--stage-text); }
.viewer__tap { position: absolute; inset-block: 0; z-index: 2; inline-size: 35%; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.viewer__tap--prev { inset-inline-start: 0; }
.viewer__tap--next { inset-inline-end: 72px; }
.viewer__nav { display: none; }
.modal--viewer.is-single .viewer__tap, .modal--viewer.is-single .viewer__nav { display: none; }
.viewer__before { z-index: 4; inset-block-start: 28px; inset-inline-start: 14px; inset-inline-end: auto; padding: 0; cursor: pointer; }
.viewer__before[aria-pressed="true"] { outline: 2px solid var(--peach); outline-offset: 2px; }
.viewer__close { position: absolute; inset-block-start: 28px; inset-inline-end: 12px; z-index: 4; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 0; border-radius: 50%; background: rgba(59,48,43,.55); color: var(--stage-text); cursor: pointer; backdrop-filter: blur(4px); }
.viewer__actions { position: absolute; inset-inline-end: 10px; inset-block-start: 28%; z-index: 4; display: grid; gap: 14px; }
.viewer__act { display: grid; justify-items: center; gap: 4px; color: var(--stage-text); font: 500 11px var(--font-text); text-decoration: none; cursor: pointer; }
.viewer__act span { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 50%; background: rgba(59,48,43,.55); backdrop-filter: blur(4px); }
.viewer__bottom { position: absolute; inset-inline: var(--gutter); inset-block-end: calc(var(--sp-4) + var(--safe-b)); z-index: 4; display: grid; gap: var(--sp-2); }
.viewer__label { margin: 0; font-size: var(--fs-sm); color: rgba(251,244,239,.85); }
/* Компьютер: кадр целиком колонкой по центру, листание — стрелками по бокам */
@media (min-width: 768px) {
  .viewer__frame { inset: 52px 96px 150px; display: flex; align-items: center; justify-content: center; }
  .viewer__frame::after { display: none; }
  .viewer__img { inline-size: auto; block-size: 100%; max-inline-size: 100%; border-radius: var(--r-lg); object-fit: contain; }
  .viewer__bars { inset-inline: 50%; inline-size: min(560px, calc(100% - 24px)); transform: translateX(-50%); }
  .viewer__tap { display: none; }
  .viewer__nav { position: absolute; inset-block-start: 50%; z-index: 3; display: grid; place-items: center; inline-size: 48px; block-size: 48px; margin-block-start: -24px; border: 0; border-radius: 50%; background: var(--stage-2); color: var(--stage-text); cursor: pointer; }
  .viewer__nav--prev { inset-inline-start: 24px; }
  .viewer__nav--next { inset-inline-end: 24px; }
  .viewer__before { inset-inline-start: 24px; }
  .viewer__close { inset-inline-end: 24px; }
  .viewer__actions { inset-inline-end: 24px; }
  .viewer__bottom { inset-inline-start: 50%; inset-inline-end: auto; inline-size: min(560px, calc(100% - 48px)); transform: translateX(-50%); grid-template-columns: 1fr 1fr; }
  .viewer__label { grid-column: 1 / -1; text-align: center; }
}

/* окна кабинета и знакомство */
.modal--dialog .modal__title { font-family: var(--font-text); font-size: 20px; font-weight: 600; letter-spacing: normal; margin: 0; }
.guide-step { display: grid; gap: var(--sp-3); }
.guide-dots { display: flex; justify-content: center; gap: 6px; }
.guide-dots span { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--line-strong); }
.guide-dots span.is-on { background: var(--text); }
@media (min-width: 768px) {
  .modal--dialog .modal__dialog { inset: 50% auto auto 50%; transform: translate(-50%, -50%); inline-size: min(520px, calc(100vw - 32px)); max-block-size: 88svh; border-radius: var(--r-xl); animation: none; }
  .modal--dialog .modal__head .handle { visibility: hidden; }
  .modal--dialog .modal__foot { border-radius: 0 0 var(--r-xl) var(--r-xl); }
}

/* ================================================================ двойники */

.twins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.twin-card { display: grid; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.twin-card__media { position: relative; aspect-ratio: 4 / 5; background: var(--paper-line); }
.twin-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.twin-card__type { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; background: rgba(251,244,239,.9); color: var(--ink); }
.twin-card__body { display: grid; gap: 6px; justify-items: start; padding: var(--sp-3); }
.twin-card__body form { display: contents; }
.twin-card__delete { min-block-size: 32px; padding: 0; color: var(--err); }
.who-card { display: grid; gap: var(--sp-2); padding: var(--sp-4); border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.who-card h3 { font-size: var(--fs-lead); font-weight: 600; margin: 0; }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.rules li { display: flex; gap: 8px; align-items: flex-start; }
.rules li::before { flex: none; display: grid; place-items: center; inline-size: 18px; block-size: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; color: #fff; }
.rules__ok::before { content: "✓"; background: var(--ok-mark); }
.rules__no::before { content: "✕"; background: var(--err-mark); }
select.field-input { appearance: auto; }
.dz-preview { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.dz-preview:empty { display: none; }
.dz-preview__file { position: relative; inline-size: 56px; block-size: 56px; border-radius: 8px; overflow: hidden; background: var(--paper-line); }
.dz-preview__file img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.dz-preview__remove { position: absolute; inset-block-start: 2px; inset-inline-end: 2px; display: grid; place-items: center; inline-size: 18px; block-size: 18px; border: 0; border-radius: 50%; background: rgba(51,42,37,.75); color: #fff; cursor: pointer; padding: 0; }
.dz-preview__count { flex-basis: 100%; text-align: center; font-size: 12px; color: var(--text-muted); }
@media (min-width: 768px) { .twins { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ================================================================ профиль и пакеты */

.cab-title { font-size: 28px; margin: 0; }
.back-link { justify-self: start; min-block-size: 32px; padding: 0; }
.card { display: grid; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.card__title { font-family: var(--font-text); font-size: 13px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.card__title--big { font-size: 18px; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: normal; }
.card__row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.card__row form { display: contents; }
.big { font-size: 17px; font-weight: 600; }
.card .control--sm { flex: none; }
.list { display: grid; }
.list > * { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); min-block-size: 52px; border-block-end: 1px solid var(--line); font-size: 15px; color: var(--text); text-decoration: none; }
.list > *:last-child { border: 0; }
.list small { color: var(--text-muted); font-size: 13px; }
.list form { display: contents; }
.danger { color: var(--err) !important; }
.me { display: flex; align-items: center; gap: var(--sp-3); }
.me__avatar { inline-size: 56px; block-size: 56px; flex: none; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: var(--paper-line); color: var(--text-muted); }
.me__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.me__avatar svg { inline-size: 28px; block-size: 28px; }
.me__text { display: grid; flex: 1; min-inline-size: 0; }
.me__text b { font-size: 17px; overflow-wrap: anywhere; }
.me__text .me__email { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.me__text small { color: var(--text-muted); overflow-wrap: anywhere; }
.sub-alert { display: grid; gap: var(--sp-2); justify-items: start; padding: var(--sp-3); border-radius: var(--r-md); background: color-mix(in srgb, var(--err-mark) 12%, var(--surface)); font-size: 14px; }
.card details.qa { border: 0; }
.card details.qa summary { min-block-size: 48px; font-weight: 500; }
.tx { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.tx > span { display: grid; }
.tx__type { font-size: 15px; }
.tx__amount { font-family: var(--font-display); font-feature-settings: var(--num); }
.tx__amount--in { color: var(--ok); }
.radio-row { display: flex; align-items: center; gap: var(--sp-3); min-block-size: 56px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
.radio-row + .radio-row { margin-block-start: 6px; }
.radio-row input { inline-size: 20px; block-size: 20px; accent-color: var(--cocoa-btn); flex: none; }
.radio-row.is-active, .radio-row:has(input:checked) { border-color: var(--btn-primary-bg); box-shadow: 0 0 0 2px color-mix(in srgb, var(--btn-primary-bg) 18%, transparent); }
.radio-row__main { display: grid; flex: 1; min-inline-size: 0; }
.radio-row__main small { color: var(--text-muted); font-size: 13px; }
.radio-row__price { font-weight: 600; white-space: nowrap; font-feature-settings: var(--num); }
.radio-row__price s { color: var(--text-muted); font-weight: 400; font-size: 13px; margin-inline-end: 4px; }
.sticky-pay { position: sticky; inset-block-end: calc(var(--tabbar-h) + var(--safe-b) + 8px); display: grid; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); }
.total { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.total b { font-family: var(--font-display); font-size: 1.25rem; font-feature-settings: var(--num); }
@media (min-width: 1024px) { .sticky-pay { inset-block-end: var(--sp-4); } }

.plaque { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; }

/* Пакеты таблицей, как в макете «Съёмки»: название · кадры · цена, выбранная
   строка жирная с точкой. Радио скрыто, строка сама — кнопка выбора. */
.packs .pack-row.radio-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--sp-3); min-block-size: 0; padding: 12px 0; border: 0; border-block-end: 1px solid var(--line); border-radius: 0; box-shadow: none; margin: 0; font-size: 15px; }
.pack-row:last-child { border-block-end: 0; }
.pack-row__frames { color: var(--text-muted); font-size: 13px; }
.pack-row__price { text-align: end; white-space: nowrap; font-feature-settings: var(--num); }
.pack-row__price s { color: var(--text-muted); font-size: 13px; margin-inline-end: 6px; }
.pack-row.is-active .pack-row__name, .pack-row.is-active .pack-row__frames, .pack-row.is-active .pack-row__price { font-weight: 600; }
.pack-row.is-active .pack-row__name::before { content: "● "; color: var(--peach-deep); }
.pack-row:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.sticky-pay:has(> .control:only-child) { padding: var(--sp-3) 0; border: 0; border-radius: 0; background: linear-gradient(to top, var(--bg) 70%, transparent); backdrop-filter: none; }
.twin-row { display: flex; align-items: center; gap: var(--sp-3); min-inline-size: 0; }
.twin-row img, .twin-row__empty { inline-size: 44px; block-size: 54px; border-radius: 8px; object-fit: cover; flex: none; background: var(--paper-line); }
.twin-row small { color: var(--text-muted); font-size: 13px; }

/* ================================================================ 404 (ТЗ этап 7) */
/* Прототип «404-claude»: пустая рамка кадра со знаком и бликом, заголовок, две кнопки. */
.not-found { inline-size: 100%; max-inline-size: 420px; min-block-size: calc(100svh - 72px); margin: 0 auto; padding: var(--sp-6) var(--gutter) var(--sp-12); display: grid; gap: var(--sp-4); justify-items: center; align-content: center; text-align: center; }
.not-found__frame { position: relative; inline-size: min(220px, 60vw); aspect-ratio: 4 / 5; border: 2px dashed var(--line-strong); border-radius: var(--r-lg); display: grid; place-items: center; overflow: hidden; background: var(--surface); margin-block-end: var(--sp-2); }
.not-found__frame img { inline-size: 64px; block-size: 64px; opacity: .55; }
.not-found__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--peach) 30%, transparent) 50%, transparent 70%); transform: translateX(-100%); animation: nf-sweep 3.2s var(--ease-in-out) infinite; }
@keyframes nf-sweep { 0%, 20% { transform: translateX(-100%); } 70%, 100% { transform: translateX(100%); } }
.not-found h1 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem); margin: 0; }
.not-found__text { color: var(--text-muted); font-size: 16px; max-inline-size: 30ch; margin: 0; }
.not-found__actions { inline-size: 100%; display: grid; gap: var(--sp-2); margin-block-start: var(--sp-2); }
@media (prefers-reduced-motion: reduce) { .not-found__frame::after { animation: none; display: none; } }

/* ================================================================ страница Робокассы */
/* /pay/{id}/robokassa: «Оплата обрабатывается…» по сохранённой карте и запасной путь,
   если виджет не открылся прямо на странице оплаты. */
.rk-page { min-block-size: calc(100svh - 72px); display: grid; place-items: center; padding: var(--sp-6) var(--gutter) var(--sp-12); }
.rk-page__card { inline-size: 100%; max-inline-size: 420px; gap: var(--sp-3); text-align: center; justify-items: center; }
.rk-page__card > form, .rk-page__card > .control { inline-size: 100%; }
.rk-page__sum { font-family: var(--font-display); font-size: 32px; font-weight: 700; margin: 0; font-feature-settings: var(--num); }
.rk-page__wait { display: grid; gap: var(--sp-2); justify-items: center; padding: var(--sp-4) 0; }
.rk-page__wait .spinner { inline-size: 32px; block-size: 32px; border-width: 3px; }
.rk-page__wait p { margin: 0; }

/* ================================================================ Помощь (ТЗ этап 7) */
/* Прототип «помощь-claude»: карточки, «Мои обращения», вопросы чипами, документы. */
.help__head { display: flex; align-items: center; gap: var(--sp-3); }
.help__sec { font-family: var(--font-text); font-size: 18px; font-weight: 600; letter-spacing: normal; margin: var(--sp-2) 0 0; }
.help .card > p { margin: 0; }
.help .card .control { min-block-size: 48px; font-size: 15px; }
.help .muted a { color: var(--accent-link); }
.help-card--accent { background: color-mix(in srgb, var(--peach) 22%, var(--surface)); border-color: color-mix(in srgb, var(--peach) 55%, var(--line)); }
.help-contacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.help-contacts .control { padding-inline: var(--sp-2); }
.help-tickets > a { min-block-size: 64px; }
.help-tickets__text { display: grid; gap: 2px; min-inline-size: 0; }
.help-tickets__text b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.help-tickets .status { flex: none; min-block-size: 28px; font-size: 13px; }
.status--muted { --status-mark: var(--line-strong); }
.help-qa > div { display: grid; }
.help-qa details.qa:last-child { border: 0; }
.help-qa details.qa a { color: var(--accent-link); }
.help-textarea { min-block-size: 96px; resize: vertical; font: inherit; }
.help .note { line-height: 1.6; margin: 0; }

/* Шторка «Проблема с кадром»: шаги внутри одного окна */
.fp { display: grid; gap: var(--sp-3); }
.fp__step { color: var(--text-muted); }
.fp__step-body { display: none; gap: var(--sp-3); }
.fp__step-body.is-on { display: grid; }
.fp__step-body .modal__title { margin: 0; }
.fp-shoot { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; inline-size: 100%; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--text); text-align: start; font: inherit; cursor: pointer; }
.fp-shoot img { inline-size: 56px; block-size: 70px; border-radius: 10px; object-fit: cover; }
.fp-shoot span { display: grid; gap: 2px; min-inline-size: 0; }
.fp-shoot b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-shoot small { color: var(--text-muted); font-size: 13px; }
.fp-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fp-frame { position: relative; aspect-ratio: 4 / 5; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: var(--paper-line); cursor: pointer; }
.fp-frame img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.fp-frame[aria-pressed="true"] { border-color: var(--cocoa, var(--ink)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--peach) 45%, transparent); }
.fp__done { justify-items: center; text-align: center; }
.fp__done .control { inline-size: 100%; }
.fp__mark { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 50%; background: color-mix(in srgb, var(--ok-mark) 22%, var(--surface)); color: var(--ok-mark); font-size: 26px; font-weight: 700; }
/* Переписка по обращению */
.help__head .help-thread__status { margin-inline-start: auto; flex: none; }
.help-thread__subject { margin: 0; }
.help-thread { display: grid; gap: var(--sp-3); }
.help-msg { gap: var(--sp-2); }
.help-msg--mine { background: color-mix(in srgb, var(--peach) 12%, var(--surface)); }
.help-msg__body { margin: 0; white-space: pre-line; font-size: 15px; color: var(--text); overflow-wrap: anywhere; }
.help-msg__files { display: flex; flex-wrap: wrap; gap: 8px; }
.help-msg__files a { display: block; inline-size: 88px; block-size: 88px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.help-msg__files img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* мастер двойника, шаг «Фото»: «←» и «Шаг 2 из 2» в одну строку */
.pp-bar { display: flex; align-items: center; gap: var(--sp-3); }
/* пара в мастере двойника: плитки «Её фото» / «Его фото» рядом, выбранное фото заполняет плитку */
.slot.dropzone { position: relative; overflow: hidden; }
.slot__text { display: grid; gap: 4px; justify-items: center; }
.slot__text b { font-size: 15px; font-weight: 600; color: var(--text); }
.slot .dz-preview { position: absolute; inset: 0; display: block; }
.slot .dz-preview:empty { display: none; }
.slot .dz-preview__file { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border-radius: 0; }
.slot .dz-preview__remove { inset-block-start: 8px; inset-inline-end: 8px; inline-size: 28px; block-size: 28px; }
.slot .dz-preview__count { display: none; }