/* tsyl688「我的」页 — 完整对齐（v107）基准 428px / :root 紫金主题 */

.tsyl-profile-page {
  position: relative;
  min-height: 100%;
  padding: 0 0 min(18.667vw, 79.893px);
  color: #fff;
  /* 背景由外层 shell 提供，避免叠两层变暗 */
  background: transparent;
}

/* 顶部头图区 — 对齐 tsyl .top-bg + .top padding */
.tsyl-top-bg {
  background: url(/assets/tsyl-profile/top-bg.webp) no-repeat top;
  background-size: 100% auto;
}

.tsyl-user-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: min(17.067vw, 73.045px) min(6.4vw, 27.392px) min(6.4vw, 27.392px);
}

.tsyl-avatar {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(14.933vw, 63.915px);
  height: min(14.933vw, 63.915px);
  border-radius: 50%;
  border: min(0.533vw, 2.283px) solid hsla(0, 0%, 100%, 0.12);
  background: url(/assets/tsyl-profile/avatar1.png) center / 100% 100% no-repeat;
  overflow: hidden;
}

.tsyl-username {
  margin-top: min(2.133vw, 9.131px);
  font-size: min(4.8vw, 20.544px);
  font-weight: 900;
  color: #fff;
  text-align: center;
}

.tsyl-user-data {
  margin-top: min(1.6vw, 6.848px);
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: min(2.133vw, 9.131px);
  flex-wrap: wrap;
}

.tsyl-info-pill {
  height: min(6.4vw, 27.392px);
  line-height: min(6.4vw, 27.392px);
  padding: 0 min(2.667vw, 11.413px);
  display: inline-flex;
  align-items: center;
  gap: min(1.067vw, 4.565px);
  border-radius: min(13.333vw, 57.067px);
  background: hsla(0, 0%, 100%, 0.06);
  border: min(0.133vw, 0.571px) solid hsla(0, 0%, 100%, 0.12);
  font-size: min(3.733vw, 15.979px);
  color: hsla(0, 0%, 100%, 0.65);
  font-weight: 500;
}

.tsyl-pill-icon {
  width: min(4.267vw, 18.261px);
  height: min(4.267vw, 18.261px);
  margin-left: min(1.6vw, 6.848px);
}

.tsyl-usdt-icon {
  width: min(3.2vw, 13.696px);
  height: min(3.2vw, 13.696px);
  margin-right: min(1.067vw, 4.565px);
}

.tsyl-balance-text {
  color: #ffab33;
  font-weight: 700;
  font-size: min(3.733vw, 15.979px);
}

.tsyl-refresh-icon {
  margin-left: min(1.6vw, 6.848px);
  width: min(4.267vw, 18.261px);
  height: min(4.267vw, 18.261px);
  opacity: 0.55;
}

/* 充值 / 提现 — 对齐 .recharge-reflect-span[data-v-263a86d0] */
.tsyl-recharge-row {
  margin: 0 min(6.4vw, 27.392px) min(3.2vw, 13.696px);
}

