/* VELURA - layout.css | age-gate, navbar, tool(+pro/duo), footer, modal, toast | after base.css */


/* =====================================================================
   AGE GATE
   ===================================================================== */
.age-gate {
    position: fixed; inset: 0; z-index: 1000;
    display: grid; place-items: center;
    padding: 24px;
    background: rgba(6, 6, 8, 0.82);
    backdrop-filter: blur(10px);
}
.age-gate__card {
    max-width: 420px; width: 100%;
    text-align: center;
    padding: 40px 32px;
    border-radius: var(--radius-lg);
    border-color: var(--line);
    box-shadow: var(--shadow);
}
.age-gate__icon {
    width: 68px; height: 68px;
    margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head);
    font-weight: 700; font-size: 21px; line-height: 1;
    /* «+» добавляет ~пол-символа справа → визуальный центр «18+» смещён влево.
       Компенсируем небольшим text-indent вправо (символ «+» не даёт правого
       «веса», поэтому сдвигаем контент внутрь). */
    text-indent: 0.16em;
    color: var(--acc-soft);
    border: 1.5px solid var(--acc);
    border-radius: 50%;
    /* мягкий внутренний градиент + свечение (двойное кольцо через outline) */
    background: radial-gradient(circle at 50% 42%, var(--acc-glow), transparent 72%);
    outline: 5px solid var(--acc-glow);
    outline-offset: -0.5px;
    box-shadow: 0 0 28px var(--acc-glow) inset, 0 0 14px var(--acc-glow);
}
.age-gate__title { font-family: var(--font-head); font-size: 24px; margin-bottom: 12px; }
.age-gate__text { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 24px; }
.age-gate__actions { display: flex; flex-direction: column; gap: 11px; }
.age-gate__note { margin-top: 16px; font-size: 12px; color: var(--ink-mute); line-height: 1.5; }
.age-gate__note a { color: var(--acc-soft); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); }
.age-gate__note a:hover { border-bottom-color: var(--acc-soft); }

/* =====================================================================
   NAVBAR
   ===================================================================== */
.navbar {
    position: sticky; top: 0; z-index: 100;
    border-bottom: 1px solid transparent;
    transition: background .3s, border-color .3s, backdrop-filter .3s;
}
.navbar--scrolled {
    background: rgba(12, 12, 16, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom-color: var(--line-soft);
}
.navbar__inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 72px;
}
.navbar__nav { display: flex; align-items: center; gap: 4px; }
.navbar__link {
    padding: 9px 15px;
    border-radius: 9px;
    font-size: 15px;
    color: var(--ink-soft);
    font-weight: 500;
    transition: color .2s, background .2s;
}
.navbar__link:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.navbar__link--active { color: var(--acc-soft); }
.navbar__link--soon { color: var(--ink-mute); }

/* ---------- Dropdown «шторка» (десктоп) ---------- */
.navbar__item { position: relative; display: inline-flex; }
.navbar__item--drop > .navbar__link {
    display: inline-flex; align-items: center; gap: 6px;
}
.navbar__caret { transition: transform .25s var(--ease); opacity: .7; }
.navbar__item--drop:hover > .navbar__link .navbar__caret,
.navbar__item--drop:focus-within > .navbar__link .navbar__caret {
    transform: rotate(180deg); opacity: 1;
}

.navbar__dropdown {
    position: absolute; top: 100%; left: 0;
    min-width: 320px;
    padding: 8px;
    margin-top: 10px;          /* визуальный отступ от пункта */
    display: flex; flex-direction: column; gap: 2px;
    background: rgba(18, 18, 24, 0.92);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    z-index: 120;
}
/* «мостик»: невидимая зона над шторкой, чтобы курсор не терял hover */
.navbar__dropdown::before {
    content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.navbar__item--drop:hover > .navbar__dropdown,
.navbar__item--drop:focus-within > .navbar__dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
}

.navbar__drop-link {
    display: flex; align-items: center; gap: 12px;
    padding: 8px; border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: background .18s, border-color .18s;
}
.navbar__drop-link:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--line-soft); }

/* миниатюра-коллаж «до/после» (3:2) */
.navbar__drop-thumb {
    flex-shrink: 0; width: 96px; height: 64px;
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--line-soft);
    background: linear-gradient(135deg, rgba(255,122,144,.18), rgba(255,154,61,.12));
}
.navbar__drop-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

.navbar__drop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.navbar__drop-title { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.navbar__drop-sub { font-size: 12px; color: var(--ink-mute); line-height: 1.35; }
.navbar__drop-link--active { background: rgba(255, 77, 109, 0.08); border-color: var(--line); }
.navbar__drop-link--active .navbar__drop-title { color: var(--acc-soft); }

.navbar__actions { display: flex; align-items: center; gap: 10px; }
.credits {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 77, 109, 0.07);
    font-size: 13.5px; font-weight: 600;
}
.credits__icon { color: var(--acc); }
.credits__count { color: var(--acc-soft); }

/* ---------- Профиль залогиненного (десктоп): чип + выпадающее меню ---------- */
/* Реордер navbar__actions для залогина: Тарифы · кредиты · профиль · (бургер).
   burger получает order:4, чтобы на планшете (560–980px, где он виден) остаться справа. */
.navbar__actions.is-authed #navPricingBtn { order: 1; }
.navbar__actions.is-authed #creditsBadge  { order: 2; }
.navbar__actions.is-authed #navProfile    { order: 3; }
.navbar__actions.is-authed .navbar__burger { order: 4; }

.navprofile { position: relative; display: inline-flex; }
.navprofile__chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: background .18s, border-color .18s;
}
.navprofile__chip:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--line-soft); }
.navprofile__avatar {
    flex-shrink: 0; width: 30px; height: 30px;
    border-radius: 50%; background: var(--acc-grad);
    display: grid; place-items: center;
    box-shadow: 0 2px 8px var(--acc-glow);
}
.navprofile__avatar svg { width: 18px; height: 18px; display: block; }
.navprofile__email {
    font-size: 13.5px; font-weight: 600; color: var(--ink);
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.navprofile__caret { color: var(--ink-soft); transition: transform .25s var(--ease); opacity: .8; }
.navprofile.is-open .navprofile__caret { transform: rotate(180deg); opacity: 1; }

.navprofile__menu {
    position: absolute; top: calc(100% + 10px); right: 0;
    min-width: 250px; padding: 8px;
    background: rgba(18, 18, 24, 0.96);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    z-index: 120;
}
.navprofile.is-open .navprofile__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.navprofile__head { display: flex; align-items: center; gap: 11px; padding: 8px 8px 10px; }
.navprofile__head-avatar {
    flex-shrink: 0; width: 38px; height: 38px;
    border-radius: 50%; background: var(--acc-grad);
    display: grid; place-items: center;
}
.navprofile__head-avatar svg { width: 22px; height: 22px; display: block; }
.navprofile__head-email { font-size: 13px; color: var(--ink-soft); word-break: break-all; line-height: 1.3; }
.navprofile__sep { height: 1px; margin: 4px 4px 6px; background: var(--line-soft); }
.navprofile__item {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 9px 10px; border-radius: var(--radius-sm);
    background: transparent; border: 1px solid transparent;
    color: var(--ink-soft); font: inherit; font-size: 14px; font-weight: 500;
    text-align: left; cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
}
.navprofile__item svg { flex-shrink: 0; color: var(--ink-mute); transition: color .18s; }
.navprofile__item:hover { background: rgba(255, 255, 255, 0.05); color: var(--ink); border-color: var(--line-soft); }
.navprofile__item:hover svg { color: var(--ink-soft); }
.navprofile__item--danger { color: var(--acc-soft); }
.navprofile__item--danger svg { color: var(--acc); }
.navprofile__item--danger:hover { background: rgba(255, 77, 109, 0.08); color: var(--acc-soft); border-color: var(--line); }

.navbar__burger {
    display: none;
    flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer;
    padding: 8px;
}
.navbar__burger span {
    width: 22px; height: 2px; background: var(--ink);
    border-radius: 2px; transition: .3s var(--ease);
}
.navbar__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__burger.is-open span:nth-child(2) { opacity: 0; }
.navbar__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =====================================================================
   МОБИЛЬНОЕ МЕНЮ — drawer (выезжает слева) + затемняющий фон
   Карточки-пункты в стиле «Neon Sunset»: иконка в квадрате + жирная подпись.
   ===================================================================== */
/* затемняющий фон */
.navbar__scrim {
    position: fixed; inset: 0; z-index: 190;
    background: rgba(6, 6, 9, 0.62);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .3s var(--ease);
}
.navbar__scrim.is-open { opacity: 1; }

/* сам drawer */
.navbar__mobile {
    position: fixed; top: 0; left: 0; z-index: 200;
    width: 100%; height: 100dvh;
    display: flex; flex-direction: column; gap: 0;
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(255, 77, 109, 0.10), transparent 60%),
        linear-gradient(180deg, rgba(18, 18, 24, 0.98), rgba(12, 12, 16, 0.99));
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    border-right: 1px solid var(--line-soft);
    box-shadow: 24px 0 60px rgba(0, 0, 0, 0.5);
    transform: translateX(-104%);
    transition: transform .34s var(--ease);
    overflow-y: auto; overscroll-behavior: contain;
}
.navbar__mobile.is-open { transform: translateX(0); }

/* шапка меню: лого + крестик */
.navbar__mobile-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 6px 16px;
}
.logo--sm .logo__mark { width: 30px; height: 30px; }
.logo--sm .logo__text { font-size: 20px; }
.navbar__mclose {
    width: 42px; height: 42px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 12px; cursor: pointer;
    color: var(--ink-soft);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line-soft);
    transition: color .2s, background .2s, border-color .2s;
}
.navbar__mclose:hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); border-color: var(--acc); }

.navbar__mnav { display: flex; flex-direction: column; gap: 10px; }

/* карточка-пункт */
.mcard {
    display: flex; align-items: center; gap: 13px;
    width: 100%; text-align: left;
    padding: 14px 15px;
    border-radius: 15px;
    color: var(--ink);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--line-soft);
    font-family: var(--font-body); font-size: 16px; font-weight: 700;
    cursor: pointer;
    transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .2s;
}
.mcard:hover, .mcard:focus-visible {
    background: linear-gradient(180deg, rgba(255, 122, 144, 0.10), rgba(255, 255, 255, 0.03));
    border-color: var(--line);
}
.mcard:active { transform: scale(.98); }

