.pet64{
  padding:4px 2px 6px;
}

.pet64-title{
  margin:4px 0 6px;
  font-size:29px;
  line-height:1.18;
  font-weight:850;
  letter-spacing:-1px;
  color:#25221f;
}

.pet64-sub{
  min-height:23px;
  font-size:15px;
  line-height:1.55;
  color:#9b958c;
}

.pet64-stage{
  position:relative;
  height:315px;
  margin:18px 0 20px;
  overflow:hidden;
  border-radius:30px;
  border:1px solid rgba(73,67,58,.07);
  background:
    radial-gradient(circle at 50% 50%,
      rgba(122,218,162,.28),
      rgba(204,239,218,.11) 38%,
      rgba(255,255,255,.55) 70%),
    #fbfaf6;
}

.pet64-ring{
  position:absolute;
  left:50%;
  top:50%;
  width:220px;
  height:220px;
  border-radius:50%;
  border:1px solid rgba(66,171,112,.14);
  transform:translate(-50%,-50%);
  animation:pet64Ring 3.4s ease-in-out infinite;
}

.pet64-ring.r2{
  width:184px;
  height:184px;
  animation-delay:.5s;
}

.pet64-ring.r3{
  width:148px;
  height:148px;
  animation-delay:1s;
}

@keyframes pet64Ring{
  0%,100%{
    opacity:.3;
    transform:translate(-50%,-50%) scale(.94);
  }
  50%{
    opacity:.9;
    transform:translate(-50%,-50%) scale(1.07);
  }
}

.pet64-cloud{
  position:absolute;
  left:50%;
  top:50%;
  width:215px;
  height:215px;
  transform:translate(-50%,-50%);
}

.pet64-dot{
  position:absolute;
  border-radius:50%;
  background:#65cc91;
  opacity:.74;
  animation:
    pet64Float var(--spd)
    ease-in-out infinite alternate;
  animation-delay:var(--delay);
}

.pet64-dot.alt{
  background:#a2e4bd;
}

.pet64-dot.dark{
  background:#7f8b85;
  opacity:.55;
}

@keyframes pet64Float{
  from{
    transform:
      translate3d(
        calc(var(--dx) * -1),
        calc(var(--dy) * -1),
        0
      )
      scale(.72);
  }
  to{
    transform:
      translate3d(
        var(--dx),
        var(--dy),
        0
      )
      scale(1.22);
  }
}

.pet64-line{
  position:absolute;
  left:50%;
  top:50%;
  width:105px;
  height:145px;
  border-radius:48% 48% 42% 42%;
  border:1px solid rgba(64,163,107,.10);
  transform:translate(-50%,-50%);
  filter:blur(.2px);
  animation:pet64Body 2.8s ease-in-out infinite;
}

@keyframes pet64Body{
  0%,100%{
    opacity:.25;
    transform:translate(-50%,-50%) scale(.92);
  }
  50%{
    opacity:.7;
    transform:translate(-50%,-50%) scale(1.04);
  }
}

.pet64-steps{
  display:grid;
  gap:13px;
}

.pet64-step{
  display:grid;
  grid-template-columns:32px 1fr auto;
  align-items:center;
  gap:10px;
  min-height:38px;
}

.pet64-icon{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  border-radius:50%;
  border:2px solid #dedbd4;
  color:#b8b3ab;
  font-size:13px;
  font-weight:800;
}

.pet64-step.active .pet64-icon{
  color:#50b97c;
  border-color:#50b97c;
  animation:pet64Pulse 1.3s ease-in-out infinite;
}

.pet64-step.done .pet64-icon{
  color:#fff;
  border-color:#61c98c;
  background:#61c98c;
}

@keyframes pet64Pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(79,185,124,.08)}
  50%{box-shadow:0 0 0 7px rgba(79,185,124,.10)}
}

.pet64-name{
  font-size:16px;
  font-weight:740;
  color:#302c28;
}

.pet64-step.wait .pet64-name{
  color:#aaa59e;
}

.pet64-state{
  min-width:54px;
  text-align:right;
  font-size:13px;
  font-weight:650;
  color:#a09a91;
}

.pet64-step.active .pet64-state,
.pet64-step.done .pet64-state{
  color:#37875c;
}

.pet64-time{
  margin:18px 0 0;
  text-align:center;
  color:#aaa399;
  font-size:12px;
}

