/* VELURA - page-generator.css (nsfw-ai-generator only) | gen-* bento/flow/pipe/scene/claim/meter/cheat/playbook/tip/tabs/seo/faq + studio-* | after components.css */

/* ---------- BENTO — возможности (Вариант A «Живой бенто») ---------- */
.gen-bento {
    display: grid; grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(150px, auto); gap: 16px;
    max-width: 1040px; margin: 0 auto;
}
.gen-bento__cell {
    position: relative; overflow: hidden;
    padding: 24px 26px; border-radius: var(--radius); border-color: var(--line-soft);
    transition: transform .35s var(--ease), border-color .3s, box-shadow .35s;
    display: flex; flex-direction: column; gap: 10px;
}
/* тонкая градиентная линия сверху — проявляется на hover */
.gen-bento__cell::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--acc-grad); opacity: 0;
    transition: opacity .35s var(--ease);
}
.gen-bento__cell:hover {
    transform: translateY(-4px); border-color: var(--line);
    box-shadow: 0 18px 42px -26px rgba(255,77,109,0.55);
}
.gen-bento__cell:hover::before { opacity: 1; }

/* иконка — градиентный бейдж в оттенках заката */
.gen-bento__ico {
    width: 48px; height: 48px; display: grid; place-items: center; font-size: 22px;
    border-radius: 14px; color: #fff;
    background: var(--acc-grad);
    box-shadow: 0 8px 20px -8px rgba(255,77,109,0.55);
}
.gen-bento__ico--pink   { background: linear-gradient(135deg,#ff5d8f,#ff4d6d); }
.gen-bento__ico--coral  { background: linear-gradient(135deg,#ff4d6d,#ff6a52); }
.gen-bento__ico--orange { background: linear-gradient(135deg,#ff7a3d,#ff9a3d); }
.gen-bento__ico--amber  { background: linear-gradient(135deg,#ff9a3d,#ffb057); }
.gen-bento__ico--rose   { background: linear-gradient(135deg,#ff6a80,#ff8a3d); }

.gen-bento__cell h3 { font-size: 17.5px; font-weight: 600; }
.gen-bento__cell p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }
.gen-bento__cell p b { color: var(--ink); }

/* мини-пилюля-факт внизу карточки */
.gen-bento__pill {
    margin-top: auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    color: var(--acc-soft); background: rgba(255,77,109,0.10);
    border: 1px solid var(--line-soft);
}

/* крупная цифра-метрика (моно, градиентная) */
.gen-bento__num {
    font-family: var(--font-mono); font-size: 34px; font-weight: 700; line-height: 1;
    background: var(--acc-grad); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* геройская широкая ячейка */
.gen-bento__cell--wide {
    grid-column: span 2;
    background: radial-gradient(130% 150% at 100% 0%, rgba(255,138,61,0.16), rgba(255,77,109,0.05) 45%, transparent 72%);
}
.gen-bento__cell--wide::before { opacity: .55; }
.gen-bento__cell--wide .gen-bento__ico { width: 60px; height: 60px; font-size: 28px; border-radius: 16px; }
.gen-bento__cell--wide h3 { font-size: 21px; font-weight: 700; }
.gen-bento__cell--wide p { font-size: 15px; max-width: 60ch; }

/* высокая ячейка */
.gen-bento__cell--tall {
    grid-row: span 2; justify-content: flex-start;
    background: linear-gradient(180deg, rgba(255,77,109,0.10), rgba(255,255,255,0.02));
}

/* ---------- ПРОМПТ → РЕЗУЛЬТАТ ---------- */
.gen-flow {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    max-width: 1080px; margin: 0 auto;
}
.gen-flow__card {
    padding: 20px; border-radius: var(--radius); border-color: var(--line-soft);
    display: flex; flex-direction: column; gap: 14px;
    transition: transform .3s var(--ease), border-color .3s;
}
.gen-flow__card:hover { transform: translateY(-4px); border-color: var(--line); }
.gen-flow__prompt {
    position: relative; padding: 14px 15px; border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.03); border: 1px solid var(--line-soft);
}
.gen-flow__tag {
    display: inline-block; font-family: var(--font-mono);
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--acc-soft); margin-bottom: 8px;
}
.gen-flow__prompt code {
    display: block; font-family: var(--font-mono);
    font-size: 13px; line-height: 1.6; color: var(--ink-soft);
}
.gen-flow__arrow {
    display: flex; align-items: center; gap: 10px;
    color: var(--ink-mute); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em;
}
.gen-flow__arrow::before, .gen-flow__arrow::after {
    content: ""; height: 1px; flex: 1; background: var(--line-soft);
}
.gen-flow__result {
    position: relative; aspect-ratio: 4/5; border-radius: var(--radius-sm);
    overflow: hidden; border: 1px solid var(--line-soft);
}
.gen-flow__result::after {
    content: ""; position: absolute; inset: 0;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    background: rgba(20,16,16,0.14);
}
.gen-flow__style {
    position: absolute; z-index: 2; bottom: 10px; left: 10px;
    font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 8px;
    background: var(--acc); color: var(--on-acc);
}
.gen-grad--1 { background: radial-gradient(120% 120% at 60% 30%, rgba(255,77,109,0.38), #241620); }
.gen-grad--2 { background: radial-gradient(120% 120% at 60% 30%, rgba(255,138,61,0.34), #241d14); }
.gen-grad--3 { background: radial-gradient(120% 120% at 60% 30%, rgba(255,106,82,0.36), #241716); }

/* ---------- КАК ЭТО РАБОТАЕТ — конвейер из 4 шагов ---------- */
.gen-pipe {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
    max-width: 1180px; margin: 0 auto;
}
.gen-pipe__step {
    position: relative; padding: 26px 22px 24px;
    border-radius: var(--radius); border-color: var(--line-soft);
    display: flex; flex-direction: column; gap: 11px; overflow: hidden;
    transition: transform .3s var(--ease), border-color .3s;
}
.gen-pipe__step::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--acc-grad);
}
.gen-pipe__step:hover { transform: translateY(-5px); border-color: var(--line); }
.gen-pipe__top {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 3px;
}
.gen-pipe__num {
    width: 46px; height: 46px; border-radius: 14px; flex: none;
    display: grid; place-items: center;
    font-family: var(--font-head); font-size: 22px; font-weight: 700;
    color: var(--on-acc); background: var(--acc-grad);
    box-shadow: 0 8px 22px rgba(255,77,109,0.26);
}
.gen-pipe__ico { font-size: 26px; line-height: 1; opacity: .92; }
.gen-pipe__t { font-size: 16.5px; font-weight: 600; color: var(--ink); margin: 0; }
.gen-pipe__d { font-size: 13.5px; line-height: 1.62; color: var(--ink-soft); margin: 0; }
.gen-pipe__meta {
    margin-top: auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
    color: var(--acc-soft); background: rgba(255,77,109,0.10);
    border: 1px solid rgba(255,77,109,0.22);
}
.gen-pipe__step:not(:last-child)::after {
    content: "→"; position: absolute; z-index: 3;
    top: 42px; right: -30px; width: 30px; text-align: center;
    font-size: 20px; font-weight: 700; color: var(--acc);
}
@media (max-width: 900px) {
    .gen-pipe { grid-template-columns: 1fr 1fr; gap: 20px; }
    .gen-pipe__step:not(:last-child)::after { display: none; }
}
@media (max-width: 520px) {
    .gen-pipe { grid-template-columns: 1fr; }
}

/* ---------- ВИТРИНА СЦЕН — «Спотлайт» (реальные примеры) ---------- */
.gen-scenes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 22px;
    max-width: 1040px;
    margin: 0 auto;
}
.gen-scene {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--acc-soft);
    background: #14141a;
    text-decoration: none;
    isolation: isolate;
    box-shadow: 0 30px 60px -32px rgba(255,77,109,.5);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.gen-scene--side { transform: translateY(18px); }
.gen-scene--spot {
    aspect-ratio: 3 / 4.35;
    transform: translateY(-14px);
}
.gen-scene:hover {
    transform: translateY(-6px);
    border-color: var(--acc-soft);
    box-shadow: 0 34px 66px -30px rgba(255,77,109,.6);
}
.gen-scene--spot:hover { transform: translateY(-22px); }

.gen-scene__img {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center top;
    transform: scale(1.02);
    filter: saturate(1.02);
    transition: transform 1.1s var(--ease), filter .5s var(--ease);
}
.gen-scene:hover .gen-scene__img { transform: scale(1.09); filter: saturate(1.08) contrast(1.03); }

.gen-scene__shade {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(8,8,11,.92) 0%, rgba(8,8,11,.55) 34%, rgba(8,8,11,.05) 60%, rgba(8,8,11,0) 100%);
    transition: background .5s var(--ease);
}
.gen-scene:hover .gen-scene__shade {
    background: linear-gradient(to top, rgba(8,8,11,.96) 0%, rgba(8,8,11,.72) 46%, rgba(8,8,11,.28) 72%, rgba(8,8,11,.05) 100%);
}
.gen-scene::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 3;
    background: var(--acc-grad);
    opacity: 1; transition: opacity .45s var(--ease);
}

.gen-scene__tag {
    position: absolute; top: 14px; left: 14px; z-index: 3;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ink);
    background: rgba(12,12,16,.55); border: 1px solid var(--line);
    backdrop-filter: blur(8px);
}
.gen-scene__tag::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--acc-grad);
}

.gen-scene__body {
    position: absolute; inset: auto 0 0 0; z-index: 3;
    padding: 20px 18px;
    display: flex; flex-direction: column; gap: 8px;
}
.gen-scene__title {
    font-family: var(--font-head);
    font-size: 20px; font-weight: 600; line-height: 1.15;
    color: var(--ink); margin: 0;
}
.gen-scene--spot .gen-scene__title { font-size: 23px; }

.gen-scene__reveal {
    display: grid; grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .5s var(--ease), opacity .45s var(--ease);
}
.gen-scene:hover .gen-scene__reveal { grid-template-rows: 1fr; opacity: 1; }
.gen-scene__reveal-inner {
    overflow: hidden;
    display: flex; flex-direction: column; gap: 12px; padding-top: 4px;
}
.gen-scene__desc {
    font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 0;
}
.gen-scene__prompt {
    font-family: var(--font-mono);
    font-size: 11.5px; line-height: 1.45; color: var(--ink-mute);
    padding: 8px 10px; border-radius: var(--radius-sm);
    background: rgba(255,255,255,.04); border: 1px solid var(--line-soft);
    word-break: break-word;
}
.gen-scene__link {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    font-size: 13px; font-weight: 600; color: var(--acc-soft);
    transition: gap .3s var(--ease), color .3s var(--ease);
}
.gen-scene:hover .gen-scene__link { gap: 10px; color: var(--acc); }

@media (max-width: 860px) {
    .gen-scenes { grid-template-columns: 1fr; gap: 18px; max-width: 460px; }
    .gen-scene, .gen-scene--spot, .gen-scene--side {
        transform: none; aspect-ratio: 4 / 5;
    }
    .gen-scene__reveal { grid-template-rows: 1fr; opacity: 1; }
    .gen-scene::before { opacity: 1; }
    .gen-scene__shade {
        background: linear-gradient(to top, rgba(8,8,11,.96) 0%, rgba(8,8,11,.72) 46%, rgba(8,8,11,.28) 72%, rgba(8,8,11,.05) 100%);
    }
}

/* ---------- ПОЧЕМУ VELURA ЛУЧШАЯ — заявление + таблица сравнения ---------- */
.gen-claim {
    max-width: 900px; margin: 0 auto 34px;
    padding: 22px 28px; border-radius: var(--radius-lg);
    border: 1px solid rgba(255,77,109,0.30);
    background: linear-gradient(120deg, rgba(255,77,109,0.10), rgba(255,138,61,0.06));
    display: flex; align-items: center; gap: 18px;
    box-shadow: 0 0 26px rgba(255,77,109,0.08);
}
.gen-claim__ico {
    flex: none; width: 54px; height: 54px; border-radius: 16px;
    display: grid; place-items: center; font-size: 26px;
    color: var(--on-acc); background: var(--acc-grad);
    box-shadow: 0 8px 22px rgba(255,77,109,0.26);
}
.gen-claim__text { font-size: 16px; line-height: 1.62; color: var(--ink); }
.gen-claim__text b { color: var(--acc-soft); font-weight: 700; }
@media (max-width: 560px) { .gen-claim { flex-direction: column; text-align: center; } }

/* ---------- Бейдж «Защита 18+» в шпаргалке настроек (#tips) ---------- */
.gen-cheat__badge18 {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    margin-top: 2px;
    font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px;
    color: var(--on-acc); background: var(--acc-grad);
}

/* ---------- КАК ПОЛУЧИТЬ ЛУЧШИЙ РЕЗУЛЬТАТ — плейбук (приёмы + шпаргалка) ---------- */
.gen-playbook {
    display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 20px;
    max-width: 1080px; margin: 0 auto; align-items: start;
}
.gen-tips { display: flex; flex-direction: column; gap: 12px; }
.gen-tip {
    position: relative; overflow: hidden;
    display: flex; gap: 16px; align-items: flex-start;
    padding: 18px 20px 18px 22px; border-radius: var(--radius); border-color: var(--line-soft);
    transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.gen-tip::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--acc-grad); opacity: .5; transition: opacity .3s;
}
.gen-tip:hover { transform: translateY(-3px); border-color: var(--line); box-shadow: 0 16px 36px -28px rgba(255,77,109,.6); }
.gen-tip:hover::before { opacity: 1; }
.gen-tip__num {
    flex: none; min-width: 30px;
    font-family: var(--font-head); font-weight: 700; font-size: 30px; line-height: 1;
    color: transparent; background: var(--acc-grad);
    -webkit-background-clip: text; background-clip: text;
}
.gen-tip__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gen-tip__body h3 { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.gen-tip__body p { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.gen-tip__body b { color: var(--acc-soft); font-weight: 600; }
.gen-tip__pill {
    align-self: flex-start; margin-top: 2px;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
    color: var(--acc-soft); background: rgba(255,77,109,.10); border: 1px solid var(--line-soft);
}

/* шпаргалка настроек — стеклянная панель со шкалами «sweet spot» */
.gen-cheat {
    position: sticky; top: 88px;
    padding: 24px 24px 22px; border-radius: var(--radius-lg); border-color: var(--line);
    display: flex; flex-direction: column; gap: 18px;
    background: linear-gradient(180deg, rgba(255,77,109,.06), rgba(255,255,255,.02));
}
.gen-cheat__head { display: flex; align-items: center; gap: 13px; }
.gen-cheat__ico {
    flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
    font-size: 22px; color: var(--on-acc); background: var(--acc-grad);
    box-shadow: 0 8px 20px -8px rgba(255,77,109,.55);
}
.gen-cheat__title { font-family: var(--font-head); font-size: 19px; font-weight: 600; line-height: 1.15; }
.gen-cheat__sub { font-size: 12.5px; color: var(--ink-mute); margin-top: 3px; }

.gen-meter { display: flex; flex-direction: column; gap: 7px; }
.gen-meter__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gen-meter__name { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .05em; color: var(--ink); }
.gen-meter__rec {
    font-size: 11.5px; font-weight: 600; color: var(--acc-soft);
    padding: 3px 9px; border-radius: 999px; background: rgba(255,77,109,.10); border: 1px solid var(--line-soft);
}
.gen-meter__track {
    position: relative; height: 8px; border-radius: 999px;
    background: rgba(255,255,255,.06); border: 1px solid var(--line-soft);
}
.gen-meter__zone {
    position: absolute; top: -1px; bottom: -1px; border-radius: 999px;
    background: var(--acc-grad); opacity: .34;
}
.gen-meter__dot {
    position: absolute; top: 50%; width: 15px; height: 15px; border-radius: 50%;
    transform: translate(-50%, -50%);
    background: #fff; border: 3px solid var(--acc); box-shadow: 0 0 10px var(--acc-glow);
}
.gen-meter__scale {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute);
}
.gen-meter__hint { font-size: 12px; line-height: 1.48; color: var(--ink-soft); }
.gen-meter__hint b { color: var(--acc-soft); font-weight: 700; }

.gen-cheat__row { display: flex; flex-direction: column; gap: 8px; }
.gen-cheat__label {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute);
}
.gen-cheat__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.gen-cheat__chip {
    font-size: 12px; font-weight: 600; color: var(--ink-soft);
    padding: 6px 11px; border-radius: 999px;
    background: rgba(255,255,255,.04); border: 1px solid var(--line-soft);
}
.gen-cheat__chip.is-rec { color: var(--on-acc); background: var(--acc-grad); border-color: transparent; }
.gen-cheat__note {
    font-size: 12.5px; line-height: 1.5; color: var(--ink-soft);
    padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.gen-cheat__note b { color: var(--acc-soft); font-weight: 700; }

@media (max-width: 880px) {
    .gen-playbook { grid-template-columns: 1fr; max-width: 640px; }
    .gen-cheat { position: static; }
}
@media (max-width: 700px) {
    .gen-tip { padding: 16px 16px 16px 18px; }
}
/* На телефоне чипсы шпаргалки настроек растягиваются и делят ширину строки поровну,
   чтобы не оставалось пустого места справа (см. #tips). Десктоп/планшет — без изменений. */
@media (max-width: 560px) {
    .gen-cheat__chip { flex: 1 1 auto; justify-content: center; text-align: center; }
}

/* ---------- ГАЛЕРЕЯ-МОЗАИКА С ФИЛЬТРОМ ---------- */
.gen-tabs {
    display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-bottom: 28px;
}
.gen-tab {
    padding: 10px 20px; border-radius: 999px; cursor: pointer;
    font-family: var(--font-body); font-size: 14.5px; font-weight: 600;
    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;
}
.gen-tab:hover { color: var(--ink); border-color: var(--line); }
.gen-tab.is-on { background: var(--acc-grad); color: var(--on-acc); border-color: transparent; }

/* ---------- SEO-ТЕКСТ — генератор 18+ (лонгрид, одна колонка по центру) ---------- */
.gen-seo {
    max-width: 900px; margin: 0 auto;
    padding: 50px 54px; border-radius: var(--radius-lg); border-color: var(--line);
    box-shadow: var(--shadow);
}
.gen-seo__title {
    font-family: var(--font-head); font-size: clamp(28px, 3.4vw, 38px);
    font-weight: 700; line-height: 1.16; letter-spacing: -.4px; margin: 12px 0 24px;
}
.gen-seo p { color: var(--ink-soft); font-size: 17.5px; line-height: 1.85; margin-bottom: 18px; }
.gen-seo p:last-of-type { margin-bottom: 0; }
.gen-seo__lead { font-size: 19px; color: var(--ink); }
.gen-seo__lead::first-letter {
    font-family: var(--font-head); font-size: 60px; font-weight: 700; line-height: .78;
    float: left; margin: 8px 14px 0 0;
    color: transparent;
    background: linear-gradient(135deg, var(--acc-2), var(--acc));
    -webkit-background-clip: text; background-clip: text;
}
.gen-seo h3 {
    position: relative;
    font-family: var(--font-head); font-size: 23px; font-weight: 600; line-height: 1.25;
    color: var(--ink); margin: 34px 0 12px; padding-left: 18px;
}
.gen-seo h3::before {
    content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px;
    border-radius: 3px; background: var(--acc-grad);
}
.gen-seo strong { color: var(--acc-soft); font-weight: 600; }
.gen-seo__cta-wrap {
    margin-top: 34px; padding-top: 28px; text-align: center;
    border-top: 1px solid var(--line-soft);
}

/* ---------- FAQ — одна колонка по центру (аккордеон без «прыжков») ---------- */
.gen-faq .faq__list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin: 0 auto; }
.gen-faq .faq__item { transition: border-color .25s, background .25s; }
.gen-faq .faq__item[open] { background: rgba(255,77,109,0.04); }
.gen-faq .faq__q { font-size: 17px; }
.gen-faq .faq__a { font-size: 15.5px; line-height: 1.7; }


/* ---- responsive for generator-only gen-* ---- */
@media (max-width: 880px) {
    .gen-bento { grid-template-columns: 1fr 1fr; }
    .gen-bento__cell--wide, .gen-bento__cell--tall { grid-column: auto; grid-row: auto; }
    .gen-flow { grid-template-columns: 1fr; max-width: 520px; }
    .gen-seo { padding: 36px 30px; }
}
@media (max-width: 560px) {
    .gen-bento { grid-template-columns: 1fr; }
    .gen-console__out { grid-template-columns: repeat(2, 1fr); }
    .gen-seo { padding: 28px 20px; }
    .gen-seo p { font-size: 16.5px; }
    .gen-seo__lead { font-size: 17.5px; }
    .gen-seo h3 { font-size: 20px; }
}

/* =====================================================================
   СТУДИЯ ГЕНЕРАЦИИ (nsfw-ai-generator) — интерактивный инструмент
   Двухколоночная студия: рабочая зона (стейдж + промпт + теги) слева,
   панель настроек справа. Отдельный визуальный слой studio-*.
   ===================================================================== */
.studio {
    display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px;
    max-width: 1120px; margin: 0 auto; text-align: left; align-items: start;
}
.studio__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---------- Стейдж результата ---------- */
.studio__stage {
    position: relative; border-radius: var(--radius-lg); border-color: var(--line);
    box-shadow: var(--shadow); min-height: 440px;
    display: grid; place-items: center; padding: 24px; overflow: hidden;
}
/* В состоянии результатов высоту диктует контент, а не min-height — иначе
   горизонтальные кадры (16:9) оставляют большие пустоты сверху/снизу. */
.studio__stage[data-state="results"] { min-height: 0; }
.studio__demo {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--acc-soft); background: rgba(255,77,109,0.12);
    border: 1px solid rgba(255,77,109,0.28); padding: 4px 10px; border-radius: 999px;
}
.studio__empty { text-align: center; max-width: 340px; }
.studio__empty-ico {
    width: 64px; height: 64px; margin: 0 auto 16px; display: grid; place-items: center;
    font-size: 28px; border-radius: 18px; color: var(--acc-2);
    background: rgba(255,138,61,0.10); border: 1px solid var(--line);
}
.studio__empty-title { font-family: var(--font-head); font-size: 21px; margin-bottom: 8px; }
.studio__empty-sub { color: var(--ink-mute); font-size: 14.5px; }

/* загрузка */
.studio__loading { text-align: center; }
.studio__spinner {
    width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.10); border-top-color: var(--acc);
    animation: stSpin .9s linear infinite;
}
@keyframes stSpin { to { transform: rotate(360deg); } }
.studio__loading-text { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 14px; }
.studio__progress {
    width: 220px; max-width: 60vw; height: 6px; margin: 0 auto; border-radius: 999px;
    background: rgba(255,255,255,0.08); overflow: hidden;
}
.studio__progress span {
    display: block; height: 100%; width: 0; border-radius: 999px;
    background: var(--acc-grad); transition: width .2s linear;
}

/* сетка результатов.
   Раскладка зависит от количества И от ориентации формата (data-orient).
   Горизонтальные кадры (16:9 → landscape) требуют другой сетки, иначе плитки
   выходят крошечными и холст остаётся полупустым. */
.studio__results { width: 100%; display: grid; gap: 12px; justify-content: center; }

/* один результат: ширина подстраивается под ориентацию */
.studio__results[data-count="1"] { grid-template-columns: minmax(0, 340px); }                 /* дефолт = портрет */
.studio__results[data-count="1"][data-orient="square"]    { grid-template-columns: minmax(0, 460px); }
.studio__results[data-count="1"][data-orient="landscape"] { grid-template-columns: minmax(0, min(100%, 900px)); }

/* 4 результата: 2 колонки для любой ориентации */
.studio__results[data-count="4"] { grid-template-columns: repeat(2, 1fr); }

/* 8 результатов: портрет/квадрат — 4 колонки; горизонталь — 2 колонки (крупнее) */
.studio__results[data-count="8"] { grid-template-columns: repeat(4, 1fr); }
.studio__results[data-count="8"][data-orient="landscape"] { grid-template-columns: repeat(2, 1fr); }
.studio__tile {
    position: relative; border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--line-soft); background: #241620;
    animation: stFade .5s var(--ease) both;
}
@keyframes stFade { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.studio__tile::before {
    content: ""; position: absolute; inset: 0;
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    background: rgba(20,16,16,0.14);
}
.studio__tile-actions {
    position: absolute; inset: 0; z-index: 2; opacity: 0;
    display: flex; align-items: flex-end; justify-content: center; gap: 8px;
    padding: 12px; background: linear-gradient(180deg, transparent 55%, rgba(8,8,11,0.78));
    transition: opacity .25s var(--ease);
}
.studio__tile:hover .studio__tile-actions { opacity: 1; }
.studio__tile-btn {
    width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
    display: grid; place-items: center; font-size: 15px;
    color: var(--ink); background: rgba(20,16,16,0.7);
    border: 1px solid var(--line-soft); transition: background .2s, border-color .2s, transform .2s;
}
.studio__tile-btn:hover { background: var(--acc); color: var(--on-acc); border-color: transparent; transform: translateY(-2px); }
.studio__tile-badge {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    width: 20px; height: 20px; display: grid; place-items: center;
    font-size: 11px; font-weight: 700; border-radius: 6px;
    color: var(--on-acc); background: var(--acc-grad);
}

/* ---------- Лайтбокс просмотра изображения ---------- */
.studio__lightbox { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 24px; }
.studio__lightbox__backdrop { position: absolute; inset: 0; background: rgba(6,6,8,0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.studio__lightbox__stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 96vw; max-height: 92vh; }
.studio__lightbox__img { max-width: 96vw; max-height: 78vh; width: auto; height: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); object-fit: contain; background: #1a1620; }
.studio__lightbox__close {
    position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; background: rgba(17,17,22,0.95); border: 1px solid var(--line); color: var(--ink);
    font-size: 24px; line-height: 1; display: grid; place-items: center; transition: border-color .2s, background .2s;
}
.studio__lightbox__close:hover { border-color: var(--acc); background: rgba(255,77,109,0.18); }
.studio__lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
    cursor: pointer; background: rgba(17,17,22,0.7); border: 1px solid var(--line-soft); color: var(--ink);
    font-size: 26px; line-height: 1; display: grid; place-items: center; transition: border-color .2s, background .2s;
}
.studio__lightbox__nav:hover { border-color: var(--acc); background: rgba(255,77,109,0.18); }
.studio__lightbox__nav--prev { left: -62px; }
.studio__lightbox__nav--next { right: -62px; }
.studio__lightbox__bar { display: flex; gap: 10px; }
.studio__lightbox__btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; cursor: pointer;
    font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink);
    background: rgba(255,255,255,0.06); border: 1px solid var(--line-soft);
    transition: background .2s, border-color .2s, transform .2s;
}
.studio__lightbox__btn:hover { background: var(--acc); color: var(--on-acc); border-color: transparent; transform: translateY(-2px); }
@media (max-width: 640px) {
    /* На телефоне сцена/картинка ограничиваются шириной экрана с учётом паддинга,
       иначе широкие кадры (16:9, 1:1) раздувают сцену на 96vw и выносят кнопки за край. */
    .studio__lightbox { padding: 12px; }
    .studio__lightbox__stage { max-width: 100%; }
    .studio__lightbox__img { max-width: 100%; max-height: 72vh; }
    /* Крестик — внутрь верхнего-правого угла (а не наружу сцены), чтобы не срезался краем. */
    .studio__lightbox__close { top: 8px; right: 8px; }
    /* Стрелки — наложены на края картинки внутри экрана. */
    .studio__lightbox__nav { width: 40px; height: 40px; font-size: 22px; }
    .studio__lightbox__nav--prev { left: 4px; }
    .studio__lightbox__nav--next { right: 4px; }
    .studio__lightbox__btn span { display: none; }
}

/* ---------- Панель промпта ---------- */
.studio__promptbar { border-radius: var(--radius); border-color: var(--line); padding: 16px; }
.studio__tabs { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.studio__tab {
    padding: 7px 15px; border-radius: 999px; cursor: pointer;
    font-family: var(--font-body); font-size: 14px; font-weight: 600; 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;
}
.studio__tab:hover { color: var(--ink); border-color: var(--line); }
.studio__tab.is-on { background: var(--acc-grad); color: var(--on-acc); border-color: transparent; }
.studio__ai {
    margin-left: auto; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: var(--ink-soft); user-select: none;
}
.studio__ai input { position: absolute; opacity: 0; width: 0; height: 0; }
.studio__ai-track {
    position: relative; width: 40px; height: 23px; border-radius: 999px;
    background: rgba(255,255,255,0.10); border: 1px solid var(--line-soft); transition: background .3s, border-color .3s;
}
.studio__ai-knob {
    position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%;
    background: var(--ink-soft); transition: transform .3s var(--ease), background .3s;
}
.studio__ai input:checked + .studio__ai-track { background: var(--acc-grad); border-color: transparent; }
.studio__ai input:checked + .studio__ai-track .studio__ai-knob { transform: translateX(17px); background: #fff; }
.studio__ai input:checked ~ .studio__ai-txt { color: var(--acc-soft); }
.studio__input {
    width: 100%; min-height: 96px; resize: vertical;
    background: rgba(255,255,255,0.04); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
    padding: 13px 14px; color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.55;
    transition: border-color .2s, box-shadow .2s;
}
.studio__input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(255,77,109,0.12); }
.studio__input.is-error { border-color: var(--acc); animation: stShake .4s; }
@keyframes stShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} }
.studio__prompt-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.studio__count { font-size: 12.5px; color: var(--ink-mute); }
.studio__clear {
    background: none; border: none; cursor: pointer; font-family: var(--font-body);
    font-size: 12.5px; font-weight: 600; color: var(--acc-soft); transition: color .2s;
}
.studio__clear:hover { color: var(--acc); text-decoration: underline; }