/* иконка в скруглённом квадрате */
.mcard__ico {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 11px;
    color: var(--acc-soft);
    background: rgba(255, 77, 109, 0.12);
    border: 1px solid var(--line);
}
.mcard__ico--ok { color: var(--ok-soft); background: rgba(52, 211, 153, 0.12); border-color: var(--ok-glow); }

/* SVG-плитки навигации (Вариант B): плитка сама становится иконкой 40×40.
   Бокс обнуляется (свой фон/рамка не нужны — SVG несёт свой скруглённый квадрат,
   рамку и цвет). БЕЗ overflow:hidden — иначе маска бокса (radius 11px = 27.5%)
   срезала бы углы плитки сильнее её собственного скругления (~20%) и подъедала
   бы розовую обводку. Прозрачные углы SVG ничего не протекают (фон/рамка бокса
   обнулены). SVG рисуют весь кадр 850×850 → зум не нужен. */
.mcard__ico--img {
    background: none;
    border: none;
    padding: 0;
}
.mcard__img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* Гасим контекстный фон/рамку под плиткой (золото «Тарифов», активный пункт).
   Двойной класс .mcard__ico.mcard__ico--img поднимает специфичность выше
   правил-сеттеров (.mcard--gold .mcard__ico / .navbar__link--active .mcard__ico),
   иначе цветная подложка просвечивала бы в прозрачных углах SVG-плитки. */
.mcard--gold .mcard__ico.mcard__ico--img,
.mcard.navbar__link--active .mcard__ico.mcard__ico--img { background: none; border: none; color: inherit; }

.mcard__label { flex: 1; min-width: 0; }
.mcard__unit { font-weight: 600; color: var(--ink-soft); }
.mcard--credits .mcard__label b { color: var(--ok-soft); }

/* активный пункт (текущая страница) */
.mcard.navbar__link--active {
    border-color: var(--line);
    background: linear-gradient(180deg, rgba(255, 77, 109, 0.14), rgba(255, 77, 109, 0.05));
}
.mcard.navbar__link--active .mcard__ico { color: var(--acc); background: rgba(255, 77, 109, 0.18); }

/* тумблер группы «Раздеватор» */
.mcard--toggle .mcard__caret { transition: transform .25s var(--ease); opacity: .7; color: var(--ink-soft); }
.navbar__mgroup.is-open > .mcard--toggle .mcard__caret { transform: rotate(180deg); opacity: 1; }
.navbar__mgroup.is-open > .mcard--toggle {
    border-color: var(--line);
    background: linear-gradient(180deg, rgba(255, 122, 144, 0.10), rgba(255, 255, 255, 0.03));
}

/* нижний блок: баланс, тарифы, вход */
.navbar__mdivider {
    height: 1px; margin: 16px 4px;
    background: linear-gradient(90deg, transparent, var(--line-soft) 20%, var(--line-soft) 80%, transparent);
}
.navbar__mfoot { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }

/* карточка баланса — зелёный акцент */
.mcard--credits {
    cursor: default;
    background: linear-gradient(180deg, rgba(52, 211, 153, 0.08), rgba(52, 211, 153, 0.02));
    border-color: rgba(52, 211, 153, 0.20);
}
.mcard--credits:hover { transform: none; }

/* карточка «Тарифы» — золотой акцент + свечение (как активный пункт в референсе) */
.mcard--gold {
    border-color: rgba(255, 166, 46, 0.35);
    background: linear-gradient(180deg, rgba(255, 166, 46, 0.14), rgba(255, 140, 26, 0.05));
    box-shadow: 0 8px 26px rgba(255, 166, 46, 0.16), 0 0 0 1px rgba(255, 166, 46, 0.08) inset;
}
.mcard--gold .mcard__ico { color: #ffc061; background: rgba(255, 166, 46, 0.16); border-color: rgba(255, 166, 46, 0.30); }
.mcard--gold:hover { background: linear-gradient(180deg, rgba(255, 166, 46, 0.20), rgba(255, 140, 26, 0.08)); border-color: rgba(255, 166, 46, 0.5); }

/* ---------- Раскрываемая под-группа «Раздеватор» ---------- */
.navbar__mgroup { display: flex; flex-direction: column; gap: 10px; }
.navbar__msub {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .28s var(--ease);
}
.navbar__msub-inner {
    overflow: hidden; min-height: 0;
    display: flex; flex-direction: column; gap: 4px;
    padding-left: 10px;
}
.navbar__mgroup.is-open > .navbar__msub { grid-template-rows: 1fr; }
.navbar__mgroup.is-open > .navbar__msub .navbar__msub-inner { padding-top: 4px; }

/* подпункты — компактные строки с точкой-маркером.
   width/background/text-align/font/cursor — сброс нативных стилей <button>
   (пункты профиля — кнопки), чтобы они выглядели идентично <a>-ссылкам «Раздеватора». */
.msub-link {
    display: flex; align-items: center; gap: 11px;
    width: 100%;
    padding: 11px 13px; border-radius: 11px;
    color: var(--ink-soft); font-family: inherit; font-size: 15px; font-weight: 500;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
}
.msub-link:hover { background: rgba(255, 255, 255, 0.05); color: var(--ink); }
.msub-dot {
    width: 6px; height: 6px; flex-shrink: 0;
    border-radius: 50%; background: var(--ink-mute);
    transition: background .18s, box-shadow .18s;
}
.msub-link:hover .msub-dot { background: var(--acc); }
.msub-link.navbar__link--active { color: var(--acc-soft); border-color: var(--line); background: rgba(255, 77, 109, 0.07); }
.msub-link.navbar__link--active .msub-dot { background: var(--acc); box-shadow: 0 0 8px var(--acc-glow); }
/* пункт «Выйти» в группе профиля — акцентным */
.msub-link--danger { color: var(--acc-soft); }
.msub-link--danger .msub-dot { background: var(--acc); }
.msub-link--danger:hover { background: rgba(255, 77, 109, 0.08); color: var(--acc-soft); }

/* ---------- Профиль (мобилка): аватар + email в тумблере группы ---------- */
.mprofile__avatar { background: var(--acc-grad); color: #fff; border-color: transparent; }
.mprofile__avatar svg { width: 22px; height: 22px; display: block; }
.mprofile__label { display: flex; flex-direction: column; gap: 2px; }
.mprofile__label b { font-size: 15px; color: var(--ink); font-weight: 600; }
.mprofile__email {
    font-size: 12.5px; color: var(--ink-mute); font-weight: 500;
    max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* =====================================================================
   TOOL (раздеватор)
   ===================================================================== */
.tool__card {
    position: relative;                 /* якорь для плашки «бесплатных раздеваний» */
    padding: 30px;
    border-radius: var(--radius-lg);
    border-color: var(--line);
    box-shadow: var(--shadow);
}

/* мини-табы режима */
.tool__tabs {
    display: flex; gap: 5px;
    padding: 5px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line-soft);
    margin-bottom: 16px;
}
.tool__tab {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 14px;
    border-radius: 9px;
    border: none; background: transparent;
    color: var(--ink-soft);
    font-family: var(--font-body); font-size: 14.5px; font-weight: 600;
    cursor: pointer;
    transition: background .2s, color .2s, box-shadow .2s;
}
.tool__tab:hover { color: var(--ink); }
.tool__tab.is-active {
    background: var(--acc-grad);
    color: var(--on-acc);
    box-shadow: 0 6px 18px rgba(226, 58, 92, 0.28);
}
.tool__tab-ico { font-size: 11px; }

/* обёртка загрузчика */
.uploader { position: relative; }

/* плашка-чип «бесплатных раздеваний» — сидит на верхней кромке карточки,
   выше табов «Раздеть/Оживить» и ближе к правому углу (ПК). */
.uploader__badge {
    position: absolute; z-index: 5;
    top: 0; right: 26px; left: auto;
    transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px; border-radius: 999px;
    font-size: 13px; font-weight: 700; white-space: nowrap;
    color: var(--on-acc);
    background: var(--acc-grad);
    /* кольцо цветом фона «отрывает» плашку от рамки + мягкое неоновое свечение */
    box-shadow: 0 0 0 4px var(--bg), 0 6px 18px var(--acc-glow);
}
/* на планшете/телефоне (hero уже в одну колонку) — плашку по центру */
@media (max-width: 880px) {
    .uploader__badge {
        right: auto; left: 50%;
        transform: translate(-50%, -50%);
    }
}

/* dropzone */
.dropzone {
    border: 1.5px dashed var(--line);
    border-radius: var(--radius);
    padding: 32px 28px;
    /* портретная область 3/4 — фото заполняет по ширине; одинакова с preview__stage.
       width:100% обязателен: без него aspect-ratio + max-height вычисляют ширину
       из ограниченной высоты (560×3/4=420px) и блок «худеет» и уезжает влево. */
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: border-color .25s, background .25s;
    cursor: pointer;
}
.dropzone:hover, .dropzone.is-drag {
    border-color: var(--acc);
    background: rgba(255, 77, 109, 0.05);
}
.dropzone__icon {
    width: 72px; height: 72px; margin: 0 auto 18px;
    display: grid; place-items: center;
    color: var(--acc-2);
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255, 138, 61, 0.10);
    box-shadow: 0 0 22px rgba(255, 138, 61, 0.10) inset, 0 8px 22px rgba(0, 0, 0, 0.25);
}
.dropzone__icon svg { width: 32px; height: 32px; }
.dropzone__title { font-size: 17.5px; font-weight: 600; }
.dropzone__or { color: var(--ink-mute); margin: 10px 0; font-size: 13.5px; }
.dropzone__formats { color: var(--ink-mute); font-size: 13px; margin-top: 16px; }

/* preview */
.preview__stage {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-3);
    /* та же портретная пропорция, что и у dropzone — область не «прыгает».
       width:100% + max-height 640px держим синхронно с .dropzone. */
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 640px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* при загруженном фото рамка «оживает» неоновым акцентом */
    border: 1px solid var(--acc);
    box-shadow: 0 0 0 1px var(--acc), 0 0 30px var(--acc-glow);
    transition: box-shadow .35s var(--ease), border-color .35s;
}
.preview__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: filter .4s;
}
/* Блюр-гейт: под размытием — сам результат раздевания. Нагота УГАДЫВАЕТСЯ (крючок),
   но интимные детали скрыты. scale(1.06) — чтобы края размытия не оголяли рамку стейджа. */
