/* ГАСТРО.ФОТО — premium bordeaux food-studio system. Mobile-first (390×844).
   Palette — STRICTLY 5 colors (WO5): Burgundy #5B0F18, Cream #F8F1E7, Rose-dust #D8A7A7,
   Espresso #1E1E1E, Wine #7A1F2B. Accents/buttons = wine + burgundy→wine gradient.
   No vivid-red. Sections ALTERNATE dark ⇄ cream.
   Fonts: Oswald (heavy display grotesk, headings) + Golos (strong grotesk, body).
   Reveal animations are reliable: content is visible by default; motion only enhances. */
:root{
  /* dark base — ЕДИНЫЙ espresso #1E1E1E (палитра из 5 цветов); подсветка — burgundy/wine rgba */
  --espresso:#1E1E1E; --espresso-2:#1E1E1E; --espresso-deep:#1E1E1E; --night:#1E1E1E;
  /* brand reds — burgundy + wine only */
  --bordeaux:#5B0F18; --brand:#5B0F18; --wine:#7A1F2B; --red:#7A1F2B; --red-2:#5B0F18;
  /* lights */
  --cream:#F8F1E7; --cream-2:#F8F1E7; --rose:#D8A7A7;
  /* ink — muted тона строим из canon (rose на тёмном, espresso-rgba на кремовом) */
  --on-dark:#F8F1E7; --on-dark-dim:#D8A7A7; --on-dark-faint:rgba(216,167,167,.7);
  --ink:#1E1E1E; --ink-dim:rgba(30,30,30,.66); --ink-faint:rgba(30,30,30,.45);
  --line-dark:rgba(248,241,231,.13); --line-cream:rgba(30,30,30,.12);
  /* receipt paper — cream paper, espresso ink (WO5 §2) */
  --paper:#F8F1E7; --paper-ink:#1E1E1E; --paper-dim:rgba(30,30,30,.55);
  --r:16px; --r-lg:24px; --maxw:1180px;
  --display:"Oswald","Golos",Impact,sans-serif;
  --sans:"Golos",-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --stamp-face:"Unbounded","Oswald",sans-serif;
  --sh:0 1px 2px rgba(0,0,0,.4),0 12px 30px -14px rgba(0,0,0,.6);
  --sh-lg:0 2px 10px rgba(0,0,0,.45),0 40px 80px -28px rgba(0,0,0,.8);
  --sh-cream:0 1px 2px rgba(30,30,30,.06),0 22px 50px -26px rgba(30,30,30,.28);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{font-family:var(--sans);color:var(--on-dark);background:var(--espresso-deep);
  line-height:1.55;font-size:16px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:.01em;text-transform:uppercase}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--red)}
.sec--cream .eyebrow{color:var(--brand)}
.muted{color:var(--on-dark-dim)}

/* ---- section frames (ALTERNATING) ---- */
.sec{padding:64px 0;position:relative}
@media(min-width:760px){.sec{padding:88px 0}}
.sec--dark{background:
  radial-gradient(720px 460px at 88% -8%, rgba(122,31,43,.12), transparent 60%),
  var(--espresso);color:var(--on-dark)}
.sec--espresso{background:var(--espresso);color:var(--on-dark)}
.sec--cream{background:var(--cream);color:var(--ink)}
.sec--cream h1,.sec--cream h2,.sec--cream h3,.sec--cream h4{color:var(--ink)}
.sec--glow{background:
  radial-gradient(820px 480px at 18% -10%, rgba(122,31,43,.16), transparent 60%),
  radial-gradient(720px 520px at 96% 110%, rgba(91,15,24,.55), transparent 62%),
  var(--espresso-deep)}
.sec-head{max-width:46ch;margin:0 auto 40px;text-align:center}
.sec-head .eyebrow{display:inline-block;margin-bottom:14px}
.sec-head h2{font-size:clamp(28px,6.4vw,50px);line-height:1.0}
.sec-head p{margin-top:16px;font-size:17px;color:var(--on-dark-dim)}
.sec--cream .sec-head p{color:var(--ink-dim)}
.sec-head.left{text-align:left;margin-left:0;margin-right:auto}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--sans);font-weight:600;
  font-size:15px;border:none;border-radius:999px;padding:14px 26px;cursor:pointer;transition:.18s ease;white-space:nowrap}
.btn--red{background:linear-gradient(180deg,var(--red),var(--red-2));color:#fff;
  box-shadow:0 12px 30px -10px rgba(122,31,43,.7),inset 0 1px 0 rgba(255,255,255,.18)}
.btn--red:hover{transform:translateY(-1px);box-shadow:0 16px 36px -10px rgba(122,31,43,.85)}
.btn--brand{background:var(--brand);color:#fff;box-shadow:0 12px 28px -10px rgba(91,15,24,.7)}
.btn--brand:hover{background:var(--red-2);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--on-dark);border:1.5px solid var(--line-dark)}
.btn--ghost:hover{border-color:var(--rose);color:var(--rose)}
.sec--cream .btn--ghost{color:var(--ink);border-color:var(--line-cream)}
.sec--cream .btn--ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn--cream{background:var(--cream);color:var(--bordeaux);font-weight:700;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.6)}
.btn--cream:hover{background:#fff;transform:translateY(-1px);box-shadow:0 18px 40px -12px rgba(0,0,0,.7)}
.btn--lg{padding:17px 32px;font-size:16.5px}
.btn--sm{padding:9px 16px;font-size:13.5px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ---- topbar ---- */
.topbar{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.2) blur(12px);
  background:rgba(30,30,30,.78);border-bottom:1px solid var(--line-dark)}
.topbar .wrap{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:21px;
  letter-spacing:.02em;color:var(--on-dark);text-transform:uppercase}
.brand img{height:26px;width:auto;display:block}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 4px rgba(91,15,24,.25),0 0 14px rgba(122,31,43,.7)}
.topnav{display:none;gap:26px;font-size:14px;font-weight:500;margin-left:14px}
.topnav a{color:var(--on-dark-dim)}.topnav a:hover{color:var(--rose)}
.topbar-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.topbar-cta .link{font-size:14px;font-weight:600;color:var(--on-dark-dim)}
.topbar-cta .link:hover{color:#fff}
.credits-pill{display:inline-flex;align-items:center;gap:7px;background:var(--espresso-2);border:1px solid var(--line-dark);
  border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--on-dark)}
.credits-pill b{color:var(--rose)}
@media(min-width:920px){.topnav{display:flex}}
@media(max-width:560px){.topbar-cta .hide-xs{display:none}}

/* ---- hero ---- */
/* WO7 §1 — hero: neutral espresso base, burgundy ONLY as accent radial glows (no bordeaux sheet) */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(560px 380px at 4% -16%, rgba(122,31,43,.16), transparent 52%),
  radial-gradient(520px 420px at 108% 0%, rgba(91,15,24,.16), transparent 54%),
  linear-gradient(160deg,#1e1e1e 0%,#1e1e1e 58%,#1e1e1e 100%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 66%,rgba(30,30,30,.4));z-index:0}
.hero>.wrap{position:relative;z-index:1}
.hero .wrap{padding-top:48px;padding-bottom:40px}
.hero-grid{display:grid;gap:34px}
@media(min-width:900px){.hero-grid{grid-template-columns:1fr 1.06fr;align-items:center;gap:50px}.hero .wrap{padding-top:60px;padding-bottom:64px}}
.hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--rose);background:rgba(216,167,167,.1);border:1px solid rgba(216,167,167,.28);
  border-radius:999px;padding:7px 15px}
