/* 首页钱包快捷区：四套皮肤共用同一组几何与交互规范，颜色仍由各皮肤负责。 */
html[data-skin] body .phone-shell .home-view .wallet-area {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

html[data-skin] body .phone-shell .home-view .wallet-bar {
  box-sizing: border-box !important;
  width: 168px !important;
  height: 38px !important;
  min-width: 168px !important;
  padding: 3px 4px 3px 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 1px !important;
  border-radius: 19px !important;
  overflow: hidden !important;
}

html[data-skin] body .phone-shell .home-view .wallet-bar .balance {
  min-width: 0 !important;
  height: 30px !important;
  flex: 1 1 auto !important;
  padding: 0 4px 0 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

html[data-skin] body .phone-shell .home-view .wallet-bar .balance > span:last-child {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-skin] body .phone-shell .home-view .wallet-bar .coin {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 50% !important;
}

html[data-skin] body .phone-shell .home-view .wallet-bar .refresh {
  width: 26px !important;
  height: 30px !important;
  flex: 0 0 26px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
}

html[data-skin] body .phone-shell .home-view .wallet-bar .recharge-top {
  width: 48px !important;
  min-width: 48px !important;
  height: 30px !important;
  margin-left: 1px !important;
  padding: 0 !important;
  flex: 0 0 48px !important;
  border-radius: 15px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 30px !important;
  text-align: center !important;
}

html[data-skin] body .phone-shell .home-view .wallet-bar :is(.balance, .refresh, .recharge-top):active {
  transform: scale(.97) !important;
}

@media (max-width: 390px) {
  html[data-skin] body .phone-shell .home-view .wallet-bar {
    width: 158px !important;
    min-width: 158px !important;
  }
  html[data-skin] body .phone-shell .home-view .wallet-bar .recharge-top {
    width: 44px !important;
    min-width: 44px !important;
    flex-basis: 44px !important;
  }
}