/* Vchat 0.50.4-alpha — Billing Frontend Premium Refresh */
.vchat-billing-center{
  --vchat-billing-bg:#f7f5fc;
  --vchat-billing-card:#ffffff;
  --vchat-billing-border:rgba(101,81,177,.14);
  --vchat-billing-border-strong:rgba(101,81,177,.28);
  --vchat-billing-text:#201c36;
  --vchat-billing-muted:#7c7792;
  --vchat-billing-primary:#6650bf;
  --vchat-billing-primary-soft:#f2effb;
  --vchat-billing-shadow:0 20px 50px rgba(41,30,84,.06);
}
.vchat-billing-center .vchat-billing-hero{
  margin-bottom:20px!important;
}
.vchat-billing-center .vchat-billing-hero h1{
  margin-bottom:12px!important;
}
.vchat-billing-center .vchat-billing-hero p{
  max-width:720px!important;
}
.vchat-billing-center .vchat-billing-grid{
  grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr)!important;
  gap:18px!important;
}
.vchat-billing-center .vchat-current-plan.vchat-billing-current,
.vchat-billing-center .vchat-ai-wallet.vchat-billing-usage{
  position:relative;
  background:linear-gradient(180deg,#fff 0%,#fcfbff 100%)!important;
  border:1px solid var(--vchat-billing-border)!important;
  box-shadow:var(--vchat-billing-shadow)!important;
}
.vchat-billing-center .vchat-billing-current::after{
  content:'';
  position:absolute;
  inset:auto -34px -34px auto;
  width:120px;
  height:120px;
  border-radius:999px;
  background:radial-gradient(circle at center, rgba(102,80,191,.16), rgba(102,80,191,0));
  pointer-events:none;
}
.vchat-billing-center .vchat-billing-current small,
.vchat-billing-center .vchat-billing-usage small{
  font-size:10px!important;
  letter-spacing:.12em!important;
}
.vchat-billing-center .vchat-billing-current h2,
.vchat-billing-center .vchat-billing-usage h2{
  font-size:32px!important;
}
.vchat-billing-center .vchat-billing-current .vchat-plan-price{
  align-items:flex-end!important;
  gap:12px!important;
  padding:16px 0 18px!important;
  margin:0 0 8px!important;
  border-bottom:1px solid #eee9f7;
}
.vchat-billing-center .vchat-billing-current .vchat-plan-price strong{
  font-size:34px!important;
  line-height:1!important;
}
.vchat-billing-center .vchat-billing-current .vchat-plan-price span{
  color:var(--vchat-billing-muted)!important;
  font-weight:650!important;
}
.vchat-billing-center .vchat-billing-current ul{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
.vchat-billing-center .vchat-billing-current li{
  min-height:100%;
  padding:14px 14px 14px 38px!important;
  border:1px solid #ece7f6;
  border-radius:16px;
  background:#faf9fe;
  color:#4f4966!important;
  font-size:13px!important;
  line-height:1.45!important;
}
.vchat-billing-center .vchat-billing-current li::before{
  left:14px!important;
  top:14px!important;
  width:16px;
  height:16px;
  border-radius:999px;
  background:#efeafb;
  color:#5f4ac4;
  display:grid;
  place-items:center;
  font-size:11px;
  content:'✓';
}
.vchat-billing-center .vchat-billing-usage .vchat-progress{
  height:10px!important;
  margin:8px 0 18px!important;
  background:#ece8f8!important;
}
.vchat-billing-center .vchat-billing-usage .vchat-progress i{
  background:linear-gradient(90deg,#7c65db 0%,#5b46bf 100%)!important;
}
.vchat-billing-center .vchat-billing-usage .vchat-usage-list{
  gap:10px!important;
}
.vchat-billing-center .vchat-billing-usage .vchat-usage-list p{
  padding:14px 16px!important;
  border:1px solid #ede8f7!important;
  border-radius:16px!important;
  background:#fbfaff!important;
}
.vchat-billing-center .vchat-billing-usage .vchat-usage-list span{
  color:#716a8a!important;
}
.vchat-billing-center .vchat-billing-usage .vchat-usage-list b{
  color:#261f3d!important;
  font-size:16px!important;
}
.vchat-billing-center .vchat-billing-plan-shell{
  display:grid;
  gap:16px;
  margin-top:4px;
}
.vchat-billing-center .vchat-billing-plan-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  padding:8px 2px 0;
}
.vchat-billing-center .vchat-billing-plan-section-head small{
  display:block;
  margin-bottom:6px;
  color:#8a83a4;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:10px;
  font-weight:850;
}
.vchat-billing-center .vchat-billing-plan-section-head h2{
  margin:0 0 6px;
  font-size:24px;
  line-height:1.05;
  letter-spacing:-.04em;
  color:var(--vchat-billing-text);
}
.vchat-billing-center .vchat-billing-plan-section-head p{
  margin:0;
  color:var(--vchat-billing-muted);
  font-size:14px;
  line-height:1.55;
  max-width:760px;
}
.vchat-billing-center .vchat-billing-plan-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.vchat-billing-center .vchat-billing-plan-card{
  position:relative;
  min-height:420px!important;
  border-radius:26px!important;
  padding:20px!important;
  border:1px solid var(--vchat-billing-border)!important;
  background:linear-gradient(180deg,#ffffff 0%,#fcfbff 100%)!important;
  box-shadow:var(--vchat-billing-shadow)!important;
  gap:14px!important;
  overflow:hidden;
}
.vchat-billing-center .vchat-billing-plan-card::before{
  content:'';
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,rgba(102,80,191,0) 0%, rgba(102,80,191,.72) 52%, rgba(102,80,191,0) 100%);
  opacity:0;
}
.vchat-billing-center .vchat-billing-plan-card.is-current::before,
.vchat-billing-center .vchat-billing-plan-card.is-featured::before{
  opacity:1;
}
.vchat-billing-center .vchat-billing-plan-card.is-current{
  border-color:var(--vchat-billing-border-strong)!important;
  box-shadow:0 24px 56px rgba(86,64,176,.14)!important;
}
.vchat-billing-center .vchat-billing-plan-card.is-featured:not(.is-current){
  border-color:rgba(102,80,191,.22)!important;
}
.vchat-billing-center .vchat-billing-plan-card.is-coming-soon{
  opacity:1!important;
}
.vchat-billing-center .vchat-billing-plan-card .vchat-billing-plan-top{
  display:flex;
  justify-content:flex-start;
}
.vchat-billing-center .vchat-billing-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:#f4f1fb;
  color:#6a56bb;
  border:1px solid #e8e1f7;
  font-size:10px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.vchat-billing-center .vchat-billing-badge.is-current{
  background:#ede8fb;
  color:#4f3baa;
  border-color:#dacfef;
}
.vchat-billing-center .vchat-billing-badge.is-featured{
  background:#f6f0ff;
  color:#6739c6;
  border-color:#e6d6ff;
}
.vchat-billing-center .vchat-billing-plan-card header{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:14px!important;
  margin:0!important;
}
.vchat-billing-center .vchat-billing-plan-card header strong{
  display:block;
  margin:0 0 8px!important;
  font-size:26px!important;
  line-height:1!important;
  color:var(--vchat-billing-text)!important;
}
.vchat-billing-center .vchat-billing-plan-description{
  margin:0!important;
  color:var(--vchat-billing-muted)!important;
  font-size:14px!important;
  line-height:1.55!important;
  min-height:66px;
}
.vchat-billing-center .vchat-billing-plan-pricebox{
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:16px 0 14px;
  border-bottom:1px solid #eee9f7;
}
.vchat-billing-center .vchat-billing-plan-pricebox b{
  font-size:34px;
  line-height:.95;
  letter-spacing:-.045em;
  color:#241d3b;
}
.vchat-billing-center .vchat-billing-plan-pricebox span{
  color:#6f6886;
  font-size:13px;
  font-weight:750;
}
.vchat-billing-center .vchat-billing-plan-card ul{
  display:grid!important;
  gap:10px!important;
  margin:0!important;
  padding:0!important;
  min-height:186px!important;
}
.vchat-billing-center .vchat-billing-plan-card li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:0 0 0 24px!important;
  color:#4f4966!important;
  font-size:13px!important;
  line-height:1.5!important;
}
.vchat-billing-center .vchat-billing-plan-card li::before{
  left:0!important;
  top:2px!important;
  width:16px;
  height:16px;
  border-radius:999px;
  background:#f0ebfa;
  color:#5f4ac4;
  display:grid;
  place-items:center;
  font-size:11px;
  content:'✓';
}
.vchat-billing-center .vchat-billing-plan-note{
  margin-top:auto;
  padding-top:8px;
  border-top:1px dashed #ece6f7;
  color:#8a83a1;
  font-size:12px;
  line-height:1.45;
  min-height:42px;
}
.vchat-billing-center .vchat-billing-plan-card button{
  width:100%;
  min-height:48px!important;
  border-radius:16px!important;
  margin-top:4px!important;
  font-size:13px!important;
  font-weight:850!important;
  letter-spacing:-.01em;
}
.vchat-billing-center .vchat-billing-plan-card.is-current button{
  background:#efeafb!important;
  color:#604abf!important;
  border-color:#e2d8f5!important;
}
.vchat-billing-center .vchat-billing-plan-card.is-coming-soon button:disabled{
  background:#f6f4fb!important;
  color:#948ba9!important;
  border-color:#ebe5f7!important;
  opacity:1!important;
}
@media (max-width:1320px){
  .vchat-billing-center .vchat-billing-plan-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:1120px){
  .vchat-billing-center .vchat-billing-grid{
    grid-template-columns:1fr!important;
  }
}
@media (max-width:760px){
  .vchat-billing-center .vchat-billing-plan-grid,
  .vchat-billing-center .vchat-billing-current ul{
    grid-template-columns:1fr!important;
  }
  .vchat-billing-center .vchat-billing-plan-card{
    min-height:auto!important;
  }
  .vchat-billing-center .vchat-billing-plan-description,
  .vchat-billing-center .vchat-billing-plan-card ul{
    min-height:unset!important;
  }
}