/* ---------- Быстрый старт ---------- */
.studio__preset {
    padding: 8px 14px; border-radius: 999px; cursor: pointer;
    font-family: var(--font-body); font-size: 13px; font-weight: 600; 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, transform .2s;
}
.studio__preset:hover { color: var(--ink); border-color: var(--acc); transform: translateY(-2px); }
.studio__dice {
    padding: 9px 16px; border-radius: 999px; cursor: pointer;
    font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--acc-soft);
    background: rgba(255,77,109,0.08); border: 1px solid var(--line); transition: border-color .2s, background .2s;
}
.studio__dice:hover { border-color: var(--acc); background: rgba(255,77,109,0.14); }

/* Быстрый старт — заголовок-ряд + ряд карусели */
.studio__quick { display: flex; flex-direction: column; align-items: stretch; gap: 9px; }
.studio__quick__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.studio__quick-label { flex: none; white-space: nowrap; font-weight: 700; color: var(--acc-soft); font-size: 13px; }
.studio__carousel { display: flex; align-items: center; gap: 8px; }
.studio__carousel__nav {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: rgba(255,255,255,0.05); border: 1px solid var(--line-soft);
    color: var(--ink); font-size: 18px; line-height: 1; padding: 0;
    transition: border-color .2s, background .2s;
}
.studio__carousel__nav:hover { border-color: var(--acc); background: rgba(255,77,109,0.12); }
.studio__presets {
    display: flex; gap: 8px;
    flex: 1 1 auto; min-width: 0; flex-wrap: nowrap;
    overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none; padding: 6px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
.studio__presets::-webkit-scrollbar { display: none; }
.studio__quick .studio__preset {
    flex: none; scroll-snap-align: start;
    display: inline-flex; align-items: center; gap: 7px;
}
.studio__preset__ico { font-size: 15px; line-height: 1; }
.studio__preset__txt { white-space: nowrap; }

/* ---------- Вспомогательные теги ---------- */
.studio__tags { border-radius: var(--radius); border-color: var(--line-soft); padding: 14px; }
.studio__search {
    width: 100%; padding: 10px 14px; border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.04); border: 1px solid var(--line-soft);
    color: var(--ink); font-family: var(--font-body); font-size: 14px; margin-bottom: 12px;
    transition: border-color .2s;
}
.studio__search:focus { outline: none; border-color: var(--acc); }