.preview__img.is-blurred { filter: blur(7px); transform: scale(1.06); }
/* видео-результат оживления: занимает стейдж как фото, не растягивается */
.preview__video { display: block; background: #000; }
.preview__video[hidden] { display: none; }

/* постоянная панель действий (видна и до, и после загрузки фото) */
.tool__actions {
    margin-top: 18px;
    display: flex; flex-direction: column; gap: 11px;
}
/* хинт под главной кнопкой (напр. «Выберите новую фотографию» после оживления) */
.tool__hint {
    margin: -3px 0 0; text-align: center;
    font-size: 12.5px; font-weight: 600; color: var(--acc-soft);
}
.tool__hint[hidden] { display: none; }
.tool__primary { position: relative; overflow: hidden; }
/* мягкое «дыхание» главной кнопки — притягивает внимание (отключается при reduce-motion) */
.tool__primary::after {
    content: ""; position: absolute; inset: 0;
    border-radius: inherit; pointer-events: none;
    animation: ctaPulse 2.8s var(--ease) infinite;
}
.tool__primary:disabled { opacity: .75; cursor: default; }
.tool__primary:disabled::after { animation: none; }
@keyframes ctaPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0.30); }
    70%  { box-shadow: 0 0 0 12px rgba(255, 77, 109, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0); }
}
/* кнопки инструмента: прямоугольные со скруглёнными углами (не «таблетки»),
   крупные и во всю ширину — так пользователю сразу ясно, что делать.
   Скоуп через .tool__card — остальной сайт сохраняет pill-кнопки. */
.tool__card .btn {
    border-radius: var(--radius);
    font-size: 16px;
    padding: 16px 24px;
    gap: 9px;
}
/* вторичные действия («Новое фото» / «Скачать») — в столбик, во всю ширину */
.tool__actions-row { display: flex; flex-direction: column; gap: 11px; }
.tool__actions-row .btn { width: 100%; }

/* premium-CTA «Тарифы» — золотой градиент, визуально отделён от остальных */
.btn--gold {
    background: var(--gold-grad);
    color: var(--on-gold);
    box-shadow: 0 10px 26px var(--gold-glow);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 16px 38px var(--gold-glow); }

/* разделитель перед блоком «Тарифы», чтобы он не сливался с действиями */
.tool__actions--pay {
    margin-top: 14px; padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}

/* processing overlay */
.processing {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 18px;
    background: rgba(10, 10, 13, 0.78);
    backdrop-filter: blur(6px);
}
.processing__ring { position: relative; width: 104px; height: 104px; }
.processing__ring svg { width: 104px; height: 104px; transform: rotate(-90deg); }
.processing__track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 6; }
.processing__bar {
    fill: none; stroke: var(--acc); stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 327;
    stroke-dashoffset: 327;
    transition: stroke-dashoffset .3s linear;
    filter: drop-shadow(0 0 6px var(--acc-glow));
}
.processing__pct {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-family: var(--font-head); font-size: 22px; color: var(--acc-soft);
}
.processing__text { color: var(--ink-soft); font-size: 14px; text-align: center; max-width: 280px; }

/* indeterminate-режим (вошедший пользователь, undress): время неизвестно.
   Показываем отдельный CSS-спиннер (кольцо + одна дуга, крутится), как на странице генерации.
   Отдельный div, а НЕ SVG-кольцо — чтобы не конфликтовать с inline stroke-dashoffset,
   который выставляет js/main.js (иначе дуга не видна → пустой круг). */
.processing__spin {
    width: 72px; height: 72px; border-radius: 50%;
    border: 6px solid rgba(255,255,255,0.10);
    border-top-color: var(--acc);
    animation: procspin .9s linear infinite;
    filter: drop-shadow(0 0 6px var(--acc-glow));
    display: none;                        /* по умолчанию скрыт (timed-режим использует SVG-кольцо) */
}
.processing.is-indeterminate .processing__ring { display: none; }   /* прячем SVG-кольцо */
.processing.is-indeterminate .processing__pct  { display: none; }   /* и проценты */
.processing.is-indeterminate .processing__spin { display: block; }  /* показываем крутящийся спиннер */
@keyframes procspin { to { transform: rotate(360deg); } }

/* =====================================================================
   PAYWALL / БЛЮР-ГЕЙТ overlay (регистрация / оплата)
   Контент лежит ПОВЕРХ размытого результата (без непрозрачной карточки) —
   результат просвечивает сквозь оверлей (крючок конверсии). Читаемость даёт
   мягкое затемнение по всему стейджу + вертикальный градиент + text-shadow.
   ===================================================================== */
.paywall {
    position: absolute; inset: 0; z-index: 3;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 24px 20px;
    /* лёгкое затемнение всего кадра + усиление снизу для читаемости кнопки/текста */
    background:
        linear-gradient(180deg, rgba(8,8,11,0.30) 0%, rgba(8,8,11,0.20) 42%, rgba(8,8,11,0.72) 100%);
    -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
    animation: paywallIn .32s var(--ease) both;
}
@keyframes paywallIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .paywall { animation: none; } }

.paywall__inner {
    width: 100%; max-width: 380px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
    animation: paywallRise .38s var(--ease) both;
}
@keyframes paywallRise { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .paywall__inner { animation: none; } }

.paywall__check {
    width: 56px; height: 56px; margin: 0 auto 16px;
    display: grid; place-items: center;
    font-size: 26px; color: var(--on-acc);
    background: var(--acc-grad);
    border-radius: 50%;
    box-shadow: 0 6px 20px var(--acc-glow), 0 0 0 6px rgba(255,255,255,0.06);
}
.paywall__title {
    font-family: var(--font-head); font-size: 21px; line-height: 1.2;
    margin-bottom: 8px; color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.paywall__text {
    color: rgba(255,255,255,0.9); font-size: 14px; line-height: 1.45;
    margin-bottom: 18px; max-width: 300px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.65);
}
/* CTA во всю ширину контента + мягкое свечение (переиспользуем градиент акцента) */
.paywall .btn {
    width: 100%; max-width: 320px;
    box-shadow: 0 10px 28px var(--acc-glow);
}
/* мелкая строка-подсказка под кнопкой (напр. «⚡ Открывается сразу после оплаты») */
.paywall__note {
    margin-top: 12px; font-size: 12.5px; font-weight: 600;
    color: var(--acc-soft);
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.paywall__note[hidden] { display: none; }

/* free counter — панель с зелёным «доступно», привлекает внимание */
.tool__free {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: rgba(52, 211, 153, 0.06);
    border: 1px solid rgba(52, 211, 153, 0.28);
    text-align: center;
}
.tool__dots { display: flex; gap: 7px; justify-content: center; margin-bottom: 10px; }
.tool__dots .dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 1px solid var(--line-soft);
    transition: background .3s, box-shadow .3s;
}
.tool__dots .dot.is-on {
    background: var(--ok);
    box-shadow: 0 0 10px var(--ok-glow);
    border-color: transparent;
}
.tool__free-text { color: var(--ink-soft); font-size: 13.5px; font-weight: 600; }
.tool__free-text strong { color: var(--ok-soft); font-weight: 800; }
.tool__free-gift { font-size: 15px; }

/* trust-бейджи под инструментом — короткие «якоря доверия» */
.tool__trust {
    margin-top: 14px;
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 8px 10px;
}
.tool__trust-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line-soft);
    white-space: nowrap;
}
.tool__trust-item svg { width: 14px; height: 14px; color: var(--ok); }

/* ---------- TOOL: компактнее на десктопе ----------
   На ПК инструмент из-за большой области фото + крупных кнопок раздувался.
   Ужимаем ТОЛЬКО десктоп (≥881px) — мобильная вёрстка (≤880px) не затрагивается. */
@media (min-width: 881px) {
    .tool__card { padding: 24px; }
    /* область фото — ландшафтная 5/4 вместо портретной 3/4: карточка перестаёт
       быть «каланчой» и по высоте уравновешивается с текстовым блоком слева.
       Фото не обрезается — .preview__img использует object-fit:contain. */
    .dropzone, .preview__stage { aspect-ratio: 5 / 4; max-height: 440px; }
    /* вторичные действия («Новое фото» + «Скачать») — в один ряд (на мобиле
       остаётся столбик из базового правила .tool__actions-row) */
    .tool__actions-row { flex-direction: row; }

    /* PRO (страница «раздеватор»): левая колонка с фото тянется
       по высоте правой колонки настроек — область загрузки/превью
       больше не «маленький квадрат», а заполняет всю высоту карточки.
       Фото не обрезается — .preview__img использует object-fit:contain. */
    .tool--pro .tool__pro-grid { align-items: stretch; }
    .tool--pro .uploader { display: flex; flex-direction: column; }
    .tool--pro .dropzone,
    .tool--pro .preview__stage {
        aspect-ratio: auto; max-height: none;
        height: 100%; min-height: 480px; flex: 1;
    }
    /* Фото-превью не должно диктовать высоту стейджа: у pro-стейджа снят
       aspect-ratio + max-height, поэтому картинка в обычном потоке растягивала
       весь блок (и колонку настроек через align-items:stretch) под высокое
       вертикальное фото — в состоянии «фото загружено, ещё не обработано».
       Выводим превью из потока (стейдж уже position:relative; overflow:hidden)
       и вписываем через object-fit — как оверлеи .processing/.paywall. */
    .tool--pro .preview__img {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: contain;
    }
}

