/* VIP 横幅 + 开通弹层 — 对齐用户中心设计稿 */
.hg-profile-banners{display:flex;flex-direction:column;gap:12px;margin:0 0 22px}
.hg-profile-banners .hg-vip-banner{margin:0}
.hg-recharge-banner[hidden]{display:none!important}
.hg-vip-banner[hidden]{display:none!important}
.hg-vip-banner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;margin:0 0 22px;padding:16px 18px;box-sizing:border-box;
  border-radius:14px;border:1px solid rgba(212,175,55,.28);
  background:linear-gradient(135deg,#1a1712 0%,#121212 55%,#1c1810 100%);
  color:#e8c98a;cursor:pointer;text-align:left;
  -webkit-appearance:none;appearance:none;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.hg-vip-banner:hover{
  border-color:rgba(212,175,55,.5);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.hg-vip-banner__left{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.hg-vip-banner__icon{
  flex:none;width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(212,175,55,.45);color:#d4af37;
  background:rgba(212,175,55,.08);
}
.hg-vip-banner__meta{min-width:0;flex:1}
.hg-vip-banner__title-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.hg-vip-banner__title{
  font-size:15px;font-weight:700;line-height:1.3;color:#e8c98a;
}
.hg-vip-banner__pill{
  display:inline-flex;align-items:center;height:22px;padding:0 8px;
  border-radius:999px;border:1px solid rgba(212,175,55,.55);
  font-size:12px;font-weight:600;color:#d4af37;line-height:1;
  background:rgba(212,175,55,.08);
}
.hg-vip-banner__pill[hidden]{display:none!important}
.hg-vip-banner__sub{
  display:block;margin-top:6px;font-size:12px;line-height:1.45;
  color:rgba(232,201,138,.55);
}
.hg-vip-banner__cta{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  height:36px;padding:0 16px;border-radius:10px;
  background:#ffd21c;
  color:#111;font-size:13px;font-weight:700;white-space:nowrap;
}
.hg-vip-banner[data-vip-state="active"] .hg-vip-banner__title{color:#f0d9a0}

@media (max-width:640px){
  .hg-vip-banner{padding:14px 12px;gap:10px;align-items:flex-start}
  .hg-vip-banner__cta{height:32px;padding:0 12px;font-size:12px;margin-top:2px}
  .hg-vip-banner__title{font-size:14px}
}

/* —— 开通弹层 —— */
.hg-vip[hidden]{display:none!important}
.hg-vip{
  position:fixed;inset:0;z-index:2147483000;
  display:flex;align-items:center;justify-content:center;
  padding:16px;box-sizing:border-box;
}
.hg-vip__mask{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.hg-vip__panel{
  position:relative;z-index:1;
  width:min(560px,calc(100vw - 24px));
  max-height:min(90vh,760px);overflow:auto;
  border-radius:18px;background:#161616;color:#fff;
  border:1px solid rgba(212,175,55,.22);
  box-shadow:0 18px 56px rgba(0,0,0,.5);
  padding:20px 18px 16px;box-sizing:border-box;
}
.hg-vip__close{
  position:absolute;top:10px;right:10px;
  width:32px;height:32px;border:0;border-radius:50%;
  background:rgba(255,255,255,.08);color:#fff;
  font-size:20px;line-height:32px;cursor:pointer;
}
.hg-vip__close:hover{background:rgba(255,255,255,.14)}

.hg-vip__head{display:flex;align-items:flex-start;gap:12px;margin:0 28px 16px 0}
.hg-vip__head-icon{
  flex:none;width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(212,175,55,.45);color:#d4af37;
  background:rgba(212,175,55,.08);
}
.hg-vip__title{margin:0;font-size:20px;font-weight:800;color:#fff;line-height:1.2}
.hg-vip__subtitle{margin:6px 0 0;font-size:13px;color:rgba(255,255,255,.55);line-height:1.4}

.hg-vip__benefits{
  list-style:none;margin:0 0 16px;padding:0;
  display:grid;grid-template-columns:1fr;gap:8px;
}
.hg-vip__benefit{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 8px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  color:#e8c98a;font-size:12px;font-weight:600;
}
.hg-vip__benefit-icon{display:inline-flex;color:#d4af37}

.hg-vip__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  margin-bottom:8px;
}
@media (max-width:560px){
  .hg-vip__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hg-vip__benefits{gap:6px}
  .hg-vip__benefit{font-size:11px;padding:8px 4px}
}
.hg-vip__pkg{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  min-height:118px;padding:14px 12px 12px;box-sizing:border-box;
  border-radius:14px;border:1.5px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);color:#fff;cursor:pointer;text-align:left;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.hg-vip__pkg.is-active{
  border-color:#d4af37;background:rgba(212,175,55,.08);
  box-shadow:0 0 0 1px rgba(212,175,55,.25);
}
.hg-vip__pkg-badge{
  position:absolute;top:0;right:0;
  padding:3px 8px;border-radius:0 12px 0 10px;
  background:linear-gradient(90deg,#e8c16a,#d4a017);
  color:#2a1a08;font-size:11px;font-weight:700;line-height:1.2;
}
.hg-vip__pkg-title{font-size:14px;font-weight:700;line-height:1.25;padding-right:36px}
.hg-vip__pkg-period{font-size:12px;color:rgba(255,255,255,.45)}
.hg-vip__pkg-price-row{display:flex;align-items:baseline;gap:6px;margin-top:4px}
.hg-vip__pkg-price{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.02em}
.hg-vip__pkg-origin{
  font-size:12px;color:rgba(255,255,255,.35);text-decoration:line-through;
}
.hg-vip__pkg-gift{
  margin-top:auto;padding-top:8px;width:100%;
  border-top:1px dashed rgba(255,255,255,.08);
  font-size:11px;color:rgba(232,201,138,.75);line-height:1.35;
}

.hg-vip__skel{
  min-height:118px;border-radius:14px;
  background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.05) 75%);
  background-size:200% 100%;animation:hg-vip-shimmer 1.2s infinite;
}
@keyframes hg-vip-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.hg-vip__empty{padding:20px 0;text-align:center;font-size:13px;color:rgba(255,255,255,.5)}

.hg-vip__pay{margin:14px 0 12px}
.hg-vip__pay-label{margin:0 0 8px;font-size:13px;font-weight:600;color:rgba(255,255,255,.7)}
.hg-vip__pay-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hg-vip__pay-loading,.hg-vip__pay-empty{
  grid-column:1/-1;padding:12px;text-align:center;font-size:13px;color:rgba(255,255,255,.45);
}
.hg-vip__channel{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:10px 12px;box-sizing:border-box;
  border-radius:10px;border:1.5px solid rgba(255,255,255,.14);
  background:transparent;color:rgba(255,255,255,.72);cursor:pointer;text-align:center;
  transition:border-color .15s,color .15s,background .15s;
}
.hg-vip__channel.is-active{
  border-color:#c9a227;background:rgba(201,162,39,.06);color:#c9a227;
}
.hg-vip__channel-icon{
  flex:none;width:22px;height:22px;border-radius:50%;object-fit:contain;
  background:rgba(255,255,255,.06);
}
.hg-vip__channel-icon--brand{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  font-size:12px;font-weight:700;line-height:1;color:#fff;
}
.hg-vip__channel-icon--alipay{background:#1677ff}
.hg-vip__channel-icon--wechat{background:#07c160}
.hg-vip__channel-icon--wechat svg{display:block;width:12px;height:12px}
.hg-vip__channel-icon--fallback{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;background:rgba(255,255,255,.18);
}
.hg-vip__channel-name{
  flex:none;min-width:0;font-size:14px;font-weight:600;line-height:1;
  color:inherit;
}
.hg-vip__channel-check{
  flex:none;display:none;font-size:14px;font-weight:700;line-height:1;
  color:#c9a227;
}
.hg-vip__channel.is-active .hg-vip__channel-check{display:inline}

.hg-vip__footer{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  margin-top:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);
}
.hg-vip__footer-meta{min-width:0;flex:1}
.hg-vip__due{font-size:18px;font-weight:800;color:#e8c98a;line-height:1.2}
.hg-vip__due span{color:#f0d9a0}
.hg-vip__due-sub{margin-top:4px;font-size:12px;color:rgba(255,255,255,.55)}
.hg-vip__due-tip{margin-top:4px;font-size:11px;color:rgba(255,255,255,.35)}
.hg-vip__footer-actions{flex:none;display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:180px}
/* 压过 common/profile 的 button:not(.hg-btn){background-color:unset}，保持黄色主按钮 */
button.hg-vip__submit.hg-vip__submit{
  -webkit-appearance:none;appearance:none;
  height:44px;padding:0 16px;border:0;border-radius:12px;cursor:pointer;
  background-color:#ffd21c;
  background-image:linear-gradient(90deg,#ffd21c 0%,#f5a623 100%);
  color:#111;font-size:14px;font-weight:800;white-space:nowrap;
}
button.hg-vip__submit.hg-vip__submit:disabled{opacity:.55;cursor:not-allowed}
button.hg-vip__submit.hg-vip__submit:not(:disabled):hover{filter:brightness(1.05)}
.hg-vip__refresh{
  border:0;background:transparent;color:rgba(232,201,138,.75);
  font-size:12px;cursor:pointer;padding:0;text-align:center;
}
.hg-vip__refresh:hover{color:#e8c98a}
.hg-vip__refresh[hidden]{display:none!important}

@media (max-width:520px){
  .hg-vip__footer{flex-direction:column;align-items:stretch}
  .hg-vip__footer-actions{min-width:0;width:100%}
  button.hg-vip__submit{width:100%}
}