.hero h1{font-size:clamp(33px,7.4vw,60px);margin-top:20px;letter-spacing:.005em}
.hero h1 em{font-style:normal;color:var(--red)}
.hero-sub{margin-top:20px;font-size:17px;color:var(--on-dark-dim);max-width:42ch}
.hero-cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-micro{margin-top:13px;font-size:13px;color:var(--on-dark-faint)}
/* WO7 §6 — «от 99₽/фото» — huge animated offer magnet */
.price-badge{display:inline-flex;align-items:baseline;gap:.18em;margin-top:30px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.005em;
  color:#fff;line-height:.92;animation:priceBeat 2.8s ease-in-out infinite;transform-origin:left center}
/* WO9 C1 — оффер «от 149 ₽/фото» чуть крупнее */
.price-badge .num{font-size:clamp(50px,12.5vw,86px);line-height:.92;color:#fff;
  text-shadow:0 0 28px rgba(122,31,43,.55),0 6px 24px rgba(0,0,0,.5)}
.price-badge .num em{font-style:normal;color:var(--rose);font-size:.42em;letter-spacing:.02em}
/* WO-G27 3.2 — drop-shadow из кейфреймов убран (репейнт), остаётся только scale */
@keyframes priceBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.trust-line{margin-top:22px;font-size:13.5px;color:var(--on-dark-dim);display:flex;align-items:center;gap:9px}
.trust-line svg{flex:none;color:var(--red)}
.hero-chips{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.chip-svg{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--on-dark);
  background:var(--espresso-2);border:1px solid var(--line-dark);border-radius:999px;padding:9px 14px}
.chip-svg svg{flex:none;color:var(--rose)}
/* hero before/after — honest two-up (curated pair is reposed, no drag-shutter) */
.ba{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);border:1px solid var(--line-dark);background:var(--espresso-2)}
.ba-row{display:grid;grid-template-columns:1fr 1fr}
.ba figure{position:relative;aspect-ratio:3/4;overflow:hidden}
.ba figure+figure{border-left:1px solid rgba(248,241,231,.22)}
.ba img{width:100%;height:100%;object-fit:cover}
.ba .lab{position:absolute;left:11px;bottom:11px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  background:rgba(30,30,30,.72);color:var(--on-dark);padding:6px 12px;border-radius:999px;backdrop-filter:blur(4px);border:1px solid var(--line-dark)}
.ba figure:last-child .lab{background:var(--red);color:#fff;border-color:transparent}
.ba-cap{padding:14px 16px;font-size:13px;color:var(--on-dark-dim);text-align:center;border-top:1px solid var(--line-dark)}
/* WO12 → WO-G27 1.2 — hero = адаптивное изображение, текст АБСОЛЮТНО поверх баннера.
   Скрим локальный (градиент только под текстом), order-раскладка WO12 убрана.
   Зоны без блюд: ПК (nb_hero_pc) — левая/верхняя тёмная зона; мобайл — верх. */
.hero--img{padding:0;overflow:hidden;position:relative;background:var(--espresso)}
.hero--img::after{display:none}          /* убираем базовый нижний градиент — картинка чистая */
.hero-pic{display:block;width:100%}
.hero-pic img{display:block;width:100%;height:auto;object-fit:cover}
.hero-scrim{display:none}
.hero-overlay{position:absolute;inset:0;z-index:2;display:block}
.hero-overlay .wrap{width:100%;height:100%}
/* мобайл (по умолчанию): текст в верхней тёмной полосе, скрим — мягкий градиент сверху вниз */
.hero--img .hero-copy{position:relative;padding:10px 4px 0;text-align:center;max-width:none}
.hero--img .hero-copy::before{content:"";position:absolute;inset:-10px -20px -18px;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(30,30,30,.85) 0%,rgba(30,30,30,.55) 66%,transparent 100%)}
.hero--img h1{font-size:clamp(17px,4.8vw,24px);margin-top:0;line-height:1.1}
/* правка оператора: h1 короче — оффер крупнее, отдельной строкой под h1 */
.hero--img .price-badge{margin-top:8px}
.hero--img .price-badge .num{font-size:clamp(34px,9.6vw,56px)}
@media(min-width:900px){
  /* ПК — текст в левой/верхней тёмной зоне (над телефоном), скрим — радиальный из угла */
  .hero-overlay .wrap{display:flex;align-items:flex-start}
  .hero--img .hero-copy{padding:28px 0 0;text-align:left;max-width:46ch}
  .hero--img .hero-copy::before{inset:-32px -60px -44px -160px;
    background:radial-gradient(120% 130% at 0% 0%,rgba(30,30,30,.85) 0%,rgba(30,30,30,.5) 58%,transparent 82%)}
  .hero--img h1{font-size:clamp(24px,2.4vw,34px)}
  .hero--img .price-badge{margin-top:14px}
  .hero--img .price-badge .num{font-size:clamp(44px,4.8vw,74px)}
}

/* ---- marquee ---- */
.marquee{padding:42px 0 36px;overflow:hidden;background:var(--espresso)}
/* WO-G27 3.3 — contain:content + пауза анимации вне вьюпорта (JS-IntersectionObserver) */
.mq{overflow:hidden;margin-bottom:14px;contain:content;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq.mq-off .mq-track{animation-play-state:paused}
/* WO10 C9 — фото-лента ещё медленнее на ~8% (57s → 62s). Лента тегов задаётся .tag-track. */
.mq-track{display:flex;gap:14px;width:max-content;animation:mqScroll 62s linear infinite}
.mq-track img{height:200px;width:auto;object-fit:cover;border-radius:14px;border:1px solid var(--line-dark);
  box-shadow:0 16px 32px -18px rgba(0,0,0,.85)}
@keyframes mqScroll{to{transform:translateX(-50%)}}
@media(max-width:760px){.mq-track img{height:138px}}
.mq-cap{text-align:center;margin-top:18px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-faint)}
.zoom{cursor:zoom-in}

/* ---- tags marquee (WO6 §2: right after hero, seamless, double gaps, high contrast) ---- */
.tags-marquee{padding:20px 0;overflow:hidden;background:
  linear-gradient(180deg,#1e1e1e,#1e1e1e);border-top:1px solid rgba(216,167,167,.14);border-bottom:1px solid rgba(216,167,167,.14)}
.tags-marquee .mq{margin-bottom:0}
.tag-track{display:flex;gap:30px;width:max-content;align-items:center;animation:mqScroll 48s linear infinite}
.tag-chip{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:17px;
  color:var(--cream);white-space:nowrap;padding:10px 24px;border-radius:999px;
  background:linear-gradient(180deg,var(--wine),var(--bordeaux));box-shadow:0 8px 20px -10px rgba(122,31,43,.7)}

/* ---- pain ---- */
.pain-lead{max-width:18ch;font-size:clamp(26px,5.2vw,40px);font-family:var(--display);font-weight:700;
  text-transform:uppercase;line-height:1.02;margin:0 auto 26px;text-align:center}
.pain-lead em{font-style:normal;color:var(--red)}
.pain-body{max-width:62ch;margin:0 auto;display:grid;gap:18px;font-size:16.5px;color:var(--on-dark-dim)}
.pain-body p{position:relative;padding-left:22px}
.pain-body p:before{content:"";position:absolute;left:0;top:11px;width:9px;height:9px;border-radius:50%;background:var(--red)}

/* ---- steps (how) ---- */
.steps{display:grid;gap:14px}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{padding:20px 22px;background:#fff;border:1px solid var(--line-cream);border-radius:var(--r);box-shadow:var(--sh-cream);position:relative;transition:.18s ease}
a.step{cursor:pointer}
a.step:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--rose)}
.step .step-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(91,15,24,.08);color:var(--brand);margin-bottom:12px}
.step .step-num{position:absolute;right:18px;top:16px;font-family:var(--display);font-weight:700;font-size:28px;color:var(--cream-2)}
.step h3{font-size:18px;color:var(--ink)}
.step p{font-size:13.5px;color:var(--ink-dim);margin-top:6px}
.pain-one{max-width:54ch;margin:22px auto 0;text-align:center;font-size:17px;color:var(--on-dark-dim)}
/* WO7 §9 — compact steps on mobile (icon left, text right, low height) */
@media(max-width:759px){
  .steps--compact{gap:10px}
  .steps--compact .step{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;padding:13px 16px}
  .steps--compact .step-ic{margin-bottom:0;width:34px;height:34px}
  .steps--compact .step-num{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:22px}
  .steps--compact .step h3{font-size:16px}
  .steps--compact .step p{font-size:12.5px;margin-top:2px}
}

/* ---- scenes catalog ---- */
.scene-filter{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:28px}
.filter{font-size:13.5px;font-weight:600;padding:9px 16px;border:1.5px solid var(--line-dark);border-radius:999px;
  background:var(--espresso-2);color:var(--on-dark-dim);cursor:pointer;transition:.15s;white-space:nowrap}
.filter:hover{color:#fff;border-color:var(--rose)}
.filter.on{background:var(--red);color:#fff;border-color:transparent}
.scenes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:680px){.scenes-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.scenes-grid{grid-template-columns:repeat(4,1fr)}}
.scene-card{border-radius:var(--r);overflow:hidden;background:var(--espresso-2);border:1px solid var(--line-dark);
  box-shadow:var(--sh);transition:.2s;cursor:pointer}
.scene-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:rgba(216,167,167,.4)}
.scene-card .ph{aspect-ratio:4/3;background:var(--espresso);position:relative}
.scene-card .ph img{width:100%;height:100%;object-fit:cover}
.scene-card .ph:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(30,30,30,.18),transparent 35%);pointer-events:none}
.scene-card .nm{padding:12px 14px;font-size:14.5px;font-weight:600;color:var(--on-dark)}
.scenes-more{text-align:center;margin-top:30px}
/* WO6 §6 — landing scenes = curated editor preview (no names/filters), big «150+» */
/* WO9 C5 — «150+ композиций» ещё крупнее */
.scenes-num{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:1.1;
  font-size:clamp(58px,13.5vw,120px);color:#fff;text-align:center}
.scenes-num em{font-style:normal;color:var(--red)}
/* WO10 C4 — слово «композиций» заметно мельче числа, отдельной строкой */
.scenes-num-word{display:block;font-size:clamp(15px,3vw,26px);font-weight:600;letter-spacing:.05em;
  color:var(--on-dark-dim);margin-top:2px}
.scenes-num-sub{text-align:center;font-size:17px;color:var(--on-dark-dim);margin:14px auto 34px;max-width:42ch}
/* WO10 C3 — подпись над галереей до/после. WO-G27 1.1 — размер ×2 (был clamp(16px,2.4vw,22px)) */
.ba-lead{text-align:center;font-family:var(--display);text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(32px,4.8vw,44px);color:var(--espresso);margin:0 auto 6px;max-width:24ch;line-height:1.12}
.scene-editor{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-dark);
  background:linear-gradient(180deg,#1e1e1e,#1e1e1e);box-shadow:var(--sh-lg)}
.scene-editor-bar{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--line-dark);
  font-size:12.5px;color:var(--on-dark-faint);letter-spacing:.02em}
.scene-editor-bar .dots{display:flex;gap:6px;margin-right:6px}
.scene-editor-bar .dots i{width:10px;height:10px;border-radius:50%;background:var(--line-dark)}
.scene-editor-bar .dots i:first-child{background:var(--wine)}
.scene-editor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px}
@media(min-width:680px){.scene-editor-grid{grid-template-columns:repeat(5,1fr)}}
.scene-thumb{aspect-ratio:1/1;border-radius:12px;overflow:hidden;position:relative;border:1px solid var(--line-dark);
  background:var(--espresso);transition:.18s}
