/* =========================================================
   V919 · 我的页面细节精修
   不改整体布局，只优化视觉
========================================================= */


/* =========================================================
   1. 顶部背景更柔和
========================================================= */

.page[data-page="mine"]
.profile-head.v907-profile{
  background:
    radial-gradient(
      circle at 14% 22%,
      rgba(255,255,255,.72),
      transparent 30%
    ),
    radial-gradient(
      circle at 88% 18%,
      rgba(244,255,220,.40),
      transparent 25%
    ) !important;
}


/* =========================================================
   2. 草坡变淡、变柔
   不再像一整条绿色横条
========================================================= */

.page[data-page="mine"]
.v907-profile-bg::before{
  height:58px !important;

  opacity:.60 !important;

  background:
    radial-gradient(
      ellipse at 4% 115%,
      rgba(214,237,181,.75) 0 40%,
      transparent 41%
    ),

    radial-gradient(
      ellipse at 34% 120%,
      rgba(224,241,194,.82) 0 47%,
      transparent 48%
    ),

    radial-gradient(
      ellipse at 70% 120%,
      rgba(192,224,151,.68) 0 46%,
      transparent 47%
    ),

    radial-gradient(
      ellipse at 104% 115%,
      rgba(160,209,119,.48) 0 43%,
      transparent 44%
    ) !important;

  filter:blur(.2px);
}


/* 右侧增加一点柔和灌木，不做成卡片 */
.page[data-page="mine"]
.v907-profile-bg::after{
  content:"";

  display:block !important;

  position:absolute;

  right:-18px;
  bottom:1px;

  width:128px;
  height:54px;

  pointer-events:none;

  opacity:.35;

  background:
    radial-gradient(
      circle at 22% 75%,
      #c3dfa2 0 24px,
      transparent 25px
    ),
    radial-gradient(
      circle at 52% 70%,
      #acd28b 0 30px,
      transparent 31px
    ),
    radial-gradient(
      circle at 84% 79%,
      #94c977 0 25px,
      transparent 26px
    );

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 18%,
      #000
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 18%,
      #000
    );
}


/* =========================================================
   3. 房子稍微缩小
========================================================= */

.page[data-page="mine"]
.v907-garden{
  width:168px !important;
  height:91px !important;

  right:3px !important;

  opacity:.90 !important;

  filter:
    drop-shadow(
      0 4px 5px
      rgba(77,107,57,.05)
    );
}


/* =========================================================
   4. 头像更精致
========================================================= */

.page[data-page="mine"]
.v907-avatar{
  width:74px !important;
  height:74px !important;

  border:
    3px solid
    rgba(255,255,255,.94) !important;

  background:
    rgba(255,255,255,.58) !important;

  box-shadow:
    0 7px 20px rgba(78,112,61,.08),
    0 0 0 2px rgba(164,217,132,.14),
    inset 0 1px 0 rgba(255,255,255,.80) !important;
}


.page[data-page="mine"]
.v907-avatar img{
  width:68px !important;
  height:68px !important;
}


/* 爪印徽章小一点 */
.page[data-page="mine"]
.v907-avatar-paw{
  width:21px !important;
  height:21px !important;

  right:-2px !important;
  bottom:-1px !important;

  font-size:10px !important;
}


/* =========================================================
   5. 名字和文字质感
========================================================= */

.page[data-page="mine"]
.v907-name{
  font-size:27px !important;

  letter-spacing:-.8px !important;

  color:#2d271f !important;
}


.page[data-page="mine"]
.v907-subtitle{
  color:#817968 !important;

  font-size:11.5px !important;

  letter-spacing:.1px;
}


/* 编辑按钮更轻 */
.page[data-page="mine"]
.v907-edit{
  width:23px !important;
  height:23px !important;

  color:#a2a390 !important;

  background:
    rgba(255,255,255,.55) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7);
}


/* =========================================================
   6. 账号按钮更接近参考图
========================================================= */

.page[data-page="mine"]
.v907-account{
  padding:6px 12px !important;

  color:#4e8051 !important;

  background:
    rgba(139,194,108,.16) !important;

  border:
    1px solid
    rgba(139,194,108,.05);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.58) !important;
}


