/* =========================================================
   V907 · 我的页面完整顶部
   不碰 bottom-nav
========================================================= */


/* 原 profile-head 现在只作为容器 */
.page[data-page="mine"] .profile-head.v907-profile{
  position:relative !important;

  width:100% !important;
  height:166px !important;

  display:block !important;

  margin:0 0 10px 0 !important;
  padding:0 !important;

  overflow:visible !important;

  border:0 !important;
  border-radius:0 !important;

  background:transparent !important;

  box-shadow:none !important;
}


/* =========================================================
   整个背景区域
========================================================= */

.v907-profile-bg{
  position:absolute;
  inset:0;

  overflow:hidden;

  border-radius:0 0 28px 28px;

  background:
    radial-gradient(
      circle at 15% 18%,
      rgba(255,255,255,.88),
      transparent 29%
    ),
    linear-gradient(
      180deg,
      #fffaf0 0%,
      #fbf8e9 45%,
      #e8f3cf 100%
    );

  pointer-events:none;
}


/* 后方浅色坡地 */
.v907-profile-bg::before{
  content:"";

  position:absolute;

  left:-8%;
  right:-7%;
  bottom:-42px;

  height:105px;

  border-radius:50% 50% 0 0;

  background:
    radial-gradient(
      ellipse at 18% 35%,
      #d9edb8 0 24%,
      transparent 25%
    ),
    radial-gradient(
      ellipse at 60% 35%,
      #d0e9aa 0 31%,
      transparent 32%
    ),
    radial-gradient(
      ellipse at 91% 45%,
      #b9dd92 0 28%,
      transparent 29%
    );
}


/* =========================================================
   左侧头像
========================================================= */

.v907-avatar{
  position:absolute;

  left:17px;
  top:37px;

  z-index:5;

  width:72px;
  height:72px;

  display:grid;
  place-items:center;

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

  border-radius:50%;

  background:
    rgba(255,255,255,.68);

  box-shadow:
    0 7px 20px rgba(88,125,65,.10),
    0 0 0 2px rgba(131,201,100,.14);
}


