.pf-body{padding-bottom:calc(200rpx + env(safe-area-inset-bottom))}

/* 三步进度条。不用 seg-tabs：那是「可以随意切」的语义，
   这里是有顺序的，点第三步跳过前两步会拿到一份没名字的档案 */
.pf-steps{
  flex:none;display:flex;align-items:flex-start;justify-content:center;
  gap:var(--sp-6);padding:var(--sp-3) var(--pad-x) var(--sp-4);
}
.pf-step{display:flex;flex-direction:column;align-items:center;gap:6rpx}
.pf-dot{
  width:48rpx;height:48rpx;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1rpx solid var(--line);
  color:var(--muted2);font-size:var(--fs-sm);font-weight:var(--fw-b);
}
.pf-slabel{font-size:var(--fs-cap);color:var(--muted2)}
.pf-step.on .pf-dot{background:var(--primary);border-color:var(--primary);color:#fff}
.pf-step.on .pf-slabel{color:var(--primary-dark);font-weight:var(--fw-b)}

.pf-h{font-size:var(--fs-lg);font-weight:var(--fw-b);margin-bottom:var(--sp-4)}

/* 头像 */
.pf-av-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-5)}
.pf-av{
  width:176rpx;height:176rpx;border-radius:50%;overflow:hidden;
  background:var(--primary-soft);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;
}
.pf-av-img{width:100%;height:100%}
.pf-av-tip{font-size:var(--fs-cap);color:var(--primary-dark)}

/* 猫 / 狗 */
.pf-species{display:flex;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.pf-sp{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  padding:var(--sp-5) 0;border-radius:var(--r-md);
  background:var(--surface-2);border:2rpx solid var(--line);
  color:var(--muted);font-size:var(--fs-md);
}
.pf-sp.on{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-ink);font-weight:var(--fw-b)}
.pf-empty{color:var(--muted2)}

/* 底部按钮 */
.pf-foot{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:var(--sp-3);
  padding:var(--sp-4) var(--pad-x) calc(var(--sp-4) + env(safe-area-inset-bottom));
  background:#fff;box-shadow:0 -12rpx 32rpx rgba(70,48,25,.06);
}
.pf-back{flex:none;width:200rpx}
.pf-next{flex:1}
.pf-busy{opacity:.6}

/* 品种选择器 */
.pf-mask{position:fixed;inset:0;z-index:200;background:rgba(45,41,37,.45);display:flex;align-items:flex-end}
.pf-sheet{
  width:100%;background:var(--bg2);border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:var(--sp-5) 0 calc(var(--sp-3) + env(safe-area-inset-bottom));
  box-shadow:var(--sd-3);
}
.pf-sheet-h{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad-x) var(--sp-4);
  font-size:var(--fs-lg);font-weight:var(--fw-b);
}
.pf-breed-wrap{display:flex;height:60vh}
.pf-breed-list{flex:1;min-width:0;padding-left:var(--pad-x)}
/* 首字母吸顶：滚长列表时得知道现在在哪一段 */
.pf-bi{
  position:sticky;top:0;z-index:1;
  background:var(--bg2);color:var(--primary-dark);
  font-size:var(--fs-sm);font-weight:var(--fw-b);padding:var(--sp-2) 0;
}
.pf-brow{
  padding:var(--sp-3) 0;font-size:var(--fs-md);color:var(--text);
  border-bottom:1rpx solid var(--line);
}
.pf-brow.on{color:var(--primary-dark);font-weight:var(--fw-b)}
/* 右侧 A-Z 索引 */
.pf-index{
  flex:none;width:56rpx;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2rpx;
}
.pf-ichar{
  font-size:var(--fs-cap);color:var(--muted);
  padding:2rpx 8rpx;line-height:1.4;
}

/* 阶段的划分依据。摆出来而不是让用户猜「幼年期」是几个月到几个月 */
.pf-basis{
  margin-top:var(--sp-2);background:var(--primary-soft);color:var(--primary-ink);
  border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-cap);line-height:1.6;
}