page {
  background: #F6F7FB;
}

.conatiner {
  /* height: 100%; */
  /* height: 578rpx; */
  /* background: linear-gradient(to bottom, #FFE7E1, #FFFFFF); */
  /* background: linear-gradient( 359deg, rgba(255,255,255,0) 0%, #FDD9CA 100%); */
  /* 与设计稿个人中心一致：顶部柔和五彩渐变（薄荷绿/粉/淡紫低饱和叠加）向下淡出到灰底 */
  background:
    radial-gradient(120% 56% at 12% 0%, rgba(150, 222, 210, 0.62) 0%, rgba(150, 222, 210, 0) 52%),
    radial-gradient(110% 52% at 52% 2%, rgba(255, 188, 210, 0.55) 0%, rgba(255, 188, 210, 0) 56%),
    radial-gradient(120% 58% at 96% 0%, rgba(200, 176, 242, 0.6) 0%, rgba(200, 176, 242, 0) 56%),
    linear-gradient(180deg, rgba(244, 244, 246, 0) 0%, #f4f4f6 540rpx),
    #f4f4f6;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 头部：吸顶固定（滚动时头像行始终可见），顶部避让胶囊的 paddingTop 由模板内联注入 */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 0 20rpx 24rpx 25rpx;
  /* 同一份渐变按 vw/vh 显式视口单位复刻：header 吸顶时盒子原点即视口原点，
     与容器的视口渐变严格重合，且不依赖小程序支持度存疑的 background-attachment: fixed */
  background:
    radial-gradient(120vw 56vh at 12vw 0, rgba(150, 222, 210, 0.62) 0%, rgba(150, 222, 210, 0) 52%),
    radial-gradient(110vw 52vh at 52vw 2vh, rgba(255, 188, 210, 0.55) 0%, rgba(255, 188, 210, 0) 56%),
    radial-gradient(120vw 58vh at 96vw 0, rgba(200, 176, 242, 0.6) 0%, rgba(200, 176, 242, 0) 56%),
    linear-gradient(180deg, rgba(244, 244, 246, 0) 0%, #f4f4f6 540rpx),
    #f4f4f6;
  background-repeat: no-repeat;
  margin-bottom: 11rpx;
}

/* 头像 */
.avatar-container {
  display: flex;
  width: 130rpx;
  height: 130rpx;
  border-radius: 50%;
  overflow: hidden;
  background-color: #FF7354;
  margin-right: 30rpx;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

/* 头像图片 */
.avatar {
  width: 130rpx;
  height: 130rpx;
  pointer-events: auto;
  border-radius: 50%;
  overflow: hidden;
}

.avatar_right {
  flex: 1;
}

.avatar_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar_setting {
  display: flex;
  pointer-events: auto;
}

.avatar_setting_box{
  width: 70rpx;
  height: 50rpx;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 5rpx;
}

.avatar_setting_box image {
  width: 34rpx;
  height: 34rpx;
}

.avatar_setting>image:first-child {
  margin-right: 40rpx;
}

/* 登录/注册（昵称：对齐原型个人中心 40rpx 加粗） */
.login-btn {
  font-size: 40rpx;
  font-weight: 700;
  pointer-events: auto;
  color: #1a1a1a;
  letter-spacing: 1rpx;
}

.avater_mobile {
  margin-top: 10rpx;
  font-size: 26rpx;
  color: #666;
}

/* 物业快捷入口三格卡（样式对齐原型个人中心 quick-card：横排 + 竖线分隔） */
.quick-card {
  display: flex;
  align-items: stretch;
  margin: 0 20rpx;
  border-radius: 24rpx;
  background: #ffffff;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.quick-item {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8rpx;
  padding: 24rpx 22rpx;
  border-right: 1rpx solid #f1f1f1;
}

.quick-item:last-child {
  border-right: none;
}

.quick-text {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  min-width: 0;
}

.quick-title {
  font-size: 27rpx;
  font-weight: 700;
  color: #111111;
  white-space: nowrap;
}

.quick-sub {
  font-size: 21rpx;
  color: #888888;
  white-space: nowrap;
}

.quick-icon {
  flex-shrink: 0;
  /* 48rpx：三等分列内为文字留足空间，避免小屏拥挤 */
  width: 48rpx;
  height: 48rpx;
}

/* 通用模块白卡（我的订单 / 服务目录） */
.module-card {
  margin: 20rpx 20rpx 0;
  padding: 28rpx 24rpx;
  border-radius: 24rpx;
  background: #ffffff;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.module-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #1a1a1a;
}

.module-link {
  display: flex;
  align-items: center;
  gap: 4rpx;
  font-size: 24rpx;
  color: #999999;
}

/* 订单五状态横排 */
.order-status-row {
  display: flex;
  margin-top: 32rpx;
}

.status-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
}

.status-item:active {
  opacity: 0.6;
}

.status-icon {
  width: 52rpx;
  height: 52rpx;
}

.status-label {
  font-size: 24rpx;
  color: #444444;
}

/* 我的钱包白卡（样式对齐原型个人中心 wallet-card） */
.wallet-card {
  margin: 0 20rpx 21rpx;
  padding: 32rpx 28rpx 28rpx;
  border-radius: 24rpx;
  background: #ffffff;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
}

.wallet-head {
  display: flex;
  align-items: center;
  gap: 14rpx;
}

.wallet-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #1a1a1a;
}

.wallet-assets {
  display: flex;
  margin-top: 36rpx;
}

.asset-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}