.v907-avatar img{
  width:66px;
  height:66px;

  object-fit:contain;

  border-radius:50%;

  filter:
    drop-shadow(
      0 3px 3px
      rgba(55,80,45,.06)
    );

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


@keyframes v907AvatarFloat{
  0%,100%{
    transform:
      translateY(1px)
      rotate(-1deg);
  }

  50%{
    transform:
      translateY(-4px)
      rotate(1deg);
  }
}


/* 头像爪印 */
.v907-avatar-paw{
  position:absolute;

  right:-3px;
  bottom:-2px;

  width:23px;
  height:23px;

  display:grid;
  place-items:center;

  border:
    2px solid white;

  border-radius:50%;

  color:#78b85c;

  background:#fffaf1;

  box-shadow:
    0 4px 9px
    rgba(88,121,66,.13);

  font-size:12px;
}


/* =========================================================
   姓名信息
========================================================= */

.v907-profile-info{
  position:absolute;

  left:104px;
  top:35px;

  z-index:6;

  width:
    calc(100% - 104px - 116px);
}


.v907-name-row{
  display:flex;
  align-items:center;

  gap:6px;

  height:34px;
}


.v907-name{
  margin:0;

  color:#2d261e;

  font-size:27px;
  line-height:1;

  font-weight:900;

  letter-spacing:-1px;
}


.v907-edit{
  width:25px;
  height:25px;

  display:grid;
  place-items:center;

  padding:0;

  border:0;
  border-radius:50%;

  color:#9b9b87;

  background:
    rgba(255,255,255,.65);

  font-size:12px;

  transition:
    transform .18s ease;
}


.v907-edit:active{
  transform:
    scale(.88)
    rotate(-10deg);
}


/* 副标题 */
.v907-subtitle{
  margin:
    8px 0 0;

  color:#807866;

  font-size:12px;
  line-height:1.25;

  white-space:nowrap;
}


/* =========================================================
   账号栏
========================================================= */

.v907-account-row{
  display:flex;
  align-items:center;

  gap:7px;

  margin-top:9px;
}


.v907-account{
  max-width:140px;

  overflow:hidden;

  padding:
    6px
    11px;

  border-radius:999px;

  color:#4f7d4c;

  background:
    rgba(122,183,91,.15);

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

  font-size:10px;
  font-weight:800;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.v907-logout{
  padding:
    6px
    10px;

  border:
    1px solid
    rgba(106,125,91,.08);

  border-radius:999px;

  color:#727568;

  background:
    rgba(255,255,255,.78);

  box-shadow:
    0 3px 9px
    rgba(77,89,59,.06);

  font-size:10px;
  font-weight:750;
}


.v907-logout:active{
  transform:scale(.94);
}


/* =========================================================
   设置按钮
========================================================= */

.v907-settings{
  position:absolute;

  right:18px;
  top:24px;

  z-index:9;

  width:52px;
  height:52px;

  display:grid;
  place-items:center;

  padding:0;

  border:
    1px solid
    rgba(255,255,255,.9);

  border-radius:50%;

  color:#67875f;

  background:
    rgba(255,255,255,.80);

  box-shadow:
    0 8px 20px
    rgba(72,94,56,.10),
    inset
    0 1px 0
    rgba(255,255,255,.94);

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}


.v907-settings svg{
  width:29px;
  height:29px;
}


.v907-settings.v907-spin svg{
  animation:
    v907GearSpin
    .55s
    cubic-bezier(.2,.8,.25,1.15);
}


@keyframes v907GearSpin{
  to{
    transform:
      rotate(180deg);
  }
}


/* =========================================================
   右侧小屋
========================================================= */

.v907-garden{
  position:absolute;

  right:24px;
  bottom:0;

  z-index:2;

  width:176px;
  height:92px;

  pointer-events:none;
}


.v907-garden svg{
  width:100%;
  height:100%;

  overflow:visible;

  animation:
    v907HouseBreath
    5s
    ease-in-out
    infinite;

  transform-origin:center bottom;
}


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

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


/* =========================================================
   爱心 + 叶子
========================================================= */

.v907-heart{
  position:absolute;

  z-index:4;

  color:#ef8e91;

  font-size:10px;

  animation:
    v907Heart
    3.2s
    ease-in-out
    infinite;
}


.v907-heart.h1{
  right:177px;
  bottom:61px;
}


.v907-heart.h2{
  right:165px;
  bottom:72px;

  font-size:7px;

  animation-delay:-1.3s;
}


@keyframes v907Heart{
  0%,100%{
    opacity:.35;

    transform:
      translateY(4px)
      scale(.8);
  }

  50%{
    opacity:1;

    transform:
      translateY(-4px)
      scale(1.1);
  }
}


.v907-leaf{
  position:absolute;

  z-index:4;

  width:12px;
  height:7px;

  border-radius:
    100% 0
    100% 0;

  background:
    linear-gradient(
      135deg,
      #9ed36c,
      #63ab4e
    );

  animation:
    v907Leaf
    5s
    ease-in-out
    infinite;
}


.v907-leaf.l1{
  left:40%;
  top:31px;
}


.v907-leaf.l2{
  right:9px;
  top:10px;

  transform:rotate(35deg);

  animation-delay:-2s;
}


@keyframes v907Leaf{
  0%,100%{
    translate:0 0;
  }

  50%{
    translate:4px -5px;
  }
}


/* =========================================================
   下方卡片
========================================================= */

.page[data-page="mine"]
.profile-head.v907-profile
+ .pets-panel{
  margin-top:4px !important;
}


/*
  旧版使用固定减法算 service-panel，
  V907 顶部 166px
*/
.page[data-page="mine"]
.service-panel{
  height:
    calc(
      100%
      - 166px
      - 132px
      - 144px
      - 34px
    ) !important;
}


/* =========================================================
   矮屏
========================================================= */

@media(max-height:760px){

  .page[data-page="mine"]
  .profile-head.v907-profile{
    height:140px !important;
  }


  .v907-avatar{
    left:14px;
    top:28px;

    width:62px;
    height:62px;
  }


  .v907-avatar img{
    width:57px;
    height:57px;
  }


  .v907-profile-info{
    left:88px;
    top:26px;

    width:
      calc(100% - 88px - 96px);
  }


  .v907-name{
    font-size:23px;
  }


  .v907-subtitle{
    margin-top:4px;

    font-size:10px;
  }


  .v907-account-row{
    margin-top:5px;
  }


  .v907-settings{
    right:13px;
    top:18px;

    width:45px;
    height:45px;
  }


  .v907-settings svg{
    width:25px;
    height:25px;
  }


  .v907-garden{
    right:13px;

    width:145px;
    height:75px;
  }


  .page[data-page="mine"]
  .service-panel{
    height:
      calc(
        100%
        - 140px
        - 116px
        - 126px
        - 34px
      ) !important;
  }

}