/* GoPoTa shop — раскладка страниц сайта.
   Здесь только то, чего нет в components.css: колонка, стеклянная шапка, нижние панели, отступы
   между блоками. Цвета, шрифты, скругления, тени и движение — токены из tokens.css и components.css,
   своих цветов здесь нет. Отступы и редкие размеры повторяют макеты design/screens/*.html
   (например, плитки витрины 20px — как в main.html). */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--surface); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; }
[hidden] { display: none !important; }
p, h1, h2, h3, dl, dd, ol, ul { margin: 0; }
/* Длинное слово в крупном заголовке («Конфиденциальность») на узком телефоне переносится, а не вылезает */
h1, h2 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; hyphenate-limit-chars: 12 5 5; text-wrap: balance; }
img, svg { flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Скрыто с экрана, но читается экранным диктором */
.app-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Ссылка «Перейти к содержимому» — видна только при переходе клавишей Tab */
.app-skip { position: fixed; top: var(--space-2); left: var(--space-4); z-index: 60; transform: translateY(-200%); }
.app-skip:focus { transform: none; }
.app-main:focus { outline: none; box-shadow: none; }

/* Обычные ссылки в тексте */
.app-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.app-link:hover { text-decoration-color: currentColor; }
.app-center { text-align: center; }
.app-error { color: var(--red-ink); }

/* ---------- Колонка: на телефоне во всю ширину, на широком экране — до 480px по центру ---------- */
.app-col { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; max-width: 480px; margin: 0 auto; background: var(--surface); }
@media (min-width: 560px) {
  html, body { background: var(--surface-soft); }
  .app-col { box-shadow: 0 0 0 1px var(--line); }
}

/* ---------- Радужная полоска сверху: одна на экран, стоит на месте ---------- */
.app-stripe { position: fixed; top: 0; left: 50%; z-index: 30; width: min(100%, 480px); transform: translateX(-50%); border-radius: 0; }

/* ---------- Стеклянная шапка: появляется, когда большой заголовок уехал вверх ---------- */
.app-bar { position: fixed; top: 3px; left: 50%; z-index: 25; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-2); width: min(100%, 480px); height: 48px; padding: 0 var(--space-4); transform: translateX(-50%); background: var(--glass); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(180%); backdrop-filter: blur(var(--blur-glass)) saturate(180%); box-shadow: inset 0 -1px 0 var(--line); opacity: 0; visibility: hidden; transition: opacity var(--dur-quick) var(--ease-out), visibility 0s linear var(--dur-quick); }
.app-bar.is-stuck { opacity: 1; visibility: visible; transition: opacity var(--dur-quick) var(--ease-out); }
body:not(:has(.app-stripe)) .app-bar { top: 0; }
.app-bar__title { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.app-bar__start { justify-self: start; min-width: 0; }
.app-bar__end { justify-self: end; }
.app-bar__back { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-2); text-decoration: none; white-space: nowrap; }

/* ---------- Пометка тестового режима ---------- */
.app-test { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: calc(var(--space-2) * -1); padding: var(--space-3) var(--space-4) 0; color: var(--ink-2); }

/* ---------- Содержимое страницы ---------- */
.app-main { display: flex; flex-direction: column; gap: var(--space-5); padding: 28px var(--space-4) 0; }
.page-product .app-main { padding-top: var(--space-4); }
.page-order .app-main { gap: var(--space-4); padding-top: var(--space-6); }
.page-order .app-order { display: flex; flex-direction: column; gap: var(--space-4); }
.page-demo-pay .app-main, .page-demo-activate .app-main { gap: var(--space-4); padding-top: var(--space-6); }

/* Подвал: правила, помощь, переключатель темы */
.app-foot { display: grid; gap: var(--space-2); margin-top: auto; padding: var(--space-5) var(--space-4) var(--space-8); }
.app-foot__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); }
.app-foot__row .app-link { color: var(--ink-2); text-decoration: none; }
.app-foot__row .app-link:hover { text-decoration: underline; }
.app-theme { height: 32px; margin-left: auto; padding: 0 var(--space-3); color: var(--ink-2); font-size: 13px; }
.has-tabbar .app-foot { padding-bottom: 120px; }
.has-buybar .app-foot { padding-bottom: 116px; }

