/* Account page visual refinement. Structure and interaction remain unchanged. */
#appPanel #accountView {
  --profile-ref-bg: #f3f5f9;
  --profile-ref-card: #ffffff;
  --profile-ref-text: #1c1d22;
  --profile-ref-dim: #8a8c96;
  --profile-ref-faint: #b7b9c2;
  --profile-ref-blue: #4c6fff;
  --profile-ref-line: #ecedf2;
  width: calc(100% + 20px) !important;
  max-width: calc(100% + 20px) !important;
  margin: 0 -10px !important;
  padding: 16px 12px 108px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  background: var(--profile-ref-bg) !important;
}

#appPanel #accountView .account-card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 288px !important;
  margin: 0 !important;
  padding: 24px 20px 22px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: linear-gradient(150deg, #765cff 0%, #994dff 47%, #c14fdf 100%) !important;
  box-shadow: 0 12px 28px rgba(111, 76, 221, 0.18) !important;
  color: #ffffff !important;
}

#appPanel #accountView .account-card::before,
#appPanel #accountView .account-card::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

#appPanel #accountView .account-card::before {
  top: -56px !important;
  right: 30px !important;
  width: 132px !important;
  height: 132px !important;
}

#appPanel #accountView .account-card::after {
  right: -62px !important;
  bottom: -86px !important;
  width: 236px !important;
  height: 236px !important;
}

#appPanel #accountView .account-card-bg {
  display: none !important;
}

#appPanel #accountView .account-user {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: 66px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto !important;
  align-items: start !important;
  gap: 0 16px !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#appPanel #accountView .account-user .avatar,
#appPanel #accountView .account-user .avatar-upload {
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  width: 66px !important;
  height: 66px !important;
  min-width: 66px !important;
  min-height: 66px !important;
  margin: 0 !important;
  border: 3px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

#appPanel #accountView .account-user .avatar span,
#appPanel #accountView .account-user .avatar-upload span {
  color: #ffffff !important;
  font-size: 25px !important;
  font-weight: 500 !important;
}

#appPanel #accountView .account-user .avatar-image {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

#appPanel #accountView .account-user-main {
  display: contents !important;
}

#appPanel #accountView .account-name-row {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  margin: 1px 42px 0 0 !important;
}

#appPanel #accountView .account-name-row h2 {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#appPanel #accountView .account-name-row .profile-edit-button {
  width: auto !important;
  min-width: 38px !important;
  height: 23px !important;
  min-height: 23px !important;
  padding: 0 9px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: 23px !important;
}

#appPanel #accountView #accountPhone {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 4px 0 0 !important;
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

#appPanel #accountView .account-level-summary {
  grid-column: 2 !important;
  grid-row: 3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin: 8px 0 0 !important;
}

#appPanel #accountView .account-level-summary > strong {
  flex: 0 0 auto !important;
  padding: 3px 10px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #ffdc90, #ffb43c) !important;
  color: #5a3a00 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

#appPanel #accountView .account-level-summary > span {
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#appPanel #accountView .account-invite-code {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 42px !important;
  margin: 16px 0 0 !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}

#appPanel #accountView .account-invite-code > span {
  flex: 0 0 auto !important;
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
}

#appPanel #accountView .account-invite-code > strong {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#appPanel #accountView .account-invite-code > button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 48px !important;
  height: 27px !important;
  min-height: 27px !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

#appPanel #accountView .account-recharge-zone {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-height: 72px !important;
  margin: 18px 0 0 !important;
  padding: 16px 0 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.19) !important;
  background: transparent !important;
}

#appPanel #accountView .account-recharge-zone #balanceLabel.account-top-balance {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: baseline !important;
  gap: 7px !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

#appPanel #accountView .account-recharge-zone #balanceLabel.account-top-balance span {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 15px !important;
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

#appPanel #accountView .account-recharge-zone #balanceLabel.account-top-balance b {
  color: #ffffff !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

#appPanel #accountView .account-recharge-zone #balanceLabel.account-top-balance em {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 12.5px !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

#appPanel #accountView .recharge-shortcut {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 76px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

#appPanel #accountView .account-settings-button {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

#appPanel #accountView .account-settings-button svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
}

#appPanel #accountView .account-hub {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#appPanel #accountView .account-hub-title {
  margin: 22px 4px 12px !important;
  color: var(--profile-ref-dim) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

#appPanel #accountView .account-hub-primary,
#appPanel #accountView .account-hub-secondary {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#appPanel #accountView .account-hub-secondary {
  margin-top: 12px !important;
}