/* лента категорий */
.studio__tag-cats {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
    padding-bottom: 12px; border-bottom: 1px solid var(--line-soft);
    transition: opacity .15s;
}
.studio__tag-cats.is-searching { opacity: .35; pointer-events: none; }
.studio__tagcat {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: 999px; cursor: pointer;
    font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
    background: rgba(255,255,255,0.03); border: 1px solid var(--line-soft);
    transition: color .15s, background .15s, border-color .15s;
}
.studio__tagcat:hover { color: var(--ink); border-color: var(--line); }
.studio__tagcat.is-on { background: var(--acc-grad); color: var(--on-acc); border-color: transparent; }
.studio__tagcat-ico { font-size: 14px; line-height: 1; }
.studio__tagcat-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; line-height: 1;
    background: var(--acc); color: var(--on-acc);
}
.studio__tagcat.is-on .studio__tagcat-badge { background: rgba(0,0,0,0.28); }

/* облако чипов активной категории */
.studio__tag-cloud {
    display: flex; flex-wrap: wrap; gap: 6px;
    max-height: 176px; overflow-y: auto; padding-right: 2px;
}
.studio__tagchip {
    padding: 6px 11px; border-radius: 999px; cursor: pointer;
    font-family: var(--font-body); font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
    background: rgba(255,255,255,0.04); border: 1px solid var(--line-soft);
    transition: color .15s, background .15s, border-color .15s;
}
.studio__tagchip::before { content: "+ "; color: var(--acc-soft); font-weight: 700; }
.studio__tagchip:hover { color: var(--ink); border-color: var(--line); }
.studio__tagchip.is-on { background: var(--acc-grad); color: var(--on-acc); border-color: transparent; }
.studio__tagchip.is-on::before { content: "✓ "; color: var(--on-acc); }