/* Большой заголовок и подпись под ним */
.app-hero { display: flex; flex-direction: column; gap: 6px; }
.app-chip-line { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.app-stack { display: flex; flex-direction: column; gap: var(--space-2); }
.app-block { display: flex; flex-direction: column; gap: 14px; }
.app-group { display: flex; flex-direction: column; gap: 10px; }
.app-list { display: flex; flex-direction: column; gap: 10px; }
.app-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.app-back { align-self: flex-start; color: var(--ink-2); text-decoration: none; }
.app-anchor { scroll-margin-top: 64px; }
.app-prose { color: var(--ink); }

/* ---------- Витрина ---------- */
.app-cards { display: flex; flex-direction: column; gap: var(--space-3); }
.app-tiles3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.app-tiles3 .gp-tile { padding: 14px 12px; }
.app-tiles3 .gp-tile__value { font-size: 20px; line-height: 24px; }

/* ---------- Страница товара ---------- */
.app-price-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.app-steps { display: flex; flex-direction: column; gap: var(--space-3); padding: 0; list-style: none; }
.app-steps > li { display: flex; align-items: flex-start; gap: var(--space-3); }
.app-steps .gp-num { width: 24px; height: 24px; font-size: 12px; }
.app-buybar { position: fixed; bottom: 0; left: 50%; z-index: 20; width: min(100%, 480px); padding: 12px var(--space-4) max(28px, env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--glass); -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass)); border-top: 1px solid var(--line); }

/* ---------- Лист оформления: слой поверх страницы ---------- */
.app-sheet { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.app-sheet.is-open { pointer-events: auto; }
.app-sheet .gp-sheet { grid-template-columns: minmax(0, 1fr); max-width: 480px; max-height: calc(100% - var(--space-6)); margin: 0 auto; overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(var(--space-6), env(safe-area-inset-bottom)); }
.app-sheet:not(.is-open) .gp-sheet { visibility: hidden; transition: transform var(--dur-sheet) var(--ease-sheet), visibility 0s linear var(--dur-sheet); }
.app-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.app-sheet__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.app-icon-btn { width: 40px; padding: 0; }
.app-promo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
/* Строки суммы и промокод — один кусок (его заменяет ответ /api/quote), внутри те же отступы, что в листе */
.app-price { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.app-pay-note { margin-top: calc(var(--space-1) * -1); text-align: center; }
.app-pay-note:empty { display: none; }
html.app-locked, html.app-locked body { overflow: hidden; }
html.app-locked .app-tabbar, html.app-locked .app-buybar { visibility: hidden; }

/* ---------- Нижняя стеклянная панель разделов ---------- */
.app-tabbar { position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; z-index: 20; transform: translateX(-50%); }

/* ---------- Заказ ---------- */
.app-rows { padding: var(--space-1) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-raised); }
.app-rows .gp-sheet__total { padding-bottom: var(--space-1); }
.app-wait { display: grid; justify-items: center; gap: var(--space-3); padding: 44px 20px 40px; border-radius: var(--radius-card); background: var(--feature); color: var(--on-feature); text-align: center; }
.app-wait .gp-name { font-size: 46px; }
.app-wait__text { color: var(--on-feature-2); }
.app-slow { display: flex; flex-direction: column; gap: var(--space-3); }
.app-burst { padding-top: var(--space-2); padding-bottom: var(--space-2); }
/* Низкий экран телефона (320×568, iPhone SE): «Оплата прошла» в одну строку со знаком — кнопки ключа видны
   над закреплённой «Активировать подписку» сразу, без прокрутки (проверка витрины 22.10). */
@media (max-width: 420px) and (max-height: 640px) {
  .app-burst { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 2px var(--space-3); padding-left: 0; padding-right: 0; text-align: left; }
  .app-burst .gp-burst__mark { grid-row: span 2; width: 56px; height: 56px; }
  .app-burst .gp-burst__ring { width: 56px; height: 56px; }
  .app-burst .gp-burst__ring::after { inset: 5px; }
  .app-burst .gp-burst__check svg { width: 26px; height: 26px; }
  .app-burst .gp-burst__title { font-size: 24px; line-height: 30px; }
  .app-burst .gp-burst__text { font-size: 13px; line-height: 18px; }
}
/* Праздник — один раз за покупку. Пока app.js не решил, первый ли это показ, кольцо и новая буква
   скрыты: так нет мигания «готовое кольцо → пустое → рисуется». Без JS всё видно сразу в конечном виде. */
.app-js .app-burst:not(.is-on):not(.is-seen) .gp-burst__mark { visibility: hidden; }
.app-js .gp-collect__word > li[data-collect-new]:not(.is-new):not(.is-seen) > span { opacity: 0; }
.app-js .gp-collect__word > li[data-collect-new]:not(.is-new):not(.is-seen)::before { transform: scaleX(0); }
/* «Уменьшить движение»: праздник сразу в конечном виде — галочка без задержки (кольцо уже полное) */
@media (prefers-reduced-motion: reduce) {
  .gp-burst.is-on .gp-burst__check svg, .gp-burst.is-on .gp-burst__dots > i { animation-delay: 0s !important; }
}
.app-example .gp-chip { margin-right: var(--space-2); vertical-align: middle; }
.app-mark__done { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---------- «Заказы»: вся строка заказа нажимается ---------- */
.gp-order { position: relative; }
.app-row-link { color: var(--ink); text-decoration: none; }
.app-row-link::after { content: ""; position: absolute; inset: 0; }
.app-row-link:focus-visible { box-shadow: none; }
.gp-order:has(.app-row-link:focus-visible) { box-shadow: inset 0 0 0 2px var(--focus); }
.app-empty { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) 0; }

/* Выход из аккаунта — строка внизу «Заказов»: кнопка выглядит как ссылка */
.app-logout { text-align: center; }
.app-link-btn { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; cursor: pointer; }
.app-link-btn:hover { text-decoration-color: currentColor; }

/* Смена способа оплаты на странице заказа: пока выставляется новый счёт, список неактивен */
.gp-pay[disabled] { opacity: var(--opacity-disabled); pointer-events: none; }

/* ---------- Вход ---------- */
.app-login { display: flex; flex-direction: column; gap: var(--space-5); }
.app-code-tile { justify-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-4); text-align: center; }
.app-code { font-variant-numeric: tabular-nums; letter-spacing: .16em; }
.gp-btn[aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: default; }

