.user-page {
  min-height: 16.22rem;
  background:
    radial-gradient(circle at 1.1rem 0.1rem, rgba(250, 166, 93, 0.34), transparent 2.1rem),
    radial-gradient(circle at 7.1rem 5rem, rgba(255, 133, 86, 0.22), transparent 1.25rem),
    #0d0906 url("./assets/nybg.jpg") top center / 7.5rem auto no-repeat;
}

.user-content {
  padding: 1rem 0.3rem 1.78rem;
}

.profile-head {
  position: relative;
  height: 2rem;
  display: grid;
  grid-template-columns: 1.72rem 1fr 0.28rem;
  column-gap: 0.34rem;
  align-items: center;
}

.avatar-wrap {
  position: relative;
  width: 1.72rem;
  height: 1.72rem;
}

.avatar-wrap img {
  height: 100%;
  object-fit: cover;
  border: 0.03rem solid #f2b86f;
  border-radius: 50%;
  box-shadow: 0 0 0.28rem rgba(255, 176, 120, 0.24);
}

.avatar-badge {
  position: absolute;
  right: -0.06rem;
  bottom: 0.04rem;
  width: 0.47rem;
  height: 0.47rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f5bf64;
  color: #5b331c;
  font-size: 0.23rem;
  box-shadow: 0 0.04rem 0.1rem rgba(0, 0, 0, 0.28);
}

.name-row {
  display: flex;
  align-items: center;
  gap: 0.16rem;
}