/* выбранные теги (строка с ×) */
.studio__tag-selected {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-soft);
}
.studio__seltag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 6px 5px 11px; border-radius: 999px; cursor: pointer;
    font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--on-acc);
    background: var(--acc-grad); border: 1px solid transparent;
    transition: filter .15s;
}
.studio__seltag:hover { filter: brightness(1.08); }
.studio__seltag-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 999px; font-size: 14px; line-height: 1;
    background: rgba(0,0,0,0.22);
}
.studio__tags-empty { padding: 10px 4px; font-size: 13px; color: var(--ink-mute); }

/* ---------- Панель настроек (право) ---------- */
.studio__panel {
    border-radius: var(--radius-lg); border-color: var(--line); box-shadow: var(--shadow);
    padding: 20px; display: flex; flex-direction: column; gap: 18px;
    position: sticky; top: 88px;
}
.studio__group { display: flex; flex-direction: column; gap: 9px; }
.studio__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.studio__styles { display: flex; flex-direction: column; gap: 8px; }
.studio__style {
    text-align: left; padding: 11px 14px; border-radius: 12px; cursor: pointer;
    background: rgba(255,255,255,0.04); border: 1px solid var(--line-soft);
    display: flex; flex-direction: column; gap: 2px; transition: border-color .2s, background .2s;
}
.studio__style b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.studio__style i { font-size: 12px; font-style: normal; color: var(--ink-mute); }
.studio__style:hover { border-color: var(--line); }
.studio__style.is-on { border-color: var(--acc); background: rgba(255,77,109,0.08); }
.studio__style.is-on b { color: var(--acc-soft); }