.scene-thumb img{width:100%;height:100%;object-fit:cover}
.scene-thumb:first-child{outline:2px solid var(--red);outline-offset:-2px}
.scene-thumb:first-child::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px rgba(122,31,43,.5)}
.scenes-cta{text-align:center;margin-top:30px}

/* ---- gallery (14 pairs two-up) ---- */
/* WO7 §10 — bigger pairs: each cell 3:4, fewer per row */
.gallery{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:560px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.gallery{grid-template-columns:repeat(3,1fr)}}
.pair{border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line-cream);box-shadow:var(--sh-cream)}
.pair-row{display:grid;grid-template-columns:1fr 1fr}
.pair figure{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--cream-2)}
.pair figure+figure{border-left:1px solid rgba(30,30,30,.1)}
.pair img{width:100%;height:100%;object-fit:cover}
.pair .lab{position:absolute;left:8px;top:8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  background:rgba(255,255,255,.86);color:var(--ink);padding:4px 9px;border-radius:999px}
.pair figure:last-child .lab{background:var(--red);color:#fff}
.pair .pair-dish{padding:11px 13px;font-size:13px;font-weight:600;color:var(--ink)}

/* ---- formats (real aspect ratios) ---- */
.formats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:760px){.formats{grid-template-columns:repeat(4,1fr)}}
.fmt-card{background:#fff;border:1.5px solid var(--line-cream);border-radius:var(--r);padding:22px 18px;text-align:center;
  box-shadow:var(--sh-cream);transition:.18s;position:relative}
.fmt-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.fmt-card.def{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),var(--sh-cream)}
.fmt-frame{margin:4px auto 16px;background:linear-gradient(135deg,var(--wine),var(--brand));border-radius:8px;
  display:grid;place-items:center;color:rgba(255,255,255,.9);font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.04em}
.fmt-r43{width:96px;height:72px}.fmt-r11{width:80px;height:80px}.fmt-r34{width:66px;height:88px}.fmt-r916{width:52px;height:92px}
.fmt-card b{display:block;font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink)}
.fmt-card span{display:block;font-size:13px;color:var(--ink-dim);margin-top:6px}
.fmt-card .def-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:999px;white-space:nowrap}

/* ---- packages ---- */
.pkgs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:920px){.pkgs{grid-template-columns:repeat(4,1fr)}}
.pkg{background:#fff;border:1.5px solid var(--line-cream);border-radius:var(--r);padding:26px 22px;display:flex;flex-direction:column;
  box-shadow:var(--sh-cream);transition:.18s;position:relative}
.pkg:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.pkg.feat{border-color:var(--red);box-shadow:0 0 0 1.5px var(--red),var(--sh-cream)}
.pkg .feat-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,var(--red),var(--red-2));
  color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 14px;border-radius:999px}
.pkg .pkg-name{font-family:var(--display);font-weight:700;font-size:20px;color:var(--ink);text-transform:uppercase}
.pkg .pkg-credits{font-size:13.5px;color:var(--ink-dim);margin-top:2px}
.pkg .pkg-price{font-family:var(--display);font-weight:700;font-size:34px;color:var(--ink);margin-top:16px;line-height:1}
.pkg .pkg-per{font-size:13px;color:var(--ink-dim);margin-top:7px}
.pkg .pkg-save{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:700;color:var(--red);
  background:rgba(122,31,43,.1);border-radius:999px;padding:4px 11px;align-self:flex-start}
.pkg .btn{margin-top:18px}
.pkgs-note{text-align:center;margin-top:26px;font-size:14px;color:var(--ink-dim)}
/* WO6 §7 — free intro package card */
.pkg.free{border-color:var(--brand);background:linear-gradient(180deg,#fff,#f8f1e7)}
.pkg.free .free-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--brand);
  color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap}
.pkg.free .pkg-price{color:var(--brand)}
.pkg-grid-5{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:920px){.pkg-grid-5{grid-template-columns:repeat(5,1fr)}}
/* WO9 C6 — mobile: вертикальный стек компактных карточек (все видны сразу, без свайп-карусели).
   Карточка = одна строка: слева название/кредиты, справа цена/ставка, CTA снизу справа. */
@media(max-width:919px){
  .pkg-grid-5{display:grid;grid-template-columns:1fr;gap:12px;margin-top:10px}
  .pkg-grid-5>.pkg{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name price" "meta per" "cta cta";
    align-items:center;gap:4px 12px;padding:16px 18px}
  .pkg-grid-5>.pkg.feat{margin-top:8px}
  .pkg-grid-5>.pkg .free-tag,.pkg-grid-5>.pkg .feat-tag{top:-10px;left:auto;right:14px;transform:none}
  .pkg-grid-5>.pkg .pkg-name{grid-area:name;font-size:18px}
  .pkg-grid-5>.pkg .pkg-credits{grid-area:meta;margin-top:0}
  .pkg-grid-5>.pkg .pkg-price{grid-area:price;justify-self:end;font-size:26px;margin-top:0}
  .pkg-grid-5>.pkg .pkg-per{grid-area:per;justify-self:end;margin-top:0}
  .pkg-grid-5>.pkg .btn{grid-area:cta;margin-top:12px;width:100%}
}

/* ===== receipt — single honest check (WO5 §2), cream paper / espresso ink / wine accents ===== */
.receipt-sec{padding:64px 0;background:
  radial-gradient(820px 480px at 80% 12%, rgba(122,31,43,.12), transparent 60%),
  radial-gradient(720px 520px at 4% 108%, rgba(91,15,24,.20), transparent 62%),
  var(--espresso)}
@media(min-width:760px){.receipt-sec{padding:88px 0}}
.receipt-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:920px){.receipt-grid{grid-template-columns:1fr 440px;gap:60px}}
.receipt-copy .eyebrow{display:inline-block;margin-bottom:12px}
.receipt-copy h2{font-size:clamp(26px,4.4vw,42px);line-height:1.04;margin-bottom:16px;color:#fff}
.receipt-copy p{color:var(--on-dark-dim);max-width:48ch}
/* WO6 §1 — check rebuilt to match etalon: JetBrains Mono body, Unbounded stamp,
   cream paper / espresso ink / wine accents, torn dentate edges, tilt. */
.receipt{background:var(--paper);color:var(--paper-ink);font-family:var(--mono);
  padding:40px 34px 46px;position:relative;width:100%;max-width:460px;margin:0 auto;
  box-shadow:0 36px 80px rgba(0,0,0,.5);transform:rotate(-1.2deg)}
.receipt::before,.receipt::after{content:"";position:absolute;left:0;right:0;height:12px;
  background:linear-gradient(-45deg,var(--paper) 8px,transparent 0),linear-gradient(45deg,var(--paper) 8px,transparent 0);
  background-size:18px 12px;background-repeat:repeat-x}
.receipt::before{top:-11px;transform:scaleY(-1)}.receipt::after{bottom:-11px}
.receipt h3{font-family:var(--mono);font-weight:700;font-size:14px;text-align:center;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-ink)}
.receipt .sub{text-align:center;font-family:var(--mono);font-size:10.5px;color:var(--paper-dim);margin:8px 0 22px;letter-spacing:.1em}
.receipt .row{display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:12.5px;padding:10px 0;border-bottom:1px dashed rgba(30,30,30,.24)}
.receipt .row span:last-child{font-weight:700;white-space:nowrap}
.receipt .total{display:flex;justify-content:space-between;font-family:var(--mono);font-weight:700;font-size:17px;padding:18px 0 4px;letter-spacing:.02em}
.receipt .vs{margin:24px 0 0;padding:18px;border:2px solid var(--wine);text-align:center;border-radius:6px}
.receipt .vs .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--wine);font-weight:700}
.receipt .vs .price{font-family:var(--mono);font-size:28px;font-weight:700;margin-top:6px;color:var(--paper-ink)}
.stamp{position:absolute;right:-20px;bottom:88px;z-index:2;font-family:var(--stamp-face);font-weight:800;font-size:20px;
  color:var(--wine);border:3px solid var(--wine);border-radius:12px;padding:11px 18px;transform:rotate(8deg);
  background:rgba(248,241,231,.92);letter-spacing:.005em;box-shadow:0 10px 26px -10px rgba(122,31,43,.5)}

