@import url('../ftm-assets/fonts/fonts.css?v=1');

:root {
  --ff: Arial, Helvetica, sans-serif;
  --cream: #FBF3E8;
  --cream2: #F4E9D8;
  --pink: #FF6FA8;
  --pink-deep: #E04A85;
  --pink-soft: #FFD3E2;
  --pink-pastel: #FFE4ED;
  --green: #1F4D3A;
  --green-deep: #143828;
  --ink: #2A2823;
  --mute: #6A655B;
  --line: #E8DDC9;
  --white: #FFF;
  --r: 18px;
  --r-lg: 24px;
  --sh-sm: 0 2px 0 rgba(26, 25, 22, .06);
  --sh-md: 0 6px 18px rgba(26, 25, 22, .09);
  --sh-lg: 0 16px 40px rgba(26, 25, 22, .13);
  --sh-pink: 0 4px 0 var(--pink-deep);
  --hdr-h: 62px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
  hyphens: auto;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--hdr-h);
}

body {
  font-family: var(--ff);
  background: var(--cream);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  flex-wrap: wrap;

}

img,
svg {
  display: block;
  max-width: 100%
}

button {
  font-family: var(--ff);
  border: none;
  background: none;
  cursor: pointer;
  color: inherit
}

input,
textarea,
select {
  font-family: var(--ff);
  font-size: inherit;
  color: inherit
}

a {
  color: inherit;
  text-decoration: none
}

::selection {
  background: var(--pink);
  color: #fff
}

.h1 {
  font-weight: 700;
  font-size: clamp(32px, 6.2vw, 72px);
  line-height: .96;
  letter-spacing: -.04em
}

.h2 {
  font-weight: 700;
  font-size: clamp(22px, 3.8vw, 42px);
  line-height: 1.06;
  letter-spacing: -.025em
}

.h3 {
  font-weight: 600;
  font-size: clamp(17px, 2.2vw, 24px);
  line-height: 1.15
}

.eyebrow {
  font-size: 1em;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pink-deep)
}

.lead {
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--mute);
  line-height: 1.55;
  max-width: 50ch
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 17px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13.5px;
  transition: transform .15s, box-shadow .15s, background .12s;
  white-space: nowrap
}

.btn-p {
  background: var(--pink);
  color: #fff;
  box-shadow: var(--sh-pink)
}

.btn-p:hover {
  background: var(--pink-deep);
  transform: translateY(-2px)
}

.btn-p:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 var(--pink-deep)
}

.btn-d {
  background: var(--green);
  color: var(--cream2);
  box-shadow: 0 4px 0 var(--green-deep)
}

.btn-d:hover {
  background: var(--green-deep);
  transform: translateY(-2px)
}

.btn-s {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm)
}

.btn-s:hover {
  background: var(--pink-pastel);
  border-color: var(--pink-soft)
}

.btn-lg {
  padding: 14px 22px;
  font-size: 15px
}

.btn-bl {
  display: flex;
  width: 100%
}

.arr {
  transition: transform .15s
}

.btn:hover .arr {
  transform: translateX(3px)
}

/* ═══ HEADER ═══ */
.hdr {
  position: sticky;
  top: 0;
  z-index: 80;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  background: rgba(251, 243, 232, .86);
  border-bottom: 1px solid rgba(232, 221, 201, .4);
  height: var(--hdr-h)
}

.hdr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%
}

.logo-img {
  height: 34px;
  width: auto;
  cursor: pointer;
  flex-shrink: 0
}

.nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: 20px
}

.nav a {
  font-size: 13px;
  font-weight: 500;
  padding: 4px 0;
  position: relative
}

.nav a:hover {
  color: var(--pink-deep)
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--pink);
  transform: scaleX(0);
  transition: transform .2s
}

.nav a:hover::after {
  transform: scaleX(1)
}

.hdr-r {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px
}

.ib {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s, background .12s;
  position: relative;
  flex-shrink: 0
}

.ib:hover {
  transform: translateY(-1px);
  background: var(--pink-pastel)
}

.cart-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
  border: 2px solid var(--cream);
  display: none
}

.burger {
  display: none
}

@media(max-width:960px) {
  .nav {
    display: none
  }

  .burger {
    display: flex
  }
}

@media(max-width:520px) {
  .hdr .btn-p {
    display: none
  }
}

/* ═══ OVERLAYS ═══ */
.ov {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  z-index: 300;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 14px;
  overflow-y: auto
}

.ov.open {
  display: flex
}

.mdl {
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: 22px;
  max-width: 380px;
  width: 100%;
  position: relative;
  box-shadow: var(--sh-lg);
  animation: fu .2s ease
}

@keyframes fu {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.mdl-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px
}

.mdl h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px
}

.mdl-empty {
  padding: 16px;
  text-align: center;
  color: var(--mute);
  font-size: 13px;
  background: var(--white);
  border-radius: 10px;
  border: 1px dashed var(--line)
}

/* Burger */
.bm {
  position: fixed;
  inset: 0;
  background: var(--cream);
  z-index: 250;
  display: none;
  flex-direction: column
}

.bm.open {
  display: flex
}

.bm-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line)
}

.bm-b {
  flex: 1;
  overflow-y: auto;
  padding: 16px
}

.bm-b a {
  display: block;
  font-size: 17px;
  font-weight: 600;
  padding: 11px 0;
  border-bottom: 1px solid var(--line)
}

.bm-f {
  padding: 14px;
  border-top: 1px solid var(--line)
}

/* Draft confirm */
.dmod {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px
}

.dmod.open {
  display: flex
}

.dbox {
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: 24px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: var(--sh-lg)
}

.dbox h3 {
  margin-bottom: 8px;
  font-size: 17px
}

.lf-draft-gate {
  position: fixed;
  inset: 0;
  z-index: 650;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 45, 32, .72);
}

.lf-draft-gate.open {
  display: flex;
}

.lf-draft-box {
  width: min(520px, 100%);
  max-height: min(680px, calc(100vh - 40px));
  overflow: auto;
  padding: 22px;
  border-radius: var(--r-lg);
  background: var(--cream);
  box-shadow: var(--sh-lg);
}

.lf-draft-box h3 {
  margin: 0 0 8px;
  font-size: 21px;
}

.lf-draft-box p {
  margin: 0 0 14px;
  color: var(--mute);
  line-height: 1.35;
}

.lf-draft-new,
.lf-draft-list {
  display: grid;
  gap: 8px;
}

.lf-draft-list {
  margin-top: 14px;
}

.lf-draft-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: stretch;
}

.lf-draft-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  text-align: left;
}

.lf-draft-delete {
  width: 38px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--pink-deep);
  font-size: 20px;
  font-weight: 900;
}

.lf-draft-delete:hover {
  border-color: var(--pink);
  background: #fff1f7;
}

.lf-draft-item b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lf-draft-item span,
.lf-draft-error {
  color: var(--mute);
  font-size: 12px;
}

.lf-draft-error {
  color: var(--pink-deep);
  font-weight: 800;
}

.dbox p {
  font-size: 13px;
  color: var(--mute);
  margin-bottom: 14px
}

.dbtns {
  display: flex;
  flex-direction: column;
  gap: 7px
}

/* ═══ HERO ═══ */
.hero {
  padding: 36px 0 56px;
  position: relative;
  overflow: hidden
}

.hero::before {
  content: "";
  position: absolute;
  inset: auto -10vw 0 -10vw;
  height: 50%;
  background: radial-gradient(ellipse at 20% 100%, var(--pink-pastel) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, #DCE8DE 0%, transparent 50%);
  z-index: -1
}

.hero-g {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: center
}

@media(max-width:960px) {
  .hero-g {
    grid-template-columns: 1fr
  }
}

.hero .pk {
  color: var(--pink-deep)
}

/* Fancy underline: two pink bars with gap for descender of "р" */
.uf {
  position: relative;
  display: inline-block
}

.uf .uf-l,
.uf .uf-r {
  position: absolute;
  bottom: -.02em;
  height: clamp(3px, .5vw, 6px);
  background: var(--pink);
  border-radius: 2px
}

.uf .uf-l {
  left: 0;
  width: 53%
}

.uf .uf-r {
  left: 64%;
  right: 0
}

.hero-cta {
  margin-top: 20px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.hero-stats {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px
}

@media(max-width:640px) {
  .hero-stats {
    grid-template-columns: repeat(2, 1fr)
  }
}

.hs {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px;
  text-align: center;
  position: relative;
}

.hs b {
  display:inline-flex;
  font-size: 20px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: -.02em;
  white-space: nowrap;
  align-content: center;
}

.hs b .star {
  color: var(--green);
  font-size: 16px;
  align-content: center;
}

.hs span {
  font-size: 10.5px;
  color: var(--mute);
  line-height: 1.3;
  display: block;
  margin-top: 1px;
}

.hero-photos {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.hero-ph {
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-md);
  aspect-ratio: 3/4
}

.hero-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.hero-ph:first-child {
  transform: rotate(-3deg)
}

.hero-ph:nth-child(2) {
  transform: rotate(2deg);
  margin-top: 22px
}

.hero-badge {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: var(--cream);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--sh-md);
  z-index: 2
}

/* ═══ MARQUEE ═══ */
.mq {
  background: var(--green);
  color: var(--cream);
  padding: 11px 0;
  overflow: hidden
}

.mt {
  display: flex;
  white-space: nowrap;
  animation: scrl 50s linear infinite;
  font-size: 15px;
  font-weight: 600
}

.mt span {
  display: flex;
  align-items: center
}

.mt .item {
  padding: 0 16px
}

.mt .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pink);
  flex-shrink: 0
}

@keyframes scrl {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

/* ═══ SECTIONS ═══ */
section {
  padding: 56px 0;
  scroll-margin-top: var(--hdr-h)
}

.sh {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 32px;
  flex-wrap: wrap
}

.sh .left {
  max-width: 800px
}

.sh .eyebrow {
  margin-bottom: 7px;
  display: block
}

/* CATEGORY CARDS */
.cg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px
}

@media(max-width:900px) {
  .cg {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:480px) {
  .cg {
    grid-template-columns: 1fr
  }
}

.cc {
  background: var(--white);
  border-radius: var(--r);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1px solid var(--line);
  transition: transform .2s, box-shadow .2s;
  cursor: pointer;
  min-height: 160px
}

.cc:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md)
}

.cc-i {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center
}

.cc h4 {
  font-size: 1.3em;
  font-weight: 700
}

.cc p {
  font-size: 0.9em;
  color: var(--mute);
  line-height: 1.35;
  flex: 1
}

.cc .m {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95em;
  font-weight: 700;
  padding-top: 4px
}