.studio__seg { display: flex; gap: 6px; padding: 5px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--line-soft); }
.studio__seg button {
    flex: 1; padding: 9px 6px; border: none; background: transparent; cursor: pointer;
    border-radius: 8px; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
    transition: color .2s, background .2s;
}
.studio__seg button:hover { color: var(--ink); }
.studio__seg button.is-on { background: var(--acc-grad); color: var(--on-acc); }

.studio__adv { border-top: 1px solid var(--line-soft); padding-top: 14px; }
.studio__adv > summary {
    cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: var(--ink-soft);
    display: flex; align-items: center; gap: 8px;
}
.studio__adv > summary::-webkit-details-marker { display: none; }
.studio__adv > summary::before { content: "▸"; color: var(--acc); transition: transform .2s; }
.studio__adv[open] > summary::before { transform: rotate(90deg); }
.studio__adv-body { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.studio__slider { display: flex; flex-direction: column; gap: 8px; }
.studio__slider label { font-size: 13px; color: var(--ink-soft); display: flex; justify-content: space-between; }
.studio__slider label b { color: var(--acc-soft); }
.studio__range {
    -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
    background: linear-gradient(90deg, var(--acc), var(--acc-2)); outline: none; cursor: pointer;
}
.studio__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;
}
.studio__range::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--acc); cursor: pointer;
}
.studio__seed { display: flex; flex-direction: column; gap: 8px; }
.studio__seed > label { font-size: 13px; color: var(--ink-soft); }
.studio__seed-row { display: flex; gap: 6px; }
.studio__seed-row input {
    flex: 1; min-width: 0; padding: 9px 12px; border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.04); border: 1px solid var(--line-soft);
    color: var(--ink); font-family: var(--font-mono); font-size: 13px;
}
.studio__seed-row input:focus { outline: none; border-color: var(--acc); }
.studio__seed-row button {
    width: 40px; flex-shrink: 0; border-radius: var(--radius-sm); cursor: pointer;
    background: rgba(255,255,255,0.04); border: 1px solid var(--line-soft); color: var(--ink); font-size: 14px;
    transition: border-color .2s, background .2s;
}
.studio__seed-row button:hover { border-color: var(--acc); }
.studio__seed-row button[data-locked="true"] { background: rgba(255,77,109,0.12); border-color: var(--acc); }
.studio__go { margin-top: 2px; }
.studio__cost { text-align: center; font-size: 12.5px; color: var(--ink-mute); }

