/* Shapes and colors mirror the app's Branding/Providers icons and provider tint colors. */
.provider-list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 24px; margin: 0; padding: 0; list-style: none; }
.provider-item { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 17px; font-weight: 600; color: var(--ink); }
.provider-icon { flex: none; }
.provider-claude .provider-icon { color: var(--provider-claude); }
.provider-codex .provider-icon { color: var(--provider-codex); }
.provider-antigravity .provider-icon { color: var(--provider-antigravity); }
.provider-kiro .provider-icon { color: var(--provider-kiro); }
.provider-opencode .provider-icon { color: var(--provider-opencode); }
.provider-pi .provider-icon { color: var(--provider-pi); }

@media (max-width: 650px) {
  .provider-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; max-width: 300px; margin-inline: auto; }
  .provider-item { font-size: clamp(13px, 3.8vw, 16px); }
  .provider-icon { width: 20px; height: 20px; }
}

@media (max-width: 360px) {
  .provider-list { gap: 10px; }
  .provider-item { gap: 6px; }
  .provider-icon { width: 18px; height: 18px; }
}