/* ---------- TOOL: адаптив под телефоны (общий инструмент раздевателя) ---------- */
@media (max-width: 480px) {
    .tool__tabs { margin-bottom: 14px; }
    .tool__tab { padding: 9px 10px; font-size: 13.5px; }
    .dropzone { padding: 28px 16px; }
    .dropzone__icon { width: 60px; height: 60px; margin-bottom: 14px; }
    .dropzone__icon svg { width: 26px; height: 26px; }
    .dropzone__title { font-size: 16px; }
    .dropzone__formats { font-size: 12px; margin-top: 12px; }
    /* кнопка «Выбрать фото» — чуть компактнее (вкл. 375px) */
    .dropzone .btn--acc { padding: 11px 22px; font-size: 14px; }
    /* плашка «бесплатных раздеваний» — компактнее на телефоне */
    .uploader__badge { font-size: 12px; padding: 6px 13px; }
    /* кнопки инструмента — чуть компактнее по вертикали на телефоне */
    .tool__card .btn { padding: 15px 20px; font-size: 15.5px; }
    /* блюр-гейт на телефоне: компактнее, но ничего не обрезается */
    .paywall { padding: 18px 16px; }
    .paywall__check { width: 48px; height: 48px; font-size: 22px; margin-bottom: 12px; }
    .paywall__title { font-size: 18px; }
    .paywall__text { font-size: 13px; margin-bottom: 15px; }
    .paywall .btn { padding: 14px 18px; font-size: 15px; }
    .paywall__note { font-size: 12px; margin-top: 10px; }
}
@media (max-width: 360px) {
    .tool__tab { font-size: 12.5px; gap: 5px; }
    .tool__tab-ico { display: none; }
    .dropzone { padding: 22px 12px; }
    .dropzone__title { font-size: 15px; }
    .dropzone .btn--acc { padding: 10px 18px; font-size: 13.5px; }
    .uploader__badge { font-size: 11.5px; padding: 5px 12px; }
    /* trust-бейджи ужимаем, чтобы влезли на 320px */
    .tool__trust { gap: 6px; }
    .tool__trust-item { font-size: 11.5px; padding: 5px 10px; }
    /* блюр-гейт на очень узких экранах */
    .paywall { padding: 14px 12px; }
    .paywall__check { width: 42px; height: 42px; font-size: 19px; margin-bottom: 10px; }
    .paywall__title { font-size: 16.5px; }
    .paywall__text { font-size: 12.5px; margin-bottom: 13px; }
    .paywall .btn { padding: 13px 14px; font-size: 14px; }
}

/* =====================================================================
   TOOL — pro-вариант (страница «раздеватор»): студия обработки
   2 колонки (загрузка + панель настроек), без режима «оживить»
   ===================================================================== */
.tool__pro-grid {
    display: grid; grid-template-columns: 1fr 300px;
    gap: 22px; align-items: start;
}
.tool__settings { display: flex; flex-direction: column; gap: 20px; }
.tool__set-group { display: flex; flex-direction: column; gap: 10px; }
.tool__set-label {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
}
.tool__set-val { color: var(--acc-soft); font-weight: 700; }

/* сегмент-переключатель (качество / формат) */
.seg {
    display: flex; gap: 5px; padding: 5px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line-soft);
}
.seg__btn {
    flex: 1; padding: 9px 8px;
    border: none; background: transparent;
    color: var(--ink-soft);
    font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
    border-radius: 8px; cursor: pointer;
    transition: color .2s, background .2s;
}
.seg__btn:hover { color: var(--ink); }
.seg__btn.is-active { background: var(--acc-grad); color: var(--on-acc); }

/* чип-сетка (размер груди / телосложение): ровные 2 колонки во всю ширину,
   прямоугольные чипы со скруглением (в стиле сегмента «Качество результата») */
.optgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.opt {
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink-soft);
    font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
    text-align: center; cursor: pointer;
    transition: color .2s, background .2s, border-color .2s;
}
/* нечётный последний чип (напр. «Экстра») — по центру строки, шириной в 1 колонку */
.optgrid .opt:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 4px);
}
.opt:hover { color: var(--ink); border-color: var(--line); }
.opt.is-active {
    background: var(--acc-grad);
    color: var(--on-acc);
    border-color: transparent;
}

/* ---- карточки-картинки «Размер груди» (.bgrid/.bopt) — фирменный стиль Lovice ---- */
.bgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.bopt {
    position: relative;
    display: flex; flex-direction: column;
    padding: 0; overflow: hidden;
    border-radius: 14px;
    border: 1.5px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.bopt__img {
    display: block; position: relative;
    aspect-ratio: 4 / 3; overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
}
.bopt__img img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 42%;
    display: block;
    transition: transform .35s var(--ease), filter .2s;
    filter: saturate(.92) brightness(.92);
}
/* лёгкое затемнение снизу под подпись */
.bopt__img::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10,10,14,0.55) 0%, rgba(10,10,14,0) 42%);
    pointer-events: none;
}
.bopt__label {
    padding: 9px 6px;
    font-family: var(--font-body); font-size: 13px; font-weight: 600;
    color: var(--ink-soft); text-align: center;
    transition: color .2s;
}
/* галочка активного выбора */
.bopt__check {
    position: absolute; top: 8px; right: 8px;
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: var(--on-acc);
    background: var(--acc-grad);
    opacity: 0; transform: scale(.6);
    transition: opacity .2s var(--ease), transform .2s var(--ease);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.bopt:hover {
    border-color: var(--line);
    transform: translateY(-2px);
}
.bopt:hover .bopt__img img { transform: scale(1.05); filter: saturate(1) brightness(1); }
.bopt:hover .bopt__label { color: var(--ink); }
.bopt.is-active {
    border-color: var(--acc);
    box-shadow: 0 0 0 1px var(--acc), 0 0 18px var(--acc-glow);
}
.bopt.is-active .bopt__img img { filter: saturate(1.05) brightness(1); }
.bopt.is-active .bopt__label { color: var(--ink); }
.bopt.is-active .bopt__check { opacity: 1; transform: scale(1); }
.bopt:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* Компактный вариант карточек размера груди для инструмента на ГЛАВНОЙ
   (узкая колонка hero): 4 карточки в один ряд, изображения ниже и подпись мельче.
   Не влияет на pro-страницу «раздеватор» (там .bgrid без модификатора). */
.bgrid--compact {
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}
.bgrid--compact .bopt { border-radius: 11px; border-width: 1.5px; }
.bgrid--compact .bopt__img { aspect-ratio: 3 / 4; }
.bgrid--compact .bopt__label { padding: 6px 3px; font-size: 11px; }
.bgrid--compact .bopt__check {
    top: 5px; right: 5px; width: 17px; height: 17px; font-size: 10px;
}
/* на узких экранах 4 карточки остаются в ряд, но ещё компактнее */
@media (max-width: 420px) {
    .bgrid--compact { gap: 5px; }
    .bgrid--compact .bopt__label { font-size: 10px; letter-spacing: -.2px; }
}



/* тумблер «сохранять фон» */
.tool__set-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 15px; border-radius: 12px;
    background: var(--glass); border: 1px solid var(--line-soft);
}
.tool__set-toggle-text { font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.switch {
    position: relative; width: 46px; height: 26px;
    border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.08);
    transition: background .3s, border-color .3s;
}
.switch__knob {
    position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--ink-soft);
    transition: transform .3s var(--ease), background .3s;
}
.switch.is-on { background: var(--acc-grad); border-color: transparent; }
.switch.is-on .switch__knob { transform: translateX(20px); background: #fff; }

@media (max-width: 760px) {
    .tool__pro-grid { grid-template-columns: 1fr; }
}

/* размер груди в обычном инструменте (главная) — небольшой отступ сверху */
.tool__set-group--solo { margin-top: 18px; }

/* слайдер «Размер груди» (главная + duo): дорожка с точкой + подписи AUTO/S/M/L */
.bsize { gap: 10px; }
.bsize__range {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px; border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.10);
    background-image: linear-gradient(90deg, var(--acc), var(--acc-2));
    background-repeat: no-repeat;
    background-size: var(--fill, 0%) 100%;
    outline: none; cursor: pointer;
}
.bsize__range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; border: 3px solid var(--acc);
    box-shadow: 0 0 10px var(--acc-glow); cursor: pointer;
}
.bsize__range::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; border: 3px solid var(--acc);
    box-shadow: 0 0 10px var(--acc-glow); cursor: pointer;
}
.bsize__scale { display: flex; justify-content: space-between; }
.bsize__tick {
    font-size: 11px; font-weight: 600; letter-spacing: .4px;
    color: var(--ink-mute); transition: color .2s;
}
.bsize__tick.is-active { color: var(--acc-soft); }

/* =====================================================================
   TOOL — duo-вариант (страница «раздеть девушку»): раздеватор с 2 режимами
   Скользящий переключатель «Раздеть/Оживить» + студия оживления.
   Отличается от главной (плоские табы) и razdevator (про-панель).
   ===================================================================== */
/* «скользящая пилюля» — переключатель режимов */
.modeseg {
    position: relative;
    display: grid; grid-template-columns: 1fr 1fr;
    padding: 5px; margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-soft);
}
.modeseg__thumb {
    position: absolute; z-index: 0;
    top: 5px; bottom: 5px; left: 5px;
    width: calc(50% - 5px);
    border-radius: 999px; background: var(--acc-grad);
    box-shadow: 0 6px 18px rgba(226, 58, 92, 0.28);
    transition: transform .3s var(--ease);
}
.tool--duo[data-mode="animate"] .modeseg__thumb { transform: translateX(100%); }
.modeseg__btn {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 14px; border: none; background: transparent; cursor: pointer;
    border-radius: 999px;
    font-family: var(--font-body); font-size: 14.5px; font-weight: 600;
    color: var(--ink-soft); transition: color .25s;
}
.modeseg__btn.is-active { color: var(--on-acc); }
.modeseg__ico { font-size: 12px; }

/* блоки режимов */
.tool__mode { margin-top: 18px; }

/* стейдж оформлен как видеоплеер */
.tool--duo .preview__stage { background: #06060a; }
.tool--duo .dropzone { min-height: 300px; }

/* заголовок секции выбора действия */
.anim__label {
    display: block; margin: 2px 0 11px;
    font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
}
/* подпись под действиями: параметры видео фиксированы (P-Video) */
.anim__note {
    margin: 14px 0 0;
    font-size: 12.5px; color: var(--ink-faint, var(--ink-soft));
    text-align: center; opacity: .8;
}

/* сетка карточек-действий (готовые промты) — 3×2 */
.anim__actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* заблокировано после успешного оживления (до загрузки нового фото) */
.anim__actions.is-locked { pointer-events: none; opacity: .45; filter: saturate(.6); }

.act {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 9px;
    text-align: left; cursor: pointer;
    padding: 15px 14px 14px; border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--line-soft);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    transition: transform .22s var(--ease), border-color .22s, background .22s, box-shadow .22s;
    -webkit-tap-highlight-color: transparent;
}
/* тонкий верхний блик по краю (премиальность) */
.act::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(120% 90% at 50% -20%, rgba(255, 122, 144, 0.10), transparent 60%);
    opacity: 0; transition: opacity .22s var(--ease);
}
.act:hover {
    transform: translateY(-3px);
    border-color: var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}