.cc .ac {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px
}

.cc.pk {
  background: var(--pink);
  color: #fff;
  border-color: var(--pink-deep)
}

.cc.pk p {
  color: rgba(255, 255, 255, .82)
}

.cc.pk .ac {
  background: #fff;
  color: var(--pink-deep)
}

.cc.dk {
  background: var(--green);
  color: var(--cream);
  border-color: var(--green-deep)
}

.cc.dk p {
  color: rgba(244, 233, 216, .78)
}

.cc.dk .ac {
  background: var(--cream);
  color: var(--green)
}

/* TRUST */
.trust {
  background: var(--green);
  color: var(--cream);
  border-radius: var(--r-lg);
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}

@media(max-width:768px) {
  .trust {
    grid-template-columns: 1fr;
    padding: 22px
  }
}

.tst {
  display: flex;
  flex-direction: column;
  grid-template-columns: 1fr 1fr;
  gap: 8px;

}

.ts {
  background: rgba(244, 233, 216, .06);
  border: 1px solid rgba(244, 233, 216, .08);
  border-radius: 11px;
  padding: 14px;
  text-align: center;
  align-content: space-around;
  overflow-wrap: break-word;
  hyphens: auto;
  flex-grow: 1;
}

.ts b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--pink)
}

.ts span {
  display: block;
  font-size: 1.1em;
  margin-top: 2px;
  opacity: .72
}

/* STEPS */
.sg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px
}

@media(max-width:900px) {
  .sg {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:480px) {
  .sg {
    grid-template-columns: 1fr
  }
}

.sc {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
  text-align: center;
  justify-content: space-between;
  align-items: center;
}

.sc-i {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: var(--pink-pastel);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px
}

.sc-n {
  font-size: 1em;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--pink-deep);
  margin-bottom: 3px
}

.sc h5 {
  font-size: 1.2em;
  font-weight: 700;
  margin-bottom: 2px;
  line-height: normal;
}

.sc p {
  font-size: 0.9em;
  color: var(--mute);
  line-height: 1.35
}

/* GALLERY */
.gg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px
}

@media(max-width:768px) {
  .gg {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:480px) {
  .gg {
    grid-template-columns: 1fr
  }
}

.gc {
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform .2s;
  background: var(--white);
  border: 1px solid var(--line)
}

.gc:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md)
}

.gc img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  background: var(--cream2)
}

.gc .tg {
  position: absolute;
  bottom: 7px;
  left: 7px;
  right: 7px;
  background: rgba(251, 243, 232, .9);
  backdrop-filter: blur(5px);
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.gc .tg small {
  font-weight: 600;
  color: var(--pink-deep);
  font-size: 10px
}

/* PRICING */
.psz {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 18px
}

@media(max-width:640px) {
  .psz {
    grid-template-columns: repeat(2, 1fr)
  }
}

.psc {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 11px;
  padding: 11px;
  text-align: center
}

.psc b {
  display: block;
  font-size: 15px;
  font-weight: 700
}

.psc .sub {
  font-size: 10px;
  color: var(--mute);
  margin-top: 2px;
  line-height: 1.3
}

.psc .pr {
  font-size: 13px;
  font-weight: 800;
  margin-top: 3px;
  color: var(--green)
}

.pgr {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px
}

@media(max-width:900px) {
  .pgr {
    grid-template-columns: 1fr
  }
}

.pcd {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px
}

.pcd.dk {
  background: var(--green);
  color: var(--cream);
  border-color: var(--green-deep)
}

.prw {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(232, 221, 201, .4);
  font-size: 13px
}

.pcd.dk .prw {
  border-bottom-color: rgba(244, 233, 216, .08)
}

.prw:last-child {
  border-bottom: none
}

/* ACCORDION */
.ai {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 4px
}

.ai-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 14px;
  font-weight: 700;
  font-size: 1em;
  text-align: left;
  gap: 8px
}

.ai-q .ch {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s, background .25s;
  font-size: 1em;
}

.ai.open .ai-q .ch {
  transform: rotate(45deg);
  background: var(--pink);
  color: #fff
}

.ai-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s
}

.ai.open .ai-a {
  max-height: 600px;
  padding: 0 14px 12px
}

.ai-a p {
  color: var(--mute);
  font-size: 0.9em;
  line-height: 1.45
}

.ai-imgs {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
  padding-bottom: 3px
}

.ai-imgs img {
  height: 80px;
  border-radius: 6px;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--cream2)
}

/* TESTIMONIALS */
.teg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px
}

@media(max-width:900px) {
  .teg {
    grid-template-columns: 1fr
  }
}

.tc {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden
}

.tc-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--cream2)
}

.tc-b {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px
}

.tc-b .stars {
  color: var(--pink);
  font-size: 11px;
  letter-spacing: 1px
}

.tc-b p {
  font-size: 13.5px;
  line-height: 1.35
}

.tc-b .who {
  font-size: 11.5px;
  color: var(--mute);
  padding-top: 5px;
  border-top: 1px solid var(--line)
}

/* FOOTER */
footer {
  background: var(--green);
  color: var(--cream);
  padding: 48px 0 20px;
  margin-top: 36px
}

.fcta {
  margin-bottom: 36px;
  background: var(--green-deep);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap
}

.fgr2 {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 32px
}

@media(max-width:900px) {
  .fgr2 {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:480px) {
  .fgr2 {
    grid-template-columns: 1fr
  }
}

.fgr2 h6 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 10px
}

.fgr2 ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.fgr2 a {
  font-size: 12.5px;
  opacity: .76
}

.fgr2 a:hover {
  opacity: 1;
  color: var(--pink)
}

.soc {
  display: flex;
  gap: 6px;
  margin-top: 10px
}

.sb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(244, 233, 216, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  transition: background .15s
}

.sb:hover {
  background: var(--pink)
}

.sb svg {
  width: 15px;
  height: 15px;
  fill: currentColor
}

.fbt {
  padding-top: 14px;
  border-top: 1px solid rgba(244, 233, 216, .08);
  font-size: 10.5px;
  color: rgba(244, 233, 216, .5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px
}

.fbt .disc {
  max-width: 480px;
  text-align: right;
  line-height: 1.4
}

.mob-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: rgba(251, 243, 232, .94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  display: none;
  z-index: 50
}

@media(max-width:768px) {
  .mob-cta {
    display: block
  }

  body {
    padding-bottom: 58px
  }
}

/* ═══ CONSTRUCTOR ═══ */
.cstr {
  position: fixed;
  inset: 0;
  background: var(--green);
  z-index: 200;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform .72s cubic-bezier(.16,1,.3,1), visibility 0s linear .72s
}

.cstr.open {
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s
}

.cstr-h {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 12px;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  gap: 8px;
  flex-shrink: 0
}

.cstr-h .logo-img {
  height: 26px
}

.cstr-hr {
  margin-left: auto;
  display: flex;
  gap: 4px
}

.cstr-pr {
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--green-deep);
  flex-wrap: wrap;
  flex-shrink: 0
}

.cst {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--cream);
  opacity: .35;
  cursor: pointer
}

.cst.a {
  opacity: 1;
  color: var(--pink)
}

.cst.d {
  opacity: .75
}

.cst .n {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(244, 233, 216, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700
}

.cst.a .n {
  background: var(--pink);
  color: #fff
}

.cst.d .n {
  background: var(--cream);
  color: var(--green)
}

.csep {
  width: 6px;
  height: 2px;
  background: rgba(244, 233, 216, .08);
  border-radius: 1px
}

@media(max-width:700px) {
  .cst .lb {
    display: none
  }
}

/* CRITICAL: constructor body layout for scroll */
.cstr-bd {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

@media(min-width:1025px) {
  .cstr-bd {
    flex-direction: row
  }
}

@media(max-width:1024px) {
  .cstr-bd {
    flex-direction: column
  }
}

.cstr-pv {
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 111, 168, .08) 0%, transparent 50%), var(--green);
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  margin: 15px;
  padding: 54px 24px 28px;
  overflow: hidden;
  border-radius: 24px
}

@media(min-width:1025px) {
  .cstr-pv {
    flex: 1;
    min-width: 0
  }
}

@media(max-width:1024px) {
  .cstr-pv {
    height: 35vh;
    min-height: 160px
  }
}

.cstr-pv .hint {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 9px;
  color: rgba(244, 233, 216, .35);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 8px;
}


.cstr-pv .pp small {
  display: block;
  font-weight: 600;
  font-size: 8px;
  color: var(--mute);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cstr-pv .pp {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  box-sizing: border-box;
  background: var(--cream);
  color: var(--ink);
  border-radius: 9px;
  padding: 6px 16px;
  font-weight: 800;
  font-size: 12.5px;
  box-shadow: var(--sh-md);
  overflow: hidden;
}

#pC {
  overflow: hidden;
  overflow-y: auto;
}

.fr-stg {
  position: relative;
  display: block;
  transition: width .25s ease, height .25s ease
}

.fr-o {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: var(--sh-lg);
}

.fr-b {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 3px
}

.fr-d {
  position: absolute;
  inset: 12px;
  background: var(--white);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .05)
}

.fr-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  user-select: none;
  touch-action: none
}

.fw {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  transform-origin: top left;
  transition: filter .14s ease, transform .14s ease;
  cursor: grab
}

.fr-bg.dragging {
  cursor: grabbing
}

.fw:hover {
  filter: drop-shadow(0 10px 18px rgba(20, 56, 40, .2))
}

.fw.a {
  transform: translateY(-3px);
  filter: drop-shadow(0 12px 24px rgba(20, 56, 40, .25))
}

.fw.dragging {
  cursor: grabbing;
  z-index: 5;
  transition: none
}

.fig-svg {
  width: 100%;
  height: auto;
  display: block
}

.fig-stand {
  width: 52%;
  min-height: 12px;
  margin-top: -7px;
  display: block;
  pointer-events: none
}

.fig-stand img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 1;
  filter: none
}

.fn {
  font-family: var(--ff);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--pink-deep);
  background: transparent;
  padding: 2px 0 0;
  border-radius: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.pet-preview {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 10px 18px rgba(20, 56, 40, .14));
  cursor: grab;
  transition: filter .14s ease, transform .14s ease
}

.pet-preview:hover {
  filter: drop-shadow(0 10px 18px rgba(20, 56, 40, .18));
  transform: translateY(-2px)
}

.pet-preview.dragging {
  z-index: 6;
  cursor: grabbing;
  transition: none
}

.pet-preview img {
  width: 88%;
  height: auto;
  object-fit: contain;
  pointer-events: none
}

.pet-svg {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none
}

