/* ГАСТРО.ФОТО — 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 bases — neutral espresso dominant; burgundy only as accent glow (WO7 §1) */
  --espresso:#1E1E1E; --espresso-2:#242020; --espresso-deep:#161312; --night:#120709;
  /* brand reds — burgundy + wine only */
  --bordeaux:#5B0F18; --brand:#5B0F18; --wine:#7A1F2B; --red:#7A1F2B; --red-2:#5B0F18;
  /* lights */
  --cream:#F8F1E7; --cream-2:#EFE5D6; --rose:#D8A7A7;
  /* ink */
  --on-dark:#F8F1E7; --on-dark-dim:#CBB7B2; --on-dark-faint:#9A8480;
  --ink:#1E1E1E; --ink-dim:#5E4F49; --ink-faint:#8C7C73;
  --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:#8C7C73;
  --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(40,20,10,.06),0 22px 50px -26px rgba(40,20,10,.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(14,7,7,.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,#221E1D 0%,#1B1716 58%,#171413 100%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 66%,rgba(20,16,15,.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}
@keyframes priceBeat{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(122,31,43,0))}
  50%{transform:scale(1.045);filter:drop-shadow(0 0 18px rgba(216,167,167,.35))}}
.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(14,7,7,.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)}
/* WO11 — hero-«уравнение»: 3 равные панели 4:3 в один ряд [До] + [Сцена] = [Результат] */
.hero-eq{display:flex;align-items:center;gap:8px;background:var(--espresso-2);border:1px solid var(--line-dark);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:14px}
.heq-panel{flex:1;min-width:0;margin:0;display:flex;flex-direction:column;gap:7px}
.heq-img{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid var(--line-dark);background:var(--espresso)}
.heq-img img{width:100%;height:100%;object-fit:cover}
.heq-result .heq-img{border-color:var(--rose);box-shadow:0 0 0 1px var(--rose)}
.heq-scene-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;aspect-ratio:4/3}
.heq-scene{position:relative;border-radius:7px;overflow:hidden;border:1px solid var(--line-dark);background:var(--espresso)}
.heq-scene img{width:100%;height:100%;object-fit:cover}
.heq-scene.sel{border-color:var(--rose);box-shadow:0 0 0 2px var(--rose)}
.heq-cap{text-align:center;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--on-dark-dim)}
.heq-op{flex:none;font-family:var(--display);font-weight:700;font-size:24px;color:var(--rose);line-height:1}
@media(max-width:520px){
  .hero-eq{gap:6px;padding:10px}
  .heq-img img,.heq-scene img{max-height:130px}
  .heq-op{font-size:18px}
  .heq-cap{font-size:9px;letter-spacing:.06em}
}

/* ---- marquee ---- */
.marquee{padding:42px 0 36px;overflow:hidden;background:var(--espresso)}
.mq{overflow:hidden;margin-bottom:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* 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,#211D1C,#181514);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(14,7,7,.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 — подпись над галереей до/после */
.ba-lead{text-align:center;font-family:var(--display);text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(16px,2.4vw,22px);color:var(--espresso);margin:0 auto 6px;max-width:30ch;line-height:1.25}
.scene-editor{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-dark);
  background:linear-gradient(180deg,#221313,#160A0D);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,#FBF4EC)}
.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(18,7,9,.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:72px;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(18,7,9,.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(14,7,7,.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(36,19,19,.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 ---- */
.pulse{animation:ctaPulse 2.6s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{box-shadow:0 12px 30px -10px rgba(122,31,43,.7),0 0 0 0 rgba(122,31,43,.45)}
  50%{box-shadow:0 14px 34px -10px rgba(122,31,43,.85),0 0 0 12px rgba(122,31,43,0)}}

/* ---- 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(14,7,7,.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}
.app-main{max-width:760px;margin:0 auto;padding:26px 20px calc(86px + 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(18,7,9,.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(14,7,7,.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(14,7,7,.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)}

/* 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(14,7,7,.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(14,7,7,.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(14,7,7,.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(56,176,108,.14);color:#39C977}
.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}
}