.page[data-page="mine"]
.v907-logout{
  padding:6px 12px !important;

  color:#6d7266 !important;

  background:
    rgba(255,255,255,.76) !important;

  border:
    1px solid
    rgba(122,139,104,.06) !important;

  box-shadow:
    0 4px 10px
    rgba(72,85,56,.045) !important;
}


/* =========================================================
   7. 齿轮缩一点，并加小叶子
========================================================= */

.page[data-page="mine"]
.v907-settings{
  width:49px !important;
  height:49px !important;

  background:
    rgba(255,255,255,.76) !important;

  border:
    1px solid
    rgba(255,255,255,.90) !important;

  box-shadow:
    0 7px 18px
    rgba(69,94,53,.075),
    inset 0 1px 0
    rgba(255,255,255,.92) !important;
}


.page[data-page="mine"]
.v907-settings svg{
  width:26px !important;
  height:26px !important;
}


/* 右上角小叶子 */
.page[data-page="mine"]
.v907-settings::after{
  content:"";

  position:absolute;

  right:-3px;
  top:-4px;

  width:10px;
  height:6px;

  border-radius:
    100% 0
    100% 0;

  background:
    linear-gradient(
      135deg,
      #9bd169,
      #61ac4c
    );

  transform:rotate(-20deg);

  animation:
    v919GearLeaf
    4s
    ease-in-out
    infinite;
}


@keyframes v919GearLeaf{
  0%,100%{
    transform:
      translateY(0)
      rotate(-20deg);
  }

  50%{
    transform:
      translateY(-2px)
      rotate(-28deg);
  }
}


/* =========================================================
   8. 爱心更接近参考图
========================================================= */

.page[data-page="mine"]
.v907-heart{
  color:#f08489 !important;

  filter:
    drop-shadow(
      0 2px 2px
      rgba(218,103,109,.10)
    );
}


.page[data-page="mine"]
.v907-heart.h1{
  font-size:11px !important;
}


.page[data-page="mine"]
.v907-heart.h2{
  font-size:7px !important;
}


/* =========================================================
   9. 三张卡统一更柔和
========================================================= */

.page[data-page="mine"]
.pets-panel,

.page[data-page="mine"]
.stats-panel,

.page[data-page="mine"]
.service-panel{
  background:
    rgba(255,253,249,.97) !important;

  border:
    1px solid
    rgba(226,217,206,.76) !important;

  box-shadow:
    0 8px 20px
    rgba(59,48,38,.045) !important;
}


/* 圆角更接近参考 */
.page[data-page="mine"]
.pets-panel{
  border-radius:28px !important;
}


.page[data-page="mine"]
.stats-panel{
  border-radius:27px !important;
}


.page[data-page="mine"]
.service-panel{
  border-radius:27px !important;
}


/* =========================================================
   10. 宠物小卡也柔一点
========================================================= */

.page[data-page="mine"]
.pet-mini{
  background:
    rgba(255,253,249,.70) !important;

  border-color:
    rgba(220,211,199,.74) !important;

  box-shadow:
    0 4px 10px
    rgba(58,47,37,.025);
}


.page[data-page="mine"]
.pet-mini.active{
  background:
    linear-gradient(
      180deg,
      #f2fbef,
      #edf9f1
    ) !important;

  border-color:
    #59bc89 !important;

  box-shadow:
    0 5px 13px
    rgba(74,177,127,.09),
    inset 0 0 0 1px
    rgba(89,188,137,.12) !important;
}


/* 当前宠物轻微呼吸 */
.page[data-page="mine"]
.pet-mini.active img{
  animation:
    v919PetBreath
    3.4s
    ease-in-out
    infinite;
}


@keyframes v919PetBreath{
  0%,100%{
    transform:
      translateY(0)
      scale(1);
  }

  50%{
    transform:
      translateY(-2px)
      scale(1.025);
  }
}


/* =========================================================
   减少动画模式
========================================================= */

@media(prefers-reduced-motion:reduce){

  .page[data-page="mine"] *{
    animation:none !important;
  }

}