.pet-stand {
  width: 60%;
  min-height: 8px;
  margin-top: -3px;
  border-radius: 0;
  background: linear-gradient(180deg, #2b2a27 0%, #111 100%);
  border: 1px solid #050505;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .16);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 1px 7px 2px
}

.pet-stand span {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #444 0%, #191919 100%);
  border: 1px solid #050505
}

.pet-preview > span {
  font-size: 11px;
  font-weight: 700;
  color: var(--pink-deep);
  background: transparent;
  border-radius: 0;
  padding: 2px 0 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  line-height: 1
}

/* CRITICAL: panel must scroll */
.cstr-pn {
  background: var(--cream);
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  overflow: hidden
}

@media(min-width:1025px) {
  .cstr-pn {
    width: 380px;
    flex-shrink: 0;
    border-left: 1px solid var(--line)
  }
}

@media(max-width:1024px) {
  .cstr-pn {
    flex: 1;
    border-top: 1px solid var(--line)
  }
}

.pnl-h {
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0
}

.lf-draft-badge {
  flex-shrink: 0;
  margin: 10px 14px 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .58);
  color: var(--mute);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.lf-draft-badge b {
  color: var(--ink);
  font-weight: 800;
}

.pnl-h .so {
  font-size: 9px;
  color: var(--pink-deep);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase
}

.pnl-h h3 {
  font-size: 17px;
  font-weight: 700
}

.pnl-h p {
  font-size: 11px;
  color: var(--mute);
  margin-top: 1px
}

/* THE FIX: panel body MUST be scrollable */
.pnl-b {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px 60px
}

.pnl-b::-webkit-scrollbar {
  width: 3px
}

.pnl-b::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 2px
}

.fd {
  margin-bottom: 14px
}

.fl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.fl .inf {
  font-size: 9px;
  color: var(--mute);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0
}

.og {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px
}

.og.c2 {
  grid-template-columns: repeat(2, 1fr)
}

.og.c4 {
  grid-template-columns: repeat(4, 1fr)
}

.og.c5 {
  grid-template-columns: repeat(5, 1fr)
}

.o {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px
}

.o small {
  font-size: 9px;
  color: var(--mute);
  font-weight: 500
}

.o:hover {
  border-color: var(--pink);
  background: var(--pink-pastel)
}

.o.a {
  border-color: var(--pink);
  background: var(--pink);
  color: #fff;
  box-shadow: 0 2px 0 var(--pink-deep)
}

.o.a small {
  color: rgba(255, 255, 255, .8)
}

/* Part card with image placeholder */
.o .part-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--cream2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: var(--mute);
  overflow: hidden;
  margin-bottom: 2px
}

.o .part-img img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.swg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px
}

.lf-text-colors {
  align-items: center;
}

.sw {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: all .12s;
  background-clip: content-box;
  padding: 1px;
  background-origin: border-box
}

.sw:hover {
  transform: scale(1.08)
}

.sw.a {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--pink)
}

.cpick {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    conic-gradient(from 90deg, #ff4d4d, #ffd24d, #55d86a, #4dcfff, #5a6dff, #cc55ff, #ff4da6, #ff4d4d);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px var(--line), var(--sh-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .14s ease, box-shadow .14s ease
}

.cpick:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 0 0 2px var(--pink), var(--sh-md);
}

.cpick-preview {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--pick, #fff);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
  pointer-events: none;
}

.cpick input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%
}

.cpick.a {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--pink), var(--sh-sm)
}

.counter {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 3px;
  width: fit-content
}

.counter button {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  background: var(--cream);
  font-weight: 800;
  font-size: 15px
}

.counter button:hover {
  background: var(--pink);
  color: #fff
}

.counter b {
  font-size: 17px;
  min-width: 22px;
  text-align: center;
  font-weight: 700
}

.ftabs {
  display: flex;
  gap: 3px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line)
}

.ft {
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--white);
  border: 1.5px solid var(--line);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer
}

.ft.a {
  background: var(--green);
  color: var(--cream);
  border-color: var(--green-deep)
}

.ft.add {
  border-style: dashed;
  color: var(--pink-deep);
  border-color: var(--pink)
}

.inp {
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  background: var(--white);
  font-size: 13px;
  outline: none;
  transition: border-color .12s
}

.inp:focus {
  border-color: var(--pink)
}

textarea.inp {
  min-height: 54px;
  resize: vertical
}

.ck {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 4px
}

.ck.a {
  border-color: var(--pink);
  background: var(--pink-pastel)
}

.ck .dt {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  border: 2px solid var(--line);
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 9px
}

.ck.a .dt {
  background: var(--pink);
  border-color: var(--pink)
}

.ck .bd {
  flex: 1
}

.ck .bd b {
  display: block;
  font-size: 12px;
  font-weight: 700
}

.ck .bd small {
  font-size: 10px;
  color: var(--mute);
  display: block
}

.ck .pr {
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0
}

/* Pet card */
.pet-c {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px
}

.pet-c:hover {
  border-color: var(--pink);
  background: var(--pink-pastel)
}

.pet-c.a {
  border-color: var(--pink);
  background: var(--pink);
  color: #fff
}

.pet-i {
  width: 64px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none
}

.pet-i .pet-svg {
  max-width: 74px;
  max-height: 54px
}

.pet-c.a .pet-svg {
  filter: brightness(1.05)
}

.cstr-nv {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 9px 12px;
  display: flex;
  gap: 5px;
  background: var(--cream);
  border-top: 1px solid var(--line);
  z-index: 5;
  flex-shrink: 0
}

.cstr-nv .btn {
  flex: 1
}

.cstr-nv .bk {
  flex: 0 0 auto;
  padding: 11px 10px
}

.lf-artboard {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.fr-o.lf-mode-plain {
  background: transparent;
  box-shadow: none;
  border-radius: 14px;
}

.fr-o.lf-mode-frame {
  box-shadow: var(--sh-lg);
}

.lf-frame-empty {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 36%;
  aspect-ratio: 1 / 1.24;
  border: 1.5px dashed rgba(31, 77, 58, .26);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: rgba(31, 77, 58, .46);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.lf-build-board {
  position: absolute;
  inset: 0;
  border: 1.5px dashed rgba(224, 74, 133, .22);
  border-radius: 16px;
  background:
    linear-gradient(rgba(255, 255, 255, .64) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .64) 1px, transparent 1px),
    linear-gradient(135deg, #FFF7EF, #FFE4ED);
  background-size: 34px 34px, 34px 34px, 100% 100%;
  overflow: visible;
}

.lf-bg-preview {
  border-radius: 16px;
  box-shadow: inset 0 0 0 1.5px rgba(31, 77, 58, .12);
}

.lf-bg-sample {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 48%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .34);
  border: 1.5px solid rgba(255, 255, 255, .52);
  display: grid;
  place-items: center;
  color: rgba(31, 77, 58, .48);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.lf-extra {
  position: absolute;
  z-index: 8;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  min-width: 58px;
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  border: 1.5px solid rgba(31, 77, 58, .14);
  color: var(--green-deep);
  font-size: 10px;
  font-weight: 800;
  cursor: default;
  user-select: none;
}

.lf-extra-pets {
  cursor: grab;
  background: rgba(255, 255, 255, .88);
  border-color: rgba(224, 74, 133, .35);
  color: var(--pink-deep);
}

.lf-extra-card {
  color: var(--pink-deep);
}

.lf-extra-urgent {
  background: rgba(31, 77, 58, .88);
  color: var(--cream);
}

.lf-extra.is-dragging,
.lf-figure.is-dragging,
.lf-frame-accessory.is-dragging {
  cursor: grabbing;
  z-index: 30;
  transition: none;
}

.lf-title,
.lf-subtitle {
  position: absolute;
  left: 8%;
  right: 8%;
  text-align: center;
  color: var(--green-deep);
  font-weight: 800;
  pointer-events: none;
}

.lf-title {
  top: 9%;
  font-size: clamp(10px, 2.6vw, 30px);
}

.lf-subtitle {
  bottom: 9%;
  font-size: clamp(8px, 1.6vw, 18px);
  color: var(--pink-deep);
}

.lf-figure {
  position: absolute;
  width: 34%;
  min-width: 92px;
  aspect-ratio: 1.6 / 4;
  transform: translate(-50%, -50%) scale(var(--scale));
  transform-origin: center bottom;
  border: 0;
  background: transparent;
  color: var(--pink-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: default;
  touch-action: none;
  user-select: none;
}

.lf-figure.lf-frame {
  cursor: grab;
  width: auto;
  height: var(--fig-h);
  min-width: 0;
  aspect-ratio: 1.6 / 4;
  gap: 0;
}

.lf-figure.lf-build {
  width: 96%;
  height: 80%;
  min-width: 118px;
  aspect-ratio: auto;
  transform-origin: center center;
  overflow: visible;
}

.lf-figure.is-active {
  filter: drop-shadow(0 8px 16px rgba(20, 56, 40, .18));
}

.lf-stack {
  position: relative;
  width: 100%;
  flex: 1;
  overflow: visible;
}

.lf-frame .lf-stack {
  height: 100%;
  flex: 0 0 100%;
  z-index: 2;
  /* Минифиг в своём боксе занимал ~59% высоты (куча пустых полей) — растягиваем его,
     чтобы он ЗАПОЛНЯЛ бокс (визуально ~⅓ рамки, как на реальном фото), пропорции
     сохранены (масштаб вокруг центра минифига). Фигурный кубик подогнан ниже. */
  transform: scale(1.6);
  transform-origin: 50% 54%;
}

.lf-build .lf-stack {
  width: 33.333%;
  height: 100%;
  aspect-ratio: 1.6 / 4;
  flex: 0 0 auto;
}

.lf-stack.is-empty::after {
  content: "выберите детали";
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  color: rgba(224, 74, 133, .7);
  white-space: nowrap;
}

.lf-frame .lf-stack.is-empty::after {
  display: none;
}

.lf-silhouette {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  pointer-events: none;
  opacity: .46;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .35));
}

.lf-layer {
  position: absolute;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

.lf-body-part-layer,
.lf-imported-hair-layer,
.lf-headwear-layer,
.lf-face-layer,
.lf-hand-accessory-layer {
  position: absolute;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.lf-hand-accessory-layer {
  max-width: none;
  transform: translate(-50%, -50%) rotate(var(--accessory-rotate, 0deg));
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .16));
}

.lf-skirt-layer {
  filter: drop-shadow(0 1px 1px rgba(42, 40, 35, .16));
}

.lf-skirt-body,
.lf-skirt-belt {
  stroke: rgba(42, 40, 35, .16);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.lf-shape {
  background: var(--layer-color);
  opacity: .96;
}

.lf-slot {
  border: 1.5px dashed rgba(31, 77, 58, .34);
  background: rgba(255, 255, 255, .1);
}

.lf-full {
  clip-path: polygon(43% 0, 57% 0, 57% 12%, 69% 12%, 69% 32%, 76% 38%, 73% 67%, 65% 67%, 64% 100%, 52% 100%, 52% 68%, 48% 68%, 48% 100%, 36% 100%, 35% 67%, 27% 67%, 24% 38%, 31% 32%, 31% 12%, 43% 12%);
}

.lf-legs {
  background:
    linear-gradient(90deg,
      var(--layer-color) 0 42%,
      transparent 42% 58%,
      var(--layer-color) 58% 100%);
  clip-path: none;
}

.lf-leg-set i,
.lf-leg-set b {
  position: absolute;
  display: block;
  background: var(--layer-color);
  opacity: .96;
}

.lf-leg-set i {
  top: 2%;
  width: 33%;
  height: 72%;
}

.lf-leg-set i:first-child {
  left: 9%;
}

.lf-leg-set i:nth-child(2) {
  right: 9%;
}

.lf-leg-set b {
  top: 72%;
  width: 42%;
  height: 20%;
}

.lf-leg-set b:nth-child(3) {
  left: 2%;
}

.lf-leg-set b:nth-child(4) {
  right: 2%;
}

.lf-torso {
  clip-path: polygon(7% 0, 93% 0, 82% 100%, 18% 100%);
}

.lf-head {
  border-radius: 2px;
}

.lf-hair {
  border-radius: 0;
  object-fit: contain;
}

.lf-shape.lf-hair {
  clip-path: polygon(12% 58%, 12% 20%, 24% 0, 76% 0, 88% 20%, 88% 58%, 74% 45%, 26% 45%);
}

.lf-accessory {
  border-radius: 0;
  clip-path: polygon(50% 0, 64% 32%, 100% 34%, 72% 56%, 82% 100%, 50% 76%, 18% 100%, 28% 56%, 0 34%, 36% 32%);
}

.lf-scale-block {
  display: none;
  pointer-events: none;
  --stand-color: #D9D9D9;
}

.lf-frame .lf-scale-block {
  position: absolute;
  left: 50%;
  top: 81%;
  display: block;
  width: 64%;
  height: 17.7%;
  min-height: 8px;
  padding: 0;
  transform: translateX(-50%);
  opacity: 1;
  filter: drop-shadow(0 1px 2px rgba(42, 40, 35, .16));
  z-index: 1;
}

.lf-build .lf-scale-block {
  position: absolute;
  left: 50%;
  top: 69.4%;
  display: block;
  width: 13.4%;
  height: 11.05%;
  min-height: 10px;
  padding: 0;
  transform: translateX(-50%);
  opacity: 1;
  filter: drop-shadow(0 1px 2px rgba(42, 40, 35, .16));
  z-index: 1;
}

.lf-build .lf-stack {
  z-index: 2;
}

.lf-scale-block .lf-stand-base,
.lf-scale-block .lf-stand-stud,
.lf-scale-block .lf-stand-top {
  fill: var(--stand-color);
  stroke: rgba(42, 40, 35, .26);
  stroke-width: 0;
  vector-effect: non-scaling-stroke;
}

.lf-scale-block.is-light .lf-stand-base,
.lf-scale-block.is-light .lf-stand-stud,
.lf-scale-block.is-light .lf-stand-top {
  stroke-width: 2;
}

.lf-frame span {
  position: absolute;
  left: 50%;
  top: calc(70.8% + 11.05% + 4px);
  transform: translateX(-50%);
  z-index: 4;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  overflow-wrap: normal;
}

.lf-build span {
  position: absolute;
  left: 50%;
  top: calc(69.4% + 11.05% + 5px);
  transform: translateX(-50%);
  z-index: 4;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  overflow-wrap: normal;
}

.lf-figure span {
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  max-width: none;
  width: max-content;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pink-deep);
  white-space: nowrap;
  overflow-wrap: normal;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .55);
  box-shadow: none;
}