.pet64-browse{
  width:100%;
  height:53px;
  margin-top:16px;
  border:0;
  border-radius:18px;
  background:#294b3b;
  color:#fff;
  font-size:15px;
  font-weight:760;
}

.pet64-browse:active{
  transform:scale(.985);
}

.pet64-browse:disabled{
  opacity:.42;
}

.pet64-tip{
  margin-top:10px;
  text-align:center;
  color:#aaa399;
  font-size:12px;
}

#petJobPill64{
  position:fixed;
  z-index:9000;
  left:50%;
  bottom:calc(88px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  padding:10px 15px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  background:rgba(41,75,59,.94);
  color:white;
  box-shadow:0 10px 28px rgba(35,52,43,.2);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-size:13px;
  font-weight:720;
  white-space:nowrap;
}

#petJobPill64.ready{
  background:rgba(116,82,47,.96);
}

.pet64-ready-img{
  width:218px;
  height:218px;
  margin:0 auto 18px;
  overflow:hidden;
  border-radius:30px;
  background-color:#f6f2e9;
  background-image:
    linear-gradient(45deg,#e5e0d5 25%,transparent 25%),
    linear-gradient(-45deg,#e5e0d5 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#e5e0d5 75%),
    linear-gradient(-45deg,transparent 75%,#e5e0d5 75%);
  background-size:20px 20px;
  background-position:0 0,0 10px,10px -10px,-10px 0;
}

.pet64-ready-img img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.pet64-center{
  text-align:center;
}

.pet64-input{
  width:100%;
  height:54px;
  box-sizing:border-box;
  margin-top:17px;
  padding:0 16px;
  border:1px solid rgba(55,70,60,.1);
  border-radius:17px;
  outline:none;
  background:#f8f5ee;
  font-size:16px;
}

.pet64-species{
  display:flex;
  gap:8px;
  margin:12px 0 16px;
}

.pet64-species button{
  flex:1;
  min-height:43px;
  border:1px solid rgba(60,76,66,.12);
  border-radius:14px;
  background:#f8f5ee;
  color:#746f67;
  font-weight:680;
}

.pet64-species button.active{
  color:#294b3b;
  border-color:#a7c4b0;
  background:#e9f1eb;
}

.pet64-actions{
  display:flex;
  gap:9px;
}

.pet64-actions button{
  flex:1;
  min-height:52px;
  border:0;
  border-radius:17px;
  font-weight:750;
}

.pet64-later{
  background:#eee9df;
  color:#746d63;
}

.pet64-save{
  background:#294b3b;
  color:white;
}

/* ======================================
   V65 - 恢复第一版生成页面比例
   一屏显示 + 去逛逛始终可见
====================================== */

.pet64{
  padding:2px 2px 4px !important;
}

.pet64-title{
  margin:1px 0 5px !important;
  font-size:27px !important;
}

.pet64-sub{
  min-height:20px !important;
  font-size:14px !important;
}

.pet64-stage{
  height:215px !important;
  margin:12px 0 14px !important;
  border-radius:26px !important;
}

.pet64-ring{
  width:178px !important;
  height:178px !important;
}

.pet64-ring.r2{
  width:150px !important;
  height:150px !important;
}

.pet64-ring.r3{
  width:122px !important;
  height:122px !important;
}

.pet64-cloud{
  width:175px !important;
  height:175px !important;
}

.pet64-line{
  width:82px !important;
  height:116px !important;
}

.pet64-steps{
  gap:7px !important;
}

.pet64-step{
  min-height:31px !important;
  grid-template-columns:29px 1fr auto !important;
  gap:8px !important;
}

.pet64-icon{
  width:25px !important;
  height:25px !important;
}

.pet64-name{
  font-size:15px !important;
}

.pet64-state{
  font-size:12px !important;
}

.pet64-time{
  margin-top:8px !important;
  font-size:11px !important;
}

.pet64-browse{
  position:relative !important;
  z-index:5 !important;
  height:50px !important;
  margin-top:9px !important;
  flex-shrink:0 !important;
}

.pet64-tip{
  margin-top:6px !important;
  font-size:11px !important;
}


/* 矮屏手机继续缩一点 */
@media (max-height:760px){

  .pet64-stage{
    height:170px !important;
  }

  .pet64-title{
    font-size:24px !important;
  }

  .pet64-step{
    min-height:28px !important;
  }

  .pet64-tip{
    display:none;
  }

}
