/* ── BILLING TAB ──────────────────────────────────── */
.billing-status{
  background:linear-gradient(135deg,rgba(0,212,255,0.08),rgba(0,255,136,0.04));
  border:1px solid var(--border2);border-radius:4px;padding:16px;margin-bottom:16px;
}
.billing-status.canceled,.billing-status.past_due{
  background:linear-gradient(135deg,rgba(255,68,102,0.08),rgba(255,170,0,0.04));
  border-color:var(--red);
}
.billing-plan-name{
  font-family:'Orbitron',monospace;font-size:16px;font-weight:700;
  color:var(--cyan);letter-spacing:1px;
  text-shadow:0 0 12px rgba(0,212,255,0.3);
}
.billing-status.canceled .billing-plan-name,
.billing-status.past_due .billing-plan-name{color:var(--red);text-shadow:0 0 12px rgba(255,68,102,0.3)}

.billing-status-meta{
  font-family:'JetBrains Mono',monospace;font-size:9px;
  color:var(--muted);letter-spacing:1px;margin-top:4px;
}
.billing-status-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

/* spend bar */
.spend-bar-wrap{
  background:var(--bg2);border:1px solid var(--border);border-radius:3px;
  padding:12px 14px;margin-bottom:16px;
}
.spend-bar-label{
  display:flex;justify-content:space-between;margin-bottom:8px;
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:1px;
  color:var(--muted);
}
.spend-bar-label b{color:var(--text);font-weight:700}
.spend-bar{
  height:8px;background:var(--bg);border:1px solid var(--border);
  border-radius:2px;overflow:hidden;position:relative;
}
.spend-bar-fill{
  height:100%;background:linear-gradient(90deg,var(--green),var(--cyan));
  transition:width .4s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 8px rgba(0,212,255,0.4);
}
.spend-bar-fill.warn{background:linear-gradient(90deg,var(--cyan),var(--gold))}
.spend-bar-fill.danger{background:linear-gradient(90deg,var(--gold),var(--red))}
.spend-bar-msg{
  margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:9px;
  color:var(--muted);letter-spacing:1px;
}

/* 30-day sparkline */
.spark-wrap{
  background:var(--bg2);border:1px solid var(--border);border-radius:3px;
  padding:14px;margin-bottom:16px;
}
.spark-title{
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:2px;
  color:var(--muted);margin-bottom:10px;text-transform:uppercase;
}
.spark-svg{width:100%;height:70px;display:block}
.spark-empty{
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted2);
  text-align:center;padding:16px 0;letter-spacing:1px;
}

/* plan cards for upgrade */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:720px){.plans-grid{grid-template-columns:1fr;gap:8px}}

.plan-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:4px;
  padding:14px;display:flex;flex-direction:column;gap:8px;
  transition:all .15s;position:relative;
}
.plan-card:hover{border-color:var(--border2)}
.plan-card.current{border-color:var(--cyan);box-shadow:0 0 12px rgba(0,212,255,0.15)}
.plan-card.current::before{
  content:'CURRENT';position:absolute;top:-8px;right:10px;
  background:var(--cyan);color:#000;
  font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:2px;
  padding:2px 6px;border-radius:2px;font-weight:700;
}
.plan-card.recommended{border-color:var(--gold)}
.plan-card.recommended::before{
  content:'RECOMMENDED';position:absolute;top:-8px;right:10px;
  background:var(--gold);color:#000;
  font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:2px;
  padding:2px 6px;border-radius:2px;font-weight:700;
}
.plan-name{font-family:'Orbitron',monospace;font-size:12px;font-weight:700;color:var(--text);letter-spacing:1px}
.plan-price{font-family:'Orbitron',monospace;font-size:20px;font-weight:700;color:var(--cyan);letter-spacing:0}
.plan-price .per{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;letter-spacing:1px}
.plan-desc{font-size:11px;color:var(--text2);line-height:1.45}
.plan-features{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--muted);line-height:1.7;letter-spacing:.5px;flex:1}
.plan-features .yes{color:var(--green)}
.plan-features .no{color:var(--muted2);text-decoration:line-through}
.plan-cta{
  background:transparent;border:1px solid var(--border2);color:var(--text2);
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:2px;
  padding:7px 10px;border-radius:2px;cursor:pointer;transition:all .15s;
}
.plan-cta.primary{
  background:linear-gradient(180deg,rgba(0,212,255,0.2),rgba(0,212,255,0.08));
  border-color:var(--cyan);color:var(--cyan);
}
.plan-cta.primary:hover{background:linear-gradient(180deg,rgba(0,212,255,0.34),rgba(0,212,255,0.15));box-shadow:0 0 12px rgba(0,212,255,0.2)}
.plan-cta:disabled{opacity:.4;cursor:not-allowed}

/* cap editor */
.cap-editor{
  background:var(--bg2);border:1px solid var(--border);border-radius:3px;
  padding:12px 14px;margin-top:14px;display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
}
.cap-editor label{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:2px;color:var(--muted)}
.cap-editor input{
  background:var(--bg);border:1px solid var(--border);color:var(--text);
  font-family:'JetBrains Mono',monospace;font-size:12px;padding:6px 10px;
  border-radius:2px;width:100px;outline:none;
}
.cap-editor input:focus{border-color:var(--cyan)}

.upgrade-banner{
  background:linear-gradient(135deg,rgba(255,68,102,0.1),rgba(255,170,0,0.05));
  border:1px solid var(--red);border-left:3px solid var(--red);
  padding:12px 14px;border-radius:3px;margin-bottom:14px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
}
.upgrade-banner .msg{font-size:12px;color:var(--text2)}
.upgrade-banner .msg b{color:var(--red)}