/* Membership center aligned with task and earnings pages. */
#accountView #accountMembershipSheet .account-core-card {
  overflow-y: auto;
  background: #f5f7fc;
}

#accountView #accountMembershipSheet .account-core-head {
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid rgba(72, 87, 145, 0.10);
  background: rgba(249, 250, 255, 0.94);
  box-shadow: 0 8px 24px rgba(42, 54, 99, 0.06);
  backdrop-filter: blur(18px);
}

#accountView #membershipCard.membership-card.account-core-content {
  display: block;
  margin: 0;
  padding: 14px 12px 28px;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 9% 0, rgba(89, 124, 235, 0.10), transparent 29%),
    radial-gradient(circle at 94% 16%, rgba(126, 86, 209, 0.08), transparent 27%),
    #f5f7fc;
  box-shadow: none;
  overflow: visible;
}

#accountView #membershipCard.membership-card::after { display: none; }

#accountView #membershipCard .membership-card-head {
  min-height: 135px;
  align-items: center;
  padding: 19px;
  border-radius: 23px;
  background:
    radial-gradient(circle at 88% 15%, rgba(255,255,255,.17), transparent 28%),
    linear-gradient(135deg, #4d74e5 0%, #615fd8 55%, #7655cd 100%);
  box-shadow: 0 18px 36px rgba(75, 79, 190, 0.23);
}

#accountView #membershipCard .membership-kicker {
  height: 23px;
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.86);
  font-size: 9px;
}

#accountView #membershipCard .membership-card-head h3 {
  margin: 10px 0 5px;
  color: #fff;
  font-size: 24px;
  font-weight: 880;
}

#accountView #membershipCard .membership-card-head p {
  color: rgba(255,255,255,.70);
  font-size: 10px;
}

#accountView #membershipCard .membership-badge {
  min-width: 62px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

#accountView #membershipCard .membership-badge.active {
  background: linear-gradient(135deg, #ffd881, #efa44c);
  color: #6f4714;
  box-shadow: 0 8px 18px rgba(225, 151, 60, .24);
}

#accountView #membershipCard .membership-daily {
  min-height: 76px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(222, 153, 60, .17);
  border-radius: 18px;
  background: linear-gradient(145deg, #fffaf0, #fff3dd);
  box-shadow: 0 11px 26px rgba(132, 88, 30, .07);
}

#accountView #membershipCard .membership-daily span { color: #a57437; font-size: 9px; font-weight: 800; }
#accountView #membershipCard .membership-daily strong { color: #2d3546; font-size: 14px; font-weight: 850; }
#accountView #membershipCard .membership-daily small { color: #8e806d; font-size: 9px; }
#accountView #membershipCard .membership-daily button {
  min-width: 76px;
  border: 0;
  background: linear-gradient(135deg, #f29a3c, #e9703d);
  box-shadow: 0 8px 18px rgba(220, 104, 49, .18);
}

#accountView #membershipCard .membership-daily button:disabled {
  background: rgba(206, 148, 67, .12);
  color: #a47a42;
  box-shadow: none;
}

#accountView .membership-benefit-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 11px;
}

#accountView .membership-benefit-strip > span {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  padding: 11px 4px 9px;
  border: 1px solid rgba(72,88,144,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 9px 22px rgba(42,54,94,.05);
}

#accountView .membership-benefit-strip i {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 11px;
  background: #edf3ff;
  color: #5570cf;
  font-size: 10px;
  font-weight: 900;
  font-style: normal;
}

#accountView .membership-benefit-strip > span:nth-child(2) i { background: #fff1e6; color: #d57738; }
#accountView .membership-benefit-strip > span:nth-child(3) i { background: #eaf7f3; color: #278a74; }
#accountView .membership-benefit-strip > span:nth-child(4) i { background: #f3edff; color: #7355c8; }
#accountView .membership-benefit-strip strong { overflow: hidden; max-width: 100%; color: #354157; font-size: 9px; font-weight: 820; text-overflow: ellipsis; white-space: nowrap; }
#accountView .membership-benefit-strip small { color: #98a1af; font-size: 7px; white-space: nowrap; }

#accountView #membershipCard .membership-plans {
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

#accountView #membershipCard .membership-plans::before {
  content: "选择会员方案";
  color: #263249;
  font-size: 15px;
  font-weight: 860;
  margin: 2px 2px 0;
}

