.billing-local-card,.billing-plan{
  border:1px solid var(--border);
  border-radius:10px;
  padding:24px;
  background:var(--background)}

.billing-local-card h2{
  font-size:24px;
  letter-spacing:-.6px;
  margin:20px 0 12px}

.billing-local-card p,.billing-plan p{
  font-size:13px;
  line-height:1.8;
  color:var(--muted-foreground);
  margin:12px 0}

.billing-current-plan{
  display:flex;
  gap:10px;
  align-items:center;
  margin:20px 0 28px}
.billing-current-plan>div{
  flex:1}
.billing-current-plan small{
  color:var(--muted-foreground);
  font-size:12px}
.billing-current-plan h2{
  font-size:22px;
  margin-top:6px}

.billing-usage-grid,.billing-plans{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px}
.billing-plans{
  margin-top:30px}
.billing-meter{
  border:1px solid var(--border);
  padding:18px;
  border-radius:9px}
.billing-meter>div:first-child{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center}
.billing-meter h3,.billing-meter strong{
  font-size:12px;
  font-weight:500}
.billing-meter strong span{
  color:var(--muted-foreground);
  font-weight:400}
.billing-progress{
  height:4px;
  background:var(--muted);
  border-radius:4px;
  margin-top:17px;
  overflow:hidden}
.billing-progress>span{
  display:block;
  height:100%;
  background:var(--foreground);
  border-radius:4px}
.billing-meter small,.billing-plan>small{
  display:block;
  font-size:11px;
  color:var(--muted-foreground);
  line-height:1.6;
  margin-top:12px}
.billing-plan h3{
  font-size:19px;
  margin-top:17px}
.billing-plan .btn{
  width:100%;
  font-size:12px;
  margin-top:7px}
.billing-message{
  border:1px solid var(--border);
  border-radius:8px;
  padding:20px;
  font-size:13px;
  line-height:1.7}
.billing-message .btn{
  display:block;
  margin-top:14px}

@media(max-width:660px){
  .billing-usage-grid,.billing-plans{
    grid-template-columns:1fr}
  .billing-current-plan{
    flex-wrap:wrap}
  .billing-current-plan>div{
    min-width:100%}
}