.asset-item:active {
  opacity: 0.6;
}

.asset-value {
  font-size: 30rpx;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
}

.asset-label {
  font-size: 24rpx;
  color: #888888;
}

/* 服务目录行卡（点击弹抽屉） */
.service-card {
  padding: 8rpx 24rpx;
}

.service-row {
  display: flex;
  align-items: center;
  padding: 28rpx 4rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.service-row:last-child {
  border-bottom: none;
}

.service-row:active {
  opacity: 0.6;
}

.service-icon {
  width: 44rpx;
  height: 44rpx;
  margin-right: 20rpx;
}

.service-label {
  flex: 1;
  font-size: 30rpx;
  color: #222222;
}

.customer {
  width: 130rpx;
  height: 130rpx;
  position: fixed;
  right: 0;
  bottom: 212rpx;
  background: rgba(255, 55, 11, 0.6);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: normal;
  font-size: 28rpx;
  color: #FFFFFF;
}

.customer>image {
  width: 50rpx;
  height: 55rpx;
}

.uicon-volume {
  font-size: 28rpx !important;
}

/* 全部功能抽屉（底部弹出，样式对齐原型 profile-function-drawer） */
.fd-wrap {
  background: #f4f4f6;
  border-radius: 24rpx 24rpx 0 0;
  overflow: hidden;
}

/* 头部：白底 + 居中标题 + 右侧绝对定位关闭钮（对齐原型） */
.fd-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92rpx;
  background: #ffffff;
  border-bottom: 1rpx solid #f2f2f2;
}

.fd-title {
  font-size: 31rpx;
  font-weight: 700;
  color: #1a1a1a;
}

.fd-close {
  position: absolute;
  top: 50%;
  right: 28rpx;
  transform: translateY(-50%);
}

.fd-body {
  /* scroll-view 需固定高度才能滚动定位（约 60% 屏高） */
  height: 900rpx;
  padding: 24rpx 28rpx;
  box-sizing: border-box;
}

.fd-group {
  margin-bottom: 24rpx;
}

.fd-group-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 12rpx 16rpx;
}

.fd-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
  row-gap: 32rpx;
  padding: 28rpx 20rpx;
  border-radius: 18rpx;
  background: #ffffff;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.fd-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
}

.fd-item:active {
  opacity: 0.6;
}

.fd-item-icon {
  width: 52rpx;
  height: 52rpx;
}

.fd-item-name {
  font-size: 22rpx;
  color: #333333;
  text-align: center;
}