.inference-page {
 display: flex;
 flex-direction: column;
 gap: 20px;
}

.inference-heading {
 display: flex;
 justify-content: space-between;
 gap: 16px;
 align-items: flex-start;
 flex-wrap: wrap;
}

.inference-lead {
 max-width: 62ch;
}

.inference-actions {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
}

.inference-steps {
 margin: 0;
 padding-left: 1.2rem;
}

.inference-endpoint {
 display: flex;
 gap: 8px;
 align-items: center;
 flex-wrap: wrap;
}

.inference-code {
 font-family:
  ui-monospace, SFMono-Regular,
  monospace;
 font-size: var(--text-xs);
 white-space: pre-wrap;
 word-break: break-all;
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 10px;
}

.inference-grid,
.inference-user {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.inference-key-head {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 align-items: flex-start;
 flex-wrap: wrap;
}

.inference-meters {
 display: grid;
 grid-template-columns: repeat(
  auto-fit,
  minmax(180px, 1fr)
 );
 gap: 12px 16px;
}

.inference-meter-label,
.inference-meter-value {
 font-size: var(--text-xs);
}

.inference-meter-track {
 height: 8px;
 margin: 6px 0;
 border-radius: 999px;
 background: var(--border);
 overflow: hidden;
}

.inference-meter-fill {
 height: 100%;
 background: var(--primary);
}

.inference-meter-fill.is-over {
 background: var(--destructive);
}

.inference-key-list {
 display: flex;
 flex-direction: column;
}

.inference-key-row {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 align-items: center;
 flex-wrap: wrap;
 padding: 10px 0;
 border-top: 1px solid var(--border);
}

.inference-models {
 display: flex;
 flex-direction: column;
 gap: 6px;
 max-height: 220px;
 overflow: auto;
}

.inference-check {
 display: flex;
 gap: 8px;
 align-items: center;
}

.inference-budget-grid {
 display: grid;
 grid-template-columns: repeat(
  auto-fit,
  minmax(180px, 1fr)
 );
 gap: 12px;
}