.tsyl-recharge-span {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tsyl-recharge-btn,
.tsyl-reflect-btn {
  width: min(42.133vw, 180.331px);
  height: min(10.667vw, 45.653px);
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(3.733vw, 15.979px);
  font-weight: 600;
  color: #fff;
  background: url(/assets/tsyl-profile/btn-recharge.webp) center / 100% 100% no-repeat;
}

.tsyl-reflect-btn {
  background: url(/assets/tsyl-profile/btn-withdraw.webp) center / 100% 100% no-repeat;
}

.tsyl-recharge-icon,
.tsyl-reflect-icon {
  width: min(4.267vw, 18.261px);
  height: min(4.267vw, 18.261px);
  margin-right: min(2.667vw, 11.413px);
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.tsyl-recharge-icon {
  background-image: url(/assets/tsyl-profile/icons/btn-recharge-icon.svg);
}

.tsyl-reflect-icon {
  background-image: url(/assets/tsyl-profile/icons/btn-withdraw-icon.svg);
}

/* VIP 会员卡 */
.tsyl-vip-wrap {
  margin: 0;
}

.tsyl-vipbg {
  width: min(87.2vw, 373.216px);
  height: min(25.6vw, 109.568px);
  margin: 0 min(6.4vw, 27.392px);
  background: url(/assets/tsyl-profile/vip-card-bg.png) center / 100% 100% no-repeat;
  border-radius: min(2.133vw, 9.131px);
  overflow: hidden;
  box-sizing: border-box;
}

.tsyl-vip-context {
  padding: min(4vw, 17.12px) min(4.267vw, 18.261px);
  height: 100%;
  box-sizing: border-box;
}

.tsyl-vip-title-row {
  display: flex;
  align-items: center;
}

.tsyl-vip-title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: min(4.8vw, 20.544px);
  line-height: min(5.333vw, 22.827px);
  font-weight: 400;
  background-image: linear-gradient(270deg, #ffe0aa 2%, #fff6da 56%, #ffe0aa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tsyl-vip-detail-pill {
  margin-left: auto;
  padding: 0 min(2.133vw, 9.131px);
  height: min(6.4vw, 27.392px);
  line-height: min(6.4vw, 27.392px);
  border-radius: min(13.333vw, 57.067px);
  border: min(0.133vw, 0.571px) solid hsla(0, 0%, 100%, 0.08);
  background-image: linear-gradient(180deg, rgba(64, 47, 71, 0.12), rgba(252, 245, 255, 0.12));
  color: #fff;
  font-size: min(3.2vw, 13.696px);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.tsyl-vip-span {
  display: flex;
  align-items: center;
  margin-top: min(3.2vw, 13.696px);
}

/* 进度条：tsyl 用 flex 行内 indicator，不用 absolute */
.tsyl-vip-progress {
  display: flex;
  align-items: center;
  height: min(1.6vw, 6.848px);
  width: min(76vw, 325.28px);
  max-width: 100%;
  flex: 1;
  min-width: 0;
  background: hsla(0, 0%, 100%, 0.1);
  border-radius: min(0.933vw, 3.995px);
  position: relative;
}

.tsyl-vip-progress-fill {
  height: min(1.6vw, 6.848px);
  border-radius: min(0.933vw, 3.995px);
  background: linear-gradient(-85deg, #240bfd, #b42dff);
  flex-shrink: 0;
}

.tsyl-vip-indicator {
  margin-left: max(-2.133vw, -9.131px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(4.267vw, 18.261px);
  height: min(4.267vw, 18.261px);
  border-radius: 50%;
  background: rgba(163, 106, 255, 0.4);
  box-shadow: 0 min(0.267vw, 1.141px) min(0.533vw, 2.283px) rgba(0, 0, 0, 0.2);
  z-index: 2;
  flex-shrink: 0;
}

.tsyl-vip-indicator-inner {
  width: min(2.133vw, 9.131px);
  height: min(2.133vw, 9.131px);
  border-radius: 50%;
  background: #fff;
}

.tsyl-vip-next {
  margin-left: min(3.2vw, 13.696px);
  font-size: min(3.2vw, 13.696px);
  color: #fff;
  flex-shrink: 0;
  line-height: min(4.267vw, 18.261px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.tsyl-vip-tips {
  margin-top: min(2.133vw, 9.131px);
  font-size: min(3.2vw, 13.696px);
  color: hsla(0, 0%, 100%, 0.65);
  line-height: 1.35;
  margin-bottom: 0;
  font-weight: 400;
}

/* 九宫格 */
.tsyl-menu-span {
  margin: min(3.2vw, 13.696px) min(3.733vw, 15.979px) 0;
  border-radius: min(4.267vw, 18.261px);
  background: url(/assets/tsyl-profile/bg_card_func.webp) center / 100% 100% no-repeat;
  padding: 0 0 min(4.267vw, 18.261px) min(2.133vw, 9.131px);
  position: relative;
  overflow: hidden;
}

.tsyl-light-line {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: min(0.267vw, 1.141px);
  background: linear-gradient(270deg, hsla(0, 0%, 100%, 0) 10%, #bdbaba 55%, hsla(0, 0%, 100%, 0));
  pointer-events: none;
}

.tsyl-menu-grid {
  display: flex;
  flex-wrap: wrap;
}

.tsyl-menu-item {
  width: min(21.333vw, 91.307px);
  height: min(19.2vw, 82.176px);
  margin-right: min(1.067vw, 4.565px);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  text-decoration: none;
}

.tsyl-mene-icon-bg {
  margin: min(4.267vw, 18.261px) min(5.867vw, 25.109px) min(1.6vw, 6.848px);
  height: min(9.6vw, 41.088px);
  width: min(9.6vw, 41.088px);
  border-radius: min(3.2vw, 13.696px);
  background-image: linear-gradient(180deg, rgba(64, 47, 71, 0.08), rgba(252, 245, 255, 0.08));
  border: min(0.133vw, 0.571px) solid hsla(0, 0%, 100%, 0.06);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tsyl-menu-icon {
  margin: min(1.6vw, 6.848px);
  width: min(6.4vw, 27.392px);
  height: min(6.4vw, 27.392px);
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.tsyl-menu-label {
  margin-top: min(0.267vw, 1.141px);
  font-size: min(3.2vw, 13.696px);
  color: hsla(0, 0%, 100%, 0.75);
  text-align: center;
  font-weight: 400;
  line-height: 1.2;
}

/* 邀请 — 左侧留出角色图空间 */
.tsyl-invite {
  margin: min(3.2vw, 13.696px) min(3.733vw, 15.979px) 0;
  height: min(17.6vw, 75.328px);
  border-radius: min(4.267vw, 18.261px);
  background: url(/assets/tsyl-profile/invite-bg.webp) no-repeat center;
  background-size: 100% auto;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.tsyl-invite-title {
  display: flex;
  align-items: center;
  margin: min(3.2vw, 13.696px) min(2.667vw, 11.413px) 0 min(19.2vw, 82.176px);
  gap: min(1.067vw, 4.565px);
}

.tsyl-invite-title p {
  font-size: min(3.733vw, 15.979px);
  font-weight: 700;
  background-image: linear-gradient(90deg, #f09542, #fff 86%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: min(5.867vw, 25.109px);
  margin: 0;
}

.tsyl-invite-title button {
  margin-left: min(1.067vw, 4.565px);
  font-size: min(2.933vw, 12.555px);
  color: hsla(0, 0%, 100%, 0.65);
  background: transparent;
  border: 0;
  white-space: nowrap;
  line-height: min(5.867vw, 25.109px);
  font-weight: 400;
}

.tsyl-invite-row {
  margin: 0 min(2.667vw, 11.413px) min(2.133vw, 9.131px) min(19.2vw, 82.176px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: min(5.333vw, 22.827px);
  gap: min(1.6vw, 6.848px);
}

.tsyl-invite-link {
  flex: 1;
  min-width: 0;
  width: min(61.6vw, 263.648px);
  height: min(5.333vw, 22.827px);
  line-height: min(5.333vw, 22.827px);
  font-size: min(3.2vw, 13.696px);
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tsyl-invite-copy {
  width: min(14.933vw, 63.915px);
  height: min(5.333vw, 22.827px);
  line-height: min(5.333vw, 22.827px);
  text-align: center;
  font-size: min(3.2vw, 13.696px);
  color: #fff;
  border-radius: min(1.6vw, 6.848px);
  background: url(/assets/tsyl-profile/btn-invite-copy.webp) center / 100% 100% no-repeat;
  border: 0;
  flex-shrink: 0;
  margin-left: min(1.6vw, 6.848px);
  font-weight: 400;
}

/* 其他功能 */
.tsyl-user-tools {
  margin: min(3.2vw, 13.696px) min(3.733vw, 15.979px) 0;
  background: url(/assets/tsyl-profile/bg_card_other.webp) center / 100% 100% no-repeat;
  border-radius: min(4.267vw, 18.261px);
  overflow: hidden;
  padding: min(2.667vw, 11.413px);
  position: relative;
}

.tsyl-tool-row {
  display: flex;
  align-items: center;
  width: 100%;
  height: min(10.667vw, 45.653px);
  padding: 0;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: min(3.733vw, 15.979px);
  font-weight: 400;
}

.tsyl-tool-icon {
  width: min(6.4vw, 27.392px);
  height: min(6.4vw, 27.392px);
  border-radius: 50%;
  margin-right: min(2.667vw, 11.413px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsla(0, 0%, 100%, 0.06);
  flex-shrink: 0;
}

.tsyl-tool-label {
  flex: 1;
  text-align: left;
}

.tsyl-tool-right {
  margin-right: min(2.133vw, 9.131px);
  font-size: min(3.2vw, 13.696px);
  color: hsla(0, 0%, 100%, 0.4);
}

.tsyl-tool-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: min(5.333vw, 22.827px);
  width: min(5.333vw, 22.827px);
  background: hsla(0, 0%, 100%, 0.12);
  border-radius: min(1.147vw, 4.908px);
  color: #fff;
  font-size: min(2.667vw, 11.413px);
  flex-shrink: 0;
}

.tsyl-logout {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: min(14.667vw, 62.773px);
  font-size: min(3.733vw, 15.979px);
  color: #fe595b;
  letter-spacing: min(0.267vw, 1.141px);
  background: transparent;
  border: 0;
  font-weight: 400;
}