.lf-choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.lf-choice,
.lf-layer-row,
.lf-summary>div,
.lf-note {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 8px;
}

.lf-choice {
  padding: 12px;
  text-align: left;
  display: grid;
  gap: 3px;
}

.lf-choice b {
  font-size: 13px;
}

.lf-choice small,
.lf-choice span,
.lf-note {
  font-size: 11px;
  color: var(--mute);
}

.lf-choice span {
  font-weight: 800;
  color: var(--pink-deep);
}

.lf-choice.a {
  border-color: var(--pink);
  background: var(--pink-pastel);
  box-shadow: 0 2px 0 var(--pink-deep);
}

.lf-swatch {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 2px solid var(--line);
}

.lf-note {
  padding: 12px;
  line-height: 1.35;
}

.lf-danger {
  width: 100%;
  min-height: 38px;
  border-radius: 8px;
  border: 1.5px solid rgba(224, 74, 133, .34);
  background: rgba(255, 111, 168, .12);
  color: var(--pink-deep);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.lf-danger:hover {
  background: var(--pink);
  color: #fff;
  border-color: var(--pink-deep);
}

.lf-empty-build {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 16px;
  border: 1.5px dashed rgba(224, 74, 133, .32);
  border-radius: 8px;
  background: rgba(255, 255, 255, .62);
  color: var(--pink-deep);
  font-size: 13px;
  font-weight: 800;
}

.lf-range {
  width: 100%;
  accent-color: var(--pink);
}

.lf-layers {
  display: grid;
  gap: 8px;
}

.lf-part-section {
  display: grid;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.lf-part-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lf-part-head b {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--mute);
  letter-spacing: .05em;
}

.lf-part-head button {
  font-size: 10px;
  font-weight: 800;
  color: var(--pink-deep);
}

.lf-photo-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lf-part-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 6px;
}

.lf-part-filters button {
  min-height: 30px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
  color: var(--mute);
}

.lf-part-filters button.a {
  border-color: var(--pink);
  background: var(--pink-pastel);
  color: var(--ink);
  box-shadow: 0 2px 0 var(--pink-deep);
}

.lf-pet-filters {
  margin-bottom: 10px;
}

.lf-face-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.lf-choice-stack {
  display: grid;
  gap: 8px;
}

.lf-photo-card {
  min-height: 92px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: 5px;
  padding: 8px;
  font-size: 10px;
  font-weight: 800;
  color: var(--mute);
  cursor: pointer;
  overflow: hidden;
}

.lf-photo-card:hover,
.lf-photo-card.a {
  border-color: var(--pink);
  background: var(--pink-pastel);
}

.lf-photo-card.a {
  box-shadow: 0 2px 0 var(--pink-deep);
  color: var(--ink);
}

.lf-photo-card img {
  width: 100%;
  height: 58px;
  object-fit: contain;
}

.lf-photo-card img[src*="/headwear/"] {
  height: 54px;
  transform: translateY(3px);
}

.lf-face-card img {
  height: 48px;
}

.lf-accessory-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.lf-accessory-accordion {
  display: grid;
  gap: 10px;
}

.lf-accessory-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  font-weight: 900;
}

.lf-accessory-toggle span {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-transform: uppercase;
}

.lf-accessory-toggle span small {
  color: var(--mute);
  font-size: .72rem;
  font-weight: 800;
  text-transform: none;
}

.lf-accessory-toggle b {
  grid-column: 2;
  grid-row: 1;
  max-width: 160px;
  color: var(--pink-deep);
  font-size: .78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lf-accessory-toggle::after {
  content: "⌄";
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--pink-pastel);
  color: var(--pink-deep);
  font-size: 1rem;
  grid-column: 3;
  grid-row: 1;
}

.lf-accessory-accordion.is-open .lf-accessory-toggle {
  border-color: var(--pink);
  background: var(--pink-pastel);
}

.lf-accessory-accordion.is-open .lf-accessory-toggle::after {
  content: "⌃";
}

.lf-accessory-body {
  display: grid;
  gap: 10px;
}

.lf-accessory-filters {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lf-accessory-card {
  min-height: 74px;
  padding: 6px;
}

.lf-accessory-card img {
  height: 42px;
}

.lf-face-empty {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--soft);
  color: var(--mute);
  font-size: 18px;
}

.lf-photo-card.add {
  border-style: dashed;
  color: var(--pink-deep);
}

.lf-photo-card.add span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
}

.lf-card-shape {
  width: 54px;
  height: 58px;
  background: var(--layer-color);
}

.lf-layer-row {
  display: grid;
  grid-template-columns: 28px 1fr auto 34px;
  gap: 8px;
  align-items: center;
  padding: 9px;
}

.lf-eye {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--cream);
  color: var(--mute);
  font-size: 14px;
}

.lf-eye.a {
  background: var(--green);
  color: var(--cream);
}

.lf-layer-meta {
  min-width: 0;
}

.lf-layer-meta b,
.lf-layer-meta small {
  display: block;
}

.lf-layer-meta b {
  font-size: 12px;
  font-weight: 800;
}

.lf-layer-meta small {
  font-size: 10px;
  color: var(--mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lf-upload {
  padding: 7px 9px;
  border-radius: 7px;
  background: var(--pink);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.lf-mini-color {
  width: 34px;
  height: 30px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.lf-summary {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.lf-summary>div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  font-size: 12px;
}

.lf-summary span {
  color: var(--mute);
}

.lf-summary b {
  text-align: right;
}

.lf-summary .total {
  background: var(--green);
  color: var(--cream);
  border-color: var(--green-deep);
}

.lf-summary .total span {
  color: rgba(244, 233, 216, .7);
}

.sgr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px
}

.sr {
  padding: 7px 8px;
  background: var(--white);
  border-radius: 5px;
  border: 1px solid var(--line);
  font-size: 11.5px
}

.sr b {
  display: block;
  font-size: 8px;
  color: var(--mute);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em
}

.fgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px
}

.fgrid .full {
  grid-column: 1/-1
}

.success {
  padding: 28px 12px;
  text-align: center
}

.success .sic {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 12px;
  box-shadow: var(--sh-pink)
}

.onum {
  font-size: 20px;
  font-weight: 800;
  background: var(--cream);
  padding: 7px 14px;
  border-radius: 8px;
  display: inline-block;
  border: 2px dashed var(--pink-soft);
  margin-bottom: 12px
}

.fade-in {
  animation: fu .2s ease
}

/* === LEGAL PAGES FROM MAIN SITE === */
.legal-hero {
  padding: 44px 0 28px;
  background: linear-gradient(180deg, rgba(255, 211, 226, .18), transparent);
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
  align-items: start;
}

.legal-card,
.legal-toc,
.legal-note {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.legal-card {
  padding: 28px;
}

.legal-note {
  padding: 14px 16px;
  margin-top: 16px;
  color: var(--mute);
  font-size: 0.9375rem;
}

.legal-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 20px;
}

.legal-meta div {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}

.legal-meta b {
  display: block;
  font-size: 0.8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pink-deep);
  margin-bottom: 3px;
}

.legal-meta span {
  display: block;
  font-size: 0.9375rem;
  color: var(--ink);
  font-weight: 600;
}

.legal-toc {
  position: sticky;
  top: calc(var(--hdr-h) + 16px);
  padding: 16px;
}

.legal-toc h3 {
  font-size: 0.875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pink-deep);
  margin-bottom: 10px;
}