/* блок «Тарифы и цены» под кнопкой генерации — прямой путь к оплате.
   Отделён тонкой линией; кнопка компактнее «Сгенерировать» (меньше шрифт/паддинг),
   но с той же золотой схемой (--gold-grad), что и на страницах-инструментах. */
.studio__pay { margin-top: 0; }
.studio__pricing {
    display: block; width: 100%;
    background: var(--gold-grad); color: var(--on-gold);
    box-shadow: 0 8px 20px var(--gold-glow);
    font-size: 14px; padding: 11px 18px;
}
.studio__pricing:hover { transform: translateY(-1px); box-shadow: 0 12px 28px var(--gold-glow); }

/* ---------- История ---------- */
.studio__history { max-width: 1120px; margin: 26px auto 0; }
.studio__history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.studio__history-list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.studio__hist {
    position: relative; flex-shrink: 0; width: 76px; height: 96px; border-radius: 12px; overflow: hidden;
    cursor: pointer; border: 1px solid var(--line-soft); transition: border-color .2s, transform .2s;
}
.studio__hist:hover { border-color: var(--acc); transform: translateY(-2px); }
.studio__hist::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 58%, rgba(8,8,11,0.55));
}
.studio__hist-badge {
    position: absolute; z-index: 2; bottom: 5px; right: 5px;
    font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px;
    color: var(--on-acc); background: var(--acc-grad);
}

