/* ═════ 03 档案填写 —— 逐条对照 H5:
   style.css  #s-profile(L105-205) .profile-bg/.profile-body/.page-title/.field/.field-label/
              .form-row.two/.pick/.pick-value/.pick .chev/.skin-card/.skin-axis/.axis-item/.chip/
              .skin-stage/.skin-arrow/.skin-carousel/.skin-track/.skin-item/.skin-name/.skin-desc/
              .skin-dots/.btn-submit/.ms-mobile-select(滚轮外观)/.overlay/.popup/.privacy 类
   ui-20261009.css L31-32,L89-92
   ui-20261012.css L34-69(.popup 与 #p-photoguide 定位), L169-198(#s-profile 的 --profile-space 收缩规则)
   换算:calc(N * var(--u)) → 2N rpx;字号/行高/圆角固定 px 原样保留。
   注:H5 的 --profile-space = min(var(--u), max(.3px, calc((100vh - 420px)/306))),
       这里写成同构的 min(2rpx, max(.6rpx, ...)),并用 var(--profile-space, 2rpx) 兜底。 ═════ */

page { background: #0e0f18; }

/* H5 #s-profile(style.css L105 + ui-20261012 L172-175) */
.profile {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  overscroll-behavior: none;
  background: #0e0f18;
  --profile-space: min(2rpx, max(0.6rpx, calc((100vh - var(--brand-header-height, 64px) - 420px) / 306)));
}

/* H5 .profile-bg(ui-20261009 L31:bg-profile-h5,cover) */
.profile-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* H5 .profile-body(style.css L113-117 + ui-20261012 L179-184) */
.profile-body {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 68rpx 128rpx 80rpx;          /* calc(34*u) calc(64*u) calc(40*u) */
  padding-top: max(env(safe-area-inset-top), calc(34 * var(--profile-space, 2rpx)));
  padding-bottom: max(env(safe-area-inset-bottom), calc(40 * var(--profile-space, 2rpx)));
}

/* H5 .page-title(style.css L118-122 + ui-20261009 L92 + ui-20261012 L185)
   注:#s-profile 根节点自身不接收 padding-top(safe-area),与 H5 一致 */
.profile .page-title {
  color: #fff;
  font-size: 21.5px;
  font-weight: 600;
  letter-spacing: 2rpx;                 /* calc(1 * var(--u)) */
  text-align: center;
  margin-bottom: calc(22 * var(--profile-space, 2rpx));
  flex-shrink: 0;
}

/* H5 .field / .field-label(ui-20261012 L186-187) */
.profile .field {
  margin-bottom: calc(19 * var(--profile-space, 2rpx));
  flex-shrink: 0;
}
.profile .field-label {
  display: block;
  text-align: center;
  color: #fff;
  font-size: 14.5px;
  font-weight: 400;
  margin-bottom: calc(9 * var(--profile-space, 2rpx));
  letter-spacing: 1rpx;                 /* calc(.5 * var(--u)) */
}

/* H5 .form-row.two */
.profile .form-row.two {
  display: flex;
  gap: 46rpx;                           /* calc(23 * var(--u)) */
  flex-shrink: 0;
}
.profile .form-row.two .field { flex: 1; min-width: 0; }

/* H5 .pick(style.css L133-142) —— 三个选择控件同一套外观 */
.profile .pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  height: 74rpx;                        /* calc(37 * var(--u)) */
  padding: 0 26rpx 0 24rpx;             /* 0 calc(13*u) 0 calc(12*u) */
  box-sizing: border-box;
  background: #fff;
  border-radius: 10rpx;                 /* calc(5 * var(--u)) */
  font-size: 13.5px;
  color: #282828;
  text-align: left;
}
.profile .pick:active { background: #F7F7F7; }
.profile .pick-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile .pick .chev {
  flex: none;
  width: 16rpx;                         /* calc(8 * var(--u)) */
  height: 16rpx;
  margin-top: -8rpx;                    /* calc(-4 * var(--u)) */
  border-width: 0 1.5px 1.5px 0;
}

/* ─── H5 .skin-card(style.css L144-148 + ui-20261012 L189) ─── */
.profile .skin-card {
  background: #fff;
  border-radius: 10rpx;                 /* calc(5 * var(--u)) */
  padding-top: calc(21 * var(--profile-space, 2rpx));
  padding-bottom: calc(24 * var(--profile-space, 2rpx));
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* H5 .skin-axis / .axis-item / .chip */
.profile .skin-axis {
  display: flex;
  justify-content: center;
  gap: 24rpx;                           /* calc(12 * var(--u)) */
  margin-bottom: calc(18 * var(--profile-space, 2rpx));
  flex-shrink: 0;
}
.profile .axis-item {
  display: inline-flex;
  align-items: center;
  gap: 10rpx;                           /* calc(5 * var(--u)) */
  font-size: 9px;
  color: #282828;
}
.profile .chip {
  width: 16rpx;                         /* calc(8 * var(--u)) */
  height: 16rpx;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.chip-dry { background: #EAE6E1; }
.chip-oily { background: #F5F078; }
.chip-balance { background: #DBF6D6; }

/* H5 .skin-stage / .skin-arrow(ui-20261012 L191) */
.profile .skin-stage {
  position: relative;
  padding: 0 56rpx;                     /* 0 calc(28 * var(--u)) */
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.profile .skin-arrow {
  position: absolute;
  top: 84rpx;                           /* calc(42 * var(--u)) */
  z-index: 1;
  width: 52rpx;                         /* calc(26 * var(--u)) */
  height: 52rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile .skin-arrow.prev { left: 10rpx; }   /* calc(5 * var(--u)) */
.profile .skin-arrow.next { right: 10rpx; }
.profile .skin-arrow .chev {
  width: 18rpx;                         /* calc(9 * var(--u)) */
  height: 18rpx;
  border-width: 0 1.5px 1.5px 0;
}
.profile .skin-arrow.disabled { opacity: .2; }

/* H5 .skin-carousel / .skin-track(ui-20261012 L192-193) */
.profile .skin-carousel {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.profile .skin-track {
  display: flex;
  flex: 0 0 100%;
  min-width: 0;
  min-height: 0;
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}
.profile .skin-track.dragging { transition: none; }
/* H5 .skin-item / .skin-item img / .skin-name / .skin-desc */
.profile .skin-item {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profile .skin-img {
  width: 218rpx;                        /* calc(109 * var(--u)) */
  height: 218rpx;
  flex-shrink: 1;
  min-height: 0;
}
.profile .skin-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #000;
  margin-top: calc(16 * var(--profile-space, 2rpx));
  flex-shrink: 0;
}
.profile .skin-desc {
  font-size: 11.5px;                    /* ui-20261009 L32 */
  color: #282828;
  line-height: 1.55;
  text-align: center;
  margin-top: 10rpx;                    /* calc(5 * var(--u)) */
  width: 300rpx;                        /* calc(150 * var(--u)) */
  max-width: 300rpx;
  min-height: 35.65px;                  /* calc(2 * 1.55 * 11.5px) */
  flex-shrink: 0;
}
/* H5 第一条描述含 <br>:用两个块级行还原硬换行 */
.profile .skin-desc-line { display: block; }

/* H5 .skin-dots / .skin-dots i */
.profile .skin-dots {
  display: flex;
  justify-content: center;
  gap: 10rpx;                           /* calc(5 * var(--u)) */
  margin-top: calc(22 * var(--profile-space, 2rpx));
  flex-shrink: 0;
}
.profile .skin-dots .dot {
  width: 16rpx;                         /* calc(8 * var(--u)) */
  height: 16rpx;
  border-radius: 50%;
  background: #D6D6D6;
  transition: background .25s;
}
.profile .skin-dots .dot.on { background: #000; }

/* H5 .btn-submit */
.profile .btn-submit {
  margin: calc(25 * var(--profile-space, 2rpx)) auto 0;
  flex-shrink: 0;
}
.btn-press { transform: scale(.96); }

/* ═══ 滚轮弹层:H5 vendor/mobile-select 外观(style.css L191-205) ═══ */
.profile .overlay-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(0, 0, 0, .55);
}
.picker-sheet {
  width: 100%;
  background: #fff;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}
.picker-btn-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  border-bottom: 1px solid #F0F0F0;
  box-sizing: border-box;
}
.picker-cancel,
.picker-ensure {
  width: 64px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 15px;
}
.picker-cancel { color: #757575; }
.picker-ensure { color: #282828; font-weight: 600; }
.picker-title {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-size: 15px;
  font-weight: 600;
  color: #282828;
}
.native-picker {
  width: 100%;
  height: 220px;
  font-size: 16px;
  color: #282828;
}
.picker-cell {
  font-size: 16px;
  color: #282828;
  text-align: center;
  line-height: 44px;
}
/* H5 mobile-select: single wheel, 90% inner width and 44px yellow selection. */
.gender-sheet { animation: gender-sheet-in .4s ease; }
.gender-sheet .picker-btn-bar { padding: 0 5%; }
.gender-picker { width: 90%; margin: 0 auto; }
.gender-picker .picker-cell { height: 44px; }
@keyframes gender-sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ═══ 拍照引导弹窗 H5 #p-photoguide(L311-327) ═══ */
.profile .overlay-guide {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #101823;
}
.profile .guide-bg {
  position: absolute;
  inset: 0;
}
.profile .guide-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.profile .guide-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
}
/* H5 .splash-slogan.splash-slogan-updated(ui-20261012 L9-20) */
.profile .splash-slogan {
  position: absolute;
  left: calc(50% - 1.041667px);
  top: max(6.838833%, calc(env(safe-area-inset-top) + 48px));
  width: 249.305556px;
  height: 75.347222px;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: 0;
  text-shadow: none;
}
.profile .splash-slogan-copy-clip {
  position: absolute;
  left: 0;
  right: 0;
  top: 51.236111px;
  height: 24.111111px;
  overflow: hidden;
}
.profile .splash-slogan-copy {
  position: absolute;
  left: 0;
  top: -51.236111px;
  width: 100%;
  height: 75.347222px;
}
.profile .splash-slogan-brand,
.profile .splash-slogan-english {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: Arial, sans-serif;
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
}
.profile .splash-slogan-brand { top: -4px; font-size: 28px; }
.profile .splash-slogan-english { top: 26.736111px; }

/* H5 #p-photoguide .popup(ui-20261012 L34-38) */
.profile .popup {
  position: relative;
  z-index: 2;
  width: 307.986111px;
  height: 313.194444px;
  min-height: 313.194444px;
  top: -42.881944px;
  padding: 0;
  background: #fff;
  border-radius: 8.680556px;
  display: flex;
  flex-direction: column;
  text-align: left;
  box-sizing: border-box;
  text-rendering: geometricPrecision;
}
.profile .popup-close {
  position: absolute;
  top: 10.055556px;
  right: 10.055556px;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  box-sizing: border-box;
}
.profile .popup-close::after { border: none; }
.popup-close-img {
  width: 17.708333px;
  height: 17.361111px;
}
/* H5 #p-photoguide .popup-title(L44) */
.profile .popup-title {
  position: absolute;
  left: 37.5px;
  top: 61.388889px;
  margin: 0;
  font-size: 23.148148px;
  line-height: 28.935185px;
  font-weight: 700;
  letter-spacing: 0;
  color: #282828;
  white-space: nowrap;
  text-align: left;
}
/* H5 .guide-description(L45-52) */
.profile .guide-description {
  position: absolute;
  left: 37.847222px;
  top: 135.069444px;
  width: 237px;
  margin: 0;
  font-size: 11.574074px;
  line-height: 17.361111px;
  font-weight: 400;
  letter-spacing: 0;
}
.profile .guide-line { white-space: nowrap; }
/* H5 #p-photoguide .popup-btn(L57-64) */
.profile .popup-btn {
  position: absolute;
  left: 63.194444px;
  top: 219.791667px;
  margin: 0;
  width: 181.25px;
  height: 38.888889px;
  line-height: 38.888889px;
  font-size: 14.467593px;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: 6.944444px;
}
@media (max-height: 440px) {
  .profile .popup { top: 0; }
}

/* ─── H5 .toast ─── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 15%;
  transform: translateX(-50%) translateY(8px);
  max-width: 86%;
  background: rgba(20, 20, 20, .85);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  padding: 9px 18px;
  border-radius: 18px;
  opacity: 0;
  pointer-events: none;
  transition: all .25s ease;
  z-index: 99;
  box-sizing: border-box;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.session-guard { position: relative; z-index: 10; padding: 120rpx 40rpx; text-align: center; font-size: 13px; line-height: 1.8; color: #707070; }
.session-guard .btn-primary { margin: 32rpx auto 0; }