/* ---- faq ---- */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line-dark)}
.faq summary{cursor:pointer;list-style:none;padding:24px 44px 24px 0;font-weight:600;font-size:18px;position:relative;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:26px;color:var(--red);transition:transform .25s;font-family:var(--sans)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .a{padding:0 0 26px;color:var(--on-dark-dim);font-size:15.5px;max-width:680px}

/* ---- final ---- */
.final{background:
  radial-gradient(720px 460px at 50% -10%, rgba(122,31,43,.28), transparent 62%),
  linear-gradient(180deg,var(--bordeaux),var(--brand) 60%,var(--wine));text-align:center}
.final h2{font-size:clamp(28px,6.6vw,50px);color:#fff}
.final p{margin:18px auto 28px;max-width:46ch;color:rgba(255,255,255,.86);font-size:17px}
.final .micro{margin-top:14px;font-size:13px;color:rgba(255,255,255,.66)}

/* ---- footer ---- */
.foot{background:var(--espresso);border-top:1px solid var(--line-dark);padding:54px 0 110px;font-size:14px;color:var(--on-dark-dim)}
.foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
@media(max-width:820px){.foot-cols{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-cols{grid-template-columns:1fr}}
.foot h4{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.12em;color:var(--on-dark-faint);margin-bottom:14px;text-transform:uppercase}
.foot ul{list-style:none;display:grid;gap:9px}
.foot a:hover{color:var(--rose)}
.foot .foot-brand .brand{font-size:20px;margin-bottom:12px}
.foot .foot-brand p{max-width:34ch;color:var(--on-dark-faint);font-size:13.5px}
.foot-bottom{border-top:1px solid var(--line-dark);margin-top:40px;padding-top:24px;font-size:12.5px;color:var(--on-dark-faint);max-width:80ch}

/* ---- mobile tabbar (replaces sticky cta) ---- */
.tabbar{display:none}
@media(max-width:919px){
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
    background:rgba(30,30,30,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line-dark)}
  .tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
    font-size:10.5px;font-weight:600;color:var(--on-dark-faint);padding:4px 2px;transition:.15s}
  .tabbar .tab svg{width:23px;height:23px}
  .tabbar .tab.on,.tabbar .tab:active{color:var(--rose)}
  .foot{padding-bottom:96px}
}
/* WO10 A3 — компактный cookie-баннер: слим-полоса над таббаром, не перекрывает контент/таббар */
.cookie{position:fixed;left:12px;right:12px;bottom:calc(70px + env(safe-area-inset-bottom));z-index:80;background:var(--espresso-2);color:var(--on-dark);
  border:1px solid var(--line-dark);border-radius:12px;padding:9px 12px;font-size:11.5px;line-height:1.3;
  display:flex;gap:10px;align-items:center;box-shadow:var(--sh-lg);max-width:520px;margin:0 auto}
@media(min-width:920px){.cookie{left:auto;right:24px;bottom:24px;max-width:340px;font-size:12.5px;padding:12px 14px}}
.cookie a{color:var(--rose);text-decoration:underline}
.cookie button{flex:none;padding:6px 12px;font-size:12px}
/* legacy sticky cta (SEO pages only) */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(30,30,30,.95);backdrop-filter:blur(12px);border-top:1px solid var(--line-dark);
  display:flex;gap:10px;align-items:center;justify-content:space-between}
.sticky-cta .t{font-size:13px;font-weight:600;line-height:1.2}.sticky-cta .t span{color:var(--on-dark-faint);font-weight:400}
@media(min-width:920px){.sticky-cta{display:none}}

/* ---- lightbox (click photo = open large) ---- */
.lightbox{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  background:rgba(30,30,30,.92);backdrop-filter:blur(6px);padding:24px}
.lightbox.on{display:flex;animation:fade .2s ease}
.lightbox img{max-width:96vw;max-height:90vh;border-radius:12px;box-shadow:var(--sh-lg);object-fit:contain}
.lb-close{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-dark);
  background:rgba(30,30,30,.7);color:var(--on-dark);display:grid;place-items:center;cursor:pointer;transition:.15s}
.lb-close:hover{color:var(--rose);border-color:var(--rose)}

/* ---- gentle CTA pulse ---- */
/* WO-G27 3.1 — box-shadow не анимируем (репейнт каждый кадр): статичная тень-кольцо
   в ::after, анимируются только opacity/transform (композитор) */
.pulse{position:relative}
.pulse::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 7px rgba(122,31,43,.45);opacity:0;
  animation:ctaPulse 2.6s ease-in-out infinite}
@keyframes ctaPulse{0%{opacity:.6;transform:scale(.98)}
  60%,100%{opacity:0;transform:scale(1.14)}}

/* ---- reveal (reliable: visible by default; hidden ONLY when JS active) ---- */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.center{text-align:center}.mt{margin-top:22px}.hide{display:none!important}

/* ====================================================================
   APP SPA
   ==================================================================== */
.app-top{position:sticky;top:0;z-index:40;background:rgba(30,30,30,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-dark)}
.app-top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
/* bottom padding clears BOTH the tabbar (~60px) and the cookie strip above it (U4) */
.app-main{max-width:760px;margin:0 auto;padding:26px 20px calc(132px + env(safe-area-inset-bottom))}
/* WO9 B5 — постоянный таббар в /app (не пропадает на экранах редактора) */
.app-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;max-width:760px;margin:0 auto;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  background:rgba(30,30,30,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line-dark)}
.app-tabbar .atab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-size:10.5px;font-weight:600;color:var(--on-dark-faint);padding:4px 2px;transition:.15s}
.app-tabbar .atab svg{width:23px;height:23px}
.app-tabbar .atab.on,.app-tabbar .atab:active{color:var(--rose)}
.app-tabbar .atab:hover{color:var(--on-dark)}
.screen{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.screen h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(24px,5vw,30px);margin-bottom:8px}
.screen .sub{color:var(--on-dark-dim);margin-bottom:24px;font-size:15px;max-width:52ch}
.card{background:var(--espresso-2);border:1px solid var(--line-dark);border-radius:var(--r);box-shadow:var(--sh);padding:24px}
.steps-mini{display:flex;gap:6px;margin-bottom:24px}
.steps-mini .s{flex:1;height:4px;border-radius:99px;background:var(--espresso)}
.steps-mini .s.on{background:var(--red)}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.input{width:100%;font-family:var(--sans);font-size:16px;padding:14px 15px;border:1.5px solid var(--line-dark);
  border-radius:12px;background:var(--espresso);color:var(--on-dark);transition:.15s}
.input::placeholder{color:var(--on-dark-faint)}
.input:focus{outline:none;border-color:var(--red)}
.code-input{letter-spacing:.5em;text-align:center;font-size:24px;font-weight:700;font-family:var(--display)}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--on-dark-faint);margin-top:4px}
.consent input{margin-top:3px;accent-color:var(--red)}
.consent a{color:var(--rose);text-decoration:underline}
.fineprint{font-size:12px;color:var(--on-dark-faint);margin-top:12px}
/* WO7 §13 — auth «зачем номер» note */
.auth-card{border-color:rgba(216,167,167,.28)}
.auth-why{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:13px 15px;
  background:rgba(122,31,43,.1);border:1px solid rgba(122,31,43,.28);border-radius:12px;
  font-size:12.5px;line-height:1.5;color:var(--on-dark-dim)}
.auth-why svg{flex:none;color:var(--rose);margin-top:1px}
.auth-why b{color:var(--on-dark)}
.linkbtn{background:none;border:none;color:var(--rose);font-family:var(--sans);font-size:14px;cursor:pointer;text-decoration:underline;padding:0}
/* WO-8 — Вход ⇄ Регистрация toggle */
.auth-toggle{display:flex;gap:6px;background:var(--espresso);border:1px solid var(--line-dark);border-radius:999px;padding:5px;margin-bottom:18px}
.auth-toggle .at{flex:1;border:none;background:transparent;color:var(--on-dark-dim);font-family:var(--sans);font-weight:600;
  font-size:14.5px;padding:10px 14px;border-radius:999px;cursor:pointer;transition:.15s}
.auth-toggle .at.on{background:linear-gradient(180deg,var(--red),var(--red-2));color:#fff;box-shadow:0 8px 20px -10px rgba(122,31,43,.7)}
.field label .opt{color:var(--on-dark-faint);font-weight:400}
.micro{font-size:12.5px;color:var(--on-dark-faint)}
/* WO-8 — кабинет */
.cab-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.cab-balance{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.cab-bal-num{font-family:var(--display);font-weight:700;font-size:30px;line-height:1.05;margin-top:2px}
.cab-bal-num b{color:var(--rose)}
.cab-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.cab-sub{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:16px;margin:22px 0 12px}
.cab-photos{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:560px){.cab-photos{grid-template-columns:repeat(3,1fr)}}
.cab-ph{border-radius:14px;overflow:hidden;border:1px solid var(--line-dark);background:var(--espresso-2);box-shadow:var(--sh);aspect-ratio:4/3;position:relative}
.cab-ph img{width:100%;height:100%;object-fit:cover}
.cab-ph .fav-x{position:absolute;top:7px;right:7px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-dark);
  background:rgba(30,30,30,.72);color:var(--on-dark);display:grid;place-items:center;cursor:pointer;transition:.15s}
.cab-ph .fav-x:hover{color:var(--rose);border-color:var(--rose)}
.cab-profile{margin-bottom:16px;display:grid;gap:10px}
.cab-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.cab-row b{font-size:14.5px;font-weight:600;text-align:right;word-break:break-all}
/* WO10 D — переработанная история генераций */
.cab-bal-btns{display:flex;flex-direction:column;gap:8px;flex:none}
.cab-sechead{display:flex;align-items:center;gap:10px;margin:24px 0 12px}
.cab-sechead .cab-sub{margin:0}
.cab-count{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--on-dark-faint);
  background:var(--espresso-2);border:1px solid var(--line-dark);border-radius:999px;padding:2px 9px}
.gen-toolbar{margin-bottom:12px}
.ed-search.sm{padding:0 10px}.ed-search.sm input{font-size:14px;padding:9px 0}
.gen-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:560px){.gen-grid{grid-template-columns:repeat(3,1fr)}}
.gcard{border-radius:14px;overflow:hidden;border:1px solid var(--line-dark);background:var(--espresso-2);box-shadow:var(--sh);display:flex;flex-direction:column}
.gcard-ph{position:relative;aspect-ratio:1/1;background:var(--espresso);overflow:hidden}
.gcard-ph img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.gcard-fmt{position:absolute;left:7px;top:7px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;
  background:rgba(30,30,30,.72);color:var(--on-dark);padding:3px 7px;border-radius:999px;border:1px solid var(--line-dark)}