.act:hover::before { opacity: 1; }
.act:focus-visible { outline: none; border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc-glow); }

.act.is-active {
    border-color: transparent;
    background: linear-gradient(160deg, rgba(255, 77, 109, 0.16), rgba(255, 138, 61, 0.10));
    box-shadow: 0 0 0 1.5px var(--acc), 0 14px 30px rgba(226, 58, 92, 0.28);
    transform: translateY(-1px);
}
.act.is-active::before { opacity: 1; }

.act__ico {
    width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 12px; font-size: 18px; line-height: 1;
    color: var(--acc-2);
    background: rgba(255, 138, 61, 0.12);
    border: 1px solid var(--line);
    transition: transform .22s var(--ease), background .22s, color .22s, border-color .22s, box-shadow .22s;
}
.act:hover .act__ico { transform: scale(1.06); }
.act.is-active .act__ico {
    color: var(--on-acc); background: var(--acc-grad); border-color: transparent;
    box-shadow: var(--shadow-acc);
}
.act__name {
    font-size: 14px; font-weight: 700; color: var(--ink);
    line-height: 1.25; letter-spacing: -0.01em;
}
.act.is-active .act__name { color: #fff; }
.act__desc { font-size: 11.5px; color: var(--ink-mute); line-height: 1.35; }
.act.is-active .act__desc { color: var(--acc-soft); }

/* ---- Видео-превью в карточках действий (стиль как у конкурента) ----
   Кнопка .act--video превращается в вертикальную плитку с зацикленным видео
   на весь фон и подписью-названием поверх нижней части кадра. */
.anim__actions--video { gap: 10px; }
.act--video {
    padding: 0; gap: 0;
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    border: 1.5px solid var(--line-soft);
    background: #06060a;
}
.act--video::before { display: none; }               /* убрать верхний блик (для текстовых карточек) */
.act--video .act__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    background: #06060a;
    transition: transform .3s var(--ease);
}
.act--video:hover { transform: translateY(-3px); }
.act--video:hover .act__video { transform: scale(1.04); }
/* подпись-название поверх нижней части кадра, на градиентной подложке */
.act--video .act__name {
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 2;
    margin: 0; padding: 22px 8px 9px;
    font-size: 12.5px; font-weight: 700; line-height: 1.2;
    color: #fff; text-align: center; letter-spacing: -0.01em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    background: linear-gradient(to top, rgba(6, 6, 10, 0.92) 0%, rgba(6, 6, 10, 0.55) 55%, rgba(6, 6, 10, 0) 100%);
    pointer-events: none;
}
/* активная карточка — акцентная рамка + свечение */
.act--video.is-active {
    border-color: var(--acc);
    box-shadow: 0 0 0 1.5px var(--acc), 0 14px 30px rgba(226, 58, 92, 0.30);
    transform: translateY(-1px);
    background: #06060a;
}
.act--video.is-active .act__name { color: #fff; }
/* галочка-индикатор выбранного действия в углу */
.act--video.is-active::after {
    content: "✓"; position: absolute; z-index: 3; top: 7px; right: 7px;
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 700; color: var(--on-acc);
    background: var(--acc-grad);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
@media (max-width: 560px) {
    .act--video .act__name { font-size: 11.5px; padding: 18px 5px 7px; }
}

/* плёночная панель настроек (формат/качество/камера) */
.anim__settings {
    display: flex; flex-direction: column; gap: 14px; margin-top: 20px;
    padding-top: 18px; border-top: 1px solid var(--line-soft);
}
.anim__row { display: flex; flex-direction: column; gap: 8px; }
.anim__row-label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }

/* мини-иконки соотношения сторон внутри чипов */
.ratio-ico {
    display: inline-block; border: 1.5px solid currentColor; border-radius: 2px;
    margin-right: 7px; vertical-align: middle; opacity: .8;
}
.ratio-ico--9-16 { width: 9px; height: 15px; }
.ratio-ico--1-1 { width: 13px; height: 13px; }
.ratio-ico--16-9 { width: 16px; height: 9px; }

@media (max-width: 560px) {
    .anim__actions { grid-template-columns: 1fr 1fr; }
}


/* =====================================================================
   FOOTER
   ===================================================================== */
.footer {
    position: relative;
    border-top: 1px solid var(--line-soft);
    padding-top: 52px;
    background: rgba(10,10,13,0.4);
}
/* тонкая градиентная акцентная линия поверх серого border-top */
.footer::before {
    content: "";
    position: absolute; top: -1px; left: 0; right: 0; height: 1px;
    background: var(--acc-grad);
    opacity: .5;
}
.footer__inner {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px;
    padding-bottom: 40px;
}
.footer__about { color: var(--ink-soft); font-size: 13.5px; margin-top: 14px; max-width: 300px; line-height: 1.55; }
/* длинный e-mail не должен ломать сетку узкой колонки */
.footer__link--mail { word-break: break-word; }
.footer__head { font-size: 12.5px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--acc-2); margin-bottom: 16px; }
.footer__link {
    display: block; color: var(--ink-soft); font-size: 14px; padding: 5px 0;
    transition: color .2s var(--ease), transform .2s var(--ease);
}
.footer__link:hover { color: var(--acc-soft); transform: translateX(3px); }
.footer__link--soon { color: var(--ink-mute); }
.footer__bottom { position: relative; border-top: 1px solid var(--line-soft); padding: 22px 0; }
.footer__bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer__bottom p { color: var(--ink-mute); font-size: 12.5px; }
.footer__copy { display: inline-flex; align-items: center; gap: 10px; }
/* бейдж «18+» — аккуратная пилюля в акцентной палитре */
.footer__age {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-head); font-size: 11px; font-weight: 700; line-height: 1;
    letter-spacing: .3px; color: var(--acc-soft);
    padding: 4px 8px; border-radius: 999px;
    border: 1px solid var(--line); background: rgba(255, 77, 109, 0.07);
}

/* =====================================================================
   MODAL (pricing)
   ===================================================================== */
.modal {
    position: fixed; inset: 0; z-index: 800;
    display: grid; place-items: center;
    padding: 24px;
}
.modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(6, 6, 8, 0.78);
    backdrop-filter: blur(8px);
    animation: fade .3s var(--ease);
}
.modal__dialog {
    position: relative; z-index: 1;
    width: 100%;
    border-radius: var(--radius-lg);
    border-color: var(--line);
    box-shadow: var(--shadow);
    padding: 36px;
    max-height: 90vh; overflow-y: auto;
    animation: rise .35s var(--ease);
}
.modal__dialog--wide { max-width: 1120px; }
.modal__close {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    /* плотный фон (как в лайтбоксе) — крестик читается на любом фоне карточки */
    background: rgba(17,17,22,0.95);
    border: 1px solid var(--line);
    color: var(--ink); cursor: pointer;
    transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.modal__close:hover { background: rgba(255,77,109,0.18); border-color: var(--acc); color: var(--ink); }
.modal__close svg { display: block; }
/* заголовок/подзаголовок держим в стороне от кнопки закрытия (симметричные поля,
   т.к. текст центрирован) — крестик в углу больше НЕ наезжает на буквы, вкл. 375px */
.modal__title { font-family: var(--font-head); font-size: 30px; text-align: center; padding: 6px 54px 0; }
.modal__sub { text-align: center; color: var(--ink-soft); font-size: 15px; margin: 10px 0 28px; padding: 0 44px; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   PRICING MODAL v4 (2026-09-04) — премиальный радио-СЕЛЕКТОР тарифов.
   Правки по фидбеку: (1) крупнее + fullscreen на мобиле; (2) НЕОНОВАЯ
   переливающаяся ПЛАШКА только сверху (как ribbon в референсе) — фон модалки
   спокойный тёмный; (3) премиальные строки-переключатели; (4) ДИНАМИЧЕСКИЙ блок
   преимуществ — свой у каждого тарифа (js/main.js PLAN_PERKS → #planPerksHead /
   #planPerks). Композиция: ribbon → заголовок → .planpick → преимущества → CTA.
   ===================================================================== */

.pricing-modal {
    max-width: 468px;
    /* верхний padding 0 — плашка .pricing-ribbon прижата к верху во всю ширину;
       контент ниже получает свой отступ через margin-top у .modal__title */
    padding: 0 32px 28px;
    background: linear-gradient(180deg, #16161d, #101015);
    border: 1px solid var(--line);
    /* ВАЖНО: скролл по вертикали — иначе на невысоких экранах низ (CTA) обрезается.
       max-height 90vh наследуется от .modal__dialog. overflow:hidden УБРАН (обрезал низ);
       ribbon не торчит за углы за счёт собственного border-radius сверху. */
    overflow-y: auto;
}

/* КАСТОМНЫЙ СКРОЛЛБАР модалки тарифов — тонкий (6px), коралловый полупрозрачный,
   в палитре сайта (референс со старого проекта, адаптирован под наш акцент).
   Трек прозрачный → полоса «чуть видна» и не спорит с неоновой ribbon.
   Firefox — scrollbar-width/color; WebKit (Chrome/Safari) — ::-webkit-scrollbar. */
.pricing-modal {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 77, 109, 0.35) transparent;
}
.pricing-modal::-webkit-scrollbar { width: 6px; }
.pricing-modal::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.pricing-modal::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255, 122, 144, 0.5), rgba(255, 77, 109, 0.35));
    border-radius: 999px;
    border: 1px solid transparent; background-clip: padding-box;
}
.pricing-modal::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 122, 144, 0.75), rgba(255, 77, 109, 0.6));
}

/* ВЕРХНЯЯ НЕОНОВАЯ ПЛАШКА (оффер) — единственный переливающийся элемент.
   Крупнее (крестик садится по центру внутри неё). Градиент «течёт» за счёт сдвига
   background-position (совместимо со всеми браузерами). Во всю ширину шапки,
   верхние углы скруглены под радиус модалки. */