#appPanel #accountView .account-hub .account-hub-card,
#appPanel #accountView .account-hub-secondary button {
  position: relative !important;
  display: flex !important;
  min-width: 0 !important;
  min-height: 126px !important;
  margin: 0 !important;
  padding: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--profile-ref-line) !important;
  border-radius: 18px !important;
  background: var(--profile-ref-card) !important;
  background-image: none !important;
  box-shadow: 0 3px 12px rgba(20, 20, 30, 0.045) !important;
  color: var(--profile-ref-text) !important;
  transform: none !important;
}

#appPanel #accountView .account-hub .account-hub-card {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  text-align: left !important;
}

#appPanel #accountView .account-hub .earnings-entry,
#appPanel #accountView .account-hub .recharge-center-entry,
#appPanel #accountView .account-hub-secondary button:nth-child(3) {
  grid-column: 1 / -1 !important;
  min-height: 78px !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
}

#appPanel #accountView .account-hub .account-hub-card::before,
#appPanel #accountView .account-hub-secondary button::before {
  display: none !important;
}

#appPanel #accountView .account-hub .account-hub-card::after,
#appPanel #accountView .account-hub-secondary button::after {
  content: "›" !important;
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--profile-ref-faint) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

#appPanel #accountView .account-hub .earnings-entry::after,
#appPanel #accountView .account-hub .recharge-center-entry::after,
#appPanel #accountView .account-hub-secondary button:nth-child(3)::after {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

#appPanel #accountView .account-hub-icon,
#appPanel #accountView .account-hub .account-hub-icon,
#appPanel #accountView .account-hub-secondary .account-hub-icon {
  display: flex !important;
  flex: 0 0 38px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 0 13px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #7c96ff, #4c6fff) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

#appPanel #accountView .account-hub .earnings-entry .account-hub-icon,
#appPanel #accountView .account-hub .recharge-center-entry .account-hub-icon,
#appPanel #accountView .account-hub-secondary button:nth-child(3) .account-hub-icon {
  margin: 0 !important;
}

#appPanel #accountView .account-hub .earnings-entry .account-hub-icon {
  background: linear-gradient(135deg, #7fd8c8, #3fb89e) !important;
}

#appPanel #accountView .account-hub .recharge-center-entry .account-hub-icon {
  background: linear-gradient(135deg, #9b89ff, #765cff) !important;
}

#appPanel #accountView .account-hub-secondary button:nth-child(3) .account-hub-icon {
  background: linear-gradient(135deg, #71c8ff, #4c8dff) !important;
}

#appPanel #accountView .account-hub-icon svg {
  width: 19px !important;
  height: 19px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
}

#appPanel #accountView .account-hub-card > span:nth-child(2) {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  text-align: left !important;
}

#appPanel #accountView .account-hub .account-hub-card strong,
#appPanel #accountView .account-hub-secondary strong {
  display: block !important;
  max-width: calc(100% - 8px) !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
  color: var(--profile-ref-text) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

#appPanel #accountView .account-hub .account-hub-card small,
#appPanel #accountView .account-hub .account-hub-card em {
  display: block !important;
  max-width: 100% !important;
  margin: 4px 0 0 !important;
  overflow-wrap: anywhere !important;
  color: var(--profile-ref-dim) !important;
  font-size: 10.5px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

#appPanel #accountView .account-hub-secondary button {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  text-align: left !important;
}

#appPanel #accountView .account-hub-secondary button:nth-child(3) {
  flex-direction: row !important;
  justify-content: flex-start !important;
}

html.theme-dark #appPanel #accountView {
  --profile-ref-bg: #090b10;
  --profile-ref-card: #121720;
  --profile-ref-text: #f3f5f8;
  --profile-ref-dim: #9098a7;
  --profile-ref-faint: #687080;
  --profile-ref-line: rgba(255, 255, 255, 0.08);
}

html.theme-dark #appPanel #accountView .account-card {
  background: linear-gradient(150deg, #6047dc 0%, #7e3fe2 48%, #9c3fbd 100%) !important;
  box-shadow: none !important;
}

html.theme-dark #appPanel #accountView .account-hub,
html.theme-dark #appPanel #accountView .account-hub .account-hub-card,
html.theme-dark #appPanel #accountView .account-hub-secondary button {
  color: var(--profile-ref-text) !important;
}

html.theme-dark body #appPanel #accountView::before {
  display: none !important;
}

