.provider-status-page {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  max-width: 1400px;
  margin: 0 auto;
}

.provider-status-header,
.provider-status-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.provider-status-header h1,
.provider-status-card-heading h2 {
  margin: 0;
}

.provider-status-header p,
.provider-status-card-heading p,
.provider-status-auth,
.provider-status-empty {
  color: var(--muted-foreground);
}

.provider-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}

.provider-status-card-content {
  display: grid;
  gap: 1rem;
}

.provider-status-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: .65rem;
  margin-top: 1rem;
}

.provider-status-stat {
  display: grid;
  gap: .2rem;
  padding: .7rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: color-mix(in srgb, var(--muted) 35%, transparent);
}

.provider-status-stat-label {
  color: var(--muted-foreground);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.provider-status-auth {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  font-size: .85rem;
}

.provider-status-usage-link {
  color: var(--primary, #f7c843);
  font-weight: 600;
  text-decoration: none;
}

.provider-status-usage-link:hover {
  text-decoration: underline;
}

.provider-status-auth .is-good { color: #22c55e; }
.provider-status-auth .is-bad { color: #ef4444; }

.provider-status-models {
  display: grid;
  gap: .5rem;
}

.provider-status-model {
  display: grid;
  gap: .2rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
  font-size: .8rem;
}

.provider-status-model span { color: var(--muted-foreground); }

.provider-status-badge--available { background: #166534; color: white; }
.provider-status-badge--degraded { background: #a16207; color: white; }
.provider-status-badge--unavailable { background: #991b1b; color: white; }
.provider-status-badge--unobserved { background: #374151; color: white; }

.provider-status-note,
.provider-status-error,
.provider-status-loading {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: .65rem;
}

.provider-status-note p { margin: .4rem 0 0; color: var(--muted-foreground); }
.provider-status-error { border-color: #991b1b; color: #fca5a5; }

@media (max-width: 640px) {
  .provider-status-page { padding: .75rem; }
  .provider-status-header { align-items: stretch; flex-direction: column; }
}