/* ---------- Тост ---------- */
.app-toast { position: fixed; right: 0; bottom: 28px; left: 0; z-index: 50; display: flex; justify-content: center; pointer-events: none; }
.has-tabbar .app-toast { bottom: 104px; }
.has-buybar .app-toast { bottom: 104px; }

/* ---------- Цвет нового товара — по букве имени GoPoTa (DESIGN.md, «Шесть букв — шесть цветов»):
   P — красный, o — фиолетовый, T — синий, a — жёлтый. Классы ЧатГПТ (G) и Claude (o) — в components.css;
   здесь те же переменные для остальных четырёх букв: кромка карточки, обложка с полоской в тон, значок в «Заказах».
   Цвета — только токены (tokens.css). ---------- */
.gp-card--red { --gp-accent: var(--rainbow-red); }
.gp-card--purple { --gp-accent: var(--rainbow-purple); }
.gp-card--blue { --gp-accent: var(--rainbow-blue); }
.gp-card--yellow { --gp-accent: var(--rainbow-yellow); }
.gp-art--red, .gp-order__mark--red { --gp-art-bg: var(--red-soft); --gp-art-ink: var(--red-ink); --gp-t: var(--rainbow-red); --gp-t-ink: var(--red-ink); --gp-t-bg: var(--red-soft); }
.gp-art--purple, .gp-order__mark--purple { --gp-art-bg: var(--purple-soft); --gp-art-ink: var(--purple-ink); --gp-t: var(--rainbow-purple); --gp-t-ink: var(--purple-ink); --gp-t-bg: var(--purple-soft); }
.gp-art--blue, .gp-order__mark--blue { --gp-art-bg: var(--blue-soft); --gp-art-ink: var(--blue-ink); --gp-t: var(--rainbow-blue); --gp-t-ink: var(--blue-ink); --gp-t-bg: var(--blue-soft); }
/* У жёлтого нет своего тёмного оттенка в токенах: текст — обычный (ink), тёмный конец полоски — жёлтый с ink */
.gp-art--yellow, .gp-order__mark--yellow { --gp-art-bg: var(--yellow-soft); --gp-art-ink: var(--ink); --gp-t: var(--rainbow-yellow); --gp-t-ink: color-mix(in srgb, var(--rainbow-yellow), var(--ink) 45%); --gp-t-bg: var(--yellow-soft); }