html.theme-dark body #appPanel #accountView .account-name-row h2,
html.theme-dark body #appPanel #accountView .account-name-row .profile-edit-button,
html.theme-dark body #appPanel #accountView #accountPhone,
html.theme-dark body #appPanel #accountView .account-level-summary > span,
html.theme-dark body #appPanel #accountView .account-invite-code > span,
html.theme-dark body #appPanel #accountView .account-invite-code > strong,
html.theme-dark body #appPanel #accountView .account-invite-code > button,
html.theme-dark body #appPanel #accountView .account-recharge-zone #balanceLabel.account-top-balance,
html.theme-dark body #appPanel #accountView .account-recharge-zone #balanceLabel.account-top-balance b,
html.theme-dark body #appPanel #accountView .account-recharge-zone #balanceLabel.account-top-balance em,
html.theme-dark body #appPanel #accountView .account-settings-button {
  color: #ffffff !important;
  -webkit-text-fill-color: currentColor !important;
}

html.theme-dark body #appPanel #accountView #accountPhone,
html.theme-dark body #appPanel #accountView .account-level-summary > span,
html.theme-dark body #appPanel #accountView .account-invite-code > span,
html.theme-dark body #appPanel #accountView .account-recharge-zone #balanceLabel.account-top-balance span,
html.theme-dark body #appPanel #accountView .account-recharge-zone #balanceLabel.account-top-balance em {
  color: rgba(255, 255, 255, 0.76) !important;
  -webkit-text-fill-color: currentColor !important;
}

html.theme-dark body #appPanel #accountView .account-name-row .profile-edit-button,
html.theme-dark body #appPanel #accountView .account-invite-code,
html.theme-dark body #appPanel #accountView .account-invite-code > button,
html.theme-dark body #appPanel #accountView .account-settings-button,
html.theme-dark body #appPanel #accountView .recharge-shortcut {
  border-color: transparent !important;
  background: rgba(255, 255, 255, 0.17) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
}

html.theme-dark body #appPanel #accountView .account-invite-code > strong {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.theme-dark body #appPanel #accountView .account-settings-button svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

html.theme-dark body #appPanel #accountView .account-level-summary > strong {
  border-color: transparent !important;
  background: linear-gradient(135deg, #ffdc90, #ffb43c) !important;
  color: #5a3a00 !important;
  -webkit-text-fill-color: #5a3a00 !important;
}

html.theme-dark body #appPanel #accountView .account-hub-title {
  color: #9098a7 !important;
  -webkit-text-fill-color: #9098a7 !important;
}

html.theme-dark body #appPanel #accountView .account-hub .account-hub-card,
html.theme-dark body #appPanel #accountView .account-hub-secondary button {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: #121720 !important;
  background-image: none !important;
  color: #f3f5f8 !important;
  box-shadow: none !important;
}

html.theme-dark body #appPanel #accountView .account-hub .account-hub-card strong,
html.theme-dark body #appPanel #accountView .account-hub-secondary strong {
  color: #f3f5f8 !important;
  -webkit-text-fill-color: #f3f5f8 !important;
}

html.theme-dark body #appPanel #accountView .account-hub .account-hub-card small,
html.theme-dark body #appPanel #accountView .account-hub .account-hub-card em {
  color: #9098a7 !important;
  -webkit-text-fill-color: #9098a7 !important;
}

html.theme-dark body #appPanel #accountView .account-hub-icon,
html.theme-dark body #appPanel #accountView .account-hub .account-hub-icon,
html.theme-dark body #appPanel #accountView .account-hub-secondary .account-hub-icon {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html.theme-dark body #appPanel #accountView .account-hub-icon svg {
  fill: none !important;
  stroke: #ffffff !important;
}

@media (max-width: 360px) {
  #appPanel #accountView {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  #appPanel #accountView .account-card {
    min-height: 278px !important;
    padding: 21px 17px 20px !important;
  }

  #appPanel #accountView .account-user {
    grid-template-columns: 60px minmax(0, 1fr) !important;
    gap: 0 13px !important;
  }

  #appPanel #accountView .account-user .avatar,
  #appPanel #accountView .account-user .avatar-upload {
    width: 60px !important;
    min-width: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
  }

  #appPanel #accountView .account-hub .account-hub-card,
  #appPanel #accountView .account-hub-secondary button {
    min-height: 120px !important;
    padding: 14px !important;
  }

  #appPanel #accountView .account-hub .earnings-entry,
  #appPanel #accountView .account-hub .recharge-center-entry,
  #appPanel #accountView .account-hub-secondary button:nth-child(3) {
    min-height: 74px !important;
  }
}