.ai-usage__page {
  --ai-usage-columns: minmax(140px, 1.2fr) minmax(85px, .6fr) minmax(160px, 1fr) minmax(110px, .8fr) minmax(130px, .9fr);
}

.ai-usage__intro {
  margin: 0;
  color: var(--fs-color-text-secondary);
}

.ai-usage__period-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--fs-space-3);
}

.ai-usage__period-form .fs-field {
  min-width: 165px;
}

.ai-usage__month-link {
  align-self: center;
}

.ai-usage__error {
  flex-basis: 100%;
  margin: 0;
  color: var(--fs-color-danger-text);
}

.ai-usage__section {
  overflow: hidden;
}

.ai-usage__section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fs-space-3);
  padding: var(--fs-space-4);
}

.ai-usage__section-heading h2 {
  margin: 0;
}

.ai-usage__section-heading span,
.ai-usage__operation small,
.ai-usage__cost small {
  color: var(--fs-color-text-secondary);
}

.ai-usage__models .fs-datalist__head,
.ai-usage__models .fs-datalist__row {
  grid-template-columns: var(--ai-usage-columns);
}

.ai-usage__entries .fs-datalist__head,
.ai-usage__entries .fs-datalist__row {
  grid-template-columns:
    minmax(125px, .85fr) minmax(140px, 1fr) minmax(170px, 1.2fr) minmax(75px, .55fr)
    minmax(90px, .55fr) minmax(145px, .9fr) minmax(165px, 1fr);
}

.ai-usage__models .fs-datalist__row,
.ai-usage__entries .fs-datalist__row {
  column-gap: var(--fs-space-3);
  font-variant-numeric: tabular-nums;
}

.ai-usage__operation,
.ai-usage__cost {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ai-usage__operation strong,
.ai-usage__cost strong {
  overflow-wrap: anywhere;
}

.ai-usage__user {
  overflow-wrap: anywhere;
}

.ai-usage__empty {
  padding: var(--fs-space-4);
  margin: 0;
  color: var(--fs-color-text-secondary);
}

.ai-usage__pagination {
  display: flex;
  justify-content: center;
  gap: var(--fs-space-4);
  padding: var(--fs-space-4);
}

@media (max-width: 900px) {
  .ai-usage__models .fs-datalist__head,
  .ai-usage__entries .fs-datalist__head {
    display: none;
  }

  .ai-usage__models .fs-datalist__row,
  .ai-usage__entries .fs-datalist__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fs-space-2);
  }

  .ai-usage__models .fs-datalist__row > :first-child,
  .ai-usage__entries .fs-datalist__row > :nth-child(3) {
    grid-column: 1 / -1;
  }
}