.pricing-ribbon {
    margin: 0 -32px 0;          /* компенсируем боковой padding модалки → во всю ширину */
    padding: 17px 56px 17px 26px;   /* выше; справа шире — под крестик */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;   /* верхние углы под модалку */
    font-size: 13px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    color: #fff; text-align: center; line-height: 1.3;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
    background: linear-gradient(90deg,
        #ff4d6d, #ff5a8a, #ff8a3d, #ffb347, #ff8a3d, #ff5a8a, #ff4d6d);
    background-size: 300% 100%;
    animation: ribbonflow 7s linear infinite;
    box-shadow: 0 6px 22px rgba(255, 90, 60, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
@keyframes ribbonflow {
    0%   { background-position:   0% 50%; }
    100% { background-position: 300% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .pricing-ribbon { animation: none; }
}

/* крестик — по ЦЕНТРУ высоты плашки (плашка ~54px: 17+13*1.3+17 ≈ 51px → центр ~26px;
   кнопка 36px → top = 26 - 18 = 8px). Полупрозрачный тёмный кружок для читаемости. */
.pricing-modal .modal__close {
    top: 8px; right: 14px;
    width: 36px; height: 36px;
    background: rgba(10, 10, 14, 0.5);
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.pricing-modal .modal__close:hover { background: rgba(255, 77, 109, 0.7); border-color: var(--acc); }

/* заголовок/подзаголовок крупнее (премиальнее). margin-top заголовка задаёт
   отступ от плашки (верхний padding модалки убран). */
.pricing-modal .modal__title { font-size: 34px; padding-top: 0; margin-top: 26px; }
.pricing-modal .modal__sub { font-size: 15px; margin: 12px 0 26px; padding: 0 20px; }

/* контейнер строк-тарифов */
.planpick { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }

/* строка-тариф = кликабельная «radio»-кнопка (крупнее, воздушнее) */
.planrow {
    position: relative;
    display: flex; align-items: center; gap: 15px;
    width: 100%; text-align: left;
    padding: 17px 20px;
    border-radius: 15px;
    border: 1.5px solid var(--line);
    background: linear-gradient(180deg, #22222c, #191921);
    color: var(--ink); cursor: pointer;
    transition: border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.planrow:hover { border-color: rgba(255, 77, 109, 0.55); transform: translateY(-1px); }
.planrow:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* индикатор выбора (кружок с галочкой) */
.planrow__radio {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid #3a3a46;
    color: transparent; background: transparent;
    transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.planrow__radio svg { display: block; }

/* центральный блок: название + мета (кредиты/выгода) */
.planrow__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.planrow__name { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: .2px; }
.planrow__meta { font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* бейдж выгоды рядом с кредитами */
.planrow__save {
    display: inline-block; font-size: 11px; font-weight: 700; color: var(--ok);
    padding: 2px 8px; border-radius: 999px;
    background: rgba(52, 199, 132, 0.14); border: 1px solid rgba(52, 199, 132, 0.32);
}

/* цена справа */
.planrow__price { flex: 0 0 auto; font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -0.5px; white-space: nowrap; }
.planrow__cur { font-size: 16px; font-weight: 700; color: var(--ink-mute); margin-left: 1px; }

/* ВЫБРАННАЯ строка — коралловая неоновая подсветка + залитый radio */
.planrow.is-selected {
    border-color: var(--acc);
    background: linear-gradient(180deg, rgba(255, 77, 109, 0.12), rgba(255, 77, 109, 0.03)), linear-gradient(180deg, #24232d, #1b1a22);
    box-shadow: 0 10px 30px rgba(255, 77, 109, 0.22), 0 0 0 1px rgba(255, 77, 109, 0.35), inset 0 0 22px rgba(255, 77, 109, 0.06);
}
.planrow.is-selected .planrow__radio { border-color: var(--acc); background: var(--acc); color: #fff; box-shadow: 0 0 10px rgba(255, 77, 109, 0.6); }
.planrow.is-selected .planrow__price { color: var(--acc-soft); }

/* featured «Самый выгодный» — ЗОЛОТОЙ акцент рамки/бейджа */
.planrow--acc { border-color: rgba(255, 178, 71, 0.55); margin-top: 5px; }
.planrow--acc:hover { border-color: rgba(255, 178, 71, 0.8); }
.planrow--acc.is-selected {
    border-color: rgba(255, 178, 71, 0.95);
    background: linear-gradient(180deg, rgba(255, 178, 71, 0.16), rgba(255, 178, 71, 0.03)), linear-gradient(180deg, #26232c, #1c1a20);
    box-shadow: 0 12px 34px var(--gold-glow), 0 0 0 1px rgba(255, 178, 71, 0.45), inset 0 0 22px rgba(255, 178, 71, 0.07);
}
.planrow--acc.is-selected .planrow__radio { border-color: #ffb347; background: #ffb347; color: var(--on-gold); box-shadow: 0 0 10px var(--gold-glow); }
.planrow--acc.is-selected .planrow__price { color: #ffcf8f; }
.planrow__badge {
    position: absolute; top: -11px; right: 16px;
    font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
    padding: 4px 12px; border-radius: 999px;
    background: var(--gold-grad); color: var(--on-gold); white-space: nowrap;
    box-shadow: 0 5px 16px var(--gold-glow);
}

/* ДИНАМИЧЕСКИЙ блок преимуществ выбранного тарифа (наполняет js/main.js) */
.planperks__head {
    font-size: 13px; font-weight: 700; color: var(--acc-soft);
    letter-spacing: .2px; margin: 0 0 12px;
}
.planperks {
    display: flex; flex-direction: column; gap: 11px; margin: 0 0 24px; padding: 0; list-style: none;
    opacity: 0; transform: translateY(4px);
}
/* появление списка при смене тарифа (класс is-in ставит js) */
.planperks.is-in { opacity: 1; transform: none; transition: opacity .28s var(--ease), transform .28s var(--ease); }
.planperks li {
    font-size: 14px; color: var(--ink-soft); line-height: 1.42;
    padding-left: 28px; position: relative;
}
.planperks li::before {
    content: "✓"; position: absolute; left: 4px; top: 0;
    color: var(--ok); font-weight: 800; font-size: 15px;
}
/* первый пункт (объём/ценность) — акцентно: ярче, жирнее, со «звездой» */
.planperks li.planperks__lead { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.planperks li.planperks__lead::before { content: "✦"; color: var(--acc); font-size: 14px; }

/* большая CTA оплаты — коралл-градиент + мягкое свечение */
.planpay {
    width: 100%; font-size: 16.5px; font-weight: 700; padding: 16px 22px;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    box-shadow: 0 12px 30px rgba(226, 58, 92, 0.4), 0 0 0 1px rgba(255, 77, 109, 0.25);
}
.planpay svg { flex-shrink: 0; }
.planpay:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(226, 58, 92, 0.5); }

/* строка доверия под кнопкой.
   ВАЖНО: НЕ flex+align-items:center — иначе при переносе текста на 2 строки щит
   «повисал» по центру высоты блока, отдельно от слова. Делаем inline-поток:
   иконка = часть текста и всегда стоит вплотную слева от «Безопасная». */
.plantrust {
    margin: 15px 0 0; font-size: 12.5px; color: var(--ink-mute);
    text-align: center; line-height: 1.45;
}
.plantrust svg {
    display: inline-block; vertical-align: -2px;
    margin-right: 6px; color: var(--ok); flex-shrink: 0;
}

/* кнопка «Поддержка в Telegram» — вторичная, во всю ширину (как в старой модалке).
   Даёт доверие + быстрый контакт, если что-то пошло не так с оплатой. */
.planhelp {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; margin: 16px 0 0;
    padding: 13px 20px; border-radius: var(--radius);
    font-size: 14.5px; font-weight: 700; color: var(--ink-soft);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.planhelp:hover { background: rgba(45, 160, 235, 0.12); border-color: rgba(45, 160, 235, 0.5); color: var(--ink); }
.planhelp__ico { color: #2ea6e6; flex-shrink: 0; }

/* мобилка (≤600px): FULLSCREEN — модалка на весь экран (больше места, как в
   референсе). Паттерн переиспользован из auth-modal (fixed+inset+100dvh). */
@media (max-width: 600px) {
    .modal__dialog.pricing-modal {
        position: fixed; inset: 0;
        width: 100%; max-width: none;
        min-height: 100vh; min-height: 100dvh;
        max-height: none;
        border-radius: 0;
        /* верхний padding 0 — плашка прижата к верху; низ/бока свои */
        padding: 0 18px calc(22px + env(safe-area-inset-bottom, 0px));
        display: flex; flex-direction: column;
        overflow-y: auto;
    }
    /* ribbon во всю ширину: компенсируем мобильный боковой padding (18px).
       На fullscreen верхних скруглений нет — углы прямые. */
    .pricing-ribbon { margin: 0 -18px 0; padding: 15px 48px 15px 20px; font-size: 12.5px; border-radius: 0; }
    /* «Выберите тариф» — в ОДНУ строку на телефоне: убираем большой боковой padding
       (54px из базового .modal__title нужен для крестика-в-углу, но у pricing-модалки
       крестик в ribbon → бока свободны) + nowrap как гарантия. */
    .pricing-modal .modal__title { font-size: 30px; margin-top: 22px; padding-left: 14px; padding-right: 14px; white-space: nowrap; }
    .pricing-modal .modal__sub { font-size: 14.5px; }
    .planpick { gap: 11px; }
    .planrow { padding: 16px; }
}

/* УЗКИЕ экраны (≤360px, напр. 320px): пропорционально ужимаем ВСЁ, чтобы было так
   же аккуратно, как на 375/420px (блоки/шрифты не «распирало»). Идёт ПОСЛЕ блока
   600px → наследует fullscreen и переопределяет размеры точечно. */
@media (max-width: 360px) {
    .modal__dialog.pricing-modal {
        padding: 0 13px calc(20px + env(safe-area-inset-bottom, 0px));
    }
    .pricing-ribbon { margin: 0 -13px 0; padding: 13px 44px 13px 16px; font-size: 11px; letter-spacing: .3px; }
    .pricing-modal .modal__close { top: 7px; right: 11px; width: 32px; height: 32px; }
    /* 320px: ещё уже боковой padding, заголовок остаётся в одну строку
       (white-space: nowrap наследуется из блока ≤600px). */
    .pricing-modal .modal__title { font-size: 24px; margin-top: 18px; padding: 6px 12px 0; }
    .pricing-modal .modal__sub { font-size: 13px; margin: 9px 0 20px; padding: 0 8px; }

    .planpick { gap: 9px; margin-bottom: 20px; }
    .planrow { padding: 13px 14px; gap: 11px; border-radius: 13px; }
    .planrow__radio { width: 20px; height: 20px; }
    .planrow__radio svg { width: 12px; height: 12px; }
    .planrow__info { gap: 3px; }
    .planrow__name { font-size: 15px; }
    .planrow__meta { font-size: 12px; gap: 6px; }
    .planrow__save { font-size: 10px; padding: 2px 6px; }
    .planrow__price { font-size: 21px; }
    .planrow__cur { font-size: 13px; }
    .planrow__badge { font-size: 9px; padding: 3px 9px; top: -10px; right: 12px; }

    .planperks__head { font-size: 12px; margin-bottom: 10px; }
    .planperks { gap: 9px; margin-bottom: 20px; }
    .planperks li { font-size: 13px; padding-left: 24px; }
    .planperks li.planperks__lead { font-size: 13.5px; }
    .planperks li::before { left: 3px; font-size: 14px; }

    .planpay { font-size: 15px; padding: 14px 18px; }
    .plantrust { font-size: 11.5px; }
    .planhelp { font-size: 13.5px; padding: 12px 16px; margin-top: 13px; }
}

/* =====================================================================
   AUTH MODAL (вход через OAuth — Этап 5)
   ===================================================================== */
/* =====================================================================
   AUTH MODAL v2 (2026-09-04) — hero-визуал + value-first композиция.
   Структура: .auth-hero (картинка+overlay+текст) -> .auth-body (вход).
   Фирменный стиль Lovice: тёмный фон, коралл-оранж акценты, glow, radius.
   ===================================================================== */
.auth-modal {
    max-width: 400px;
    padding: 0;                 /* hero и body сами задают паддинги */
    border: 1px solid var(--line);
    background: var(--bg-2);
    /* НЕ ставим overflow:hidden — иначе перебивается базовый
       .modal__dialog{max-height:90vh;overflow-y:auto} и низ модалки обрезается
       на невысоких экранах. Скругление hero-углов делаем на самом .auth-hero. */
}
/* переопределяем мобильный padding общего .modal__dialog (специфичность 0,2,0) */
.modal__dialog.auth-modal { padding: 0; }

/* крестик поверх картинки — плотный фон для читаемости на светлом hero */
.auth-modal .modal__close {
    background: rgba(10,10,14,0.55);
    border-color: rgba(255,255,255,0.22);
    color: #fff;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.auth-modal .modal__close:hover { background: rgba(255,77,109,0.7); border-color: var(--acc); }

/* ---------- HERO ---------- */
.auth-hero {
    position: relative;
    /* тестовое изображение — легко поменять на другое в assets/aoth */
    background:
        linear-gradient(180deg, rgba(12,12,16,0) 40%, rgba(12,12,16,0.55) 78%, var(--bg-2) 100%),
        url('/assets/aoth/seedream-50-pro-7164b7c7.jpg');
    background-size: cover, cover;
    background-position: center 22%, center 22%;
    min-height: 240px;
    display: flex; align-items: flex-end;
    /* скругляем верхние углы вместо overflow:hidden на модалке — фон обрежется по radius */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.auth-hero__overlay {
    position: absolute; inset: 0; pointer-events: none;
    /* лёгкое коралловое подмешивание снизу — в тон бренда */
    background: radial-gradient(120% 80% at 50% 100%, rgba(255,77,109,0.22), transparent 60%);
}
.auth-hero__content {
    position: relative; z-index: 1;
    padding: 0 24px 18px;
    width: 100%;
}
.auth-hero__kicker {
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 700; letter-spacing: .3px;
    color: #fff;
    padding: 5px 11px; border-radius: 999px;
    background: rgba(255,77,109,0.30);
    border: 1px solid rgba(255,122,144,0.45);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    margin-bottom: 10px;
}
.auth-hero__title {
    font-family: var(--font-head);
    font-size: 26px; line-height: 1.1; font-weight: 800;
    letter-spacing: -.5px; margin: 0;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,0.5);
}
.auth-hero__title .acc-text { display: inline; }
.auth-hero__lead {
    margin: 8px 0 0;
    font-size: 13.5px; line-height: 1.4;
    color: rgba(245,243,240,0.9);
    text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}

/* ---------- BODY (вход) ---------- */
.auth-body { padding: 18px 24px 20px; }
.auth-body__title {
    font-family: var(--font-head);
    font-size: 20px; font-weight: 700; text-align: center; margin: 0;
}
.auth-body__sub {
    text-align: center; color: var(--ink-soft);
    font-size: 13.5px; line-height: 1.45; margin: 5px 0 14px;
}

.oauth-list { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.oauthbtn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%;
    padding: 13px 18px;
    border-radius: 12px;
    font-family: var(--font-body); font-weight: 700; font-size: 15px;
    /* premium-объём: тонкая грань + мягкая тень + верхний хайлайт,
       вместо неонового «ореола» — заметность высокая, но не агрессивная */
    border: 1px solid rgba(255,255,255,0.14);
    background: var(--acc-grad);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(255,77,109,0.26), inset 0 1px 0 rgba(255,255,255,0.18);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.oauthbtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(255,77,109,0.32), inset 0 1px 0 rgba(255,255,255,0.22);
}
.oauthbtn__ico {
    flex: 0 0 auto;
    background: #fff; border-radius: 6px; padding: 3px;
    width: 24px; height: 24px;
}
/* Обе OAuth-кнопки выглядят ОДИНАКОВО — фирменный розовый градиент сайта из базового
   .oauthbtn (var(--acc-grad)). Различаются только иконкой и текстом (Google / Яндекс).
   Цветовых переопределений фона у провайдеров НЕТ (по решению: единый вид).
   Единственное исключение — иконка Яндекса: это красная «Я» в круге, и базовая белая
   подложка .oauthbtn__ico обрамляла бы круг белым квадратом. Поэтому для Яндекса подложку
   убираем (круг лежит чисто на градиенте). У Google цветной «G» белая подложка нужна. */
.oauthbtn--yandex .oauthbtn__ico {
    background: transparent; padding: 0;
}

/* ===================== Модалка выбора способа оплаты ===================== */
/* «Вторая линия» убеждения: открывается после «Перейти к оплате». Раскрывает
   ценность выбранного тарифа (кредиты → раздевания/генерации/оживления) + гарантии,
   затем выбор способа (СБП/Карта или Крипта). Палитра — фирменная коралловая.
   Переиспользует базовые .modal / .modal__dialog / .modal__title / .btn--block. */
.paymethod { position: relative; max-width: 420px; text-align: center; padding: 24px 26px 22px; overflow: hidden; }

/* неоновое свечение вверху модалки (декор, за шапкой) — «вау» без пестроты */
.paymethod__glow {
    position: absolute; top: -130px; left: 50%; transform: translateX(-50%);
    width: 300px; height: 210px; pointer-events: none; z-index: 0;
    background: radial-gradient(60% 60% at 50% 50%, rgba(255,77,109,0.38), rgba(255,138,61,0.10) 55%, transparent 72%);
    filter: blur(8px);
}
/* контент над glow; крестик ИСКЛЮЧЁН — у него собственное position:absolute (угол),
   иначе относительное позиционирование из этого правила уводило бы его влево */
.paymethod > *:not(.paymethod__glow):not(.modal__close) { position: relative; z-index: 1; }

/* eyebrow «ОФОРМЛЕНИЕ ТАРИФА» */
.paymethod__eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 0 auto 10px; padding: 6px 13px 6px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
    color: var(--acc-soft); background: rgba(255, 77, 109, 0.12);
    border: 1px solid rgba(255, 77, 109, 0.3);
    box-shadow: 0 4px 16px rgba(255, 77, 109, 0.22);
}
.paymethod__eyebrow svg { color: var(--acc); }

.paymethod__title { font-size: 25px; padding: 0 36px; margin: 0; }

/* строка-ценность под заголовком: кредиты + на что хватит (одной строкой) */
.paymethod__credits {
    margin: 8px auto 13px; max-width: 340px;
    font-size: 13px; line-height: 1.45; color: var(--ink-mute);
}
.paymethod__credits b { color: var(--ink); font-weight: 800; }

/* чипы-гарантии — лёгкие inline-пилюли по центру, мелкая иконка внутри (без плиток) */
.paymethod__chips {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 0 0 16px;
}
.paymethod__chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: 999px;
    font-size: 12px; font-weight: 600; color: var(--ink-soft);
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
}
.paymethod__chip svg { flex: 0 0 auto; display: block; }
.paymethod__chip--acc  svg { color: var(--acc); }
.paymethod__chip--gold svg { color: #ffb347; }
.paymethod__chip--ok   svg { color: var(--ok); }

/* карточка «К оплате» */
.paymethod__order {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 0 0 14px;
    padding: 12px 16px; border-radius: 13px;
    background: linear-gradient(180deg, rgba(255,77,109,0.10), rgba(255,138,61,0.04));
    border: 1px solid rgba(255, 77, 109, 0.3);
    box-shadow: inset 0 0 20px rgba(255, 77, 109, 0.06);
}
.paymethod__order-label { font-weight: 700; font-size: 14.5px; color: var(--ink-soft); }
.paymethod__sum {
    font-family: var(--font-head); font-weight: 800; font-size: 28px; letter-spacing: -0.5px; line-height: 1;
    background: var(--acc-grad); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--acc-soft);
}

/* подпись-разделитель над списком способов */
.paymethod__pick-label {
    text-align: left; margin: 0 0 8px; font-size: 12.5px; font-weight: 700;
    color: var(--acc-soft); letter-spacing: .2px;
}

/* список способов оплаты */
.paymethod__list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.paymethod__opt {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 11px 14px; border-radius: 13px; cursor: pointer; text-align: left;
    background: linear-gradient(180deg, #22222c, #191921);
    border: 1.5px solid var(--line);
    color: var(--ink);
    transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.paymethod__opt:hover { border-color: rgba(255,77,109,0.5); }
.paymethod__opt.is-selected {
    border-color: var(--acc);
    background: linear-gradient(180deg, rgba(255,77,109,0.12), rgba(255,77,109,0.03)), linear-gradient(180deg, #24232d, #1b1a22);
    box-shadow: 0 8px 24px rgba(255,77,109,0.18), inset 0 0 18px rgba(255,77,109,0.05);
}
/* иконка способа (SVG) — акцент у выбранного, приглушённо у остальных */
.paymethod__ico {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-soft);
    background: rgba(255,255,255,0.05); border: 1px solid var(--line);
    transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.paymethod__opt.is-selected .paymethod__ico { color: var(--acc-soft); border-color: rgba(255,77,109,0.4); background: rgba(255,77,109,0.10); }
/* крипта — золотистый биткоин у выбранного (узнаваемость бренда BTC) */
.paymethod__opt.is-selected .paymethod__ico--crypto { color: #f7b733; border-color: rgba(247,183,51,0.45); background: rgba(247,183,51,0.10); }
.paymethod__ico svg { display: block; }

.paymethod__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.paymethod__info b { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.paymethod__info i { font-size: 12px; font-style: normal; color: var(--ink-mute); }
/* галочка-«radio» справа */
.paymethod__tick {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; opacity: 0; transform: scale(.6);
    background: var(--acc);
    box-shadow: 0 0 10px rgba(255,77,109,0.55);
    transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.paymethod__opt.is-selected .paymethod__tick { opacity: 1; transform: none; }
.paymethod__tick svg { display: block; }

/* CTA оплаты — крупная, со свечением (как .planpay) */
.paymethod__go {
    font-size: 16px; font-weight: 700; padding: 14px 22px; margin-bottom: 11px;
    box-shadow: 0 12px 30px rgba(226, 58, 92, 0.4), 0 0 0 1px rgba(255, 77, 109, 0.25);
}
.paymethod__go:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(226, 58, 92, 0.5); }

/* строка доверия под кнопкой */
.paymethod__trust {
    margin: 0 0 10px; font-size: 12px; color: var(--ink-mute); line-height: 1.4;
}
.paymethod__trust svg { display: inline-block; vertical-align: -2px; margin-right: 6px; color: var(--ok); }

/* «← Назад к тарифам» — вторичная текстовая кнопка */
.paymethod__back {
    display: block; width: 100%; background: none; border: 0; cursor: pointer;
    color: var(--ink-mute); font-size: 13px; padding: 3px; margin-bottom: 11px;
    transition: color .18s var(--ease);
}
.paymethod__back:hover { color: var(--ink); }

/* «Поддержка в Telegram» — вторичная кнопка-плашка (доверие + контакт) */
.paymethod__help {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; padding: 10px 18px; border-radius: var(--radius);
    font-size: 13.5px; font-weight: 700; color: var(--ink-soft);
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
    transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.paymethod__help:hover { background: rgba(45, 160, 235, 0.12); border-color: rgba(45, 160, 235, 0.5); color: var(--ink); }
.paymethod__tg-ico { color: #2ea6e6; flex-shrink: 0; }

/* MOBILE: НЕ fullscreen — компактная центрированная карточка, помещается без скролла.
   (.modal даёт центрирование + padding; .modal__dialog — max-height + overflow-y на всякий случай). */
@media (max-width: 600px) {
    .modal { padding: 14px; }
    .modal__dialog.paymethod {
        max-width: 380px; max-height: 94dvh;
        padding: 18px 16px 16px;
    }
    .paymethod__eyebrow { margin-bottom: 9px; }
    .paymethod__title { font-size: 22px; padding: 0 20px; }
    .paymethod__credits { margin: 7px auto 11px; font-size: 12.5px; }
    .paymethod__chips { gap: 6px; margin-bottom: 13px; }
    .paymethod__chip { padding: 5px 10px; font-size: 11.5px; }
    .paymethod__order { padding: 11px 14px; margin-bottom: 12px; }
    .paymethod__sum { font-size: 25px; }
    .paymethod__list { gap: 7px; margin-bottom: 13px; }
    .paymethod__go { padding: 13px 20px; margin-bottom: 10px; }
}
@media (max-width: 360px) {
    .modal { padding: 10px; }
    .modal__dialog.paymethod { padding: 16px 13px 14px; }
    .paymethod__title { font-size: 20px; padding: 0 16px; }
    .paymethod__sum { font-size: 23px; }
    .paymethod__opt { padding: 10px 12px; gap: 10px; }
    .paymethod__ico { width: 38px; height: 38px; }
}
/* НИЗКИЕ экраны (старый iPhone SE 667, альбомные) — максимально ужимаем вертикаль,
   поднимаем лимит высоты, чтобы карточка влезала без внутреннего скролла. */
@media (max-height: 740px) {
    .modal { padding: 8px; }
    .modal__dialog.paymethod { max-height: 98dvh; padding: 13px 16px 11px; }
    .paymethod__glow { top: -140px; height: 180px; }
    .paymethod__eyebrow { margin-bottom: 7px; padding: 5px 11px 5px 9px; }
    .paymethod__title { font-size: 20px; }
    .paymethod__credits { margin: 6px auto 9px; }
    .paymethod__chips { gap: 6px; margin-bottom: 10px; }
    .paymethod__chip { padding: 4px 10px; }
    .paymethod__order { padding: 9px 14px; margin-bottom: 10px; }
    .paymethod__pick-label { margin-bottom: 6px; }
    .paymethod__list { gap: 6px; margin-bottom: 10px; }
    .paymethod__opt { padding: 9px 13px; }
    .paymethod__ico { width: 36px; height: 36px; }
    .paymethod__go { padding: 12px 20px; margin-bottom: 8px; }
    .paymethod__trust { margin-bottom: 7px; }
    .paymethod__back { margin-bottom: 8px; }
    .paymethod__help { padding: 9px 16px; }
}

/* ---------- преимущества (компактно, без большой карточки) ---------- */
.auth-perks {
    list-style: none; margin: 14px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.auth-perk { display: flex; align-items: center; gap: 11px; }
.auth-perk__badge {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px;
    color: var(--acc-soft);
    background: rgba(255, 77, 109, 0.12);
    border: 1px solid var(--line);
}
.auth-perk__ico { display: block; }
.auth-perk__text { font-size: 13.5px; color: var(--ink-soft); line-height: 1.35; }
.auth-perk__text b { color: var(--ink); font-weight: 700; }

.auth-modal__note {
    margin: 14px 0 0; text-align: center;
    font-size: 11.5px; color: var(--ink-mute); line-height: 1.5;
}
.auth-modal__note a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.auth-modal__note a:hover { color: var(--acc); }

/* ---------- MOBILE: full-screen (как у конкурента) ----------
   На телефоне модалка занимает весь экран: hero тянется (flex:1) и показывает
   максимум фото, body прижат к низу и занимает ровно по контенту. Так девушку
   видно лучше, а элементы перестают выглядеть «впихнутыми». */
@media (max-width: 600px) {
    /* fixed+inset выводит диалог из центрирующего грида и padding'а .modal —
       fullscreen без зависимости от :has(). */
    .modal__dialog.auth-modal {
        position: fixed; inset: 0;
        width: 100%; max-width: none;
        min-height: 100vh; min-height: 100dvh;
        max-height: none;
        border: none; border-radius: 0;
        display: flex; flex-direction: column;
    }
    .auth-modal .auth-hero {
        flex: 1 1 auto;
        min-height: 46vh;
        border-radius: 0;
    }
    .auth-modal .auth-body { flex: 0 0 auto; }
}

/* =====================================================================
   CONFIRM MODAL (подтверждение удаления аккаунта)
   ===================================================================== */
.confirm-modal {
    max-width: 380px;
    text-align: center;
    padding: 30px 26px 24px;
}
.confirm-modal__icon {
    width: 54px; height: 54px; margin: 0 auto 16px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: var(--acc-soft);
    background: rgba(255, 77, 109, 0.12);
    border: 1px solid var(--line);
}
.confirm-modal__title { font-family: var(--font-head); font-size: 22px; margin-bottom: 10px; }
.confirm-modal__text { color: var(--ink-soft); font-size: 14px; line-height: 1.5; margin-bottom: 24px; }
.confirm-modal__text b { color: var(--ink); font-weight: 700; }
.confirm-modal__actions { display: flex; flex-direction: column; gap: 10px; }
/* «Да, удалить» — приглушённая danger-кнопка (в противовес подсвеченной «Нет, оставить») */
.confirm-modal__danger {
    background: transparent;
    color: var(--ink-mute);
    border: 1px solid var(--line-soft);
}
.confirm-modal__danger:hover {
    color: var(--acc-soft);
    border-color: var(--acc);
    background: rgba(255, 77, 109, 0.06);
}
.confirm-modal__danger:disabled { opacity: .6; cursor: default; }

/* замок на гейт-элементах для гостя — общий для генератора и аниме:
   батч (count>1), качество 2K, кнопка «Улучшить промпт». */
button[data-count].is-locked,
button[data-quality].is-locked,
.studio__ai-btn.is-locked,
.anime-enhance.is-locked { position: relative; opacity: .78; }
button[data-count].is-locked::after,
button[data-quality].is-locked::after,
.studio__ai-btn.is-locked::after,
.anime-enhance.is-locked::after {
    content: "🔒"; font-size: 9px;
    position: absolute; top: 2px; right: 3px; line-height: 1;
    filter: grayscale(.2);
}

/* =====================================================================
   TOAST
   ===================================================================== */
.toast {
    position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
    z-index: 1200;
    padding: 13px 22px;
    border-radius: 12px;
    background: rgba(17,17,22,0.96);
    border: 1px solid var(--acc);
    color: var(--ink);
    font-size: 14px; font-weight: 500;
    box-shadow: var(--shadow);
    opacity: 0; pointer-events: none;
    transition: opacity .3s, transform .3s var(--ease);
    /* адаптивность: не растягиваем на весь экран, переносим длинный текст */
    max-width: min(92vw, 440px);
    box-sizing: border-box;
    text-align: center;
    line-height: 1.45;
    white-space: normal;
    word-break: break-word;
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* многострочный тост (причина + подсказка) */
.toast--multi { padding: 15px 22px; }
.toast__title { display: block; font-weight: 600; }
.toast__hint {
    display: block;
    margin-top: 5px;
    font-size: 13px; font-weight: 400;
    color: var(--ink-soft, #b8b8c2);
}

/* мобильные: чуть меньше шрифт, отступ от края + safe-area (iPhone) */
@media (max-width: 480px) {
    .toast {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        max-width: calc(100vw - 24px);
        padding: 12px 16px;
        font-size: 13.5px;
    }
    .toast--multi { padding: 13px 16px; }
    .toast__hint { font-size: 12.5px; }
}