.gcard-meta{padding:8px 10px 6px;min-width:0}
.gcard-scene{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard-date{display:block;font-size:11px;color:var(--on-dark-faint);margin-top:1px}
.gcard-actions{display:flex;gap:6px;padding:0 8px 9px}
.gcard-actions .gact{flex:1;height:30px;border-radius:9px;border:1px solid var(--line-dark);background:var(--espresso);
  color:var(--on-dark-dim);display:grid;place-items:center;cursor:pointer;transition:.15s}
.gcard-actions .gact svg{width:16px;height:16px}
.gcard-actions .gact:hover{color:var(--on-dark);border-color:var(--rose)}
.gcard-actions .gact.fav.on{color:var(--rose);border-color:var(--rose);background:rgba(122,31,43,.16)}
.cab-empty{border:1px dashed var(--line-dark);border-radius:14px;padding:20px;text-align:center;display:grid;gap:12px;justify-items:center;background:var(--espresso-2)}
.cab-empty .micro{max-width:44ch}
.fav-scenes{display:flex;flex-wrap:wrap;gap:8px}
.scene-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--on-dark);
  background:var(--espresso-2);border:1px solid var(--line-dark);border-radius:999px;padding:7px 12px;cursor:pointer;transition:.15s}
.scene-chip svg{color:var(--rose)}
.scene-chip:hover{border-color:var(--rose)}
.scene-chip .chip-x{margin-left:2px;color:var(--on-dark-faint);font-size:15px;line-height:1;padding:0 2px}
.scene-chip .chip-x:hover{color:var(--rose)}
.iconbtn.on{border-color:var(--red);color:#fff;background:rgba(122,31,43,.22)}
.iconbtn.on svg{color:var(--rose);fill:var(--rose)}
.timer{font-size:13px;color:var(--on-dark-faint);margin-top:14px}
.captcha-box{background:rgba(122,31,43,.08);border:1px solid rgba(122,31,43,.3);border-radius:12px;padding:16px;margin:14px 0;font-size:13.5px}
.captcha-box .cap-check{display:flex;align-items:center;gap:10px;margin-top:12px;cursor:pointer}
.captcha-box .cap-box{width:22px;height:22px;border:2px solid var(--rose);border-radius:5px;flex:none;display:grid;place-items:center}
.captcha-box.ok .cap-box{background:var(--red);border-color:var(--red)}
/* Яндекс SmartCaptcha — контейнер виджета (высота фиксируется, чтобы форма не прыгала) */
.smartcap{min-height:102px;margin-top:12px;border-radius:10px;overflow:hidden}
/* WO-G31 A2 — скелетон капчи до загрузки скрипта (та же высота, что виджет) */
.cap-skel{min-height:102px;display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:13px;color:var(--on-dark-faint);background:var(--espresso);border:1px dashed var(--line-dark);border-radius:10px}
.spinner--sm{width:18px;height:18px;margin:0;border-width:2.5px;flex:none}
/* WO-G31 A1 — инлайн-плашка ошибки формы над кнопкой (форма не перерисовывается) */
.form-err{background:rgba(179,38,30,.14);border:1px solid rgba(179,38,30,.45);color:#f4c7c3;
  border-radius:10px;padding:11px 14px;font-size:13.5px;margin:12px 0 4px;line-height:1.45}
.form-err .linkbtn{color:#fff;text-decoration:underline;font-size:13px;padding:0;margin-left:6px}
.form-err.hide{display:none}
/* WO-G31 A3 — статус «звоним на +7…» на экране кода */
.call-status{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;
  color:var(--on-dark);margin:10px 0 6px}
.call-status b{color:var(--rose)}

/* uploader */
.uploader{border:2px dashed var(--line-dark);border-radius:var(--r);background:var(--espresso);padding:30px 22px;text-align:center;cursor:pointer;transition:.18s}
.uploader.drag{border-color:var(--red);background:rgba(122,31,43,.1)}
.uploader .uic{width:46px;height:46px;margin:0 auto 14px;color:var(--red)}
.uploader b{font-size:16px}.uploader p{font-size:13px;color:var(--on-dark-faint);margin-top:5px}
.upload-prev{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);aspect-ratio:4/3;background:var(--espresso)}
.upload-prev img{width:100%;height:100%;object-fit:cover}
.upload-prev .tag{position:absolute;left:12px;top:12px;background:rgba(30,30,30,.78);color:#fff;font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--line-dark)}
.upload-prev .chg{position:absolute;right:10px;bottom:10px;background:rgba(30,30,30,.8);color:var(--on-dark);font-size:12px;padding:7px 12px;border-radius:999px;border:1px solid var(--line-dark);cursor:pointer}

/* scene picker (app) — WO9 B1: Higgsfield-стиль панель (поиск + фильтры в одной панели) */
.editor-panel{background:var(--espresso-2);border:1px solid var(--line-dark);border-radius:14px;padding:12px;margin-bottom:14px;overflow:hidden}
.ed-search{display:flex;align-items:center;gap:9px;background:var(--espresso);border:1.5px solid var(--line-dark);
  border-radius:11px;padding:0 12px;transition:.15s}
.ed-search:focus-within{border-color:var(--red)}
.ed-search svg{width:18px;height:18px;flex:none;color:var(--on-dark-faint)}
.ed-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--on-dark);font-family:var(--sans);
  font-size:15px;padding:12px 0}
.ed-search input::placeholder{color:var(--on-dark-faint)}
.ed-search input::-webkit-search-cancel-button{filter:invert(.5)}
/* фильтры — горизонтальные чипы со скроллом, строго внутри панели (B2: ничего за вьюпорт) */
.editor-panel .filters{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;margin:10px -12px -2px;
  padding:2px 12px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin:0 -20px 4px;padding-left:20px;padding-right:20px;-webkit-overflow-scrolling:touch}
.filters::-webkit-scrollbar{display:none}
.filters .filter{flex:none}
.grid-more{text-align:center;margin-top:14px}
.pick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:6px}
@media(min-width:620px){.pick-grid{grid-template-columns:repeat(3,1fr)}}
.sc{border-radius:14px;overflow:hidden;border:2px solid transparent;background:var(--espresso-2);box-shadow:var(--sh);cursor:pointer;transition:.15s}
.sc:hover{transform:translateY(-2px)}
.sc.on{border-color:var(--red)}
.sc .ph{aspect-ratio:1/1;background:var(--espresso);position:relative}
.sc .ph img{width:100%;height:100%;object-fit:cover}
/* WO10 D — звезда «сохранить сцену в избранное» на плитке студии */
.sc-star{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-dark);
  background:rgba(30,30,30,.62);color:var(--on-dark);display:grid;place-items:center;cursor:pointer;transition:.15s;padding:0}
.sc-star svg{width:15px;height:15px}
.sc-star:hover,.sc-star.on{color:var(--rose);border-color:var(--rose)}
.sc .nm{padding:8px 11px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark-dim)}
.sc.on .nm{color:var(--rose)}

/* format chips (real ratios) */
.scene-chosen{display:flex;align-items:center;gap:10px;background:rgba(122,31,43,.1);border:1px solid rgba(122,31,43,.3);
  border-radius:12px;padding:12px 14px;font-size:14px;font-weight:600;margin-bottom:18px}
.scene-chosen svg{color:var(--red);flex:none}
.fmt-row{display:flex;gap:10px;flex-wrap:wrap}
.fmt-chip{flex:1;min-width:66px;border:1.5px solid var(--line-dark);border-radius:12px;padding:14px 6px 10px;text-align:center;cursor:pointer;background:var(--espresso);transition:.15s}
.fmt-chip.on{border-color:var(--red);background:rgba(122,31,43,.12)}
.fmt-chip .g{margin:0 auto 9px;background:linear-gradient(135deg,var(--wine),var(--brand));border-radius:4px}
.fmt-chip b{font-size:14px;font-family:var(--display);font-weight:700}.fmt-chip span{display:block;font-size:10.5px;color:var(--on-dark-faint);margin-top:3px}
.gr43{width:48px;height:36px}.gr11{width:40px;height:40px}.gr34{width:32px;height:42px}.gr916{width:26px;height:46px}
.fmt-hint{font-size:12.5px;color:var(--on-dark-faint);margin-top:12px}
.bar-actions{position:sticky;bottom:calc(70px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--espresso-deep) 34%);padding-top:20px;margin-top:24px}
.bar-actions .micro{font-size:12px;color:var(--on-dark-faint);text-align:center;margin-top:10px}