#accountView #membershipCard .membership-plan {
  position: relative;
  gap: 10px;
  padding: 15px;
  border: 1px solid rgba(72,88,144,.12);
  border-radius: 19px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 11px 26px rgba(42,54,94,.065);
}

#accountView #membershipCard .membership-plan.featured {
  border-color: rgba(105,85,202,.23);
  background: linear-gradient(145deg, #fff, #f7f4ff);
}

#accountView #membershipCard .membership-plan.featured::after {
  content: "推荐";
  position: absolute;
  top: 0;
  right: 14px;
  padding: 4px 9px;
  border-radius: 0 0 9px 9px;
  background: linear-gradient(135deg, #6f66db, #8355ca);
  color: #fff;
  font-size: 8px;
  font-weight: 850;
}

#accountView #membershipCard .membership-plan.current {
  border-color: rgba(224, 150, 57, .32);
  background: linear-gradient(145deg, #fffaf0, #fff);
  box-shadow: 0 11px 26px rgba(135,91,31,.075);
}

#accountView .membership-plan-copy > span:first-child {
  min-height: 20px;
  background: #eef3ff;
  color: #5570cf;
}

#accountView .membership-plan-copy > strong { margin: 7px 0 4px; color: #29354a; font-size: 16px; font-weight: 860; }
#accountView .membership-plan-copy > small { color: #8893a5; font-size: 9px; }
#accountView #membershipCard .membership-plan-tags { gap: 5px; }
#accountView #membershipCard .membership-plan-tags span { padding: 5px 7px; background: #f4f6fa; color: #7d8798; font-size: 8px; }

#accountView .membership-plan-footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid #edf0f5;
}

#accountView .membership-plan-price { display: flex; align-items: baseline; gap: 4px; }
#accountView .membership-plan-price strong { margin: 0; color: #df7838; font-size: 23px; line-height: 1; font-weight: 900; }
#accountView .membership-plan-price small { color: #9aa3b1; font-size: 8px; }
#accountView #membershipCard .membership-plan-footer button {
  width: auto;
  min-width: 90px;
  min-height: 34px;
  border: 0;
  background: linear-gradient(135deg, #5276df, #7059ce);
  box-shadow: 0 8px 18px rgba(76,81,185,.18);
}

#accountView .membership-confirm-card {
  border: 1px solid rgba(93, 86, 177, .14);
  border-radius: 23px;
  background: #fafbff;
  box-shadow: 0 24px 60px rgba(34,42,81,.20);
}

#accountView .membership-confirm-actions .primary,
#accountView #membershipConfirmPayBtn {
  background: linear-gradient(135deg, #5276df, #7059ce) !important;
}

html.theme-dark #accountView #accountMembershipSheet .account-core-card,
html.theme-dark #accountView #membershipCard.membership-card.account-core-content { background: #090d14 !important; }
html.theme-dark #accountView #accountMembershipSheet .account-core-head { background: rgba(10,15,24,.96) !important; border-color: rgba(96,165,250,.16) !important; }
html.theme-dark #accountView #membershipCard .membership-card-head { background: linear-gradient(135deg, #18345d, #302857); box-shadow: none; }
html.theme-dark #accountView #membershipCard .membership-daily { border-color: rgba(217,169,87,.18); background: linear-gradient(145deg, #211b12, #17140f); box-shadow: none; }
html.theme-dark #accountView .membership-benefit-strip > span,
html.theme-dark #accountView #membershipCard .membership-plan { border-color: rgba(96,165,250,.15); background: #101a29; box-shadow: none; }
html.theme-dark #accountView .membership-benefit-strip strong,
html.theme-dark #accountView .membership-plan-copy > strong,
html.theme-dark #accountView #membershipCard .membership-plans::before { color: #eef5ff !important; }
html.theme-dark #accountView .membership-plan-footer { border-top-color: rgba(96,165,250,.12); }

@media (max-width: 360px) {
  #accountView #membershipCard.membership-card.account-core-content { padding-inline: 9px; }
  #accountView .membership-benefit-strip { gap: 5px; }
  #accountView .membership-benefit-strip > span { padding-inline: 2px; }
  #accountView .membership-benefit-strip strong { font-size: 8px; }
}

/* Membership center body edge expansion v447 */
#accountView #membershipCard.membership-card.account-core-content {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  box-sizing: border-box !important;
}

#accountView #membershipCard :is(.membership-card-head, .membership-daily, .membership-benefit-strip, .membership-plans, .membership-plan) {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

#accountView #membershipCard .membership-benefit-strip {
  gap: 6px !important;
}