.action-chips button {
  background: #f2f4f7;
  border: 0;
  border-radius: 7px;
  color: #667085;
  cursor: not-allowed;
  font-size: 12px;
  opacity: 1;
  padding: 6px 9px;
}

.settings-grid {
  grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.2fr);
}

.settings-status > div:first-child {
  border-top: 0;
}

.diagnostics h3 {
  font-size: 15px;
  margin: 24px 0 12px;
}

.diagnostic-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 8px;
}

.stock-diagnostic-form {
  align-items: center;
  display: flex;
  gap: 8px;
}

.stock-diagnostic-form input {
  width: 220px;
}

.diagnostic-result {
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding: 13px 15px;
}

.diagnostic-result.ok {
  background: #ecfdf3;
  border-color: #abefc6;
}

.diagnostic-result.failed {
  background: #fff6ed;
  border-color: #fedf89;
}

.diagnostic-result > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.diagnostic-result span {
  color: #667085;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.diagnostic-result p {
  margin: 0;
}

.diagnostic-order-list {
  display: grid;
  gap: 10px;
}

.diagnostic-order-list article {
  border: 1px solid #e5e9f0;
  border-radius: 10px;
  padding: 14px;
}

.diagnostic-order-list article > div:first-child,
.diagnostic-finance {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.diagnostic-order-list p {
  line-height: 1.6;
  margin: 10px 0;
}

.diagnostic-finance {
  color: #475467;
  font-size: 12px;
}

.raw-json {
  border-top: 1px solid #e5e9f0;
  margin-top: 22px;
  padding-top: 16px;
}

.raw-json summary {
  color: #1769e0;
  cursor: pointer;
  font-weight: 600;
}

.raw-json pre {
  background: #101828;
  border-radius: 10px;
  color: #d0d5dd;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  max-height: 520px;
  overflow: auto;
  padding: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 760px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .diagnostic-actions,
  .diagnostic-actions form,
  .diagnostic-actions .button,
  .stock-diagnostic-form,
  .stock-diagnostic-form input {
    width: 100%;
  }

  .stock-diagnostic-form {
    align-items: stretch;
    flex-direction: column;
  }

  .diagnostic-result > div,
  .diagnostic-finance {
    align-items: flex-start;
    flex-direction: column;
  }

  .raw-json pre {
    max-width: 100%;
  }
}