/* progress */
.progress{text-align:center;padding:46px 0}
.spinner{width:56px;height:56px;margin:0 auto 22px;border-radius:50%;border:4px solid var(--line-dark);border-top-color:var(--red);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.prog-status{font-size:15px;color:var(--on-dark);margin-top:10px;font-weight:600}
.prog-note{font-size:13px;color:var(--on-dark-faint);margin-top:8px}

/* result */
.variants{display:grid;gap:16px}
@media(min-width:560px){.variants{grid-template-columns:1fr 1fr}}
.variant{border:2px solid var(--line-dark);border-radius:var(--r);overflow:hidden;background:var(--espresso-2);box-shadow:var(--sh);transition:.15s}
.variant.on{border-color:var(--red);box-shadow:0 0 0 1px var(--red),var(--sh-lg)}
.variant .img{aspect-ratio:4/3;background:var(--espresso)}
.variant .img img{width:100%;height:100%;object-fit:cover}
.variant .vb{padding:11px 13px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.variant .vb b{font-size:13.5px}
.result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.iconbtn{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;padding:11px 16px;border-radius:999px;
  border:1.5px solid var(--line-dark);background:var(--espresso-2);color:var(--on-dark);cursor:pointer;transition:.15s}
.iconbtn:hover{border-color:var(--rose)}
.iconbtn svg{flex:none;color:var(--rose)}
.upsell{margin-top:20px;font-size:14px;color:var(--on-dark-dim);text-align:center}

/* soft wall / packages (app) — WO9 B6: презентабельная допродажа */
.wall-hero{text-align:center;background:
  radial-gradient(420px 220px at 50% -20%, rgba(122,31,43,.28), transparent 64%),
  linear-gradient(180deg,var(--espresso-2),var(--espresso));
  border:1px solid rgba(216,167,167,.22);border-radius:var(--r-lg);padding:28px 22px;margin-bottom:18px}
.wall-eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rose);margin-bottom:12px}
.wall-hero h2{font-size:clamp(23px,6vw,32px);margin-bottom:10px}
.wall-hero .sub{margin:0 auto;max-width:42ch}
.save-in{color:var(--rose);font-weight:700}
.wall-note{background:rgba(122,31,43,.1);border:1px solid rgba(122,31,43,.3);border-radius:var(--r);padding:18px;font-size:14.5px;margin-bottom:20px}
.wall-points{display:grid;gap:10px;margin:18px 0}
.wall-points li{list-style:none;display:flex;gap:10px;align-items:center;font-size:14px}
.wall-points svg{color:var(--red);flex:none}
.pkg-list{display:grid;gap:12px}
@media(min-width:620px){.pkg-list{grid-template-columns:repeat(2,1fr)}}
.pkg-mini{border:1.5px solid var(--line-dark);border-radius:var(--r);padding:18px;background:var(--espresso-2);display:flex;flex-direction:column;position:relative}
.pkg-mini.feat{border-color:var(--red)}
.pkg-mini .feat-tag{position:absolute;top:-11px;right:14px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 11px;border-radius:999px}
.pkg-mini h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:18px}
.pkg-mini .amt{font-family:var(--display);font-weight:700;font-size:26px;margin-top:8px}
.pkg-mini .per{font-size:12.5px;color:var(--on-dark-faint)}.pkg-mini .save{font-size:12.5px;color:var(--red);margin-top:4px;font-weight:600}
.pkg-mini .btn{margin-top:14px}

/* status panel (success/error/empty) */
.statebox{text-align:center;padding:30px 18px}
.statebox .ic{width:62px;height:62px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:rgba(122,31,43,.12);color:var(--red)}
.statebox.ok .ic{background:rgba(122,31,43,.14);color:#7a1f2b}
.statebox h2{margin-bottom:10px}
.statebox p{color:var(--on-dark-dim);font-size:15px;max-width:46ch;margin:0 auto 20px}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);z-index:90;
  background:var(--espresso-2);color:var(--on-dark);border:1px solid var(--line-dark);padding:12px 20px;border-radius:999px;
  font-size:14px;box-shadow:var(--sh-lg);opacity:0;transition:.3s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--bordeaux);border-color:var(--red)}

@media(prefers-reduced-motion:reduce){
  .mq-track,.tag-track{animation:none!important}
  .pulse,.price-badge{animation:none!important}
  .reveal,.js .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .spinner{animation:none!important}
  .lightbox.on{animation:none!important}
  .sheet{transition:none!important}
}

/* ============================================================
   СТУДИЯ 2.0 — редактор «панель | результат» (G2/G3/G5)
   Палитра строго канон: espresso/wine/cream/rose. Чужих цветов нет.
   ============================================================ */
.studio2{display:block}
.st-panel{display:flex;flex-direction:column;gap:20px}
.st-label{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.06em;color:var(--on-dark-dim);margin-bottom:10px}
.st-label.sm{font-size:12px;margin-bottom:8px}
.st-label-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.st-label-row .st-label{margin-bottom:0}
.st-scene .linkbtn{font-size:13px;color:var(--rose);font-weight:600}

/* чипы категорий */
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chips-wrap{flex-wrap:wrap;overflow:visible;padding-bottom:0}
.chip{flex:none;font-size:13px;font-weight:600;padding:8px 14px;border:1.5px solid var(--line-dark);border-radius:999px;
  background:transparent;color:var(--on-dark-dim);cursor:pointer;white-space:nowrap;transition:.15s}
