.credit-usage {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
}

.credit-usage-header,
.credit-usage-section {
  padding: var(--spacing-24);
  background: var(--background-surface-1);
  border-radius: var(--corner-radius-xs);
}

.credit-usage-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--spacing-16);
}

.credit-usage-header p,
.credit-usage-grants span { color: var(--text-tertiary); }

.credit-usage-section h2 { margin-bottom: var(--spacing-16); }
.credit-usage-section h3 { margin: var(--spacing-16) 0 var(--spacing-8); font-size: var(--font-size-14); }

.credit-usage-grants {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--spacing-8);
  margin-top: var(--spacing-16);
}

.credit-usage-grants > div,
.credit-usage-charge-totals {
  padding: var(--spacing-12);
  background: var(--background-surface-2);
  border-radius: var(--corner-radius-xs);
}

.credit-usage-grants dt,
.credit-usage-grants dd,
.credit-usage-models p,
.credit-usage-days > div,
.credit-usage-pagination {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-8);
}

.credit-usage-grants dt,
.credit-usage-grants dd { flex-direction: column; }

.credit-usage-charge-totals,
.credit-usage-models {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--spacing-12);
}

.credit-usage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-14);
}

.credit-usage-table th,
.credit-usage-table td {
  padding: var(--spacing-8);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

.credit-usage-days {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.credit-usage-days > div { align-items: center; }
.credit-usage-day-bar { flex: 1; }
.credit-usage-day-bar progress { width: 100%; }
.credit-usage-pagination { margin-top: var(--spacing-16); }

@media (max-width: 47.999rem) {
  .credit-usage-header,
  .credit-usage-section {
    padding: var(--spacing-16);
    overflow-x: auto;
  }
}