/* Home and recharge surfaces mirror the member portal's account center. */
.home-alert {
  margin: 0 0 10px;
  min-height: 38px;
  padding: 9px 16px;
  border: 1px solid;
  font-size: 14px;
  line-height: 18px;
}

.home-alert.warning {
  border-color: #f4d49b;
  background: #fff7e8;
  color: #a67523;
}

.home-alert.success {
  border-color: #cfe8bd;
  background: #f1faeb;
  color: #5cae3e;
}

.home-profile-card .card-title,
.home-publish-card .card-title {
  height: 42px;
  line-height: 42px;
  font-size: 16px;
}

.home-profile-body {
  display: flex;
  align-items: center;
  min-height: 225px;
  gap: 18px;
  padding: 22px 42px;
}

.home-profile-identity {
  display: flex;
  width: 180px;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.home-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
}

.member-outline {
  height: 34px;
  padding: 0 18px;
  border: 1px solid var(--blue);
  border-radius: 4px;
  background: #fff;
  color: var(--blue);
}

.home-profile-data {
  min-width: 220px;
  line-height: 2.15;
  font-size: 16px;
}

.home-profile-data p { margin: 0; }
.home-profile-data strong:first-child { color: var(--blue); font-size: 18px; }
.home-balance { color: var(--blue); font-size: 25px; font-weight: 500; }
.home-recharge-total { color: var(--blue); font-size: 25px; font-weight: 500; }

.balance-link {
  height: 30px;
  padding: 0 16px;
  border: 0;
  border-radius: 3px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
}

.home-recharge {
  width: 145px;
  height: 45px;
  margin-left: 0;
  font-size: 18px;
  box-shadow: 0 12px 26px rgba(64, 158, 255, .28);
}

.home-channel-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(100px, 1fr));
  gap: 14px 28px;
  padding: 20px 36px 24px;
}

.home-channel-btn {
  height: 50px;
  border: 0;
  color: #fff;
  font-size: 16px;
  background: #2f7ae5;
}

.home-channel-btn:nth-child(even) {
  background: #5b8def;
}

.home-channel-btn:nth-child(3n) { background: #3478c9; }
.home-channel-btn:nth-child(4n) { background: #409eff; }

.home-channel-btn:hover { filter: brightness(.96); }

.recharge-page {
  max-width: 1120px;
  padding: 0 20px 35px;
}

.recharge-warning {
  margin: 4px 0 28px;
  color: #f22;
  font-size: 16px;
  font-weight: 600;
}

.payment-method {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 15px;
}

.payment-method label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 25px;
}

.payment-option { cursor: pointer; }
.payment-option input { margin: 0; }
.payment-option img {
  width: 150px;
  height: 56px;
  object-fit: contain;
}
.alipay-pay-logo {
  display: block;
}

.payment-method input { accent-color: var(--blue); }
.wechat-pay-logo {
  display: block;
}

.payment-stage {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 8px 130px;
}

.payment-stage img {
  width: 203px;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.payment-stage.wechat-stage img {
  width: 225px;
  height: auto;
  object-fit: contain;
}

.payment-stage.alipay-stage img {
  height: auto;
  max-height: 323px;
  object-fit: contain;
}


.payment-disclaimer {
  margin: 38px 0 22px;
  font-size: 16px;
  color: #171717;
}

.service-panel {
  min-height: 220px;
  padding: 16px 28px;
  border: 1px solid #86bfff;
  background: #e0f0ff;
  line-height: 1.9;
  font-size: 13px;
}

.service-panel p { margin: 0 0 3px; }
.service-panel b { color: #f33; font-weight: 500; }
.service-qq-logo { width: 18px; height: 21px; margin-left: 5px; vertical-align: -5px; object-fit: contain; }
.service-wechat-qr { display: block; width: 280px; max-width: 100%; height: auto; margin: 8px 0 0; object-fit: contain; }

@media (max-width: 1400px) {
  .home-profile-body { padding-inline: 24px; gap: 18px; }
  .home-profile-data { min-width: 210px; }
  .home-recharge { margin-left: 0; }
  .home-channel-grid { gap: 10px 16px; padding-inline: 20px; }
}