.chip:hover{color:#fff;border-color:var(--rose)}
.chip.on{background:var(--red);color:#fff;border-color:transparent}
.chip.soon{opacity:.72}
.chip.soon i{font-style:normal;font-size:10px;opacity:.85;margin-left:5px;letter-spacing:.04em}

/* sheet: десктоп — статичный блок; мобайл — bottom-sheet (G3: фото/сцена/формат) */
.sheet .sheet-grip,.sheet .sheet-head,.sheet .sheet-done,.sheet .sheet-foot{display:none}
.sheet .ed-search{margin:10px 0}
.st-scene .grid-more{margin-top:12px;text-align:center}
.st-fmt .fmt-hint{margin-top:12px}

/* большая кнопка генерации — прилипший низ панели (десктоп) */
.st-gen{position:sticky;bottom:0;padding:14px 0 12px;margin-top:-6px;
  background:linear-gradient(transparent,var(--espresso-deep) 32%)}
.st-gen .btn--lg{font-size:16px}
.st-gen .micro{text-align:center;margin-top:10px;color:var(--on-dark-faint);font-size:12px}

/* область результата */
.st-result{margin-top:24px}
.res-empty{border:1px dashed var(--line-dark);border-radius:var(--r-lg);padding:22px;background:var(--espresso-2)}
.res-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rose)}
.res-empty h3{font-family:var(--display);font-weight:700;font-size:20px;margin:8px 0 6px;text-transform:none}
.showcase{display:grid;gap:12px;margin-top:16px}
.show-pair{display:grid;grid-template-columns:1fr 1fr;gap:6px;border-radius:12px;overflow:hidden}
.show-pair .sp{position:relative;aspect-ratio:1/1;background:var(--espresso)}
.show-pair .sp img{width:100%;height:100%;object-fit:cover}
.show-pair .sp span{position:absolute;left:6px;bottom:6px;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;background:rgba(30,30,30,.72);color:var(--on-dark);padding:3px 8px;border-radius:999px}
.show-pair .sp.after span{background:var(--wine);color:#fff}
.res-title{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:22px;margin-bottom:6px}

/* G5 — стек заданий: плейсхолдер точно на месте будущего фото, до/после, макро, другие сцены */
.job{border:1px solid var(--line-dark);border-radius:var(--r-lg);background:var(--espresso-2);
  padding:14px;box-shadow:var(--sh)}
.job+.job{margin-top:16px}
.job-img{position:relative;border-radius:14px;overflow:hidden;background:var(--espresso);
  border:1px dashed rgba(216,167,167,.28);display:grid;place-items:center;max-height:66vh}
.job-wait{text-align:center;padding:18px}
.job-wait .spinner{width:46px;height:46px;margin:0 auto 12px;border-width:3.5px}
.job-sec{display:block;font-family:var(--display);font-weight:700;font-size:24px;line-height:1;margin-bottom:6px}
.job-status{font-size:14.5px;font-weight:600}
.job-note{font-size:12.5px;color:var(--rose);margin-top:4px}
.job-hint{font-size:12.5px;color:var(--on-dark-faint);max-width:34ch;margin:10px auto 0;line-height:1.45}
.job-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.job-meta b{font-size:14px}
.job-meta span{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--on-dark-faint)}
/* WO-G31 B1 — этапы прогресса генерации (данные из /api/generate/{id}.stage) */
.job-stages{display:flex;flex-direction:column;gap:5px;align-items:flex-start;width:max-content;margin:8px auto 0;text-align:left}
.stg{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--on-dark-faint);transition:color .25s}
.stg i{font-style:normal;width:19px;height:19px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid var(--line-dark);font-size:10.5px;font-weight:700;transition:.25s}
.stg.on{color:var(--on-dark);font-weight:600}
.stg.on i{border-color:var(--red);color:var(--rose)}
.stg.done{color:var(--on-dark-dim)}
.stg.done i{background:var(--wine);border-color:var(--wine);color:#fff}
.job-long{font-size:12.5px;color:var(--rose);margin-top:8px;max-width:34ch;margin-left:auto;margin-right:auto;line-height:1.45}
.job-long.hide{display:none}
/* WO-G31 B3 — бейджи сцены/формата/времени на готовой карточке */
.job-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.jbadge{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;border:1px solid var(--line-dark);color:var(--on-dark-dim);background:var(--espresso)}
.jbadge--scene{border-color:rgba(216,167,167,.4);color:var(--rose)}
.jbadge--time{color:var(--on-dark-faint)}
/* WO-G31 B4 — появление карточек без сдвига раскладки: только opacity */
.job{animation:jobfade .22s ease}
@keyframes jobfade{from{opacity:0}to{opacity:1}}
/* WO-G31 B2 — полноэкранное сравнение (лайтбокс со шторкой и вариантами) */
.cmp-lb{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;
  background:rgba(12,8,8,.9);backdrop-filter:blur(4px);animation:jobfade .18s ease;padding:18px}
.cmp-body{width:min(96vw,860px);max-height:92vh;display:flex;flex-direction:column;gap:12px}
.cmp-body .ba-slide{max-height:78vh;width:100%}
.cmp-single{width:100%;max-height:78vh;object-fit:contain;border-radius:12px;background:var(--espresso)}
.cmp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cmp-vars{display:flex;gap:8px}
.cmp-v{border:1.5px solid var(--line-dark);border-radius:999px;background:var(--espresso-2);color:var(--on-dark);
  font:inherit;font-size:13px;font-weight:600;padding:8px 16px;cursor:pointer;transition:.15s}
.cmp-v.on{border-color:var(--red);background:rgba(122,31,43,.22);color:#fff}
/* WO-G31 B5 — витрина «до/после» в пустой студии (шторки из demo.json) */
.demo-show{display:grid;gap:14px;margin-top:16px}
.demo-pair{margin:0}
.demo-pair .ba-slide{width:100%}
.demo-pair figcaption{font-size:12.5px;color:var(--on-dark-dim);margin-top:7px;font-weight:600}
.job-fail{text-align:center;padding:18px 12px 6px}
.job-fail .ic{width:52px;height:52px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;
  background:rgba(122,31,43,.14);color:var(--rose)}
.job-fail b{font-family:var(--display);font-size:17px;text-transform:uppercase;letter-spacing:.03em}
.job-fail p{font-size:13.5px;color:var(--on-dark-dim);max-width:40ch;margin:6px auto 0}
/* до/после */
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ba-cell{position:relative;border-radius:12px;overflow:hidden;background:var(--espresso)}
.ba-cell img{width:100%;height:100%;object-fit:cover}
.ba-cell span{position:absolute;left:8px;bottom:8px;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;background:rgba(30,30,30,.72);color:var(--on-dark);padding:3px 9px;border-radius:999px}
.ba-cell.after span{background:var(--wine);color:#fff}
.ba-cell.after{border:1px solid rgba(216,167,167,.3)}
/* WO-G28 B3 — шторка-слайдер «до|после»: низ = исходник, верх = результат с clip-path */
.ba-slide{position:relative;border-radius:12px;overflow:hidden;background:var(--espresso);
  border:1px solid rgba(216,167,167,.3);touch-action:pan-y;cursor:ew-resize;user-select:none}
.ba-slide>img,.ba-slide .ba-top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-slide .ba-top{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.ba-lab{position:absolute;bottom:8px;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;padding:3px 9px;border-radius:999px;pointer-events:none}
.ba-lab.was{left:8px;background:rgba(30,30,30,.72);color:var(--on-dark)}
.ba-lab.now{right:8px;background:var(--wine);color:#fff}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;
  transform:translateX(-1px);pointer-events:none}
.ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;background:rgba(30,30,30,.72);border:2px solid #fff;
  display:grid;place-items:center;color:#fff;font-size:12px;letter-spacing:-1px}
/* WO-G28 A2 — два варианта платной генерации рядом, скачать можно каждый */
.job-variants{margin-top:12px}
.jv-cap{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:12.5px;
  letter-spacing:.06em;color:var(--on-dark-dim);margin-bottom:10px}
.jv-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.jv-card{border:1px solid var(--line-dark);border-radius:12px;overflow:hidden;cursor:pointer;
  background:var(--espresso);transition:.15s}
.jv-card:hover{border-color:var(--rose)}
.jv-card.on{border-color:var(--wine);box-shadow:0 0 0 1px var(--wine)}
.jv-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.jv-row{display:flex;align-items:center;justify-content:space-between;padding:6px 8px}
.jv-row span{font-size:11.5px;font-weight:600;color:var(--on-dark-dim)}
.jv-dl{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line-dark);
  border-radius:8px;background:none;color:var(--on-dark);cursor:pointer;transition:.15s}
.jv-dl:hover{border-color:var(--rose);color:var(--rose)}
/* макро-кнопка */
.job-macro{margin-top:12px}
.job-macro .btn{width:100%;font-size:13.5px;white-space:normal;line-height:1.3}
.job-macro svg{flex:none;color:var(--rose)}
/* другие сцены той же категории */
.job-others{margin-top:16px;border-top:1px solid var(--line-dark);padding-top:12px}
.jo-cap{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:12.5px;
  letter-spacing:.06em;color:var(--on-dark-dim);margin-bottom:10px}
.jo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.jo-card{background:none;border:1px solid var(--line-dark);border-radius:12px;overflow:hidden;cursor:pointer;
  padding:0;text-align:left;transition:.15s}
.jo-card:hover{border-color:var(--rose);transform:translateY(-2px)}
.jo-ph{display:block;aspect-ratio:1/1;background:var(--espresso)}
.jo-ph img{width:100%;height:100%;object-fit:cover}
.jo-nm{display:block;font-size:11px;font-weight:600;color:var(--on-dark-dim);padding:6px 8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* нижний бар (мобайл) */
.st-bar{display:none}

/* каталог стилей (G2) — вкладка «Стили» */
.catalog .cat-head{margin-bottom:6px}
.catalog .cat-search{margin:14px 0 12px}
.cc-cat{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--rose);background:rgba(122,31,43,.16);border:1px solid rgba(216,167,167,.24);
  border-radius:999px;padding:2px 9px;margin-top:6px}
.catalog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
.cat-card{display:block;text-align:left;background:var(--espresso-2);border:1px solid var(--line-dark);border-radius:14px;
  overflow:hidden;cursor:pointer;padding:0;transition:.15s}
.cat-card:hover{transform:translateY(-3px);border-color:var(--rose);box-shadow:var(--sh-lg)}
.cc-ph{display:block;aspect-ratio:1/1;background:var(--espresso)}
.cc-ph img{width:100%;height:100%;object-fit:cover}
.cc-meta{display:block;padding:10px 12px}
.cc-meta b{display:block;font-size:14px;color:var(--on-dark)}
.cc-meta span{font-size:11.5px;color:var(--on-dark-faint)}

/* десктоп: две панели */
@media(min-width:900px){
  .app-main:has(.studio2),.app-main:has(.catalog){max-width:1180px}
  .studio2{display:grid;grid-template-columns:360px 1fr;gap:30px;align-items:start}
  .st-panel{position:sticky;top:80px;max-height:calc(100vh - 96px);overflow-y:auto;scrollbar-width:none;padding-right:2px}
  .st-panel::-webkit-scrollbar{display:none}
  .st-result{margin-top:0}
  .catalog-grid{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:620px) and (max-width:899px){.catalog-grid{grid-template-columns:repeat(3,1fr)}}

/* мобайл (G3): канвас сверху, бар из 4 действий, каждый пункт = bottom-sheet */
@media(max-width:899px){
  .studio2{display:flex;flex-direction:column}
  .st-result{order:-1;margin-top:0}
  .st-panel .st-label,.st-panel .st-label-row{display:none}
  .st-panel{gap:0}
  .st-gen{display:none}
  .st-panel .sheet{position:fixed;left:0;right:0;bottom:0;z-index:70;max-height:84vh;display:flex;flex-direction:column;
    background:var(--espresso-2);border-top-left-radius:20px;border-top-right-radius:20px;border-top:1px solid var(--line-dark);
    box-shadow:0 -20px 50px -20px rgba(0,0,0,.85);transform:translateY(103%);transition:transform .28s ease;padding:8px 16px calc(16px + env(safe-area-inset-bottom));
    visibility:hidden}
  .st-panel .sheet.open{transform:translateY(0);visibility:visible}
  .sheet .sheet-grip{display:block;width:40px;height:4px;border-radius:999px;background:var(--line-dark);margin:6px auto 8px;flex:none}
  .sheet .sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
  .sheet .sheet-head b{font-size:16px;font-family:var(--display);text-transform:uppercase;letter-spacing:.04em}
  .sheet-x{background:none;border:none;color:var(--on-dark-dim);cursor:pointer;padding:4px;display:flex}
  .sheet .sheet-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .sheet .sheet-done{display:inline-flex;margin-top:12px;width:100%;flex:none}
  .sheet .sheet-foot{display:flex;align-items:center;gap:14px;margin-top:10px;flex:none}
  .sheet .sheet-foot .linkbtn{flex:none;color:var(--rose);font-weight:600;font-size:13.5px}
  .sheet .sheet-foot .sheet-done{margin-top:0;flex:1;width:auto}
  body.sheet-lock{overflow:hidden}
  .st-bar{display:flex;align-items:center;position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:56;
    gap:8px;max-width:760px;margin:0 auto;padding:10px 12px;background:rgba(30,30,30,.96);backdrop-filter:blur(10px);
    border-top:1px solid var(--line-dark)}
  .bar-pick{flex:none;background:var(--espresso);border:1px solid var(--line-dark);border-radius:12px;padding:6px 8px;
    text-align:left;color:var(--on-dark);cursor:pointer;transition:.15s}
  .bar-pick .bar-cap{display:block;font-size:9.5px;color:var(--on-dark-faint);text-transform:uppercase;letter-spacing:.05em}
  .bar-pick b{font-size:12px;display:block;max-width:62px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bar-pick.dim{opacity:.45}
  .bar-gen{flex:1;flex-direction:column;gap:0;padding:6px 8px;border-radius:12px;text-align:center}
  .bar-gen .bar-cap{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.75);font-weight:600}
  .bar-gen b{display:block;font-size:12.5px;white-space:nowrap}
  .bar-gen.is-disabled,.bar-gen:disabled{opacity:.55}
  .studio2{padding-bottom:92px}
}

/* G7 — онбординг */
.onbov{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;
  background:rgba(30,30,30,.72);backdrop-filter:blur(4px);animation:fade .25s ease}
.onbo-card{width:100%;max-width:420px;background:var(--espresso-2);border:1px solid rgba(216,167,167,.22);
  border-radius:var(--r-lg);padding:26px 22px;box-shadow:var(--sh-lg)}
.onbo-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rose)}
.onbo-card h3{font-family:var(--display);font-weight:700;font-size:22px;margin:8px 0 18px}
.onbo-steps{display:grid;gap:14px;margin-bottom:22px}
.onbo-step{display:flex;gap:12px;align-items:flex-start}
.onbo-n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);
  font-weight:700;background:rgba(122,31,43,.16);color:var(--rose);border:1px solid rgba(216,167,167,.28)}
.onbo-step b{font-size:15px}
.onbo-step p{font-size:13px;color:var(--on-dark-faint);margin-top:2px}

