/* ================================================================
   Zaka 管理中心卡片增强
   1) 账户余额下沉到卡片底部并居中
   2) 卡片内新增可点击上传的头像
   ================================================================ */

/* 卡片改为纵向流式布局 */
#app .main-content .hero-card,
#app .hero-card {
  display: flex !important;
  flex-direction: column !important;
  padding: 16px 20px 18px !important;
  height: auto !important;
  min-height: 0 !important;
}

/* 账号 / 到期时间 → 卡片上部，右侧给头像留位 */
#app .hero-card > .hero-meta {
  order: 1 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  padding-right: 62px !important;
}

/* 「账户余额」标签 → 下移居中，带分割线 */
#app .hero-card > .hero-label {
  order: 2 !important;
  width: 100% !important;
  text-align: center !important;
  margin: 14px 0 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, .15) !important;
}

/* 余额数字 → 卡片最下方居中 */
#app .hero-card > .hero-balance {
  order: 3 !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 2px !important;
  letter-spacing: -.5px !important;
}

/* 卡片内头像（点击上传 / 更换） */
#app .hero-card > .zk-hero-avatar {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  cursor: pointer !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, .14) !important;
  border: 2px solid rgba(255, 255, 255, .3) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .38) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
}

#app .hero-card > .zk-hero-avatar:hover,
#app .hero-card > .zk-hero-avatar:active {
  transform: scale(1.06);
  border-color: rgba(255, 255, 255, .62) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5) !important;
}

#app .hero-card > .zk-hero-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

#app .hero-card > .zk-hero-avatar .zk-avatar-ph {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, .92) !important;
  letter-spacing: .5px !important;
  line-height: 1 !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif !important;
}

/* 浅色玻璃主题下的适配 */
.liquid-glass-enabled #app .hero-card > .zk-hero-avatar,
.liquid-glass-enabled .hero-card > .zk-hero-avatar {
  background: rgba(0, 0, 0, .06) !important;
  border-color: rgba(0, 0, 0, .14) !important;
}

.liquid-glass-enabled #app .hero-card > .zk-hero-avatar .zk-avatar-ph {
  color: #3a3a3c !important;
}