/* ================= 我的 ================= */
#page-mine {
  background-color: #f9f9f9;
}

#page-mine .container {
  width: 100%;
}

/* ===== 顶部用户信息（背景图 220px，左右拉满） ===== */
#page-mine .top-bg {
  position: relative;
  height: 4.4rem; /* 440rpx */
  margin: 0;
  overflow: hidden;
  background: #2f2f34;
}

#page-mine .bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 右上：会员码 16px（距背景图右 16px） */
#page-mine .member-code {
  position: absolute;
  top: 0.4rem;
  right: 0.32rem;
  z-index: 2;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 0.32rem;
}

#page-mine .member-code-icon {
  margin-right: 0.08rem;
}

/* 中间：头像 + 昵称（居中） */
#page-mine .user-info-center {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-56%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#page-mine .avatar {
  width: 1.2rem; /* 120rpx */
  height: 1.2rem;
  border-radius: 50%;
  background: #fff;
  border: 0.04rem solid #fff;
  box-shadow: 0 0.04rem 0.16rem rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.52rem;
  font-weight: bold;
  color: #2f2f34;
  cursor: pointer;
}

#page-mine .avatar-img {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 0.04rem solid #fff;
  box-shadow: 0 0.04rem 0.16rem rgba(0, 0, 0, 0.2);
  background: #fff;
  cursor: pointer;
}

#page-mine .user-info-row {
  margin-top: 0.2rem;
  display: flex;
  align-items: center;
}

#page-mine .nickname {
  font-size: 0.4rem;
  font-weight: 700;
  color: #fcfcfc;
  text-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.3);
}

/* LV.1 浅橙胶囊徽标 */
#page-mine .lv-badge {
  margin-left: 0.2rem;
  padding: 0.04rem 0.16rem;
  background: #ffe9d3;
  border-radius: 0.2rem;
  color: #573413;
  font-size: 0.24rem;
  font-weight: 700;
  line-height: 0.32rem;
}

/* 底部：店铺名 + 等级横条（40px 深色渐变，上圆角 8px） */
#page-mine .level-bar {
  position: absolute;
  left: 0.32rem;
  right: 0.32rem;
  bottom: 0;
  z-index: 2;
  height: 0.8rem;
  padding: 0 0.32rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(97deg, #4c5066 8.53%, #1d202f 94.35%);
  border-radius: 0.16rem 0.16rem 0 0;
}

#page-mine .shop-name {
  font-size: 0.26rem;
  color: #f3ddc7;
}

#page-mine .gold-level {
  display: flex;
  align-items: center;
  font-size: 0.26rem;
  color: #f3ddc7;
}

/* ===== 钱包（56px，左右留 25.5px） ===== */
#page-mine .wallet-card {
  margin: 0 0.2rem 0.16rem;
  height: 1.12rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 0.24rem;
  background: #fff;
  cursor: pointer;
}

#page-mine .wallet-icon {
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.2rem;
}

#page-mine .wallet-label {
  flex: 1;
  font-size: 0.28rem;
  color: #323233;
}

/* ===== 通用卡片（圆角 8px，左右留 33.5px） ===== */
#page-mine .card {
  margin: 0 0.25rem 0.24rem;
  background: #fff;
  border-radius: 0.16rem;
  overflow: hidden;
}

/* ===== 我的订单 ===== */
#page-mine .order-header {
  height: 0.8rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.32rem;
}

#page-mine .order-title {
  font-size: 0.28rem;
  color: #111111;
}

#page-mine .order-more {
  font-size: 0.26rem;
  color: #999999;
}

#page-mine .order-grid {
  display: flex;
  padding: 0.08rem 0.1rem 0.2rem;
}

#page-mine .order-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.12rem 0;
  border-radius: 0.12rem;
  cursor: pointer;
}

#page-mine .order-icon-box {
  width: 0.8rem;
  height: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.08rem;
}

#page-mine .order-icon-img {
  width: 0.4rem;
  height: 0.4rem;
}

#page-mine .order-text {
  font-size: 0.26rem;
  color: #111111;
}

/* ===== 我的预约单（51px，左右拉满） ===== */
#page-mine .reserve-cell {
  margin: 0 0 0.16rem;
  height: 1.02rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 0.16rem;
  background: #fff;
  cursor: pointer;
}

#page-mine .reserve-icon {
  width: 0.32rem;
  height: 0.32rem;
  margin-right: 0.2rem;
}

/* ===== 单行列表项（56px） ===== */
#page-mine .cell {
  height: 1.12rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 0.32rem;
  background: #fff;
  border-bottom: 0.01rem solid #ebedf0;
  cursor: pointer;
}

#page-mine .cell:last-child {
  border-bottom: none;
}

#page-mine .cell-icon-box {
  width: 0.64rem;
  height: 0.64rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.2rem;
}

#page-mine .cell-img {
  width: 0.4rem;
  height: 0.4rem;
}

#page-mine .cell-text {
  flex: 1;
  font-size: 0.28rem;
  color: #111111;
}

#page-mine .cell-value {
  font-size: 0.28rem;
  color: #323234;
  margin-right: 0.12rem;
}

#page-mine .cell-arrow {
  font-size: 0.32rem;
  color: #969799;
}

/* ===== 留白分隔 ===== */
#page-mine .spacer {
  height: 0.24rem;
}

/* 点击反馈（保持白色） */
#page-mine .hover {
  background-color: #fff;
}

#page-mine .hover:active {
  background-color: #f2f3f5;
}