.legal-toc a {
  display: block;
  font-size: 0.875rem;
  padding: 7px 0;
  color: var(--mute);
  border-bottom: 1px dashed var(--line);
}

.legal-toc a:hover {
  color: var(--pink-deep);
}

.legal-section {
  scroll-margin-top: calc(var(--hdr-h) + 16px);
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.legal-section:first-child {
  padding-top: 0;
}

.legal-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.legal-section h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}

.legal-section h3 {
  font-size: 1.1rem;
  margin: 18px 0 8px;
}

.legal-section p,
.legal-section li {
  color: var(--mute);
  font-size: 1rem;
  line-height: 1.65;
}

.legal-section p + p,
.legal-section ul + p,
.legal-section ol + p {
  margin-top: 10px;
}

.legal-section ul,
.legal-section ol {
  padding-left: 22px;
  margin: 10px 0;
}

.legal-section li + li {
  margin-top: 6px;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 12px;
}

.legal-table th,
.legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px;
  border: 1px solid var(--line);
  font-size: 1rem;
}

.legal-table th {
  width: 32%;
  background: var(--cream2);
  color: var(--ink);
}

.legal-callout {
  margin: 14px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--pink-pastel);
  border: 1px solid var(--pink-soft);
  color: var(--ink);
}

.legal-callout p {
  color: var(--ink);
}

.legal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

@media(max-width:960px) {
  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-toc {
    position: static;
  }
}

@media(max-width:640px) {
  .legal-meta {
    grid-template-columns: 1fr;
  }

  .legal-card {
    padding: 18px;
  }

  .legal-table,
  .legal-table tbody,
  .legal-table tr,
  .legal-table th,
  .legal-table td {
    display: block;
    width: 100%;
  }

  .legal-table th {
    border-bottom: none;
  }
}

/* === FTM readability patch: predictable rem fonts + larger constructor text === */
.cstr-pr {
  gap: 8px;
}

.cst {
  font-size: 0.8125rem;
  line-height: 1.2;
}

.cst .n {
  width: 20px;
  height: 20px;
  font-size: 0.75rem;
}

.pnl-h .so,
.fl,
.fl .inf {
  font-size: 0.8125rem;
}

.pnl-h h3 {
  font-size: 1.25rem;
}

.pnl-h p {
  font-size: 0.9375rem;
}

.o,
.pet-c,
.ft,
.ck .bd b,
.ck .pr,
.sr,
.cstr-pv .pp,
.counter b,
.counter button,
.inp {
  font-size: 0.9375rem;
}

.o small,
.pet-c small,
.ck .bd small,
.sr b,
.o .part-img,
.cstr-pv .pp small {
  font-size: 0.8125rem;
}

.pet-c b,
.o b {
  font-size: 0.875rem !important;
  line-height: 1.15;
}

.og.c5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media(min-width:1025px) {
  .cstr-pn {
    width: 420px;
  }
}

@media(max-width:640px) {
  .cstr-pr {
    gap: 6px;
  }

  .cst {
    font-size: 0.75rem;
  }

  .pnl-h h3 {
    font-size: 1.15rem;
  }

  .og.c5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* === FTM constructor v55 additive wizard === */
.cstr {
  font-family: Inter, var(--ff), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #fff;
}

.cstr .cstr-pr {
  background: #fff;
  border-bottom: 1px solid #ECE3D8;
}

.cstr .cst {
  color: #7D7368;
  opacity: 1;
}

.cstr .cst.a {
  color: #111;
}

.cstr .cst.a .n {
  background: #D4A574;
  color: #fff;
}

.cstr .cst.d .n {
  background: #F4E9D8;
  color: #111;
}

.cstr .csep {
  background: #E7D7C4;
}

.cstr .btn-p {
  background: #D4A574;
  box-shadow: 0 4px 0 #A87948;
}

.cstr .btn-p:hover {
  background: #C09161;
}

.cstr .sw.a {
  border-color: #2A2823;
  box-shadow: 0 0 0 2px #D4A574;
}

.v55-panel .o.a {
  border-color: #D4A574;
  background: #FFF7EF;
  color: #2A2823;
  box-shadow: 0 2px 0 #D4A574;
}

.v55-panel .o.a small {
  color: #6A655B;
}

.cstr-bd {
  background: #fff;
}

@media(min-width:1025px) {
  .cstr-bd {
    flex-direction: row;
  }

  .cstr-pn {
    order: 1;
    width: 430px;
    border-right: 1px solid #ECE3D8;
    border-left: 0;
  }

  .cstr-pv {
    order: 2;
  }
}

.cstr-pv {
  background: #fff;
  margin: 0;
  align-items: center;
  justify-content: center;
  padding: 34px 42px;
}

.cstr-pv .hint {
  position: absolute;
  top: 18px;
  left: 22px;
  color: #9F9387;
}

.cstr-pv .pp {
  position: absolute;
  top: 24px;
  right: 24px;
  background: #fff;
  border: 1px solid #E5D3BE;
  box-shadow: 0 8px 24px rgba(42, 40, 35, .08);
}

.fr-stg {
  left: auto;
  margin: auto;
  justify-content: center;
}

.fr-o.v55-frame-shell {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 18px 45px rgba(42, 40, 35, .14);
}

.fr-bg {
  overflow: hidden;
}

.v55-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
}

.v55-guides {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

.v55-guides i {
  position: absolute;
  display: block;
  background: #23A7FF;
  box-shadow: 0 0 0 1px rgba(35, 167, 255, .18);
}

.v55-guides .v {
  top: 0;
  bottom: 0;
  width: 1px;
}

.v55-guides .h {
  left: 0;
  right: 0;
  height: 1px;
}

.v55-figure,
.v55-pet,
.v55-text {
  position: absolute;
  transform: translate(-50%, -50%);
  touch-action: none;
  user-select: none;
  overflow: visible;
  z-index: 10;
}

.v55-figure {
  min-width: 18px;
  min-height: 46px;
}

.v55-figure.is-active {
  outline: 1px solid rgba(212, 165, 116, .75);
  outline-offset: 6px;
}

.v55-figure.is-dragging,
.v55-pet.is-dragging,
.v55-text.is-dragging {
  z-index: 40;
  cursor: grabbing;
}

.v55-minifig {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.v55-stand {
  position: absolute;
  left: 50%;
  top: calc(100% + 1px);
  width: 96%;
  height: 7%;
  min-height: 4px;
  transform: translateX(-50%);
  border: 1px solid #111;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .18);
}

.v55-stand i {
  position: absolute;
  top: 24%;
  width: 22%;
  height: 42%;
  border: 1px solid #111;
  border-radius: 999px;
  background: #fff;
}

.v55-stand i:first-child {
  left: 22%;
}

.v55-stand i:nth-child(2) {
  right: 22%;
}

.v55-fig-label {
  position: absolute;
  top: calc(100% + 12%);
  left: 50%;
  transform: translateX(-50%);
  color: #D84D83;
  font-weight: 800;
  font-size: clamp(8px, 1.5vw, 14px);
  white-space: nowrap;
}

.v55-text {
  width: max-content;
  max-width: 60%;
  padding: 2px 7px;
  color: #1F4D3A;
  text-align: center;
  cursor: grab;
}

.v55-text-title {
  font-size: clamp(22px, 4vw, 56px);
  font-weight: 900;
}

.v55-text-date {
  font-size: clamp(15px, 2.3vw, 32px);
  font-weight: 800;
  color: rgba(216, 77, 131, .85);
}

.v55-text-card {
  max-width: 34%;
  padding: 10px 13px;
  border: 2px solid #D4A574;
  border-radius: 10px;
  background: rgba(255, 255, 255, .82);
  color: #4B3827;
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  font-size: clamp(11px, 1.7vw, 18px);
  line-height: 1.25;
}

.v55-pet {
  width: calc(7% * var(--pet-scale, 1));
  min-width: 30px;
  aspect-ratio: 1.05;
  cursor: grab;
}

.v55-pet svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.v55-delete {
  opacity: 0;
  transition: opacity .15s;
}

.v55-pet:hover .v55-delete {
  opacity: 1;
}

.v55-delete {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FF6FA8;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}

.v55-resize {
  display: none !important;
}

.v55-panel .fd {
  margin-bottom: 16px;
}

.v55-note,
.v55-receipt,
.v55-drop,
.v55-wide-action,
.v55-upload {
  border: 1px solid #E7D7C4;
  background: #fff;
  border-radius: 10px;
}

.v55-note {
  padding: 12px;
  color: #6A655B;
  font-size: .9rem;
}

.v55-wide-action {
  width: 100%;
  padding: 12px 14px;
  font-weight: 800;
  color: #2A2823;
  box-shadow: 0 2px 0 #E7D7C4;
}

.v55-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.v55-bg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.v55-bg-card {
  background: #fff;
  border: 1.5px solid #E7D7C4;
  border-radius: 10px;
  padding: 8px;
  text-align: left;
}

.v55-bg-card span {
  display: block;
  height: 56px;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, .05);
  margin-bottom: 7px;
}

.v55-bg-card b {
  font-size: .88rem;
}

.v55-bg-card.a,
.v55-choice.a {
  border-color: #D4A574;
  background: #FFF7EF;
  box-shadow: 0 2px 0 #D4A574;
}

.v55-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 14px;
  border-style: dashed;
  cursor: pointer;
  text-align: center;
}

.v55-drop span {
  color: #6A655B;
  font-size: .88rem;
}

.v55-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 7px;
}

.v55-choice {
  min-height: 38px;
  padding: 7px 6px;
  border: 1.5px solid #E7D7C4;
  border-radius: 8px;
  background: #fff;
  font-weight: 800;
  font-size: .82rem;
}

.v55-upload {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  padding: 10px;
  font-weight: 800;
  color: #8B5E3C;
  cursor: pointer;
}

.v55-pet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.v55-pet-grid .pet-c {
  min-height: 104px;
}

.v55-pet-grid .pet-i {
  width: 54px;
  height: 48px;
}