/* WO-G29 A1 — примерка на лендинге (демо-шторка, data-driven из demo.json) */
.demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:28px;align-items:start;max-width:960px;margin:0 auto}
.demo-dishes{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.demo-chip{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;cursor:pointer;
  background:#fff;border:1px solid var(--line-cream);box-shadow:var(--sh-cream);color:var(--ink);
  font-size:13.5px;font-weight:600;transition:.15s ease}
.demo-chip img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.demo-chip:hover{border-color:var(--rose);transform:translateY(-1px)}
.demo-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.demo-view .ba-slide{box-shadow:var(--sh-lg);cursor:ew-resize;touch-action:pan-y}
.demo-scenes{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.demo-scene-chip{padding:7px 14px;border-radius:999px;border:1px solid var(--line-cream);background:#fff;
  font-size:12.5px;font-weight:600;color:var(--ink-dim);cursor:pointer;transition:.15s ease}
.demo-scene-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.demo-cta{text-align:center;margin-top:32px}

/* WO-G29 C2 — «Скачать все (N)» над стеком результатов */
.jobs-toolbar{display:flex;justify-content:flex-end;margin-bottom:12px}
.jobs-toolbar .iconbtn:disabled{opacity:.5;pointer-events:none}

/* WO-G29 B1 — seo-страницы (/lp, /scene): герой с шторкой по канону лендинга */
.seo-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:40px;align-items:center}
.seo-hero-copy h1{font-size:clamp(28px,5.6vw,44px);line-height:1.05;max-width:20ch;margin-top:14px}
.seo-lead{margin-top:18px;font-size:16.5px;color:var(--ink-dim);max-width:56ch}
.seo-cta{margin-top:26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.seo-cta-note{font-size:13px;color:var(--ink-dim)}
.seo-hero-demo .ba-slide{box-shadow:var(--sh-lg);cursor:ew-resize;touch-action:pan-y}
.seo-demo-cap{margin-top:10px;text-align:center;font-size:12.5px;color:var(--ink-dim)}
.seo-related{margin-top:26px;font-size:13.5px}
.seo-related a{color:var(--on-dark-dim);margin:0 10px;text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){
  .seo-hero{grid-template-columns:1fr;gap:24px}
  .seo-hero-demo{max-width:380px;margin:0 auto;width:100%}
}
@media(max-width:760px){
  .demo-grid{grid-template-columns:1fr;gap:18px}
  .demo-dishes{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .demo-chip{flex:none}
  .demo-view{max-width:420px;margin:0 auto;width:100%}
}

/* ============================================================
   WO-G30 A — студия v3 (GEN-UI-IDEAL, состояния 1-7)
   ============================================================ */
/* A2 — постоянные якоря «что я дал / что я выбрал» */
.st-anchors{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.st-anchors[hidden]{display:none}
.an-src,.an-sel{display:flex;align-items:center;gap:9px;background:var(--espresso-2);border:1px solid var(--line-dark);
  border-radius:12px;padding:5px;cursor:pointer;color:var(--on-dark);font-family:var(--sans);transition:.15s}
.an-src:hover,.an-sel:hover{border-color:var(--rose)}
.an-im{width:40px;height:40px;border-radius:8px;object-fit:cover;display:block;flex:none}
.ph-heic{display:grid;place-items:center;font-size:9px;font-weight:700;color:var(--on-dark-faint);background:var(--espresso)}
.an-cap{font-size:10px;font-weight:700;color:var(--on-dark-faint);text-transform:uppercase;letter-spacing:.06em;padding-right:6px}
.an-sel .an-tt{text-align:left;padding-right:8px;min-width:0}
.an-sel .an-tt b{display:block;font-size:12.5px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-sel .an-tt span{display:block;font-size:10.5px;color:var(--on-dark-faint)}
.an-change{margin-left:auto;font-size:12.5px;flex:none}
/* бейдж цены — один раз в шапке зоны загрузки (состояние 1) */
.price-hint{font-size:11.5px;font-weight:700;color:var(--rose);background:rgba(122,31,43,.16);
  border:1px solid rgba(216,167,167,.24);border-radius:999px;padding:3px 10px;white-space:nowrap}

/* A7 — формат: сегмент-контрол с пиктограммами площадок */
.fmt-seg{display:flex;gap:8px}
.fmt-seg .seg{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;
  border:1.5px solid var(--line-dark);border-radius:12px;background:var(--espresso);color:var(--on-dark-dim);
  cursor:pointer;transition:.15s;font-family:var(--sans)}
.fmt-seg .seg svg{width:22px;height:22px}
.fmt-seg .seg b{font-size:13px;font-family:var(--display)}
.fmt-seg .seg span{font-size:10.5px}
.fmt-seg .seg.on{border-color:var(--red);background:rgba(122,31,43,.12);color:var(--on-dark)}

/* A3 — sticky-панель готовности [исходник][сцена][формат] + CTA */
.ready-panel{display:flex;align-items:flex-start;gap:8px}
.ready-panel[hidden]{display:none}
.rp-th{flex:none;padding:0;border:1px solid var(--line-dark);border-radius:10px;overflow:hidden;
  background:var(--espresso);cursor:pointer;width:40px;height:40px}
.rp-im{width:100%;height:100%;object-fit:cover;display:block}
.rp-fmt{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:40px;
  padding:0 9px;border:1px solid var(--line-dark);border-radius:10px;background:var(--espresso);
  color:var(--on-dark-dim);cursor:pointer;font-family:var(--sans)}
.rp-fmt svg{width:15px;height:15px}
.rp-fmt b{font-size:10px;font-family:var(--display);letter-spacing:.02em}
.rp-main{flex:1;min-width:0}
.rp-main .btn{width:100%;padding:11px 10px;font-size:14px;white-space:nowrap}
.rp-main .micro{text-align:center;margin-top:5px;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(min-width:900px){
  .st-panel .ready-panel{position:sticky;bottom:0;padding:14px 0 12px;margin-top:-6px;
    background:linear-gradient(transparent,var(--espresso-deep) 32%)}
  /* якорная полоса добавляет ~80px сверху: ужимаем колонку, чтобы её низ
     (и прилипшая панель готовности) не уезжал за вьюпорт до прокрутки */
  .studio3 .st-panel{max-height:calc(100vh - 176px)}
}
@media(max-width:899px){
  .st-panel .st-photo .st-label-row{display:flex}   /* аплоадер инлайн и на мобайле */
  .st-panel .st-photo{margin-bottom:16px}
  .ready-panel{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:56;
    max-width:760px;margin:0 auto;padding:10px 12px;background:rgba(30,30,30,.96);
    backdrop-filter:blur(10px);border-top:1px solid var(--line-dark)}
  .studio3 .studio2{padding-bottom:96px}
  /* состояние 1 (ПУСТО) на мобайле: зона загрузки первой, витрина — под ней */
  .studio3 .studio2.no-src .st-result{order:1}
}

/* A4 — карточка генерации: блюр-превью исходника + прогресс-волна */
.job-blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(16px) brightness(.5);transform:scale(1.08)}
.job-img .job-wait{position:relative;z-index:1}
.job-wave{position:absolute;left:0;right:0;bottom:0;height:4px;overflow:hidden;z-index:1}
.job-wave::before{content:"";position:absolute;inset:0;width:40%;border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--wine),var(--rose),transparent);
  animation:jobWave 1.8s ease-in-out infinite}
@keyframes jobWave{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

/* A5 — микрогайд «что не так с фото» на карточке ошибки */
.mg-toggle{display:block;margin:12px auto 0;font-size:12.5px}
.microguide{margin:12px auto 4px;max-width:46ch;text-align:left;font-size:12.5px;color:var(--on-dark-dim);
  background:var(--espresso);border:1px solid var(--line-dark);border-radius:12px;padding:12px 14px}
.microguide b{color:var(--on-dark);font-size:12.5px}
.microguide ul{margin:8px 0 0 16px;display:grid;gap:6px}

/* A6 — полоса «сегодняшняя серия» над студией */
.series{border:1px solid var(--line-dark);border-radius:var(--r);background:var(--espresso-2);
  padding:10px 12px;margin-bottom:16px}
.ser-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.ser-head b{font-family:var(--display);text-transform:uppercase;font-size:13px;letter-spacing:.05em}
.ser-head .iconbtn{padding:8px 13px;font-size:12.5px}
.ser-head .iconbtn:disabled{opacity:.5;pointer-events:none}
.ser-row{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ser-row::-webkit-scrollbar{display:none}
.ser-th{width:56px;height:56px;flex:none;border-radius:10px;object-fit:cover;
  border:1px solid var(--line-dark);cursor:pointer}

@media(prefers-reduced-motion:reduce){.job-wave::before{animation:none!important}}

/* ============================================================
   WO-G30 B — кабинет: дни, фильтры, пара «до→после», баланс
   ============================================================ */
.cab-bal-split{margin-top:3px}
.cab-bal-split b{color:var(--rose)}
.cab-filters{margin-bottom:14px}
.day-group{margin-bottom:22px}
.day-head{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.day-head b{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.05em}
.day-head .day-dl{margin-left:auto;padding:7px 12px;font-size:12px}
.day-head .day-dl:disabled{opacity:.5;pointer-events:none}
.gcard-none{aspect-ratio:1/1;display:grid;place-items:center;background:var(--espresso);padding:10px}
.gcard-none span{font-size:11.5px;color:var(--on-dark-faint);text-align:center;max-width:14ch}
.gc-ba{position:absolute;right:7px;bottom:7px;z-index:2;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.06em;background:rgba(30,30,30,.78);color:var(--on-dark);border:1px solid var(--line-dark);
  border-radius:999px;padding:4px 9px;cursor:pointer;transition:.15s}
.gc-ba:hover,.gc-ba.on{color:var(--rose);border-color:var(--rose)}
.gcard-ph .ba-slide{position:absolute;inset:0;border-radius:0;border:none}