/* ---------- Любой товар из базы: длинные названия и тексты переносятся, а не ломают вёрстку ---------- */
/* (:where — без веса: правила ниже, например «переносить где угодно» у обложки, сильнее этого) */
:where(.app-main, .gp-sheet) :where(p, li, dt, dd, h1, h2, h3) { overflow-wrap: break-word; }
.gp-sheet__row dt { min-width: 0; }
.gp-sheet__row dd { flex: none; }
.gp-key__label, .gp-art__brand { overflow-wrap: anywhere; }
/* Переключатель витрины: подпись нового раздела длиннее «ЧатГПТ» — обрезается многоточием, а не вылезает */
.gp-seg__item { min-width: 0; padding: 0 var(--space-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Длинное слово на обложке ProductArt набирается мельче (ProductView.art_word_size) */
.gp-art .gp-art__word { overflow-wrap: anywhere; }
.gp-art__word.app-art-word--m { font-size: clamp(40px, 12vw, 64px); }
.gp-art__word.app-art-word--s { font-size: clamp(28px, 8vw, 44px); line-height: 1; }

/* ---------- Своя обложка товара (картинка из админки, /media/…) — вместо ProductArt, та же рамка 16:10 ---------- */
.app-cover { position: relative; aspect-ratio: 16 / 10; max-width: 100%; border-radius: var(--radius-card); overflow: hidden; background: var(--gp-art-bg, var(--surface-soft)); }
.app-cover__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Поле почты: как поле промокода (gp-field), но без заглавных букв ---------- */
.app-field { display: grid; gap: 6px; }
.app-field__label { color: var(--ink-2); text-transform: uppercase; }
/* Табличные цифры там, где номер, дата или время стоят внутри текста (зона 2): цифры не «прыгают».
   Строка «дата · №» в «Заказах», «Счёт действует до 22:41», отметки и даты писем и переписки. */
.app-tnum, .gp-order__meta, .app-order .app-hero .callout, .app-not-paid, .app-mark__done, .app-email-sent .footnote { font-variant-numeric: tabular-nums; }
/* Поля поддержки (зона 2): тот же вид, что у остальных полей магазина; список и многострочное поле */
.app-select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: none; cursor: pointer; }
.app-field:has(.app-select) { position: relative; }
.app-field:has(.app-select)::after { content: ""; position: absolute; right: 16px; bottom: 18px; width: 8px; height: 8px; border: solid var(--ink-2); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }
.app-textarea { height: auto; min-height: 120px; padding: 12px 14px; font-weight: 500; line-height: 1.5; resize: vertical; }
.app-input { width: 100%; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 15px/1 var(--font-sans); }
.app-input::placeholder { color: var(--ink-2); font-weight: 500; }
.app-input[aria-invalid="true"] { border-color: var(--red-ink); }
/* Адрес похож на настоящий — под полем «Ключ придёт на o•••@mail.ru» */
.app-field__hint.is-ok { color: var(--green-ink); }

/* ---------- Почта заказа на странице заказа ---------- */
.app-email { display: grid; gap: var(--space-2); }
/* Счёт USDT TRC20: сумма и адрес крупно, «Скопировать» справа; длинный адрес переносится, не раздвигая страницу */
.app-usdt__list { display: grid; gap: var(--space-3); margin: 0; }
.app-usdt__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px var(--space-3); }
.app-usdt__row dt { flex: 0 0 100%; }
.app-usdt__row dd { margin: 0; min-width: 0; }
.app-usdt__row .app-usdt__value { flex: 1 1 12em; }
.app-usdt__copy { flex: 0 0 auto; }
.app-usdt__amount { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.app-usdt__address { font-family: var(--font-mono); font-size: 15px; overflow-wrap: anywhere; word-break: break-all; }
.app-usdt__warn { padding: var(--space-3); border-radius: var(--radius-card); background: var(--surface-soft); }
.app-email__line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.app-email__line p { min-width: 0; }
.app-email__form { display: grid; gap: var(--space-2); justify-items: start; }
.app-email__row { display: flex; gap: var(--space-2); width: 100%; }
.app-email__row .app-input { flex: 1; }
.app-email-sent { gap: var(--space-2); }

/* ---------- «Подходящие аккаунты» в листе оформления — коротким блоком ---------- */
.app-req--compact { gap: var(--space-2); }
/* Переход «Получить ссылку на почту» (/orders#find-email): над полем видны заголовок и пояснение поиска */
.app-find-input { scroll-margin-top: 160px; }
/* Списки из карточки товара («Что входит», инструкция): одна сжимаемая колонка и перенос длинных ссылок
   (https://…/api/auth/session) — на экране 320 px страница не уезжает вбок. components.css — копия design/. */
.gp-list { grid-template-columns: minmax(0, 1fr); }
.gp-list > li { overflow-wrap: break-word; }

/* ---------- «Как это будет» на странице товара (зона 1): части, гарантия, образец экранов заказа ---------- */
.app-plan { gap: var(--space-4); container-type: inline-size; }
.app-plan__part { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); min-width: 0; }
.app-plan__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.app-plan__help { margin: 0; }
.app-samples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.app-sample { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); align-content: start; min-width: 0; }
/* Уменьшенный экран: те же цвета и тон товара, что у настоящего заказа, но без действий */
.app-sample__screen { position: relative; display: grid; align-content: center; justify-items: start; gap: 6px; aspect-ratio: 4 / 3; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-raised); color: var(--ink); font: 700 11px/14px var(--font-sans); overflow: hidden; }
.app-sample__screen--feature { border-color: transparent; background: var(--feature); color: var(--on-feature); }
.app-sample__screen--wait { justify-items: center; text-align: center; }
.app-sample__name { font-size: 22px; }
.app-sample__name > i { animation: none; }
.app-sample__name > i:nth-child(-n+3) { opacity: 1; }
/* Радуга одна на экран (design/NOTES.md): у ключа-образца сверху линия в тон товара, а не отрезки */
.app-sample__screen--key { border-top: 3px solid var(--on-feature-2); }
.app-sample__label { max-width: 100%; color: var(--on-feature-2); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-sample__code { justify-self: stretch; padding: 6px 8px; border-radius: 8px; background: var(--feature-soft); letter-spacing: .12em; white-space: nowrap; overflow: hidden; filter: blur(2px); }
.app-sample__pill { padding: 4px 8px; border-radius: var(--radius-full); background: var(--feature-soft); font-size: 10px; }
.app-sample__pill--line { justify-self: stretch; text-align: center; background: var(--surface-soft); }
/* Сайт поставщика — только схема: пунктирная рамка, пустые поля */
.app-sample--schema .app-sample__screen { border-style: dashed; border-color: var(--line-strong); background: var(--surface); }
.app-sample__field-label { color: var(--ink-2); font-size: 9px; line-height: 11px; }
.app-sample__field { justify-self: stretch; height: 14px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface-raised); }
.app-sample__button { justify-self: stretch; padding: 4px; border-radius: 8px; background: var(--action); color: var(--on-action); font-size: 10px; text-align: center; }
.app-sample__step { display: flex; align-items: center; gap: 6px; width: 100%; }
.app-sample__step .gp-num, .app-sample__num { width: 16px; height: 16px; border-radius: 5px; font-size: 9px; }
.app-sample__bar { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.app-sample__caption { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; }
.app-sample__note { margin: 0; }
/* После базовых правил экранов: колонка шире ~520 px (страница товара на компьютере) — четыре экрана в ряд, как шаги 1 → 4 */
@container (min-width: 520px) {
  .app-samples { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .app-sample__screen { aspect-ratio: 1; gap: 5px; padding: 10px; }
}

/* ---------- Лента этапов оплаты (зона 3): готово — галочка в тоне, сейчас — живая точка, дальше — пустая ---------- */
.app-pay-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.app-pay-steps__item { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-3); padding: 0 0 var(--space-3); color: var(--ink-2); }
.app-pay-steps__item::before { content: ""; position: absolute; left: 8px; top: 18px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--line); }
.app-pay-steps__item:last-child { padding-bottom: 0; }
.app-pay-steps__item:last-child::before { content: none; }
.app-pay-steps__dot { position: relative; top: 2px; width: 18px; height: 18px; border: 2px solid var(--line-strong); border-radius: var(--radius-full); background: var(--surface); }
.app-pay-steps__item.is-done { color: var(--ink); }
.app-pay-steps__item.is-done::before { background: var(--green-ink); }
.app-pay-steps__item.is-done .app-pay-steps__dot { border-color: var(--green-ink); background: var(--green-ink); box-shadow: inset 0 0 0 3px var(--surface); }
.app-pay-steps__item.is-active { color: var(--ink); font-weight: 700; }
.app-pay-steps__item.is-active .app-pay-steps__dot { border-color: var(--green-ink); }
.app-pay-steps__at { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .app-pay-steps__item.is-active .app-pay-steps__dot { animation: app-pay-pulse 1.6s var(--ease-out) infinite; }
}
@keyframes app-pay-pulse { 50% { box-shadow: 0 0 0 5px var(--green-soft); } }