.name-row h1 {
  margin: 0;
  font-size: 0.42rem;
  line-height: 0.56rem;
  font-weight: 900;
  background: linear-gradient(270deg, #ffcd9f 0%, #fff5e9fc 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.vip-badge {
  height: 0.38rem;
  display: inline-flex;
  align-items: center;
  gap: 0.08rem;
  padding: 0 0.14rem;
  border: 0.015rem solid rgba(242, 184, 111, 0.8);
  border-radius: 0.2rem;
  color: #f2b86f;
  font-size: 0.22rem;
  font-weight: 900;
}

.vip-badge i {
  width: 0.16rem;
  height: 0.16rem;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.profile-title {
  margin: 0.15rem 0 0;
  background: linear-gradient(270deg, #ffcd9f 0%, #fff5e9fc 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 0.21rem;
  line-height: 0.28rem;
  letter-spacing: 0.11rem;
}

.profile-desc {
  margin: 0.28rem 0 0;
  color: rgba(234, 211, 190, 0.65);
  font-size: 0.24rem;
  line-height: 0.32rem;
}

.chevron {
  display: block;
  width: 0.18rem;
  height: 0.18rem;
  border-top: 0.025rem solid rgba(238, 205, 175, 0.75);
  border-right: 0.025rem solid rgba(238, 205, 175, 0.75);
  transform: rotate(45deg);
}

.stats-card {
  height: 1.48rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  margin-top: 0.52rem;
  border-radius: 0.18rem;
  background:
    radial-gradient(circle at 6.4rem 1.3rem, rgba(255, 136, 89, 0.48), transparent 0.7rem),
    linear-gradient(180deg, rgba(61, 43, 33, 0.76), rgba(35, 26, 20, 0.88));
}

.stats-card div {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stats-card div + div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.16rem;
  width: 0.01rem;
  height: 0.72rem;
  background: rgba(215, 174, 145, 0.42);
}

.stats-card strong {
  font-size: 0.43rem;
  line-height: 0.55rem;
  font-weight: 500;
  color: #fff4e6;
}

.stats-card span {
  font-size: 0.24rem;
  line-height: 0.32rem;
  color: #d1b199;
}

.cabinet-card {
  position: relative;
  height: 2.9rem;
  margin-top: 0.32rem;
  overflow: hidden;
  border-radius: 0.18rem;
  background: url("./assets/jiagui.png") center / cover no-repeat;
}

.cabinet-copy {
  position: relative;
  z-index: 1;
  padding: 0.57rem 0 0 0.42rem;
}

.cabinet-copy h2 {
  margin: 0;
  font-size: 0.4rem;
  line-height: 0.52rem;
  font-weight: 900;
  background: linear-gradient(270deg, #ffcd9f 0%, #fff5e9fc 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.cabinet-copy p {
  margin: 0.12rem 0 0;
  font-size: 0.24rem;
  color: rgba(230, 207, 188, 0.72);
}

.cabinet-copy div {
  display: flex;
  align-items: center;
  gap: 0.18rem;
  margin-top: 0.56rem;
}

.cabinet-copy strong {
  font-size: 0.55rem;
  line-height: 0.6rem;
  font-weight: 400;
  color: #fff6ea;
}

.cabinet-copy span {
  padding-left: 0.19rem;
  border-left: 0.01rem solid rgba(215, 174, 145, 0.44);
  font-size: 0.22rem;
  line-height: 0.28rem;
  color: #c7915c;
}

.cabinet-card .chevron {
  position: absolute;
  right: 0.35rem;
  top: 0.6rem;
}

.cabinet-icon {
  position: absolute;
  right: 0.46rem;
  bottom: 0.5rem;
  width: 0.47rem;
  height: 0.47rem;
  border: 0.035rem solid #efb76f;
  border-radius: 0.06rem;
}

.cabinet-icon::before,
.cabinet-icon::after {
  content: "";
  position: absolute;
  left: -0.035rem;
  right: -0.035rem;
  height: 0.035rem;
  background: #efb76f;
}

.cabinet-icon::before { top: 0.12rem; }
.cabinet-icon::after { bottom: 0.1rem; }

.quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.22rem;
  margin-top: 0.36rem;
}

.quick-card {
  height: 1.25rem;
  display: grid;
  grid-template-columns: 0.48rem auto auto 0.16rem;
  column-gap: 0.18rem;
  align-items: center;
  padding: 0 0.23rem 0 0.32rem;
  border-radius: 0.18rem;
  background:
    radial-gradient(circle at 3.1rem 1.1rem, rgba(255, 126, 82, 0.26), transparent 0.65rem),
    linear-gradient(180deg, rgba(56, 40, 31, 0.84), rgba(30, 22, 16, 0.9));
}

.quick-card span,
.menu-card span {
  color: #f4e1ca;
  font-size: 0.27rem;
  font-weight: 700;
}

.quick-card em {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.64rem;
  height: 0.28rem;
  border-radius: 0.14rem;
  background: #ff9995;
  color: #4d1f1b;
  font-size: 0.13rem;
  font-style: normal;
  font-weight: 900;
}

.menu-card {
  margin-top: 0.35rem;
  overflow: hidden;
  border-radius: 0.18rem;
  background: linear-gradient(180deg, rgba(44, 33, 25, 0.88), rgba(29, 23, 18, 0.92));
}

.menu-card a {
  height: 1.02rem;
  display: grid;
  grid-template-columns: 0.48rem 1fr 0.18rem;
  align-items: center;
  column-gap: 0.28rem;
  padding: 0 0.34rem;
}

.menu-card a + a {
  border-top: 0.01rem solid rgba(150, 107, 77, 0.28);
}

.quick-card i,
.menu-card i {
  position: relative;
  width: 0.42rem;
  height: 0.42rem;
  display: block;
  color: #efb76f;
}

.icon-bell::before,
.icon-bell::after,
.icon-clock::before,
.icon-clock::after,
.icon-post::before,
.icon-note::before,
.icon-note::after,
.icon-star::before,
.icon-gear::before,
.logout-btn i::before,
.logout-btn i::after {
  content: "";
  position: absolute;
}

.icon-bell::before {
  inset: 0.07rem 0.08rem 0.09rem;
  border: 0.03rem solid currentColor;
  border-bottom: 0;
  border-radius: 0.2rem 0.2rem 0.06rem 0.06rem;
}

.icon-bell::after {
  left: 0.13rem;
  bottom: 0.04rem;
  width: 0.16rem;
  height: 0.03rem;
  background: currentColor;
  box-shadow: 0.06rem -0.34rem 0 -0.02rem currentColor;
}

.icon-clock::before {
  inset: 0.04rem;
  border: 0.035rem solid currentColor;
  border-radius: 50%;
}

.icon-clock::after {
  left: 0.2rem;
  top: 0.1rem;
  width: 0.035rem;
  height: 0.16rem;
  background: currentColor;
  transform-origin: bottom;
  transform: rotate(-45deg);
}

.icon-post::before {
  inset: 0.07rem 0.05rem 0.09rem;
  border: 0.035rem solid currentColor;
  border-radius: 0.05rem;
}

.icon-note::before {
  left: 0.05rem;
  top: 0.09rem;
  width: 0.24rem;
  height: 0.035rem;
  background: currentColor;
  box-shadow: 0 0.11rem 0 currentColor, 0 0.22rem 0 currentColor;
}

.icon-note::after {
  right: 0.03rem;
  bottom: 0.05rem;
  width: 0.16rem;
  height: 0.035rem;
  background: currentColor;
  transform: rotate(-38deg);
}

.icon-star::before {
  inset: 0.03rem;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 92%, 50% 70%, 21% 92%, 32% 56%, 2% 35%, 39% 35%);
}

.icon-gear::before {
  inset: 0.04rem;
  border: 0.04rem solid currentColor;
  border-radius: 50%;
  box-shadow: 0 -0.13rem 0 -0.08rem currentColor, 0 0.13rem 0 -0.08rem currentColor, 0.13rem 0 0 -0.08rem currentColor, -0.13rem 0 0 -0.08rem currentColor;
}

.logout-btn {
  width: 100%;
  height: 0.99rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  margin-top: 0.39rem;
  border: 0.015rem solid #df7d67;
  border-radius: 0.18rem;
  color: #ff8f82;
  font-size: 0.26rem;
  font-weight: 800;
  background: rgba(25, 19, 15, 0.42);
}

.logout-btn i {
  position: relative;
  width: 0.34rem;
  height: 0.34rem;
}

.logout-btn i::before {
  left: 0.03rem;
  top: 0.05rem;
  width: 0.19rem;
  height: 0.24rem;
  border: 0.03rem solid currentColor;
  border-radius: 0.04rem;
}

.logout-btn i::after {
  right: 0;
  top: 0.15rem;
  width: 0.18rem;
  height: 0.03rem;
  background: currentColor;
  box-shadow: 0.08rem 0 0 currentColor;
}