.v55-receipt {
  padding: 12px;
  margin-bottom: 14px;
}

.v55-receipt div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed #E7D7C4;
}

.v55-receipt div:last-child {
  border-bottom: 0;
}

.v55-receipt .total {
  font-size: 1.1rem;
  color: #1F4D3A;
}

@media(max-width:1024px) {
  .cstr-bd {
    flex-direction: column;
  }

  .cstr-pv {
    order: 1;
    height: 54vh;
    min-height: 330px;
    padding: 30px 18px;
  }

  .cstr-pn {
    order: 2;
    border-top: 1px solid #ECE3D8;
  }
}

@media(max-width:768px) {
  .cstr-pr {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .cstr-pv {
    height: 50vh;
    min-height: 300px;
  }

  .cstr-pn {
    max-height: 50vh;
  }

  .v55-choice-grid,
  .v55-bg-grid,
  .v55-pet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* === FTM constructor v56: restore SVG/deploy look, keep expanded functionality === */
.cstr.lf-svg-mode {
  background: var(--green);
  font-family: var(--ff);
}

.cstr.lf-svg-mode .cstr-pr {
  background: var(--green-deep);
  border-bottom: 0;
}

.cstr.lf-svg-mode .cst {
  color: var(--cream);
  opacity: .38;
}

.cstr.lf-svg-mode .cst.a {
  color: var(--pink);
  opacity: 1;
}

.cstr.lf-svg-mode .cst.a .n {
  background: var(--pink);
  color: #fff;
}

.cstr.lf-svg-mode .cst.d .n {
  background: var(--cream);
  color: var(--green);
}

.cstr.lf-svg-mode .cstr-bd {
  background: var(--green);
}

@media(min-width:1025px) {
  .cstr.lf-svg-mode .cstr-bd {
    flex-direction: row;
  }

  .cstr.lf-svg-mode .cstr-pv {
    order: 1;
  }

  .cstr.lf-svg-mode .cstr-pn {
    order: 2;
    width: 420px;
    border-left: 1px solid var(--line);
    border-right: 0;
  }
}

.cstr.lf-svg-mode .cstr-pv {
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 111, 168, .08) 0%, transparent 50%), var(--green);
  margin: 15px;
  padding: 10px 14px;
  align-items: safe center;
  justify-content: safe center;
  overflow: auto;
}

.cstr.lf-svg-mode .fr-stg {
  left: auto;
  margin: auto;
  perspective: 1400px;
}

.cstr.lf-svg-mode #fS .fr-o {
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.cstr.lf-svg-mode #fS.lf-orientation-out .fr-o {
  animation: lfFrameTurnOut .26s cubic-bezier(.45, 0, .75, .2) forwards;
}

.cstr.lf-svg-mode #fS.lf-orientation-in .fr-o {
  animation: lfFrameTurnIn .5s cubic-bezier(.16, .84, .28, 1) both;
}

@keyframes lfFrameTurnOut {
  from {
    opacity: 1;
    transform: perspective(1400px) translateX(0) rotateY(0deg) scale(1);
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .08));
  }

  to {
    opacity: .24;
    transform: perspective(1400px) translateX(-5%) rotateY(-72deg) scale(.93);
    filter: drop-shadow(26px 24px 28px rgba(0, 0, 0, .18));
  }
}

@keyframes lfFrameTurnIn {
  from {
    opacity: .22;
    transform: perspective(1400px) translateX(5%) rotateY(72deg) scale(.93);
    filter: drop-shadow(-26px 24px 28px rgba(0, 0, 0, .18));
  }

  70% {
    opacity: 1;
    transform: perspective(1400px) translateX(-.8%) rotateY(-3deg) scale(1.01);
  }

  to {
    opacity: 1;
    transform: perspective(1400px) translateX(0) rotateY(0deg) scale(1);
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .08));
  }
}

.cstr.lf-svg-mode .fr-o.lf-mode-frame {
  background: #fff;
  border-radius: 4px;
  box-shadow: var(--sh-lg);
}

.cstr.lf-svg-mode .fr-o.lf-mode-plain {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.cstr.lf-svg-mode .fr-d {
  display: none !important;
}

.cstr.lf-svg-mode .fr-bg {
  inset: 0;
  display: block;
  padding: 0;
  overflow: visible;
}

.cstr.lf-svg-mode .fr-bg.lf-bg-adjustable {
  cursor: grab;
}

.cstr.lf-svg-mode .fr-bg.lf-bg-adjustable.is-dragging-bg {
  cursor: grabbing;
}

.cstr.lf-svg-mode #fS .lf-bg-resize-handle {
  display: none;
}

/* Одна ручка масштаба фона в правом-нижнем углу. На устройствах с курсором она
   проявляется при наведении на рамку (см. @media hover ниже); на тач-экранах
   видна всегда (там ховера нет). */
.cstr.lf-svg-mode #fS.lf-bg-adjust-mode .lf-bg-resize-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 30px;
  height: 30px;
  background: #E04A85;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  z-index: 45;
  cursor: nwse-resize;
  touch-action: none;
  pointer-events: auto;
  opacity: 1;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  transition: opacity .18s ease, transform .12s ease;
}

.cstr.lf-svg-mode #fS.lf-bg-adjust-mode .lf-bg-resize-handle::before {
  content: "⤡";
}

.cstr.lf-svg-mode #fS.lf-bg-adjust-mode .lf-bg-resize-handle:hover,
.cstr.lf-svg-mode #fS.lf-bg-adjust-mode .lf-bg-resize-handle.is-scaling-bg {
  transform: scale(1.16);
}

/* Прячем ручку на время анимации поворота — чтобы не «прыгала» вместе с рамкой. */
.cstr.lf-svg-mode #fS.lf-orient-spin .lf-bg-resize-handle {
  display: none !important;
}

@media (hover: hover) {
  .cstr.lf-svg-mode #fS.lf-bg-adjust-mode .lf-bg-resize-handle {
    opacity: 0;
  }
  .cstr.lf-svg-mode #fS.lf-bg-adjust-mode:hover .lf-bg-resize-handle {
    opacity: 1;
  }
}

.cstr.lf-svg-mode .lf-mode-plain .fr-bg {
  inset: 0;
  background: linear-gradient(135deg, #FFF7EF, #FFE4ED) !important;
  background-size: auto !important;
}

.cstr.lf-svg-mode .cstr-pv .hint {
  color: rgba(244, 233, 216, .35);
  top: 8px;
  left: 8px;
}

.cstr.lf-svg-mode .cstr-pv .pp {
  top: 22px;
  right: 22px;
  background: var(--cream);
  border: 0;
  box-shadow: var(--sh-md);
}

.cstr.lf-svg-mode .cstr-pn {
  background: var(--cream);
}

.cstr.lf-svg-mode .btn-p {
  background: var(--pink);
  box-shadow: var(--sh-pink);
}

.cstr.lf-svg-mode .btn-p:hover {
  background: var(--pink-deep);
}

.cstr.lf-svg-mode .sw.a {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--pink);
}

.cstr.lf-svg-mode .lf-artboard {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
}

.cstr.lf-svg-mode .lf-title,
.cstr.lf-svg-mode .lf-subtitle,
.cstr.lf-svg-mode .lf-card-note {
  position: absolute;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 8;
  width: max-content;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
  padding: 2px 8px;
  text-align: center;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.cstr.lf-svg-mode .lf-title {
  font-size: clamp(22px, 4vw, 56px);
  font-weight: 900;
  color: var(--green);
}

.cstr.lf-svg-mode .lf-subtitle {
  font-size: clamp(15px, 2.3vw, 32px);
  font-weight: 800;
  color: rgba(216, 77, 131, .86);
}

.cstr.lf-svg-mode .lf-card-note {
  max-width: 36%;
  padding: 10px 13px;
  border: 2px solid var(--pink-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, .86);
  color: #4B3827;
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  font-size: clamp(11px, 1.7vw, 18px);
  line-height: 1.25;
}

.cstr.lf-svg-mode .lf-guides {
  position: absolute;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.cstr.lf-svg-mode .lf-guides i {
  position: absolute;
  display: block;
  background: #20A8FF;
  box-shadow: 0 0 0 1px rgba(32, 168, 255, .18);
}

.cstr.lf-svg-mode .lf-guides .v {
  top: 0;
  bottom: 0;
  width: 1px;
}

.cstr.lf-svg-mode .lf-guides .h {
  left: 0;
  right: 0;
  height: 1px;
}

.cstr.lf-svg-mode .lf-figure {
  touch-action: none;
  /* Фигурки — впереди всего (выше фона-декора, фото, подписей, питомцев, аксессуаров). */
  z-index: 18;
}

/* Подписи — выше фона/фото, но ниже фигурок/питомцев/аксессуаров. */
.cstr.lf-svg-mode .lf-draggable-text {
  z-index: 8;
}

.cstr.lf-svg-mode .lf-pet-svg {
  position: absolute;
  width: auto;
  min-width: 26px;
  height: calc(var(--pet-h, 13%) * var(--pet-scale, 1));
  min-height: 26px;
  aspect-ratio: var(--pet-ratio, 1);
  transform: translate(-50%, -50%);
  z-index: 16;
  cursor: grab;
  overflow: visible;
  touch-action: none;
}

.cstr.lf-svg-mode .lf-pet-scale-block {
  position: absolute;
  left: calc(50% + var(--pet-stand-shift-x, 0%));
  top: calc(100% - 1px);
  display: block;
  width: 82%;
  height: 24%;
  min-height: 7px;
  padding: 0;
  transform: translateX(-50%);
  opacity: 1;
  filter: drop-shadow(0 1px 2px rgba(42, 40, 35, .14));
  z-index: 0;
}

.cstr.lf-svg-mode .lf-pet-stand-horse {
  top: calc(100% + 2px);
  width: 132%;
  min-width: 70px;
  max-width: none !important;
  height: 16%;
  min-height: 9px;
  transform: translateX(calc(-50% + var(--horse-stand-shift, 0%)));
  filter: none;
}

.cstr.lf-svg-mode .lf-pet-stand-horse .lf-stand-base {
  stroke: rgba(42, 40, 35, .24);
  stroke-width: 2;
}

.cstr.lf-svg-mode .lf-pet-stand-horse .lf-stand-stud {
  fill: var(--stand-color);
  stroke: rgba(42, 40, 35, .24);
  stroke-width: 2;
}

.cstr.lf-svg-mode .lf-pet-stand-bird {
  top: calc(100% - 2px);
  width: 60%;
  height: 28%;
  min-height: 9px;
}

.cstr.lf-svg-mode .lf-pet-svg svg,
.cstr.lf-svg-mode .lf-pet-svg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  overflow: visible;
}

.cstr.lf-svg-mode .lf-pet-svg > svg:not(.lf-pet-scale-block),
.cstr.lf-svg-mode .lf-pet-svg > img:not(.lf-pet-scale-block) {
  position: relative;
  z-index: 2;
}

.cstr.lf-svg-mode .lf-pet-svg svg.lf-pet-scale-block {
  width: 82%;
  height: 24%;
  min-height: 7px;
}

.cstr.lf-svg-mode .lf-pet-svg svg.lf-pet-stand-bird {
  width: 60%;
  height: 28%;
}

.cstr.lf-svg-mode .lf-pet-svg svg.lf-pet-stand-horse {
  top: calc(100% + 2px);
  width: 132%;
  min-width: 70px;
  max-width: none !important;
  height: 16%;
  min-height: 9px;
  transform: translateX(calc(-50% + var(--horse-stand-shift, 0%)));
}

.cstr.lf-svg-mode .lf-pet-delete {
  opacity: 0;
  transition: opacity .15s;
}

.cstr.lf-svg-mode .lf-pet-svg:hover .lf-pet-delete {
  opacity: 1;
}

.cstr.lf-svg-mode .lf-pet-name {
  position: absolute;
  left: 50%;
  top: calc(100% + 22px);
  width: max-content;
  max-width: none;
  transform: translateX(-50%);
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pink-deep);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  overflow: visible;
  white-space: nowrap;
  overflow-wrap: normal;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .55);
  box-shadow: none;
}

