.ai-provider-picker {
  margin: 0 0 22px;
  padding: 18px;
  border: 1px solid #d8e5dc;
  border-radius: 15px;
  background: linear-gradient(135deg, #f4f9f5, #fbfcfb);
}

.ai-provider-picker-head,
.ai-provider-picker-head > div,
.ai-provider-option > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-provider-picker-head { margin-bottom: 13px; }
.ai-provider-picker-head > div { align-items: baseline; justify-content: flex-start; }
.ai-provider-picker-head b { color: #10231a; font-size: 14px; }
.ai-provider-picker-head small,
.ai-provider-option small,
.field-help { color: #66736d; font-size: 11px; line-height: 1.55; }
.ai-provider-picker-head > span { color: #126447; font-size: 12px; font-weight: 900; }

.ai-provider-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ai-provider-option {
  position: relative;
  min-height: 106px;
  padding: 14px;
  border: 1px solid #d4dfd7;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  display: grid;
  align-content: start;
  gap: 8px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.ai-provider-option:hover { border-color: #8eb29a; transform: translateY(-1px); }
.ai-provider-option.selected { border-color: #126447; box-shadow: 0 0 0 2px #12644717; background: #f8fcf9; }
.ai-provider-option b { color: #10231a; font-size: 13px; }
.ai-provider-option em,
.ai-provider-option i { font-size: 10px; font-style: normal; font-weight: 900; }
.ai-provider-option i { color: #126447; margin-top: auto; }
.ai-provider-option:focus-visible { outline: 3px solid #bff253; outline-offset: 2px; }

.model-select-help,
.field-help { display: block; margin-top: 3px; font-weight: 500; }
.model-select-help b { color: #126447; }

@media (max-width: 1020px) {
  .ai-provider-grid { grid-template-columns: 1fr; }
  .ai-provider-option { min-height: 88px; }
}

@media (max-width: 760px) {
  .ai-provider-picker-head,
  .ai-provider-picker-head > div { align-items: flex-start; flex-direction: column; gap: 4px; }
}