/* ---------- Адаптив студии ---------- */
@media (max-width: 900px) {
    .studio { grid-template-columns: 1fr; }
    .studio__panel { position: static; }
}
@media (max-width: 560px) {
    /* одиночный результат — во всю ширину экрана независимо от формата */
    .studio__results[data-count="1"] { grid-template-columns: minmax(0, 100%); }
    .studio__results[data-count="4"],
    .studio__results[data-count="8"] { grid-template-columns: repeat(2, 1fr); }
    /* горизонтальные кадры при 4/8 — крупнее (1 и 2 колонки) */
    .studio__results[data-count="4"][data-orient="landscape"] { grid-template-columns: 1fr; }
    .studio__results[data-count="8"][data-orient="landscape"] { grid-template-columns: repeat(2, 1fr); }
    .studio__stage { min-height: 340px; padding: 16px; }
    .studio__dice { margin-left: 0; }
    /* Поле промпта/негатива выше на телефонах: 96px → 144px (+50%), чтобы удобнее
       вводить длинный текст и не терять его при быстром скролле по инструменту. */
    .studio__input { min-height: 144px; }
}


/* Кнопка «Улучшить промпт» (Z-Image) */
.studio__ai-btn{
    margin-left:auto;display:inline-flex;align-items:center;gap:6px;
    padding:7px 14px;border-radius:999px;
    font:600 13px/1 'Inter',sans-serif;
    color:var(--acc-soft,#ffb38a);
    background:rgba(255,120,80,.10);
    border:1px solid rgba(255,120,80,.35);
    cursor:pointer;transition:all .18s ease;white-space:nowrap;
}
.studio__ai-btn:hover{background:rgba(255,120,80,.18);border-color:rgba(255,120,80,.6);color:#fff;}
.studio__ai-btn:disabled{opacity:.6;cursor:default;}

/* бегущее свечение по обводке (по часовой) — как на странице аниме 18+ */
@property --stai-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.studio__ai-btn { position: relative; isolation: isolate; }
.studio__ai-btn::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--stai-angle),
        rgba(255,138,61,0) 0deg,
        rgba(255,138,61,0) 210deg,
        #ff8a3d 290deg,
        #ff4d6d 335deg,
        rgba(255,77,109,0) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    filter: drop-shadow(0 0 5px rgba(255,120,80,.75));
    pointer-events: none;
    animation: staiBeam 2.8s linear infinite;
}
@keyframes staiBeam { to { --stai-angle: 360deg; } }
.studio__ai-btn:disabled::after { animation: none; opacity: .3; }
@media (prefers-reduced-motion: reduce) { .studio__ai-btn::after { animation: none; } }

/* ---------- Адаптив промпт-бара на узких экранах ---------- */
/* Держим «Промпт / Негатив / ✨ Улучшить промпт» в одну строку без горизонтального скролла.
   Комплексно ужимаем все три кнопки; на 320px сокращаем подпись до «✨ Улучшить». */
@media (max-width: 420px) {
    .studio__tabs { gap: 6px; }
    .studio__tab { padding: 6px 11px; font-size: 12.5px; }
    .studio__ai-btn { padding: 6px 11px; font-size: 12px; gap: 4px; }
}
@media (max-width: 360px) {
    .studio__tabs { gap: 5px; }
    .studio__tab { padding: 6px 9px; font-size: 12px; }
    /* «промпт» дублирует вкладку слева — на самых узких экранах убираем его, чтобы кнопка влезла в 320px */
    .studio__ai-btn { padding: 6px 9px; gap: 0; font-size: 0; }
    .studio__ai-btn::before { content: "✨ Улучшить"; font-size: 11.5px; font-weight: 600; }
}