.cstr.lf-svg-mode .lf-frame-accessory {
  position: absolute;
  width: auto;
  min-width: 18px;
  height: var(--frame-acc-h, 6%);
  min-height: 18px;
  aspect-ratio: var(--frame-acc-ratio, 1);
  transform: translate(-50%, -50%) rotate(var(--frame-acc-rotate, 0deg));
  z-index: 14;
  border: 0;
  background: transparent;
  cursor: grab;
  overflow: visible;
  touch-action: none;
  backface-visibility: hidden;
  will-change: left, top, transform;
}

.cstr.lf-svg-mode .lf-frame-accessory.is-background-element {
  z-index: 2;
}

/* Фото («Фото 1») — средний слой: ВЫШЕ фона-декора, но НИЖЕ фигурок/питомцев/аксессуаров. */
.cstr.lf-svg-mode .lf-frame-accessory.is-photo-frame {
  z-index: 5;
}

/* При редактировании на шаге «Фон» — поднимаем редактируемый фон-декор/фото наверх, чтобы его можно было схватить. */
.cstr.lf-svg-mode .lf-frame-accessory.is-bg-editable {
  z-index: 35;
}

.cstr.lf-svg-mode .lf-frame-accessory.is-locked {
  cursor: default;
  touch-action: auto;
}

.cstr.lf-svg-mode .lf-frame-accessory.is-dragging {
  cursor: grabbing;
}

.cstr.lf-svg-mode .lf-frame-accessory img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .16));
}

.cstr.lf-svg-mode .lf-bg-search-text {
  position: absolute;
  left: 15.5%;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  color: #2b2f33;
  font-size: var(--frame-search-font, 18px);
  font-weight: 700;
  line-height: 1.1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.cstr.lf-svg-mode .lf-frame-accessory.is-photo-frame {
  min-width: 42px;
  min-height: 42px;
  padding: 0;
}

.cstr.lf-svg-mode .lf-frame-photo {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .92);
  border-radius: var(--frame-photo-radius, 18px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 228, 237, .82));
  box-shadow: 0 5px 12px rgba(42, 40, 35, .2);
  color: rgba(31, 77, 58, .62);
  font-size: 12px;
  font-weight: 900;
}

.cstr.lf-svg-mode .lf-frame-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

.cstr.lf-svg-mode .lf-frame-accessory:hover .lf-pet-delete {
  opacity: 1;
}

.cstr.lf-svg-mode .lf-frame-accessory .lf-pet-delete {
  opacity: .86;
}

.cstr.lf-svg-mode .lf-pet-delete {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  display: grid;
  place-items: center;
  border: 2px solid transparent;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}

.cstr.lf-svg-mode .lf-pet-delete:hover,
.cstr.lf-svg-mode .lf-pet-delete:focus-visible {
  border-color: #fff;
  outline: 2px solid var(--pink-deep);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(255, 111, 168, .22), 0 5px 12px rgba(0, 0, 0, .2);
}

.cstr.lf-svg-mode .lf-pet-resize {
  display: none !important;
}

.lf-wide-action,
.lf-upload-btn,
.lf-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-weight: 800;
}

.lf-orientation-btn {
  gap: 8px;
}

.lf-orientation-btn span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--pink-pastel);
  color: var(--pink-deep);
  font-size: 1.08rem;
  line-height: 1;
}

.lf-orientation-btn:hover span {
  transform: rotate(90deg);
  transition: transform .22s ease;
}

.lf-orientation-btn.is-disabled {
  opacity: .58;
  cursor: not-allowed;
}

.lf-orientation-btn.is-disabled span {
  background: #f2ebe1;
  color: var(--mute);
}

.lf-upload-btn,
.lf-drop {
  margin-top: 8px;
  cursor: pointer;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.lf-text-tools {
  display: grid;
  gap: 8px;
}

.lf-bg-tools {
  display: grid;
  gap: 8px;
}

.lf-bg-tools .lf-range-row {
  grid-template-columns: 96px 1fr 72px;
}

.lf-bg-tools input[type="range"] {
  accent-color: var(--pink);
}

.lf-bg-reset {
  width: 100%;
}

.lf-range-row {
  display: grid;
  grid-template-columns: auto 1fr 72px;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: .82rem;
  font-weight: 800;
}

.lf-range-row input {
  width: 100%;
}

.lf-font-size-input {
  min-width: 0;
  height: 34px;
  padding: 6px 8px;
  border-radius: 7px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  text-align: center;
}

.lf-card-preview {
  margin-top: 10px;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, #fffaf3, #f5eadc);
  box-shadow: 0 8px 22px rgba(42, 40, 35, .08);
}

.lf-card-paper {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 168px;
  padding: 18px 18px 20px;
  border: 1px solid rgba(224, 74, 133, .24);
  border-radius: 7px;
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 111, 168, .16), transparent 20%),
    linear-gradient(#fff, #fffaf7);
  box-shadow: inset 0 0 0 7px rgba(255, 247, 239, .86);
}

.lf-card-paper b {
  display: block;
  margin-bottom: 12px;
  color: var(--pink-deep);
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.lf-card-paper p {
  margin: 0;
  align-self: center;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lf-inline-custom-color {
  margin-top: 10px;
}

.lf-custom-color-toggle {
  margin-top: 8px;
}

.lf-drop.is-loaded {
  border-color: var(--green);
  background: rgba(31, 77, 58, .08);
}

.lf-figure,
.lf-stack,
.lf-body-part-layer,
.lf-imported-hair-layer,
.lf-headwear-layer,
.lf-face-layer,
.lf-hand-accessory-layer {
  transition: none !important;
  animation: none !important;
}

.cstr,
.cstr *,
.lf-draft-gate,
.lf-draft-gate * {
  transition: none !important;
  animation: none !important;
}

/* Поворот ориентации (flipOrientation): рамка-молдинг поворачивается на бок ОДИН
   раз на 90° (по часовой, если становится альбомной — lf-spin-cw; против часовой,
   если книжной — lf-spin-ccw), а СОДЕРЖИМОЕ (фон, фигурки, подписи) контр-вращается
   на те же 90° в обратную сторону и остаётся СТРОГО ВЕРТИКАЛЬНЫМ — крутится только
   рамка, не контент. Без scale, плавно (одно непрерывное вращение, без рывка).
   Размер фигурок постоянный (см. инвариантный cmScale в renderPreview). */
.cstr.lf-svg-mode #fS.lf-orient-spin {
  overflow: visible;
  z-index: 5;
}

.cstr.lf-svg-mode #fS.lf-orient-spin .fr-o,
.cstr.lf-svg-mode #fS.lf-orient-spin .fr-bg {
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}

.cstr.lf-svg-mode #fS.lf-spin-cw .fr-o {
  animation: lfFrameSpinCW .9s cubic-bezier(.45, .05, .35, 1) both !important;
}

.cstr.lf-svg-mode #fS.lf-spin-cw .fr-bg {
  animation: lfContentSpinCW .9s cubic-bezier(.45, .05, .35, 1) both !important;
}

.cstr.lf-svg-mode #fS.lf-spin-ccw .fr-o {
  animation: lfFrameSpinCCW .9s cubic-bezier(.45, .05, .35, 1) both !important;
}

.cstr.lf-svg-mode #fS.lf-spin-ccw .fr-bg {
  animation: lfContentSpinCCW .9s cubic-bezier(.45, .05, .35, 1) both !important;
}

@keyframes lfFrameSpinCW { from { transform: rotate(0deg); } to { transform: rotate(90deg); } }
@keyframes lfContentSpinCW { from { transform: rotate(0deg); } to { transform: rotate(-90deg); } }
@keyframes lfFrameSpinCCW { from { transform: rotate(0deg); } to { transform: rotate(-90deg); } }
@keyframes lfContentSpinCCW { from { transform: rotate(0deg); } to { transform: rotate(90deg); } }

.lf-drop {
  flex-direction: column;
  min-height: 124px;
  border-style: dashed;
  border-width: 2px;
  border-radius: 14px;
  gap: 4px;
  padding: 16px 14px;
  background: #FFFCFD;
}

.lf-drop b {
  font-size: .95rem;
}

.lf-drop span {
  color: var(--mute);
  font-size: .85rem;
}

.lf-bg-grid,
.lf-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.lf-pet-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lf-pet-row {
  display: grid;
  grid-template-columns: 44px minmax(88px, .8fr) minmax(110px, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.lf-pet-name-input {
  min-height: 36px;
  padding: 8px 10px;
}

.lf-choice {
  min-height: 38px;
  padding: 7px 6px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-weight: 800;
  font-size: .82rem;
}

.lf-choice.a,
.lf-bg-card.a {
  border-color: var(--pink);
  background: var(--pink-pastel);
  box-shadow: 0 2px 0 var(--pink-deep);
}

.lf-bg-card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  text-align: left;
}

.lf-bg-card span {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, .05);
  margin-bottom: 7px;
  background-color: #fff;
}

.lf-bg-element-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.lf-bg-element-card {
  min-height: 106px;
}

.lf-bg-element-card img {
  width: 100%;
  height: 68px;
  object-fit: contain;
  display: block;
}

.lf-bg-element-card small {
  min-height: 26px;
}

