.billing-panel { overflow: hidden; }
.billing-title { justify-content: space-between; }
.credit-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.credit-summary > div {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0d1520;
}
.credit-summary span { color: var(--muted); font-size: 12px; }
.credit-summary strong { font-size: 24px; color: var(--accent2); }
.billing-entitlement { margin:14px 0; padding:12px 14px; border-radius:12px; background:rgba(124,108,255,.1); color:var(--muted); }
.billing-entitlement.expired { background:rgba(239,68,68,.12); color:#fca5a5; }
.billing-limits { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:14px 0 22px; }
.billing-limit { padding:12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); }
.billing-limit span { display:block; color:var(--muted); font-size:11px; margin-bottom:5px; }
.billing-limit b { font-size:18px; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.plan-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(13, 21, 32, .72);
}
.plan-card.current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.plan-card h3 { margin: 0 0 4px; font-size: 16px; }
.plan-card p { min-height: 42px; margin: 0 0 10px; color: var(--muted); font-size: 12px; }
.plan-card footer { display: flex; justify-content: space-between; gap: 8px; align-items: end; }
.plan-card .plan-action { width: 100%; margin-top: 12px; padding: 9px 12px; }
.plan-card b { color: var(--ok); }
.plan-card small { color: var(--muted); text-align: right; }
.ledger-box { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
#billing-subscription-action { margin-top: 14px; }
.ledger-box summary { color: var(--muted); cursor: pointer; }
.ledger-list { display: grid; gap: 7px; margin-top: 10px; }
.ledger-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.ledger-row span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-row b.positive { color: var(--ok); }
.ledger-row b.negative { color: var(--danger); }

@media (max-width: 720px) {
  .plan-grid { grid-template-columns: 1fr; }
  .billing-limits { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .credit-summary { grid-template-columns: 1fr; }
}