.usage-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 16px;margin-bottom:16px;border:1px solid #fed7aa;background:#fff7ed;color:#9a4f09;border-radius:13px}.usage-banner.limit{border-color:#fecaca;background:#fff1f2;color:#a51d2d}.usage-banner b,.usage-banner span{display:block}.usage-banner b{font-size:12px}.usage-banner span{font-size:10px;line-height:1.45;margin-top:3px}.usage-banner strong{font-size:10px;white-space:nowrap}
.billing-usage-card{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:19px 22px;margin-bottom:20px;border:1px solid var(--line);background:#fff;border-radius:16px}.billing-usage-card>div:first-child{max-width:760px}.billing-usage-card span{font-size:9px;letter-spacing:1px;font-weight:850;color:var(--primary)}.billing-usage-card h2{font-size:20px;margin:5px 0}.billing-usage-card p{font-size:11px;line-height:1.5;color:var(--muted);margin:0}.billing-usage-card.warning{border-color:#fed7aa;background:#fffaf2}.billing-usage-card.limit{border-color:#fecaca;background:#fff5f5}.billing-usage-card.limit span,.billing-usage-card.limit .usage-progress>b{color:var(--red)}.usage-progress{width:min(310px,35%)}.usage-progress>b{display:block;text-align:right;font-size:18px;color:var(--primary);margin-bottom:7px}.usage-progress i{display:block;height:8px;background:#e9eaf0;border-radius:10px;overflow:hidden}.usage-progress em{display:block;height:100%;background:linear-gradient(90deg,var(--primary),#a855f7);border-radius:10px}.billing-usage-card.limit .usage-progress em{background:linear-gradient(90deg,#f97316,var(--red))}@media(max-width:760px){.usage-banner,.billing-usage-card{align-items:flex-start;flex-direction:column}.usage-progress{width:100%}.usage-banner strong{white-space:normal}}