.lf-photo-placeholder-card {
  display: grid;
  place-items: center;
  width: 100%;
  height: 68px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff, #ffe7ef);
  border: 1.5px dashed rgba(224, 74, 133, .36);
  color: var(--pink-deep);
  font-size: 12px;
  font-weight: 900;
}

.lf-frame-element-list {
  display: grid;
  gap: 10px;
}

.lf-frame-element-row {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.lf-frame-element-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lf-frame-element-head b,
.lf-element-control span {
  font-size: .82rem;
  font-weight: 800;
}

.lf-element-control {
  display: grid;
  gap: 6px;
}

.lf-element-text {
  display: grid;
  gap: 6px;
}

.lf-element-control span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--mute);
}

.lf-element-text span {
  color: var(--mute);
  font-size: .82rem;
  font-weight: 800;
}

.lf-frame-accessory-text-input {
  min-height: 40px;
}

.lf-element-control em {
  color: var(--pink-deep);
  font-style: normal;
}

.lf-element-range {
  width: 100%;
  height: 30px;
  accent-color: var(--pink);
}

.lf-value-field {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--pink-deep);
  font-weight: 900;
}

.lf-value-field input {
  width: 58px;
  height: 28px;
  padding: 0 6px;
  border: 1.5px solid rgba(224, 74, 133, .3);
  border-radius: 7px;
  color: var(--pink-deep);
  font: inherit;
  font-size: .82rem;
  font-weight: 900;
  text-align: right;
}

.lf-stepper-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 6px;
  align-items: center;
}

.lf-stepper-row button,
.lf-element-delete,
.lf-reset-mini {
  min-height: 34px;
  border: 1.5px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--green-deep);
  font-weight: 900;
}

.lf-stepper-row input[type="range"] {
  width: 100%;
  accent-color: var(--pink);
}

.lf-mini-upload {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink) !important;
  text-align: center;
  cursor: pointer;
}

.lf-mini-upload b {
  color: var(--green);
  font-size: 12px;
}

.lf-mini-upload span {
  color: var(--pink-deep);
  font-size: 12px;
  font-weight: 900;
}

.lf-mini-upload.is-upload {
  border-color: rgba(224, 74, 133, .4);
  background: var(--pink-pastel);
}

.lf-mini-upload.is-replace {
  border-color: rgba(31, 77, 58, .3);
  background: rgba(31, 77, 58, .08);
}

.lf-photo-direct-card {
  cursor: pointer;
}

.lf-photo-direct-card b {
  display: block;
  margin-top: 4px;
  color: var(--pink-deep);
  font-size: 12px;
  font-weight: 900;
}

.lf-element-delete {
  width: 34px;
  min-width: 34px;
  border-color: rgba(224, 74, 133, .35);
  background: var(--pink-pastel);
  color: var(--pink-deep);
  font-size: 18px;
  line-height: 1;
}

.lf-reset-mini {
  width: 100%;
  min-height: 32px;
  color: var(--mute);
}

.lf-pet-grid .pet-c {
  min-height: 104px;
}

.lf-pet-grid .pet-i {
  width: 54px;
  height: 48px;
}

.lf-pet-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.lf-position-grid {
  display: grid;
  gap: 8px;
}

.lf-position-row {
  display: grid;
  grid-template-columns: minmax(120px, .8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.lf-position-row b,
.lf-position-row label {
  font-size: .82rem;
  font-weight: 800;
}

.lf-position-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--mute);
}

.lf-position-row input {
  width: 100%;
  accent-color: var(--pink);
}

.lf-pet-row {
  display: grid;
  grid-template-columns: 42px minmax(88px, .8fr) minmax(110px, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.lf-pet-row .pet-i {
  width: 36px;
  height: 32px;
}

.lf-pet-row b {
  font-size: .9rem;
}

.lf-pet-row button {
  padding: 7px 9px;
  border-radius: 7px;
  background: var(--pink-pastel);
  color: var(--pink-deep);
  font-weight: 800;
  font-size: .8rem;
}

@media(max-width:1024px) {
  .cstr.lf-svg-mode .cstr-bd {
    flex-direction: column;
  }

  .cstr.lf-svg-mode .cstr-pv {
    order: 1;
    height: 54vh;
    min-height: 330px;
    margin: 0;
  }

  .cstr.lf-svg-mode .cstr-pn {
    order: 2;
    max-height: 46vh;
  }
}

/* === Загрузка изображений: иконки, состояния, бейджи (v144) === */
.lf-upload-ic {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 999px;
  background: var(--pink-pastel);
  color: var(--pink-deep);
}

.lf-upload-ic svg {
  width: 17px;
  height: 17px;
  display: block;
}

.lf-upload-btn {
  gap: 9px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.lf-upload-btn:hover {
  border-color: var(--pink);
  background: #FFF9FB;
}

.lf-upload-btn.is-loaded {
  border-color: rgba(31, 77, 58, .35);
  background: rgba(31, 77, 58, .07);
}

.lf-upload-btn.is-loaded .lf-upload-ic {
  background: rgba(31, 77, 58, .12);
  color: var(--green);
}

.lf-torso-print-preview {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lf-torso-print-preview img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: #fff;
}

.lf-torso-print-remove {
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: 9px;
  padding: 7px 11px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--mute);
  cursor: pointer;
}

.lf-torso-print-remove:hover {
  border-color: var(--pink);
  color: var(--pink);
}

.lf-note.lf-approve-note {
  margin-top: 8px;
  border-left: 3px solid var(--pink);
  background: #FFF4F8;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ink);
}

.lf-upload-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lf-drop {
  gap: 6px;
}

.lf-drop:hover {
  border-color: var(--pink);
  background: #FFF9FB;
}

.lf-drop .lf-upload-ic {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}

.lf-drop .lf-upload-ic svg {
  width: 21px;
  height: 21px;
}

.lf-drop.is-loaded .lf-upload-ic {
  background: rgba(31, 77, 58, .12);
  color: var(--green);
}

.lf-mini-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: border-color .15s ease;
}

.lf-mini-upload:hover {
  border-color: var(--pink);
}

.lf-mini-upload .lf-upload-ic {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}

.lf-mini-upload .lf-upload-ic svg {
  width: 14px;
  height: 14px;
}

.lf-mini-upload.is-replace .lf-upload-ic {
  background: rgba(31, 77, 58, .12);
  color: var(--green);
}

.lf-photo-card.add .lf-upload-ic {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  background: var(--pink);
  color: #fff;
}

.lf-photo-card.add .lf-upload-ic svg {
  width: 18px;
  height: 18px;
}

.lf-photo-card.add:hover {
  border-color: var(--pink);
}

.lf-photo-direct-card b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.lf-photo-direct-card b .lf-upload-ic {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.lf-photo-direct-card b .lf-upload-ic svg {
  width: 11px;
  height: 11px;
}

.lf-upload-busy {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 2147483000;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  box-shadow: var(--sh-md);
  pointer-events: none;
}

/* Свои волосы: подсветка референса */
.lf-photo-card.is-custom-reference {
  position: relative;
}

.lf-custom-ref-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .02em;
  pointer-events: none;
}

.lf-photo-card.is-custom-reference.a {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(31, 77, 58, .25);
}

.lf-custom-hair-chip {
  display: grid;
  gap: 2px;
  margin: 8px 0;
  padding: 9px 12px;
  border: 1.5px solid rgba(31, 77, 58, .35);
  border-radius: 10px;
  background: rgba(31, 77, 58, .07);
}

.lf-custom-hair-chip b {
  color: var(--green);
  font-size: 13px;
}

.lf-custom-hair-chip span {
  color: var(--mute);
  font-size: 12px;
}

.lf-figure .lf-custom-hair-badge {
  position: absolute;
  left: 50%;
  top: calc(69.4% + 11.05% + 22px);
  transform: translateX(-50%);
  z-index: 4;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: var(--green) !important;
  color: #fff !important;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: none !important;
}

/* === v146: животное вплотную к кубику, пимпочка прячется за фигуркой === */
/* Кубик приподнимаем так, чтобы пимпочка ушла за тело животного (z под ним),
   а лапы встали на базу вплотную. */
.cstr.lf-svg-mode .lf-pet-scale-block {
  top: calc(100% - 4px - var(--pet-stand-nudge, 0%));
}

.cstr.lf-svg-mode .lf-pet-stand-bird {
  top: calc(100% - 6px - var(--pet-stand-nudge, 0%));
}

.cstr.lf-svg-mode .lf-pet-stand-horse {
  top: calc(100% - 3px - var(--pet-stand-nudge, 0%));
}

/* Выбор цвета кубика под животным в списке добавленных */
.lf-pet-stand-pick {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lf-pet-stand-pick > span {
  font-size: 12px;
  font-weight: 800;
  color: var(--mute);
}

.lf-pet-stand-pick .swg {
  display: flex;
  gap: 6px;
}

.lf-pet-stand-pick .sw {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--line);
  cursor: pointer;
  padding: 0;
}

.lf-pet-stand-pick .sw.a {
  border-color: var(--pink-deep);
  box-shadow: 0 0 0 2px var(--pink-pastel);
}

/* === v146: убрать полоски-следы перерисовки при перетаскивании ===
   У активной фигурки и кубика питомца есть drop-shadow; при быстром драге
   браузер оставляет следы фильтра («полоски»). На время перетаскивания глушим
   фильтры и выносим элемент на отдельный слой, чтобы перерисовка была чистой. */
.cstr.lf-svg-mode .lf-figure.is-dragging,
.cstr.lf-svg-mode .lf-pet-svg.is-dragging,
.cstr.lf-svg-mode .lf-frame-accessory.is-dragging,
.cstr.lf-svg-mode .lf-draggable-text.is-dragging,
.cstr.lf-svg-mode .lf-figure.is-dragging *,
.cstr.lf-svg-mode .lf-pet-svg.is-dragging *,
.cstr.lf-svg-mode .lf-frame-accessory.is-dragging * {
  filter: none !important;
  text-shadow: none !important;
}

/* === v147: превью подарочной упаковки (фото коробки выбранного цвета) === */
.lf-gift-wrap-preview {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.lf-gift-wrap-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 420px;
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
  display: grid;
  place-items: center;
  padding: 4px;
}

.lf-gift-wrap-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  image-rendering: auto;
}

.lf-gift-wrap-swatch {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
}

.lf-gift-wrap-meta {
  display: grid;
  gap: 3px;
  text-align: center;
}

.lf-gift-wrap-meta b {
  font-size: 14px;
  color: var(--ink);
}

.lf-gift-wrap-meta span {
  font-size: 12px;
  color: var(--mute);
}