/* ---------- «Ваш ход» (зона 3): шаги активации, отметки покупателя, «Застрял на этом шаге» ---------- */
.app-turn__steps { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.app-turn__step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-3); }
.app-turn__check { position: relative; display: grid; place-items: center; width: 36px; height: 36px; margin: -4px 0 0 -4px; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.app-turn__check .gp-num { width: 28px; height: 28px; font-size: 13px; transition: opacity var(--dur-quick) var(--ease-out); }
.app-turn__tick { position: absolute; inset: 4px; display: grid; place-items: center; border-radius: var(--radius-badge); background: var(--green-ink); color: var(--surface); opacity: 0; transition: opacity var(--dur-quick) var(--ease-out); }
.app-turn__tick svg { width: 16px; height: 16px; }
.app-turn__step.is-done .app-turn__tick { opacity: 1; }
.app-turn__step.is-done .app-turn__text { color: var(--ink-2); }
/* Одна сжимаемая колонка: длинная ссылка в шаге (https://…/api/auth/session) переносится, а не раздвигает экран */
.app-turn__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; }
.app-turn__text { margin: 0; overflow-wrap: break-word; }
.app-turn__final { display: grid; gap: var(--space-3); padding-top: var(--space-2); }
.app-turn__final .headline { margin: 0; }
/* «Да, появилась» / «Не появилась»: на экране 320 px две кнопки рядом не помещаются — встают друг под другом */
.app-turn__final .app-two { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ---------- Срок по отметке и напоминание о продлении (зона 5) ---------- */
.app-renew { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.app-renew__until { margin: 0; font-variant-numeric: tabular-nums; }
.app-renew__open { justify-self: start; }
.app-renew__day { display: grid; gap: var(--space-2); }
.app-renew__day .app-input { font-variant-numeric: tabular-nums; }
.app-renew .gp-btn--block { margin-top: var(--space-1); }
.app-renew .footnote { margin: 0; }
/* Пропуск «Оплата прошла»: срок по карточке и гарантия под названием ключа */
.app-key-meta { margin: calc(var(--space-2) * -1) 0 0; color: var(--on-feature-2); font-variant-numeric: tabular-nums; }

/* ---------- «Не получилось активировать» (зона 4): причина одним касанием, комментарий, что дальше ---------- */
.app-problem { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.app-problem__reasons { display: grid; gap: var(--space-2); margin: 0 0 var(--space-2); padding: 0; border: 0; }
.app-problem__reasons > legend { margin-bottom: var(--space-2); padding: 0; }
.app-problem__reason { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-raised); cursor: pointer; }
.app-problem__reason:has(input:checked) { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.app-problem__reason input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--action); }
.app-problem__comment { min-height: 88px; resize: vertical; }
.app-problem__done { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }